Cardstock v1.8 (Pale Moon) Anilist Theme

@char "UTF-8";

/*----------------------------------------------------------------------------*\

  Cardstock v1.8 by adustyspectacle

  A compact, minimal, cover theme.

  CHANGELOG
  v1.8 (28 JAN 2016)
  * changed styles because of the Anilist update, mostly the navigation

  v1.7 (20 JAN 2016)
  * styled notification highlight

  v1.6 (08 JAN 2016)
  * added mobile-specific css

  v1.5 (02 JAN 2016)
  * integrated changes from the Dark Sun style to the Pale Moon style

  v1.4 (16 OCT 2015)
  * styled list header thing

  v1.3 (09 OCT 2015)
  * cleaned up the CSS, organising it and stuff
  * added customisation area at the end

  v1.2 (07 OCT 2015)
  * added rewatch note thing
  * added custom ordering of lists
  * made manga list compatible

  v1.1 (05 OCT 2015)
  * added airing indicators
  * added thead so lists are sortable

  v1.0 (03 OCT 2015)
  * initial release

\*----------------------------------------------------------------------------*/

{ANILIST-POPUP}
{ANILIST-COVERS=LRG}

@import url("https://fonts.googleapis.com/css?family=Arimo:400,400italic,700,700italic");
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");

body {
  font-family:        "Arimo", sans-serif;
  background-color:   #e9e6e3;
  color:              black;
}

#view::after {
  display: none;
}

#lists {
  display:          flex;
  flex-direction:   column;
  font-size:        12pt;
}

#lists::after {
  content:      "Cardstock theme by adustyspectacle";
  text-align:   center;
  opacity:      0.5;
  display:      block;
  margin:       2em 0 4em;
  order:        99;
}

.sml_col { width: auto; }

.list, .list_wrapper .list {
  box-shadow: none;
  background: none;
  text-align: center;
}

/*----------------------------------------------------------------------------*\
   NAVIGATION
\*----------------------------------------------------------------------------*/

.nav {
  background: white;
  box-shadow: 1px 1px 2px -1px rgba(0,0,0,0.5);
  color: #075e92;
}

.nav__links a {
  padding: 0.25em;
  height: auto;
}

.nav__links a:hover,
.nav__sml:hover {
  background: #075e92;
  color: white;
}

.nav__links div {
  color: inherit;
  padding: 0;
}

.nav__links a:hover div {
  display: block;
  color: inherit;
}

.nav__sml {
  background: none;
}


/*----------------------------------------------------------------------------*\
   NOTIFICATIONS
\*----------------------------------------------------------------------------*/

.nav__notifications {
  border: 0;
  background: none;
  padding: 0;
  font-size: 1em;
  color: inherit;
}

.nav__notifications div {
  padding: 0.2em;
}

.nav__notifications div:hover {
  color: white;
  background: #075e92;
}

.nav__notifications i {
  font-size: 1em;
}

.nav__notifications .nav__notifications--unread {
  color: inherit;
  text-shadow: none;
}

.nav__notifications .nav__notifications--unread:hover {
  color: white;
  text-shadow: none;
}

.notifications--visible {
  outline: 0;
}

.notifications {
  box-shadow: 1px 1px 2px -1px rgba(0,0,0,0.5);
  overflow-y: scroll;
  overflow-x: auto;
  background: rgba(255,255,255,0.9);
}

.noti {
  box-shadow: 1px 1px 2px -1px rgba(0,0,0,0.5);
  color: black;
}

.noti:nth-of-type(2n) {
  background: none;
}

.noti--unread {
  background: rgba(0,0,0,0.25);
  color: inherit;
}

.noti__link b,
.noti__link:hover {
  color: #075e92;
}

.noti time-ago {
  position: static;
  bottom: 0;
  right: 0;
  display: block;
  text-align: right;
  margin-top: 0.5em;
  opacity: 0.5;
}


/*----------------------------------------------------------------------------*\
   LIST NAV HEADER
\*----------------------------------------------------------------------------*/

#list_header {
  background: rgba(255,255,255,0.9);
  border-radius: 0;
  padding: 0;
  height: auto;
  min-width: auto;
  display: inline-block;
  font-size: 12px;
  box-shadow: 1px 1px 2px -1px rgba(0,0,0,0.5);
}

#list_header .img_crop {
  float: none;
  height: 3em;
  width: 3em;
  margin: 0;
  border-radius: 0;
  vertical-align: middle;
  display: inline-block;
}

#list_header .display_name {
  font-size: 1em;
  font-style: italic;
}

#list_header a {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  padding: 1em 0.5em;
  font-size: 1em;
}

#list_header a {
  color: black;
}

#list_header a:hover {
  background: #075e92;
  color: white;
}

#list_header #filter {
  min-width: 10em;
  max-width: 12.5em;
  padding: 1em;
  margin: 0;
  border-radius: 0;
  vertical-align: middle;
  float: right;
  font-size: 1em;
  color: black;
}

/*----------------------------------------------------------------------------*\
   LIST ORDER
\*----------------------------------------------------------------------------*/

