An easy customizable theme for your animelist by changing the CSS variables values [Preview] [Work-in-progress]

myanimelist-flex-and-grid-layout.css

@import url('https://fonts.googleapis.com/css?family=Cabin|Crete+Round|Work+Sans');

:root {
    /***/
    --username: "Karobwe";
    --body-bg: #FFF;
    --body-fg: #717171;
    --link: #45C1EF;
    --black: #191B1F;
    --orange: #E6614F;
    --red: #FC4D55;
    
    --font-sans: 'Cabin', Arial, Helvetica, sans-serif;
    --font-sans-alt: 'Work Sans', Arial, Helvetica, sans-serif;
    --font-serif: 'Crete Round', 'Times New Roman', Times, Georgia, serif;
    font-size: 13px;
    font-family: var(--font-serif);
    
    /* Header settings */
    --header-bg: #FFF;
    --header-fg: #474747;
    --header-logo-bg:  #51D2B7;
    --header-logo-fg:  #FFF;
    
    /* Menu settings */
    --menu-bg: #2A2D33;
    --menu-fg: #AEAEB0;
    --menu-item-hover-bg: #656C7E;
    --menu-item-hover-fg: #FFF;
    --menu-icon: #AEAEB0;
    --menu-icon-hover: #FFF;
    
    /* List settings */
    --list-bg: #FFFFFF;
    --list-menu-bg: #AEAEB0;
    --list-menuf-bg: #E6614F;
    --list-item-bg: #2A2D3310;
    
    /* Footer settings */
    --footer-bg: #2A2D33;
    --footer-fg: #AEAEB0;
}

body {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 70px 80vh 1fr;
    grid-template-areas: 
        "header header"
        "menu content"
        "footer content";
    background-image: none;
    background-color: var(--body-bg);
}

a {
    color: var(--link);
}

.data, 
.list-table .list-table-data .data.title .rewatching, 
.list-table .list-table-data .data.title .rereading, 
.list-table .list-table-data .data.title .content-status {
    color: var(--body-fg);
}

/**********************************************************
*                        HEADER
**********************************************************/

.header {
    grid-area: header;
    width: 100%;
    background-color: var(--header-bg);
    box-shadow: 0 2px 2px var(--menu-fg);
}

div.header {
    position: fixed;
    z-index: 10;
}

.header .header-title {
    position: fixed; /* If .header is not fixed */
    display: block;
    top: 0px;
    width: 250px;
    height: 70px;
    background: url("/img/pc/ownlist/logo_mal.png") center no-repeat, var(--header-logo-bg);
    background-size: auto 36px;
}

.header .header-menu {
    right: 18px;
    background-color: var(--header-bg);
    color: var(--header-fg);
}

/**********************************************************
*                        MENU
**********************************************************/

.list-menu-float {
    grid-area: menu;
    position: fixed;
    top: 70px;
    width: 250px;
    min-height: calc(100vh - 70px - 50px); /* = viex-height - header - footer */
    margin: 0;
    padding-top: 18px;
    border: none;
    background-color: var(--menu-bg);
}

.list-menu-float .icon-menu {
    width: 100%;
    height: 50px;
    background-color: transparent;
    color: var(--menu-fg);
}

.list-menu-float .icon-menu:hover {
    width: 250px !important;
    background-color: var(--menu-item-hover-bg) !important;
    color: var(--menu-item-hover-fg);
}

.list-menu-float .icon-menu.setting:hover .text .link-list-setting:hover, 
.list-menu-float .icon-menu.setting:hover .text .link-style-setting:hover {
    background-color: var(--menu-item-hover-bg) !important;
}

/* SVG */
.list-menu-float .icon-menu svg.icon {
    fill: var(--menu-icon);
}
.list-menu-float .icon-menu:hover svg.icon {
    fill: var(--menu-icon-hover);
}

