API tools faq
paste
Advertisement
ValerioLyndon

ShelterStyle x Clarity

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