#lists #watching      { order: 2; }
#lists #reading       { order: 2; }
#lists #onhold        { order: 4; }
#lists #completed     { order: 6; }
#lists #dropped       { order: 8; }
#lists #plantowatch   { order: 10; }
#lists #plantoread    { order: 10; }


/*----------------------------------------------------------------------------*\
   LIST TITLES
\*----------------------------------------------------------------------------*/

#lists h3 {
  font-size:        4em;
  font-weight:      bold;
  letter-spacing:   -4px;
  text-align:       right;
  text-shadow:      1px 1px 1px white;
  text-transform:   lowercase;
  color:            #075e92;
  margin:           1em 0.25em 0;
}

#lists h3::after {
  font-family:      "FontAwesome";
  font-size:        1em;
  vertical-align:   baseline;
  display:          inline-block;
  margin-left:      0.25em;
}

/* List Header Icons */

#lists #watching    h3::after   { content: "\f008"; }
#lists #reading     h3::after   { content: "\f02d"; }
#lists #onhold      h3::after   { content: "\f04c"; }
#lists #completed   h3::after   { content: "\f00c"; }
#lists #dropped     h3::after   { content: "\f00d"; }
#lists #plantowatch h3::after   { content: "\f067"; }
#lists #plantoread  h3::after   { content: "\f067"; }


/*----------------------------------------------------------------------------*\
   SORT BUTTONS
\*----------------------------------------------------------------------------*/

thead {
  display:          block;
  text-align:       right;
  margin-bottom:    2.5em;
}

thead tr::before {
  content:          "sort by:";
  vertical-align:   -0.1em;
}

table.list thead tr {
  display:    inline-block;
  font-size:  1em;
  background: none;
}

thead tr th {
  font-size:        1em;
  text-transform:   lowercase;
  display:          inline-block;
  padding:          0.25em 0.5em;
  border:           0;
  transition:       0.1s;
  color:            #075e92;
  background:       none;
}

thead tr th:hover {
  color:        white;
  background:   #075e92;
  text-shadow:  none;
  border:       0;
}

th.header__type, th.header__status, th.header__vol { display: none; }


/*----------------------------------------------------------------------------*\
   CARD
\*----------------------------------------------------------------------------*/

.rtitle {
  display:              inline-block;
  position:             relative;
  width:                220px; /* optimum width: 220px */
  height:               320px; /* optimum height: 320px */
  margin:               0.5em 0.5em;
  box-shadow:           1px 1px 2px -1px rgba(0,0,0,0.5);
  background-size:      105% 105%;
  background-repeat:    no-repeat;
  background-position:  50% 50%;
  color:                #075392;

}

.rtitle, .rtitle:last-of-type { border: 0.5em solid white; }

.row__type, .row__status, .row__vol { display: none; }


/*----------------------------------------------------------------------------*\
   UPDATE BOX
\*----------------------------------------------------------------------------*/

.update {
  text-align: left;
  color:      black;
  box-shadow: 1px 1px 2px -1px rgba(0,0,0,0.5);
}


/*----------------------------------------------------------------------------*\
   TITLE BOX
\*----------------------------------------------------------------------------*/

.row__title {
  display: block;
  padding: 0;
}

td.row__title a {
  font-size:    1em;
  font-style:   italic;
  text-align:   center;
  display:      inline-block;
  padding:      0.5em;
  max-width:    80%;
  position:     absolute;
  top:          -1em;
  left:         -1em;
  color:        #075e92;
  background:   rgba(255,255,255,0.9);
  box-shadow:   1px 1px 2px -1px rgba(0,0,0,0.5);
}

td.row__title a:hover {
  color:        white;
  background:   rgba(7,94,146,0.9);
}


/*----------------------------------------------------------------------------*\
   SCORE BOX
\*----------------------------------------------------------------------------*/

.row__score {
  display:    block;
  position:   absolute;
  width:      auto;
  bottom:     0;
  right:      0;
  z-index:    2;
}

.row__score span {
  font-size:        2em;
  font-weight:      bold;
  text-align:       center;
  letter-spacing:   -1px;
  color:            #075e92;
  background:       rgba(255,255,255,0.9);
  box-shadow:       0 0 2px rgba(0,0,0,0.5);
  display:          block;
  position:         absolute;
  padding:          0.25em 0.35em;
  bottom:           -0.5em;
  right:            -0.5em;
  overflow:         hidden;
}


/*----------------------------------------------------------------------------*\
   EPISODE/CHAPTER BOX
\*----------------------------------------------------------------------------*/

.row__episodes::before    { content: "eps:" }
.row__chap::before        { content: "ch:" }

.row__episodes,
.row__chap {
  font-size:    0.75em;
  text-align:   center;
  background:   white;
  display:      block;
  position:     absolute;
  width:        auto;
  padding:      0.5em 1em;
  bottom:       -0.65em;
  left:         -0.65em;
}

.row__episodes  .plus,
.row__chap      .plus {
  font-size:        1.5em;
  font-weight:      bold;
  color:            #075e92;
  vertical-align:   -0.1em;
  opacity:          0.5;
  margin-left:      0.15em;
}


