API tools faq
paste
Advertisement
ValerioLyndon

Clarity Underpowered v1.0.1

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