.list-menu-float .icon-menu.profile,
.list-menu-float .icon-menu.profile:hover {
    width: 100px !important;;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 16px;
    border-radius: 200px;
}

/*
.list-menu-float .icon-menu.profile::after {
    content: var(--username);
}*/

.list-menu-float .icon-menu.quick-add svg.icon-quick-add,
.list-menu-float .icon-menu.anime-list svg.icon-anime-list,
.list-menu-float .icon-menu.manga-list svg.icon-manga-list,
.list-menu-float .icon-menu.history svg.icon-history,
.list-menu-float .icon-menu.export svg.icon-export,
.list-menu-float .icon-menu.login svg.icon-login,
.list-menu-float .icon-menu.logout svg.icon-logout,
.list-menu-float .icon-menu.setting svg.icon-setting {
    left: 13px;
    top: 13px;
}

.list-menu-float .icon-menu.profile::after,
.list-menu-float .icon-menu .text, 
.list-menu-float .icon-menu.setting::after {
    position: absolute;
    top: 14px;
    left: 60px;
    width: 145px;
    display: inline-block;
    color: var(--menu-fg);
    font-size: 1.4em;
    font-family: var(--font-sans);
    text-align: left;
    vertical-align: middle;
    opacity: 1;
    background-color:transparent;
    transition: none;
}

.list-menu-float .icon-menu.profile:hover::after,
.list-menu-float .icon-menu .text:hover,
.list-menu-float .icon-menu.setting:hover .text .link-list-setting:hover,
.list-menu-float .icon-menu.setting:hover .text .link-style-setting:hover {
    color: var(--menu-item-hover-fg);
}

.list-menu-float .icon-menu:not(.profile):hover {
	background-color: transparent;
}

/* Setting */
.list-menu-float .icon-menu.setting::after {
    content: "Settings";
}

.list-menu-float .icon-menu.setting:hover::after {
    display: none;
}

.list-menu-float .icon-menu.setting .text .link-list-setting,
.list-menu-float .icon-menu.setting .text .link-style-setting {
    display: block;
    opacity: 0;
}

.list-menu-float .icon-menu.setting:hover .text .link-list-setting,
.list-menu-float .icon-menu.setting:hover .text .link-style-setting {
    background-color: transparent;
    color: var(--menu-item-fg);
    opacity: 1;
}

.list-menu-float .icon-menu.setting:hover .text .link-style-setting {
    border-top: var(--menu-fg) 1px solid;
}

/**********************************************************
*                        LIST
**********************************************************/

.list-container {
    grid-area: content;
    width: 100%;
    margin-top: 10px;
    border: none;
    background-color: var(--list-bg);
    /*background: url("https://orig00.deviantart.net/7c12/f/2015/045/5/1/pika_music_by_exceru_hensggott-d8hv55o.gif") no-repeat fixed bottom right;*/
}

.status-menu-container {
    position: fixed;
    top: 0;
    width: calc(100vw - (250 * 2)); /* view-width - (menu + header-title) */
    height: 70px;
    background-color: var(--header-bg);
    border-bottom: none;
    z-index: 99;
}

.status-menu-container.fixed {
	display: none;
}

.status-menu-container.fixed .status-menu {
    margin: 10px auto;
}

.status-menu-container .status-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
}

.status-menu-container .status-menu .status-button {
    top: 15px;
    font-family: var(--font-sans);
    font-size: 1.6em;
    color: var(--header-fg);
}

.status-menu-container .status-menu .status-button.on {
    padding-left: 32px;
    padding-right: 32px;
    background-color: var(--header-bg);
    color:var(--active-list-statut);
    font-weight: bold;
}

.status-menu-container .status-menu .status-button:after {
    background-color: var(--header-logo-bg);
    display: block;
}

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

/**
 * List Container - Status Menu - Search
 */