/*----------------------------------------------------------------------------*\
   NOTES AND REWATCH TAGS
\*----------------------------------------------------------------------------*/

.list__tag {
  display:      inline-block;
  position:     static;
  background:   none;
}

.list i.material-icons,
.tag_notes,
.tag_re {
  font-size:    1.5em;
  font-weight:  bold;
  color:        rgba(255,255,255,0.95);
  text-shadow:  1px 1px 0px rgba(0,0,0,0.25),
                0px 0px 1px rgba(0,0,0,0.5);
  position:     absolute;
  opacity:      1;
  padding:      0;
  z-index:      2;
  cursor:       help;
  top:          0.6em;
}

.list i.material-icons {
  font-family: "Material Icons";
}

i.fa::before {
  display: none;
}

.tag_notes  { right: 0.1em; }
.tag_re     { right: 1.1em; }

.hint--notes,
.hint--re {
  text-align:     center;
  color:          #075e92;
  background:     rgba(255,255,255,0.9);
  display:        none;
  position:       absolute;
  width:          100%;
  border-radius:  0;
}

.hint--re::before {
  content:        "Reread";  /*  for mangalist, rewatched for animelist  */
  margin-right:   0.2em;
}

.hint--re::after {
  content: "time/s";
  margin-left: 0.2em;
}

.list__tag:hover .hint--notes,
.list__tag:hover .hint--re {
  font-size:  1em;
  display:    inline-block;
  width:      100%;
  padding:    0.5em 0.25em;
  margin:     0;
  top:        4.5em;
  left:       0;
}


/*----------------------------------------------------------------------------*\
   AIRING/PUBLISHING TAGS
\*----------------------------------------------------------------------------*/

.tag_airing,
.tag_notairing {
  display:    block;
  position:   absolute;
  width:      0.52em;
  height:     2.26em;
  padding:    0;
  margin:     0;
  left:       -0.55em;
  bottom:     -0.55em;
  opacity:    1;
  overflow:   hidden;
  z-index:    1;
  transition: 0.1s;
  text-transform: uppercase;
  letter-spacing: 1px;
  font: inherit;
}

.tag_airing {
  color:        transparent;
  background:   #075e92;
}

.tag_notairing {
  color:        transparent;
  background:    black;
}

.tag_airing:hover,
.tag_notairing:hover {
  position:   absolute;
  width:      108%;
  padding:    0.5em;
  opacity:    1;
  overflow:   visible;
  background: white;
  color: #075e92;
  vertical-align: middle;
}


/*----------------------------------------------------------------------------*\
   CSS FOR SMALLER SCREENS
\*----------------------------------------------------------------------------*/

@media only screen and (max-width: 768px) {
  body {
    font-size: 10pt;
  }

  #lists h3 {
    text-align: center;
    font-size: 2.5em;
    letter-spacing: -2px;
  }

  #list_header {
    margin: 0 auto;
    min-width: 50%;
    max-width: 95%;
    left: 0;
    right: 0;
    position: fixed;
  }

  .noti {
    background: rgba(255,255,255,0.95);
  }

  .noti .noti_row:hover {
    background: #075e92;
    color: white;
  }

  .noti .noti_row .noti__link:hover {
    color: white;
  }

  thead {
     text-align: center;
  }

  .rtitle {
    width: 132px; /* width and height 60% of original */
    height: 192px;
    margin: 0.6em 0.25em;
  }

  td.row__title a {
    min-width: 100%;
    max-height: 50%;
    font-size: 0.5em;
    left: 0;
    top: -1.5em;
  }

  .row__score span {
    font-size: 1.5em;
  }

  .row__episodes,
  .row__chap {
    display: none;
  }

  .tag_notes {
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
  }

  .tag_re {
    top: auto;
    right: auto;
    bottom: 0;
    left: 1.25em;
  }

  .tag_airing,
  .tag_notairing {
    font-size: 0.5em;
  }

  .navBtn {
    border-radius: 0;
    color: #075e92;
    background: rgba(255,255,255,0.9);
    box-shadow: 1px 1px 2px -1px rgba(0,0,0,0.5);
    opacity: 1;
  }
}


/*----------------------------------------------------------------------------*\

  CUSTOMISATION AREA

  Because of CSS's rules of inheritance and such, this area is right in the end
  so you'll be freely be able to override the default styling without editing
  the stuff above.

  I'll add some stuff to get you started, and of course, you're free to play
  around. Just remember to use the specific class/id and not use !important.
  Ever. Seriously.

  Pale Moon Palette
                  HEX      R     G     B    COLOR NAME
  Light         #ffffff   255   255   255   white
  Dark          #000000     0     0     0   black
  BG            #e9e6e3   233   230   227
  Accent        #075e92     7    94   146

  Dark Sun Palette
                  HEX      R     G     B    COLOR NAME
  Light         #ffffff   255   255   255   white
  Dark          #222222    34    34    34
  BG            #464850    70    72    80
  Accent        #f55b2c   245    91    44

\*----------------------------------------------------------------------------*/

#lists #toppicks    h3::after   { content: "\f005"; }