Advertisement
ValerioLyndon

Clarity for Pingu the Weeb

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