API tools faq
paste
Advertisement
ValerioLyndon

Clarity Modified for goko- v2

ValerioLyndon
Apr 1st, 2019
253
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 38.54 KB | None | 0 0
raw download clone embed print report
  1. @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkbefore";
  2. /* "Clarity" by Valerio Lyndon / Revision 22.0 */
  3. @\import "https://fonts.googleapis.com/css?family=Oswald";
  4. #search-box:after,.open~#search-button{
  5.     pointer-events:none
  6. }
  7. :root{
  8.     --name:none;
  9.     --avatar:none;
  10.     --banner:none;
  11.     --character:none;
  12.     --pbg:#efefef;
  13.     --bg:#fff;
  14.     --text:#323232;
  15.     --text-h:#787878;
  16.     --text-dim:#bababa;
  17.     --text-dim-h:#646464;
  18.     --text-dark:#111;
  19.     --icon:#323232;
  20.     --accent:#4065ba;
  21.     --btn-bg:#ebebeb;
  22.     --btn-bg-h:#323232;
  23.     --btn-head-bg-h:#1d439b;
  24.     --btn-text-h:#fff;
  25.     --bg-dark:#ddd;
  26.     --text-head:#9b9b9b;
  27.     --text-head-h:#787878;
  28.     --watching:#2db039;
  29.     --completed:#26448f;
  30.     --onhold:#f9d457;
  31.     --dropped:#a12f31;
  32.     --plantowatch:#c3c3c3;
  33.     --cover-bg:#323232;
  34.     --edit-btn:#d9d9d9;
  35.     --checkmark:#9696eb
  36. }
  37. #advanced-options .advanced-options-button a,#fancybox-close,#search-box,#search-box input,#search-box:after,.data.chapter,.data.image .link:after,.data.licensor a,.data.priority,.data.progress,.data.score a,.data.studio a,.data.tags a,.data.tags a.edit:after,.data.volume,.fixed .status-menu:after,.header .header-title:after,.icon-menu svg,.icon-menu.setting,.icon-menu.setting .text,.icon-menu.setting .text a,.icon-menu:after,.icon-menu:before,.list-table .list-table-header .header-title .link.sort,.list-table-header .header-title,.status-button:after,.status-menu-container.fixed .status-menu,.status-menu-container:not(.fixed) .status-menu,.status-menu:after{
  38.     transition:all .3s ease!important
  39. }
  40. #advanced-options .advanced-options-header .description,#advanced-options .advanced-options-header .description:before,#advanced-options [class*="-widget"] input,#advanced-options [class*="-widget"] label,#advanced-options [class*="-widget"] select,#search-button i,.header-info a,.list-table-data a,.more-info .td1>div>a{
  41.     transition:all .15s ease!important
  42. }
  43. .header .header-title,.header-info,.icon-menu,.icon-menu.quick-add:before,.list-menu-float .icon-menu,.list-table>tbody:first-of-type:after,.stats a{
  44.     display:inline-block;
  45.     height:26px!important;
  46.     width:26px!important;
  47.     background:var(--bg)!important;
  48.     border-radius:13px;
  49.     color:var(--text)!important;
  50.     font:400 0/26px Arial,Verdana,sans-serif;
  51.     text-indent:0;
  52.     text-align:left;
  53.     white-space:nowrap;
  54.     vertical-align:top;
  55.     overflow:hidden;
  56.     box-shadow:0 1px 2px rgba(0,0,0,.2);
  57.     transition:all .3s ease!important
  58. }
  59. .header .header-title:hover,.icon-menu:hover,.list-menu-float .icon-menu:hover,.stats a:hover{
  60.     width:100px!important;
  61.     background:var(--btn-head-bg-h)!important;
  62.     color:var(--btn-text-h)!important
  63. }
  64. html{
  65.     position:relative;
  66.     min-height:100%
  67. }
  68. body{
  69.     padding-bottom:64px;
  70.     background:var(--pbg) no-repeat center / cover fixed!important
  71. }
  72. .list-container{
  73.     position:static;
  74.     width:100%;
  75.     background:0 0!important;
  76.     border:none
  77. }
  78. .list-block{
  79.     width:1060px;
  80.     min-height:initial;
  81.     margin:64px auto 0
  82. }
  83. .status-menu-container.fixed+.list-block{
  84.     margin-top:128px!important
  85. }
  86. .list-unit{
  87.     width:100%!important;
  88.     margin:0
  89. }
  90. .cover-block,.cover-block:before{
  91.     left:0;
  92.     width:100%;
  93.     position:absolute
  94. }
  95. .list-table{
  96.     border:none!important
  97. }
  98. a,a:hover{
  99.     color:var(--accent)
  100. }
  101. .initialize-tutorial{
  102.     display:none!important
  103. }
  104. .cover-block{
  105.     top:0;
  106.     z-index:-5;
  107.     min-width:1060px;
  108.     height:318px;
  109.     background:center center/cover no-repeat var(--cover-bg);
  110.     background-image:var(--banner)
  111. }
  112. .cover-block:before{
  113.     content:"";
  114.     bottom:0;
  115.     display:block;
  116.     height:50px;
  117.     background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))
  118. }
  119. #cover-image,.btn-list-setting{
  120.     display:none!important
  121. }
  122. .cover-block .image-container{
  123.     display:block!important;
  124.     width:1060px;
  125.     height:100%;
  126.     padding:0;
  127.     background:right center/contain no-repeat var(--character);
  128.     margin:0 auto
  129. }
  130. #cover-image-container:after{
  131.     content:var(--name);
  132.     position:absolute;
  133.     top:55px;
  134.     left:50%;
  135.     margin-left:-475px;
  136.     color:#fff;
  137.     font:700 60px/60px Oswald;
  138.     text-align:left;
  139.     letter-spacing:15px;
  140.     text-shadow:1px 4px 7px rgba(0,0,0,.45);
  141.     text-transform:uppercase;
  142.     white-space:pre;
  143.     transform:scale(.9) perspective(350px) rotateY(8deg) rotateZ(-3deg);
  144.     animation:name-slide 3s 1 .5s backwards
  145. }
  146. @keyframes name-slide{
  147.     0%{
  148.         top:12px;
  149.         margin-left:-535px;
  150.         opacity:0;
  151.         letter-spacing:0;
  152.         animation-timing-function:ease-out
  153. }
  154.     90%{
  155.         top:55px;
  156.         margin-left:-475px
  157. }
  158.     100%{
  159.         letter-spacing:15px;
  160.         opacity:1;
  161.         animation-timing-function:cubic-bezier(0,0,.75,1)
  162. }
  163. }
  164. .header{
  165.     display:flex;
  166.     height:36px;
  167.     margin-top:282px
  168. }
  169. .header .header-menu{
  170.     position:static;
  171.     display:flex;
  172.     width:auto;
  173.     height:26px;
  174.     margin-left:6px;
  175.     order:2
  176. }
  177. .btn-menu{
  178.     height:0;
  179.     font-size:0!important
  180. }
  181. .btn-menu #header-menu-button{
  182.     display:none
  183. }
  184. .header .header-title{
  185.     position:static;
  186.     margin-left:155px;
  187.     order:1;
  188.     z-index:1
  189. }
  190. .header .header-title:before{
  191.     content:"\f015";
  192.     display:inline-block;
  193.     width:26px;
  194.     background:0 0!important;
  195.     font-size:14px;
  196.     font-family:FontAwesome;
  197.     text-align:center!important
  198. }
  199. .header .header-title:hover:before{
  200.     color:var(--btn-text-h)!important
  201. }
  202. .header .header-title:after{
  203.     content:"Home";
  204.     display:inline-block;
  205.     height:26px!important;
  206.     width:26px!important;
  207.     font:14px/26px Arial,Verdana,sans-serif;
  208.     color:var(--text)
  209. }
  210. #search-box:after,.status-menu:after{
  211.     content:""
  212. }
  213. .header .header-title:hover:after{
  214.     color:var(--btn-text-h)
  215. }
  216. .header .header-menu .list-menu{
  217.     position:static;
  218.     order:1;
  219.     display:inline-block;
  220.     height:26px;
  221.     border:none;
  222.     background:0 0;
  223.     box-shadow:none
  224. }
  225. .header .icon-menu.anime-list,.header .icon-menu.manga-list{
  226.     position:static;
  227.     padding:0;
  228.     margin-right:6px;
  229.     font-size:0!important;
  230.     font-weight:400!important
  231. }
  232. .header .icon-menu.anime-list .text,.header .icon-menu.manga-list .text{
  233.     position:static!important;
  234.     font:14px/26px Arial,Verdana,sans-serif;
  235.     vertical-align:top
  236. }
  237. .header .header-menu .list-menu .icon-menu svg.icon{
  238.     position:static;
  239.     max-width:14px;
  240.     max-height:14px;
  241.     padding:6px;
  242.     fill:var(--text)
  243. }
  244. .header .header-menu .list-menu .icon-menu:hover svg.icon{
  245.     fill:var(--btn-text-h)
  246. }
  247. .header-info{
  248.     position:static;
  249.     width:auto!important;
  250.     padding:0 8px;
  251.     margin:0!important;
  252.     font-size:12px;
  253.     order:2
  254. }
  255. .header-info a{
  256.     color:var(--text)!important;
  257.     text-decoration:none!important
  258. }
  259. .header-info a:hover{
  260.     color:var(--text-h)!important
  261. }
  262. .btn-menu a.username{
  263.     position:absolute;
  264.     left:1px;
  265.     top:-7px;
  266.     display:block;
  267.     width:150px;
  268.     height:150px;
  269.     background:0 0;
  270.     border-radius:50%;
  271.     font-size:0;
  272.     z-index:36
  273. }
  274. .btn-menu span.username{
  275.     display:none!important
  276. }
  277. .status-menu-container{
  278.     position:relative;
  279.     z-index:35!important;
  280.     width:100%;
  281.     min-width:1060px;
  282.     height:64px;
  283.     background:0 0;
  284.     border:none!important
  285. }
  286. .status-menu-container.fixed{
  287.     z-index:45!important
  288. }
  289. .status-menu-container:after,.status-menu-container:before{
  290.     content:"";
  291.     position:absolute;
  292.     left:0;
  293.     z-index:-1;
  294.     display:block;
  295.     width:100%
  296. }
  297. .status-menu-container:before{
  298.     top:0;
  299.     height:64px;
  300.     background:var(--bg)
  301. }
  302. .status-menu-container:after{
  303.     top:64px;
  304.     height:2px;
  305.     background:linear-gradient(to bottom,rgba(0,0,0,.2),rgba(0,0,0,0))
  306. }
  307. .status-menu{
  308.     position:relative;
  309.     display:block!important;
  310.     width:1060px;
  311.     padding:0 0 0 173px;
  312.     margin:0 auto;
  313.     box-sizing:border-box
  314. }
  315. .fixed .status-menu{
  316.     padding:0 0 0 71px
  317. }
  318. .status-menu:after{
  319.     position:absolute;
  320.     top:-51px;
  321.     left:-8px;
  322.     width:150px;
  323.     height:150px;
  324.     background:center top/cover no-repeat var(--bg-dark);
  325.     background-image:var(--avatar);
  326.     border:8px solid var(--bg);
  327.     border-radius:50%;
  328.     opacity:1;
  329.     box-shadow:0 1px 2px rgba(0,0,0,.2)
  330. }
  331. .fixed .status-menu:after{
  332.     top:0;
  333.     width:48px;
  334.     height:48px;
  335.     box-shadow:none
  336. }
  337. .status-menu .status-button{
  338.     display:inline-block!important;
  339.     height:32px;
  340.     padding:16px 0!important;
  341.     margin:0 15px!important;
  342.     color:var(--text-head)!important;
  343.     font-size:17.6px!important;
  344.     line-height:30px;
  345.     white-space:nowrap;
  346.     font-family:Oswald!important;
  347.     text-transform:uppercase;
  348.     letter-spacing:1px
  349. }
  350. .status-menu .status-button.on{
  351.     color:var(--text-head-h)!important
  352. }
  353. .status-button.all_anime:after{
  354.     background:var(--accent)!important
  355. }
  356. .status-button.reading:after,.status-button.watching:after{
  357.     background:var(--watching)!important
  358. }
  359. .status-button.completed:after{
  360.     background:var(--completed)!important
  361. }
  362. .status-button.onhold:after{
  363.     background:var(--onhold)!important
  364. }
  365. .status-button.dropped:after{
  366.     background:var(--dropped)!important
  367. }
  368. .status-button.plantoread:after,.status-button.plantowatch:after{
  369.     background:var(--plantowatch)!important
  370. }
  371. .status-menu-container .search-container{
  372.     top:19px;
  373.     right:0
  374. }
  375. #search-box{
  376.     padding-right:22px;
  377.     border:2px solid transparent;
  378.     border-radius:13px;
  379.     margin-top:0!important
  380. }
  381. #search-box.open{
  382.     width:150px!important;
  383.     background:var(--btn-bg);
  384.     border:2px solid var(--bg-dark)
  385. }
  386. #search-box input{
  387.     background:0 0;
  388.     border:none;
  389.     border-radius:13px;
  390.     outline:0
  391. }
  392. #search-box.open input{
  393.     text-indent:7.5px;
  394.     line-height:20px
  395. }
  396. .status-menu-container .search-container #search-button{
  397.     position:absolute;
  398.     right:0;
  399.     top:0;
  400.     width:26px;
  401.     height:26px;
  402.     border-radius:13px;
  403.     margin-top:0;
  404.     text-align:center
  405. }
  406. #search-button i{
  407.     color:var(--text-head)!important;
  408.     font-size:18px;
  409.     line-height:26px
  410. }
  411. .open~#search-button i{
  412.     font-size:14px;
  413.     line-height:24px
  414. }
  415. #search-box:after{
  416.     position:absolute;
  417.     right:0;
  418.     top:0;
  419.     width:0;
  420.     height:22px;
  421.     padding-right:22px;
  422.     background:linear-gradient(to right,var(--btn-bg) 2px,transparent 9.5px,transparent 142.5px,var(--btn-bg) 150px) content-box;
  423.     border:2px solid transparent;
  424.     border-radius:13px;
  425.     opacity:0
  426. }
  427. #search-box.open:after{
  428.     width:150px;
  429.     opacity:1
  430. }
  431. .list-menu-float{
  432.     position:relative;
  433.     top:auto;
  434.     display:block;
  435.     width:904px;
  436.     height:0;
  437.     padding-left:155px;
  438.     margin:0 auto;
  439.     border:none;
  440.     background:0 0;
  441.     text-align:left;
  442.     font-size:0;
  443.     z-index:38
  444. }
  445. .icon-menu,.list-menu-float form{
  446.     display:inline-block!important
  447. }
  448. .list-menu-float .icon-menu{
  449.     top:74px;
  450.     margin:0 6px 0 0
  451. }
  452. .list-menu-float .icon-menu .text{
  453.     top:0!important;
  454.     left:26px!important;
  455.     display:inline-block;
  456.     width:auto!important;
  457.     height:26px;
  458.     color:var(--text)!important;
  459.     font-size:14px!important;
  460.     opacity:1!important
  461. }
  462. .list-menu-float .icon-menu:hover .text{
  463.     color:var(--btn-text-h)!important
  464. }
  465. .list-menu-float .icon-menu svg.icon{
  466.     top:6px!important;
  467.     left:6px!important;
  468.     max-width:14px;
  469.     max-height:14px;
  470.     fill:var(--text)
  471. }
  472. .list-menu-float .icon-menu:hover svg.icon{
  473.     fill:var(--btn-text-h)
  474. }
  475. [data-owner="1"] .list-menu-float .icon-menu.profile{
  476.     position:absolute;
  477.     left:1px;
  478.     top:-43px;
  479.     display:block!important;
  480.     width:150px!important;
  481.     height:150px!important;
  482.     background:0 0!important;
  483.     border-radius:50%;
  484.     font-size:0;
  485.     box-shadow:none
  486. }
  487. [data-owner=""] .icon-menu.profile{
  488.     background-image:none!important
  489. }
  490. [data-owner=""] .icon-menu.profile:before{
  491.     content:"\f007";
  492.     position:absolute;
  493.     top:0;
  494.     left:0;
  495.     display:block;
  496.     width:26px;
  497.     height:26px;
  498.     font-size:14px;
  499.     line-height:26px;
  500.     text-align:center;
  501.     color:var(--text);
  502.     font-family:FontAwesome
  503. }
  504. [data-owner=""] .icon-menu.profile:hover:before{
  505.     color:var(--btn-text-h)
  506. }
  507. [data-owner=""] .icon-menu.profile:after{
  508.     content:"Profile";
  509.     position:absolute;
  510.     top:0;
  511.     left:26px;
  512.     display:inline-block;
  513.     height:26px;
  514.     font-size:14px;
  515.     color:var(--text)
  516. }
  517. [data-owner=""] .icon-menu.profile:hover:after{
  518.     color:var(--btn-text-h)
  519. }
  520. .icon-menu.quick-add:hover:before,.icon-menu.setting .text a{
  521.     color:var(--btn-text-h)!important
  522. }
  523. .icon-menu.quick-add svg{
  524.     display:none
  525. }
  526. .icon-menu.quick-add:before{
  527.     content:"\f067";
  528.     background:0 0!important;
  529.     font-size:14px;
  530.     text-align:center;
  531.     font-family:FontAwesome;
  532.     box-shadow:none
  533. }
  534. .icon-menu.setting{
  535.     overflow:visible
  536. }
  537. .icon-menu.setting:hover{
  538.     width:26px!important
  539. }
  540. .icon-menu.setting .text{
  541.     top:-2px!important;
  542.     left:0!important;
  543.     width:240px!important;
  544.     height:26px!important;
  545.     padding:2px 0;
  546.     overflow:visible;
  547.     font-size:0!important;
  548.     opacity:1!important;
  549.     pointer-events:none;
  550.     z-index:-1
  551. }
  552. .icon-menu.setting:hover .text{
  553.     pointer-events:auto
  554. }
  555. .icon-menu.setting .text a{
  556.     position:absolute!important;
  557.     top:2px!important;
  558.     left:13px!important;
  559.     width:0!important;
  560.     height:26px!important;
  561.     background:var(--btn-bg-h)!important;
  562.     border:none!important;
  563.     border-radius:0 13px 13px 0;
  564.     overflow:hidden;
  565.     font:14px/26px Arial,Verdana,sans-serif!important;
  566.     text-indent:7.5px;
  567.     text-align:center;
  568.     white-space:nowrap;
  569.     opacity:0!important
  570. }
  571. .icon-menu.setting:hover .text a{
  572.     width:120px!important;
  573.     border-radius:0 13px 13px 0;
  574.     opacity:1!important
  575. }
  576. .icon-menu.setting:hover .text .link-list-setting{
  577.     left:120px!important
  578. }
  579. .icon-menu.setting .text a:hover{
  580.     background:var(--btn-head-bg-h)!important
  581. }
  582. .list-status-title{
  583.     width:1060px!important;
  584.     height:64px!important;
  585.     margin-top:-64px;
  586.     background:0 0!important
  587. }
  588. .list-status-title .text{
  589.     display:none!important
  590. }
  591. .list-status-title .stats{
  592.     position:absolute;
  593.     top:10px;
  594.     right:32px!important;
  595.     display:block;
  596.     width:auto;
  597.     height:26px!important;
  598.     border-radius:0 0 26px;
  599.     font-size:0;
  600.     line-height:13px!important
  601. }
  602. .stats a{
  603.     margin:0 0 0 6px!important;
  604.     font:14px/26px Arial,Verdana,sans-serif
  605. }
  606. .stats a i{
  607.     width:26px;
  608.     text-align:center
  609. }
  610. .list-stats{
  611.     position:absolute;
  612.     top:416px;
  613.     width:1060px!important;
  614.     background:0 0!important;
  615.     color:var(--text)!important;
  616.     font-weight:700
  617. }
  618. .list-table>tbody:first-of-type{
  619.     position:relative;
  620.     top:-26px;
  621.     margin-top:-30px;
  622.     left:1032px;
  623.     display:block;
  624.     width:30px;
  625.     height:30px;
  626.     background:0 0!important;
  627.     z-index:39
  628. }
  629. .list-table>tbody:first-of-type:after{
  630.     content:"\f0dc";
  631.     position:absolute;
  632.     top:0;
  633.     right:0;
  634.     margin:2px;
  635.     font-size:14px;
  636.     font-family:FontAwesome;
  637.     text-align:center
  638. }
  639. .list-table>tbody:first-of-type:hover:after{
  640.     background:var(--btn-head-bg-h)!important;
  641.     color:var(--btn-text-h)!important
  642. }
  643. .list-table-header{
  644.     position:absolute;
  645.     top:0;
  646.     right:15px;
  647.     display:block;
  648.     width:auto;
  649.     height:26px;
  650.     padding:2px 0;
  651.     font-size:0;
  652.     white-space:nowrap;
  653.     pointer-events:none;
  654.     z-index:-1
  655. }
  656. .list-table>tbody:first-of-type:hover .list-table-header{
  657.     pointer-events:auto
  658. }
  659. .list-table-header .header-title{
  660.     position:relative;
  661.     display:inline-block!important;
  662.     width:auto!important;
  663.     height:auto!important;
  664.     padding:0!important;
  665.     border:none!important;
  666.     background:0 0!important;
  667.     font-weight:400!important
  668. }
  669. .list-table>tbody:first-of-type:hover .header-title{
  670.     opacity:1
  671. }
  672. .list-table-header .header-title a{
  673.     display:block!important;
  674.     width:13px!important;
  675.     height:26px!important;
  676.     background:var(--btn-bg-h)!important;
  677.     border-radius:13px 0 0 13px;
  678.     margin-left:-13px;
  679.     overflow:hidden;
  680.     box-sizing:border-box;
  681.     color:var(--btn-text-h)!important;
  682.     font:11px/26px Verdana,Arial,sans-serif!important;
  683.     text-align:center!important;
  684.     text-indent:-7.5px;
  685.     white-space:normal!important;
  686.     opacity:0
  687. }
  688. .list-table-header .header-title a.hover_info,.list-table-header .header-title.tags{
  689.     display:none!important
  690. }
  691. tbody:first-of-type:hover .list-table-header .header-title.finished a,tbody:first-of-type:hover .list-table-header .header-title.started a{
  692.     padding:0 11px
  693. }
  694. .data,.data.status{
  695.     padding:0!important
  696. }
  697. .list-table-header .header-title a:hover{
  698.     background:var(--btn-head-bg-h)!important
  699. }
  700. tbody:first-of-type:hover .list-table-header .header-title a{
  701.     width:80px!important;
  702.     opacity:1
  703. }
  704. .list-table-header .header-title a .sort-icon{
  705.     position:absolute;
  706.     left:50%;
  707.     width:10px;
  708.     height:10px;
  709.     margin-left:-5px;
  710.     color:inherit!important;
  711.     font-size:10px;
  712.     line-height:10px
  713. }
  714. .sort-icon.fa-sort-asc{
  715.     top:2px
  716. }
  717. .sort-icon.fa-sort-desc{
  718.     bottom:2px
  719. }
  720. .header-title.title a{
  721.     font-size:0!important
  722. }
  723. .header-title.title a:after{
  724.     content:"Title";
  725.     font-size:11px!important
  726. }
  727. .list-item{
  728.     position:relative;
  729.     display:block;
  730.     width:100%;
  731.     background:var(--bg)!important;
  732.     border:none;
  733.     margin-bottom:8px
  734. }
  735. .list-table-data{
  736.     position:relative;
  737.     display:flex;
  738.     max-width:1060px;
  739.     min-height:64px;
  740.     align-items:center;
  741.     font-size:0
  742. }
  743. .data{
  744.     display:block!important;
  745.     border:none!important;
  746.     flex:0 0 auto;
  747.     color:var(--text);
  748.     font-size:11px
  749. }
  750. .list-table .list-table-data .data a{
  751.     color:var(--text)!important;
  752.     text-decoration:none!important
  753. }
  754. .list-table .list-table-data a:not(.edit-disabled):hover{
  755.     color:var(--text-h)!important
  756. }
  757. .list-unit .loading-space{
  758.     margin:14px 0 22px
  759. }
  760. .list-unit .loading-space #loading-spinner{
  761.     width:20px;
  762.     height:20px;
  763.     margin:0 auto;
  764.     color:var(--text)
  765. }
  766. .list-table[data-items="[]"]:after{
  767.     content:"No entries found. Perhaps your search terms are too restrictive?";
  768.     display:block;
  769.     width:900px;
  770.     background:var(--bg);
  771.     border-radius:16px;
  772.     margin:32px auto;
  773.     color:var(--text);
  774.     font:16px/32px Arial,Verdana,sans-serif;
  775.     text-align:center
  776. }
  777. .data.status{
  778.     position:absolute;
  779.     top:0;
  780.     left:0;
  781.     width:1px!important;
  782.     height:100%
  783. }
  784. .data.image{
  785.     width:64px;
  786.     height:64px;
  787.     border-radius:50%;
  788.     margin:4px 0 4px 8px;
  789.     overflow:hidden;
  790.     order:1
  791. }
  792. .data.image a{
  793.     position:relative;
  794.     display:block!important
  795. }
  796. .data.image img{
  797.     width:64px!important;
  798.     height:64px!important;
  799.     border:none!important;
  800.     object-fit:cover
  801. }
  802. .data.image a:after{
  803.     content:"\f14c";
  804.     position:absolute;
  805.     top:0;
  806.     left:0;
  807.     display:block;
  808.     width:100%;
  809.     height:100%;
  810.     background:rgba(0,0,0,.5);
  811.     font-family:FontAwesome;
  812.     color:#fff;
  813.     font-size:30px;
  814.     line-height:64px;
  815.     opacity:0
  816. }
  817. .data.image a:hover:after{
  818.     opacity:1
  819. }
  820. .data.number{
  821.     position:relative;
  822.     top:-22px;
  823.     width:20px;
  824.     height:20px;
  825.     background:var(--bg);
  826.     border-radius:10px;
  827.     margin:0 -28px 0 8px;
  828.     order:1;
  829.     line-height:20px;
  830.     font-weight:700;
  831.     z-index:1
  832. }
  833. .data.title,.data.type{
  834.     height:16px;
  835.     line-height:16px
  836. }
  837. .list-item:nth-child(n+101) .data.number{
  838.     text-indent:-7px
  839. }
  840. .list-item:nth-child(n+1001) .data.number{
  841.     width:27px;
  842.     margin-right:-35px
  843. }
  844. .list-item:nth-child(n+10001) .data.number{
  845.     width:34px;
  846.     margin-right:-42px
  847. }
  848. .data.title{
  849.     position:relative;
  850.     width:142px;
  851.     padding:32px 0 0 8px!important;
  852.     order:12;
  853.     flex:1 0 auto
  854. }
  855. .data.title .link.sort{
  856.     position:absolute;
  857.     top:16px;
  858.     left:8px;
  859.     display:inline-block;
  860.     max-width:100%;
  861.     padding-right:16px;
  862.     overflow:hidden;
  863.     box-sizing:border-box;
  864.     line-height:16px;
  865.     white-space:nowrap;
  866.     text-overflow:ellipsis
  867. }
  868. .list-table .list-table-data .title .link:hover{
  869.     color:var(--accent)!important
  870. }
  871. .content-status,.rereading,.rewatching{
  872.     color:var(--text-dim)!important;
  873.     font-size:10px!important
  874. }
  875. .content-status:before,.rereading:before,.rewatching:before{
  876.     content:"["
  877. }
  878. .content-status:after,.rereading:after,.rewatching:after{
  879.     content:"] - "
  880. }
  881. .add-edit-more{
  882.     display:inline;
  883.     float:none!important;
  884.     color:var(--text-dim)
  885. }
  886. .list-table .list-table-data .title .add-edit-more a{
  887.     color:var(--text-dim)!important
  888. }
  889. .list-table .list-table-data .title .add-edit-more a:hover{
  890.     color:var(--text-dim-h)!important
  891. }
  892. .icon-watch{
  893.     display:none!important
  894. }
  895. .data.type{
  896.     position:relative;
  897.     top:-16px;
  898.     width:92px;
  899.     padding-left:8px!important;
  900.     margin-right:-100px;
  901.     order:11;
  902.     text-align:left!important;
  903.     color:var(--text-dim);
  904.     font-size:10px
  905. }
  906. .data.score a,.data.score select{
  907.     display:block;
  908.     height:26px;
  909.     border-radius:13px;
  910.     line-height:26px
  911. }
  912. .data.score{
  913.     position:relative;
  914.     width:26px;
  915.     height:26px;
  916.     order:13
  917. }
  918. .data.score a{
  919.     width:26px;
  920.     background:var(--btn-bg);
  921.     margin:0 0 0 auto
  922. }
  923. .list-table .list-table-data .score a:not(.edit-disabled):hover{
  924.     background:var(--btn-bg-h);
  925.     color:var(--btn-text-h)!important
  926. }
  927. .data.score select{
  928.     position:absolute;
  929.     top:0;
  930.     right:0;
  931.     width:40px;
  932.     background:var(--btn-bg-h);
  933.     color:var(--btn-text-h);
  934.     box-shadow:none!important
  935. }
  936. .data.score select:focus{
  937.     outline:0!important;
  938.     box-shadow:0 2px 2px rgba(0,0,0,.3)
  939. }
  940. .data.chapter input,.data.progress input,.data.tags textarea,.data.volume input{
  941.     border:1px solid var(--bg-dark);
  942.     outline-color:var(--accent)!important;
  943.     box-sizing:border-box
  944. }
  945. .data.chapter,.data.progress,.data.volume{
  946.     width:92px;
  947.     order:15
  948. }
  949. .data.chapter{
  950.     margin-top:-34px
  951. }
  952. .data.volume{
  953.     margin:34px 0 0 -92px
  954. }
  955. .data.chapter span,.data.progress span,.data.volume span{
  956.     color:var(--text)
  957. }
  958. .data.progress:before{
  959.     content:"Progress:";
  960.     color:var(--text-dim)
  961. }
  962. .data.chapter:before{
  963.     content:"Chapters:";
  964.     color:var(--text-dim)
  965. }
  966. .data.volume:before{
  967.     content:"Volumes:";
  968.     color:var(--text-dim)
  969. }
  970. .data.chapter span:only-of-type:after,.data.progress span:only-of-type:after,.data.volume span:only-of-type:after{
  971.     content:" \f058";
  972.     position:relative;
  973.     top:1px;
  974.     color:var(--checkmark);
  975.     font-family:FontAwesome;
  976.     font-size:13px
  977. }
  978. .data.chapter input,.data.progress input,.data.volume input{
  979.     height:15px;
  980.     padding:0 1px;
  981.     background:var(--btn-bg);
  982.     color:var(--text-dark);
  983.     font:11px Verdana,Arial,sans-serif
  984. }
  985. .data.priority{
  986.     position:relative;
  987.     width:92px;
  988.     height:74px;
  989.     background:var(--bg);
  990.     margin-right:-92px;
  991.     order:14;
  992.     color:var(--text);
  993.     line-height:74px;
  994.     opacity:1;
  995.     pointer-events:none;
  996.     z-index:1
  997. }
  998. .status:not(.plantowatch):not(.plantoread)~.data.priority{
  999.     display:none!important
  1000. }
  1001. .list-item:hover .data.priority{
  1002.     opacity:0
  1003. }
  1004. .data.priority:before{
  1005.     content:"\f0a2";
  1006.     font-family:FontAwesome
  1007. }
  1008. .data.magazine,.data.rated,.data.retail,.data.season,.data.storage{
  1009.     margin-right:4px;
  1010.     order:19;
  1011.     flex-shrink:1
  1012. }
  1013. .data.rated{
  1014.     width:40px
  1015. }
  1016. .data.magazine{
  1017.     width:90px
  1018. }
  1019. .data.retail,.data.storage{
  1020.     width:72px
  1021. }
  1022. .data.season{
  1023.     width:92px;
  1024.     order:20
  1025. }
  1026. .data.magazine:before,.data.rated:before,.data.retail:before,.data.season:before,.data.storage:before{
  1027.     display:block;
  1028.     color:var(--text-dim)
  1029. }
  1030. .data.rated:before{
  1031.     content:"Rated:"
  1032. }
  1033. .data.magazine:before{
  1034.     content:"Magazine:"
  1035. }
  1036. .data.retail:before,.data.storage:before{
  1037.     content:"Storage:"
  1038. }
  1039. .data.season:before{
  1040.     content:"Premiered:"
  1041. }
  1042. .data.season:empty:after{
  1043.     content:"Unknown";
  1044.     display:block;
  1045.     color:var(--text-dim)
  1046. }
  1047. .data.licensor,.data.studio,.data.tags{
  1048.     width:120px;
  1049.     padding:3px 0!important;
  1050.     margin-right:8px;
  1051.     order:21;
  1052.     flex-shrink:1
  1053. }
  1054. .data.licensor span,.data.studio span,.data.tags span{
  1055.     display:block;
  1056.     padding:1px 0;
  1057.     font-size:0!important;
  1058.     line-height:0
  1059. }
  1060. .data.licensor a,.data.studio a,.data.tags a:not(.edit){
  1061.     display:block;
  1062.     padding:1px;
  1063.     background:var(--btn-bg);
  1064.     border-radius:8.5px;
  1065.     color:var(--text)!important;
  1066.     font-size:11px!important;
  1067.     line-height:15px
  1068. }
  1069. .list-table .list-table-data .licensor span a:hover,.list-table .list-table-data .studio span a:hover,.list-table .list-table-data .tags span a:hover{
  1070.     background:var(--btn-bg-h);
  1071.     color:var(--btn-text-h)!important
  1072. }
  1073. .data.licensor:empty:before,.data.studio:empty:before{
  1074.     display:block;
  1075.     padding:1px;
  1076.     color:var(--text-dim);
  1077.     font-size:10px;
  1078.     line-height:15px;
  1079.     white-space:pre
  1080. }
  1081. .data.studio:empty:before{
  1082.     content:"Unknown\aStudio"
  1083. }
  1084. .data.licensor:empty:before{
  1085.     content:"Unknown\aLicensor"
  1086. }
  1087. .data.tags textarea{
  1088.     position:absolute;
  1089.     top:50%;
  1090.     right:4px;
  1091.     z-index:5;
  1092.     width:530px!important;
  1093.     height:64px!important;
  1094.     background:var(--btn-bg);
  1095.     margin-top:-32px;
  1096.     resize:none;
  1097.     color:var(--text)
  1098. }
  1099. .data.tags a.edit{
  1100.     position:absolute;
  1101.     top:0;
  1102.     right:0;
  1103.     width:5px!important;
  1104.     height:100%!important;
  1105.     background:var(--edit-btn);
  1106.     text-align:left!important;
  1107.     font-size:0!important;
  1108.     opacity:0;
  1109.     z-index:1
  1110. }
  1111. .list-item:hover .data.tags a.edit{
  1112.     opacity:.7
  1113. }
  1114. .list-item:hover .data.tags a.edit:hover{
  1115.     width:25px!important;
  1116.     opacity:1
  1117. }
  1118. .data.tags a.edit:after{
  1119.     content:"\f040";
  1120.     position:absolute;
  1121.     top:50%;
  1122.     right:0;
  1123.     width:100%;
  1124.     height:20px;
  1125.     margin-top:-10px;
  1126.     color:var(--text);
  1127.     font:0/20px FontAwesome;
  1128.     text-align:center;
  1129.     opacity:0
  1130. }
  1131. .data.tags a.edit:hover:after{
  1132.     font-size:14px;
  1133.     opacity:1
  1134. }
  1135. .data.airing-finished,.data.airing-started,.data.days,.data.finished,.data.started{
  1136.     position:relative;
  1137.     width:100px;
  1138.     height:14px;
  1139.     overflow:hidden;
  1140.     order:25;
  1141.     color:var(--text);
  1142.     font-size:9px;
  1143.     line-height:14px;
  1144.     text-align:left!important;
  1145.     text-overflow:ellipsis
  1146. }
  1147. .data.started{
  1148.     top:-10px
  1149. }
  1150. .data.finished{
  1151.     top:10px;
  1152.     margin-left:-100px
  1153. }
  1154. .data.days{
  1155.     top:20px;
  1156.     margin-left:-100px
  1157. }
  1158. .data.airing-started{
  1159.     top:-10px
  1160. }
  1161. .data.airing-finished{
  1162.     top:10px;
  1163.     margin-left:-100px
  1164. }
  1165. .data.airing-finished:before,.data.airing-started:before,.data.days:before,.data.finished:before,.data.started:before{
  1166.     display:inline-block;
  1167.     width:29px;
  1168.     padding-right:4px;
  1169.     border-right:1px solid var(--text-dim);
  1170.     text-align:right;
  1171.     color:var(--text-dim)
  1172. }
  1173. .data.started:before{
  1174.     content:"Start"
  1175. }
  1176. .data.finished:before{
  1177.     content:"End"
  1178. }
  1179. .data.days:before{
  1180.     content:"Days"
  1181. }
  1182. .anime .data.airing-started:before{
  1183.     content:"Aired"
  1184. }
  1185. .manga .data.airing-started:before{
  1186.     content:"Issued"
  1187. }
  1188. .data.airing-finished:before{
  1189.     content:"to"
  1190. }
  1191. .more-info{
  1192.     border:none!important
  1193. }
  1194. .more-info .td1{
  1195.     position:relative;
  1196.     padding-top:23px;
  1197.     color:var(--text-dark)
  1198. }
  1199. #footer-block:before,.more-info .td1>div>a,footer{
  1200.     position:absolute;
  1201.     left:0
  1202. }
  1203. .more-info .td1>div{
  1204.     margin:0
  1205. }
  1206. .more-info .td1>div>a{
  1207.     top:0;
  1208.     border-bottom:2px solid var(--accent)
  1209. }
  1210. .list-table .more-info .more-content a{
  1211.     color:var(--text-dark)!important
  1212. }
  1213. .list-table .more-info .more-content a:hover{
  1214.     color:var(--accent)!important
  1215. }
  1216. footer{
  1217.     bottom:0;
  1218.     width:100%
  1219. }
  1220. #footer-block{
  1221.     min-width:1060px;
  1222.     height:32px;
  1223.     padding:16px 0;
  1224.     background:var(--bg)
  1225. }
  1226. #footer-block:before{
  1227.     content:"";
  1228.     top:-2px;
  1229.     width:100%;
  1230.     min-width:1060px;
  1231.     height:2px;
  1232.     background:linear-gradient(to top,rgba(0,0,0,.1),rgba(0,0,0,0))
  1233. }
  1234. #copyright{
  1235.     padding:0;
  1236.     color:var(--text-head);
  1237.     line-height:16px
  1238. }
  1239. #copyright:after{
  1240.     content:"\aList design by Valerio Lyndon.";
  1241.     white-space:pre
  1242. }
  1243. #fancybox-overlay{
  1244.     background:#000!important;
  1245.     opacity:.2!important
  1246. }
  1247. #fancybox-outer [class^=fancy-]{
  1248.     display:none
  1249. }
  1250. #fancybox-outer{
  1251.     background:var(--bg)!important;
  1252.     box-shadow:0 0 32px rgba(0,0,0,.5)
  1253. }
  1254. #fancybox-outer #fancybox-close{
  1255.     top:-13px;
  1256.     right:-13px;
  1257.     width:16px;
  1258.     height:16px;
  1259.     padding:2px;
  1260.     background:var(--btn-bg);
  1261.     border:3px solid var(--btn-text-h);
  1262.     border-radius:13px;
  1263.     color:var(--text);
  1264.     text-align:center;
  1265.     box-shadow:0 1px 2px rgba(0,0,0,.2)
  1266. }
  1267. #fancybox-outer #fancybox-close:after{
  1268.     content:"\f00d";
  1269.     display:block;
  1270.     margin-top:-1px;
  1271.     font:16px/1 FontAwesome
  1272. }
  1273. #fancybox-outer #fancybox-close:hover{
  1274.     background:var(--text);
  1275.     color:var(--btn-text-h)
  1276. }
  1277. #advanced-options{
  1278.     top:64px;
  1279.     width:910px;
  1280.     padding:32px 0;
  1281.     background:var(--bg);
  1282.     border:none;
  1283.     box-shadow:0 0 32px rgba(0,0,0,.5);
  1284.     color:var(--text-dark)
  1285. }
  1286. #advanced-options .advanced-options-button,#advanced-options .advanced-options-header,#advanced-options [class*="-widget"]{
  1287.     width:100%;
  1288.     padding:0;
  1289.     border:none
  1290. }
  1291. #advanced-options .filter-widget:last-of-type,#advanced-options .sort-widget:last-of-type{
  1292.     padding-bottom:0
  1293. }
  1294. #advanced-options .filter,#advanced-options .sort{
  1295.     padding-bottom:32px
  1296. }
  1297. #advanced-options .advanced-options-header{
  1298.     font-size:0;
  1299.     line-height:26px;
  1300.     box-sizing:border-box
  1301. }
  1302. #advanced-options .advanced-options-header:before{
  1303.     display:inline-block;
  1304.     width:249px;
  1305.     height:100%;
  1306.     padding-bottom:7.5px;
  1307.     font-size:16px;
  1308.     line-height:26px;
  1309.     text-align:right
  1310. }
  1311. #advanced-options .filter .advanced-options-header:before{
  1312.     content:"Filter"
  1313. }
  1314. #advanced-options .sort .advanced-options-header:before{
  1315.     content:"Sort"
  1316. }
  1317. #advanced-options .advanced-options-header .description{
  1318.     display:inline-block;
  1319.     width:20px;
  1320.     margin:0;
  1321.     color:transparent;
  1322.     white-space:nowrap;
  1323.     vertical-align:top;
  1324.     transition:all .15s ease;
  1325.     pointer-events:none
  1326. }
  1327. #advanced-options .advanced-options-header .description:hover{
  1328.     color:inherit;
  1329.     pointer-events:auto
  1330. }
  1331. #advanced-options .advanced-options-header .description:before{
  1332.     content:"\f059";
  1333.     display:inline-block;
  1334.     width:20.5px;
  1335.     color:var(--icon);
  1336.     font:14px/1 FontAwesome;
  1337.     text-align:center;
  1338.     pointer-events:auto
  1339. }
  1340. #advanced-options .advanced-options-header .description:hover:before{
  1341.     color:var(--text-dim)
  1342. }
  1343. #advanced-options [class*="-widget"]{
  1344.     font-size:0;
  1345.     line-height:1;
  1346.     white-space:nowrap
  1347. }
  1348. #advanced-options [class*="-widget"]>*{
  1349.     font-size:12px;
  1350.     vertical-align:top
  1351. }
  1352. #advanced-options [class*="-widget"] .widget-header{
  1353.     width:250.5px;
  1354.     height:26px;
  1355.     padding:11px 7.5px 11px 0;
  1356.     border-right:2px solid var(--text-dim);
  1357.     margin-right:7.5px;
  1358.     line-height:26px;
  1359.     text-align:right
  1360. }
  1361. #advanced-options [class*="-widget"] span{
  1362.     line-height:26px
  1363. }
  1364. #advanced-options [class*="-widget"] input,#advanced-options [class*="-widget"] label,#advanced-options [class*="-widget"] select,#advanced-options [class*="-widget"] span:not(.widget-header){
  1365.     height:26px;
  1366.     margin:11px 0;
  1367.     border-color:var(--text-dim)!important;
  1368.     border-radius:13px;
  1369.     box-sizing:border-box;
  1370.     color:var(--text-dark);
  1371.     font-size:12px
  1372. }
  1373. #advanced-options [class*="-widget"] input,#advanced-options [class*="-widget"] select{
  1374.     padding:0 7.5px;
  1375.     background:0 0;
  1376.     outline:0
  1377. }
  1378. #advanced-options [class*="-widget"] select{
  1379.     padding-right:16px;
  1380.     background:url(https://i.imgur.com/hFijppc.png) center right/16px auto no-repeat
  1381. }
  1382. #advanced-options [class*="-widget"] input:focus,#advanced-options [class*="-widget"] option,#advanced-options [class*="-widget"] select:focus{
  1383.     background-color:var(--btn-bg)!important
  1384. }
  1385. #advanced-options :disabled,#advanced-options input:disabled+label{
  1386.     opacity:.5;
  1387.     color:var(--text)!important
  1388. }
  1389. #advanced-options .title input{
  1390.     width:387.5px!important
  1391. }
  1392. #advanced-options .filter-widget[class*="-status"] select{
  1393.     width:197.5px!important
  1394. }
  1395. #advanced-options .magazine select,#advanced-options .producer select{
  1396.     width:387.5px!important
  1397. }
  1398. #advanced-options .filter-widget[class*="-date"] span:nth-of-type(n+2){
  1399.     display:inline-block;
  1400.     width:40px;
  1401.     padding:0 3px 0 7.5px;
  1402.     border:1px solid var(--text-dim);
  1403.     border-right:none;
  1404.     border-radius:13px 0 0 13px;
  1405.     margin-right:0!important;
  1406.     line-height:24px;
  1407.     font-style:italic
  1408. }
  1409. #advanced-options .filter-widget[class*="-date"] span:nth-of-type(3){
  1410.     margin-left:7.5px!important
  1411. }
  1412. #advanced-options .filter-widget[class*="-date"] .day,#advanced-options .filter-widget[class*="-date"] .month,#advanced-options .filter-widget[class*="-date"] .year{
  1413.     border-radius:0;
  1414.     padding:0 16px 0 7.5px;
  1415.     border-left-width:0
  1416. }
  1417. #advanced-options .filter-widget[class*="-date"] .month,#advanced-options .filter-widget[class*="-date"] .year{
  1418.     border-right:none
  1419. }
  1420. #advanced-options .filter-widget[class*="-date"] .day{
  1421.     border-radius:0 13px 13px 0
  1422. }
  1423. #advanced-options .filter-widget[class*="-date"] .year{
  1424.     width:60px!important
  1425. }
  1426. #advanced-options .filter-widget[class*="-date"] .day,#advanced-options .filter-widget[class*="-date"] .month{
  1427.     width:45px!important
  1428. }
  1429. #advanced-options .aired-season .year{
  1430.     width:60px!important
  1431. }
  1432. #advanced-options .aired-season .season{
  1433.     width:130px!important;
  1434.     margin-left:7.5px
  1435. }
  1436. #advanced-options .first select,#advanced-options .second select{
  1437.     width:190px!important
  1438. }
  1439. #advanced-options .sort-widget input[type=radio]+label{
  1440.     width:92.25px!important;
  1441.     border-radius:13px;
  1442.     margin-left:7.5px;
  1443.     background:0 0!important;
  1444.     color:var(--text-dark);
  1445.     line-height:14px;
  1446.     transition:all .15s ease
  1447. }
  1448. #advanced-options .sort-widget input[type=radio]:not(:disabled)+label:hover{
  1449.     background:var(--btn-bg)!important
  1450. }
  1451. #advanced-options .sort-widget input[type=radio]:not(:disabled):checked+label{
  1452.     background:var(--text-dim)!important;
  1453.     border:1px solid var(--text-dim);
  1454.     color:var(--bg)!important
  1455. }
  1456. #advanced-options .sort-widget input[type=radio]:not(:checked)+label i{
  1457.     color:var(--icon)
  1458. }
  1459. #advanced-options #fancybox-close,#advanced-options .advanced-options-button a{
  1460.     width:90px;
  1461.     height:26px;
  1462.     padding:0;
  1463.     background:var(--btn-bg);
  1464.     border-radius:13px;
  1465.     box-shadow:0 1px 2px rgba(0,0,0,.2);
  1466.     color:var(--text-dark);
  1467.     line-height:26px;
  1468.     text-align:center
  1469. }
  1470. #advanced-options #fancybox-close:hover,#advanced-options .advanced-options-button a:hover{
  1471.     background:var(--btn-bg-h);
  1472.     color:var(--btn-text-h)
  1473. }
  1474. #advanced-options .advanced-options-button .btn-apply{
  1475.     margin:0 0 0 -106px
  1476. }
  1477. #advanced-options .advanced-options-button .btn-clear{
  1478.     margin:0 0 0 8px
  1479. }
  1480. #advanced-options #fancybox-close{
  1481.     left:50%;
  1482.     top:auto;
  1483.     bottom:32px;
  1484.     border:none;
  1485.     margin-left:53px
  1486. }
  1487. #advanced-options .btn-apply:before{
  1488.     content:"\f00c ";
  1489.     font-family:FontAwesome
  1490. }
  1491. #advanced-options .btn-clear:before{
  1492.     content:"\f12d ";
  1493.     font-family:FontAwesome
  1494. }
  1495. #advanced-options #fancybox-close:after{
  1496.     content:"\f00d Close";
  1497.     font:12px/26px Arial,FontAwesome,sans-serif
  1498. }
  1499. /* "Clarity" by Valerio Lyndon / Dark Mode Modification / Revision 3.0 */
  1500. :root{
  1501.     --banner:none;
  1502.     --character:none;
  1503.     --pbg:#000000;
  1504.     --bg:#212121;
  1505.     --text:#ff9e9e;
  1506.     --text-h:#416abe;
  1507.     --text-dim:#ff2626;
  1508.     --text-dim-h:#999;
  1509.     --text-dark:#ababab;
  1510.     --icon:#959595;
  1511.     --accent:#300000;
  1512.     --btn-bg:#300000;
  1513.     --btn-bg-h:#ababab;
  1514.     --btn-head-bg-h:#be4040;
  1515.     --btn-text-h:#be4040;
  1516.     --bg-dark:#444;
  1517.     --text-head:#9b9b9b;
  1518.     --text-head-h:#ababab;
  1519.     --watching:#2db039;
  1520.     --completed:#26448f;
  1521.     --onhold:#f9d457;
  1522.     --dropped:#a12f31;
  1523.     --plantowatch:#c3c3c3;
  1524.     --cover-bg:#090909;
  1525.     --edit-btn:#323232;
  1526.     --checkmark:#ff0000
  1527. }
  1528. .cover-block:before{
  1529.     background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,0))
  1530. }
  1531. #cover-image-container:after{
  1532.     color:#f6f5ff;
  1533.     text-shadow:2px 2px 8px #e4bef4
  1534. }
  1535. .status-menu-container:after{
  1536.     background:linear-gradient(to bottom,rgba(0,0,0,.6),rgba(0,0,0,0))
  1537. }
  1538. #footer-block:before{
  1539.     background:linear-gradient(to top,rgba(0,0,0,.3),rgba(0,0,0,0))
  1540. }
  1541. #advanced-options #fancybox-close,#advanced-options .advanced-options-button a,#fancybox-outer #fancybox-close,.header .header-title,.header-info,.icon-menu,.list-menu-float .icon-menu,.list-table>tbody:first-of-type:after,.stats a,.status-menu:after{
  1542.     box-shadow:0 1px 2px rgba(0,0,0,.8)
  1543. }
  1544. #fancybox-overlay{
  1545.     opacity:.35!important
  1546. }
  1547. #advanced-options,#fancybox-outer{
  1548.     box-shadow:0 0 32px rgba(0,0,0,.75)
  1549. }
  1550. #fancybox-frame{
  1551.     -webkit-filter:invert(87.8%) hue-rotate(197deg);
  1552.     filter:invert(87.8%) hue-rotate(197deg)
  1553. }
  1554. #advanced-options [class*="-widget"] select{
  1555.     background-image:url()
  1556. }
  1557. /* "Clarity" by Valerio Lyndon / Hover Image Modification / Revision 0.2 Edit */
  1558. .data.image {
  1559.     overflow: visible;
  1560. }
  1561. .data.image a:before {
  1562.     content: "";
  1563.     position: absolute;
  1564.     top: 50%;
  1565.     left: -166px;
  1566.     z-index: 50;
  1567.     width: 150px;
  1568.     height: 0;
  1569.     background: var(--bg-dark) no-repeat center / cover;
  1570.     border-radius: 8px;
  1571.     box-shadow: 0 0 2px #000;
  1572.     opacity: 0;
  1573.     transform: translateY(-50%);
  1574.     pointer-events: none;
  1575.     transition: all 0.3s ease;
  1576. }
  1577. .data.image:hover a:before {
  1578.     height: 200px;
  1579.     opacity: 1;
  1580. }
  1581. .data.image img, .data.image a:after {
  1582.     border-radius: 50%;
  1583. }
  1584. /* "Clarity" by Valerio Lyndon / Winter Event Modification for Dark Mode / Revision 0.2 Edit */
  1585. #status-menu .status-button:after,.header .header-title:hover,.icon-menu.setting .text a:hover,.icon-menu:hover,.list-menu-float .icon-menu:hover,.list-table-header .header-title a:hover,.list-table>tbody:first-of-type:hover:after,.stats a:hover{
  1586.     background:#ff9393!important
  1587. }
  1588. #status-menu .status-button.all_anime:after{
  1589.     background:#e2c900!important
  1590. }
  1591. #status-menu .status-button:after{
  1592.     background:#198a2d!important
  1593. }
  1594. .data.title .link.sort:hover,.header-info a:hover,.list-table .list-table-data .data:not(.score):not(.tags):not(.licensor):not(.studio) a:not(.edit-disabled):hover,.list-table .more-info .more-content a:hover{
  1595.     color:#ffe0e0!important
  1596. }
  1597. .list-table .more-info .more-content a{
  1598.     border-bottom-color:#630d0d
  1599. }
  1600. .data.chapter input,.data.progress input,.data.tags textarea,.data.volume input{
  1601.     outline-color:#630d0d!important
  1602. }
  1603. .cover-block{
  1604.     background-image:url()!important
  1605. }
  1606. #cover-image-container{
  1607.     position:relative;
  1608.     z-index:1;
  1609.     width:100%;
  1610.     min-width:1060px;
  1611.     background-image:url()!important;
  1612.     background-position:calc(50% + 430px) center
  1613. }
  1614. #cover-image-container:after{
  1615.     color:#fbf7eb;
  1616.     text-shadow:2px 2px 8px #9640be
  1617. }
  1618. .cover-block:before{
  1619.     z-index:2
  1620. }
  1621. .cover-block:after{
  1622.     content:"";
  1623.     position:absolute;
  1624.     left:0;
  1625.     bottom:0;
  1626.     width:100%;
  1627.     height:100px;
  1628.     background:url() 0 top/447px 100px repeat-x;
  1629.     opacity:.33
  1630. }
  1631. .status-menu-container:before{
  1632.     height:56px;
  1633.     border-width:4px 0;
  1634.     border-style:solid;
  1635.     border-color:#ff0000
  1636. }
  1637. .status-menu:after{
  1638.     left:-4px;
  1639.     top:-47px;
  1640.     border-width:4px;
  1641.     box-shadow:0 0 0 4px #ff0000;
  1642.     box-shadow:0 0 0 4px #ff0000
  1643. }
  1644. .fixed .status-menu:after{
  1645.     top:4px
  1646. }
  1647. body{
  1648.     background-image:linear-gradient(to right,rgba(22,22,22,.8),rgba(22,22,22,.9) 20%,rgba(22,22,22,.96),rgba(22,22,22,.9) 80%,rgba(22,22,22,.8)),url(none)!important;
  1649.     background-position:center!important;
  1650.     background-attachment:fixed!important
  1651. }
  1652. .data.number,.data.priority,.list-item,.list-table[data-items="[]"]:after{
  1653.     background:center/cover no-repeat fixed #212121!important;
  1654.     background-image:linear-gradient(to right,rgba(33,33,33,.75),rgba(33,33,33,.94) 30%,rgba(33,33,33,.895),rgba(33,33,33,.94) 70%,rgba(33,33,33,.75)),url()!important
  1655. }
  1656. .list-item,.list-table[data-items="[]"]:after{
  1657.     box-shadow:0 1px 5px rgba(0,0,0,.2)
  1658. }
  1659. .list-item:hover .data.tags a.edit{
  1660.     opacity:.9
  1661. }
  1662. .data.licensor a,.data.score a,.data.studio a,.data.tags a:not(.edit){
  1663.     background:rgba(25,25,25,.9)
  1664. }
  1665. /* Personalization */
  1666. :root{
  1667.     --name: none;
  1668.     --avatar: url(https://cdn.myanimelist.net/images/userimages/7464789.jpg);
  1669. }
  1670. .list-table .list-table-data .data.tags span a {
  1671.     color: #888 !important;
  1672. }
  1673. /* =================REPOSITIONED TAGS */
  1674. .data.tags {
  1675.     width: 0;
  1676.     height: 100%;
  1677.     padding: 0 !important;
  1678.     margin: 0;
  1679. }
  1680. .data.tags div {
  1681.     position: absolute;
  1682.     top: calc(50% + 8px);
  1683.     left: -158px;
  1684.     background: var(--bg);
  1685.     width: 142px;
  1686.     min-height: 16px;
  1687.     padding: 4px;
  1688.     margin: 0;
  1689.     border-radius: 8px;
  1690.     box-shadow: 0 0.5px 2px rgba(0,0,0,0.5);
  1691.     text-align: left;
  1692.     opacity: 0;
  1693.     transition: all 0.3s ease;
  1694.     pointer-events: none;
  1695. }
  1696. .image:hover ~ .data.tags div {
  1697.     transform: translateY(100px);
  1698.     opacity: 1;
  1699. }
  1700. .data.tags span {
  1701.     display: inline;
  1702.     color: #888;
  1703.     font-size: 11px !important;
  1704. }
  1705. .data.tags a:not(.edit) {
  1706.     display: inline;
  1707.     padding: 0 !important;
  1708.     background: none !important;
  1709.     margin: 0 !important;
  1710. }
  1711. /* ===== CURSOR */
  1712. * {
  1713.     cursor: url(https://i.imgur.com/c3kOerP.png) 0 0, auto;
  1714. }
  1715. :link {
  1716.     cursor: url(https://i.imgur.com/NG5qwNZ.png) 0 0, auto;
  1717. }
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!