MyAnimeList Custom Theme

gistfile1.css

/** Initialisation **/
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Andada|Permanent+Marker|Raleway:300');

body {
 font-family: 'Roboto', sans-serif;
 color: #fff;
}

/** In case banner as to be print **/
/**
img#cover-image {
  margin : -140px 0px -124px 0px;
}

.image-container {
  overflow: hidden;
}

.cover-block {
  padding: 15px 0 0 0;
}
**/


/** In case banner as to be hidden **/
.cover-block {
  display: hidden;
}

/** Header modification **/
.header {
  background-color: rgba(0, 160, 255, 0.75);
  width: 100%;
}

.header-title, .header-menu {
  margin: 0 25px;
}

/** Status menu modification **/
#status-menu {
  height: 0;
}

.status-menu {
  position: fixed;
  display: block;
  z-index: 2;

  height: 0px;
  width: 50px;
  
  top: 20%;
  right: 0px;
  
  border: #444 1px solid;
  background-color: #333;
  border-spacing: 0 !important;
}

.search-container {
  position: initial !important;
  right: auto;
}
.status-button, .search-container {
  display: block;
  float: left;
}

.status-menu-container .status-menu .status-button {
  padding: 0;
  font-size: 0;
  
  width: 50px;
  height: 50px;
}

.status-menu-container .status-menu .status-button:hover:before {
  display: block;
  position: relative;
  content: '';

  width: 35px;
  height: 35px;
  
  top: 7px;
  left: 7px;
  
  border-radius: 50%;
  
  border: 0px solid #333;
  
  background-color: rgba(51, 51, 51, 0.85) !important;
}

.status-button.all_anime {
  background-color: #fff !important;
}
.status-buttonn.all_anime {
  background-color: #4CAF50 !important;
}
.status-button.watching {
  background-color: #4CAF50 !important;
}
.status-button.completed {
  background-color: #2196F3 !important;
}
.status-button.onhold {
  background-color: #FFEB3B !important;
}
.status-button.dropped {
  background-color: #F44336 !important;
}
.status-button.plantowatch {
  background-color: #ECEFF1 !important;
}

.status-menu-container .status-menu .status-button.on:after, .status-menu .status-button:hover:after {
  opacity: 0;
}


.on:before {
  display: block;
  position: relative;
  content: '';

  width: 28px;
  height: 28px;
  
  top: 7px;
  left: 7px;
  
  border: 4px solid #333;
  border-radius: 50%;
}

/** Change of search button on status menu **/
.search-container {
  padding: 0;
  font-size: 20px;
  width: 50px;
  height: 50px;
}

#search-button {
  position: absolute;
  top: 310px;
  right: 10px;
  margin-top: 0px !important;

}

#search-box {
  position: absolute;
  right: 0;
  top: 350px;
  
  margin-top: 0px !important;
  background-color: #333;
  border: #444 1px solid;
}

#search-box.open {
  width: 198px !important;
  height: 48px !important;
}

#search-box input {
  border: 0;
  border-bottom: 2px solid #2196F3;
  width: 100%;
  font-size: 22px;
  line-height: 35px;
  text-align: center;
  padding: 10px;
  background: transparent;
  color: #2196F3;
}


/** Change color for element which where not clear (change also the color of hover) **/
.text, #show-stats-button, #advanced-options-button, .list-stats, .status-button:hover, #search-button:hover, .list-table .list-table-data a:not(.edit-disabled):hover, .link.sort:hover {
  color: rgba(255, 255, 255, 1) !important;}

.icon-menu:hover svg.icon {
  fill: white !important;
}

/** Add special char '#' before number **/
.data.number:before {
  content: "#";
}

.header-menu:after {
  content: "Design v0.1.0 by XemnasKami";
}

/** Increase picture size **/
.hover-info.image {
  width: 125px !important;
  height: 175px !important;
  
  -ms-interpolation-mode: bicubic;
  -moz-image-rendering: crisp-edges;
  
  filter: contrast(120%);
}

/** Change size of the status title bar**/
.list-status-title, .list-stats {
  width: calc(100% - 32px) !important;
  margin-left: 16px;
  margin-bottom: 16px;
}


/** Modify format of list **/
table {
  position: relative;
}

.list-container {
  width: 85% !important;
}

