This is a custom layout for modern template lists. If you don't know how to install the codes, click here to view the Beginner's Tutorial.
If there are problems: install the latest version, or check the Repair Thread for patches and updates (found here).
All premade modern layouts can be found in the gallery by clicking here, and more ways to customize your list can be found here.
A simple theme which is easy to read.
Code
#advanced-options {
position:absolute;
top:24px;
left:0;
right:0;
background-color:#F6F6F6;
display:none;
width:860px;
border:#EBEBEB 1px solid;
-moz-box-shadow:0 2px 8px 0 rgba(0,0,0,0.3);
-webkit-box-shadow:0 2px 8px 0 rgba(0,0,0,0.3);
-o-box-shadow:0 2px 8px 0 rgba(0,0,0,0.3);
-ms-box-shadow:0 2px 8px 0 rgba(0,0,0,0.3);
box-shadow:0 2px 8px 0 rgba(0,0,0,0.3);
color:#323232;
text-align:left;
font-family:'Helvetica neue', Helvetica, "lucida grande", tahoma, verdana, arial, sans-serif;
z-index:1101;
margin:0 auto;
padding:25px 0 30px;
}
#advanced-options .advanced-options-header {
width:750px;
padding-bottom:4px;
border-bottom:1px solid #BEBEBE;
font-size:16px;
margin:0 auto;
}
#advanced-options .advanced-options-header .description {
font-size:12px;
font-weight:400;
margin-left:8px;
}
#advanced-options select {
-ms-appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
background-image:url(/img/pc/ownlist/icon_pulldown_triangle.png);
background-repeat:no-repeat;
background-position:center right;
background-size:18px 8px;
background-color:#FFF;
display:inline-block;
height:25px;
border:#BEBEBE 1px solid;
border-radius:0;
font-size:12px;
padding:4px;
}
#advanced-options select:disabled {
background-image:url(/img/pc/ownlist/icon_pulldown_triangle_disable.png);
color:#9B9B9B;
}
#advanced-options input[type=text] {
border:#BEBEBE 1px solid;
padding:4px;
}
#advanced-options input:focus {
outline:none;
}
#advanced-options .sort-widget:last-of-type {
padding-bottom:45px;
}
#advanced-options .sort-widget select {
width:172px;
margin-right:8px;
}
#advanced-options .sort-widget input[type=radio] + label {
background-color:#FFF;
display:inline-block;
width:56px;
border:#BEBEBE 1px solid;
border-radius:4px;
color:#323232;
font-size:12px;
text-align:center;
cursor:pointer;
padding:5px 0;
}
#advanced-options .sort-widget input[type=radio]:checked + label {
background-color:#2181da;
border:#2181da 1px solid;
color:#FFF;
}
#advanced-options .sort-widget input[type=radio]:disabled + label {
border:#BEBEBE 1px solid;
color:#9B9B9B;
}
#advanced-options .sort-widget input[type=radio]:checked:disabled + label {
background-color:#FFF;
border:#BEBEBE 1px solid;
color:#9B9B9B;
}
#advanced-options .filter-widget select {
margin-right:8px;
font-size:12px;
}
#advanced-options .filter-widget.airing-status select,#advanced-options .filter-widget.publishing-status select {
width:152px;
}
#advanced-options .filter-widget.aired-date .text,#advanced-options .filter-widget.published-date .text {
display:inline-block;
margin-right:4px;
font-size:12px;
}
#advanced-options .sort-widget .widget-header,#advanced-options .filter-widget .widget-header {
display:inline-block;
width:110px;
font-size:12px;
font-family:'Helvetica neue', Helvetica, "lucida grande", tahoma, verdana, arial, sans-serif;
}
#advanced-options .sort-widget:last-of-type,#advanced-options .filter-widget:last-of-type {
padding-bottom:40px;
}
#advanced-options .advanced-options-button {
width:750px;
border-top:1px solid #BEBEBE;
text-align:center;
margin:0 auto;
padding:12px 0 0;
}
#advanced-options .btn-apply,#advanced-options .btn-clear {
background-color:rgba(64,101,186,1);
display:inline-block;
width:135px;
border-radius:4px;
font-size:12px;
color:#FFF;
text-align:center;
-moz-transition-property:all;
-o-transition-property:all;
-webkit-transition-property:all;
transition-property:all;
-moz-transition-duration:.3s;
-o-transition-duration:.3s;
-webkit-transition-duration:.3s;
transition-duration:.3s;
-moz-transition-timing-function:ease-in-out;
-o-transition-timing-function:ease-in-out;
-webkit-transition-timing-function:ease-in-out;
transition-timing-function:ease-in-out;
margin:0 4px;
padding:6px 0;
}
#advanced-options .btn-apply:hover,#advanced-options .btn-clear:hover {
background-color:rgba(64,101,186,0.8);
}
body {
background-image:url(http://i.imgur.com/inqwS95.jpg);
background-attachment:fixed;
background-clip:border-box;
background-position:right 5%;
background-repeat:no-repeat;
background-size:cover;
text-align:center;
font-family:Verdana, Arial;
font-size:11px;
background-color:#FFF;
margin:0;
}
td {
line-height:1.5em;
}
a {
color:#2181da;
text-decoration:none;
}
#footer-block {
background-color:transparent;
color:#FFF;
font-family:Avenir, "lucida grande", tahoma, verdana, arial, sans-serif;
padding:15px 0;
}
#copyright {
font-size:15px;
font-weight:700;
color:#FFF;
padding-top:3px;
text-align:center;
}
.header a {
font-weight:700;
color:#fff;
}
.header {
position:relative;
color:#fff;
display:block;
width:90%;
height:65px;
margin:0 auto;
}
.header .header-title {
position:absolute;
top:21px;
background-image:url(/img/pc/ownlist/logo_mal.png);
background-position:left top;
background-repeat:no-repeat;
background-size:auto 36px;
display:block;
width:240px;
height:36px;
text-indent:-9999px;
overflow:hidden;
}
.header .header-menu {
position:absolute;
top:25px;
right:4px;
}
.header .header-menu.other {
top:18px;
}
.header .header-menu .btn-menu {
display:block;
text-align:right;
font-size:16px;
}
.header .header-menu .header-info {
font-size:1em;
margin-top:6px;
margin-right:15px;
text-align:right;
}
.header .username {
font-weight:700;
}
.header .header-menu .list-menu {
position:absolute;
top:25px;
right:-4px;
background-color:#fff;
display:none;
border:#2181da 1px solid;
-moz-box-shadow:rgba(0,0,0,0.4) 0 0 10px;
-webkit-box-shadow:rgba(0,0,0,0.4) 0 0 10px;
box-shadow:rgba(0,0,0,0.4) 0 0 10px;
z-index:1;
}
.header .header-menu .list-menu .icon-menu {
display:block;
width:150px;
height:30px;
color:#2181da;
font-size:14px;
font-weight:700;
text-decoration:none;
-moz-transition-property:all;
-o-transition-property:all;
-webkit-transition-property:all;
transition-property:all;
-moz-transition-duration:.3s;
-o-transition-duration:.3s;
-webkit-transition-duration:.3s;
transition-duration:.3s;
-moz-transition-timing-function:ease-in-out;
-o-transition-timing-function:ease-in-out;
-webkit-transition-timing-function:ease-in-out;
transition-timing-function:ease-in-out;
}
.header .header-menu .list-menu .icon-menu:hover {
background-color:#e1e7f5;
}
.header .header-menu .list-menu .icon-menu svg.icon {
position:absolute;
fill:#2181da;
left:12px;
top:4px;
}
.header .header-menu .list-menu .icon-menu .text {
position:absolute;
left:52px;
top:6px;
}
.list-menu-float {
position:fixed;
display:block;
width:50px;
border:none;
z-index:2;
top:22.3%;
}
.list-menu-float .icon-menu {
position:relative;
background-color:#FFF;
display:block;
width:50px;
height:50px;
opacity:1;
-moz-transition-property:all;
-o-transition-property:all;
-webkit-transition-property:all;
transition-property:all;
-moz-transition-duration:.3s;
-o-transition-duration:.3s;
-webkit-transition-duration:.3s;
transition-duration:.3s;
-moz-transition-timing-function:ease-in-out;
-o-transition-timing-function:ease-in-out;
-webkit-transition-timing-function:ease-in-out;
transition-timing-function:ease-in-out;
}
.list-menu-float .icon-menu svg.icon {
position:absolute;
fill:#323232;
}
.list-menu-float .icon-menu:hover svg.icon {
position:absolute;
fill:#fff;
}
.list-menu-float .icon-menu.profile {
background-size:cover;
}
.list-menu-float .icon-menu.logout svg.icon-logout {
left:13px;
top:14px;
}
.list-menu-float .icon-menu.setting svg.icon-setting {
left:13px;
top:13px;
}
.list-menu-float .icon-menu .text {
position:absolute;
top:14px;
left:50px;
width:0;
display:inline-block;
color:#fff;
font-size:1.4em;
font-family:'Helvetica neue', Helvetica, "lucida grande", tahoma, verdana, arial, sans-serif;
text-align:center;
vertical-align:middle;
overflow:hidden;
white-space:nowrap;
opacity:0;
-moz-transition-property:all;
-o-transition-property:all;
-webkit-transition-property:all;
transition-property:all;
-moz-transition-duration:.3s;
-o-transition-duration:.3s;
-webkit-transition-duration:.3s;
transition-duration:.3s;
-moz-transition-timing-function:ease-in-out;
-o-transition-timing-function:ease-in-out;
-webkit-transition-timing-function:ease-in-out;
transition-timing-function:ease-in-out;
}
.list-menu-float .icon-menu:not(.profile):hover {
background-color:#2181da;
width:145px;
}
.list-menu-float .icon-menu:hover .text {
width:94px;
opacity:1;
}
.list-menu-float .icon-menu.setting .text {
top:0;
width:0;
height:100px;
opacity:0;
-moz-transition-property:all;
-o-transition-property:all;
-webkit-transition-property:all;
transition-property:all;
-moz-transition-duration:.3s;
-o-transition-duration:.3s;
-webkit-transition-duration:.3s;
transition-duration:.3s;
-moz-transition-timing-function:ease-in-out;
-o-transition-timing-function:ease-in-out;
-webkit-transition-timing-function:ease-in-out;
transition-timing-function:ease-in-out;
}
.list-menu-float .icon-menu.setting:hover .text {
top:0;
width:114px;
height:100px;
opacity:1;
}
.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 {
position:absolute;
background-color:#2181da;
display:block;
width:110px;
height:50px;
line-height:50px;
text-decoration:none;
color:#fff;
opacity:1;
}
.list-menu-float .icon-menu.setting:hover .text .link-list-setting {
top:0;
}
.list-menu-float .icon-menu.setting:hover .text .link-style-setting {
border-top:#EBEBEB 1px solid;
top:50px;
}
.list-container {
position:relative;
background-color:transparent!important;
border:none!important;
width:58%!important;
margin-bottom:0;
margin-right:auto;
margin-left:auto;
text-align:left;
}
.cover-block {
display:block;
width:1024px;
text-align:center;
vertical-align:middle;
margin:0 auto;
}
.cover-block .image-container img {
max-width:1024px;
}
.cover-block .image-container:hover .btn-list-setting {
display:block;
position:absolute;
top:20px;
right:28px;
border:rgba(255,255,255,0) 1px solid;
font-size:14px;
color:#fff;
font-family:'Helvetica neue', Helvetica, "lucida grande", tahoma, verdana, arial, sans-serif;
padding:8px;
}
.cover-block .image-container .btn-list-setting:hover {
position:absolute;
top:20px;
right:28px;
background-color:rgba(0,0,0,0.6);
border:#fff 1px solid;
-moz-box-shadow:0 0 4px #000;
-webkit-box-shadow:0 0 4px #000;
-o-box-shadow:0 0 4px #000;
-ms-box-shadow:0 0 4px #000;
box-shadow:0 0 4px #000;
font-size:14px;
color:#fff;
text-shadow:#323232 1px 1px 1px;
padding:8px;
}
.cover-block .image-container .btn-list-setting .fa-camera {
font-size:16px;
-moz-text-shadow:#000 1px 1px 3px;
-webkit-text-shadow:#000 1px 1px 3px;
-o-text-shadow:#000 1px 1px 3px;
-ms-text-shadow:#000 1px 1px 3px;
text-shadow:#000 1px 1px 3px;
-ms-filter:progid:DXImageTransform.Microsoft.DropShadow(color=#000000,offx=1,offy=1);
}
.cover-block .image-container .btn-list-setting .icon-plus-circle {
position:absolute;
top:4px;
left:18px;
background-color:rgba(0,0,0,0.6);
border-radius:50%;
-moz-box-shadow:-1px 1px 0 0 #323232;
-webkit-box-shadow:-1px 1px 0 0 #323232;
-o-box-shadow:-1px 1px 0 0 #323232;
-ms-box-shadow:-1px 1px 0 0 #323232;
box-shadow:-1px 1px 0 0 #323232;
font-size:10px;
}
.cover-block .image-container .btn-list-setting:hover .text {
display:inline-block;
margin-left:4px;
}
.status-menu-container.fixed + div.list-block {
margin-top:62px;
}
.status-menu-container .status-menu {
border-collapse:separate;
border-spacing:40px 0;
margin:0 auto;
}
.status-menu-container .status-menu .status-button {
display:block;
background-color:#FFF;
margin-top:10%;
text-align:center;
position:relative;
color:#2181da;
font-weight:700;
width:100%;
padding:10px 2px;
}
.status-menu-container .status-menu .status-button.on {
color:#FFF;
font-weight:700;
background-color:#2181da;
}
.status-menu-container .status-menu .status-button.on:hover {
color:red;
}
.status-menu-container .status-menu .status-button:hover {
background-color:#f2f2f2;
color:#2181da;
-moz-transition-property:all;
-o-transition-property:all;
-webkit-transition-property:all;
transition-property:all;
-moz-transition-duration:.3s;
-o-transition-duration:.3s;
-webkit-transition-duration:.3s;
transition-duration:.3s;
-moz-transition-timing-function:ease-in-out;
-o-transition-timing-function:ease-in-out;
-webkit-transition-timing-function:ease-in-out;
transition-timing-function:ease-in-out;
}
.status-menu-container .status-menu .status-button.on:after,.status-menu .status-button:hover:after {
opacity:1;
}
.status-menu-container .search-container {
margin-top:2%;
background-color:red!important;
width:12.4%;
display:none;
z-index:40;
}
.status-menu-container .search-container #search-button {
height:22px;
margin-top:15px;
color:#787878;
font-size:1.6em;
vertical-align:middle;
display:none;
z-index:40;
}
.status-menu-container .search-container #search-box {
display:inline-block;
width:0;
height:22px;
overflow:hidden;
margin-top:13px;
-webkit-transition:width .3s;
-moz-transition:width .3s;
transition:width .3s;
-webkit-backface-visibility:hidden;
vertical-align:middle;
}
.status-menu-container .search-container #search-box.open {
display:inline-block;
width:100px;
}
.status-menu-container .search-container #search-box input {
width:100%;
height:100%;
box-sizing:border-box;
}
.list-block {
margin-top:16px;
min-height:600px;
padding:0;
}
.list-unit {
display:block;
width:100%;
margin:0 auto;
}
.list-unit .list-status-title {
position:relative;
display:table;
background-color:transparent;
width:100%;
height:38px;
text-align:center;
margin-bottom:25px;
}
.list-unit .list-status-title .text {
display:table-cell;
width:100%;
height:38px;
font-size:4em;
color:#2181da;
font-weight:700;
font-family:'Helvetica neue', Helvetica, "lucida grande", tahoma, verdana, arial, sans-serif;
text-align:center;
vertical-align:middle;
font-style:italic;
}
.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;
color:#FFF;
}
.list-unit .list-status-title .stats a.filterd {
text-shadow:0 0 2px #FFF;
}
.list-unit .list-stats {
display:none;
background-color:transparent;
width:100%;
height:30px;
line-height:30px;
color:#FFF;
text-align:center;
font-weight:700;
}
.list-table {
width:100%;
border-collapse:collapse;
border-top:#2181da 1px solid;
background-color:#FFF;
border-bottom:#2181da 1px solid;
border-left:none;
border-right:none;
margin:0 auto;
}
.list-table > tbody:nth-of-type(2n+1) {
background-color:#fcfcfc;
}
.list-table .list-table-header .header-title {
background:#F6F6F6 url(/img/pc/ownlist/bar-table-header.png) no-repeat right 7px / 1px 22px;
display:none;
border-bottom:#EBEBEB 1px solid;
height:36px;
text-align:center;
vertical-align:middle;
}
.list-table .list-table-header .header-title:last-child {
background-image:none;
}
.list-table .list-table-header .header-title.status {
background-image:none;
width:4px;
}
.list-table .list-table-header .header-title.number {
width:30px;
}
.list-table .list-table-header .header-title.image {
width:66px;
}
.list-table .list-table-header .header-title.title {
padding-left:8px;
text-align:left;
}
.list-table .list-table-header .header-title.tags {
width:120px;
}
.list-table .list-table-header .header-title.days {
width:45px;
}
.list-table .list-table-header .header-title.storage {
width:75px;
}
.list-table .list-table-header .header-title .link {
font-size:11px;
color:#323232;
text-decoration:none;
}
.list-table .list-table-header .header-title .link.sort {
position:relative;
display:inline-block;
color:#323232;
white-space:nowrap;
-moz-transition-property:all;
-o-transition-property:all;
-webkit-transition-property:all;
transition-property:all;
-moz-transition-duration:.3s;
-o-transition-duration:.3s;
-webkit-transition-duration:.3s;
transition-duration:.3s;
-moz-transition-timing-function:ease-in-out;
-o-transition-timing-function:ease-in-out;
-webkit-transition-timing-function:ease-in-out;
transition-timing-function:ease-in-out;
}
.list-table .list-table-header .header-title .link.sort:hover {
color:#2556c6;
}
.list-table .list-table-header .header-title .sort-icon {
color:#1d439b;
}
.list-table .list-table-data .data {
display:table-cell;
text-align:center;
vertical-align:middle;
border-bottom:#2181da 1px solid;
color:#2181da;
padding:0;
}
.list-table .list-table-data:hover {
-moz-transition:all .25s ease-in-out 0;
background-color:#f0f0f0;
}
.list-table .list-table-data .data.number {
background-color:#2181da;
border-bottom:#2181da;
color:#2181da;
}
.list-table .list-table-data .data.number:hover {
background-color:#f0f0f0;
}
.list-table .list-table-data .data.status {
border-bottom:transparent;
width:8px;
}
.list-table .list-table-data a.edit-disabled {
cursor:text;
color:#000;
}
.list-table .list-table-data .tags .edit {
display:block;
width:100%;
text-align:center;
color:#2db039;
font-size:10px;
font-family:'Helvetica neue', Helvetica, "lucida grande", tahoma, verdana, arial, sans-serif;
}
.list-table .list-table-data .tags textarea {
box-sizing:border-box;
width:100%;
height:60px;
}
.list-table .list-table-data .data.image a {
display:inline-block;
}
.list-table .list-table-data .data.image .image {
width:38px;
height:58px;
border:none;
margin-left:10px;
}
.list-table .list-table-data .data.title {
word-wrap:break-word;
padding-left:8px;
text-align:left;
}
.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:red;
font-size:.9em;
}
.list-table .list-table-data .data.title .add-edit-more {
float:right;
margin-right:10px;
font-size:.9em;
}
.list-table .list-table-data .data.title .more {
position:relative;
}
.list-table .more-info {
display:none;
border-bottom:#EBEBEB 1px solid;
}
.list-table .more-info .more-content {
padding:10px;
}
.list-table .list-table-data .data.tags {
word-wrap:break-word;
}
.list-table .list-table-data .data.status.reading,.list-table .list-table-data .data.status.watching {
background-color:#2db039;
}
.list-table .list-table-data .data.status.plantoread,.list-table .list-table-data .data.status.plantowatch {
background-color:#c3c3c3;
}
.list-table .list-table-data .data.status.completed {
background-color:#26448f;
}
.list-table .list-table-data .data.status.onhold {
background-color:#f1c83e;
}
.list-table .list-table-data .data.status.dropped {
background-color:#a12f31;
}
.list-unit .loading-space {
height:20px;
font-size:20px;
text-align:center;
background-color:transparent;
width:100%;
}
#advanced-options select::-ms-expand,#advanced-options .sort-widget input[type=radio],.cover-block .image-container,.cover-block .image-container.hide,.cover-block .image-container .btn-list-setting,.cover-block .image-container .btn-list-setting .text,.status-menu-container .status-menu .status-button::after,.list-table .list-table-data .data.status .text {
display:none;
}
#advanced-options .sort-widget,#advanced-options .filter-widget {
width:750px;
margin:0 auto;
padding:12px 0 0;
}
#advanced-options .filter-widget.title input[type=text],#advanced-options .filter-widget.producer select,#advanced-options .filter-widget.magazine select {
width:360px;
}
#advanced-options .filter-widget.aired-date select.year,#advanced-options .filter-widget.published-date select.year,#advanced-options .filter-widget.aired-season select.year {
width:80px;
}
#advanced-options .filter-widget.aired-date select.month,#advanced-options .filter-widget.published-date select.month,#advanced-options .filter-widget.aired-date select.day,#advanced-options .filter-widget.published-date select.day,.list-table .list-table-header .header-title.type {
width:60px;
}
#advanced-options .filter-widget.aired-season select.season,.list-table .list-table-header .header-title.started,.list-table .list-table-header .header-title.finished {
width:110px;
}
.header a:hover,.list-table .list-table-data a:not(.edit-disabled):hover {
text-decoration:underline;
}
.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 {
left:13px;
top:12px;
}
.status-menu-container,.status-menu-container.fixed {
width:83%;
height:0;
background-color:transparent;
border-bottom:transparent 1px solid;
position:fixed;
display:block;
top:22%;
padding-left:25%;
}
.list-table .list-table-header .header-title.score,.list-table .list-table-header .header-title.retail {
width:65px;
}
.list-table .list-table-header .header-title.progress,.list-table .list-table-header .header-title.chapters,.list-table .list-table-header .header-title.volumes {
width:90px;
}
.list-table .list-table-header .header-title.rated,.list-table .list-table-header .header-title.priority {
width:70px;
}
.list-table .list-table-data .data.title .link,.list-table .list-table-data .data.score .link {
font-size:1.1em;
font-weight:700;
}
|
