API tools faq
paste
Advertisement
ramenradian

Cardstock v1.11 [Dark Sun] Anilist Theme

ramenradian
Jul 23rd, 2016
137
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 21.23 KB | None | 0 0
raw download clone embed print report
  1. @char "UTF-8";
  2.  
  3. /*----------------------------------------------------------------------------*\
  4.  
  5.   Cardstock v1.11 by adustyspectacle
  6.  
  7.   A compact, minimal, cover theme.
  8.  
  9.   CHANGELOG
  10.   v1.11 (03 JUL 2016)
  11.   * revamped mobile style
  12.  
  13.   v1.10 (02 JUL 2016)
  14.   * changed title borders, ep/chap box and airing tag lengths from ems to pixels
  15.   * changed .plus class
  16.  
  17.   v1.9 (06 FEB 2016)
  18.   * styled the popup edit box
  19.  
  20.   v1.8 (28 JAN 2016)
  21.   * changed styles because of the Anilist update, mostly the navigation
  22.  
  23.   v1.7 (20 JAN 2016)
  24.   * styled notification highlight
  25.  
  26.   v1.6 (08 JAN 2016)
  27.   * added mobile-specific css
  28.  
  29.   v1.5 (02 JAN 2016)
  30.   * integrated changes from the Dark Sun style to the Pale Moon style
  31.  
  32.   v1.4 (16 OCT 2015)
  33.   * styled list header thing
  34.  
  35.   v1.3 (09 OCT 2015)
  36.   * cleaned up the CSS, organising it and stuff
  37.   * added customisation area at the end
  38.  
  39.   v1.2 (07 OCT 2015)
  40.   * added rewatch note thing
  41.   * added custom ordering of lists
  42.   * made manga list compatible
  43.  
  44.   v1.1 (05 OCT 2015)
  45.   * added airing indicators
  46.   * added thead so lists are sortable
  47.  
  48.   v1.0 (03 OCT 2015)
  49.   * initial release
  50.  
  51. \*----------------------------------------------------------------------------*/
  52.  
  53. {ANILIST-POPUP}
  54. {ANILIST-COVERS=LRG}
  55.  
  56. @import url("https://fonts.googleapis.com/css?family=Arimo:400,400italic,700,700italic");
  57. @import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");
  58.  
  59. body {
  60.     font-family: "Arimo", sans-serif;
  61.     background-color: #e9e6e3;
  62.     color: black;
  63. }
  64.  
  65. #view::after { display: none; }
  66.  
  67. #lists {
  68.     display: flex;
  69.     flex-direction: column;
  70.     font-size: 12pt;
  71. }
  72.  
  73. #lists::after {
  74.     content: "Cardstock theme by adustyspectacle";
  75.     text-align: center;
  76.     opacity: 0.5;
  77.     display: block;
  78.     margin: 2em 0 4em;
  79.     order: 99;
  80. }
  81.  
  82. .sml_col { width: auto; }
  83.  
  84. .list,
  85. .list_wrapper .list {
  86.     box-shadow: none;
  87.     background: none;
  88.     text-align: center;
  89. }
  90.  
  91.  
  92. /*----------------------------------------------------------------------------*\
  93.    NAVIGATION
  94. \*----------------------------------------------------------------------------*/
  95.  
  96. .nav {
  97.     background: white;
  98.     box-shadow: 1px 1px 2px -1px rgba(0, 0, 0, 0.5);
  99.     color: #075e92;
  100. }
  101.  
  102. .nav__links a {
  103.     padding: 0.25em;
  104.     height: auto;
  105. }
  106.  
  107. .nav__links a:hover,
  108. .nav__sml:hover {
  109.     background: #075e92;
  110.     color: white;
  111. }
  112.  
  113. .nav__links div {
  114.     color: inherit;
  115.     padding: 0;
  116.     font-size: 0.9em;
  117. }
  118.  
  119. .nav__links a:hover div {
  120.     display: block;
  121.     color: inherit;
  122. }
  123.  
  124. .nav__sml { background: none; }
  125.  
  126.  
  127. /*----------------------------------------------------------------------------*\
  128.    NOTIFICATIONS
  129. \*----------------------------------------------------------------------------*/
  130.  
  131. .nav__notifications {
  132.     border: 0;
  133.     background: none;
  134.     padding: 0;
  135.     font-size: 1em;
  136.     color: inherit;
  137. }
  138.  
  139. .nav__notifications div { padding: 0.2em; }
  140.  
  141. .nav__notifications div:hover {
  142.     color: white;
  143.     background: #075e92;
  144. }
  145.  
  146. .nav__notifications i { font-size: 1em; }
  147.  
  148. .nav__notifications .nav__notifications--unread {
  149.     color: inherit;
  150.     text-shadow: none;
  151. }
  152.  
  153. .nav__notifications .nav__notifications--unread:hover {
  154.     color: white;
  155.     text-shadow: none;
  156. }
  157.  
  158. .notifications--visible { outline: 0; }
  159.  
  160. .notifications {
  161.     box-shadow: 1px 1px 2px -1px rgba(0, 0, 0, 0.5);
  162.     overflow-y: scroll;
  163.     overflow-x: auto;
  164.     background: rgba(255, 255, 255, 0.9);
  165. }
  166.  
  167. .noti {
  168.     box-shadow: 1px 1px 2px -1px rgba(0, 0, 0, 0.5);
  169.     color: black;
  170. }
  171.  
  172. .noti:nth-of-type(2n) { background: none; }
  173.  
  174. .noti--unread {
  175.     background: rgba(0, 0, 0, 0.25);
  176.     color: inherit;
  177. }
  178.  
  179. .noti__link b,
  180. .noti__link:hover {
  181.     color: #075e92;
  182. }
  183.  
  184. .noti time-ago {
  185.     position: static;
  186.     bottom: 0;
  187.     right: 0;
  188.     display: block;
  189.     text-align: right;
  190.     margin-top: 0.5em;
  191.     opacity: 0.5;
  192. }
  193.  
  194.  
  195. /*----------------------------------------------------------------------------*\
  196.    LIST NAV HEADER
  197. \*----------------------------------------------------------------------------*/
  198.  
  199. #list_header {
  200.     background: rgba(255, 255, 255, 0.9);
  201.     border-radius: 0;
  202.     padding: 0;
  203.     height: auto;
  204.     min-width: auto;
  205.     display: inline-block;
  206.     font-size: 12px;
  207.     box-shadow: 1px 1px 2px -1px rgba(0, 0, 0, 0.5);
  208. }
  209.  
  210. #list_header .img_crop {
  211.     float: none;
  212.     height: 3em;
  213.     width: 3em;
  214.     margin: 0;
  215.     border-radius: 0;
  216.     vertical-align: middle;
  217.     display: inline-block;
  218. }
  219.  
  220. #list_header .display_name {
  221.     font-size: 1em;
  222.     font-style: italic;
  223. }
  224.  
  225. #list_header a {
  226.     display: inline-block;
  227.     vertical-align: middle;
  228.     margin: 0;
  229.     padding: 1em 0.5em;
  230.     font-size: 1em;
  231. }
  232.  
  233. #list_header a { color: black; }
  234.  
  235. #list_header a:hover {
  236.     background: #075e92;
  237.     color: white;
  238. }
  239.  
  240. #list_header #filter {
  241.     min-width: 10em;
  242.     max-width: 12.5em;
  243.     padding: 1em;
  244.     margin: 0;
  245.     border-radius: 0;
  246.     vertical-align: middle;
  247.     float: right;
  248.     font-size: 1em;
  249.     font-family: inherit;
  250.     color: black;
  251. }
  252.  
  253.  
  254. /*----------------------------------------------------------------------------*\
  255.    LIST INPUT POPUP
  256. \*----------------------------------------------------------------------------*/
  257.  
  258. tr.list-input--popup,
  259. tr.list-input--popup:last-of-type {
  260.     border-radius: 0;
  261.     box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75);
  262.     outline-color: rgba(233, 230, 227, 0.75);
  263.     background: white;
  264.     color: black;
  265.     border: 0.5em solid white;
  266. }
  267.  
  268. tr.list-input--popup:nth-of-type(2n+1),
  269. .list-input .input__main select.status option {
  270.     background: white;
  271. }
  272.  
  273. tr.list-input--popup .title,
  274. tr.list-input--popup .input__main,
  275. tr.list-input--popup .input__main section,
  276. tr.list-input--popup .advanced,
  277. .advanced input,
  278. .advanced select,
  279. tr.list-input--popup .custom,
  280. tr.list-input--popup .notes textarea {
  281.     background: none;
  282. }
  283.  
  284. tr.list-input--popup .title,
  285. tr.list-input--popup .input__main section b,
  286. tr.list-input--popup .advanced div,
  287. tr.list-input--popup .advanced b,
  288. tr.list-input--popup .custom div,
  289. .md-checkbox label::after,
  290. .md-checkbox input[type="checkbox"]:checked + label::after {
  291.     color: #075e92;
  292. }
  293.  
  294. .listNotes-btn {
  295.     background: #075e92;
  296.     border-radius: 0;
  297. }
  298.  
  299. .list-input--popup .title i.material-icons,
  300. .list-input--popup .input__main i.material-icons {
  301.     color: #075e92;
  302.     text-shadow: none;
  303. }
  304.  
  305. .list-input--popup .input__main input,
  306. .list-input--popup .input__main select,
  307. .list-input--popup .advanced input,
  308. .list-input--popup .notes textarea {
  309.     font-family: inherit;
  310.     color: inherit;
  311. }
  312.  
  313. .list-input--popup .title { font-size: 1.5em; }
  314.  
  315. .list-input section b,
  316. .advanced b,
  317. .custom b,
  318. .listNotes-btn {
  319.     font-size: 1em;
  320. }
  321.  
  322. .list-input section b { top: 4px; }
  323.  
  324. .advanced b { top: -4px; }
  325.  
  326. .advanced div,
  327. .custom div {
  328.     top: 0;
  329.     font-size: 1.2em;
  330. }
  331.  
  332. .list-input .input__main input,
  333. .list-input .input__main select {
  334.     font-size: 1em;
  335. }
  336.  
  337.  
  338. /*----------------------------------------------------------------------------*\
  339.    LIST ORDER
  340. \*----------------------------------------------------------------------------*/
  341.  
  342. #lists #watching      { order: 2; }
  343. #lists #reading       { order: 2; }
  344. #lists #onhold        { order: 4; }
  345. #lists #completed     { order: 6; }
  346. #lists #dropped       { order: 8; }
  347. #lists #plantowatch   { order: 10; }
  348. #lists #plantoread    { order: 10; }
  349.  
  350.  
  351. /*----------------------------------------------------------------------------*\
  352.    LIST TITLES
  353. \*----------------------------------------------------------------------------*/
  354.  
  355. #lists h3 {
  356.     font-size: 4em;
  357.     font-weight: bold;
  358.     letter-spacing: -4px;
  359.     text-align: right;
  360.     text-shadow: 1px 1px 1px white;
  361.     text-transform: lowercase;
  362.     color: #075e92;
  363.     margin: 1em 0.25em 0;
  364. }
  365.  
  366. #lists h3::after {
  367.     font-family: "FontAwesome";
  368.     font-size: 1em;
  369.     vertical-align: baseline;
  370.     display: inline-block;
  371.     margin-left: 0.25em;
  372. }
  373.  
  374.  
  375. /* List Header Icons */
  376.  
  377. #lists #watching h3::after      { content: "\f008"; }
  378. #lists #reading h3::after       { content: "\f02d"; }
  379. #lists #onhold h3::after        { content: "\f04c"; }
  380. #lists #completed h3::after     { content: "\f00c"; }
  381. #lists #dropped h3::after       { content: "\f00d"; }
  382. #lists #plantowatch h3::after   { content: "\f067"; }
  383. #lists #plantoread h3::after    { content: "\f067"; }
  384.  
  385.  
  386. /*----------------------------------------------------------------------------*\
  387.    SORT BUTTONS
  388. \*----------------------------------------------------------------------------*/
  389.  
  390. thead {
  391.     display: block;
  392.     text-align: right;
  393.     margin-bottom: 2.5em;
  394. }
  395.  
  396. thead tr::before {
  397.     content: "sort by:";
  398.     vertical-align: -0.1em;
  399.     display: inline-block;
  400. }
  401.  
  402. table.list thead tr {
  403.     display: inline-block;
  404.     font-size: 1em;
  405.     background: none;
  406. }
  407.  
  408. thead tr th {
  409.     font-size: 1em;
  410.     text-transform: lowercase;
  411.     display: inline-block;
  412.     padding: 0.25em 0.5em;
  413.     margin: 0 0.25em;
  414.     border: 0;
  415.     transition: 0.1s;
  416.     color: #075e92;
  417.     background: none;
  418. }
  419.  
  420. thead tr th:hover {
  421.     color: white;
  422.     background: #075e92;
  423.     text-shadow: none;
  424.     border: 0;
  425. }
  426.  
  427. th.header__type,
  428. th.header__status,
  429. th.header__vol {
  430.     display: none;
  431. }
  432.  
  433.  
  434. /*----------------------------------------------------------------------------*\
  435.    CARD
  436. \*----------------------------------------------------------------------------*/
  437.  
  438. table { background-color: none; }
  439.  
  440. tr:nth-of-type(2n),
  441. tr:nth-of-type(2n+1) {
  442.     background-color: white;
  443. }
  444.  
  445. .rtitle {
  446.     display: inline-block;
  447.     position: relative;
  448.     width: 220px;
  449.     /* optimum width: 220px */
  450.     height: 320px;
  451.     /* optimum height: 320px */
  452.     margin: 0.5em;
  453.     box-shadow: 1px 1px 2px -1px rgba(0, 0, 0, 0.5);
  454.     background-size: 105% 105%;
  455.     background-repeat: no-repeat;
  456.     background-position: 50% 50%;
  457.     color: #075392;
  458.     line-height: normal;
  459. }
  460.  
  461. .rtitle,
  462. .rtitle:last-of-type {
  463.     border: 10px solid white;
  464. }
  465.  
  466. .row__type,
  467. .row__status,
  468. .row__vol {
  469.     display: none;
  470. }
  471.  
  472.  
  473. /*----------------------------------------------------------------------------*\
  474.    TITLE BOX
  475. \*----------------------------------------------------------------------------*/
  476.  
  477. .row__title {
  478.     display: block;
  479.     padding: 0;
  480. }
  481.  
  482. td.row__title a {
  483.     font-size: 1em;
  484.     text-align: center;
  485.     display: inline-block;
  486.     padding: 0.5em;
  487.     max-width: 80%;
  488.     position: absolute;
  489.     top: -1em;
  490.     left: -1em;
  491.     color: #075e92;
  492.     background: rgba(255, 255, 255, 0.9);
  493.     box-shadow: 1px 1px 2px -1px rgba(0, 0, 0, 0.5);
  494.     opacity: 0;
  495.     transition: 0.1s;
  496. }
  497.  
  498. .rtitle:hover td.row__title a { opacity: 1; }
  499.  
  500. td.row__title a:hover {
  501.     color: white;
  502.     background: rgba(7, 94, 146, 0.9);
  503. }
  504.  
  505.  
  506. /*----------------------------------------------------------------------------*\
  507.    SCORE BOX
  508. \*----------------------------------------------------------------------------*/
  509.  
  510. .row__score {
  511.     display: block;
  512.     position: absolute;
  513.     width: auto;
  514.     bottom: 0;
  515.     right: 0;
  516.     z-index: 2;
  517. }
  518.  
  519. .row__score span {
  520.     font-size: 2em;
  521.     font-weight: bold;
  522.     text-align: center;
  523.     letter-spacing: -1px;
  524.     color: #075e92;
  525.     background: rgba(255, 255, 255, 0.9);
  526.     box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  527.     display: block;
  528.     position: absolute;
  529.     padding: 0.25em 0.35em;
  530.     bottom: -0.5em;
  531.     right: -0.5em;
  532.     overflow: hidden;
  533. }
  534.  
  535.  
  536. /*----------------------------------------------------------------------------*\
  537.    EPISODE/CHAPTER BOX
  538. \*----------------------------------------------------------------------------*/
  539.  
  540. .row__episodes::before  { content: "eps:" }
  541. .row__chap::before      { content: "ch:" }
  542.  
  543. .row__episodes,
  544. .row__chap {
  545.     font-size: 12px;
  546.     text-align: center;
  547.     background: white;
  548.     display: block;
  549.     position: absolute;
  550.     width: auto;
  551.     height: 40px;
  552.     padding: 10px 15px 10px 10px;
  553.     bottom: -10px;
  554.     left: 0;
  555.     line-height: normal;
  556.     margin: 0;
  557. }
  558.  
  559. .row__episodes .plus,
  560. .row__chap .plus {
  561.     font-size: 1.5em;
  562.     font-weight: bold;
  563.     background: white;
  564.     color: #075e92;
  565.     opacity: 0.8;
  566.     position: absolute;
  567.     top: 0;
  568.     right: -15px;
  569.     padding: 5px 0;
  570.     height: 30px;
  571.     width: 15px;
  572.     box-shadow: 2px -2px 2px -2px rgba(0, 0, 0, 0.5);
  573. }
  574.  
  575. .row__episodes .plus:hover,
  576. .row__chap .plus:hover {
  577.     opacity: 1;
  578.     background: #075e92;
  579.     color: white;
  580. }
  581.  
  582.  
  583. /*----------------------------------------------------------------------------*\
  584.    NOTES AND REWATCH TAGS
  585. \*----------------------------------------------------------------------------*/
  586.  
  587. .list__tag {
  588.     display: inline-block;
  589.     position: static;
  590.     background: none;
  591. }
  592.  
  593. .list i.material-icons,
  594. .tag_notes,
  595. .tag_re {
  596.     font-size: 1.5em;
  597.     font-weight: bold;
  598.     color: rgba(255, 255, 255, 0.95);
  599.     text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.25), 0px 0px 1px rgba(0, 0, 0, 0.5);
  600.     position: absolute;
  601.     opacity: 1;
  602.     padding: 0;
  603.     z-index: 2;
  604.     cursor: help;
  605.     top: 0.6em;
  606. }
  607.  
  608. .list i.material-icons { font-family: "Material Icons"; }
  609.  
  610. i.fa::before { display: none; }
  611.  
  612. .tag_notes  { right: 0.1em; }
  613. .tag_re     { right: 1.1em; }
  614.  
  615. .hint--notes,
  616. .hint--re {
  617.     text-align: center;
  618.     color: #075e92;
  619.     background: rgba(255, 255, 255, 0.9);
  620.     display: none;
  621.     position: absolute;
  622.     width: 100%;
  623.     border-radius: 0;
  624. }
  625.  
  626. .hint--re::before {
  627.     content: "Reread";
  628.     /*  for mangalist, rewatched for animelist  */
  629.     margin-right: 0.2em;
  630. }
  631.  
  632. .hint--re::after {
  633.     content: "time/s";
  634.     margin-left: 0.2em;
  635. }
  636.  
  637. .list__tag:hover .hint--notes,
  638. .list__tag:hover .hint--re {
  639.     font-size: 1em;
  640.     display: inline-block;
  641.     width: 100%;
  642.     padding: 0.5em 0.25em;
  643.     margin: 0;
  644.     top: 4.5em;
  645.     left: 0;
  646. }
  647.  
  648.  
  649. /*----------------------------------------------------------------------------*\
  650.    AIRING/PUBLISHING TAGS
  651. \*----------------------------------------------------------------------------*/
  652.  
  653. .tag_airing,
  654. .tag_notairing {
  655.     display: block;
  656.     position: absolute;
  657.     width: 10px;
  658.     height: 40px;
  659.     padding: 0;
  660.     margin: 0;
  661.     left: -10px;
  662.     bottom: -10px;
  663.     opacity: 1;
  664.     overflow: hidden;
  665.     z-index: 1;
  666.     transition: 0.1s;
  667.     text-transform: uppercase;
  668.     letter-spacing: 1px;
  669.     font: inherit;
  670. }
  671.  
  672. .tag_airing {
  673.     color: transparent;
  674.     background: #075e92;
  675. }
  676.  
  677. .tag_notairing {
  678.     color: transparent;
  679.     background: black;
  680. }
  681.  
  682. .tag_airing:hover,
  683. .tag_notairing:hover {
  684.     position: absolute;
  685.     width: 108%;
  686.     padding: 10px 20px;
  687.     opacity: 1;
  688.     overflow: visible;
  689.     background: white;
  690.     color: #075e92;
  691.     vertical-align: middle;
  692.     text-align: left;
  693. }
  694.  
  695.  
  696. /*----------------------------------------------------------------------------*\
  697.    CSS FOR SMALLER SCREENS
  698. \*----------------------------------------------------------------------------*/
  699.  
  700. @media only screen and (max-width: 768px) {
  701.     body {
  702.         font-size: 10pt;
  703.     }
  704.     .nav-mobile {
  705.         background: rgba(255, 255, 255, 0.9);
  706.         box-shadow: 0px -1px 2px -1px rgba(0, 0, 0, 0.5);
  707.     }
  708.     .nav-mobile > a {
  709.         color: #075e92;
  710.     }
  711.     .nav-mobile > span {
  712.         background: #075e92;
  713.     }
  714.     .nav-mobile > span i {
  715.         color: white;
  716.     }
  717.     .nav-mobile .nav-draw {
  718.         background: rgba(255, 255, 255, 0.9);
  719.     }
  720.     .nav-mobile .nav-draw a:nth-of-type(even) {
  721.         background: rgba(7, 94, 146, 0.05);
  722.     }
  723.     .nav-mobile .nav-draw a {
  724.         color: #075e92;
  725.     }
  726.     #lists h3 {
  727.         text-align: center;
  728.         font-size: 2.5em;
  729.         letter-spacing: -2px;
  730.     }
  731.     #list_header {
  732.         margin: 0 auto;
  733.         min-width: 50%;
  734.         max-width: 95%;
  735.         left: 0;
  736.         right: 0;
  737.         position: fixed;
  738.     }
  739.     .noti {
  740.         background: rgba(7, 94, 146, 0.05);
  741.         font-size: 1em;
  742.         box-shadow: none;
  743.     }
  744.     .noti .noti_row:hover {
  745.         background: #075e92;
  746.         color: white;
  747.     }
  748.     .noti .noti_row .noti__link:hover {
  749.         color: white;
  750.     }
  751.     tr:nth-of-type(2n),
  752.     tr:nth-of-type(2n+1) {
  753.         background-color: none;
  754.     }
  755.     tr.list-input--popup,
  756.     tr.list-input--popup:last-of-type {
  757.         height: 85vh;
  758.         background: rgba(255, 255, 255, 0.9);
  759.     }
  760.     thead {
  761.         text-align: center;
  762.     }
  763.     .rtitle {
  764.         width: 132px;
  765.         /* width and height 60% of original */
  766.         height: 192px;
  767.         margin: 1em 0.5em;
  768.     }
  769.     .rtitle,
  770.     .rtitle:last-of-type {
  771.         border: 5px solid white;
  772.     }
  773.     td.row__title a {
  774.         min-width: 100%;
  775.         max-height: 50%;
  776.         font-size: 12px;
  777.         left: 0;
  778.         top: -1.5em;
  779.         opacity: 1;
  780.     }
  781.     .row__score span {
  782.         font-size: 1.5em;
  783.     }
  784.     .row__episodes,
  785.     .row__chap {
  786.         bottom: -5px;
  787.         height: 25px;
  788.         padding: 5px;
  789.     }
  790.     .row__episodes .plus,
  791.     .row__chap .plus {
  792.         display: none;
  793.     }
  794.     .tag_notes {
  795.         top: auto;
  796.         right: auto;
  797.         bottom: 0;
  798.         left: 0;
  799.         display: none;
  800.     }
  801.     .tag_re {
  802.         top: auto;
  803.         right: auto;
  804.         bottom: 0;
  805.         left: 1.25em;
  806.         display: none;
  807.     }
  808.     .tag_airing,
  809.     .tag_notairing {
  810.         font-size: 0.5em;
  811.         width: 5px;
  812.         height: 25px;
  813.         left: -5px;
  814.         bottom: -5px;
  815.     }
  816.     .navBtn {
  817.         border-radius: 0;
  818.         color: #075e92;
  819.         background: rgba(255, 255, 255, 0.9);
  820.         box-shadow: 1px 1px 2px -1px rgba(0, 0, 0, 0.5);
  821.         opacity: 1;
  822.     }
  823. }
  824.  
  825.  
  826. /*----------------------------------------------------------------------------*\
  827.  
  828.   CUSTOMISATION AREA
  829.  
  830.   Because of CSS's rules of inheritance and such, this area is right in the end
  831.   so you'll be freely be able to override the default styling without editing
  832.   the stuff above.
  833.  
  834.   I'll add some stuff to get you started, and of course, you're free to play
  835.   around. Just remember to use the specific class/id and not use !important.
  836.   Ever. Seriously.
  837.  
  838.   Pale Moon Palette
  839.                   HEX      R     G     B    COLOR NAME
  840.   Light         #ffffff   255   255   255   white
  841.   Dark          #000000     0     0     0   black
  842.   BG            #e9e6e3   233   230   227
  843.   Accent        #075e92     7    94   146
  844.  
  845.   Dark Sun Palette
  846.                   HEX      R     G     B    COLOR NAME
  847.   Light         #ffffff   255   255   255   white
  848.   Dark          #222222    34    34    34
  849.   BG            #464850    70    72    80
  850.   Accent        #f55b2c   245    91    44
  851.  
  852. \*----------------------------------------------------------------------------*/
  853.  
  854. #lists #toppicks h3::after { content: "\f005"; }
  855.  
  856. /*----------------------------------------------------------------------------*\
  857.    DARK SUN STYLE
  858.      A dark version of the default, bright style (Pale Moon)
  859. \*----------------------------------------------------------------------------*/
  860.  
  861. body {
  862.   background-color: #464850;
  863.   color: white;
  864. }
  865.  
  866. tr.list-input--popup, tr.list-input--popup:last-of-type {
  867.   outline-color: rgba(70,72,80,0.75);
  868. }
  869.  
  870. #lists h3 {
  871.   text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
  872. }
  873.  
  874. .nav,
  875. tr.list-input--popup,
  876. tr.list-input--popup:last-of-type,
  877. tr.list-input--popup:nth-of-type(2n+1),
  878. .list-input .input__main select.status option,
  879. tr:nth-of-type(2n), tr:nth-of-type(2n+1),
  880. .rtitle,
  881. .rtitle:last-of-type,
  882. .row__episodes,
  883. .row__chap,
  884. .row__episodes .plus,
  885. .row__chap .plus,
  886. .tag_airing:hover,
  887. .tag_notairing:hover {
  888.   background-color: #222222;
  889.   border-color: #222222;
  890. }
  891.  
  892. .notifications,
  893. .nav-mobile,
  894. .nav-mobile .nav-draw,
  895. #list_header,
  896. td.row__title a,
  897. .row__score span,
  898. .hint--notes,
  899. .hint--re {
  900.   background: rgba(34,34,34,0.9);
  901. }
  902.  
  903. .nav__links a:hover,
  904. .nav__sml:hover,
  905. .nav__notifications div:hover,
  906. .nav-mobile > span,
  907. #list_header a:hover,
  908. .listNotes-btn,
  909. .row__episodes .plus:hover,
  910. .row__chap .plus:hover,
  911. .tag_airing {
  912.   background: #f55b2c;
  913. }
  914.  
  915. thead tr th:hover,
  916. td.row__title a:hover {
  917.   background: rgba(245,91,44,0.9);
  918. }
  919.  
  920. .nav-mobile .nav-draw a:nth-of-type(even) {
  921.   background: rgba(245,91,44,0.1);
  922. }
  923.  
  924. .tag_notairing {
  925.   background: white;
  926. }
  927.  
  928. .nav,
  929. .nav__links a,
  930. .nav-mobile .nav-draw a,
  931. .noti,
  932. .noti--unread,
  933. #list_header a,
  934. #list_header #filter,
  935. tr.list-input--popup,
  936. .rtitle,
  937. .row__episodes .plus:hover,
  938. .row__chap .plus:hover {
  939.   color: white;
  940. }
  941.  
  942. .nav-mobile > a,
  943. .noti__link b,
  944. .noti__link:hover,
  945. #lists h3,
  946. tr.list-input--popup .title,
  947. tr.list-input--popup .input__main section b,
  948. tr.list-input--popup .advanced div,
  949. tr.list-input--popup .advanced b,
  950. tr.list-input--popup .custom div,
  951. .md-checkbox label::after,
  952. .md-checkbox input[type="checkbox"]:checked + label::after,
  953. tr.list-input--popup .title i.material-icons,
  954. tr.list-input--popup .input__main i.material-icons,
  955. .row__score span,
  956. td.row__title a,
  957. thead tr th,
  958. .row__episodes .plus,
  959. .row__chap .plus,
  960. .hint--notes,
  961. .hint--re,
  962. .tag_airing:hover,
  963. .tag_notairing:hover {
  964.   color: #f55b2c;
  965. }
  966.  
  967. .noti {
  968.   box-shadow: 1px 1px 2px -1px black;
  969. }
  970.  
  971. .noti--unread {
  972.   background: black;
  973. }
  974.  
  975. .list-input--popup {
  976.   outline-color: rgba(70, 72, 80, 0.75);
  977. }
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!