Cardstock v1.3 (Anilist Theme)

@char "UTF-8";

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

  Cardstock v1.3 by adustyspectacle
  A compact, minimal chart theme.

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

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

@import url(https://fonts.googleapis.com/css?family=Arimo:400,400italic,700,700italic);

body {
  font-family:        "Arimo", sans-serif;
  background-color:   #e8e4e2;
  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;
}


/*----------------------------------------------------------------------------*\
   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 HEADERS
\*----------------------------------------------------------------------------*/

#lists h3 {
  font-size:        4em;
  letter-spacing:   -4px;
  text-align:       right;
  text-shadow:      1px 1px 1px rgba(0,0,0,0.25);
  text-transform:   lowercase;
  color:            #022f70;
  margin:           1em 0 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;
}

thead tr {
  display:    inline-block;
  font-size:  1em;
}

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

thead tr th:hover {
  color:        white;
  background:   #022f70;
  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;
  height:               320px;
  margin:               1em 0.5em;
  box-shadow:           1px 1px 2px -1px rgba(0,0,0,0.5);
  background-size:      100% 100%;
  background-repeat:    no-repeat;
  background-position:  center;

}

.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:        #022f70;
  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(2,47,112,0.9);
}


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

.row__score {
  display:    block;
  position:   absolute;
  width:      auto;
  bottom:     0;
  right:      0;
}

.row__score span {
  font-size:        2em;
  font-weight:      bold;
  text-align:       center;
  letter-spacing:   -1px;
  color:            #022f70;
  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:            #022f70;
  vertical-align:   -0.1em;
  opacity:          0.5;
  margin-left:      0.15em;
}


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

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

.tag_notes,
.tag_re {
  font-size:    1.25em;
  color:        rgba(255,255,255,0.95);
  text-shadow:  0 0 1px rgba(0,0,0,0.5);
  position:     absolute;
  opacity:      1;
  padding:      0.2em;
  z-index:      2;
  cursor:       help;
}

.tag_notes  { top: 0.25em; right: 0.25em; }
.tag_re     { top: 0.25em; right: 1.5em; }

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

.hint--re::before {
  content:        "No. of times rewatched:";
  margin-right:   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.7em;
  height:     2.75em;
  padding:    0;
  margin:     0;
  left:       -0.7em;
  bottom:     -0.7em;
  opacity:    1;
  overflow:   hidden;
  z-index:    1;
}

.tag_airing {
  color:        transparent;
  background:   forestgreen;
}

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


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

  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.

  Default Palette
                  HEX      R     G     B    COLOR NAME
  Light         #ffffff   255   255   255   white
  Dark          #000000     0     0     0   black
  BG            #e8e4e2   232   228   226
  Accent        #022f70     2    47   112
  Airing        #228b22    34   139    34   forestgreen
  Not Airing    #dc143c   220    20    60   crimson

  Night Mode 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
  Airing        #228b22    34   139    34   forestgreen
  Not Airing    #dc143c   220    20    60   crimson

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

/*
   CHANGING BACKGROUND AND TEXT COLOR
   Change your background color and text
   color. You can also use a background
   image if you want.

*/

body {
  background-color: #464850;
  color: white;
}


/*
   CHANGING THE LIGHT COLOR
   This affects the cover border, the
   episode number background, the title
   background, the score background, and
   the rewatch/notes background.
*/

.rtitle,
.rtitle:last-of-type,
.row__episodes,
.row__chap {
  background: #222222;
  border-color: #222222;
}

td.row__title a,
.row__score span,
.hint--notes,
.hint--re {
  background: rgba(34,34,34,0.9);
}


/*
   CHANGING THE ACCENT COLOR
   This affects the list headers, link hovers,
   score, the plus sign in the episode box,
   and the notes/rewatch text.
*/

#lists h3,
.row__score span,
td.row__title a,
thead tr th,
.row__episodes .plus,
.row__chap .plus,
.hint--notes,
.hint--re {
  color: #f55b2c;
}

thead tr th:hover,
td.row__title a:hover {
  background: rgba(245,91,44,0.9);
}


/*
   CUSTOM LIST-SPECIFIC STYLES
   If you have a custom list, add it here. You'll probably
   mostly use it for the order, and maybe a custom icon.
*/

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