Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- Endless Summer Layout by Cateinya
- Thanks to Doomcat55 (covers generator), BurntJelly (genres, synopsis generator), and Shishio-kun (edits).
- */
- /* GENERATED STUFF */
- /* generated cover */
- @import url(https://malcat-gen.appspot.com/series?preset=dataimagelinkbefore);
- /* generated informations (copy your generated CSS below) */
- /* COVER AREA
- The area taken up by covers.
- */
- .list-block {
- /* variables used in calc (explicit names) */
- --height-img: 250px !important;
- --width-img: 178px !important;
- }
- /* HD COVER SIZE
- The size of covers seen.
- */
- .data.image a:before{
- background-size: cover !important;
- height: 250px !important;
- width: 178px !important;
- background-position: center center !important;
- }
- /* LOW RES COVER SIZE
- You only see this if the import for high res covers goes down.
- */
- a img{
- background-size: cover !important;
- height: 250px !important;
- width: 178px !important;;
- }
- /* CHARACTER */
- body:after{
- background-color: transparent !important;
- background-image: url(https://3.bp.blogspot.com/-SxQ8BBrFHeQ/WkL8e1MnR-I/AAAAAAAANCk/iQk0U8wsTW85Iwjw-igbfH9y_bSCfAm1wCLcBGAs/s1600/Darling%2Bin%2Bthe%2BFranxx%2BZero%2BTwo%2BAW%2BPilotsuit%2BYabuki%2BRender.png) !important;
- background-position: center top;
- background-repeat: no-repeat;
- background-size: contain;
- content: "";
- height: 150%;
- left: -60%;
- position: fixed;
- top: -10%;
- width: 150%;
- z-index: -1;
- }
- /* CHARACTER 2 */
- .header .header-title:after{
- background-color: transparent !important;
- background-image: url(https://orig00.deviantart.net/b163/f/2014/226/2/3/touka_kirishima__tokyo_ghoul____render_by_azizkeybackspace-d7v7hnn.png) !important;
- background-position: center top;
- background-repeat: no-repeat;
- background-size: contain;
- content: "";
- height: 100%;
- right: -38%;
- position: fixed;
- top: 0;
- width: 100%;
- z-index: -1;
- }
- /* BACKGROUND */
- body:before {
- background-color: #9492C8;
- background-image: url(http://i.imgur.com/7JzFw1n.jpg);
- background-position: center;
- background-repeat: no-repeat;
- background-size: cover;
- content: "";
- filter: blur(1px);
- height: 100%;
- left: 0;
- position: fixed;
- top: 0;
- width: 100%;
- will-change: transform;
- z-index: -2;
- }
- /* LINKS */
- a {
- color: black;
- text-decoration: none !important;
- }
- /* HEADER */
- .header {
- margin-bottom: 200px;
- }
- .header .header-title {
- background-image: url("/img/pc/ownlist/logo_mal.png");
- }
- .header .header-menu .btn-menu,
- .header .header-menu .btn-menu a,
- .header .header-menu .header-info,
- .header .header-menu .header-info a {
- color: white !important;
- }
- .header .header-menu .list-menu {
- /* link to other list */
- background-color: rgba(0,0,0,0.5);
- border: none;
- border-radius: 25px;
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
- }
- .header .header-menu .list-menu:hover {
- background-color: rgba(0,0,0,0.7);
- }
- .header .header-menu .list-menu .icon-menu {
- background: transparent !important;
- color: white !important;
- }
- /* LIST MENU */
- @media screen and (max-width: 1060px) {
- /* absolute position for small screen */
- .list-menu-float {
- left: 530px !important;
- }
- }
- .list-menu-float {
- background: rgba(0,0,0,0.5);
- border: none;
- border-radius: 25px;
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
- height:50px;
- left: 50%;
- margin-left: -25px;
- margin-top: 30px;
- opacity: 0.5;
- position: absolute;
- top: 0;
- transition: all 0.2s ease 0s;
- width: 50px;
- }
- body[data-owner="1"] .list-menu-float:hover {
- /* larger when viewer is owner (setting buttons) */
- margin-left: -225px;
- width: 450px;
- }
- .list-menu-float:hover {
- margin-left: -175px;
- opacity: 1;
- width: 350px;
- }
- .list-menu-float:before {
- /* used for wave effect on hover */
- border-radius: 50%;
- box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 0.75);
- content: "";
- height: 50px;
- margin-left: -25px;
- opacity: 0;
- position: absolute;
- top: 0;
- transition: all 0.2s;
- width: 50px;
- }
- .list-menu-float::after {
- /* fix for hover effect when picture becomes smaller */
- border-radius: 50%;
- content: "";
- height: 75px;
- margin-left: -37.5px;
- position: absolute;
- width: 75px;
- margin-top: -12.5px;
- }
- .list-menu-float:hover:before {
- animation-name: buttonAnimation;
- animation-duration: 0.2s;
- animation-timing-function: linear;
- animation-iteration-count: 1;
- }
- @keyframes buttonAnimation {
- /* wave animation */
- 0% { opacity:1; transform:scale(1)}
- 100% { opacity:0; transform:scale(2); }
- }
- .list-menu-float .icon-menu.profile {
- transform: scale(1.5) translate3d(0px,0px,0px);
- -moz-backface-visibility: hidden; /* with translate3d above, fix for firefox shaking behaviour */
- z-index: 2;
- }
- .list-menu-float:hover .icon-menu.profile {
- transform:scale(1) translate3d(0px,0px,0px);
- -moz-backface-visibility: hidden;
- }
- .list-menu-float .icon-menu,
- .list-menu-float form {
- /* All list menu buttons */
- border-radius: 25px;
- display: inline-block;
- left: 50%;
- margin-left: -25px;
- position: absolute;
- top: 0;
- transition: all 0.2s ease 0s;
- width: 50px !important;
- z-index: 1;
- }
- .list-menu-float .icon-menu:not(.profile),
- .list-menu-float form {
- background: transparent !important;
- }
- .list-menu-float .icon-menu:not(.profile):hover,
- .list-menu-float form:hover {
- background: rgba(0,0,0,0.5) !important;
- }
- /* buttons positions */
- .list-menu-float:hover .icon-menu:nth-child(2) { margin-left: -175px; }
- .list-menu-float:hover .icon-menu:nth-child(3) { margin-left: -125px; }
- .list-menu-float:hover .icon-menu:nth-child(4) { margin-left: -75px; }
- .list-menu-float:hover .icon-menu:nth-child(5) { margin-left: 25px; }
- .list-menu-float:hover .icon-menu:nth-child(6),
- .list-menu-float:hover form:nth-child(6) { margin-left: 75px; }
- .list-menu-float:hover form:nth-child(7) { margin-left: 125px; }
- .list-menu-float:hover .icon-menu:nth-child(8) { margin-left: 175px; }
- .list-menu-float .icon-menu .text {
- /* text display on button hover */
- color: black;
- left: 50%;
- margin-left: -50px;
- margin-top: 55px;
- pointer-events: none;
- position: absolute;
- top: 0;
- transition: none;
- width: 100px !important;
- }
- .icon{
- /* All list menu icons */
- fill: white !important;
- }
- .icon-logout {
- left: 15px !important;
- top: 16px !important;
- }
- .list-menu-float .icon-menu.setting .text {
- /* setting button (owner only) */
- height: 110px !important;
- margin-top: 45px;
- overflow: visible;
- padding-top: 10px;
- visibility: hidden;
- width: 115px !important;
- }
- .list-menu-float .icon-menu.setting:hover .text {
- pointer-events: all;
- visibility: visible;
- }
- .list-menu-float .icon-menu.setting .text a {
- background: rgba(0,0,0,0.5) !important;
- border: none !important;
- border-radius: 25px;
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
- }
- .list-menu-float .icon-menu.setting .text a:first-child { top: 10px !important; }
- .list-menu-float .icon-menu.setting .text a:last-child { top: 65px !important; }
- .list-menu-float .icon-menu.setting .text a:hover {
- background: rgba(0,0,0,0.7) !important;
- }
- /* LIST CONTAINER */
- #list-container {
- background-color: transparent !important;
- border: none;
- }
- /* IMAGE BLOCK */
- .cover-block {
- display: none;
- }
- /* STATUS MENU */
- #status-menu {
- /* box with overflow:hidden for semicircle */
- background: transparent;
- border-bottom: none;
- height: 16em;
- left: 50%;
- margin-left: -16em;
- margin-top: -16em;
- overflow: hidden;
- pointer-events: none;
- position: absolute;
- width: 32em;
- }
- #status-menu:after {
- /* button used to display menu on hover */
- background: rgba(0,0,0,0.5);
- border-radius: 60px 60px 0 0;
- bottom: 0;
- color: white;
- content:"\f0c9";
- font-family: FontAwesome;
- font-size: 1.5em;
- height: 30px;
- left: 50%;
- line-height: 35px;
- margin-left: -30px;
- pointer-events: all;
- position:absolute;
- text-align: center;
- transition-delay: 0.35s;
- width: 60px;
- }
- #status-menu:hover:after {
- background: rgba(0,0,0,0.9);
- transition-delay: 0s;
- }
- .status-menu {
- /* category menu */
- background: rgba(0,0,0,0.5) !important;
- border-radius: 50%;
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
- height: 26em;
- left: 50%;
- margin-left: -13em !important;
- margin-top: -13em !important;
- pointer-events: all;
- position: absolute;
- top: 100%;
- transform: scale(0.1);
- transition: all .3s ease;
- visibility: hidden;
- width: 26em;
- }
- #status-menu:hover .status-menu {
- transform: scale(1);
- visibility: visible;
- }
- .status-menu .status-button {
- /* category button */
- color: rgba(0, 0, 0, 0) !important;
- position: absolute !important;
- font-size: 1.5em !important;
- width: 10em;
- height: 10em;
- transform-origin: 100% 100%;
- overflow: hidden;
- left: 0;
- margin-top: -1.3em !important;
- margin-left: -1.31em !important;
- padding: 0 !important;
- pointer-events: none;
- }
- .status-menu .status-button:before {
- /* category text on hover */
- bottom: -8.25em !important;
- color: black;
- height: 15.5em !important;
- left: 1.19em !important;
- margin-bottom: 1.2em;
- position: absolute !important;
- transform: skew(-60deg) rotate(-75deg) scale(1);
- visibility: hidden;
- width: 15.5em !important;
- }
- .status-menu .status-button:hover:before {
- visibility: visible;
- }
- .status-menu .status-button:after {
- /* category icon */
- background: transparent !important;
- border-radius: 50%;
- bottom: -7.25em !important;
- color: white;
- font-family: FontAwesome;
- font-size: 1.18em;
- height: 14.5em !important;
- left: 1.19em !important;
- line-height: 5em;
- opacity: 1 !important;
- pointer-events: all;
- transform: skew(-60deg) rotate(-75deg) scale(1);
- transition: none !important;
- width: 14.5em !important;
- }
- .status-menu .status-button.on:after,
- .status-menu .status-button:hover:after {
- background: rgba(0,0,0,0.5) !important;
- }
- .status-menu .status-button:first-child {transform: rotate(0deg) skew(60deg);}
- .status-menu .status-button:nth-child(2) {transform: rotate(30deg) skew(60deg);}
- .status-menu .status-button:nth-child(3) {transform: rotate(60deg) skew(60deg)}
- .status-menu .status-button:nth-child(4) {transform: rotate(90deg) skew(60deg);}
- .status-menu .status-button:nth-child(5) {transform: rotate(120deg) skew(60deg);}
- .status-menu .status-button:nth-child(6) {transform: rotate(150deg) skew(60deg);}
- .status-menu .status-button:first-child:before { content: "All entries"; }
- .status-menu .status-button:first-child:after { content: "\f03a"; }
- .status-menu .status-button:nth-child(2):before { content: "Ongoing"; }
- .status-menu .status-button:nth-child(2):after { content: "\f06e"; }
- .status-menu .status-button:nth-child(3):before { content: "Completed"; }
- .status-menu .status-button:nth-child(3):after { content: "\f00c"; }
- .status-menu .status-button:nth-child(4):before { content: "On hold"; }
- .status-menu .status-button:nth-child(4):after { content: "\f253"; }
- .status-menu .status-button:nth-child(5):before { content: "Dropped"; }
- .status-menu .status-button:nth-child(5):after { content: "\f00d"; }
- .status-menu .status-button:nth-child(6):before { content: "Planned"; }
- .status-menu .status-button:nth-child(6):after { content: "\f073"; }
- /* SEARCH */
- .status-menu-container .search-container {
- display: none;
- }
- /* STATUS TITLE */
- .list-unit .list-status-title {
- background: rgba(0,0,0,0.5);
- border-radius: 70px;
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
- font-size: 2em;
- padding: 40px 0 40px 0;
- z-index: 1;
- }
- .list-unit .list-status-title .text,
- .list-unit .list-status-title .stats a {
- color: white !important;
- }
- /* STATS */
- .stats {
- line-height: 2em !important;
- }
- .list-unit .list-stats {
- /* Stat bar */
- background-color: transparent;
- color: white !important;
- height: 30px !important;
- margin-top: -35px !important;
- position: absolute;
- z-index: 1;
- }
- /* FILTER */
- #advanced-options {
- /* fix for window out of screen*/
- position: fixed;
- }
- /* LIST TABLE */
- .status-menu-container.fixed + div.list-block {
- margin-top: 0px !important;
- }
- .list-block {
- /* variables used in calc (explicit names) */
- --height-img: 250px;
- --height-info: 130px;
- --margin-left-bg-std: calc( var(--padding-h-img) + var(--width-img) + 10px );
- --margin-left-bg-last-in-row: calc(-1 * ( var(--width-info) + var(--padding-h-img) ) + 10px );
- --padding-h-img: 13px;
- --padding-v-img: 7px;
- --width-img: 178px;
- --width-info: 400px;
- padding-bottom: 200px;
- margin: 0 auto;
- }
- .list-table {
- border: none;
- }
- /* Sort row */
- .list-table > tbody:first-child {
- background-color: transparent;
- display: block;
- margin-bottom: 50px;
- margin-top: 50px;
- }
- .list-table .list-table-header {
- display: table;
- text-align: center;
- width: 100%;
- }
- .list-table .list-table-header .header-title:not(.title):not(.score):not(.type):not(.progress):not(.chapters):not(.volumes):not(.rated) {
- /* hide not sortable headers */
- display: none;
- }
- .list-table .list-table-header .header-title {
- background: transparent;
- border-bottom: none;
- display: inline-block;
- margin: 0 20px 0 20px;
- }
- .list-table .list-table-header .header-title .link {
- background: rgba(0,0,0,0.5);
- border-radius: 20px;
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
- color: white !important;
- padding: 10px !important;
- text-align: center;
- transition: all 0.2s ease 0s !important;
- }
- .list-table .list-table-header .header-title .link:hover {
- background: rgba(0,0,0,0.7);
- }
- .list-table .list-table-header .header-title .link .sort-icon {
- color: white;
- }
- /* Data rows */
- .list-table tbody.list-item {
- background: transparent;
- border: none;
- float: left;
- margin: var(--padding-v-img) var(--padding-h-img) var(--padding-v-img) var(--padding-h-img);
- width: var(--width-img);
- }
- .list-table .list-table-data .data a,
- .list-table .list-table-data a:hover:not(.edit-disabled) {
- /* remove color conflicts with default themes */
- color: unset !important;
- }
- .data, .more-info {
- --margin-left-data-std: calc( var(--padding-h-img) + var(--margin-left-data-adjusted) );
- --margin-left-data-last-in-row: calc(-1 * ( var(--width-img) + var(--width-info) + var(--padding-h-img) ) + var(--margin-left-data-adjusted) );
- --margin-left-data-adjusted: 0px;
- border: none !important;
- color: black;
- }
- .data:not(.image),
- .more-info {
- /* All data cells hidden*/
- position: absolute;
- visibility: hidden;
- }
- .list-item:hover .data.title,
- .list-item:hover .data.title:after,
- .list-item:hover .data.score,
- .list-item:hover .data.progress,
- .list-item:hover .data.chapter,
- .list-item:hover .data.volume,
- .list-item:hover .more-info {
- /* visible when cover hovered */
- visibility: visible;
- }
- .data.status {
- display: none !important;
- }
- /* categories colors */
- .data.status.watching ~ .data:nth-of-type(n+4):first-letter,
- .data.status.watching ~ .data.score .link,
- .data.status.watching ~ .data.progress .link,
- .data.status.reading ~ .data:nth-of-type(n+4):first-letter,
- .data.status.reading ~ .data.score .link,
- .data.status.reading ~ .data.chapter .link,
- .data.status.reading ~ .data.volume .link {
- color: #B1C425 !important;
- font-weight: bold;
- }
- .data.status.watching ~ .data.title .link,
- .data.status.reading ~ .data.title .link {
- background: #B1C425;
- border-bottom: 15px solid #B1C425;
- }
- .data.status.watching ~ .data.title .link:before,
- .data.status.reading ~ .data.title .link:before {
- border-bottom-color: #697700;
- border-right-color: #697700;
- }
- .data.status.watching ~ .data.title .link:after,
- .data.status.reading ~ .data.title .link:after {
- border-right-color: #697700;
- border-top-color: #697700;
- }
- .data.status.completed ~ .data:nth-of-type(n+5):first-letter,
- .data.status.completed ~ .data.score .link,
- .data.status.completed ~ .data.progress .link,
- .data.status.completed ~ .data.progress span:first-child,
- .data.status.completed ~ .data.chapter .link,
- .data.status.completed ~ .data.chapter span:first-child,
- .data.status.completed ~ .data.volume .link,
- .data.status.completed ~ .data.volume span:first-child {
- color: #1BBCDB !important;
- font-weight: bold;
- }
- .data.status.completed ~ .data.title .link {
- background: #1BBCDB;
- border-bottom: 15px solid #1BBCDB;
- }
- .data.status.completed ~ .data.title .link:before {
- border-bottom-color: #027B91;
- border-right-color: #027B91;
- }
- .data.status.completed ~ .data.title .link:after {
- border-right-color: #027B91;
- border-top-color: #027B91;
- }
- .data.status.onhold ~ .data:nth-of-type(n+5):first-letter,
- .data.status.onhold ~ .data.score .link,
- .data.status.onhold ~ .data.progress .link,
- .data.status.onhold ~ .data.chapter .link,
- .data.status.onhold ~ .data.volume .link {
- color: #FA882D !important;
- font-weight: bold;
- }
- .data.status.onhold ~ .data.title .link {
- background: #FA882D;
- border-bottom: 15px solid #FA882D;
- }
- .data.status.onhold ~ .data.title .link:before {
- border-bottom-color: #AB4C00;
- border-right-color: #AB4C00;
- }
- .data.status.onhold ~ .data.title .link:after {
- border-right-color: #AB4C00;
- border-top-color: #AB4C00;
- }
- .data.status.dropped ~ .data:nth-of-type(n+5):first-letter,
- .data.status.dropped ~ .data.score .link,
- .data.status.dropped ~ .data.progress .link,
- .data.status.dropped ~ .data.chapter .link,
- .data.status.dropped ~ .data.volume .link {
- color: #B48A3D !important;
- font-weight: bold;
- }
- .data.status.dropped ~ .data.title .link {
- background: #B48A3D;
- border-bottom: 15px solid #B48A3D;
- }
- .data.status.dropped ~ .data.title .link:before {
- border-bottom-color: #654203;
- border-right-color: #654203;
- }
- .data.status.dropped ~ .data.title .link:after {
- border-right-color: #654203;
- border-top-color: #654203;
- }
- .data.status.plantowatch ~ .data:nth-of-type(n+5):first-letter,
- .data.status.plantowatch ~ .data.score .link,
- .data.status.plantowatch ~ .data.progress .link,
- .data.status.plantoread ~ .data:nth-of-type(n+5):first-letter,
- .data.status.plantoread ~ .data.score .link,
- .data.status.plantoread ~ .data.chapter .link,
- .data.status.plantoread ~ .data.volume .link {
- color: #FFD654 !important;
- font-weight: bold;
- }
- .data.status.plantowatch ~ .data.title .link,
- .data.status.plantoread ~ .data.title .link {
- background: #FFD654;
- border-bottom: 15px solid #FFD654;
- }
- .data.status.plantowatch ~ .data.title .link:before,
- .data.status.plantoread ~ .data.title .link:before {
- border-bottom-color: #BE9511;
- border-right-color: #BE9511;
- }
- .data.status.plantowatch ~ .data.title .link:after,
- .data.status.plantoread ~ .data.title .link:after {
- border-right-color: #BE9511;
- border-top-color: #BE9511;
- }
- /* not displayed data */
- .data.number,
- .data.image .image,
- .data.title .icon-watch,
- .data.progress .icon-add-episode,
- .data.chapter .icon-add-chapter,
- .data.volume .icon-add-volume,
- .list-table .list-table-data .tags .edit,
- .data.started,
- .data.finished,
- .data.days,
- .data.airing-started,
- .data.airing-finished,
- .data.storage,
- .data.retail,
- .data.priority {
- display: none !important;
- }
- /* default position */
- .data:not(.title):not(.status):not(.score):not(.progress):not(.chapter):not(.volume) {
- margin-left: var(--margin-left-data-std);
- z-index: 1;
- }
- /* information on the left (end of line) */
- .list-item:nth-of-type(5n) .data:not(.title):not(.status):not(.score):not(.progress):not(.chapter):not(.volume),
- .list-item:nth-of-type(5n + 1) .data:not(.title):not(.status):not(.score):not(.progress):not(.chapter):not(.volume) {
- margin-left: var(--margin-left-data-last-in-row);
- }
- .data.image {
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
- height: var(--height-img);
- overflow: hidden;
- padding: 0 !important;
- pointer-events: none;
- width: var(--width-img);
- }
- .data.image a {
- height: 100%;
- left: 0px;
- position: relative;
- top: 0px;
- width: 100%;
- }
- .data.image a:before {
- /* anime cover (generated) */
- background-position: center center;
- background-size: cover;
- content:"";
- display: block;
- height: 100%;
- transition: all 0.2s;
- width: 100%;
- }
- .list-item:hover .data.image a:before {
- transform: scale(1.2);
- }
- .data.title {
- height: 90px;
- margin-left: calc(var(--width-img) * -1 - 10px);
- margin-top: calc(var(--height-img) - 90px);
- padding: 0 !important;
- width: calc(var(--width-img) + 10px);
- }
- .data.title .link {
- /* Anime title */
- background: #FD3E48;
- border-bottom: 15px solid #FD3E48;
- bottom: 0;
- box-sizing: border-box;
- color: black;
- font-size: 1.2em;
- font-weight: normal !important;
- margin-bottom: 0;
- max-height: 85px;
- padding: 2px 3px 2px 3px !important;
- position: absolute;
- text-align: center !important;
- transition: margin-bottom 0.2s ease 0s;
- width: 100%;
- }
- .data.title .link:before {
- border: 5px solid;
- border-top-color: transparent;
- border-right-color: #B71C1C;
- border-bottom-color: #B71C1C;
- border-left-color: transparent;
- content: "";
- height: 0;
- left: 0;
- width: 0;
- margin-top: -10px;
- position: absolute;
- top: 0;
- }
- .data.title .link:after {
- border: 5px solid;
- bottom: 0;
- border-top-color: #B71C1C;
- border-right-color: #B71C1C;
- border-bottom-color: transparent;
- border-left-color: transparent;
- content: "";
- height: 0;
- left: 0;
- margin-bottom: -25px;
- width: 0;
- position: absolute;
- visibility: hidden;
- }
- .data.title:hover .link,
- .data.title:hover .rewatching,
- .data.title:hover .content-status {
- margin-bottom: 20px;
- }
- .data.title:hover .link:before {
- visibility: hidden;
- }
- .data.title:hover .link:after {
- visibility: visible;
- transition-delay: 0.1s;
- }
- .data.title:after {
- bottom: 0;
- content: "\f0c9";
- color: white;
- font-family: FontAwesome;
- height: 20px;
- line-height: 20px;
- pointer-events: none;
- position: absolute;
- right: 0;
- text-align: center;
- transition: margin-bottom 0.2s ease 0s, transform 0.2s ease 0s;
- width: 20px;
- }
- .data.title:hover:after {
- margin-bottom: 20px;
- transform: rotateZ(180deg) scale(1.5);
- }
- .data.title:hover ~ .data {
- visibility: visible !important;
- }
- .data.title .rewatching,
- .data.title .content-status {
- bottom: 0;
- color: black !important;
- font-size: 1em !important;
- position: absolute;
- text-align: center !important;
- transition: margin-bottom 0.2s ease 0s;
- width: 100%;
- }
- .add-edit-more {
- background-color: rgba(0,0,0,0.7);
- bottom: 0;
- color: white;
- display: block;
- height: 0px;
- margin-right: 0 !important;
- overflow: hidden;
- position: absolute;
- right: 0;
- text-align: center;
- transition: all 0.2s ease 0s;
- width: var(--width-img);
- }
- .data.title:hover .add-edit-more {
- height: 20px;
- }
- .add-edit-more a {
- color: white;
- }
- .data.score {
- background: #333333;
- border-radius: 50%;
- font-size: 1.5em;
- height: 35px;
- line-height: 35px;
- margin-left: -40px;
- margin-top: 5px;
- padding: 0 !important;
- text-align: center !important;
- width: 35px;
- }
- .data.score .edit-transition {
- background: rgba(0,0,0,0.7);
- color: white;
- float: left;
- margin-top:7px;
- width: 35px;
- }
- .data.type:before {
- content:"Type:";
- }
- .data.type {
- --margin-left-data-adjusted: 200px;
- margin-top: 60px;
- z-index: 2 !important;
- }
- /* different place for manga version */
- body.manga .data.type {
- --margin-left-data-adjusted: 10px;
- margin-top: 65px;
- }
- .data.progress,
- .data.chapter,
- .data.volume {
- font-size: 1.5em;
- margin-left: calc( -1 * var(--width-img) + 5px );
- margin-top: 5px;
- padding: 0 !important;
- text-align: center !important;
- }
- .data.volume {
- margin-top: 45px;
- }
- .data.progress span:first-child,
- .data.chapter span:first-child,
- .data.volume span:first-child {
- background: #333333;
- border-radius: 50%;
- float: left;
- height: 35px;
- line-height: 35px;
- overflow: hidden;
- position: relative;
- width: 35px;
- }
- .data.status:not(.completed) ~ .data.progress span:first-child,
- .data.status:not(.completed) ~ .data.chapter span:first-child,
- .data.status:not(.completed) ~ .data.volume span:first-child {
- font-size: 0px;
- }
- .data.progress span:first-child a,
- .data.chapter span:first-child a,
- .data.volume span:first-child a {
- display: table;
- font-size: 16.5px;
- width: 100%;
- }
- .data.progress span:first-child input,
- .data.chapter span:first-child input,
- .data.volume span:first-child input {
- background: transparent;
- border: none;
- color: white;
- float: left;
- margin-top:7px;
- text-align: center;
- width: 35px;
- }
- .data.progress span:nth-of-type(2),
- .data.chapter span:nth-of-type(2),
- .data.volume span:nth-of-type(2) {
- background: #BBBBBB;
- border-radius: 0 18px 18px 0;
- float: left;
- line-height: 35px;
- margin-left: -17px;
- min-width: 15px;
- padding-left: 19px;
- padding-right: 5px;
- }
- .data.tags {
- /* white background behind informations */
- background-color: rgba(255,255,255,0.9);
- border-radius: 5px 5px 0px 0px;
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
- height: auto;
- min-height: 128px;
- padding: 0px !important;
- position: absolute;
- visibility: hidden;
- width: var(--width-info);
- }
- .data.tags > div {
- margin-bottom: 28px;
- margin-top: 100px;
- padding: 0px 5px 0px 5px;
- }
- .data.tags > div > span:first-child:before {
- border-bottom: 1px solid black;
- content: "Tags:";
- display: block;
- left: 0;
- margin-bottom: 5px;
- padding: 5px;
- text-align: left;
- width: calc(var(--width-info) - 20px);
- z-index: 1;
- }
- .data.tags:before {
- /* anime title (generated) */
- content: "Anime information";
- font-size: 1.5em;
- height: 30px;
- left: 0;
- overflow: hidden;
- position: absolute;
- padding: 5px;
- width: calc(var(--width-info) - 10px);
- }
- .data.tags:after {
- /* anime genres (generated) */
- border-bottom: 1px solid black;
- content:"";
- left: 0;
- margin-top: 35px;
- overflow: hidden;
- padding: 5px 5px 3px 5px;
- position: absolute;
- text-overflow: ellipsis;
- top: 0;
- white-space: nowrap;
- width: calc(var(--width-info) - 10px);
- }
- .data.tags > div:before {
- border-bottom: 1px solid black;
- content: "Synopsis:";
- left: 0;
- position: absolute;
- margin-left: 5px;
- margin-top: -28px;
- padding: 5px;
- text-align: left;
- top: 100%;
- width: calc(var(--width-info) - 20px);
- z-index: 1;
- }
- .data.tags > div:after {
- /* anime synopsis (generated) */
- background-color: rgba(255,255,255,0.9);
- border-radius: 0px 0px 5px 5px;
- box-shadow: 0 5px 4px 0 rgba(0, 0, 0, 0.2), 0 20px 5px 0 rgba(0, 0, 0, 0.19);
- content: "Not updated... View it directly on anime page.";
- left: 0;
- line-height: 1.2em;
- padding: 5px 5px 10px 5px;
- position: absolute;
- text-align: justify;
- top: 100%;
- width: calc(var(--width-info) - 10px);
- }
- .data.rated:before {
- content:"Rated:";
- }
- .data.rated {
- --margin-left-data-adjusted: 300px;
- margin-top: 60px;
- }
- .data.season:before {
- content: "Premiered:";
- }
- .data.season {
- --margin-left-data-adjusted: 10px;
- margin-top: 60px;
- }
- .data.studio::before {
- content: "Studios:";
- }
- .data.studio {
- --margin-left-data-adjusted: 10px;
- margin-top: 80px;
- max-width: 190px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- .data.licensor::before {
- content: "Licensors:";
- }
- .data.licensor {
- --margin-left-data-adjusted: 200px;
- margin-top: 80px;
- max-width: 190px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- .data.magazine::before {
- content: "Serialized:";
- }
- .data.magazine {
- --margin-left-data-adjusted: 120px;
- margin-top: 65px;
- max-width: 270px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- .more-info {
- background-color: rgba(0,0,0,0.7);
- color: white !important;
- height: 150px;
- margin-left: 5px;
- margin-top: calc(-1 * var(--height-img) + 5px);
- overflow: auto;
- width: calc(var(--width-img) - 10px );
- }
- .more-info a {
- color: white !important;
- }
- /* FOOTER */
- #footer-block {
- background: transparent;
- }
- #copyright {
- color: white;
- }
- #copyright:after {
- /* Custom copyright text */
- content: "Endless Summer Layout by Cateinya.";
- }
- /* OTHER */
- /* fix for browsers that do not support variables (IE I'm looking at you) */
- /* Note : those browsers seems to have dificulties with transform too (used in category menu). Fix not found yet */
- @supports not (margin-left:var(--checkvar)) {
- .list-table tbody.list-item {
- margin: 7px 13px 7px 13px;
- width: 178px;
- }
- .data:not(.title):not(.status):not(.score):not(.progress):not(.chapter):not(.volume) {
- margin-left: 13px;
- }
- .list-item:nth-of-type(5n) .data:not(.title):not(.status):not(.score):not(.progress):not(.chapter):not(.volume),
- .list-item:nth-of-type(5n + 1) .data:not(.title):not(.status):not(.score):not(.progress):not(.chapter):not(.volume) {
- margin-left: -591px;
- }
- .data.image {
- height: 250px;
- width: 178px;
- }
- .data.title {
- margin-left: -188px;
- margin-top: 160px;
- width: 188px;
- }
- .add-edit-more {
- width: 178px;
- }
- .data.type {
- margin-left: 213px !important;
- }
- .list-item:nth-of-type(5n) .data.type,
- .list-item:nth-of-type(5n + 1) .data.type {
- margin-left: -391px !important;
- }
- body.manga .data.type {
- margin-left: 23px !important;
- }
- body.manga .list-item:nth-of-type(5n) .data.type,
- body.manga .list-item:nth-of-type(5n + 1) .data.type {
- margin-left: -581px !important;
- }
- .data.progress,
- .data.chapter,
- .data.volume {
- margin-left: -173px;
- }
- .data.tags {
- margin-left: 201px;
- width: 400px;
- }
- .list-item:nth-of-type(5n) .data.tags,
- .list-item:nth-of-type(5n + 1) .data.tags {
- margin-left: -403px;
- }
- .data.tags:before {
- width: 390px;
- }
- .data.tags > div > span:first-child:before {
- width: 380px;
- }
- .data.tags:after {
- width: 390px;
- }
- .data.tags > div:before {
- width: 380px;
- }
- .data.tags > div:after {
- width: 390px;
- }
- .data.rated {
- margin-left: 313px !important;
- }
- .list-item:nth-of-type(5n) .data.rated,
- .list-item:nth-of-type(5n + 1) .data.rated {
- margin-left: -291px !important;
- }
- .data.season {
- margin-left: 23px !important;
- }
- .list-item:nth-of-type(5n) .data.season,
- .list-item:nth-of-type(5n + 1) .data.season {
- margin-left: -581px !important;
- }
- .data.studio {
- margin-left: 23px !important;
- }
- .list-item:nth-of-type(5n) .data.studio,
- .list-item:nth-of-type(5n + 1) .data.studio {
- margin-left: -581px !important;
- }
- .data.licensor {
- margin-left: 213px !important;
- }
- .list-item:nth-of-type(5n) .data.licensor,
- .list-item:nth-of-type(5n + 1) .data.licensor {
- margin-left: -391px !important;
- }
- .data.magazine {
- margin-left: 133px !important;
- }
- .list-item:nth-of-type(5n) .data.magazine,
- .list-item:nth-of-type(5n + 1) .data.magazine {
- margin-left: -471px !important;
- }
- .more-info {
- margin-top: -245px;
- width: 168px;
- }
- .list-table:before {
- background: rgba(0,0,0,0.5);
- border-radius: 30px;
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
- color: white;
- content: "It seems like your browser does not support some of the features of my layout. This may result in a bad experience while browsing my list ! Try viewing this page with another browser (Chrome or Firefox are fine).";
- display: block;
- font-size: 1.5em;
- margin-top: 100px;
- padding: 10px;
- text-align: center;
- }
- }
- /* shishio changes*/
- .data.image .image{
- display: inherit !important;
- background-repeat: no-repeat !important;
- }
- a img{
- display: block !important;
- border: none !important;
- background-repeat: no-repeat !important;
- }
- .data.image a:before{
- display: block;
- content: "";
- position: absolute;
- background-repeat: no-repeat !important;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement