API tools faq
paste
ValerioLyndon

Shelter Style x Clarity for d-how9 (manga)

ValerioLyndon
Oct 9th, 2020 (edited)
168
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 59.61 KB | None | 0 0
raw download clone embed print report
  1. @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkbefore";
  2.  
  3. @\import "https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins&family=Roboto&display=swap";
  4.  
  5.  
  6.  
  7.  
  8. /*
  9.  
  10. Shelter Style by Takana no Hana x Clarity by Valerio Lyndon
  11.  
  12. Layout CSS was originally made by Takana no hana, edits by Shishio-kun and Valerio_Lyndon
  13.  
  14. If you need help with it please visit our group:
  15. https://myanimelist.net/clubs.php?cid=19736
  16.  
  17.  
  18. Learn how to customize the layout here:
  19. https://myanimelist.net/forum/?topicid=1640096
  20. */
  21.  
  22.  
  23.  
  24.  
  25.  
  26.  
  27.  
  28.  
  29.  
  30.  
  31.  
  32. /*CURRENTLY WATCHING WALLPAPER
  33. To change background images: Delete what's in the parenthesis. Upload the new background to Imgur or a similar site, then copy the direct link (or Original GIF link if it's animated) and paste it into the parenthesis. Save.
  34. */
  35. body[data-query*='"status":1'] {
  36. background-image: url(https://i.imgur.com/ZdN5VZs.jpg);
  37. }
  38. /*COMPLETED WALLPAPER*/
  39. body[data-query*='"status":2'] {
  40. background-image: url(https://i.imgur.com/A7Ml6b8.jpg);
  41. }
  42. /*ON HOLD WALLPAPER*/
  43. body[data-query*='"status":3'] {
  44. background-image: url(https://i.imgur.com/Eti76b5.png);
  45. }
  46. /*DROPPED WALLPAPER*/
  47. body[data-query*='"status":4'] {
  48. background-image: url(https://i.imgur.com/rVpMHnH.jpg);
  49. }
  50. /*PLANNED WALLPAPER*/
  51. body[data-query*='"status":6'] {
  52. background-image: url(https://i.imgur.com/t5jgh6K.png);
  53. }
  54. /*ALL ANIME/MANGA WALLPAPER*/
  55. body[data-query*='"status":7'] {
  56. background-image: url(https://i.imgur.com/XukJvYY.jpg);
  57. }
  58.  
  59.  
  60.  
  61.  
  62. /* BANNER AVATAR */
  63. .list-table .list-table-header:after {
  64. background-image: url(https://i.imgur.com/kKTFbmb.gif);
  65. }
  66.  
  67. /* BANNER QUOTE*/
  68. .cover-block::before {
  69. content: ""
  70. }
  71.  
  72.  
  73.  
  74.  
  75. /* ALL ANIME BANNER BUTTON */
  76. .status-menu-container .status-menu .status-button.all_anime {
  77. background-image:url(https://i.imgur.com/jsMYzfG.jpg); 
  78. }
  79. .status-menu-container .status-menu .status-button.all_anime:hover,
  80. .status-menu-container .status-menu .status-button.all_anime.on {
  81. background-image:url(https://i.imgur.com/P3SvI6l.gif); 
  82. }
  83.  
  84. /* CURRENTLY WATCHING BANNER BUTTON*/
  85. .status-menu-container .status-menu .status-button.watching,
  86. .status-menu-container .status-menu .status-button.reading  {
  87. background-image:url(https://i.imgur.com/8MI80jn.jpg); 
  88. left:8px !important;
  89. }
  90. .status-menu-container .status-menu .status-button.watching:hover,
  91. .status-menu-container .status-menu .status-button.watching.on,
  92. .status-menu-container .status-menu .status-button.reading:hover,
  93. .status-menu-container .status-menu .status-button.reading.on {
  94. background-image:url(https://i.imgur.com/SpMD6lW.gif);     
  95. }
  96.  
  97.  
  98. /* COMPLETED BANNER BUTTON*/
  99. .status-menu-container .status-menu .status-button.completed {
  100. background-image:url(https://i.imgur.com/retsst7.jpg); 
  101. left:16px !important;
  102. }
  103. .status-menu-container .status-menu .status-button.completed:hover,
  104. .status-menu-container .status-menu .status-button.completed.on {
  105. background-image:url(https://i.imgur.com/4BGTQoe.gif); 
  106. }
  107.  
  108.  
  109. /* ON HOLD BANNER BUTTON */
  110. .status-menu-container .status-menu .status-button.onhold {
  111. background-image:url(https://i.imgur.com/CChAMAJ.jpg); 
  112. left:24px !important;
  113. }
  114. .status-menu-container .status-menu .status-button.onhold:hover ,
  115. .status-menu-container .status-menu .status-button.onhold.on {
  116. background-image:url(https://i.imgur.com/dbpTbZq.gif);
  117. }
  118.  
  119.  
  120. /* DROPPED BANNER BUTTON*/
  121. .status-menu-container .status-menu .status-button.dropped {
  122. background-image:url(https://i.imgur.com/lSGqllv.png);
  123. left:32px !important;
  124. }
  125. .status-menu-container .status-menu .status-button.dropped:hover,
  126. .status-menu-container .status-menu .status-button.dropped.on {
  127. background-image:url(https://i.imgur.com/gkXIwuq.gif);
  128. }
  129.  
  130.  
  131. /* PLAN TO BANNER BUTTON */
  132. .status-menu-container .status-menu .status-button.plantowatch,
  133. .status-menu-container .status-menu .status-button.plantoread {
  134. background-image:url(https://i.imgur.com/xBnXoi5.jpg);
  135. left:40px !important;
  136. }
  137. .status-menu-container .status-menu .status-button.plantowatch:hover,
  138. .status-menu-container .status-menu .status-button.plantowatch.on,
  139. .status-menu-container .status-menu .status-button.plantoread:hover,
  140. .status-menu-container .status-menu .status-button.plantoread.on {
  141. background-image:url(https://i.imgur.com/e3HngxJ.gif);
  142. }
  143.  
  144.  
  145.  
  146.  
  147.  
  148.  
  149.  
  150. /* CURRENTLY WATCHING BANNER BACKGROUND */
  151. .list-unit.watching .list-status-title:after,.list-unit.reading .list-status-title:after {
  152. background-image: url(https://i.imgur.com/MDS7CN0.png);
  153. }
  154.  
  155. /* COMPLETED BANNER BACKGROUND */
  156. .list-unit.completed .list-status-title:after {
  157. background-image: url(https://i.imgur.com/SCH7VNc.png);
  158. }
  159.  
  160. /* ON-HOLD BANNER BACKGROUND */
  161. .list-unit.onhold .list-status-title:after {
  162. background-image: url(https://i.imgur.com/00PIYZe.jpg);
  163. }
  164.  
  165. /* DROPPED BANNER BACKGROUND */
  166. .list-unit.dropped .list-status-title:after {
  167. background-image: url(https://i.imgur.com/VTI4LwN.png);
  168. }
  169.  
  170. /* PLAN TO BANNER BACKGROUND */
  171. .list-unit.plantowatch .list-status-title:after ,
  172. .list-unit.plantoread .list-status-title:after {
  173. background-image: url(https://i.imgur.com/Tl8hXDP.jpg);
  174. }
  175.  
  176. /* ALL ANIME/MANGA BANNER BACKGROUND */
  177. .list-unit.all_anime .list-status-title:after {
  178. background-image: url(https://i.imgur.com/9RsCzqP.jpg);
  179. }
  180.  
  181.  
  182. /* BOTTOM RENDER
  183. Change the percentage after width to control the size.
  184. Change the numbers after left to move the bottom render where you want.
  185. Remove the link in parenthesis to delete the render, or set height to 0.
  186. */
  187.  
  188.  footer::after {
  189.   width: 20%;
  190.   height: 100%;
  191.   left:calc(50% + 560px);
  192.   background: url() no-repeat bottom right;}
  193.  
  194.  
  195. /* ANIME/MANGA CONTAINER SETTINGS */
  196.  
  197. .list-unit {
  198. background-color: rgba(0,0,0,.4) ;
  199. }
  200.  
  201. .status-menu-container {
  202. background-color: rgba(0,0,0,.4) ;
  203. }
  204.  
  205. /*==============================*\
  206.          CLARITY COLOURS
  207. \*==============================*/
  208.  
  209. :root {
  210.     /* Generic Colours */
  211.     --bg: rgba(0,0,0,0.6);
  212.     --bg-dark: #444;
  213.     --text: #ababab;
  214.     --text-h: #416abe;
  215.     --text-dim: #999;
  216.     --text-dim-h: #777;
  217.     --text-dark: #ababab;
  218.     --shadow: rgba(0,0,0,0.8);
  219.     --icon: #959595;
  220.     --accent: #416abe;
  221.  
  222.     /* Button Colours */
  223.     --btn-bg: #191919;
  224.     --btn-bg-h: #ababab;
  225.     --btn-text-h: #212121;
  226.  
  227.     /* Single-Use Colours */
  228.     --edit-btn: #323232;
  229.     --checkmark: #416abe;
  230. }
  231.  
  232. /*==============================*\
  233.      END CLARITY COLOURS END
  234. \*==============================*/
  235.  
  236.  
  237.  
  238. /* GREYSCALE FOR CATEGORY BUTTONS */
  239. .status-menu-container .status-menu .status-button.watching,
  240. .status-menu-container .status-menu .status-button.reading,
  241. .status-menu-container .status-menu .status-button.completed,
  242. .status-menu-container .status-menu .status-button.onhold,
  243. .status-menu-container .status-menu .status-button.dropped,
  244. .status-menu-container .status-menu .status-button.plantowatch,
  245. .status-menu-container .status-menu .status-button.plantoread,
  246. .status-menu-container .status-menu .status-button.all_anime
  247. {
  248. filter: grayscale(100%);
  249. }
  250.  
  251.  
  252. .status-menu-container .status-menu .status-button.all_anime:hover,
  253. .status-menu-container .status-menu .status-button.all_anime.on,
  254. .status-menu-container .status-menu .status-button.plantowatch:hover,
  255. .status-menu-container .status-menu .status-button.plantowatch.on,
  256. .status-menu-container .status-menu .status-button.plantoread:hover,
  257. .status-menu-container .status-menu .status-button.plantoread.on,
  258. .status-menu-container .status-menu .status-button.dropped:hover,
  259. .status-menu-container .status-menu .status-button.dropped.on,
  260. .status-menu-container .status-menu .status-button.onhold:hover,
  261. .status-menu-container .status-menu .status-button.onhold.on,
  262. .status-menu-container .status-menu .status-button.completed:hover,
  263. .status-menu-container .status-menu .status-button.completed.on,
  264. .status-menu-container .status-menu .status-button.watching:hover,
  265. .status-menu-container .status-menu .status-button.watching.on,
  266. .status-menu-container .status-menu .status-button.reading:hover,
  267. .status-menu-container .status-menu .status-button.reading.on{
  268. filter: inherit;
  269. }
  270.  
  271.  
  272.  
  273.  
  274.  
  275.  
  276. /* OTHER STUFF */
  277.  
  278.  
  279.  
  280. /* Removing default cover (banner) image */
  281.  
  282. #cover-image{
  283.    display: none;
  284. }
  285.  
  286.  
  287. .list-unit.watching:after, .list-unit.reading:after, .list-unit.onhold:after, .list-unit.plantowatch:after  {
  288. background-repeat: no-repeat;
  289. background-size: contain;
  290. height: 100%;
  291. background-position: right;
  292. display: inline-block !important;
  293. margin: auto !important;
  294. position: fixed !important;
  295. left: 0 !important;
  296. right: 0 !important;
  297. top: 0 !important;
  298. z-index: -5 !important;
  299. content: "";
  300. pointer-events: none;
  301. opacity: 1 !important;
  302. }
  303.  
  304. .list-unit.completed:after, .list-unit.dropped:after, .list-unit.all_anime:after {
  305. background-repeat: no-repeat;
  306. background-size: contain;
  307. height: 100%;
  308. background-position: right;
  309. display: inline-block !important;
  310. margin: auto !important;
  311. position: fixed !important;
  312. left: 0 !important;
  313. right: 0 !important;
  314. top: 0 !important;
  315. z-index: -5 !important;
  316. content: "";
  317. pointer-events: none;
  318. opacity: 1 !important;
  319. }
  320.  
  321.  
  322.  
  323. .list-unit .list-status-title .text {
  324.     display: block;
  325.     position:absolute;
  326.     width: 1180px;
  327.     height: 38px !important;
  328.     font-size: 22px;
  329.     color: #fff;
  330.     font-family: 'Kaushan Script', cursive;
  331.     text-align: center;
  332.     vertical-align: middle;
  333. text-align: center;
  334. border:none;
  335. text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #FFF !important;
  336.  background-color: transparent;
  337. margin-top: -30px !important;
  338. z-index:10 !important;
  339. }
  340.  
  341. .list-table .list-table-header:after {
  342.     position:absolute;
  343.     height: 120px !important;
  344. width: 120px! important;
  345. background-repeat: no-repeat;
  346. background-size: contain;
  347. position: absolute;
  348. display:block !important;
  349. margin-left:57px;
  350. margin-top:-280px;
  351. content: "";
  352. padding: 5px;
  353. background-color:#fff;
  354. box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3);
  355. border-radius:5px;
  356. border: #fff 2px solid;
  357. pointer-events: none;
  358. z-index: 10 !important;
  359. }
  360.  
  361.  footer::after {
  362.   content: "";
  363.   display: block;
  364.   position: fixed;
  365.   bottom: 0px;
  366.   background-size: 100%;
  367.   pointer-events: none;
  368. z-index: 3; }
  369.  
  370. .cover-block::after {
  371.     display: none !important;
  372. }
  373.  
  374.  
  375. .list-unit.watching .list-status-title:after,
  376. .list-unit.reading .list-status-title:after {
  377. color: transparent;
  378. height: 755px !important;
  379. width: 1176px! important;
  380. background-repeat: no-repeat;
  381. background-size: contain;
  382. position: absolute !important;
  383. display: block !important;
  384. left: 0 !important;
  385. right: 0 !important;
  386. margin-top: -500px !important;
  387. content: "";
  388. z-index: 0 !important;
  389. margin-bottom: 20px !important;
  390. pointer-events: none;
  391. }
  392.  
  393.  
  394.  
  395. .list-unit.completed .list-status-title:after {
  396. color: transparent;
  397. height: 755px !important;
  398. width: 1176px! important;
  399. background-repeat: no-repeat;
  400. background-size: contain;
  401. position: absolute !important;
  402. display: block !important;
  403. left: 0 !important;
  404. right: 0 !important;
  405. margin-top: -500px !important;
  406. content: "";
  407. z-index: 0 !important;
  408. margin-bottom: 20px !important;
  409. pointer-events: none;
  410. }
  411.  
  412. .list-unit.onhold .list-status-title:after {
  413. color: transparent;
  414. height: 755px !important;
  415. width: 1176px! important;
  416. background-repeat: no-repeat;
  417. background-size: contain;
  418. position: absolute !important;
  419. display: block !important;
  420. left: 0 !important;
  421. right: 0 !important;
  422. margin-top: -500px !important;
  423. content: "";
  424. z-index: 0 !important;
  425. margin-bottom: 20px !important;
  426. pointer-events: none;
  427. }
  428.  
  429. .list-unit.dropped .list-status-title:after {
  430. color: transparent;
  431. height: 755px !important;
  432. width: 1176px! important;
  433. background-repeat: no-repeat;
  434. background-size: contain;
  435. position: absolute !important;
  436. display: block !important;
  437. left: 0 !important;
  438. right: 0 !important;
  439. margin-top: -500px !important;
  440. content: "";
  441. z-index: 0 !important;
  442. margin-bottom: 20px !important;
  443. pointer-events: none;
  444. }
  445.  
  446. .list-unit.plantowatch .list-status-title:after , .list-unit.plantoread .list-status-title:after {
  447. color: transparent;
  448. height: 755px !important;
  449. width: 1176px! important;
  450. background-repeat: no-repeat;
  451. background-size: contain;
  452. position: absolute !important;
  453. display: block !important;
  454. left: 0 !important;
  455. right: 0 !important;
  456. margin-top: -500px !important;
  457. content: "";
  458. z-index: 0 !important;
  459. margin-bottom: 20px !important;
  460. pointer-events: none;
  461. }
  462.  
  463. .list-unit.all_anime .list-status-title:after {
  464. color: transparent;
  465. height: 755px !important;
  466. width: 1176px! important;
  467. background-repeat: no-repeat;
  468. background-size: contain;
  469. position: absolute !important;
  470. display: block !important;
  471. left: 0 !important;
  472. right: 0 !important;
  473. margin-top: -500px !important;
  474. content: "";
  475. z-index: 0 !important;
  476. margin-bottom: 20px !important;
  477. pointer-events: none;
  478. }
  479.  
  480. #advanced-options {
  481.     position: fixed;
  482.     top: 24px;
  483.     left: 0;
  484.     right: 0;
  485.     display: none;
  486.     width: 860px;
  487.     margin: 0 auto;
  488.     padding: 25px 0px 30px;
  489.     -moz-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3);
  490.     -webkit-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3);
  491.     -o-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3);
  492.     -ms-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3);
  493.     box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3);
  494.     color: #fff;
  495.     text-align: left;
  496.     font-family: Poppins;
  497.     z-index: 1101;
  498.     border: none;
  499. background-image: url(http://i.imgur.com/xD2LRjG.png);
  500. background-color:rgba(0,0,0,.5);
  501.     background-repeat: no-repeat;
  502.     background-size: cover;
  503.     background-position: 50% 50%;}
  504.    
  505. #advanced-options .advanced-options-header {
  506.     width: 750px;
  507.     margin: 0px auto;
  508.     padding-bottom: 4px;
  509.     border-bottom: 1px solid #fff;
  510.     font-size: 16px;
  511.     color:#fff !important;
  512. }
  513.  
  514.  
  515. #advanced-options .advanced-options-header .description {
  516.     font-size: 12px;
  517.     font-weight: normal;
  518.     margin-left: 8px;
  519.     color:#fff !important;
  520. }
  521.  
  522. #advanced-options .sort-widget .widget-header, #advanced-options .filter-widget .widget-header, #advanced-options .filter-widget.aired-date .text, #advanced-options .filter-widget.published-date .text {
  523. color:#fff !important;
  524. }
  525.  
  526. #advanced-options select {
  527.     -ms-appearance: none;
  528.     -webkit-appearance: none;
  529.     -moz-appearance: none;
  530.     appearance: none;
  531.     background-image: url(/img/pc/ownlist/icon_pulldown_triangle.png);
  532.     background-repeat: no-repeat;
  533.     background-position: center right;
  534.     background-size: 18px 8px;
  535.     background-color: #FFFFFF;
  536.     display: inline-block;
  537.     height: 25px;
  538.     padding: 4px 20px 4px 4px;
  539.     padding-right: 4px\0;
  540.     border: #BEBEBE 1px solid;
  541.     border-radius: 0px;
  542.     font-size: 12px;
  543. }
  544. #advanced-options select::-ms-expand {
  545.     display: none;
  546. }
  547.  
  548. #advanced-options select:disabled {
  549.     background-image: url(/img/pc/ownlist/icon_pulldown_triangle_disable.png);
  550.     color: #9B9B9B;
  551. }
  552.  
  553. #advanced-options input[type=text] {
  554.     padding: 4px;
  555.     border: #BEBEBE 1px solid;
  556. }
  557.  
  558. #advanced-options input:focus {
  559.     outline: none;
  560. }
  561.  
  562.  
  563. /* sort */
  564. #advanced-options .sort-widget {
  565.     margin: 0px auto;
  566.     padding: 12px 0px 0px;
  567.     width: 750px;
  568. }
  569. #advanced-options .sort-widget:last-of-type {
  570.     padding-bottom: 45px;
  571. }
  572.  
  573. #advanced-options .sort-widget select {
  574.     width: 172px;
  575.     margin-right: 8px;
  576. }
  577.  
  578. #advanced-options .sort-widget input[type=radio] {
  579.     display: none;
  580. }
  581. #advanced-options .sort-widget input[type=radio] + label {
  582.     background-color: #FFFFFF;
  583.     display: inline-block;
  584.     width: 56px;
  585.     padding: 5px 0px;
  586.     border: #BEBEBE 1px solid;
  587.     border-radius: 4px;
  588.     color: #323232;
  589.     font-size: 12px;
  590.     text-align: center;
  591.     cursor: pointer;
  592. }
  593. #advanced-options .sort-widget input[type=radio]:checked + label {
  594.     background-color: #244291;
  595.     border: #244291 1px solid;
  596.     color: #FFFFFF;
  597. }
  598. #advanced-options .sort-widget input[type=radio]:disabled + label {
  599.     border: #BEBEBE 1px solid;
  600.     color: #9B9B9B;
  601. }
  602. #advanced-options .sort-widget input[type=radio]:checked:disabled + label {
  603.     background-color: #FFFFFF;
  604.     border: #BEBEBE 1px solid;
  605.     color: #9B9B9B;
  606. }
  607.  
  608. /* filter */
  609. #advanced-options .filter-widget {
  610.     margin: 0px auto;
  611.     padding: 12px 0px 0;
  612.     width: 750px;
  613. }
  614.  
  615. #advanced-options .filter-widget select {
  616.     margin-right: 8px;
  617.     font-size: 12px;
  618. }
  619.  
  620. #advanced-options .filter-widget.title input[type=text] {
  621.     width: 360px;
  622. }
  623.  
  624. #advanced-options .filter-widget.airing-status select,
  625. #advanced-options .filter-widget.publishing-status select {
  626.     width: 152px;
  627. }
  628.  
  629. #advanced-options .filter-widget.producer select,
  630. #advanced-options .filter-widget.magazine select {
  631.     width: 360px;
  632. }
  633.  
  634. #advanced-options .filter-widget.aired-date select.year,
  635. #advanced-options .filter-widget.published-date select.year {
  636.     width: 80px;
  637. }
  638.  
  639. #advanced-options .filter-widget.aired-date select.month,
  640. #advanced-options .filter-widget.published-date select.month,
  641. #advanced-options .filter-widget.aired-date select.day,
  642. #advanced-options .filter-widget.published-date select.day {
  643.     width: 60px;
  644. }
  645.  
  646. #advanced-options .filter-widget.aired-date .text,
  647. #advanced-options .filter-widget.published-date .text {
  648.     display: inline-block;
  649.     margin-right: 4px;
  650.     font-size: 12px;
  651. }
  652.  
  653. #advanced-options .filter-widget.aired-season select.year {
  654.     width: 80px;
  655. }
  656.  
  657. #advanced-options .filter-widget.aired-season select.season {
  658.     width: 110px;
  659. }
  660.  
  661. #advanced-options .sort-widget .widget-header,
  662. #advanced-options .filter-widget .widget-header {
  663.     display: inline-block;
  664.     width: 110px;
  665.     font-size: 12px;
  666.     font-family: Poppins;
  667. }
  668.  
  669. #advanced-options .sort-widget:last-of-type,
  670. #advanced-options .filter-widget:last-of-type {
  671.     padding-bottom: 40px;
  672. }
  673.  
  674. #advanced-options .advanced-options-button {
  675.     width: 750px;
  676.     margin: 0px auto;
  677.     padding: 12px 0px 0px;
  678.     border-top: 1px solid #BEBEBE;
  679.     text-align: center;
  680. }
  681.  
  682. #advanced-options .btn-apply,
  683. #advanced-options .btn-clear {
  684.     background-color: rgba(0,0,0, 0.8);
  685.     display: inline-block;
  686.     width: 135px;
  687.     margin: 0 4px;
  688.     padding: 6px 0px;
  689.     border-radius: 4px;
  690.     font-size: 12px;
  691.     color: #FFFFFF;
  692.     text-align: center;
  693.     -moz-transition-property: all;
  694.     -o-transition-property: all;
  695.     -webkit-transition-property: all;
  696.     transition-property: all;
  697.     -moz-transition-duration: 0.3s;
  698.     -o-transition-duration: 0.3s;
  699.     -webkit-transition-duration: 0.3s;
  700.     transition-duration: 0.3s;
  701.     -moz-transition-timing-function: ease-in-out;
  702.     -o-transition-timing-function: ease-in-out;
  703.     -webkit-transition-timing-function: ease-in-out;
  704.     transition-timing-function: ease-in-out;
  705. }
  706.  
  707. #advanced-options .btn-apply:hover,
  708. #advanced-options .btn-clear:hover {
  709.   background-color: rgba(0,0,0, 0.8);
  710. }
  711.  
  712.  
  713.  
  714. /**
  715.  * General Styles
  716.  */
  717.  
  718. a {
  719.     color: #fff;
  720.     text-decoration: none;
  721. }
  722. a:hover {
  723.     color: #fff !important;
  724.     text-decoration: none;
  725. }
  726.  
  727. #footer-block {
  728.     padding: 15px 0;
  729.     background-color: #244291;
  730.     color: #FFFFFF;
  731.     font-family: Poppins;
  732.     display:none;
  733. }
  734.  
  735. #copyright {
  736.     font-size: 12px;
  737.     color: #FFFFFF;
  738.     padding-top: 3px;
  739.     text-align: center;
  740. }
  741.  
  742. /*
  743.  * Header
  744.  */
  745. .header a {
  746.     font-weight: bold;
  747.     color: #fff !important;
  748. }
  749. .header a:hover {
  750.     text-decoration: underline;
  751. }
  752.  
  753. .header {
  754.     position: absolute;
  755.     color: #fff;
  756.     display: block;
  757.     width: 100%;
  758.     height: 50px;
  759.     margin: 0 auto
  760.     border:none;
  761.     background: -webkit-linear-gradient(rgba(0,0,0,.4), transparent); /* For Safari 5.1 to 6.0 */
  762.     background: -o-linear-gradient(rgba(0,0,0,.4), transparent); /* For Opera 11.1 to 12.0 */
  763.     background: -moz-linear-gradient(rgba(0,0,0,.4), transparent); /* For Firefox 3.6 to 15 */
  764.     background: linear-gradient(rgba(0,0,0,.4), transparent); /* Standard syntax */
  765.     -moz-transition-property: all;
  766.     -o-transition-property: all;
  767.     -webkit-transition-property: all;
  768.     transition-property: all;
  769.     -moz-transition-duration: 0.3s;
  770.     -o-transition-duration: 0.3s;
  771.     -webkit-transition-duration: 0.3s;
  772.     transition-duration: 0.3s;
  773.     -moz-transition-timing-function: ease-in-out;
  774.     -o-transition-timing-function: ease-in-out;
  775.     -webkit-transition-timing-function: ease-in-out;
  776.     transition-timing-function: ease-in-out;
  777.     z-index: 40;
  778. }
  779.  
  780. .header:hover {background-color:rgba(0,0,0,.5);
  781.   -moz-transition-property: all;
  782.     -o-transition-property: all;
  783.     -webkit-transition-property: all;
  784.     transition-property: all;
  785.     -moz-transition-duration: 0.3s;
  786.     -o-transition-duration: 0.3s;
  787.     -webkit-transition-duration: 0.3s;
  788.     transition-duration: 0.3s;
  789.     -moz-transition-timing-function: ease-in-out;
  790.     -o-transition-timing-function: ease-in-out;
  791.     -webkit-transition-timing-function: ease-in-out;
  792.     transition-timing-function: ease-in-out;
  793.  
  794. }
  795.  
  796. .header .header-menu {
  797.     position: absolute;
  798.     top: 5px;
  799.     right: 4px
  800. }
  801. .header .header-menu.other {
  802.     top: 5px;
  803. }
  804.  
  805.  
  806.  
  807. .header .header-menu .header-info {
  808.     font-size: 10px;
  809.     margin-top: 6px;
  810.     margin-right: 15px;
  811.     text-align: right;
  812. }
  813.  
  814. .header .username {
  815.     font-weight: bold;
  816. }
  817.  
  818. .header .header-menu .list-menu {
  819.     position: absolute;
  820.     top: 25px;
  821.     right: -4px;
  822.     background-color: rgba(255,255,255,.8);
  823.     display: none;
  824.     border: none !important;
  825.     -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 0 10px;
  826.     -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 10px;
  827.     box-shadow: rgba(0, 0, 0, 0.4) 0 0 10px;
  828.     z-index: 1;
  829. }
  830.  
  831. .header .header-menu .list-menu .icon-menu {
  832.     display: block;
  833.     width: 150px;
  834.     height: 30px;
  835.     color: #000;
  836.     font-size: 14px;
  837.     font-weight: bold;
  838.     text-decoration: none;
  839.     -moz-transition-property: all;
  840.     -o-transition-property: all;
  841.     -webkit-transition-property: all;
  842.     transition-property: all;
  843.     -moz-transition-duration: 0.3s;
  844.     -o-transition-duration: 0.3s;
  845.     -webkit-transition-duration: 0.3s;
  846.     transition-duration: 0.3s;
  847.     -moz-transition-timing-function: ease-in-out;
  848.     -o-transition-timing-function: ease-in-out;
  849.     -webkit-transition-timing-function: ease-in-out;
  850.     transition-timing-function: ease-in-out;
  851. }
  852.  
  853. .header .header-menu .list-menu .icon-menu:hover {
  854.     background-color: rgba(0,0,0,.5);
  855. }
  856.  
  857. .header .header-menu .list-menu .icon-menu svg.icon {
  858.     position: absolute;
  859.     fill: rgba(0,0,0,.5);
  860.     left: 12px;
  861.     top: 4px;
  862. }
  863.  
  864. .header .header-menu .list-menu .icon-menu:hover svg.icon {
  865.     fill: rgba(255,255,255,1) !important;
  866. }
  867.  
  868. .header .header-menu .list-menu .icon-menu .text {
  869.     position: absolute;
  870.     left: 52px;
  871.     top: 6px;
  872. }
  873.  
  874. .header .header-menu .list-menu .icon-menu:hover .text {color:rgba(255,255,255,1) !important;}
  875.  
  876. .header .header-menu .btn-menu {
  877. display: block;
  878.     text-align: right;
  879. color: rgba(0,0,0,0.7) !important;
  880. font-size: 12px !important;
  881. text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000;
  882. }
  883.  
  884. #header-menu-dropdown > a {color: rgba(0,0,0,.5) !important;}
  885.  
  886. /* svg.icon.icon-manga-list {color: rgba(0,0,0,.5) !important;} */
  887.  
  888. /**
  889.  * Floating Menu
  890.  */
  891. /**
  892.  * Floating Menu
  893.  */
  894. .list-menu-float:before
  895. {content: "\f0c9";
  896. font-family: 'FontAwesome' !important;
  897. display: block;
  898. text-align: center !important;
  899. text-indent: 10px;
  900. color: #fff !important;
  901. font-size:1.5em !important;
  902. height: 50px;
  903. width: 40px;
  904. line-height: 50px;}
  905.  
  906. .list-menu-float:hover:before {
  907. font-size:1.7em !important;
  908. text-shadow: 0 0 2px #fff, 0 0 1px #fff, 1px 1px 7px #fff, 0 0 0 #fff;
  909. -moz-transition-property: all;
  910.     -o-transition-property: all;
  911.     -webkit-transition-property: all;
  912.     transition-property: all;
  913.     -moz-transition-duration: 0.3s;
  914.     -o-transition-duration: 0.3s;
  915.     -webkit-transition-duration: 0.3s;
  916.     transition-duration: 0.3s;
  917.     -moz-transition-timing-function: ease-in-out;
  918.     -o-transition-timing-function: ease-in-out;
  919.     -webkit-transition-timing-function: ease-in-out;
  920.     transition-timing-function: ease-in-out;
  921. }
  922.  
  923. .list-menu-float
  924. {position: absolute;
  925. top: 0px;
  926. left:0px;
  927. width: 50px;
  928. border: none;
  929. opacity: 1;
  930. height: 40px !important;
  931. z-index: 100;
  932.  
  933. }
  934.  
  935. .list-menu-float .icon-menu
  936. {display: block;
  937. width: 120px;
  938. background-color: #dfdfdf;
  939. height: 30px;
  940. line-height: 30px;
  941. text-indent: 10px;
  942. opacity:0;
  943.  }
  944.  
  945. .list-menu-float:hover .icon-menu
  946. {opacity:1;
  947. -moz-transition-property: all;
  948.     -o-transition-property: all;
  949.     -webkit-transition-property: all;
  950.     transition-property: all;
  951.     -moz-transition-duration: 0.3s;
  952.     -o-transition-duration: 0.3s;
  953.     -webkit-transition-duration: 0.3s;
  954.     transition-duration: 0.3s;
  955.     -moz-transition-timing-function: ease-in-out;
  956.     -o-transition-timing-function: ease-in-out;
  957.     -webkit-transition-timing-function: ease-in-out;
  958.     transition-timing-function: ease-in-out;}
  959.  
  960. .list-menu-float .icon-menu.profile
  961. {background-image: none !important;}
  962.  
  963. .list-menu-float .icon-menu.profile:before
  964. {position:absolute;
  965. width:120px !important;
  966. content: "\f007\00a0Profile";
  967. font-family: 'FontAwesome' !important;
  968. margin-top:5px !important;
  969. margin-left:-65px !important;
  970. color: #000;
  971. text-align: center;}
  972.  
  973. .list-menu-float .icon-menu .text
  974. {opacity: 1;
  975. width: auto;
  976. left: 20px;
  977. top: 0;
  978. color: #555555;}
  979.  
  980. .list-menu-float .icon-menu:hover
  981. {width: 120px !important;
  982. background-color:rgba(0,0,0,.5) !important;}
  983.  
  984. .list-menu-float .icon-menu:hover .text, .list-menu-float .icon-menu:hover:before, .list-menu-float .icon-menu:hover:after
  985. {color: #fff;
  986. width: auto;}
  987.  
  988. .list-menu-float .icon-menu.logout
  989. {border-radius: 0 0 4px 4px;}
  990.  
  991. .list-menu-float .icon-menu.setting
  992. {display:none;}
  993.  
  994. .list-menu-float .icon-menu svg.icon
  995. {top: 7px !important;
  996. left: 5px !important;
  997. width: 15px;
  998. height: 15px;}
  999.  
  1000. .list-menu-float .icon-menu.setting svg.icon-setting {display:none;}
  1001. /**
  1002.  * List Container
  1003.  */
  1004.  
  1005. .list-container {
  1006.     position: absolute;
  1007.     background-color: transparent !important;
  1008.     width: 1200px;
  1009.     left: 0;
  1010.     right: 0;
  1011.     margin: auto;
  1012.     margin-top:100px;
  1013.     /* box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000; */
  1014.     border:none !important;
  1015.     margin-bottom:30px;
  1016. }
  1017.  
  1018. /**
  1019.  * List Container - Cover Block
  1020.  */
  1021. .cover-block {
  1022.     position:relative;
  1023.     display: block;
  1024.     width: 1180px;
  1025.     margin: 0 auto;
  1026.     height:auto;
  1027.     text-align: center;
  1028.     vertical-align: middle;
  1029.     box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000;
  1030.     z-index: -1 !important;
  1031. }
  1032.  
  1033. .cover-block .image-container {
  1034.     display: block;
  1035.     width: 1180px;
  1036.     height:auto;
  1037.     padding-top:0;
  1038. }
  1039.  
  1040. .cover-block .image-container.hide {
  1041.     display: none;
  1042. }
  1043.  
  1044. .cover-block .image-container img {
  1045.     max-width: 1180px;
  1046.     height: auto;
  1047. }
  1048.  
  1049. /* cover image */
  1050.  
  1051. #cover-image{
  1052.  
  1053.   margin:auto;
  1054.   width:1180px !important;
  1055.   height:auto;
  1056.   background-color:transparent;
  1057.   background-size: cover !important;
  1058.   background-position: 50% 50%;
  1059. }
  1060.  
  1061. /* setting icon */
  1062. .cover-block .image-container .btn-list-setting {
  1063.      display: none;
  1064. }
  1065.  
  1066. .cover-block .image-container:hover .btn-list-setting {
  1067.     display: none;
  1068.     position: absolute;
  1069.     top: 20px;
  1070.     right: 28px;
  1071.     padding: 8px;
  1072.     border: rgba(255,255,255,0) 1px solid;
  1073.     font-size: 14px;
  1074.     color: #ffffff;
  1075.     font-family: 'Helvetica neue', Helvetica, "lucida grande", tahoma, verdana, arial, sans-serif;
  1076. }
  1077.  
  1078.  
  1079.  
  1080. .cover-block .image-container .btn-list-setting:hover {
  1081.     position: absolute;
  1082.     top: 20px;
  1083.     right: 28px;
  1084.     background-color: rgba(0,0,0,0.6);
  1085.     padding: 8px;
  1086.     border: none;
  1087.     -moz-box-shadow: 0 0 4px #000000;
  1088.     -webkit-box-shadow: 0 0 4px #000000;
  1089.     -o-box-shadow: 0 0 4px #000000;
  1090.     -ms-box-shadow: 0 0 4px #000000;
  1091.     box-shadow: 0 0 4px #000000;
  1092.     font-size: 14px;
  1093.     color: #ffffff;
  1094.     text-shadow: #323232 1px 1px 1px;
  1095.    
  1096. }
  1097.  
  1098. .cover-block .image-container .btn-list-setting .fa-camera {
  1099.     font-size: 16px;
  1100.     -moz-text-shadow: #000000 1px 1px 3px;
  1101.     -webkit-text-shadow: #000000 1px 1px 3px;
  1102.     -o-text-shadow: #000000 1px 1px 3px;
  1103.     -ms-text-shadow: #000000 1px 1px 3px;
  1104.     text-shadow: #000000 1px 1px 3px;
  1105.     -ms-filter:"progid:DXImageTransform.Microsoft.DropShadow(color=#000000,offx=1,offy=1)";
  1106.    
  1107. }
  1108.  
  1109. .cover-block .image-container .btn-list-setting .icon-plus-circle {
  1110.     position: absolute;
  1111.     top: 4px;
  1112.     left: 18px;
  1113.     background-color: rgba(0,0,0,0.6);
  1114.     border-radius: 50%;
  1115.     -moz-box-shadow: -1px 1px 0px 0px #323232;
  1116.     -webkit-box-shadow: -1px 1px 0px 0px #323232;
  1117.     -o-box-shadow: -1px 1px 0px 0px #323232;
  1118.     -ms-box-shadow: -1px 1px 0px 0px #323232;
  1119.     box-shadow: -1px 1px 0px 0px #323232;
  1120.     font-size: 10px;
  1121.    
  1122. }
  1123.  
  1124. .cover-block .image-container .btn-list-setting .text {
  1125.   display: none;
  1126. }
  1127.  
  1128. .cover-block .image-container .btn-list-setting:hover .text {
  1129.   display: inline-block;;
  1130.   margin-left: 4px;
  1131. }
  1132.  
  1133.  
  1134. /**
  1135.  * List Container - Status Menu
  1136.  */
  1137.  
  1138. .status-menu-container .status-menu:after {
  1139.     border: 5px solid;
  1140.     border-top-color: transparent;
  1141.     border-right-color: rgba(0,0,0,.6);
  1142.     border-bottom-color: rgba(0,0,0,.6);
  1143.     border-left-color: transparent;
  1144.     content: "";
  1145.     height: 0;
  1146.     left: 0;
  1147.     margin-top: -10px;
  1148.     width: 0;
  1149.     position: absolute;
  1150.     z-index: -2 !important;
  1151.  }
  1152.  
  1153.  .status-menu-container .status-menu:before {
  1154.     border: 5px solid;
  1155.     border-top-color: transparent;
  1156.     border-right-color: transparent;
  1157.     border-bottom-color: rgba(0,0,0,.6);
  1158.     border-left-color: rgba(0,0,0,.6);
  1159.     content: "";
  1160.     height: 0;
  1161.     right: 0;
  1162.     margin-top: -10px;
  1163.     width: 0;
  1164.     position: absolute;
  1165.     z-index: -2 !important;
  1166.  }
  1167.  
  1168.  
  1169. .status-menu-container {
  1170.     width: 1200px;
  1171.     height: 80px;
  1172.  
  1173.     background-image:url();
  1174.     background-repeat:repeat;
  1175.     border-bottom: none;
  1176.     box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000;
  1177.     z-index: 2 !important;
  1178. }
  1179.  
  1180. .status-menu-container.fixed {
  1181.     display: none !important;
  1182. }
  1183.  
  1184. .status-menu-container.fixed + div.list-block {
  1185.    min-height:500px;
  1186. }
  1187.  
  1188. .status-menu-container .status-menu {
  1189.     display: table;
  1190.     margin: 0 auto;
  1191.     border-collapse: separate;
  1192.     border-spacing: 0px 0;
  1193.     z-index:2 !important;
  1194. }
  1195.  
  1196. .status-menu-container .status-menu .status-button {
  1197.     padding:0 !important;
  1198.     position: relative;
  1199.     display: table-cell;
  1200.     font-family: 'Poppins', cursive;
  1201.     text-align: center;
  1202.     vertical-align: bottom !important;
  1203.     font-size: 22px;
  1204.     font-weight:600 !important;
  1205.     color: #fff;
  1206.     width:125px;
  1207.     height:74px;
  1208.     z-index:10;
  1209.     background-size:cover;
  1210.     background-position:50% 50%;
  1211.     background-repeat:no-repeat;
  1212. border-radius:5px !important;
  1213.  
  1214.     top:2px;
  1215. }
  1216.  
  1217.  
  1218.  
  1219.  
  1220.  
  1221. /* */
  1222.  
  1223. .status-menu-container .status-menu .status-button.on {
  1224.     color: #fff;
  1225.     font-weight: bold;
  1226.     text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000;
  1227.     border: #fff 1px solid;
  1228.     box-sizing: border-box;
  1229.     box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 4px #000, 0 0 0 #000;
  1230. }
  1231.  
  1232. .status-menu-container .status-menu .status-button:hover {
  1233.     border: #fff 1px solid;
  1234.     box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 4px #000, 0 0 0 #000;
  1235.     text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000;
  1236.         box-sizing: border-box;
  1237.     background-color: transparent;
  1238.     color: #fff;
  1239.     -moz-transition-property: all;
  1240.     -o-transition-property: all;
  1241.     -webkit-transition-property: all;
  1242.     transition-property: all;
  1243.     -moz-transition-duration: 0.3s;
  1244.     -o-transition-duration: 0.3s;
  1245.     -webkit-transition-duration: 0.3s;
  1246.     transition-duration: 0.3s;
  1247.     -moz-transition-timing-function: ease-in-out;
  1248.     -o-transition-timing-function: ease-in-out;
  1249.     -webkit-transition-timing-function: ease-in-out;
  1250.     transition-timing-function: ease-in-out;
  1251. }
  1252.  
  1253. .status-menu-container .status-menu .status-button.on:after, .status-menu .status-button:hover:after {
  1254.     opacity: 1
  1255. }
  1256.  
  1257. /* .status-menu-container .status-menu .status-button.watching:before, .status-menu-container .status-menu .status-button.reading:before {
  1258. content: "\f152\00a0\00a0";
  1259. float: left;
  1260. font-size: 1.5em;
  1261. font-family: 'FontAwesome' !important;
  1262. }
  1263.  
  1264. .status-menu-container .status-menu .status-button.completed:before {
  1265. content: "\f05d\00a0\00a0";
  1266. float: left;
  1267. font-size: 1.5em;
  1268. font-family: 'FontAwesome' !important;
  1269. }
  1270.  
  1271. .status-menu-container .status-menu .status-button.onhold:before {
  1272. content: "\f017\00a0\00a0";
  1273. float: left;
  1274. font-size: 1.5em;
  1275. font-family: 'FontAwesome' !important;
  1276. }
  1277.  
  1278. .status-menu-container .status-menu .status-button.plantowatch:before, .status-menu-container .status-menu .status-button.plantoread:before {
  1279. content: "\f073\00a0\00a0";
  1280. float: left;
  1281. font-size: 1.5em;
  1282. font-family: 'FontAwesome' !important;
  1283. }
  1284.  
  1285. .status-menu-container .status-menu .status-button.dropped:before {
  1286. content: "\f00d\00a0\00a0";
  1287. float: left;
  1288. font-size: 1.5em;
  1289. font-family: 'FontAwesome' !important;
  1290. }
  1291.  
  1292. .status-menu-container .status-menu .status-button.all_anime:before {
  1293. content: "\f022\00a0";
  1294. float: left;
  1295. font-size: 1.5em;
  1296. font-family: 'FontAwesome' !important;
  1297. }*/
  1298.  
  1299. .status-menu-container .status-menu .status-button:after {display:none !important;}
  1300.  
  1301. /*scroll bar*/
  1302.  
  1303. ::-webkit-scrollbar
  1304. {height: 5px;
  1305. width: 7px;
  1306. background-color: #f5f5f5;}
  1307. ::-webkit-scrollbar-thumb
  1308. {border: 2px solid #f5f5f5;
  1309. border-radius: 2px;
  1310. background-color: #9B9B9B;}
  1311.  
  1312. /**
  1313.  * List Container - Status Menu - Search
  1314.  */
  1315. .status-menu-container .search-container {
  1316.     position: absolute;
  1317.     right: 5px;
  1318.     z-index:20;
  1319. }
  1320. .status-menu-container .search-container #search-button {
  1321.     display: inline-block;
  1322.     height: 22px;
  1323.     margin-top: 10px;
  1324.     color: #fff;
  1325.     font-size: 1.6em;
  1326.     vertical-align: middle;
  1327. }
  1328.  
  1329. .status-menu-container .search-container #search-box {
  1330.     display: inline-block;
  1331.     width: 0;
  1332.     height: 22px;
  1333.     overflow: hidden;
  1334.     margin-top: 5px;
  1335.     -webkit-transition: width 0.3s;
  1336.     -moz-transition: width 0.3s;
  1337.     transition: width 0.3s;
  1338.     -webkit-backface-visibility: hidden;
  1339.     vertical-align: middle;
  1340. }
  1341.  
  1342. .status-menu-container .search-container #search-box.open {
  1343.     display: inline-block;
  1344.     width: 130px;
  1345. }
  1346.  
  1347. .status-menu-container .search-container #search-box input {
  1348.     width: 100%;
  1349.     height: 100%;
  1350.     box-sizing: border-box;
  1351. }
  1352.  
  1353.  
  1354. /**
  1355.  * List Container - List Block
  1356.  */
  1357. .list-block {
  1358.     margin: 0;
  1359.     min-height:260px;
  1360. z-index: 1 !important;
  1361. }
  1362.  
  1363. .list-unit {
  1364.  
  1365.     margin: auto;
  1366.     width: 1176px;
  1367.     box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000;
  1368.     margin-top:15px;
  1369.     z-index: 1 !important;
  1370.     padding-top:500px;
  1371. }
  1372.  
  1373. /**
  1374.  * List Container - List Status Title (with Stats)
  1375.  */
  1376. .list-unit .list-status-title {
  1377.     position: relative;
  1378.     display: table-cell;
  1379.     background-color: transparent;
  1380.     width: 1180px;
  1381.    height:0;
  1382. }
  1383.  
  1384.  
  1385. .list-unit .list-status-title .stats a.filterd {
  1386.     text-shadow: 0px 0px 2px #FFF;
  1387. }
  1388.  
  1389. .list-unit .list-status-title .stats a:hover {
  1390.     background:rgba(0,0,0,.5);
  1391. padding:8px;
  1392.  -moz-transition-property: all;
  1393.     -o-transition-property: all;
  1394.     -webkit-transition-property: all;
  1395.     transition-property: all;
  1396.     -moz-transition-duration: 0.3s;
  1397.     -o-transition-duration: 0.3s;
  1398.     -webkit-transition-duration: 0.3s;
  1399.     transition-duration: 0.3s;
  1400.     -moz-transition-timing-function: ease-in-out;
  1401.     -o-transition-timing-function: ease-in-out;
  1402.     -webkit-transition-timing-function: ease-in-out;
  1403.     transition-timing-function: ease-in-out;
  1404. }
  1405.  
  1406.  
  1407. .list-unit .list-stats {
  1408. background-color: rgba(255,255,255,.8);
  1409. margin-top: -500px !important;
  1410. color : #000;
  1411. height: 25px;
  1412. margin:auto;
  1413. position: absolute;
  1414. width: 1176px;
  1415. z-index: 1 !important;
  1416. }
  1417.  
  1418. .list-unit .list-status-title .stats {
  1419.     position: absolute;
  1420.     height: 40px;
  1421.     line-height: 40px;
  1422.     width:180px;
  1423.     right: -55px;
  1424.     margin-top: -550px;
  1425.     z-index: 1;
  1426. }
  1427.  
  1428. .list-unit .list-status-title .stats a {
  1429.     color: #fff;
  1430.     padding:8px;
  1431. margin:0 !important;
  1432. }
  1433.  
  1434.  
  1435. /**
  1436.  * List Container - List Table
  1437.  */
  1438.  
  1439. .list-table {
  1440.     width: 100%;
  1441.     margin: 10px auto 0;
  1442.     border-collapse: collapse;
  1443.     background-color:transparent !important;
  1444.     color: #fff !important;
  1445.     border:none;
  1446. }
  1447.  
  1448. /* columns background color*/
  1449.  
  1450. .list-table > tbody:nth-of-type(2n+1) {
  1451.     background-color: transparent;
  1452.     background-image:url();
  1453.     background-repeat:repeat;
  1454.    
  1455. }
  1456.  
  1457. .list-table > tbody:nth-of-type(2n) {
  1458. background-color: transparent;
  1459.     background-image:url();
  1460.     background-repeat:repeat;
  1461.    
  1462. }
  1463.  
  1464.  /**
  1465.  * List Container - List Table - Header
  1466.  */
  1467.  
  1468.  
  1469.  
  1470. .list-table .list-table-header:before {content: "\f0dc\00a0SORT";
  1471. display: block;
  1472. text-align: center !important;
  1473. font-family: 'FontAwesome' !important;
  1474. text-indent: 0px;
  1475. color: #fff !important;
  1476. font-weight: 700 !important;
  1477. width: 57px;
  1478. line-height: 40px;
  1479. height:40px;
  1480. margin-left:0px !important;
  1481. margin-top:-40px;
  1482. position:absolute;
  1483. }
  1484.  
  1485. .list-table .list-table-header:hover:before {color:#fff !important;
  1486. background-color:rgba(0,0,0,.5);}
  1487.  
  1488. .list-table .list-table-header {
  1489.     position: absolute;
  1490.     display: block;
  1491.     left: 2px;
  1492.     top: 80px;
  1493.     z-index: 200 !important;   
  1494. }
  1495.  
  1496. .list-table .list-table-header .header-title {
  1497.      background: #F6F6F6 url("/img/pc/ownlist/bar-table-header.png") no-repeat right 7px / 1px 22px;
  1498.     display: block;
  1499.     border-bottom: 0;
  1500.     height: 39px;
  1501.     text-align: center;
  1502.     vertical-align: middle;
  1503.     z-index:60 !important;
  1504.     opacity:0;
  1505. }
  1506.  
  1507. .list-table .list-table-header:hover .header-title {opacity:1;
  1508. -moz-transition-property: all;
  1509.     -o-transition-property: all;
  1510.     -webkit-transition-property: all;
  1511.     transition-property: all;
  1512.     -moz-transition-duration: 0.3s;
  1513.     -o-transition-duration: 0.3s;
  1514.     -webkit-transition-duration: 0.3s;
  1515.     transition-duration: 0.3s;
  1516.     -moz-transition-timing-function: ease-in-out;
  1517.     -o-transition-timing-function: ease-in-out;
  1518.     -webkit-transition-timing-function: ease-in-out;
  1519.     transition-timing-function: ease-in-out;}
  1520.  
  1521. .list-table .list-table-header .header-title:last-child {
  1522.     background-image: none;
  1523. }
  1524.  
  1525. .list-table .list-table-header .header-title.status,.list-table .list-table-header .header-title.number,.list-table .list-table-header .header-title.image,.list-table .list-table-header .header-title.tags  {
  1526.     background-image: none;
  1527.     display:none !important;
  1528. }
  1529.  
  1530. .list-table .list-table-header .header-title.title {
  1531.     text-align: center;
  1532.     width:90px;
  1533.     line-height: 40px;
  1534.     padding:0 !important;
  1535. }
  1536.  
  1537. .list-table .list-table-header .header-title.score {
  1538.    text-align: center;
  1539.     width:90px;
  1540.     line-height: 40px;
  1541.     padding:0 !important;
  1542. }
  1543.  
  1544. .list-table .list-table-header .header-title.type {
  1545.    text-align: center;
  1546.     width:90px;
  1547.     line-height: 40px;
  1548.     padding:0 !important;
  1549. }
  1550.  
  1551. .list-table .list-table-header .header-title.progress {
  1552.    text-align: center;
  1553.     width:90px;
  1554.     line-height: 40px;
  1555.     padding:0 !important;
  1556. }
  1557.  
  1558. .list-table .list-table-header .header-title.chapters {
  1559.    text-align: center;
  1560.     width:90px;
  1561.     line-height: 40px;
  1562.     padding:0 !important;
  1563. }
  1564.  
  1565. .list-table .list-table-header .header-title.volumes {
  1566.    text-align: center;
  1567.     width:90px;
  1568.     line-height: 40px;
  1569.     padding:0 !important;
  1570. }
  1571.  
  1572. .list-table .list-table-header .header-title.rated {
  1573.    text-align: center;
  1574.     width:90px;
  1575.     line-height: 40px;
  1576.     padding:0 !important;
  1577. }
  1578.  
  1579. .list-table .list-table-header .header-title.started {
  1580.    text-align: center;
  1581.     width:90px;
  1582.     line-height: 40px;
  1583.     padding:0 !important;
  1584.     display:none;
  1585. }
  1586.  
  1587. .list-table .list-table-header .header-title.finished {
  1588.   text-align: center;
  1589.     width:90px;
  1590.     line-height: 40px;
  1591.     padding:0 !important;
  1592. }
  1593.  
  1594. .list-table .list-table-header .header-title.days {
  1595.    text-align: center;
  1596.     width:90px;
  1597.     line-height: 40px;
  1598.     padding:0 !important;
  1599. }
  1600.  
  1601. .list-table .list-table-header .header-title.storage {
  1602.     text-align: center;
  1603.     width:90px;
  1604.     line-height: 40px;
  1605.     padding:0 !important;
  1606. }
  1607.  
  1608. .list-table .list-table-header .header-title.retail {
  1609.    text-align: center;
  1610.     width:90px;
  1611.     line-height: 40px;
  1612.     padding:0 !important;
  1613. }
  1614.  
  1615. .list-table .list-table-header .header-title.priority {
  1616.     text-align: center;
  1617.     width:90px;
  1618.     line-height: 40px;
  1619.     padding:0 !important;
  1620. }
  1621.  
  1622. .list-table .list-table-header .header-title.studio {
  1623.   display:none !important;
  1624. }
  1625.  
  1626. .list-table .list-table-header .header-title .link {
  1627.     font-size: 11px;
  1628.     color: #323232;
  1629.     text-decoration: none
  1630.     height:40px;
  1631.     width:90px;
  1632. }
  1633.  
  1634. .list-table .list-table-header .header-title .link.sort {
  1635.     position: relative;
  1636.     display: inline-block;
  1637.     color: #323232;
  1638.     height:40px;
  1639.     width:90px;
  1640.     white-space: nowrap;
  1641.     -moz-transition-property: all;
  1642.     -o-transition-property: all;
  1643.     -webkit-transition-property: all;
  1644.     transition-property: all;
  1645.     -moz-transition-duration: 0.3s;
  1646.     -o-transition-duration: 0.3s;
  1647.     -webkit-transition-duration: 0.3s;
  1648.     transition-duration: 0.3s;
  1649.     -moz-transition-timing-function: ease-in-out;
  1650.     -o-transition-timing-function: ease-in-out;
  1651.     -webkit-transition-timing-function: ease-in-out;
  1652.     transition-timing-function: ease-in-out
  1653. }
  1654.  
  1655. .list-table .list-table-header .header-title .link.sort:hover {
  1656.     color: #000;
  1657.     background-color: rgba(0,0,0,.5);
  1658.     height:40px;
  1659.     width:90px;
  1660. }
  1661.  
  1662. .list-table .list-table-header .header-title .sort-icon {
  1663.     color: #fff;
  1664. }
  1665.  
  1666. /*==============================*\
  1667.     CLARITY LIST TABLE INSERT
  1668. \*==============================*/
  1669.  
  1670. /* - - - - - - - - - - - - - - -*\
  1671.   OPTIMIZATIONS
  1672. \*- - - - - - - - - - - - - - - */
  1673.  
  1674. .data.image .link:after,
  1675. .data.progress,
  1676. .data.chapter,
  1677. .data.volume,
  1678. .data.score a,
  1679. .data.tags a,
  1680. .data.tags a.edit:after,
  1681. .data.studio a,
  1682. .data.licensor a,
  1683. .data.priority
  1684. { transition: all 0.3s ease !important; }
  1685.  
  1686. .list-table-data a,
  1687. .more-info .td1 > div > a
  1688. { transition: all 0.15s ease !important; }
  1689.  
  1690. /* - - - - - - - - - - - - - - -*\
  1691.   LIST
  1692. \*- - - - - - - - - - - - - - - */
  1693.  
  1694. .list-item {
  1695.     position: relative;
  1696.    
  1697.     display: block;
  1698.     width: 100%;
  1699.     background: var(--bg) !important;
  1700.     border: none;
  1701.     margin-bottom: 8px;
  1702. }
  1703.  
  1704. .list-table-data {
  1705.     position: relative;
  1706.    
  1707.     display: flex;
  1708.     max-width: 1176px;
  1709.     min-height: 64px;
  1710.    
  1711.     align-items: center;
  1712.    
  1713.     font-size: 0;
  1714. }
  1715.  
  1716. .data {
  1717.     display: block !important;
  1718.     padding: 0 !important;
  1719.     border: none !important;
  1720.     flex: 0 0 auto;
  1721.    
  1722.     color: var(--text);
  1723.     font-size: 11px;
  1724. }
  1725.  
  1726. .list-table .list-table-data .data a {
  1727.     color: var(--text) !important;
  1728.     text-decoration: none !important;
  1729. }
  1730.  
  1731. .list-table .list-table-data a:not(.edit-disabled):hover {
  1732.     color: var(--text-h) !important;
  1733. }
  1734.  
  1735.  
  1736. /* - - - - - - - - - - - - - - -*\
  1737.   Loading Icon
  1738. \*- - - - - - - - - - - - - - - */
  1739.  
  1740. .list-unit .loading-space {
  1741.     margin: 14px 0 22px;
  1742. }
  1743. .list-unit .loading-space #loading-spinner {
  1744.     width: 20px;
  1745.     height: 20px;
  1746.     margin: 0 auto;
  1747.    
  1748.     color: var(--text);
  1749. }
  1750.  
  1751.  
  1752. /* - - - - - - - - - - - - - - -*\
  1753.   Empty Table Message
  1754. \*- - - - - - - - - - - - - - - */
  1755.  
  1756. .list-table[data-items="[]"]:after {
  1757.     content: "No entries found. Try another category?";
  1758.    
  1759.     display: block;
  1760.     width: 900px;
  1761.     background: var(--bg);
  1762.     border-radius: 16px;
  1763.     margin: 32px auto;
  1764.    
  1765.     color: var(--text);
  1766.     font: 16px/32px Arial, Verdana, sans-serif;
  1767.     text-align: center;
  1768. }
  1769.  
  1770. [data-owner="1"] .list-table[data-items="[]"]:after {
  1771.     content: "No entries found. Why not add some?";
  1772. }
  1773.  
  1774. [data-query*='"s":'] .list-table[data-items="[]"]:after {
  1775.     content: "No entries found. Perhaps your search terms are too restrictive?";
  1776. }
  1777.  
  1778.  
  1779.  
  1780.  
  1781. /*------------------------------*\
  1782.   LIST @Status
  1783. \*------------------------------*/
  1784.  
  1785. .data.status {
  1786.     position: absolute;
  1787.     top: 0;
  1788.     left: 0;
  1789.    
  1790.     width: 1px !important;
  1791.     height: 100%;
  1792.     padding: 0 !important;
  1793. }
  1794.  
  1795. .status.watching,
  1796. .status.reading { background: var(--watching) !important; }
  1797. .status.completed { background: var(--completed) !important; }
  1798. .status.onhold { background: var(--onhold) !important; }
  1799. .status.dropped { background: var(--dropped) !important; }
  1800. .status.plantowatch,
  1801. .status.plantoread { background: var(--plantowatch) !important; }
  1802.  
  1803.  
  1804.  
  1805. /*------------------------------*\
  1806.   LIST @Number
  1807. \*------------------------------*/
  1808.  
  1809. .data.number {
  1810.     position: relative;
  1811.     top: -22px;
  1812.    
  1813.     width: 20px;
  1814.     height: 20px;
  1815.     background: var(--bg);
  1816.     border-radius: 10px;
  1817.     margin: 0 -28px 0 8px;
  1818.    
  1819.     order: 1;
  1820.    
  1821.     line-height: 20px;
  1822.     font-weight: 700;
  1823.    
  1824.     z-index: 1;
  1825. }
  1826.  
  1827. .list-item:nth-child(n+101) .data.number {
  1828.     text-indent: -7px;
  1829. }
  1830.  
  1831. .list-item:nth-child(n+1001) .data.number {
  1832.     width: 27px;
  1833.     margin-right: -35px;
  1834. }
  1835.  
  1836. .list-item:nth-child(n+10001) .data.number {
  1837.     width: 34px;
  1838.     margin-right: -42px;
  1839. }
  1840.  
  1841.  
  1842.  
  1843. /*------------------------------*\
  1844.   LIST @Image
  1845. \*------------------------------*/
  1846.  
  1847. .data.image {
  1848.     width: 64px;
  1849.     height: 64px;
  1850.     margin: 4px 0 4px 8px;
  1851.     order: 1;
  1852. }
  1853.  
  1854. .data.image a {
  1855.     position: relative;
  1856.     display: block !important;
  1857.     border-radius: 50%;
  1858.     overflow: hidden;
  1859. }
  1860.  
  1861. .data.image img {
  1862.     width: 64px !important;
  1863.     height: 64px !important;
  1864.     border: none !important;
  1865.     object-fit: cover;
  1866. }
  1867.  
  1868. /* External link icon on hover */
  1869. .data.image a:after {
  1870.     content: "\f14c";
  1871.     position: absolute;
  1872.     top: 0;
  1873.     left: 0;
  1874.    
  1875.     display: block;
  1876.     width: 100%;
  1877.     height: 100%;
  1878.     background: rgba(0,0,0,0.5);
  1879.    
  1880.     color: #fff;
  1881.     font: 30px/64px FontAwesome;
  1882.    
  1883.     opacity: 0;
  1884. }
  1885.  
  1886. .data.image a:hover:after {
  1887.     opacity: 1;
  1888. }
  1889.  
  1890.  
  1891.  
  1892. /*------------------------------*\
  1893.   LIST @Title
  1894. \*------------------------------*/
  1895.  
  1896. .data.title {
  1897.     position: relative;
  1898.    
  1899.     width: 142px;
  1900.     height: 16px;
  1901.     padding: 32px 0 0 8px !important;
  1902.    
  1903.     order: 12;
  1904.     flex: 1 0 auto;
  1905.    
  1906.     line-height: 16px;
  1907. }
  1908.  
  1909. .data.title .link.sort {
  1910.     position: absolute;
  1911.     top: 16px;
  1912.     left: 8px;
  1913.    
  1914.     display: inline-block;
  1915.     max-width: 100%;
  1916.     padding-right: 16px;
  1917.    
  1918.     overflow: hidden;
  1919.     box-sizing: border-box;
  1920.    
  1921.     line-height: 16px;
  1922.     white-space: nowrap;
  1923.     text-overflow: ellipsis;
  1924. }
  1925.  
  1926. .list-table .list-table-data .title .link:hover {
  1927.     color: var(--accent) !important;
  1928. }
  1929.  
  1930. .content-status, .rewatching, .rereading {
  1931.     color: var(--text-dim) !important;
  1932.     font-size: 10px !important;
  1933. }
  1934.  
  1935. .content-status:before, .rewatching:before, .rereading:before { content: "[" }
  1936. .content-status:after, .rewatching:after, .rereading:after { content: "] - " }
  1937.  
  1938.  
  1939.  
  1940. .add-edit-more {
  1941.     display: inline;
  1942.     float: none !important;
  1943.    
  1944.     color: var(--text-dim);
  1945. }
  1946.  
  1947. .list-table .list-table-data .title .add-edit-more a { color: var(--text-dim) !important; }
  1948. .list-table .list-table-data .title .add-edit-more a:hover { color: var(--text-dim-h) !important; }
  1949.  
  1950. .icon-watch { display: none !important; }
  1951.  
  1952.  
  1953. /* - - - - - - - - - - - - - - -*\
  1954.   Type
  1955. \*- - - - - - - - - - - - - - - */
  1956.  
  1957. .data.type {
  1958.     position: relative;
  1959.     top: -16px;
  1960.     z-index: 1;
  1961.    
  1962.     width: 92px;
  1963.     height: 16px;
  1964.     padding-left: 8px !important;
  1965.     margin-right: -100px;
  1966.    
  1967.     order: 11;
  1968.    
  1969.     text-align: left !important;
  1970.     color: var(--text-dim);
  1971.     line-height: 16px;
  1972.     font-size: 10px;
  1973. }
  1974.  
  1975. /* modify .type when .number is present */
  1976.  
  1977. .data.number + td:not(.image) ~ .type {
  1978.     margin-left: 28px;
  1979.     margin-right: -128px;
  1980. }
  1981.  
  1982.  
  1983. /*------------------------------*\
  1984.   LIST @Score
  1985. \*------------------------------*/
  1986.  
  1987. .data.score {
  1988.     position: relative;
  1989.    
  1990.     width: 26px;
  1991.     height: 26px;
  1992.    
  1993.     order: 13;
  1994. }
  1995.  
  1996. .data.score a {
  1997.     display: block;
  1998.     width: 26px;
  1999.     height: 26px;
  2000.     background: var(--btn-bg);
  2001.     border-radius: 13px;
  2002.     margin: 0 0 0 auto;
  2003.    
  2004.     line-height: 26px;
  2005. }
  2006.  
  2007. .list-table .list-table-data .score a:not(.edit-disabled):hover {
  2008.     background: var(--btn-bg-h);
  2009.    
  2010.     color: var(--btn-text-h) !important;
  2011. }
  2012.  
  2013. .data.score select {
  2014.     position: absolute;
  2015.     top: 0;
  2016.     right: 0;
  2017.    
  2018.     display: block;
  2019.     width: 40px;
  2020.     height: 26px;
  2021.     padding: 0 9px;
  2022.     background: var(--btn-bg-h) url(https://i.imgur.com/KF8oOyC.png) no-repeat 20px center / 16px auto;
  2023.     border: none;
  2024.     border-radius: 13px;
  2025.     box-shadow: none !important;
  2026.    
  2027.     color: var(--btn-text-h);
  2028.     font: bold 1.1em/26px Verdana, Arial, sans-serif;
  2029.    
  2030.     -webkit-appearance: none;
  2031.     -moz-appearance: none;
  2032.     appearance: none;
  2033. }
  2034.  
  2035. @-moz-document url-prefix() {
  2036.     .data.score select {
  2037.         padding: 0 16px 0 0;
  2038.         text-align: center;
  2039.     }
  2040. }
  2041.  
  2042. .data.score select:focus {
  2043.     outline: none !important;
  2044.     box-shadow: 0 2px 2px rgba(0,0,0,0.3);
  2045. }
  2046.  
  2047.  
  2048.  
  2049. /*------------------------------*\
  2050.   LIST @Progress
  2051. \*------------------------------*/
  2052.  
  2053. .data.progress, .data.chapter, .data.volume {
  2054.     width: 92px;
  2055.    
  2056.     order: 15;
  2057. }
  2058.  
  2059. .data.chapter { margin-top: -34px; }
  2060. .data.volume { margin: 34px 0 0 -92px; }
  2061.  
  2062. .data.progress span, .data.chapter span, .data.volume span { color: var(--text); }
  2063.  
  2064. .data.progress:before {
  2065.     content: "Progress:";
  2066.     color: var(--text-dim);
  2067. }
  2068.  
  2069. .data.chapter:before {
  2070.     content: "Chapters:";
  2071.     color: var(--text-dim);
  2072. }
  2073.  
  2074. .data.volume:before {
  2075.     content: "Volumes:";
  2076.     color: var(--text-dim);
  2077. }
  2078.  
  2079. /* Icon for completed entries. */
  2080. .data.progress span:only-of-type:after, .data.chapter span:only-of-type:after, .data.volume span:only-of-type:after {
  2081.     content: " \f058";
  2082.     position: relative;
  2083.     top: 1px;
  2084.    
  2085.     color: var(--checkmark);
  2086.     font-family: FontAwesome;
  2087.     font-size: 13px;
  2088. }
  2089.  
  2090. .data.progress input, .data.chapter input, .data.volume input {
  2091.     height: 15px;
  2092.     padding: 0 1px;
  2093.     background: var(--btn-bg);
  2094.     border: 1px solid var(--bg-dark);
  2095.     outline-color: var(--accent) !important;
  2096.    
  2097.     box-sizing: border-box;
  2098.    
  2099.     color: var(--text-dark);
  2100.     font: 11px Verdana, Arial, sans-serif;
  2101. }
  2102.  
  2103.  
  2104.  
  2105. /*------------------------------*\
  2106.   LIST @Priority
  2107. \*------------------------------*/
  2108.  
  2109. .data.priority {
  2110.     width: 92px;
  2111.     height: 74px;
  2112.     background: var(--bg);
  2113.    
  2114.     order: 14;
  2115.    
  2116.     color: var(--text);
  2117.     line-height: 74px;
  2118.     z-index: 1;
  2119. }
  2120.  
  2121. .data.priority:before {
  2122.     content: "\f0a2";
  2123.     font-family: FontAwesome;
  2124. }
  2125.  
  2126. /* fix for all anime page */
  2127.  
  2128. .status:not(.plantowatch):not(.plantoread) ~ .data.priority { display: none !important; }
  2129.  
  2130. /* modify .priority when .progress is present */
  2131.  
  2132. .data.progress ~ .priority, .data.chapter ~ .priority, .data.volume ~ .priority {
  2133.     position: relative;
  2134.     margin-right: -92px;
  2135.     opacity: 1;
  2136.     pointer-events: none;
  2137.     z-index: 1;
  2138. }
  2139.  
  2140. .list-item:hover .progress ~ .priority,
  2141. .list-item:hover .chapter ~ .priority,
  2142. .list-item:hover .volume ~ .priority {
  2143.     opacity: 0;
  2144. }
  2145.  
  2146.  
  2147.  
  2148. /*------------------------------*\
  2149.   LIST @Generic-Columns
  2150. \*------------------------------*/
  2151.  
  2152. .data.rated,
  2153. .data.magazine,
  2154. .data.storage,
  2155. .data.retail,
  2156. .data.season {
  2157.     margin-right: 4px;
  2158.    
  2159.     order: 19;
  2160.     flex-shrink: 1;
  2161. }
  2162.  
  2163. .data.rated { width: 40px; }
  2164. .data.magazine { width: 90px; }
  2165. .data.storage, .data.retail { width: 72px; }
  2166. .data.season {
  2167.     width: 92px;
  2168.    
  2169.     order: 20;
  2170. }
  2171.  
  2172.  
  2173. .data.rated:before,
  2174. .data.magazine:before,
  2175. .data.storage:before,
  2176. .data.retail:before,
  2177. .data.season:before {
  2178.     display: block;
  2179.    
  2180.     color: var(--text-dim);
  2181. }
  2182.  
  2183. .data.rated:before { content: "Rated:"; }
  2184. .data.magazine:before { content: "Magazine:"; }
  2185. .data.storage:before, .data.retail:before { content: "Storage:"; }
  2186. .data.season:before { content: "Premiered:"; }
  2187.  
  2188.  
  2189. .data.season:empty:after {
  2190.     content: "Unknown";
  2191.    
  2192.     display: block;
  2193.    
  2194.     color: var(--text-dim);
  2195. }
  2196.  
  2197.  
  2198.  
  2199. /*------------------------------*\
  2200.   LIST @Tags
  2201. \*------------------------------*/
  2202.  
  2203. .data.tags, .data.studio, .data.licensor {
  2204.     width: 120px;
  2205.     padding: 3px 0 !important;
  2206.     margin-right: 8px;
  2207.    
  2208.     order: 21;
  2209.     flex-shrink: 1;
  2210. }
  2211.  
  2212. .data.tags span, .data.studio span, .data.licensor span {
  2213.     display: block;
  2214.     padding: 1px 0;
  2215.    
  2216.     font-size: 0 !important;
  2217.     line-height: 0;
  2218. }
  2219.  
  2220. .data.tags a:not(.edit),
  2221. .data.studio a,
  2222. .data.licensor a {
  2223.     display: block;
  2224.     padding: 1px;
  2225.     background: var(--btn-bg);
  2226.     border-radius: 8.5px;
  2227.    
  2228.     color: var(--text) !important;
  2229.     font-size: 11px !important;
  2230.     line-height: 15px;
  2231. }
  2232.  
  2233. .list-table .list-table-data .tags span a:hover,
  2234. .list-table .list-table-data .studio span a:hover,
  2235. .list-table .list-table-data .licensor span a:hover {
  2236.     background: var(--btn-bg-h);
  2237.    
  2238.     color: var(--btn-text-h) !important;
  2239. }
  2240.  
  2241. /* Empty box message. */
  2242. .data.studio:empty:before,
  2243. .data.licensor:empty:before,
  2244. .data.magazine:empty:before {
  2245.     display: block;
  2246.     padding: 1px;
  2247.    
  2248.     color: var(--text-dim);
  2249.     font-size: 10px;
  2250.     line-height: 15px;
  2251.     white-space: pre;
  2252. }
  2253.  
  2254. .data.studio:empty:before { content: "Unknown\aStudio"; }
  2255. .data.licensor:empty:before { content: "Unknown\aLicensor"; }
  2256. .data.magazine:empty:before { content: "Unknown\aMagazine"; }
  2257.  
  2258.  
  2259. .data.tags textarea {
  2260.     position: absolute;
  2261.     top: 3px;
  2262.     right: 4px;
  2263.     z-index: 5;
  2264.    
  2265.     width: 530px !important;
  2266.     height: calc(100% - 6px) !important;
  2267.     background: var(--btn-bg);
  2268.     border: 1px solid var(--bg-dark);
  2269.     outline-color: var(--accent) !important;
  2270.     resize: none;
  2271.    
  2272.     color: var(--text);
  2273. }
  2274.  
  2275. @-moz-document url-prefix() {
  2276.     .data.tags textarea {
  2277.         width: 524px !important;
  2278.         height: calc(100% - 14px) !important;
  2279.         padding: 2px;
  2280.         box-sizing: initial !important;
  2281.     }
  2282. }
  2283.  
  2284.  
  2285. .data.tags a.edit {
  2286.     position: absolute;
  2287.     top: 0px;
  2288.     right: 0px;
  2289.    
  2290.     width: 5px !important;
  2291.     height: 100% !important;
  2292.     background: var(--edit-btn);
  2293.    
  2294.     text-align: left !important;
  2295.     font-size: 0 !important;
  2296.    
  2297.     opacity: 0;
  2298.     z-index: 1;
  2299. }
  2300.  
  2301. .list-item:hover .data.tags a.edit {
  2302.     opacity: 0.7;
  2303. }
  2304.  
  2305. .list-item:hover .data.tags a.edit:hover {
  2306.     width: 25px !important;
  2307.    
  2308.     opacity: 1;
  2309. }
  2310.  
  2311. .data.tags a.edit:after {
  2312.     content: "\f040";
  2313.     position: absolute;
  2314.     top: 50%;
  2315.     right: 0;
  2316.    
  2317.     width: 100%;
  2318.     height: 20px;
  2319.     margin-top: -10px;
  2320.    
  2321.     color: var(--text);
  2322.     font: 0/20px FontAwesome;
  2323.     text-align: center;
  2324.    
  2325.     opacity: 0;
  2326. }
  2327.  
  2328. .data.tags a.edit:hover:after {
  2329.     font-size: 14px;
  2330.    
  2331.     opacity: 1;
  2332. }
  2333.  
  2334.  
  2335.  
  2336. /*------------------------------*\
  2337.   LIST @Dates
  2338. \*------------------------------*/
  2339.  
  2340. .data.started, .data.finished, .data.days, .data.airing-started, .data.airing-finished {
  2341.     position: relative;
  2342.    
  2343.     display: flex !important;
  2344.     width: 100px;
  2345.     height: 14px;
  2346.     flex-flow: row wrap;
  2347.    
  2348.     overflow: hidden;
  2349.     order: 25;
  2350.    
  2351.     color: var(--text);
  2352.     font-size: 9px;
  2353.     line-height: 14px;
  2354.     text-align: left !important;
  2355.     text-overflow: ellipsis;
  2356.     white-space: nowrap;
  2357. }
  2358.  
  2359. .data.started { top: -20px; }
  2360. .data.finished { top: 0; margin-left: -100px; }
  2361. .data.days { top: 20px; margin-left: -100px; }
  2362. .data.airing-started { top: -10px; }
  2363. .data.airing-finished { top: 10px; margin-left: -100px; }
  2364.  
  2365. .data.started:before, .data.finished:before, .data.days:before, .data.airing-started:before, .data.airing-finished:before {
  2366.     display: inline-block;
  2367.     width: 29px;
  2368.     padding-right: 4px;
  2369.     border-right: 1px solid var(--text-dim);
  2370.     margin-right: 3px;
  2371.     flex: 0 0 auto;
  2372.    
  2373.     text-align: right;
  2374.     color: var(--text-dim);
  2375. }
  2376.  
  2377. .data.started:before { content: "Start"; }
  2378. .data.finished:before { content: "End"; }
  2379. .data.days:before { content: "Days"; }
  2380. .data.airing-started:before { content: "Aired"; }
  2381. .manga .data.airing-started:before { content: "Issued"; }
  2382. .data.airing-finished:before { content: "to"; }
  2383.  
  2384. .manga .data.airing-started, .manga .data.airing-finished { width: 107px; }
  2385. .manga .data.airing-finished { margin-left: -107px; }
  2386. .manga .data.airing-started:before, .manga .data.airing-finished:before { width: 36px; }
  2387.  
  2388. .data.airing-started::after,
  2389. .data.airing-finished::after,
  2390. .data.started::after,
  2391. .data.finished::after,
  2392. .data.days::after {
  2393.     content: "-";
  2394.     display: block;
  2395.     width: 63px;
  2396.     flex: 0 0 auto;
  2397.     color: var(--text-dim);
  2398.     font-size: 14px;
  2399. }
  2400.  
  2401.  
  2402.  
  2403. /*------------------------------*\
  2404.   LIST @More-Info
  2405. \*------------------------------*/
  2406.  
  2407. .more-info {
  2408.     border: none !important;
  2409. }
  2410.  
  2411. .more-info .td1 {
  2412.     position: relative;
  2413.     padding-top: 23px;
  2414.    
  2415.     color: var(--text-dark);
  2416. }
  2417.  
  2418. .more-info .td1 > div { margin: 0; }
  2419.  
  2420. /* Discuss Button */
  2421.  
  2422. .more-info .td1 > div > a {
  2423.     position: absolute;
  2424.     top: 0px;
  2425.     left: 0px;
  2426.     border-bottom: 2px solid var(--accent);
  2427. }
  2428.  
  2429. .list-table .more-info .more-content a { color: var(--text-dark) !important; }
  2430.  
  2431. .list-table .more-info .more-content a:hover { color: var(--accent) !important; }
  2432.  
  2433. /* - - - - - - - - - - - - - - -*\
  2434.   DARK MODE TWEAKS
  2435. \*- - - - - - - - - - - - - - - */
  2436.  
  2437. .data.score select { background-image: url(https://i.imgur.com/hFijppc.png); }
  2438.  
  2439. /*==============================*\
  2440. END CLARITY LIST TABLE INSERT END
  2441. \*==============================*/
  2442.  
  2443.  
  2444.  
  2445. .list-unit .loading-space {
  2446.      margin: 0px;
  2447.     height: 20px;
  2448.     font-size: 20px;
  2449.     text-align: center;
  2450. }
  2451.  
  2452. /*override codes*/
  2453. .header .header-info > a {color: rgba(255,255,255,1) !important;}
  2454. .header .header-info {color: rgba(255,255,255,0.8) !important;}
  2455. .header .header-menu {color: rgba(255,255,255,0.8) !important;}
  2456. .header .header-menu .btn-menu {color: rgba(255,255,255,0.8) !important;}
  2457. .username {color: rgba(255,255,255,0.8) !important;}
  2458. #header-menu-button {color: rgba(255,255,255,0.8) !important;}
  2459. .header a {
  2460.     font-weight: bold;
  2461.     color: #fff !important;
  2462. }
  2463.  
  2464. /*profile image & name */
  2465.  
  2466. .cover-block::after {
  2467. height: 120px !important;
  2468. width: 120px! important;
  2469. background-repeat: no-repeat;
  2470. background-size: contain;
  2471. position: absolute;
  2472. display:block !important;
  2473. margin-left:57px;
  2474. margin-top:-70px;
  2475. content: "";
  2476. padding: 5px;
  2477. background-color:#fff;
  2478. box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3);
  2479. border-radius:5px;
  2480. border: #fff 2px solid;
  2481.  
  2482. }
  2483.  
  2484. .cover-block::before {
  2485. position: absolute;
  2486. display:block !important;
  2487. margin:auto;
  2488. bottom:5px;
  2489. width: 1200px;
  2490. text-align:center;
  2491. color: #fff !important;
  2492. font-size: 18px !important;
  2493. font-family: Rancho;
  2494. /* text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000 !important; */
  2495. letter-spacing: 0 !important;
  2496. }
  2497.  
  2498. /* */
  2499. .header .header-title {
  2500. position: absolute;
  2501. top: 0px;
  2502. left: 40px;
  2503. background-image: url("http://i.imgur.com/39cRtfK.png");
  2504. background-position: left top;
  2505. background-repeat: no-repeat;
  2506. background-size: auto 50px;
  2507. display: block;
  2508. width: 50px !important;
  2509. height: 50px;
  2510. text-indent: -9999px;
  2511. overflow: hidden
  2512. }
  2513.  
  2514. /* customization */
  2515.  
  2516. /* The list background */
  2517.  
  2518. body[data-query*='"status":1'],
  2519. body[data-query*='"status":2'],
  2520. body[data-query*='"status":3'],
  2521. body[data-query*='"status":4'],
  2522. body[data-query*='"status":6'],
  2523. body[data-query*='"status":7'] {
  2524.   background-attachment: fixed !important;
  2525.   background-position: 50% 50%;
  2526.   background-repeat: no-repeat !important;
  2527.   background-size:cover;
  2528.  
  2529. }
  2530.  
  2531. * { cursor: url(http://cur.cursors-4u.net/cursors/cur-11/cur1054.cur), progress !important;}
  2532.  
  2533. /* */
  2534.  
  2535.  
  2536. /* Intro animation */
  2537. @keyframes intro {
  2538.   from {
  2539.     opacity: 0;
  2540.     margin-top: 100vh;
  2541.   }
  2542.   16% {
  2543.     opacity: 0;
  2544.     margin-top: 100vh;
  2545.   }
  2546.   to {
  2547.     opacity: 1;
  2548.     margin-top: 100px;
  2549.   }
  2550. }
  2551. .list-container {
  2552.   animation: intro 2s;
  2553. }
  2554.  
  2555.  
  2556.  
  2557. /* */
  2558.  
  2559. footer {
  2560.     position: fixed;
  2561.     bottom: 0px;
  2562.     left: 0px;
  2563.     width: 100%;
  2564.     height:30px !important;
  2565.     z-index: 9998;
  2566.    
  2567. }
  2568.  
  2569. #footer-block {
  2570. display:block;
  2571.     background-color: transparent;
  2572.     background: rgba(0,0,0,0);
  2573.     background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%);
  2574.     background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,.6)));
  2575.     background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%);
  2576.     background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%);
  2577.     background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%);
  2578.     background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%); 
  2579. }
  2580.  
  2581. #copyright {
  2582.     color: #FFF;
  2583.     letter-spacing: 1px;
  2584.     text-shadow: 0px 3px 3px #000;
  2585.     font-size:10px;
  2586. }
  2587.  
  2588. #copyright::after {
  2589.     content: "Shelter Style V2 x Clarity - Layout originally designed by Takana no Hana, edits by Shishio & Valerio Lyndon"
  2590. }
  2591.  
  2592. .cover-block::after{
  2593.     opacity: 0;
  2594. }
  2595.  
  2596.  
  2597. /* Other Sort Options */
  2598. .list-table .list-table-header .header-title.days, .list-table .list-table-header .header-title.licensor {
  2599.     color: gray !important;
  2600. }
  2601.  
  2602. .list-table .list-table-header .header-title.licensor{
  2603. padding-top: 20px;    
  2604. }
  2605.  
  2606.  
  2607. /* Banner Avatar Reset */
  2608. .list-table .list-table-header:after {
  2609. position: absolute !important;
  2610. top:150px;
  2611. }
  2612.  
  2613.  * {
  2614.   font-family: Poppins, Roboto, Open Sans, FontAwesome !important;
  2615. }
  2616.  
  2617.  
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!