New
Mar 24, 2019 4:40 PM
#201
TutBanana said: Shishio-kun said: OK just add this to the top @import "https://malcat-gen.appspot.com/headers?template=body[data-query*='"status":7'] .list-item:nth-child($index){clear:left}body[data-query*='"status":7'] .list-item:nth-child($index):before{content:'$content'}"; and add this .list-item:before { display: inline-block; width: 1325px; background: black; height: 10px; border-radius: 27px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); margin-left: calc(-1 * var(--padding-h-img)); margin-bottom: -54px; left: -150px; top: -55px; position: relative; color: #fff; font: bold 20px/54px 'Helvetica neue', 'Helvetica', 'lucida grande', 'tahoma', 'verdana', 'arial', sans-serif; text-transform: uppercase; transform-origin: top left; } to the bottom and let us know if it works It doesn't work :( Oh those codes are made for the Endless Summer layout, not the default layout you're using now. Are you done using the Endless Summer? |
Mar 25, 2019 6:32 AM
#202
Shishio-kun said: TutBanana said: Shishio-kun said: OK just add this to the top @import "https://malcat-gen.appspot.com/headers?template=body[data-query*='"status":7'] .list-item:nth-child($index){clear:left}body[data-query*='"status":7'] .list-item:nth-child($index):before{content:'$content'}"; and add this .list-item:before { display: inline-block; width: 1325px; background: black; height: 10px; border-radius: 27px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); margin-left: calc(-1 * var(--padding-h-img)); margin-bottom: -54px; left: -150px; top: -55px; position: relative; color: #fff; font: bold 20px/54px 'Helvetica neue', 'Helvetica', 'lucida grande', 'tahoma', 'verdana', 'arial', sans-serif; text-transform: uppercase; transform-origin: top left; } to the bottom and let us know if it works It doesn't work :( Oh those codes are made for the Endless Summer layout, not the default layout you're using now. Are you done using the Endless Summer? I have default layout but I also build the Endless Summer layout https://i.gyazo.com/c2a4f957e9a89c4bc1a46d10610c87d2.jpg Edit: I changed now |
TutBananaMar 25, 2019 1:26 PM
Mar 25, 2019 4:08 PM
#203
TutBanana said: Shishio-kun said: TutBanana said: Shishio-kun said: OK just add this to the top @import "https://malcat-gen.appspot.com/headers?template=body[data-query*='"status":7'] .list-item:nth-child($index){clear:left}body[data-query*='"status":7'] .list-item:nth-child($index):before{content:'$content'}"; and add this .list-item:before { display: inline-block; width: 1325px; background: black; height: 10px; border-radius: 27px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); margin-left: calc(-1 * var(--padding-h-img)); margin-bottom: -54px; left: -150px; top: -55px; position: relative; color: #fff; font: bold 20px/54px 'Helvetica neue', 'Helvetica', 'lucida grande', 'tahoma', 'verdana', 'arial', sans-serif; text-transform: uppercase; transform-origin: top left; } to the bottom and let us know if it works It doesn't work :( Oh those codes are made for the Endless Summer layout, not the default layout you're using now. Are you done using the Endless Summer? I have default layout but I also build the Endless Summer layout https://i.gyazo.com/c2a4f957e9a89c4bc1a46d10610c87d2.jpg Edit: I changed now ok, try this code. I tested it on my layout and it seems to work @\import "https://malcat-gen.appspot.com/headers?template=body[data-query*='\"status\":7'] .list-item:nth-child($index){clear:left}body[data-query*='\"status\":7'] .list-item:nth-child($index):before{content:'$content'}"; @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkbefore"; .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;; } /* LINKS */ a { color: black; text-decoration: none !important; } /* HEADER */ .header { margin-bottom: 200px; } .header .header-title { background-image: url(); } .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; } .list-item:before { display: inline-block; width: 1325px; background: black; height: 10px; border-radius: 27px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); margin-left: calc(-1 * var(--padding-h-img)); margin-bottom: -54px; left: -150px; top: -5px; position: relative; color: #fff; font: bold 20px/54px 'Helvetica neue', 'Helvetica', 'lucida grande', 'tahoma', 'verdana', 'arial', sans-serif; text-transform: uppercase; transform-origin: top left; } |
Shishio-kunMar 25, 2019 4:13 PM
Mar 25, 2019 5:35 PM
#204
Shishio-kun said: TutBanana said: Shishio-kun said: TutBanana said: Shishio-kun said: OK just add this to the top @import "https://malcat-gen.appspot.com/headers?template=body[data-query*='"status":7'] .list-item:nth-child($index){clear:left}body[data-query*='"status":7'] .list-item:nth-child($index):before{content:'$content'}"; and add this .list-item:before { display: inline-block; width: 1325px; background: black; height: 10px; border-radius: 27px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); margin-left: calc(-1 * var(--padding-h-img)); margin-bottom: -54px; left: -150px; top: -55px; position: relative; color: #fff; font: bold 20px/54px 'Helvetica neue', 'Helvetica', 'lucida grande', 'tahoma', 'verdana', 'arial', sans-serif; text-transform: uppercase; transform-origin: top left; } to the bottom and let us know if it works It doesn't work :( Oh those codes are made for the Endless Summer layout, not the default layout you're using now. Are you done using the Endless Summer? I have default layout but I also build the Endless Summer layout https://i.gyazo.com/c2a4f957e9a89c4bc1a46d10610c87d2.jpg Edit: I changed now ok, try this code. I tested it on my layout and it seems to work @\import "https://malcat-gen.appspot.com/headers?template=body[data-query*='\"status\":7'] .list-item:nth-child($index){clear:left}body[data-query*='\"status\":7'] .list-item:nth-child($index):before{content:'$content'}"; @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkbefore"; .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;; } /* LINKS */ a { color: black; text-decoration: none !important; } /* HEADER */ .header { margin-bottom: 200px; } .header .header-title { background-image: url(); } .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; } .list-item:before { display: inline-block; width: 1325px; background: black; height: 10px; border-radius: 27px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); margin-left: calc(-1 * var(--padding-h-img)); margin-bottom: -54px; left: -150px; top: -5px; position: relative; color: #fff; font: bold 20px/54px 'Helvetica neue', 'Helvetica', 'lucida grande', 'tahoma', 'verdana', 'arial', sans-serif; text-transform: uppercase; transform-origin: top left; } It works, but it doesn't seem compatible |
Mar 25, 2019 7:05 PM
#205
TutBanana said: Shishio-kun said: TutBanana said: Shishio-kun said: TutBanana said: Shishio-kun said: OK just add this to the top @import "https://malcat-gen.appspot.com/headers?template=body[data-query*='"status":7'] .list-item:nth-child($index){clear:left}body[data-query*='"status":7'] .list-item:nth-child($index):before{content:'$content'}"; and add this .list-item:before { display: inline-block; width: 1325px; background: black; height: 10px; border-radius: 27px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); margin-left: calc(-1 * var(--padding-h-img)); margin-bottom: -54px; left: -150px; top: -55px; position: relative; color: #fff; font: bold 20px/54px 'Helvetica neue', 'Helvetica', 'lucida grande', 'tahoma', 'verdana', 'arial', sans-serif; text-transform: uppercase; transform-origin: top left; } to the bottom and let us know if it works It doesn't work :( Oh those codes are made for the Endless Summer layout, not the default layout you're using now. Are you done using the Endless Summer? I have default layout but I also build the Endless Summer layout https://i.gyazo.com/c2a4f957e9a89c4bc1a46d10610c87d2.jpg Edit: I changed now ok, try this code. I tested it on my layout and it seems to work @\import "https://malcat-gen.appspot.com/headers?template=body[data-query*='\"status\":7'] .list-item:nth-child($index){clear:left}body[data-query*='\"status\":7'] .list-item:nth-child($index):before{content:'$content'}"; @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkbefore"; .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;; } /* LINKS */ a { color: black; text-decoration: none !important; } /* HEADER */ .header { margin-bottom: 200px; } .header .header-title { background-image: url(); } .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; } .list-item:before { display: inline-block; width: 1325px; background: black; height: 10px; border-radius: 27px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); margin-left: calc(-1 * var(--padding-h-img)); margin-bottom: -54px; left: -150px; top: -5px; position: relative; color: #fff; font: bold 20px/54px 'Helvetica neue', 'Helvetica', 'lucida grande', 'tahoma', 'verdana', 'arial', sans-serif; text-transform: uppercase; transform-origin: top left; } It works, but it doesn't seem compatible yes its only made for this layout :D |
Mar 25, 2019 7:34 PM
#206
Shishio-kun said: TutBanana said: Shishio-kun said: TutBanana said: Shishio-kun said: TutBanana said: Shishio-kun said: OK just add this to the top @import "https://malcat-gen.appspot.com/headers?template=body[data-query*='"status":7'] .list-item:nth-child($index){clear:left}body[data-query*='"status":7'] .list-item:nth-child($index):before{content:'$content'}"; and add this .list-item:before { display: inline-block; width: 1325px; background: black; height: 10px; border-radius: 27px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); margin-left: calc(-1 * var(--padding-h-img)); margin-bottom: -54px; left: -150px; top: -55px; position: relative; color: #fff; font: bold 20px/54px 'Helvetica neue', 'Helvetica', 'lucida grande', 'tahoma', 'verdana', 'arial', sans-serif; text-transform: uppercase; transform-origin: top left; } to the bottom and let us know if it works It doesn't work :( Oh those codes are made for the Endless Summer layout, not the default layout you're using now. Are you done using the Endless Summer? I have default layout but I also build the Endless Summer layout https://i.gyazo.com/c2a4f957e9a89c4bc1a46d10610c87d2.jpg Edit: I changed now ok, try this code. I tested it on my layout and it seems to work @\import "https://malcat-gen.appspot.com/headers?template=body[data-query*='\"status\":7'] .list-item:nth-child($index){clear:left}body[data-query*='\"status\":7'] .list-item:nth-child($index):before{content:'$content'}"; @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkbefore"; .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;; } /* LINKS */ a { color: black; text-decoration: none !important; } /* HEADER */ .header { margin-bottom: 200px; } .header .header-title { background-image: url(); } .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; } .list-item:before { display: inline-block; width: 1325px; background: black; height: 10px; border-radius: 27px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); margin-left: calc(-1 * var(--padding-h-img)); margin-bottom: -54px; left: -150px; top: -5px; position: relative; color: #fff; font: bold 20px/54px 'Helvetica neue', 'Helvetica', 'lucida grande', 'tahoma', 'verdana', 'arial', sans-serif; text-transform: uppercase; transform-origin: top left; } It works, but it doesn't seem compatible yes its only made for this layout :D Thank you very much |
Mar 25, 2019 8:51 PM
#207
Instead of seeing the little symbols for ongoing, completed, on hold, etc... I am seeing "f0c9", "f03a", "f06e" etc... any way to fix? Edit: Ok so I fixed this by adding a " \ " in front of all those things and it works now |
Aoshima_Mar 25, 2019 8:58 PM
Mar 25, 2019 9:09 PM
#208
Aoshima_ said: Thanks for updating your post, glad you found the fix! :D There seems to be a bug where editing the forum post can remove some backslashes, that's what must have happened here. Should be an easy edit to the main post to fix it. :) @Shishio-kunInstead of seeing the little symbols for ongoing, completed, on hold, etc... I am seeing "f0c9", "f03a", "f06e" etc... any way to fix? Edit: Ok so I fixed this by adding a " \ " in front of all those things and it works now |
Mar 25, 2019 9:39 PM
#209
OK thanks for the update; I've added the backslash to all those parts so hopefully it's working fine again |
Apr 6, 2019 5:33 PM
#210
Everything seems to be working except one thing. At the top were there is suppose to be a bar with a wheel with symbols. Instead of the symbols Its just "f0c9" "f03a" etc.. How can I fix this issue? Heres a reference photo: https://imgur.com/a/6Z0VAOY |
sophia_cApr 6, 2019 5:42 PM
Apr 6, 2019 5:40 PM
#211
sophia_c said: Everything seems to be working except one thing. At the top were there is suppose to be a bar with a wheel with symbols. Instead of the symbols its just some random and letters. How can I fix this issue? Heres a reference photo: https://imgur.com/a/6Z0VAOY It's because some crucial backslashes got erased by MAL on accident, but I've added them back; try reinstalling the latest version :D |
Apr 6, 2019 5:55 PM
#212
Shishio-kun said: sophia_c said: Everything seems to be working except one thing. At the top were there is suppose to be a bar with a wheel with symbols. Instead of the symbols its just some random and letters. How can I fix this issue? Heres a reference photo: https://imgur.com/a/6Z0VAOY It's because some crucial backslashes got erased by MAL on accident, but I've added them back; try reinstalling the latest version :D I did that and it worked. Thanks a lot! :) |
May 6, 2019 3:06 PM
#213
hey, i have problem. my anime list have only blur or something like this pictures ( but manga list works as it should ) what should I do? https://imgur.com/a/YfPiI8Z |
May 6, 2019 3:45 PM
#214
renjiroo said: hey, i have problem. my anime list have only blur or something like this pictures ( but manga list works as it should ) what should I do? https://imgur.com/a/YfPiI8Z It seems fine to me at the moment; is it still blurry for you? |
May 6, 2019 3:55 PM
#215
Shishio-kun said: renjiroo said: hey, i have problem. my anime list have only blur or something like this pictures ( but manga list works as it should ) what should I do? https://imgur.com/a/YfPiI8Z It seems fine to me at the moment; is it still blurry for you? no, now it is back to normal ( it is very strange, since I had such a blur for a day ) rly strange... maybe because of the large numbers of anime he was lagging or something like that... btw thx for answer. |
May 7, 2019 10:05 AM
#216
renjiroo said: Shishio-kun said: renjiroo said: hey, i have problem. my anime list have only blur or something like this pictures ( but manga list works as it should ) what should I do? https://imgur.com/a/YfPiI8Z It seems fine to me at the moment; is it still blurry for you? no, now it is back to normal ( it is very strange, since I had such a blur for a day ) rly strange... maybe because of the large numbers of anime he was lagging or something like that... btw thx for answer. It could also have been that the cover generator was overloaded or not available for some time, so you could not load the high res version of the pictures. Unfortunately there is not much we can do when this happens, except contact the author of the generator (and it's often not their fault either, but from MAL changing stuff they rely on to do the generation). |
May 12, 2019 6:24 PM
#217
the anime images are with a "blur", and i would like to know how can i resolve this... https://prnt.sc/nnqan8/ |
May 12, 2019 11:53 PM
#218
NightZX said: Your list is private, which is preventing the cover generator from doing its work. Setting your lists to public would fix this. Alternatively, add one or both of these links to the very top of your code. Animelist covers:the anime images are with a "blur", and i would like to know how can i resolve this... https://prnt.sc/nnqan8/ @\import "https://dl.dropboxusercontent.com/s/71mrsl1iz0z11p2/animelist_dataimagelinkbefore.css"; @\import "https://dl.dropboxusercontent.com/s/dpqglnr3slmgp7t/mangalist_dataimagelinkbefore.css"; Be aware that some covers may still be blurry using these imports, especially on the mangalist. You may also notice slower loading times. But it's the easiest way to prevent blurry covers while maintaining a private list. |
May 13, 2019 4:15 PM
#219
Valerio_Lyndon said: NightZX said: Your list is private, which is preventing the cover generator from doing its work. Setting your lists to public would fix this. Alternatively, add one or both of these links to the very top of your code. Animelist covers:the anime images are with a "blur", and i would like to know how can i resolve this... https://prnt.sc/nnqan8/ @\import "https://dl.dropboxusercontent.com/s/71mrsl1iz0z11p2/animelist_dataimagelinkbefore.css"; @\import "https://dl.dropboxusercontent.com/s/dpqglnr3slmgp7t/mangalist_dataimagelinkbefore.css"; Be aware that some covers may still be blurry using these imports, especially on the mangalist. You may also notice slower loading times. But it's the easiest way to prevent blurry covers while maintaining a private list. Thanks by the help <3 |
Jul 27, 2019 3:59 PM
#220
All the anime images are blurry |
Jul 27, 2019 4:40 PM
#221
Doofenheimer said: All the anime images are blurry looks fine to me; maybe your list was on private that interferes with preview pics. or maybe your browser blocks the import |
Aug 21, 2019 7:06 AM
#222
I have a problem, the images now appear blurry and are not HD? for the anime/manga tiles. |
Loneliness of Innocence Gin a homeless man blackballed by his profession has convers from an old friend that his daughter Miyuki in levy is dying. He fight his bitterness and struggle to converse acquaintances, old business partners and government agencies. Later Society betrays he’s feeling’s therefore turns to crime. |
Aug 21, 2019 10:20 AM
#223
OtakuWatcher said: I have a problem, the images now appear blurry and are not HD? for the anime/manga tiles. It looks fine to me right now, could you check again and confirm the HD covers are back for you too? Maybe the cover generator was down for some time when you last checked, but it's up again now. |
Aug 28, 2019 5:08 PM
#224
Hey thanks for the reply, i actually found why it was blurry for me, the browser im using called brave has a function called shield which automatically has add-block and other functions. When i turn the shield off the list becomes HD again so i just have the shield off for minimalist now. |
Loneliness of Innocence Gin a homeless man blackballed by his profession has convers from an old friend that his daughter Miyuki in levy is dying. He fight his bitterness and struggle to converse acquaintances, old business partners and government agencies. Later Society betrays he’s feeling’s therefore turns to crime. |
Dec 15, 2019 1:59 PM
#225
Shishio-kun said: You have a few options which we made Do any of these seem like something you'd want? Let me know and we can give you the codes (they're here but might be tricky to install). Also I can make small adjustments like color, removing the text. @import "https://malcat-gen.appspot.com/headers?template=body[data-query*='\"status\":7'] .list-item:nth-child($index){clear:left}body[data-query*='\"status\":7'] .list-item:nth-child($index):before{content:'$content'}"; .list-item:before { display: inline-block; width: 1020px; background: rgba(0,0,0,0.5); height: 54px; border-radius: 27px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); margin-left: calc(-1 * var(--padding-h-img)); margin-bottom: -54px; left: -0px; top: -40px; position: relative; color: #fff; font: bold 32px/54px 'Helvetica neue', 'Helvetica', 'lucida grande', 'tahoma', 'verdana', 'arial', sans-serif; text-transform: uppercase; text-align: center; transform-origin: top left; } @import "https://malcat-gen.appspot.com/headers?template=body[data-query*='\"status\":7'] .list-item:nth-child($index){clear:left}body[data-query*='\"status\":7'] .list-item:nth-child($index):before{content:'$content'}"; .list-item:before { display: inline-block; width: auto; height: 54px; padding: 0 15px; background: rgba(0,0,0,0.5); border-radius: 27px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); margin-left: calc(-1 * var(--padding-h-img)); margin-bottom: -54px; color: #fff; font: bold 32px/54px 'Helvetica neue', 'Helvetica', 'lucida grande', 'tahoma', 'verdana', 'arial', sans-serif; text-transform: uppercase; transform: rotate(90deg); transform-origin: top left; } @supports not (margin-left:var(--checkvar)) { .list-item:before { margin-left: calc(512px - 150px - 13px); } } @import "https://malcat-gen.appspot.com/headers?template=body[data-query*='\"status\":7'] .list-item:nth-child($index){clear:left}body[data-query*='\"status\":7'] .list-item:nth-child($index):before{content:'$content'}"; .list-item:before { display: inline-block; width: 1325px; background: black; height: 10px; border-radius: 27px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); margin-left: calc(-1 * var(--padding-h-img)); margin-bottom: -54px; left: -150px; top: -55px; position: relative; color: #fff; font: bold 20px/54px 'Helvetica neue', 'Helvetica', 'lucida grande', 'tahoma', 'verdana', 'arial', sans-serif; text-transform: uppercase; transform-origin: top left; } I'd really like the middle one! But you're right, it's tricky to install since I tried putting it at the top and it made my synopsis disappear :[ Any way to make this work with that? edit;; I moved it below the synopsis import, it works perfectly now! Thanks for sharing the code [: |
KishikkuDec 15, 2019 2:14 PM
Jan 8, 2020 7:41 AM
#226
Hello, the images in my list are blurred, I again copy the css code in the editor, I verify that the boxes were checked, I deactivate "Brave shield" but nothing '^' |
Jan 9, 2020 2:03 AM
#227
shidorien said: Hmm, your list looks fine to me. Are you using any browser extensions, espcially anything privacy-based (adblocker etc)? If you are, you could try temporarily disabling them and seeing if it fixes the problem. If it does, re-enable them one at a time until you find the troublemaker. Once found, the feature may be able to be turned off for MAL. For instance, uMatrix has a 'referral headers' option.Hello, the images in my list are blurred, I again copy the css code in the editor, I verify that the boxes were checked, I deactivate "Brave shield" but nothing '^' Or for a quick fix, you could try replacing the cover import, which is this line: @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkbefore"; @\import "https://malscraper.azurewebsites.net/covers/anime/shidorien/presets/dataimagelinkbefore"; @\import "https://malscraper.azurewebsites.net/covers/manga/shidorien/presets/dataimagelinkbefore"; Or, alternatively to that, you could try these lines: @\import "https://dl.dropboxusercontent.com/s/71mrsl1iz0z11p2/animelist_dataimagelinkbefore.css"; @\import "https://dl.dropboxusercontent.com/s/dpqglnr3slmgp7t/mangalist_dataimagelinkbefore.css"; |
Feb 8, 2020 4:28 PM
#228
Cateinya said: YugureShadowmore said: any updates on the image thing being fixed? I tried that link you gave me but it took away my background image You need to keep all the code for the layout, but change the first import link (~ l. 10) by the new one. Below is a copy of the beginning of the code where I specified which line you need to replace. /* Endless Summer Layout by Cateinya Thanks to Syaoran3 (covers) and BurntJelly (genres, synopsis) for their generators */ /* GENERATED STUFF */ /* generated cover */ @import "https://mal-image.appspot.com/auto/?code=.list-item%20.data.image%20a%5Bhref*%3D%22%2F%5BID%5D%2F%22%5D%3Abefore%20%7Bbackground-image%3A%20url(%5BIMG%5D)%3B%7D"; /* <----- this link */ /* generated informations (copy your generated CSS below) */ ... (the rest of the code stays the same) How do I make the covers HD? I edited my layout and somehow, the covers are a tad bit fuzzy. ONLY a tad but, I still want to fix it |
Webtoons, anime, & manga fuel my soul |
Feb 15, 2020 4:33 PM
#229
Hello, I would like to know if it is possible to add the function of start / end date, if anyone can help thank you |
Feb 18, 2020 2:04 AM
#230
LukPhoenix said: Try adding this to the bottom of your CSS, it should add basic support. If anything looks incorrect or weird after adding it, just lemme know, I should be able to fix it.Hello, I would like to know if it is possible to add the function of start / end date, if anyone can help thank you /* ADD SUPPORT FOR DATES */ .data.started, .data.finished { display: table-cell !important; z-index: 1; --margin-left-data-adjusted: 10px; margin-left: var(--margin-left-data-std); margin-top: 80px; } .data.finished { --margin-left-data-adjusted: 200px; } .data.started::before { content: 'Started:'; } .data.finished:not(.empty)::before { content: 'Finished:'; } .data.tags { min-height: 152px; } .data.tags > div { margin-top: 124px; } |
Feb 18, 2020 2:13 AM
#231
DatMeganeGrl said: Hey, late response, but is it still an issue? It looks alright to me when I visit your page. Is this how it appears to you as well?How do I make the covers HD? I edited my layout and somehow, the covers are a tad bit fuzzy. ONLY a tad but, I still want to fix it If we're seeing the same thing, then any fuzziness you're seeing is probably due to MAL's image compression making them lose fidelity. That said, it would probably be possible to make a script that would load higher resolution images (would require using a browser extension to run it though), but it wouldn't be a massive change visually. You can see an example of that below. You could also add your own covers through CSS to replace any really problematic ones. Though, that could be quit time consuming if you had a lot you wanted to change. |
Valerio_LyndonFeb 18, 2020 2:19 AM
Feb 21, 2020 4:08 PM
#232
hey I recently installed this and made a few changes to it my problem is that when I set an anime from "plan to watch" for example to "watching" it appears in the "completed" tab but has the right color for "watching" as an example please refer to "Violet Evergarden" in my list edit: it seems that it just takes quite a while to update but now its working lol |
DaaveeFeb 21, 2020 8:20 PM
Apr 15, 2020 6:52 AM
#233
Hi, Thank you so much for this beautiful layout. I am a bit new to this so sry if I am missing something obvious. I am also sorry if I missed some posts and some of this has already been answered. 1. Is there a way to make my MAL profile pic at the top permanently opaque instead of it's usual transparent? 2. Is there a way for me to display airing start/end dates and/or some other data categories? 3. If I wanted to ever in the future customize the list and shift everything left/right or make adjustments which lines/values should I look for? 4. How (for future customization) could I change say the colouring/theme of the layout? Sry 1 more thing ... I did the advance CSS generation part, however, it only generated about 300 anime out of the approximately 380 on my list. Is there something I could do about this? Again, Thank You very much! Any help is appreciated! |
ParaCetaAvApr 15, 2020 6:55 AM
Apr 15, 2020 10:36 AM
#234
Apr 15, 2020 10:41 AM
#235
@ParaCetaAv You're welcome, I'm glad you like it =) Don't worry about it, it can be a pain to re-read all the previous pages so I can understand. Here you go : 1. You can remove the transparency of the profile picture by removing the line ~157 in the css: .list-menu-float { background: rgba(0,0,0,0.5); border: none; border-radius: 25px; ... opacity: 0.5; <-- this line ... } 2. Unfortunately the layout wasn't designed to display those (in the sense that there is no code already made to easily add them). You can look at how the other pieces of data are displayed with the CSS and add some other blocks of code to customize the display of the start/end date. What you will have to do: - remove the corresponding lines from the "not displayed data" section (line ~765) : /* not displayed data */ .data.number, ... .data.started, .data.finished, .data.days, .data.airing-started, .data.airing-finished, ... .data.priority { display: none !important; } - Take inspiration from the design of another piece of data already displayed (for example the Studio, lines ~1167 to 1183) to customize the display of the new data - Don't forget to also tick the boxes in the list parameters! 3. If you want to change the size of things, what you want to look for are these kinds of lines (there are comments everywhere so what part of the layout it changes should be easy to understand) : - Size of the text font-size: 16px; - Size of element (box or zone) width: 1024px; height: 38px; - And in particular this piece of code you'll want to change the values, it's the size of the covers .list-block { /* variables used in calc (explicit names) */ --height-img: 250px; --height-info: 130px; ... --width-img: 178px; --width-info: 400px; To change the positions, you'll need to look for the lines with left: right: top: bottom: You can change the values however you like and preview the modifications using the browser inspector, or on the layout when you click on the type of style (https://myanimelist.net/ownlist/style) and click the button "preview" after putting your code in, or directly in your list after saving the code or updating the dropbox file. 4. To change the colors, the lines you are looking for are "color:" for the text and "background-color:" for the backgrounds/zones. Some of them are in plain text (e.g. blue), or in hexa (#000000) or even in rgb (sometimes with opacity as well as the 4th value). To change the images (mainly the background image here), you can change the URL line 84: body:before { background-color: #9492C8; background-image: url(https://image.myanimelist.net/ui/OK6W_koKDTOqqqLDbIoPAh6nqUQe3N-Z2P6r5q6u_oc); <--- this line 5(kinda). This is due to the requests from the generator to MAL's various pages timing out during the generation. Fortunately what you can do to complete the missing titles is repeat the generation process a second time, but first put the already generated code in the big blank upper section in the generation window. Repeat this process until you get 380/380 (this could take up to 2-4 repeats I think). |
Apr 15, 2020 10:42 AM
#236
ParaCetaAv said: Hi so I have run into some trouble installing the theme: 1. The cover images are blurry (Safari user) and I have waited and refreshed many times already. 2. The tags as you can see on the img are double (How do I fix that?) 3. The Licensors are not appearing (I have matched my List settings as per instructions) The cover images probably are blurry because some extensions in your browser may block some stuff. In my case it was my AdBlock that made the images appear blurry so you might look into something like that. |
Apr 15, 2020 10:45 AM
#237
Daavee said: ParaCetaAv said: Hi so I have run into some trouble installing the theme: 1. The cover images are blurry (Safari user) and I have waited and refreshed many times already. 2. The tags as you can see on the img are double (How do I fix that?) 3. The Licensors are not appearing (I have matched my List settings as per instructions) The cover images probably are blurry because some extensions in your browser may block some stuff. In my case it was my AdBlock that made the images appear blurry so you might look into something like that. I don't use any extensions Also sry to keep spamming (?) but another issue is when I run the advanced info generator then it only ever scans the 300 anime regardless of me having more anime on my list and me having updated the list by adding more anime as well Help would be very appreciated! |
Apr 15, 2020 10:47 AM
#238
@ParaCetaAv As for your second message, can you try to save the layout (bottom left of your screenshot) and then directly go to your list and check if the tags are still blurry / the images are low res? The preview system could cause some parts of the layouts not to work out properly. If everything is correctly configured, the licensors should appear correctly. Maybe it's the entry that does not have any licensor registered (I check and Beastars does not look like they have one). In this layout, the "Licensors:" part is always displayed even if none are found. You should be able to check with another entry I think. |
Apr 15, 2020 10:55 AM
#239
Cateinya said: @ParaCetaAv As for your second message, can you try to save the layout (bottom left of your screenshot) and then directly go to your list and check if the tags are still blurry / the images are low res? The preview system could cause some parts of the layouts not to work out properly. If everything is correctly configured, the licensors should appear correctly. Maybe it's the entry that does not have any licensor registered (I check and Beastars does not look like they have one). In this layout, the "Licensors:" part is always displayed even if none are found. You should be able to check with another entry I think. For licensor you are right. My bad. However, the blurry covers and double genre tags are still appearing. |
Apr 15, 2020 11:58 AM
#240
@Cateinya Hi, I know I am bringing up many issues. I really truly appreciate you taking your own valuable time to help me. This is a first experience for me. I want to learn more and be able to customize and add characters and other cool stuff and then eventually learn how to customize my front profile About Me page as well. :) But in addition to the post above I want to bring up a couple more points of help pls: Firstly, I did as instructed to show other data. It worked for airing dates. I also wanted to add number or priority above studio however I am not able to Secondly, I was wondering if I could add a score edit counter like in the default version and how may I edit tags from the display HUD that appears when hovering over the cover? Thirdly, I have run the advanced generator and it has finally generated everything, BUUUUUT, for some reason on my list it is not displaying the last ~1/3 of synopsis. Have tried this many times. Thanks (btw still trying but the blurry cover on Safari and the double genres on all browsers arent going) |
ParaCetaAvApr 15, 2020 2:29 PM
Apr 16, 2020 10:56 AM
#241
After playing around I have been able to fix some issues such as HD cover images by playing with the import link a bit. However, when I copy/past the generated data (which I am now completely able to download) then it deletes most of the CSS and reverts back to the default dark red theme. This was not the case before. Any help is appreciated. |
Apr 17, 2020 11:24 AM
#242
@ParaCetaAv Did you follow the same steps for the priority data that you did for the airing dates (2. from my previous message) ? I can still see the line hiding the priority, and it looks like this data is not checked in your settings. Regarding the "number" data, you won't be able to display it on the white part but only on the cover part of the entry (this is one of the limitations of CSS). If you want to do that there will be some different steps than for the usual data (I'll go more into the details if you want me to). I am not sure what you mean by the score edit counter. If you mean the ability to change the score while on the list, you can do it by clicking on the score number (or "-" sign when no score is set) and edit it. In this layout, you can only edit your tags by clicking on the "edit" button under the title, then click on the "show advanced" button in the popup. There you'll have a tags textbox to edit them (the quick edit functionality can't work because the tags are only displayed when you hover the cover and will disappear when you try to move your mouse to the white part). Did you try to put all the generated CSS with the layout CSS directly into the edit box for the theme? I am not sure about it, but maybe MAL has defined a line / character limit to how much CSS code you can put in there... What you can try is host the generated CSS part somewhere, for example on dropbox: Cateinya said: Now you can either add the generated CSS like this where indicated at the start of the layout code in the "Add Custom CSS" section (not recommended) or host it somewhere on the web and then import the file (just add the @import line before the layout code). To do the later, check this tutorial on how to host your CSS online : How to Import CSS easily with Dropbox (updated for 2014) (Don't forget to change the extension of the file hosted on Dropbox to ".css", otherwise it won't work!) There may also still be another issue with the generated CSS that I could identify if I can have a look at it (it will be possible if you host it). But it may already solve the issue you have. To scan more than 300 anime for the generator, you have to actually have them displayed on the page before clicking on the bookmark. So you'll need to go to your "all anime" page, then keep scrolling down until you have loaded everything. After that you'll be able to generate for your whole list. The double tag issue is new to me and seems to come from the generator part. Could you post a few lines (~5 will be enough) of the generated css so I can see if something was ill-formated? If you also want to customize your profile page, I can suggest you to have a look at all the tutorial videos Shishio-kun made on the subject (they are available on the club's front page here and there is also a dedicated topic here). Those are great to start of and see what you can do (and it's really easy to follow!) |
Apr 18, 2020 3:10 AM
#243
@Cateinya Cateinya said: @ParaCetaAv Did you follow the same steps for the priority data that you did for the airing dates (2. from my previous message) ? I can still see the line hiding the priority, and it looks like this data is not checked in your settings. Regarding the "number" data, you won't be able to display it on the white part but only on the cover part of the entry (this is one of the limitations of CSS). If you want to do that there will be some different steps than for the usual data (I'll go more into the details if you want me to). I am not sure what you mean by the score edit counter. If you mean the ability to change the score while on the list, you can do it by clicking on the score number (or "-" sign when no score is set) and edit it. In this layout, you can only edit your tags by clicking on the "edit" button under the title, then click on the "show advanced" button in the popup. There you'll have a tags textbox to edit them (the quick edit functionality can't work because the tags are only displayed when you hover the cover and will disappear when you try to move your mouse to the white part). Did you try to put all the generated CSS with the layout CSS directly into the edit box for the theme? I am not sure about it, but maybe MAL has defined a line / character limit to how much CSS code you can put in there... What you can try is host the generated CSS part somewhere, for example on dropbox: Cateinya said: Now you can either add the generated CSS like this where indicated at the start of the layout code in the "Add Custom CSS" section (not recommended) or host it somewhere on the web and then import the file (just add the @import line before the layout code). To do the later, check this tutorial on how to host your CSS online : How to Import CSS easily with Dropbox (updated for 2014) (Don't forget to change the extension of the file hosted on Dropbox to ".css", otherwise it won't work!) There may also still be another issue with the generated CSS that I could identify if I can have a look at it (it will be possible if you host it). But it may already solve the issue you have. To scan more than 300 anime for the generator, you have to actually have them displayed on the page before clicking on the bookmark. So you'll need to go to your "all anime" page, then keep scrolling down until you have loaded everything. After that you'll be able to generate for your whole list. The double tag issue is new to me and seems to come from the generator part. Could you post a few lines (~5 will be enough) of the generated css so I can see if something was ill-formated? If you also want to customize your profile page, I can suggest you to have a look at all the tutorial videos Shishio-kun made on the subject (they are available on the club's front page here and there is also a dedicated topic here). Those are great to start of and see what you can do (and it's really easy to follow!) 1. I tried importing CSS from Dropbox using the instructions you linked to - but - I am not sure how to create a css file which I can then upload to on Dropbox. I am using a Mac and am not able to convert anything using the .css extension. This is why I was copying and pasting the generated data directly. 2. DOUBLE GENRE TAG ISSUE - GENERATED CSS: * Generated by MAL List Tool http://burntjello.webs.com Template=/* [TITLE] *[DEL]/ #tags-[ID]:before {content: "[TITLE]";} #tags-[ID]:after {content:"[GENRES]";} #tags-[ID] .tags-[ID]:after {content: "[DESC]";} MatchTemplate=#tags-[ID]: */ /* Beastars */ #tags-39195:before {content: "Beastars";} #tags-39195:after {content:"Slice of Life<a href="/anime/genre/36/Slice_of_Life" title="Slice of Life">Slice of Life, Psychological<a href="/anime/genre/40/Psychological" title="Psychological">Psychological, Drama<a href="/anime/genre/8/Drama" title="Drama">Drama, Shounen<a href="/anime/genre/27/Shounen" title="Shounen">Shounen";} #tags-39195 .tags-39195:after {content: "In a civilized society of anthropomorphic animals, an uneasy tension exists between carnivores and herbivores. At Cherryton Academy, this mutual distrust peaks after a predation incident results in the death of Tem, an alpaca in the school's drama club. Tem's friend Legoshi, a grey wolf in the stage crew, has been an object of fear and suspicion for his whole life. In the immediate aftermath of the tragedy, he continues to lay low and hide his menacing traits, much to the disapproval of Louis, a red deer and the domineering star actor of the drama club. When Louis sneaks into the auditorium to train Tem's replacement for an upcoming play, he assigns Legoshi to lookout duty. That very night, Legoshi has a fateful encounter with Haru, a white dwarf rabbit scorned by her peers. His growing feelings for Haru, complicated by his predatory instincts, force him to confront his own true nature, the circumstances surrounding the death of his friend, and the undercurrent of violence plaguing the world around him. [Written by MAL Rewrite]";} /* BNA */ #tags-40060:before {content: "BNA";} #tags-40060:after {content:"Action<a href="/anime/genre/1/Action" title="Action">Action, Super Power<a href="/anime/genre/31/Super_Power" title="Super Power">Super Power, Fantasy<a href="/anime/genre/10/Fantasy" title="Fantasy">Fantasy";} #tags-40060 .tags-40060:after {content: "Throughout history, humans have been at odds with Beastmen—a species capable of changing shape due to their genetic \"Beast Factor.\" Because of this conflict, Beastmen have been forced into hiding. Anima City serves as a safe haven for these oppressed individuals to live free from human interference. During a festival celebrating the town's 10th anniversary, Michiru Kagemori, a human who suddenly turned into a tanuki, finds that Anima City is a far cry from paradise. After witnessing an explosion in the square, she is confronted by Shirou Ogami, a seemingly indestructible wolf and sworn protector of all Beastmen. As they pursue the criminals behind the bombing, the two discover that Michiru is anything but an ordinary Beastman, and look to investigate her mysterious past and uncanny abilities. Could she turn out to be the missing link between Humans and Beastmen? [Written by MAL Rewrite]";} /* Fruits Basket 2nd Season */ #tags-40417:before {content: "Fruits Basket 2nd Season";} #tags-40417:after {content:"Slice of Life<a href="/anime/genre/36/Slice_of_Life" title="Slice of Life">Slice of Life, Comedy<a href="/anime/genre/4/Comedy" title="Comedy">Comedy, Supernatural<a href="/anime/genre/37/Supernatural" title="Supernatural">Supernatural, Drama<a href="/anime/genre/8/Drama" title="Drama">Drama, Romance<a href="/anime/genre/22/Romance" title="Romance">Romance, Shoujo<a href="/anime/genre/25/Shoujo" title="Shoujo">Shoujo";} #tags-40417 .tags-40417:after {content: "It’s been almost a year since Tooru started living at Shigure’s house! Though she now has a deeper relationship with each of the Soumas, not just Yuki and Kyou, she is concerned about their sinister curse’s true nature. The right path to choose, predetermined destiny… what emotions will arise in Yuki, Kyou and Tooru in the face of the Eternal Banquet? What will be their resolve? (Source: Funimation, edited)";} /* Haikyuu!!: Riku vs. Kuu */ #tags-40262:before {content: "Haikyuu!!: Riku vs. Kuu";} #tags-40262:after {content:"Comedy<a href="/anime/genre/4/Comedy" title="Comedy">Comedy, Sports<a href="/anime/genre/30/Sports" title="Sports">Sports, Drama<a href="/anime/genre/8/Drama" title="Drama">Drama, School<a href="/anime/genre/23/School" title="School">School, Shounen<a href="/anime/genre/27/Shounen" title="Shounen">Shounen";} #tags-40262 .tags-40262:after {content: "An intense battle rages on at the Tokyo Qualifiers for the three remaining spots in the national volleyball competition. Nekoma High School, Fukurodani High School, Nohebi Academy, and Itachiyama Academy all passionately strive to participate in the tournament. Despite various issues on the court, Nekoma especially wishes to prove they are worthy of moving on to the national level. As the teams aim to secure their place by overcoming both their opponents and their own weaknesses, the Tokyo Qualifiers determine which teams will reign victorious and join the national competition. [Written by MAL Rewrite]";} /* Haikyuu!!: To the Top */ #tags-38883:before {content: "Haikyuu!!: To the Top";} #tags-38883:after {content:"Comedy<a href="/anime/genre/4/Comedy" title="Comedy">Comedy, Sports<a href="/anime/genre/30/Sports" title="Sports">Sports, Drama<a href="/anime/genre/8/Drama" title="Drama">Drama, School<a href="/anime/genre/23/School" title="School">School, Shounen<a href="/anime/genre/27/Shounen" title="Shounen">Shounen";} #tags-38883 .tags-38883:after {content: "After their triumphant victory over Shiratorizawa Academy, the Karasuno High School volleyball team has earned their long-awaited ticket to nationals. As preparations begin, genius setter Tobio Kageyama is invited to the All-Japan Youth Training Camp to play alongside fellow nationally recognized players. Meanwhile, Kei Tsukishima is invited to a special rookie training camp for first-years within the Miyagi Prefecture. Not receiving any invitations himself, the enthusiastic Shouyou Hinata feels left behind. However, Hinata does not back down. Transforming his frustration into self-motivation, he boldly decides to sneak himself into the same rookie training camp as Tsukishima. Even though Hinata only lands himself a job as the ball boy, he comes to see this as a golden opportunity. He begins to not only reflect on his skills as a volleyball player but also analyze the plethora of information available on the court and how he can apply it. As the much-anticipated national tournament approaches, the members of Karasuno's volleyball team attempt to overcome their weak points and refine their skills, all while aiming for the top! [Written by MAL Rewrite]";} 3. Also the generated code only appears on the "All Anime" tab not when I am in the "Score Tab" or "Type" or "Progress" tab 4. Questions regarding a few customizations, if possible: a) Is it possible to have say subheadings within the score or type or progress tab. For example: Currently Watching: *line* Completed: *line* OR in score for example: 10 *line* 9 *line* b) When we get our data on the hover window then some the initial letter is usually bold or coloured - how may I customize or remove that or even edit the entire font for that specific part? and is it possible to do something similar with the initial letter or entire word for "Tags" and "Synopsis" Sincerely, Thank you very much for your support! |
Apr 18, 2020 6:00 AM
#244
@ParaCetaAv 1. I am not using a Mac myself, but I found this video explaining how to change the extension of a file (here). So you should be able to save the generated code in a .txt file and then change it to a .css file like that. 2. It may have disappeared during the copy, but there is a missing "/" right at the beginning before the "*" in this piece of code. I also noticed what could be the bug for the double genre tags (in the generator code), I'll take a look at it when I have some free time. Can you check in the complete generated code that there is no quote mark " right in the middle of the names / synopses? This could be another reason why all the code breaks when you add the generated code (it messes up the CSS syntax). Basically this will break the CSS: ...{content:"This is a synopsis of "the anime" that breaks the css";} So you will have to escape the quotes with a \ before them like so: ...{content:"This synopsis of \"the anime\" will not break the css";} (Unfortunately you will have to do this manually, but then it should be working properly). Note that when the cover generator is fixed you will most certainly have to regenerate you whole anime list to get the correct genre tags (non-doubled), so maybe just check but don't bother with the modifications for now... 3. Do you mean the categories ("all anime", "watching", "plan to watch", etc.) ? If so, this is strange, because it should appear on all the categories as long as the css code is correctly imported. 4. a) Regarding subheadings per status: I have never done it myself so I can't say for sure if it will correctly work, but there is a topic about it (here) that you can use as a starting base (you may have to heavily adapt the original code in this topic since this was made to work on the default "table" template, but not with covers on a row like in this layout). Unfortunately I don't think/don't know how it is possible to do the same with the scores... b) The part you are looking for that changes the first letter is this piece of code (there is one for each status) starting line ~570 : /* 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; } Notice that this code also changes the score and progress colors, so you may want to create another block of code using only the ":first-letter" lines. To change the whole color of the "Tags :" or "Synopsis :" words, you just have to add a "color: the color;" item in these pieces of code (lines 1018 and 1072): .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 > 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; } |
Apr 18, 2020 6:52 AM
#245
@Cateinya Thanks for your reply. I tried importing again to no success - is the below right? /* generated informations (copy your generated CSS below) */ @\import "https://dl.dropboxusercontent.com/home/MyAnimeLis?preview=endlesssummergeneration.css"; In regards to 3 - I mean when you sort through score or type or status then the generated content does not appear. It only shows on the default main page. Kishikku said: Shishio-kun said: You have a few options which we made Do any of these seem like something you'd want? Let me know and we can give you the codes (they're here but might be tricky to install). Also I can make small adjustments like color, removing the text. @import "https://malcat-gen.appspot.com/headers?template=body[data-query*='\"status\":7'] .list-item:nth-child($index){clear:left}body[data-query*='\"status\":7'] .list-item:nth-child($index):before{content:'$content'}"; .list-item:before { display: inline-block; width: 1020px; background: rgba(0,0,0,0.5); height: 54px; border-radius: 27px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); margin-left: calc(-1 * var(--padding-h-img)); margin-bottom: -54px; left: -0px; top: -40px; position: relative; color: #fff; font: bold 32px/54px 'Helvetica neue', 'Helvetica', 'lucida grande', 'tahoma', 'verdana', 'arial', sans-serif; text-transform: uppercase; text-align: center; transform-origin: top left; } @import "https://malcat-gen.appspot.com/headers?template=body[data-query*='\"status\":7'] .list-item:nth-child($index){clear:left}body[data-query*='\"status\":7'] .list-item:nth-child($index):before{content:'$content'}"; .list-item:before { display: inline-block; width: auto; height: 54px; padding: 0 15px; background: rgba(0,0,0,0.5); border-radius: 27px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); margin-left: calc(-1 * var(--padding-h-img)); margin-bottom: -54px; color: #fff; font: bold 32px/54px 'Helvetica neue', 'Helvetica', 'lucida grande', 'tahoma', 'verdana', 'arial', sans-serif; text-transform: uppercase; transform: rotate(90deg); transform-origin: top left; } @supports not (margin-left:var(--checkvar)) { .list-item:before { margin-left: calc(512px - 150px - 13px); } } @import "https://malcat-gen.appspot.com/headers?template=body[data-query*='\"status\":7'] .list-item:nth-child($index){clear:left}body[data-query*='\"status\":7'] .list-item:nth-child($index):before{content:'$content'}"; .list-item:before { display: inline-block; width: 1325px; background: black; height: 10px; border-radius: 27px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); margin-left: calc(-1 * var(--padding-h-img)); margin-bottom: -54px; left: -150px; top: -55px; position: relative; color: #fff; font: bold 20px/54px 'Helvetica neue', 'Helvetica', 'lucida grande', 'tahoma', 'verdana', 'arial', sans-serif; text-transform: uppercase; transform-origin: top left; } I'd really like the middle one! But you're right, it's tricky to install since I tried putting it at the top and it made my synopsis disappear :[ Any way to make this work with that? edit;; I moved it below the synopsis import, it works perfectly now! Thanks for sharing the code [: In regards to number 4. a) : Thank you for your help but would something like this not be possible for score and Type as well or even any other way to just indicate/showcase the score when we sort it by "score" In regards to 4. b) : -When I create a new block for data.first-letter then I assume I delete the same line from the already existing block ...? -If I want to colour the entire word not just first letter then would i have add a colour and font-weight line to the data blocks ~1165 for example? -If I want to only colour first letter of "Tags" and "Synopsis" would I copy the the data.first-letter lines into the "Tags" and "Synopsis" blocks? Once again, Thanks for your continuous help! This has been a very great learning experience as well. |
ParaCetaAvApr 18, 2020 7:17 AM
Apr 19, 2020 6:04 PM
#246
ParaCetaAv said: After playing around I have been able to fix some issues such as HD cover images by playing with the import link a bit. However, when I copy/past the generated data (which I am now completely able to download) then it deletes most of the CSS and reverts back to the default dark red theme. This was not the case before. Any help is appreciated. Hey, could you please tell me how did you fix the issue with blurry cover images? I'm using Safari too and noticed this. |
Apr 19, 2020 10:35 PM
#247
Hi I hope I'm posting this in the right place ~ So uhm I'm using the Endless summer layout now but I'd like to know if there is a way to change a few things first one being the colours associated with example "Completed" "On hold" etc. I've used the default ones for so long that they really bother/confuse me. Next thing is if there's any way of making the title box (where it presents completed/all anime/on hold etc) like a liiiittle smaller. The last thing I had in mind was changing position of the profile icon or completely remove it. Sorry that's kinda alot but if there's any way I can change any of these I'd really like to try. ❤ |
Apr 20, 2020 2:56 AM
#248
psm3l0 said: Safari has some third-party cookie/referral link settings that can only be enabled or disabled browser-wide. To get around this without disabling the privacy settings, follow this guide:Hey, could you please tell me how did you fix the issue with blurry cover images? I'm using Safari too and noticed this.
|
Apr 20, 2020 3:20 PM
#249
Valerio_Lyndon said: psm3l0 said: Safari has some third-party cookie/referral link settings that can only be enabled or disabled browser-wide. To get around this without disabling the privacy settings, follow this guide:Hey, could you please tell me how did you fix the issue with blurry cover images? I'm using Safari too and noticed this.
It worked! Thank you :DD |
Apr 21, 2020 5:36 AM
#250
psm3l0 said: Valerio_Lyndon said: psm3l0 said: Hey, could you please tell me how did you fix the issue with blurry cover images? I'm using Safari too and noticed this.
It worked! Thank you :DD Sry I didn't see your post earlier but I had the same solution as well. Glad you got it fixed! |
More topics from this board
» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )Shishio-kun - Apr 15, 2010 |
7921 |
by takkun_
»»
10 hours ago |
|
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
381 |
by KabukiChouNights
»»
Sep 13, 10:56 AM |
|
» theme helpthreat - Jul 5 |
5 |
by Zaryf
»»
Aug 21, 5:46 AM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1261 |
by KiranaStarr
»»
Aug 16, 5:48 PM |
|
» [CSS] ⭐️ Customize your List Cursor + Cursor FixesShishio-kun - Mar 8, 2021 |
30 |
by Shishio-kun
»»
Jul 28, 3:17 AM |