.list-unit {
  width: 100% !important;
}

tbody {
  display: block !important;
  border: none !important;
}

.list-table-header {
  display: none !important;
}

@media screen and (min-width: 1664px) {
  .list-item {
    float: left !important;
    width: 25% !important;
  }
}

@media screen and (max-width: 1664px) {
  .list-item {
    float: left !important;
    width: 33.3333333% !important;
  }
}

@media screen and (max-width: 1225px) {
  .list-item {
    float: left !important;
    width: 50% !important;
  }
}

@media screen and (max-width: 793px) {
  .list-item {
    float: left !important;
    width: 100% !important;
  }
}

/** Modify format of item **/
tr {
  display: block !important;
  border: none !important;
}

.data {
  border: none !important;
  display: block !important;
  text-align: inherit !important;
}

.more-info {
  display: none !important;
}

.list-table-data {
  position: relative;
  
  margin: 10px 15px;
  height: 225px !important;
}


.data.status {
  width: 100% !important;
  height: 15px !important;
}

.data.number {
  position: relative;
  
  color: black;
  
  top: -27px;
  text-align: center !important;
  
  font-size: 15px;
  font-weight: 800;
}

.data.image {
  position: absolute;
  top: 44px;
}

.data.title {
  position: absolute;
  top: 40px;
  left: 127px;
  
  width: calc(100% - 147px);
}
.list-table .list-table-data .data.title a {
  color: #29B6F6 !important;
}
.list-table .list-table-data .data.title a.sort {
  font-size: 14px;
  max-height: 42px;
  line-height: 14px;
  display: block !important;
  
  /** Find a way to make a good solution **/
  
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
}

.data.title .edit {
  position: absolute;
  top: 170px;
}

.data.title .add-edit-more {
  color: rgba(0, 0, 0, 0);
}

.data.title .edit:after {
  content: none !important;
}

.data.title .more {
  display: none !important;
}

.data.score {
  position: absolute;
  top: 130px;
  left: 140px;
  
  font-size: 16px;
  color: white;
}
.data.score:before {
  content: "Score :";
}
.data.score:after {
  content: "/10";
}
.list-table .list-table-data .data.score a {
  margin: 0 -5px 0 0;
  font-size: 19px !important;
  color: #29B6F6 !important;
}

.data.type {
  position: absolute;
  top: 155px;
  left: 140px;
  
  font-size: 16px;
  color: white;
}
.data.type:before {
  content: "Type : ";
}

.data.progress {
  position: absolute;
  top: 180px;
  left: 140px;
  
  width: calc(100% - 147px);
  
  font-size: 16px;
  color: white;
}
.list-table .list-table-data .data.progress span:nth-of-type(1) {
  visibility: collapse;
  margin: 0 -12px 0 0;
}
.list-table .list-table-data .data.progress a.link {
  visibility: visible;
  font-size: 19px !important;
  color: #42A5F5 !important;
}
.list-table .list-table-data .data.progress span:nth-of-type(2) {
  font-size: 19px !important;
  color: #42A5F5;
}
.list-table .list-table-data .data.progress span:nth-of-type(2):before {
  font-size: 16px;
  font-weight: normal;
  
  color: white;
  content: " seen over ";
}
.list-table .list-table-data .data.progress a.icon-add-episode {
  font-size: 17px;
  color: #1E88E5 !important;
}

.data.tags {
  display: none !important;
}

/** background-color differenciation every 2 item**/
.list-table > tbody:nth-of-type(2n) {
  background-color: rgba(34, 34, 34, 1);
}

.list-table > tbody:nth-of-type(2n+1) {
  background-color: rgba(33, 150, 243, 0.20);
}

/** Change vlue color for states (watching, completed, on-hold, dropped, planned) **/
.list-table .list-table-data .data.status.watching {
  background-color: #4CAF50 !important;
}

.list-table .list-table-data .data.status.completed {
  background-color: #2196F3 !important;
}

.list-table .list-table-data .data.status.onhold {
  background-color: #FFEB3B !important;
}

.list-table .list-table-data .data.status.dropped {
  background-color: #F44336 !important;
}

.list-table .list-table-data .data.status.plantowatch {
  background-color: #ECEFF1 !important;
}

/** Status Menu related **/