API tools faq
paste
Advertisement
ValerioLyndon

Kure 0.4.1

ValerioLyndon
Dec 8th, 2019 (edited)
8,772
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 26.55 KB | None | 0 0
raw download clone embed print report
  1. /*
  2. This version is an old 2019 build that I am leaving up for historical reasons.
  3.  
  4. For more up-to-date versions into the 2020's, see my GitHub:
  5. https://raw.githubusercontent.com/ValerioLyndon/MAL-Public-List-Designs/master/Kure%20Theme/Kure.css
  6.  
  7. - V.L
  8. */
  9.  
  10. /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*\
  11. | Kure (working title)           |
  12. | by Valerio Lyndon              |
  13. | Version 0.4.1 (unreleased)     |
  14. |                                |
  15. |   This theme is incomplete.    |
  16. | Functionality is limited and   |
  17. | the design is not completed.   |
  18. | I would appreciate you fixing  |
  19. | issues yourself where possible.|
  20. | If I had the desire to edit    |
  21. | this theme, I would do it on   |
  22. | my own time. Thank you.        |      
  23. \*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  24.  
  25. /* IMPORTS */
  26. @\import "https://fonts.googleapis.com/css?family=Muli:400,700|Playball";
  27.  
  28. /* ad area found on theme 10 */
  29. div[style="padding-top: 8px"] {
  30.     display: none;
  31. }
  32.  
  33. /* VARIABLES */
  34.  
  35. :root {
  36.     /* Images */
  37.     --banner: url(https://i.imgur.com/XnyA9re.png);
  38.     --background: url(https://i.imgur.com/K9x805M.jpg);
  39.    
  40.     /* Colours */
  41.     --page: 0, 80%, 6%;
  42.     --content: 0, 10%, 12%;
  43.     --button: 0, 50%, 7%;
  44.     --accent: 0, 60%, 50%;
  45.    
  46.     --text: 0, 40%, 80%;
  47.     --link: 0, 90%, 84%;
  48.     --link-h: 0, 100%, 95%;
  49.     --link-header: 0, 6%, 62%;
  50.     --link-header-h: 0, 40%, 86%;
  51.     --icon: 0, 35%, 72%;
  52.     --text-shadow: 0, 53%, 57%;
  53.     --shadow: 0, 0%, 0%;
  54.     --tint: 21, 100%, 50%;
  55.     --tint-gradient-1: 0, 0%, 0%;
  56.     --tint-gradient-2: 0, 0%, 100%;
  57.    
  58.     /* Meta */
  59.     --transition-text: 0.08s ease-out;
  60.     --transition-button: 0.11s ease-out;
  61.     --fontset: "Lexend Deca", sans-serif;
  62.     --fontset: "Montserrat", sans-serif;
  63.     --fontset: 'Muli', 'FontAwesome', sans-serif;
  64.     --fontset-heading: 'Playball', 'FontAwesome', cursive;
  65. }
  66.  
  67. /* SCROLLBARS */
  68.  
  69. /* Firefox */
  70. * {
  71.     scrollbar-color: hsl(var(--accent)) hsl(var(--button));
  72. }
  73.  
  74. /* Chrome */
  75.  
  76. *::-webkit-scrollbar {
  77.     background: hsl(var(--button));
  78. }
  79.  
  80. *::-webkit-scrollbar-button:vertical:single-button {
  81.     background: transparent center / 10px auto no-repeat;
  82.     height: 17px;
  83. } *::-webkit-scrollbar-button:vertical:single-button:start {
  84.     background-image: url(https://i.imgur.com/Cu2u9Hu.png);
  85. } *::-webkit-scrollbar-button:vertical:single-button:end {
  86.     background-image: url(https://i.imgur.com/0YI7VxA.png);
  87. } *::-webkit-scrollbar-button:horizontal:single-button {
  88.     background: transparent center / auto 10px no-repeat;
  89. } *::-webkit-scrollbar-button:horizontal:single-button:start {
  90.     background-image: url(https://i.imgur.com/BArw1oI.png);
  91. } *::-webkit-scrollbar-button:horizontal:single-button:end {
  92.     background-image: url(https://i.imgur.com/vqOtoms.png);
  93. }
  94.  
  95. *::-webkit-scrollbar-corner {
  96.     background: hsl(var(--button));
  97. }
  98.  
  99. *::-webkit-scrollbar-thumb {
  100.     background: hsl(var(--accent)) content-box;
  101.     border: 0 solid transparent;
  102. } *::-webkit-scrollbar-thumb:vertical {
  103.     border-width: 0 2px;
  104. } *::-webkit-scrollbar-thumb:horizontal {
  105.     border-width: 2px 0;
  106. } *::-webkit-scrollbar-thumb:hover {
  107.     background-color: hsla(var(--accent), 75%);
  108. }
  109.  
  110. *::-webkit-scrollbar-track {
  111.     width: 5px;
  112. }
  113.  
  114. /* box-sizing tweak */
  115.  
  116. :root {
  117.     box-sizing: border-box;
  118. } *, *::before, *::after {
  119.     box-sizing: inherit;
  120. }
  121.  
  122. a {
  123.     text-decoration: none !important;
  124. }
  125.  
  126. /* CONTAINERS */
  127.  
  128. html {
  129.     font: 13px var(--fontset);
  130. }
  131.  
  132. body.ownlist {
  133.     position: relative;
  134.     display: flex;
  135.     min-width: 1140px;
  136.     background: hsl(var(--tint)) no-repeat center / cover fixed !important;
  137.     background-image:
  138.         linear-gradient(15deg, hsl(var(--tint-gradient-1)), hsl(var(--tint-gradient-2))),
  139.         var(--background)
  140.         !important;
  141.     background-blend-mode: overlay;
  142.     flex-flow: column nowrap;
  143.     color: hsl(var(--text)) !important;
  144.     font: inherit;
  145. }
  146.  
  147. body::before {
  148.     content: '';
  149.     position: fixed;
  150.     top: 0;
  151.     left: 0;
  152.     width: 100%;
  153.     min-width: 1140px;
  154.     height: 100%;
  155.     background: hsl(var(--page)) var(--background) no-repeat center / cover fixed;
  156.     opacity: 0.7;
  157.     filter: saturate(0.5) brightness(0.5);
  158. }
  159.  
  160. .list-container {
  161.     width: 100%;
  162.     background: none !important;
  163.     border: none;
  164. }
  165.  
  166. .list-block {
  167.     min-height: 720px;
  168.     margin-top: 96px !important;
  169. }
  170.  
  171. .list-unit {
  172.     width: 1120px;
  173.     padding: 0 250px 0 70px;
  174. }
  175.  
  176. .list-table {
  177.     width: 100%;
  178.     border: none;
  179. }
  180.  
  181. /* COVER */
  182.  
  183. .cover-block {
  184.     display: block;
  185.     width: 100%;
  186.     height: 280px;
  187.     background: #010101;
  188.     overflow: hidden;
  189. }
  190.  
  191. #cover-image-container {
  192.     position: relative;
  193.     display: block;
  194.     width: 100%;
  195.     height: 100%;
  196.     background: hsl(var(--tint)) no-repeat center / cover;
  197.     background-image:
  198.         linear-gradient(15deg, hsl(var(--tint-gradient-1)), hsl(var(--tint-gradient-2))),
  199.         var(--banner);
  200.     background-blend-mode: overlay;
  201.     box-shadow: inset 0 -16px 6px -12px hsla(var(--shadow), 65%);
  202. } .cover-block #cover-image-container.hide {
  203.     display: block !important;
  204. }
  205.  
  206. #cover-image-container::before {
  207.     content: '';
  208.     position: absolute;
  209.     top: 0;
  210.     left: 0;
  211.     width: 100%;
  212.     height: 100%;
  213.     background: var(--banner) no-repeat center / cover;
  214.     opacity: 0.4;
  215.     animation: banner-fade 1.2s ease-out 0.5s backwards;
  216. }
  217.  
  218. @keyframes banner-fade {
  219.     from {
  220.         opacity: 0;
  221.         transform: translateX(2%) scale(1.15);
  222.     } to {
  223.         opacity: 0.4;
  224.         transform: none;
  225.     }
  226. }
  227.  
  228. #cover-image-container::after {
  229.     content: '';
  230.     position: absolute;
  231.     top: 45px;
  232.     left: 860px;
  233.     opacity: 0.7;
  234. }
  235.  
  236. #cover-image-container .btn-list-setting {
  237.     display: none;
  238. }
  239.  
  240. .list-unit .list-status-title {
  241.     position: static;
  242.     display: block;
  243.     width: 100%;
  244.     height: 0;
  245. }
  246.  
  247. .list-unit .list-status-title .text {
  248.     position: absolute;
  249.     left: 0;
  250.     top: 280px;
  251.     display: block;
  252.     width: 100%;
  253.     height: 46px;
  254.     padding: 0 10px 0 calc(50% - 534px);
  255.     background: hsl(var(--content));
  256.     --gradient-size: 22px;
  257.     --gradient-fade1: 30%;
  258.     --gradient-fade2: 90%;
  259.     background-image:
  260.         linear-gradient(
  261.             to right,
  262.             hsla(var(--content), var(--gradient-fade1)),
  263.             hsla(var(--content), var(--gradient-fade2))
  264.         ), repeating-linear-gradient(
  265.             45deg,
  266.             hsla(var(--accent), 50%),
  267.             hsla(var(--content), 50%) calc(var(--gradient-size) * 0.1),
  268.             hsla(var(--content), 50%) calc(var(--gradient-size) * 0.9),
  269.             hsla(var(--accent), 50%) var(--gradient-size)
  270.         ), repeating-linear-gradient(
  271.             135deg,
  272.             hsla(var(--accent), 50%),
  273.             hsla(var(--content), 50%) calc(var(--gradient-size) * 0.1),
  274.             hsla(var(--content), 50%) calc(var(--gradient-size) * 0.9),
  275.             hsla(var(--accent), 50%) var(--gradient-size)
  276.         );
  277.     border-bottom: 6px solid hsl(var(--accent));
  278.     box-shadow: 0 1px 3px hsla(var(--shadow), 50%);
  279.     color: hsl(var(--text));
  280.     text-shadow: 0 2px 4px hsla(var(--shadow), 75%);
  281.     font-size: 0;
  282.     text-align: left;
  283.     cursor: default;
  284.     animation: slide-in 2.5s cubic-bezier(.1,.7,.5,1) 0.5s backwards;
  285. } .list-unit .list-status-title .text::before {
  286.     font: 5rem/26px var(--fontset);
  287.     font: normal 7rem/16px var(--fontset-heading);
  288. } .list-unit.all_anime .list-status-title .text::before {
  289.     content: 'all anime';
  290. } .list-unit.all_manga .list-status-title .text::before {
  291.     content: 'all manga';
  292. } .list-unit.watching .list-status-title .text::before,
  293. .list-unit.reading .list-status-title .text::before {
  294.     content: 'current';
  295. } .list-unit.completed .list-status-title .text::before {
  296.     content: 'completed';
  297. } .list-unit.onhold .list-status-title .text::before {
  298.     content: 'paused';
  299. } .list-unit.dropped .list-status-title .text::before {
  300.     content: 'dropped';
  301. } .list-unit.plantowatch .list-status-title .text::before,
  302. .list-unit.plantoread .list-status-title .text::before {
  303.     content: 'planned';
  304. }
  305.  
  306. @keyframes slide-in {
  307.     0% {
  308.         color: hsla(var(--text), 0%);
  309.         text-shadow: 0 2px 4px hsla(var(--shadow), 0%);
  310.         text-indent: 560px;
  311.     } 50% {
  312.         color: hsl(var(--text));
  313.     } 100% {
  314.         text-shadow: 0 2px 4px hsla(var(--shadow), 75%);
  315.         text-indent: 0;
  316.     }
  317. }
  318.  
  319. /* HEADER MENU */
  320.  
  321. .header {
  322.     position: absolute;
  323.     left: 0;
  324.     top: 280px;
  325.     z-index: 1;
  326.     display: flex;
  327.     width: 100%;
  328.     height: 0;
  329.     padding-right: calc(50% - 394px);
  330.     flex-flow: row nowrap;
  331.     justify-content: flex-end;
  332.     align-items: flex-start;
  333.     color: hsl(var(--text));
  334. }
  335.  
  336. .header a {
  337.     color: hsl(var(--link));
  338.     transition: color var(--transition-text) !important;
  339. } .header a:hover {
  340.     color: hsl(var(--link-h));
  341. }
  342.  
  343. .header .header-title {
  344.     position: absolute;
  345.     top: 5px;
  346.     right: calc(50% - 560px);
  347.     width: 86px;
  348.     height: 30px;
  349.     background: hsla(var(--button), 80%);
  350.     border-radius: 4px;
  351.     order: 1;
  352.     font-size: 0;
  353.     text-indent: 0;
  354. } .header .header-title::before {
  355.     content: 'Go Home';
  356.     color: hsl(var(--link));
  357.     font: bold 1.2rem/30px var(--fontset);
  358.     transition: color var(--transition-text);
  359. } .header .header-title:hover::before {
  360.     color: hsl(var(--link-h));
  361. }
  362.  
  363. .header .header-menu {
  364.     position: static;
  365.     display: flex;
  366.     width: 400px;
  367.     height: 40px;
  368.     flex-flow: row wrap;
  369.     justify-content: flex-end;
  370.     align-content: space-evenly;
  371.     order: 2;
  372. }
  373.  
  374. /* Viewing X's Xlist */
  375.  
  376. .header .header-menu .btn-menu {
  377.     width: auto;
  378.     flex: 0 1 auto;
  379.     order: 1;
  380.     color: hsl(var(--text));
  381.     font-size: 1rem;
  382.     text-align: left;
  383.     white-space: nowrap;
  384. }
  385.  
  386. .header .header-menu .btn-menu .fa {
  387.     display: none;
  388. }
  389.  
  390. #header-menu-button {
  391.     color: hsl(var(--text));
  392.     font-weight: normal;
  393.     cursor: text;
  394. }
  395.  
  396. /* Shared Anime/Affinity/History */
  397.  
  398. .header .header-info {
  399.     width: 100%;
  400.     margin: 0;
  401.     flex: 0 0 auto;
  402.     order: 3;
  403.     text-align: right;
  404. }
  405.  
  406. /* Swap List */
  407.  
  408. #header-menu-dropdown {
  409.     position: static;
  410.     display: block;
  411.     background: none;
  412.     border: none;
  413.     box-shadow: none;
  414.     flex: 0 1 auto;
  415.     order: 2;
  416.     white-space: nowrap;
  417. }
  418.  
  419. #header-menu-dropdown::before {
  420.     content: ' - ';
  421.     white-space: pre;
  422. }
  423.  
  424. #header-menu-dropdown .icon-menu {
  425.     display: inline-block;
  426.     width: auto;
  427.     height: auto;
  428.     background: none;
  429.     border-radius: 3px;
  430.     color: hsl(var(--link));
  431.     font: 1rem var(--fontset);
  432. } #header-menu-dropdown .icon-menu:hover {
  433.     color: hsl(var(--link-h));
  434. }
  435.  
  436. #header-menu-dropdown .icon-menu::before {
  437.     content: '\f021';
  438. } #header-menu-dropdown .icon-menu::after {
  439.     content: 'Swap List';
  440.     margin-left: 3px;
  441.     font-weight: bold;
  442. }
  443.  
  444. #header-menu-dropdown .icon-menu .text,
  445. #header-menu-dropdown svg {
  446.     display: none;
  447. }
  448.  
  449. #header-menu-dropdown span {
  450.     position: static;
  451. }
  452.  
  453. /* USER MENU */
  454.  
  455. .list-menu-float {
  456.     position: sticky;
  457.     top: 376px;
  458.     top: 10px;
  459.     z-index: 100;
  460.     display: flex;
  461.     width: 30px;
  462.     height: 0;
  463.     margin: 376px 0 -376px calc(50% - 560px);
  464.     border: none;
  465.     flex-flow: column nowrap;
  466. }
  467.  
  468. .list-menu-float .icon-menu {
  469.     width: 40px !important;
  470.     height: 40px;
  471.     background-color: hsla(var(--content), 80%) !important;
  472.     background-size: 0 !important;
  473.     background-repeat: no-repeat !important;
  474.     border-radius: 4px;
  475.     margin-bottom: 5px;
  476.     flex: 0 0 auto;
  477.     transition: all var(--transition-button);
  478. } .list-menu-float .icon-menu:hover {
  479.     width: 170px !important;
  480.     background-color: hsl(var(--content)) !important;
  481. }
  482.  
  483. .list-menu-float .icon-menu svg.icon {
  484.     fill: hsl(var(--text)) !important;
  485. }
  486.  
  487. .list-menu-float .icon-menu.quick-add svg.icon-quick-add,
  488. .list-menu-float .icon-menu.anime-list svg.icon-anime-list,
  489. .list-menu-float .icon-menu.manga-list svg.icon-manga-list {
  490.     top: 10px;
  491.     width: 18px;
  492. }
  493.  
  494. .list-menu-float .icon-menu.history svg.icon-history,
  495. .list-menu-float .icon-menu.setting svg.icon-setting {
  496.     top: 10px;
  497.     left: 12px;
  498.     width: 17px;
  499. }
  500.  
  501. .list-menu-float .icon-menu.export svg.icon-export {
  502.     top: 9px;
  503.     left: 12px;
  504.     width: 16px;
  505. }
  506.  
  507. .list-menu-float .icon-menu.logout svg.icon-logout {
  508.     top: 12px;
  509.     left: 12px;
  510.     width: 18px;
  511. }
  512.  
  513. .list-menu-float .icon-menu .text {
  514.     left: 40px;
  515.     top: 0;
  516.     color: hsl(var(--text));
  517.     font: bold 1.2rem/40px var(--fontset);
  518.     text-align: left;
  519.     opacity: 1;
  520.     transition: width var(--transition-button);
  521. } .list-menu-float .icon-menu:hover .text {
  522.     left: 40px;
  523.     width: 130px;
  524. }
  525.  
  526. .list-menu-float .icon-menu.setting .text {
  527.     height: 83px !important;
  528.     opacity: 1;
  529.     transition: width var(--transition-button);
  530. } .list-menu-float .icon-menu.setting:hover .text {
  531.     width: 130px;
  532. }
  533.  
  534. .list-menu-float .icon-menu.setting .text .link-list-setting,
  535. .list-menu-float .icon-menu.setting .text .link-style-setting {
  536.     padding: 0 10px;
  537.     color: hsl(var(--text)) !important;
  538.     opacity: 1;
  539. } .list-menu-float .icon-menu.setting:hover .text .link-list-setting,
  540. .list-menu-float .icon-menu.setting:hover .text .link-style-setting {
  541.     width: 130px;
  542.     height: 40px;
  543.     font: inherit;
  544. }
  545.  
  546. .list-menu-float .icon-menu.setting:hover .text .link-list-setting {
  547.     background: none;
  548. }
  549.  
  550. .list-menu-float .icon-menu.setting .text .link-style-setting {
  551.     position: absolute;
  552.     top: 43px !important;
  553.     background: hsla(var(--content), 80%);
  554.     border-radius: 4px;
  555. } .list-menu-float .icon-menu.setting:hover .text .link-style-setting {
  556.     background: hsl(var(--content));
  557.     border: none;
  558. }
  559.  
  560. .list-menu-float .icon-menu.profile::before {
  561.     content: '';
  562.     position: absolute;
  563.     top: 3px;
  564.     left: 3px;
  565.     display: block;
  566.     width: 34px;
  567.     height: 34px;
  568.     border-radius: 4px;
  569.     background: transparent no-repeat center top / cover;
  570.     background-image: inherit;
  571. }
  572.  
  573. .list-menu-float .icon-menu.profile::after {
  574.     content: "Profile";
  575.     position: absolute;
  576.     top: 0;
  577.     left: 50px;
  578.     width: 0;
  579.     height: 40px;
  580.     overflow: hidden;
  581.     color: hsl(var(--text));
  582.     font: bold 1.2rem/40px var(--fontset);
  583.     text-align: left;
  584.     transition: width var(--transition-button);
  585. } .list-menu-float .icon-menu.profile:hover::after {
  586.     width: 110px;
  587. }
  588.  
  589. /* RIGHT SIDEBAR */
  590.  
  591. #status-menu,
  592. .list-unit .list-status-title .stats,
  593. .list-table > tbody:first-of-type {
  594.     position: absolute;
  595.     left: calc(50% + 340px);
  596.     top: 376px;
  597.     width: 220px;
  598.     height: calc(100% - 376px);
  599.     background: none;
  600.     border: none;
  601. } #status-menu.fixed {
  602.     position: absolute;
  603. } .list-unit .list-status-title .stats {
  604.     top: calc(376px + 252px);
  605.     height: calc(100% - 376px - 252px);
  606. } .list-table > tbody:first-of-type {
  607.     top: calc(376px + 292px);
  608.     height: calc(100% - 376px - 292px);
  609. }
  610.  
  611. #status-menu .status-menu,
  612. .stats #advanced-options-button,
  613. .list-table-header {
  614.     position: sticky;
  615.     z-index: 5;
  616.     display: flex;
  617.     align-items: flex-start;
  618.     border-radius: 4px;
  619.     background: hsla(var(--content), 80%);
  620.     flex-flow: column nowrap;
  621. } #status-menu .status-menu {
  622.     top: 50px;
  623.     height: 202px;
  624.     margin-top: 40px;
  625. } .stats #advanced-options-button {
  626.     z-index: 3;
  627.     top: 262px;
  628.     height: 30px;
  629.     padding: 0 10px;
  630.     margin: 0;
  631.     flex-flow: row nowrap;
  632.     color: hsl(var(--link));
  633.     font: bold 1.2rem/30px var(--fontset);
  634.     transition: color var(--transition-text);
  635. } .stats #advanced-options-button::before {
  636.     content: 'Advanced ';
  637.     white-space: pre;
  638. } .stats #advanced-options-button:hover {
  639.     color: hsl(var(--link-h));
  640. } .list-table-header {
  641.     top: 302px;
  642.     z-index: 4;
  643.     padding: 5px 10px 10px;
  644. }
  645.  
  646. /* Search */
  647.  
  648. #status-menu .search-container {
  649.     top: -40px;
  650.     right: 0;
  651.     display: flex;
  652.     width: 100%;
  653.     height: 30px;
  654.     background: hsla(var(--content), 80%);
  655.     border-radius: 4px;
  656.     flex-flow: row-reverse nowrap;
  657.     transition: background-color var(--transition-button)
  658. } #status-menu .search-container:focus-within {
  659.     background: hsl(var(--content));
  660. }
  661.  
  662. #status-menu #search-box {
  663.     position: relative;
  664.     width: 100%;
  665.     height: 100%;
  666.     margin: 0;
  667.     margin-left: -30px;
  668. }
  669.  
  670. #status-menu #search-box input {
  671.     height: 100%;
  672.     padding: 0 10px 0 35px;
  673.     color: hsl(var(--text));
  674.     background: none;
  675.     border: none;
  676. }
  677.  
  678. #status-menu #search-button {
  679.     display: block;
  680.     width: 20px;
  681.     height: 100%;
  682.     margin: 0;
  683.     color: hsl(var(--icon));
  684.     pointer-events: none;
  685. }
  686.  
  687. #status-menu #search-button .fa {
  688.     line-height: 26px;
  689. }
  690.  
  691. /* Headings */
  692.  
  693. .status-menu::before,
  694. .list-table-header::before {
  695.     font-size: 1.2rem;
  696.     line-height: 26px;
  697.     font-weight: bold;
  698. } .status-menu::before {
  699.     content: 'Filter List';
  700.     height: 36px;
  701.     padding: 5px 10px;
  702. } .list-table-header::before {
  703.     content: 'Sort List';
  704.     height: 26px;
  705.     margin-bottom: 5px;
  706. }
  707.  
  708. /* Buttons */
  709.  
  710. .stats .fa {
  711.     display: none;
  712. }
  713.  
  714. .list-table .list-table-header .header-title {
  715.     display: block;
  716.     width: auto !important;
  717.     height: auto;
  718.     padding: 0 !important;
  719.     background: none;
  720.     border: none;
  721.     padding: 0;
  722.     font-size: 0;
  723.     text-align: left;
  724. }
  725.  
  726. #status-menu .status-button,
  727. .list-table .list-table-header .header-title .link.sort {
  728.     height: 26px;
  729.     padding: 0 10px;
  730.     color: hsl(var(--link));
  731.     font: normal 1.2rem/26px var(--fontset);
  732.     text-align: left;
  733.     transition: color var(--transition-text);
  734. } #status-menu .status-button {
  735.     margin: 0 10px;
  736.     font-size: 0;
  737.     line-height: 0;
  738. } #status-menu .status-button.on {
  739.     pointer-events: none;
  740. } #status-menu .status-button:hover,
  741. .list-table .list-table-header .header-title .link.sort:hover {
  742.     color: hsl(var(--link-h));
  743. }
  744.  
  745. #status-menu .status-button::before {
  746.     font-size: 1.2rem;
  747.     line-height: 26px;
  748.     color: hsl(var(--link));
  749.     transition: inherit;
  750. } #status-menu .status-button:nth-child(1)::before {
  751.     content: 'All';
  752. } #status-menu .status-button:nth-child(2)::before {
  753.     content: 'Current';
  754. } #status-menu .status-button:nth-child(3)::before {
  755.     content: 'Completed';
  756. } #status-menu .status-button:nth-child(4)::before {
  757.     content: 'Paused';
  758. } #status-menu .status-button:nth-child(5)::before {
  759.     content: 'Dropped';
  760. } #status-menu .status-button:nth-child(6)::before {
  761.     content: 'Planned';
  762. } #status-menu .status-button:hover::before {
  763.     color: hsl(var(--link-h));
  764. } #status-menu .status-button.on::before {
  765.     color: hsla(var(--link), 50%);
  766. }
  767.  
  768. #status-menu .status-button::after {
  769.     display: none;
  770. }
  771.  
  772. .header-title.image {
  773.     display: none !important;
  774. }
  775.  
  776. /* STATS */
  777.  
  778. .stats #show-stats-button {
  779.     position: absolute;
  780.     top: calc(-252px + -91px);
  781.     right: calc(96px);
  782.     z-index: 10;
  783.     width: 60px;
  784.     height: 30px;
  785.     background: hsla(var(--button), 80%);
  786.     border-radius: 4px;
  787.     margin: 0;
  788.     color: hsl(var(--link));
  789.     font: bold 1.2rem/30px var(--fontset);
  790.     text-align: center;
  791.     transition: color var(--transition-text);
  792. } .stats #show-stats-button:hover {
  793.     color: hsl(var(--link-h));
  794. }
  795.  
  796. .list-unit .list-stats {
  797.     width: 100%;
  798.     background: hsla(var(--content), 80%);
  799.     border-radius: 4px;
  800.     margin-bottom: 10px;
  801.     color: hsl(var(--text));
  802.     transition: background-color var(--transition-button);
  803. } .list-unit .list-stats:hover {
  804.     background: hsl(var(--content));
  805. }
  806.  
  807. /* LIST */
  808.  
  809. .list-item {
  810.     display: block;
  811.     background: hsla(var(--content), 80%) !important;
  812.     border-radius: 4px;
  813.     margin-bottom: 10px;
  814.     transition: background-color var(--transition-button);
  815.     /*unused
  816.     animation: slide-up 1.5s cubic-bezier(.16,.74,.59,1) 0s; */
  817. } .list-item:hover {
  818.     background: hsla(var(--content), 100%) !important;
  819. }
  820.  
  821. /*unused
  822. @keyframes slide-up {
  823.     from {
  824.         transform: translateY(150px);
  825.     } to {
  826.         transform: none;
  827.     }
  828. }*/
  829.  
  830. .list-table-data,
  831. .more-info[style*="block"] {
  832.     position: relative;
  833.     display: block !important;
  834.     padding: 5px 15px 10px;
  835.     border: none;
  836.     align-items: center;
  837. } .list-table-data {
  838.     display: flex !important;
  839.     min-height: 40px;
  840.     padding: 0 80px 0 5px;
  841. }
  842.  
  843. .list-table .list-table-data .data {
  844.     display: block;
  845.     padding: 0;
  846.     margin-left: 10px;
  847.     border: none;
  848.     flex: 0 0 auto;
  849. }
  850.  
  851. .list-table .list-table-data .data a {
  852.     color: hsl(var(--link)) !important;
  853.     transition: color var(--transition-text);
  854. } .list-table .list-table-data .data a:not(.edit-disabled):hover {
  855.     color: hsl(var(--link-h)) !important;
  856. }
  857.  
  858. /* List Items */
  859.  
  860. body:not([data-query*='status":7']) .list-table .list-table-data .data.status {
  861.     display: none;
  862. }
  863.  
  864. .list-table .list-table-data .data.status {
  865.     position: absolute;
  866.     top: -8px;
  867.     left: 0;
  868.     width: auto;
  869.     background: none !important;
  870.     color: hsla(var(--text), 50%);
  871.     font: bold 1.1rem/16px var(--fontset);
  872.     text-shadow: 0 1px 3px hsla(var(--content), 100%);
  873.     order: 80;
  874. } .data.status[class$="ing"]::before {
  875.     content: 'Current';
  876. } .data.status.completed::before {
  877.     content: 'Completed';
  878. } .data.status.onhold::before {
  879.     content: 'Paused';
  880. } .data.status.dropped::before {
  881.     content: 'Dropped';
  882. } .data.status[class*="planto"]::before {
  883.     content: 'Planned';
  884. }
  885.  
  886. /* Image */
  887.  
  888. .list-table .list-table-data .data.image {
  889.     width: 40px;
  890.     height: 40px;
  891.     margin: 5px 0 5px 10px;
  892.     border-radius: 20px;
  893.     order: 5;
  894.     overflow: hidden;
  895. }
  896.  
  897. .list-table .list-table-data .data.image .link,
  898. .list-table .list-table-data .data.image .image {
  899.     width: 100%;
  900.     height: 100%;
  901.     object-fit: cover;
  902.     border: none;
  903. }
  904.  
  905. /* Title */
  906.  
  907. .list-table .list-table-data .data.title {
  908.     padding: 0;
  909.     flex: 1 1 auto;
  910.     order: 15;
  911. }
  912.  
  913. .list-table .list-table-data .data.title .link {
  914.     vertical-align: middle;
  915. }
  916.  
  917. .content-status,
  918. .rewatching,
  919. .rereading {
  920.     color: hsla(var(--text), 50%) !important;
  921.     vertical-align: middle;
  922. }
  923.  
  924. .icon-watch {
  925.     display: none !important;
  926. }
  927.  
  928. /* Add-edit-more */
  929.  
  930. .list-table .list-table-data .data.title .add-edit-more {
  931.     position: absolute;
  932.     right: 15px;
  933.     top: calc(50% - 13px);
  934.     display: flex;
  935.     margin: 0;
  936.     font-size: 0;
  937. }
  938.  
  939. .list-table .list-table-data .data.title .add-edit-more a {
  940.     display: block;
  941.     width: 26px;
  942.     height: 26px;
  943.     background: hsla(var(--button));
  944.     border-radius: 50%;
  945.     margin-left: 3px;
  946.     text-align: center;
  947.     opacity: 0.5;
  948.     transition: opacity var(--transition-button);
  949. } .list-table .list-table-data .data.title .add-edit-more a:hover {
  950.     opacity: 1;
  951. }
  952.  
  953. .add-edit-more a::after {
  954.     font-size: 1.2rem;
  955.     line-height: 26px;
  956.     transition: color var(--transition-button);
  957. } .add-edit-more .add a::after {
  958.     content: '\f067';
  959. } .add-edit-more .edit a::after {
  960.     content: '\f040';
  961.     line-height: 24px;
  962. } .add-edit-more .more a::after {
  963.     content: '\f141';
  964. }
  965.  
  966. /* Number */
  967.  
  968. .list-table .list-table-data .data.number {
  969.     position: absolute;
  970.     top: calc(50% - 1rem);
  971.     right: calc(100% + 10px);
  972.     height: 2rem;
  973.     order: 1;
  974.     text-shadow: 1px 1px 2px hsl(var(--content));
  975.     font-size: 1.2rem;
  976.     line-height: 2rem;
  977. }
  978.  
  979. /* Score */
  980.  
  981. .list-table .list-table-data .data.score {
  982.     width: 2ch;
  983.     /* Using a fixed height prevents jitter when bringing up selection box */
  984.     height: 3ch;
  985.     order: 10;
  986. }
  987.  
  988. .list-table .list-table-data .data.score .link {
  989.     /* These properties centre the link 100% of the time */
  990.     display: block;
  991.     width: 3ch;
  992.     height: 3ch;
  993.     margin-left: 50%;
  994.     line-height: 3ch;
  995.     transform: translateX(-50%);
  996. }
  997.  
  998. .data.score select {
  999.     position: relative;
  1000.     z-index: 1;
  1001.     width: calc(2ch + 30px);
  1002.     height: 3ch;
  1003.     background: hsl(var(--button));
  1004.     border: 1px solid hsl(var(--accent));
  1005.     border-radius: 3px;
  1006.     margin-left: -15px;
  1007.     color: hsl(var(--text));
  1008. }
  1009.  
  1010. .data.score .link:not([style*="none"]) ~ select {
  1011.     /* Hides selection box while Javascript is working, preventing jitter. */
  1012.     display: none;
  1013. }
  1014.  
  1015. /* Progress */
  1016.  
  1017. .list-table .list-table-data .data.progress,
  1018. .list-table .list-table-data .data.chapter,
  1019. .list-table .list-table-data .data.volume {
  1020.     order: 20;
  1021.     text-align: right;
  1022.     font-size: 1.1rem;
  1023. }
  1024.  
  1025. .list-table .list-table-data .data.progress span:last-of-type::after {
  1026.     content: 'eps';
  1027.     color: hsla(var(--text), 65%);
  1028. } .list-table .list-table-data .data.chapter span:last-of-type::after {
  1029.     content: 'ch';
  1030.     color: hsla(var(--text), 65%);
  1031. }
  1032.  
  1033. .list-table .list-table-data .data a[class^="icon-add"] {
  1034.     color: hsla(var(--link), 65%) !important;
  1035. } .list-table .list-table-data .data a[class^="icon-add"]:hover {
  1036.     color: hsl(var(--link-h)) !important;
  1037. }
  1038.  
  1039. .list-table .list-table-data .data.type {
  1040.     width: 70px;
  1041.     order: 22;
  1042. }
  1043.  
  1044. .list-table .list-table-data .data.started,
  1045. .list-table .list-table-data .data.finished,
  1046. .list-table .list-table-data .data.airing-started,
  1047. .list-table .list-table-data .data.airing-finished {
  1048.     width: 60px;
  1049.     order: 17;
  1050. }
  1051.  
  1052. .list-table .list-table-data .data.days {
  1053.     width: 30px;
  1054. }
  1055.  
  1056. .list-table .list-table-data .data.season {
  1057.     width: 90px;
  1058. }
  1059.  
  1060. .list-table .list-table-data .data.studio,
  1061. .list-table .list-table-data .data.licensor,
  1062. .list-table .list-table-data .data.magazine {
  1063.     width: 100px;
  1064. }
  1065.  
  1066. .list-table .list-table-data .data.tags {
  1067.     width: 100px;
  1068. }
  1069.  
  1070. .list-table .list-table-data .data.storage {
  1071.     width: 70px;
  1072. }
  1073.  
  1074. /* More Content */
  1075.  
  1076. .more-content {
  1077.     padding: 0 !important;
  1078. }
  1079.  
  1080. .more-content::after {
  1081.     content: '';
  1082.     position: absolute;
  1083.     top: 0;
  1084.     left: 0;
  1085.     width: 100%;
  1086.     height: 1px;
  1087.     background: linear-gradient(
  1088.             to right,
  1089.             hsla(var(--content),0%) 0%,
  1090.             hsla(var(--content),100%) 30px,
  1091.             hsla(var(--content),100%) calc(100% - 30px),
  1092.             hsla(var(--content),0%) 100%
  1093.         )
  1094. }
  1095.  
  1096. .more-info td,
  1097. .more-info table,
  1098. .more-info tbody,
  1099. .more-info tr {
  1100.     display: block;
  1101. }
  1102.  
  1103. /* Remove unwanted info */
  1104.  
  1105. .td1::first-line {
  1106.     font-size: 0;
  1107.     line-height: 0;
  1108. }
  1109.  
  1110. .more-info br,
  1111. .more-info div:first-of-type {
  1112.     display: none;
  1113. }
  1114.  
  1115. .anime .more-info small ~ br,
  1116. .manga .more-info br:nth-of-type(n+9) {
  1117.     display: initial;
  1118. }
  1119.  
  1120. /* Loading Spinner */
  1121.  
  1122. /* FOOTER */
  1123.  
  1124. footer {
  1125.     position: relative;
  1126.     z-index: 1;
  1127. }
  1128.  
  1129. #footer-block {
  1130.     height: 43px;
  1131.     padding: 10px 0 10px;
  1132.     background: hsl(var(--content));
  1133.     --gradient-size: 22px;
  1134.     --gradient-fade1: 70%;
  1135.     --gradient-fade2: 93%;
  1136.     background-image:
  1137.         linear-gradient(
  1138.             to right,
  1139.             hsla(var(--content), var(--gradient-fade2)),
  1140.             hsla(var(--content), var(--gradient-fade1)) calc(50% - 300px),
  1141.             hsla(var(--content), var(--gradient-fade1)) calc(50% + 300px),
  1142.             hsla(var(--content), var(--gradient-fade2))
  1143.         ), repeating-linear-gradient(
  1144.             45deg,
  1145.             hsla(var(--accent), 50%),
  1146.             hsla(var(--content), 50%) calc(var(--gradient-size) * 0.1),
  1147.             hsla(var(--content), 50%) calc(var(--gradient-size) * 0.9),
  1148.             hsla(var(--accent), 50%) var(--gradient-size)
  1149.         ), repeating-linear-gradient(
  1150.             135deg,
  1151.             hsla(var(--accent), 50%),
  1152.             hsla(var(--content), 50%) calc(var(--gradient-size) * 0.1),
  1153.             hsla(var(--content), 50%) calc(var(--gradient-size) * 0.9),
  1154.             hsla(var(--accent), 50%) var(--gradient-size)
  1155.         );
  1156.     border-top: 3px solid hsl(var(--accent));
  1157.     box-shadow: 0 -1px 3px hsla(var(--shadow), 50%);
  1158.     color: hsl(var(--text));
  1159. }
  1160.  
  1161. #copyright {
  1162.     padding: 0;
  1163.     color: hsl(var(--text));
  1164.     font: 1rem/20px var(--fontset);
  1165. }
  1166.  
  1167. #copyright::after {
  1168.     content: 'List design by Valerio Lyndon.';
  1169. }
  1170.  
  1171. /* OVERLAYS */
  1172.  
  1173. #fancybox-overlay {
  1174.     background: linear-gradient(15deg, hsl(var(--tint1)), hsla(var(--tint2), 66.7%));
  1175. }
  1176.  
  1177. #fancybox-wrap {
  1178.     position: fixed;
  1179.     top: 10px !important;
  1180.     left: calc(50% - 490px) !important;
  1181.     width: 800px !important;
  1182.     max-height: calc(100% - 20px);
  1183.     padding: 0;
  1184. }
  1185.  
  1186. div.fancy-bg {
  1187.     display: none;
  1188. }
  1189.  
  1190. #fancybox-inner {
  1191.     top: 0 !important;
  1192.     left: 0 !important;
  1193.     width: 100% !important;
  1194.     height: 100% !important;
  1195. }
  1196.  
  1197. /* Filter Menu */
  1198.  
  1199. #advanced-options[style*="block"] ~ #fancybox-overlay {
  1200.     opacity: 0.2 !important;
  1201. }
  1202.  
  1203. #advanced-options {
  1204.     position: fixed;
  1205.     top: 10px;
  1206.     left: calc(50% - 490px);
  1207.     margin: 0;
  1208.     width: 800px;
  1209. }
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!