API tools faq
paste
ValerioLyndon

Blarity v2

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