.status-menu-container .search-container {
    position: relative;
    top: 14px;
    right: 0px;
}
.status-menu-container .search-container #search-button {
    display: inline-block;
    height: 22px;
    margin-top: 12px;
    color: var(--grey-light);
    font-size: 2em;
    vertical-align: middle;
}

.status-menu-container .search-container #search-box {
    display: inline-block;
    width: 0px;
    height: 28px;
    overflow: hidden;
    margin-top: 9px;
    border-radius: 3px;
}

.status-menu-container .search-container #search-box.open {
    display: inline-block;
    width: 200px;
}

.status-menu-container .search-container #search-box input {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    font-size: 1.3em;
    font-weight: bolder;
    color: var(--grey);
}

/**
 * List Container - List Block
 */
.list-block {
    margin-top: 16px;
    min-height: 100vh;
}

.list-unit {
    display: block;
    margin: 0 auto;
    width: 100%;
}

/**
 * List Container - List Status Title (with Stats)
 */
.list-unit .list-status-title {
    position: relative;
    display: table;
    background-color: transparent;
    width: 100%;
    height: 38px;
}

.list-unit .list-status-title {
    display: none /* * * * TO FIX * * * */;
}

.list-unit .list-status-title .text {
    display: table-cell;
    width: 1024px;
    height: 38px;
    font-size: 2.0em;
    color: var(--blue-light);
    font-weight: bold;
    font-family: var(--font-sans-alt);
    text-align: center;
    vertical-align: middle;
}

.list-unit .list-status-title .stats {
    position: absolute;
    height: 38px;
    line-height: 38px;
    right: 4px;
}

.list-unit .list-status-title .stats a {
    margin-right: 8px;
    padding: 4px;
    color: var(--grey-light);
    border: solid 1px var(--grey-light);
    border-radius: 50px;
}

.list-unit .list-status-title .stats a:hover {
    color: var(--orange-light);
    border: solid 1px var(--red-light);
}

.list-unit .list-status-title .stats a.filterd {
    text-shadow: 0px 0px 2px var(--white);
}

.list-unit .list-stats {
    display: none;
    background-color: var(--grey-light);
    width: 1024px;
    height: 30px;
    color: var(--grey);
}

/**
 * List Container - List Table
 */

.list-table {
    width: 100%;
    margin: 0 auto auto 0;
    box-shadow: 1px 10 2px var(--header-logo-bg);
    border: #EBEBEB 1px solid;
}

.list-table > tbody:first-child {
    display: none;
}

.list-table > tbody:nth-of-type(2n+1) {
    background-color:inherit;
}

/**
 * List Container - List Table - Items
 */

.list-table .list-table-header .header-title {
    display: none;
}

.list-block {
    margin-top: 0;
    min-height: 100vh;
}

.list-table {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.list-table .list-table-data .data.status.reading, 
.list-table .list-table-data .data.status.watching {
    display: none;
}

.list-item {
    padding: 0 12px;
    width: 350px;
}

.list-item [id^="more"]{
    position: absolute;
    right: 0px;
    top: 0px;
    background-color: var(--orange);
}

.list-table-data {
    display: grid;
    grid-template-columns: 25% 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: 
        "image title"
        "image progress"
        "image score";
    background-color: var(--list-item-bg);
    border: 1px solid var(--header-logo-bg)
}

.list-table .list-table-data .data.image {
    grid-area: image;
}

.list-table .list-table-data .data.title {
    grid-area: title;
}

.list-table .list-table-data .data.progress {
    grid-area: progress;
}

.list-table .list-table-data .data.score {
    grid-area: score;
}

/**********************************************************
*                        FOOTER
**********************************************************/

#footer-block {
    grid-area: footer;
    position: absolute;
    position: fixed;
    bottom: 0;
    width: 250px;
    height: 50px;
    background-color: var(--footer-bg);
    font-family: var(--font-sans);
    z-index: 10;
}

#copyright {
    background-color: var(--footer-bg);
    color: var(--footer-fg);
}