API tools faq
paste
Advertisement
Hsmaneimvu

ASMN'S Clarity, Valerio Lyndon

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