MrSeedbox Mal Style

style.css

/*
  Stylesheet for MyAnimeList.net profiles
  Copyright (C) 2017 Meshiest

  This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

  You should have received a copy of the GNU General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

/*
  Style developed by Meshiest
    github.com/Meshiest
    myanimelist.net/animelist/Meshiest
 
  This style is meant for myanimelist pages embedded within applications (ie mrseedbox)
    https://github.com/Meshiest/mrseedbox

  If you just want to import this style with low effort, make this your css:  (that's it!)
    @import url(https://rawgit.com/Meshiest/cf3a3a4e16f5669ce7540445bf5b4cbf/raw/style.css);

This also means that your css will update whenever this gist updates!!

  If you have another style you would like to preserve, make sure you add the following css around it:

  @media screen and (min-width: 350px) {
    // your original css goes here
  }

  // below css gets pasted here

*/

@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,900);

@media screen and (max-width: 350px) {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .list-menu-float,
  .header,
  .list-status-title,
  .search-container,
  .header-title.image,
  .header-title.type,
  .header-title.tags,
  td.data.image,
  td.data.type,
  td.data.tags,
  .add-edit-more,
  .icon-watch,
  .cover-block,
  .content-status {
    display: none !important;
  }

  .fixed, .status-menu-container {
    position: relative !important;
  }

  .list-block,
  .list-unit {
    margin: 0 !important;
  }

  .list-container,
  .list-unit,
  .status-menu-container {
    width: 100% !important;
  }

  .status-menu {
    margin: auto !important;
    border-spacing: 20px 0 !important;
  }

  #status-menu {
    background-color:#009688;
  }

  .status-button {
    font-size: 0px !important;
  }

  .status-button:before {
    color: #fff;
    font-family: 'Material Icons';
    font-size: 12px !important;
  }

  .status-button:after {
    background-color: #fff !important;
    height: 2px !important;
    left: 6px !important;
    opacity: 1 !important;
    width: 0px !important;
  }
  
  .status-button:hover:after, .status-button.on:after {
    left: -4px !important;
    width: 20px !important;
  }

  .header-title {
    height: 24px !important;
    border: none !important;
  }

  a.link.sort, a.link.sort:hover {
    color: #000 !important;
    font-weight: 400 !important;
    pointer-events: none;
    text-decoration: none;
  }
  
  .data.progress>div {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 24px;
  }

  tr, td {
    border: none !important;
  }

  .list-item:nth-child(even),
  .list-table .list-table-header .header-title {
    background: #eee;
  }
  
  .list-item:nth-child(odd),
  body {
    background-color: #fff !important;
  }
  
  .data.number,
  .list-table .list-table-data .data.title a,
  body,
  .data.progress>div>span:last-child {
    color: #000 !important;
  }
  
  .list-table .list-table-data .data:not(.title) a:not(.icon-add-episode) {
    color: #00f !important;
  }
  
  .list-table-data .data a.icon-add-episode {
    color: #fff !important;
  }
  
  tr.list-table-data:hover {
    background-color: #80CBC4;
  }

  .data.progress {
    position: relative;
  }

  .icon-add-episode {
    align-items: center;
    background-color: #009688;
    color: #fff;
    display: flex;
    height: 20px;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
  }

  td.data.status {
    width: 24px !important;
  }

  td.data.status:before {
    color: #fff;
    display: block;
    font-family: 'Material Icons';
    transition: all 0.2s;
  }

  /* Status Icons*/
  td.data.status.watching:before {content: 'play_arrow'}
  td.data.status.completed:before {content: 'done'}
  td.data.status.onhold:before {content: 'pause'}
  td.data.status.dropped:before {content: 'stop'}
  td.data.status.plantowatch {background-color: #00796B !important}
  td.data.status.plantowatch:before {content: 'access_time'}

  /* Header Icons*/
  .status-button.all_anime:before{content: 'list'}
  .status-button.watching:before{content: 'play_arrow'}
  .status-button.completed:before{content: 'done'}
  .status-button.onhold:before{content: 'pause'}
  .status-button.dropped:before{content: 'stop'}
  .status-button.plantowatch:before{content: 'access_time'}
  
  .loading-space {
     height: 40px !important;
  }
  
  #fancybox-wrap {
    width: calc(100% - 32px) !important;
    height: 200px !important;
    margin: auto !important;
  }

  #fancybox-inner {
    overflow: none !important;
    height: auto !important;
    width: auto !important;
    left: 0 !important;
    top: 25% !important;
  }

  #fancybox-inner > div {
    width: auto !important;
  }

  #fancybox-inner input[type=button] {
    margin: 4px !important;
  }
}