API tools faq
paste
Advertisement
ValerioLyndon

Clink v1

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