Cards2016.css

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

body {
  background: #222;
}

.list_wrapper {
  margin-left: 0;
  max-width: 100%;
}

table {
  background: none;
  box-shadow: none;
}

thead {
  position: absolute;
  margin-top: -43px;
  right: 20px;
}

thead tr:nth-of-type(odd) {
  background: none;
}

th {
  background: none;
}

tbody {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

tbody tr:not(.list-input) {
  float: left;
  /*background-color: rgba(0,0,0,.6); /* Card bg color */
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 155px 196px;
  background-color: rgba(0,0,0,.6);
  padding-top: 200px;
  height: 235px;
  width: 155px;
  margin: 7px;
}
tbody tr:nth-of-type(odd) {
  background-color: rgba(0,0,0,.6);
}

td.hover_icon {
  position: relative;
  display: inline-block;
  padding: 0 316px 0 0;
  line-height: 1.25em;
  color: #fff; /* Anime title color */
  text-align: center;
  height: 100px!important;
  width: 155px!important
}

td.hover_icon a {
  position: absolute;
  width: 155px;
  padding: 5px 7px;
  bottom: 104px;
  background: rgba(0,0,0,.6);
  z-index: 0!important
}

/*tbody .sml_col {
  position: relative;
  bottom: 105px;
}*/

tbody .sml_col {
    position: relative;
    bottom: 103px;
    height: 35px;
    line-height: 15px;
    width: 158px;
    color: #fff;
    //background: rgba(255,255,255,.7)
}

.row__score {
    font-size: 1.6em;
}

/* If you want to show score in any of these lists, just delete that line */
#watching .row__score,
#plantowatch .row__score,
#onhold .row__score,
#dropped .row__score {
    display: none
}

.row__type, .row__status {
  display: none;
}


/* ORDERING -- Change the order numbers to reorder your lists */
#lists {
    display: flex;
    flex-direction: column
}

#watching {
    order: 0
}

#Upnext {
    order: 1
}

#completed {
    order: 2
}

#plantowatch {
    order: 3
}

#onhold {
    order: 4
}

#dropped {
    order: 5
}

#filter {
    position: fixed;
    top: 15px;
    right: 20px;
    padding-right: 10px!important;
    text-align: right;
    font-size: 1.3em;
    cursor: pointer
}

#filter::-webkit-input-placeholder::after {font-family: Material Icons; content: " \E8B6"; vertical-align: middle;}

#filter::-webkit-input-placeholder {
   color: white;
}

#filter:-moz-placeholder {
   color: white;
}

#filter:-moz-placeholder::after {font-family: Material Icons; content: " \E8B6"; vertical-align: middle;}

#filter::-moz-placeholder {
   color: white;
}

#filter:-ms-input-placeholder {  
   color: white;
}

#list_header {
    position: absolute;
    width: 155px;
    top: 25px;
    left: 0;
    right: 0;
    margin: auto;
    background: none;
    box-shadow: none
}

#list_header a:not(.display_name) {
    display: none
}

.display_name {
    font-size: 1.8em!important
}

/* BIG watching cards */
​
@media screen and (min-width: 766px) {
#watching tbody tr:not(.list-input),
#reading tbody tr:not(.list-input)  {
    background-size: 225px 310px;
    width: 225px;
    height: 360px
}
​
#watching .hover_icon span[class*="tag"],
#reading .hover_icon span[class*="tag"]  {
    width: 225px
}
​
#watching td.hover_icon a,
#reading td.hover_icon a  {
    bottom: -10px;
    width: 225px;
    padding: 10px;
    font-size: 1.2em;
    line-height: 1.4em
}
​
#watching tbody .sml_col {
    bottom: -17px;
    width: 225px;
    font-size: 1.6em;
    letter-spacing: 3px
}
  
#reading tbody .sml_col {
    bottom: -17px;
    width: 225px;
    font-size: 1.3em;
}
​
#watching .hint--notes,
#reading .hint--notes  {
    width: 225px!important
}
​
#watching .hint:hover,
#reading .hint:hover  {
    min-height: 310px;
    max-height: 9001%
}
}

/* Adds icons before list headings */

h3::before {
  vertical-align: top;
  margin-left: 10px;
  margin-right: 5px;
  font-family: Material Icons;
  font-size: larger;
}
#watching h3::before, #reading h3::before {
    content: "\E037 "
}

#Upnext h3::before {
    content: "\E044 "
}

#completed h3::before {
    content: "\E876 "
}

#plantowatch h3::before, #plantoread h3::before {
    content: "\E03B "
}

#onhold h3::before {
    content: "\E034 "
}

#dropped h3::before {
    content: "\E033 "
}

/* The little details */

.tag_airing, .tag_notairing {
  position: absolute;
  top: -200px;
  background: rgba(0,0,0,.7);
  color: white;
  width: 155px;
  opacity: 1;
}

.list__tag {
  position: absolute;
  top: -190px;
}

.tag_notes {
  opacity: 1;
  color: white;
  text-shadow: 0 0 5px black;
  cursor: help;
}

#watching .tag_notes {
  left: -100px;
}

.tag_re {
  color: white;
  opacity: 1;
  left: 125px;
  text-shadow: 0 0 5px black;
  z-index: 1;
}

.hint {
  background: rgba(0,0,0,.8)
}

.hint--notes {
  width: 155px !important;
  min-height: 196px;
  max-height: 9001vh;
  left: 0 !important;
  top: -7px;
  padding: 7px;
  border-radius: 0;
}

.hint--re {
  width: 35px !important;
  left: 117px !important;
  height: 20px;
  display: inline-block;
  opacity: 1;
  top: -3px;
  padding-left: 8px;
  border-radius: 20px;
  text-align: left;
  z-index: 0;
}

td a:hover {
  opacity: 0;
  margin-bottom: -5px;
  color: #fff;
}

td a:hover ~ span[class*="tag"] {
  opacity: 0;
  margin-top: -5px;
}
span[class*="tag"] {
  transition: opacity .2s, margin-top .2s;
}