/* "Dashboard"
* List design by 5cm
* Modified by Valerio Lyndon
* Original date: 2020-JUL-28
* Revision date: 2020-AUG-09
*/
/* Changelog:
- Fixed entries after 300 not loading when layout viewed on large screens.
- Unified menu button appearance on hover.
- Fixed white pixels above MAL logo.
*/
All Comments (13) Comments
And have a wonderful day 🙌🙌
* List design by 5cm
* Modified by Valerio Lyndon
* Original date: 2020-JUL-28
* Revision date: 2020-AUG-09
*/
/* Changelog:
- Fixed entries after 300 not loading when layout viewed on large screens.
- Unified menu button appearance on hover.
- Fixed white pixels above MAL logo.
*/
@\import "https://fonts.googleapis.com/css?family=Source+Sans+Pro";
:root {
--background: fixed center/cover url(https://wallpapercave.com/wp/wp5085421.jpg)
}
body {
background: var(--background) !important;
width: 1058px; font: 11px Source Sans Pro; letter-spacing: 1px; text-transform: uppercase;
padding: 70px 0 0;
margin: auto;
}
body::before,
body::after {
content: "";
position: fixed;
top: 68px;
left: calc(50% - 529px);
width: 1058px;
height: 541px;
border-radius: 10px;
pointer-events: none;
} body::before {
z-index: 60;
background: linear-gradient(to right, #333 160px, #fff 160px);
} body::after {
z-index: 110;
box-shadow: 0 8px 20px rgba(0,0,0,.6);
}
.list-table .list-table-data .data.title .link
{
font-size: 12px !important;
font-weight: normal !important;}
.list-table .list-table-data .data.score,
.list-table .list-table-data .data.score a {
font-size: 14px !important;
font-weight: normal !important;}
.list-table-data .data.tags {
font-size: 12px !important;
font-weight: normal !important;}
a {color: black;}
#header-menu-button .fa, [data-owner=""] .list-menu-float, .cover-block, .list-menu-float .icon-menu.export,
.list-menu-float .icon-menu.setting svg.icon-setting, .list-unit .list-status-title .text, #show-stats-button,
.list-unit:not(.all_anime) .status, .icon-watch.ml4,[data-owner=""] .add-edit-more span, .more,
.list-table .list-table-data .tags .edit, .list-unit:not(.watching) .icon-add-episode {display: none;}
.header {
position: fixed;
top: 0;
height: 68px;
z-index: 100;
background: var(--background);
}
.header .header-title {background: #333 15px 2px/50px no-repeat url(https://i.postimg.cc/sx2N13vT/logo.png);
width: 160px; height: 50px; top: 68px; z-index: 2; border-radius: 10px 0 0; border-bottom: 1px solid #555;}
.header .header-title:hover {background-color: #222;}
.header .header-menu.other {width: 160px; top: 118px; left: 0; z-index:2;}
[data-owner=""] .header .header-menu .btn-menu, .header .header-menu .header-info {font-size: 0; text-align: left; margin: 0;}
.header .header-menu .header-info {margin-top: 50px;}
#header-menu-button, .anime .list-menu-float .icon-menu.anime-list, .anime .list-menu-float .icon-menu.anime-list svg,
.anime .list-menu-float .icon-menu.anime-list .text, .anime .list-menu-float .icon-menu.anime-list:hover,
.manga .list-menu-float .icon-menu.manga-list, .manga .list-menu-float .icon-menu.manga-list svg,
.manga .list-menu-float .icon-menu.manga-list .text, .manga .list-menu-float .icon-menu.manga-list:hover {
background-color: white; color: #333 !important; fill: #333;}
#header-menu-button:before {content: ''; display: inline-block; width: 13px; height: 12px; margin: 0 10px 0 20px;}
.anime #header-menu-button:before {background: left/cover url(https://s6.postimg.cc/46qmpa1m9/blackanime.png);}
.manga #header-menu-button:before {background: left/cover url(https://s6.postimg.cc/3tz8j33wx/blackmanga.png);}
.header a, .header .header-menu .list-menu .icon-menu {display: block; width: 160px; height: 50px; transition: none;}
.header .header-menu .list-menu {top: 100px; left: 0; background: none; display: block!important; border: 0; box-shadow: none;}
.header .header-menu .list-menu .icon-menu .text {left: 48px; top: 0; font-size: 11px; color: #999;}
.header-info [href*=shared]:before {font: 14px FontAwesome; content: '\f0ec'; padding: 0 11px 0 20px;}
.fa.fa-history {padding: 0 6px 0 21px; font-size: 16px;}
.header-info [href*=login] {border-top: 1px solid #555;}
.header-info [href*=login]:before {font: 17px FontAwesome; content: '\f090'; padding: 0 12px 0 20px;}
.header-info [href*=register]:before {font: 14px FontAwesome; content: '\f234';padding: 0 12px 0 20px;}
.header-info [href*=register]:after {content: 'Register'; font-size: 11px; letter-spacing: 2px;}
.header a, .header a.username:after, .list-menu-float .icon-menu.profile:after {
content: 'Profile'; font: bold 11px Source Sans Pro; color: #999!important; line-height: 50px; letter-spacing: 2px;}
.header a:not(.header-title):hover,
.header a:not(.header-title):hover::before,
.header a:not(.header-title):hover::after,
.header .header-menu .list-menu .icon-menu:hover, .list-menu-float .icon-menu.profile:hover {
background: #222; color: white !important; text-decoration: none;}
.header a.username, .header-info [href*=register], .list-menu-float .icon-menu.setting .text .link-style-setting {
font-size: 0; letter-spacing: 0;}
.header a.username:before {content: '\f007'; font: 15px FontAwesome; padding: 0 15px 0 20px;}
.header a.username:hover:after,
.header .header-menu .list-menu .icon-menu:hover svg.icon,
.header .header-menu .list-menu .icon-menu:hover .text,
.list-menu-float .icon-menu.setting .text .link-style-setting:hover:before {
fill: white; color: white;}
.header .header-menu .list-menu .icon-menu svg.icon, .list-menu-float .icon-menu svg.icon {
width: 15px; fill: #999; top: 15px!important; left: 20px!important;}
.list-menu-float {
position: fixed;
top: 120px;
left: calc(50% - 529px); width: 160px; border: 0;
z-index: 80;
}
.list-menu-float .icon-menu {background: #333; width: 100%; transition: none;}
.list-menu-float .icon-menu.profile {background-image: none!important;
width: 110px; padding-left: 50px; text-align: left;}
.list-menu-float .icon-menu.profile:before {content: '\f007';
font: 15px FontAwesome; color: #999; position: absolute; top: 17px; left: 22px;}
.list-menu-float .icon-menu .text {font: bold 11px Source Sans Pro; color: #999;
letter-spacing: 2px; width: auto; top: 18px; opacity: 1; transition: none;}
.list-menu-float .icon-menu.setting .text {left: 0; width: 100%; height: auto; text-align: left; opacity: 1;}
.list-menu-float .icon-menu.setting .text .link-list-setting,
.list-menu-float .icon-menu.setting .text .link-style-setting,
.list-menu-float .icon-menu.setting:hover .text,
.list-menu-float .icon-menu.setting:hover .text .link-list-setting,
.list-menu-float .icon-menu.setting:hover .text .link-style-setting {
background: #333; width: 100%; color: #999; line-height: 50px; border: 0; opacity: 1;}
.list-menu-float .icon-menu:not(.profile):hover,
.list-menu-float .icon-menu.setting .text .link-list-setting:hover,
.list-menu-float .icon-menu.setting .text .link-style-setting:hover {
background: #222; width: 100%; color: white;}
.list-menu-float .icon-menu.profile:hover {
background: #222;
color: white;
}
.list-menu-float .icon-menu.profile:hover::before,
.list-menu-float .icon-menu.profile:hover::after {
color: white !important;
}
.list-menu-float .icon-menu.profile:hover:before, .list-menu-float .icon-menu.setting .text .link-list-setting:hover:before,
.list-menu-float .icon-menu.profile:hover:after, .list-menu-float .icon-menu:hover .text {width: auto; color: white;}
.list-menu-float .icon-menu.setting .text .link-list-setting {padding-left: 50px;}
.list-menu-float .icon-menu.setting .text .link-style-setting:after {
content:'List style'; font-size: 11px; letter-spacing: 2px; padding-left: 50px;}
.list-menu-float .icon-menu.setting .text .link-list-setting:before {
content: '\f013'; font: 16px FontAwesome; color: #999; position: absolute; margin:17px 0 0 -29px;}
.list-menu-float .icon-menu.setting .text .link-style-setting:before {
content: '\f1fc'; font: 14px FontAwesome; color: #999; position: absolute; margin: 17px 21px;}
.list-container {
margin-top: -2px;
z-index: 70;
padding-top: 51px;
background: none;
border: 0;}
[data-owner=""] .list-container {margin-top: -2px;}
.list-block, .status-menu-container.fixed + div.list-block {margin: 0; min-height: auto;}
.list-unit {
width: auto;
margin-left: 160px;
padding: 10px 30px calc(100vh - 609px);
background: none; border-radius: 0 0 10px;}
.status-menu-container, .status-menu-container.fixed {
position: fixed;
top: 68px;
left: calc(50% - 369px);
width: 898px;
height: 50px;
border-radius: 0 10px 0 0;
}
.status-menu-container .status-menu {
height: 100%;
margin-left: 0;
border-spacing: 36px 0;
}
.status-menu-container .status-menu .status-button {font: bold 11px Source Sans Pro; letter-spacing: 2px;}
.status-menu-container .status-menu .status-button.on {font-size: 12px; color: #333;}
.status-menu-container .status-menu .status-button:after {height: 2px;}
.status-menu-container .status-menu .status-button.all_anime:after {background: #222;}
.status-menu-container .status-menu .status-button.watching:after {background-color: #2db039;}
.status-menu-container .status-menu .status-button.plantowatch:after {background-color: #c3c3c3;}
.status-menu-container .status-menu .status-button.completed:after {background-color: #26448f;}
.status-menu-container .status-menu .status-button.onhold:after {background-color: #f1c83e;}
.status-menu-container .status-menu .status-button.dropped:after {background-color: #a12f31;}
.status-menu-container .search-container #search-box input {font: 11px Source Sans Pro;
color: #999; letter-spacing: 1px; padding: 0 8px; border-radius: 10px; border: 1px solid #ccc;}
.list-unit .list-status-title {width: 100%; height: 20px; background:none;}
.list-unit .list-status-title .stats {height: auto; line-height: 0;}
.list-unit .list-status-title .stats a {color: #999; margin: 0;}
.list-table .list-table-header .header-title, .list-table .list-table-header .header-title .link.sort,
.list-table .list-table-header .header-title .link.sort:hover {color: #323232;}
.list-table .list-table-header .header-title.status, .list-table .list-table-data .data.status {width: 2px; padding: 0;}
.list-table .list-table-data .data.title, .list-table .list-table-data .data.studio {height: 40px; line-height: 1.2em;}
.list-table .list-table-data .data.title .link {font-size: 11px;}
.list-table .list-table-data .data.title .add-edit-more {float: none; display: inline-block;
height: 0; font-size: 0; white-space: nowrap; margin-left: 5px; opacity: 0;}
.list-table .list-table-data .data.title:hover .add-edit-more {opacity: 1;}
.list-table .list-table-data .data.title .content-status {font-size: 9px; font-style: italic;}
.list-table .list-table-data a:not(.edit-disabled):hover {text-decoration: none; background: #444; color: white;}
.add a, .edit a, .list-table .list-table-data .data.tags {font-size: 8px; line-height:1em;}
.list-unit .loading-space {margin: 5px;}
footer {
position: fixed;
top: 609px;
left: 0;
z-index: 100;
width: 100%;
height: calc(100% - 609px);
background: var(--background);
}
#footer-block {background: none; padding: 20px;}
#copyright {font: 9px Source Sans Pro; color: white; text-shadow: 1px 1px 2px #333; padding-top: 15px;}
#copyright:before {content: 'Designed by 5cm.';}