Last active
November 1, 2020 03:13
-
-
Save minghao912/dfe39f0522e853fceff60bce5741e87f to your computer and use it in GitHub Desktop.
Custom CSS for MAL
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* "Brink" by Valerio Lyndon | |
| * Version 1.5.0 | |
| * | |
| * = TABLE OF CONTENTS = | |
| * | |
| ! IMPORTS | |
| * | |
| ! VARIABLES | |
| @ User | |
| @ Internal | |
| * | |
| ! PAGE-BASE | |
| @ Scrollbars | |
| @ Generic | |
| @ Containers | |
| * | |
| ! HEADER | |
| * | |
| ! USER-MENU | |
| * | |
| ! BANNER | |
| * | |
| ! STATUS-MENU | |
| @ Search | |
| * | |
| ! SORT-BUTTONS | |
| @ Filters | |
| @ Sort-By | |
| * | |
| ! LIST | |
| @ Item-Base | |
| @ Image | |
| @ Status | |
| @ Title | |
| @ Progress/Score | |
| @ Tags | |
| @ Number | |
| @ Type | |
| @ Rated | |
| @ Season | |
| @ Studio/Licensor/Magazine | |
| @ Dates | |
| @ Priority | |
| @ Storage | |
| @ More-Info | |
| @ Loading-Icon | |
| * | |
| ! OVERLAYS | |
| @ iFrames | |
| @ Rewatch-Box | |
| @ Filter-Menu | |
| * | |
| ! FOOTER | |
| * | |
| ! MEDIA-QUERIES | |
| * | |
| ! FIXES | |
| * | |
| ! MODS | |
| */ | |
| /*==============================*\ | |
| !IMPORTS | |
| \*------------------------------*/ | |
| @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelink"; | |
| @\import "https://fonts.googleapis.com/css?family=Sarabun:400,700"; | |
| /*==============================*\ | |
| !VARIABLES @User | |
| \*------------------------------*/ | |
| :root { | |
| /* USER OPTIONS | |
| * | |
| * toggleStats / Toggles list statistics (found in the footer) | |
| * valid values: visible / hidden | |
| * | |
| * togglePV / Toggles anime preview & video links. | |
| * valid values: visible / hidden | |
| * | |
| * toggleTopRatings / Toggles banners on top of highly rated items. | |
| * valid values: visible / hidden | |
| * | |
| * bgDimness / Changes dimming of background image / Higher = Dimmer. | |
| * min value: 0% / max value: 100% | |
| * | |
| * bannerVignetteOpacity / Changes opacity of banner image vignette / Higher = More Opaque. | |
| * min value: 0% / max value: 100% | |
| * | |
| * imageBrightness(Hov) / Changes lightness of cover images / Higher = Brighter. | |
| * min value: 0% / max value: 100% | |
| * | |
| * imageBlurHov / Changes blurring of cover images / Higher = More | |
| * valid values: any positive number value, ending in "px" | |
| * | |
| * infoBGOpacity / Changes opacity of background on list items for improved readability / Set to 0% to hide | |
| * min value: 0% / max value: 100% | |
| */ | |
| --toggleStats: hidden; | |
| --togglePV: hidden; | |
| --toggleTopRatings: visible; | |
| --bgDimness: 100%; | |
| --bannerVignetteOpacity: 90%; | |
| --imageBrightness: 90%; | |
| --imageBrightnessHov: 60%; | |
| --imageBlurHov: 2px; | |
| --infoBGOpacity: 85%; | |
| /* THEME COLOURS | |
| * | |
| * Colours are HSL values but without their surrounding parentheses. | |
| * To get the correct values, simply strip away the surrounding parentheses and blurb. | |
| * For instance, "hsl(244, 42%, 82%)" would simply become "244, 42%, 82%". | |
| * For help with HSL: https://www.w3schools.com/colors/colors_hsl.asp | |
| * | |
| * For help with what each colour controls, see the forum post: https://myanimelist.net/forum/?topicid=1772180 | |
| */ | |
| --bg: 0, 0%, 100%; | |
| --bgAlt: 130, 0%, 69%; | |
| --btn: 240, 3%, 91%; | |
| --btnAlt: 240, 3%, 91%; | |
| --btnLight: 0, 0%, 0%, 0%; | |
| --btnAccent: 240, 70%, 87%; | |
| --border: 240, 3%, 91%; | |
| --accent: 0, 0%, 75%; | |
| --text: 0, 0%, 10%; | |
| --textProminent: 27, 94%, 80%; | |
| --textLinkHov: 0, 0%, 50%; | |
| --current: 120, 65%, 75%; | |
| --completed: 280, 100%, 90%; | |
| --paused: 55, 100%, 70%; | |
| --dropped: 0, 100%, 65%; | |
| --planned: 0, 0%, 80%; | |
| --goldRating: 27, 87%, 67%; | |
| --silverRating: 0, 0%, 80%; | |
| } | |
| /* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\ | |
| @Internal | |
| \*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */ | |
| :root { | |
| /* INTERNALS | |
| * | |
| * More advanced variables. | |
| * Changing the font incorrectly may result in visual bugs. | |
| */ | |
| --font: "Sarabun", "Segoe UI", "Arial", "FontAwesome", sans-serif; | |
| --timeText: 60ms; | |
| --timeButton: 160ms; | |
| --timeButtonLarge: 260ms; | |
| --timeItem: 120ms; | |
| --timeMenu: 350ms; | |
| --bezierFast: cubic-bezier(.38,.32,.25,1); | |
| --bezierSmooth: cubic-bezier(.45,.32,.25,1); | |
| --bezierItemBounce: cubic-bezier(.6,.48,.7,1.45); | |
| --delayMenu: 333.4ms; | |
| /* These SVGs will not display to non-list-owners. | |
| * Find the images for other users in the !FIXES section. | |
| */ | |
| --arrowUp: url(https://files.catbox.moe/uure2q.svg); | |
| --arrowRt: url(https://files.catbox.moe/lqi5fy.svg); | |
| --arrowDn: url(https://files.catbox.moe/m9ot24.svg); | |
| --arrowLt: url(https://files.catbox.moe/68o5bn.svg); | |
| } | |
| /*==============================*\ | |
| !PAGE-BASE @Scrollbars | |
| \*------------------------------*/ | |
| /* Firefox */ | |
| * { | |
| scrollbar-color: hsl(var(--accent)) hsl(var(--bgAlt)); | |
| } | |
| .list-item * { | |
| scrollbar-color: hsl(var(--accent)) hsl(var(--bg)); | |
| } | |
| .data.tags, textarea { | |
| scrollbar-width: thin; | |
| } | |
| /* Chrome */ | |
| *::-webkit-scrollbar { | |
| background: hsl(var(--bgAlt)); | |
| } | |
| *::-webkit-scrollbar-button:vertical { | |
| background: center / 10px auto no-repeat transparent; | |
| } *::-webkit-scrollbar-button:vertical:start { | |
| background-image: var(--arrowUp); | |
| } *::-webkit-scrollbar-button:vertical:end { | |
| background-image: var(--arrowDn); | |
| } *::-webkit-scrollbar-button:horizontal { | |
| background: center / auto 10px no-repeat transparent; | |
| } *::-webkit-scrollbar-button:horizontal:start { | |
| background-image: var(--arrowLt); | |
| } *::-webkit-scrollbar-button:horizontal:end { | |
| background-image: var(--arrowRt); | |
| } | |
| *::-webkit-scrollbar-corner { | |
| background: hsl(var(--bgAlt)); | |
| } | |
| *::-webkit-scrollbar-thumb { | |
| background: hsl(var(--accent)) content-box; | |
| border: 0 solid transparent; | |
| } *::-webkit-scrollbar-thumb:vertical { | |
| border-width: 0 2px; | |
| } *::-webkit-scrollbar-thumb:horizontal { | |
| border-width: 2px 0; | |
| } *::-webkit-scrollbar-thumb:hover { | |
| background-color: hsla(var(--accent), 70%); | |
| } | |
| *::-webkit-scrollbar-track { | |
| width: 5px; | |
| } | |
| .list-item *::-webkit-scrollbar { | |
| background: hsl(var(--bg)); | |
| } | |
| .data.tags::-webkit-scrollbar, | |
| textarea::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| .data.tags::-webkit-scrollbar-button, | |
| textarea::-webkit-scrollbar-button { | |
| display: none; | |
| } | |
| .data.tags::-webkit-scrollbar-thumb:vertical, | |
| textarea::-webkit-scrollbar-thumb:vertical { | |
| border-width: 0 1px; | |
| } .data.tags::-webkit-scrollbar-thumb:horizontal, | |
| textarea::-webkit-scrollbar-thumb:horizontal { | |
| border-width: 1px 0; | |
| } | |
| /* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\ | |
| @Generic | |
| \*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */ | |
| html { | |
| box-sizing: border-box; | |
| } *, *::before, *::after { | |
| box-sizing: inherit; | |
| } | |
| a { | |
| text-decoration: none !important; | |
| transition: color var(--timeText) var(--bezierFast); | |
| } | |
| /* Buttons */ | |
| #header-menu-dropdown .icon-menu, | |
| .list-unit .list-status-title .stats a, | |
| .list-table > tbody:first-of-type::after, | |
| #status-menu .search-container #search-box, | |
| body #fancybox-close, | |
| #advanced-options .advanced-options-button a, | |
| div[style^="width: 300px;"] input { | |
| width: 96px; | |
| height: 32px; | |
| padding: 0; | |
| background: linear-gradient(45deg, hsl(var(--btn)) calc(100% - 20px), hsla(var(--btnLight)) 0%) hsl(var(--btn)) !important; | |
| border: 2px solid hsl(var(--btn)); | |
| border-radius: 3px; | |
| box-shadow: -0.5px 0.7px 2.1px hsla(0, 0%, 0%, 35%); | |
| outline: none; | |
| margin: 0; | |
| color: hsl(var(--text)); | |
| font: normal 14px/26px var(--font); | |
| text-align: center; | |
| white-space: nowrap; | |
| transition: all var(--timeButton) var(--bezierFast); | |
| } #header-menu-dropdown .icon-menu:hover, | |
| .list-unit .list-status-title .stats a:hover, | |
| .list-table > tbody:first-of-type:hover::after, | |
| #status-menu .search-container #search-box:focus-within, | |
| body #fancybox-close:hover, | |
| #advanced-options .advanced-options-button a:hover, | |
| div[style^="width: 300px;"] input:hover { | |
| border-color: hsl(var(--btnAccent)); | |
| color: hsl(var(--accent)); | |
| } | |
| /* Animations */ | |
| @keyframes fade-in { | |
| from { | |
| opacity: 0; | |
| } to { | |
| opacity: 1; | |
| } | |
| } | |
| /* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\ | |
| @Containers | |
| \*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */ | |
| html { | |
| height: 100%; | |
| } | |
| body { | |
| background-position: center; | |
| background-image: none; | |
| } body.ownlist { | |
| position: relative; | |
| min-width: 700px; | |
| min-height: 100%; | |
| padding: 42px 0 60px; | |
| background-color: hsl(var(--bg)) !important; | |
| background-size: cover; | |
| background-attachment: fixed; | |
| background-repeat: no-repeat; | |
| color: hsla(var(--text), 88%) !important; | |
| font: 12px var(--font); | |
| } | |
| body::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: hsla(var(--bg), var(--bgDimness)); | |
| } | |
| #list-container { | |
| width: 100%; | |
| background: none !important; | |
| border: none; | |
| } | |
| .list-block { | |
| position: relative; | |
| width: 100%; | |
| min-height: calc(100vh - (184px + 30vw)); | |
| padding-top: 0; | |
| margin: 0 auto; | |
| } | |
| .list-unit { | |
| width: 100%; | |
| } | |
| .list-table { | |
| display: flex; | |
| width: calc(100% - 16px); | |
| max-width: 1788px; | |
| border: none; | |
| flex-flow: row wrap; | |
| justify-content: center; | |
| } | |
| /* Remove Tutorial/Notices */ | |
| .initialize-tutorial { | |
| display: none !important; | |
| } | |
| /*==============================*\ | |
| !HEADER | |
| \*------------------------------*/ | |
| .header { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| z-index: 100; | |
| width: 100%; | |
| height: 42px; | |
| background: hsl(var(--bgAlt)); | |
| box-shadow: 0 1.68px 3.36px hsla(0, 0%, 0%, 50%); | |
| } | |
| .header a { | |
| color: hsl(var(--text)); | |
| } .header a:hover { | |
| color: hsl(var(--textLinkHov)); | |
| } | |
| /* Left Area */ | |
| .header .header-title { | |
| top: 9px; | |
| left: 42px; | |
| width: 44px; | |
| height: 24px; | |
| background: url(https://files.catbox.moe/8q5kjg.svg) left 4px / auto 20px no-repeat; | |
| color: hsl(var(--text)); | |
| opacity: 0.94; | |
| transition: all var(--timeButton) var(--bezierFast); | |
| } .header .header-title:hover { | |
| opacity: 0.6; | |
| } | |
| /* Right Area */ | |
| .header .header-menu { | |
| position: static; | |
| display: flex; | |
| height: 32px; | |
| margin: 5px 12px 0 0; | |
| flex-flow: column nowrap; | |
| justify-content: center; | |
| float: right; | |
| line-height: 13px; | |
| } [data-owner=""] .header .header-menu { | |
| padding-right: 139px; | |
| } | |
| /* Viewing __ List */ | |
| .header .header-menu .btn-menu { | |
| height: 15px; | |
| align-self: flex-end; | |
| color: hsl(var(--text)); | |
| font-size: 12px; | |
| cursor: text; | |
| } [data-owner="1"] .header .header-menu .btn-menu { | |
| font-size: 14px; | |
| } | |
| .header .btn-menu #header-menu-button { | |
| font-weight: normal; | |
| pointer-events: none; | |
| } | |
| #header-menu-button i { | |
| display: none; | |
| } | |
| /* Affinity, Login/out */ | |
| .header .header-menu .header-info { | |
| height: 15px; | |
| margin: 0; | |
| color: hsla(var(--text), 75%); | |
| } | |
| .header .header-menu .header-info, | |
| .header .header-menu .header-info a { | |
| color: hsla(var(--text), 75%); | |
| font-weight: normal; | |
| } .header .header-menu .header-info a:hover { | |
| color: hsl(var(--textLinkHov)); | |
| } | |
| .header-info a[href="/login.php"], .header-info a[href="/register.php"] { | |
| font-size: 0; | |
| } .header-info a[href="/login.php"]::before { | |
| content: "Login"; | |
| font-size: 12px; | |
| } .header-info a[href="/register.php"]::before { | |
| content: "Register"; | |
| font-size: 12px; | |
| } | |
| /* Switch List Button */ | |
| #header-menu-dropdown { | |
| top: 5px; | |
| right: 12px; | |
| display: block !important; | |
| background: none; | |
| border: none; | |
| box-shadow: none; | |
| } | |
| #header-menu-dropdown .icon-menu { | |
| --btn: var(--btnAlt); | |
| width: 130px; | |
| font-size: 0; | |
| box-shadow: none; | |
| } | |
| #header-menu-dropdown .icon-menu::before { | |
| content: "\f021"; | |
| font-size: 14px; | |
| vertical-align: top; | |
| transition: inherit; | |
| } | |
| #header-menu-dropdown .icon-menu::after { | |
| display: inline-block; | |
| font-size: 14px; | |
| text-indent: 5px; | |
| transition: inherit; | |
| } #header-menu-dropdown .icon-menu.manga-list::after { | |
| content: "Swap to Manga"; | |
| } #header-menu-dropdown .icon-menu.anime-list::after { | |
| content: "Swap to Anime"; | |
| } | |
| #header-menu-dropdown .icon-menu svg, | |
| .header .header-menu .list-menu .icon-menu .text { | |
| display: none; | |
| } | |
| /*==============================*\ | |
| !USER-MENU | |
| \*------------------------------*/ | |
| .list-menu-float { | |
| position: fixed; | |
| left: -228px; | |
| top: 42px; | |
| z-index: 200; | |
| display: flex; | |
| width: 228px; | |
| height: calc(100% - 42px); | |
| background: hsl(var(--bg)); | |
| border: none; | |
| box-shadow: -1.2px 1.68px 3.36px hsla(0, 0%, 0%, 50%); | |
| border-right: 2px solid hsl(var(--border)); | |
| margin: 0 !important; | |
| flex-flow: column nowrap; | |
| font-size: 0 !important; | |
| line-height: 0; | |
| transition: all var(--timeMenu) var(--bezierSmooth) var(--delayMenu); | |
| } .list-menu-float:hover { | |
| left: 0; | |
| transition-delay: 0s; | |
| } | |
| .list-menu-float::after, | |
| .list-container::before { | |
| content: ""; | |
| position: fixed; | |
| left: 0; | |
| top: 0; | |
| width: 42px; | |
| height: 42px; | |
| box-sizing: initial; | |
| background: url(https://files.catbox.moe/0tnlh6.svg) center / auto no-repeat; | |
| color: hsl(var(--text)); | |
| font: 21px/42px "FontAwesome"; | |
| text-align: center; | |
| transition: inherit; | |
| } /* Icon for logged out users */ | |
| .list-container::before { | |
| z-index: 200; | |
| filter: opacity(0.35); | |
| } /* Hide for logged in users */ | |
| .list-menu-float + .list-container::before { | |
| content: none; | |
| } | |
| .list-menu-float::before { | |
| content: "USER MENU"; | |
| position: absolute; | |
| left: 0; | |
| top: -42px; | |
| width: 179px; | |
| height: 42px; | |
| padding-left: 47px; | |
| border-right: 2px solid hsl(var(--border)); | |
| background: inherit; | |
| box-sizing: initial; | |
| color: transparent; | |
| font: bold 16px/42px var(--font); | |
| text-align: left; | |
| transition: color calc(var(--timeMenu) * 0.3) ease-in-out var(--delayMenu); | |
| pointer-events: none; | |
| } .list-menu-float:hover::before { | |
| color: hsl(var(--text)); | |
| transition: color calc(var(--timeMenu) * 0.7) ease-in-out calc(var(--timeMenu) * 0.3); | |
| } | |
| #list-container::after { | |
| content: ""; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| z-index: 190; | |
| width: 100%; | |
| height: 100%; | |
| background: hsla(0, 0%, 0%, 0%); | |
| transition: all var(--timeMenu) var(--bezierSmooth) var(--delayMenu); | |
| pointer-events: none; | |
| } .list-menu-float:hover ~ #list-container::after { | |
| background: hsla(0, 0%, 0%, 78%); | |
| transition-delay: 0s; | |
| } | |
| .ownlist .list-menu-float .icon-menu { | |
| width: 100% !important; | |
| height: auto; | |
| background: none !important; | |
| text-align: left; | |
| transition: all var(--timeButton) var(--bezierFast); | |
| } | |
| .ownlist .list-menu-float .icon-menu svg { | |
| display: none; | |
| } | |
| .ownlist .list-menu-float .icon-menu::after, | |
| .ownlist .list-menu-float .icon-menu:not(.setting) .text, | |
| .ownlist .list-menu-float .icon-menu.setting .text .link-list-setting, | |
| .ownlist .list-menu-float .icon-menu.setting .text .link-style-setting { | |
| position: static; | |
| width: 100%; | |
| height: 40px; | |
| padding: 10px 20px 10px 16px; | |
| background: none; | |
| border: none; | |
| border-left: 4px solid transparent; | |
| overflow: visible; | |
| color: hsl(var(--text)); | |
| font: 15px/20px var(--font); | |
| text-align: left; | |
| opacity: 1; | |
| transition: inherit; | |
| } .ownlist .list-menu-float .icon-menu:hover::after, | |
| .ownlist .list-menu-float .icon-menu:not(.setting):hover .text, | |
| .ownlist .list-menu-float .icon-menu.setting .text .link-list-setting:hover, | |
| .ownlist .list-menu-float .icon-menu.setting .text .link-style-setting:hover { | |
| background: hsl(var(--bgAlt)); | |
| border-color: hsl(var(--accent)); | |
| line-height: 16px; | |
| } | |
| /* Individual Tweaks */ | |
| .ownlist .list-menu-float .icon-menu.setting .text { | |
| position: static; | |
| width: 100%; | |
| height: auto; | |
| opacity: 1; | |
| } | |
| .list-menu-float > :not(.quick-add) { | |
| order: 5; | |
| } .list-menu-float form { | |
| order: 9 !important; | |
| } | |
| .ownlist .list-menu-float .icon-menu.profile::after { | |
| content: "Profile"; | |
| display: block; | |
| } | |
| /* Dividers */ | |
| .ownlist .list-menu-float .icon-menu.quick-add, | |
| .ownlist .list-menu-float .icon-menu.export, | |
| .ownlist .list-menu-float .icon-menu.logout { | |
| margin-top: 15px; | |
| } .ownlist .list-menu-float .icon-menu.quick-add::before, | |
| .ownlist .list-menu-float .icon-menu.export::before, | |
| .ownlist .list-menu-float .icon-menu.logout::before { | |
| content: ""; | |
| position: absolute; | |
| top: -8px; | |
| left: 10px; | |
| width: calc(100% - 20px); | |
| height: 1px; | |
| background: hsla(var(--text), 12%); | |
| pointer-events: none; | |
| } | |
| /*==============================*\ | |
| !BANNER | |
| \*------------------------------*/ | |
| .cover-block { | |
| position: relative; | |
| width: 100%; | |
| } | |
| #cover-image-container { | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| padding: 0; | |
| } | |
| #cover-image-container.hide { | |
| display: none; | |
| } | |
| #cover-image { | |
| width: 100%; | |
| max-width: initial; | |
| height: 30vw; | |
| min-height: calc(700px * 0.3); | |
| max-height: calc(1920px * 0.3); | |
| object-fit: cover; | |
| } | |
| #cover-image-container::after { | |
| content: ""; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: radial-gradient(ellipse farthest-corner at center top, transparent 66.6667%, hsla(var(--bg), var(--bannerVignetteOpacity))); | |
| box-shadow: inset 0 -12px 8px -8px hsla(0, 0%, 0%, 50%); | |
| } | |
| .cover-block .image-container .btn-list-setting { | |
| display: none !important; | |
| } | |
| /*==============================*\ | |
| !STATUS-MENU | |
| \*------------------------------*/ | |
| /* Top Bar */ | |
| .list-block::before, #status-menu::before { | |
| content: ""; | |
| position: absolute; | |
| top: -62px; | |
| left: 0; | |
| width: 100%; | |
| height: 2px; | |
| background: linear-gradient(to right, hsla(var(--accent), 1), hsla(var(--accent), 0.55)) hsl(var(--bg)); | |
| } #status-menu::before { | |
| position: fixed; | |
| top: 42px; | |
| height: 0; | |
| transition: inherit; | |
| } #status-menu.fixed::before { | |
| height: 2px; | |
| } [data-query*='status":1'] .list-block::before, | |
| [data-query*='status":1'] #status-menu::before { | |
| --accent: var(--current); | |
| } [data-query*='status":2'] .list-block::before, | |
| [data-query*='status":2'] #status-menu::before { | |
| --accent: var(--completed); | |
| } [data-query*='status":3'] .list-block::before, | |
| [data-query*='status":3'] #status-menu::before { | |
| --accent: var(--paused); | |
| } [data-query*='status":4'] .list-block::before, | |
| [data-query*='status":4'] #status-menu::before { | |
| --accent: var(--dropped); | |
| } [data-query*='status":6'] .list-block::before, | |
| [data-query*='status":6'] #status-menu::before { | |
| --accent: var(--planned); | |
| } | |
| /* Base */ | |
| #status-menu { | |
| position: relative; | |
| width: 100%; | |
| height: 42px; | |
| padding: 0 calc(198px + 0.07 * (100vw - 980px)); | |
| background: none; | |
| border: none; | |
| margin: 17px 0 3px; | |
| pointer-events: none; | |
| } #status-menu.fixed { | |
| position: fixed; | |
| z-index: 150; | |
| width: calc(100% - 86px); | |
| padding-left: 0; | |
| background: hsl(var(--bgAlt)); | |
| margin: 0 0 0 86px; | |
| animation: var(--timeMenu) var(--bezierFast) fade-in; | |
| pointer-events: auto; | |
| } | |
| #status-menu .status-menu { | |
| position: static; | |
| display: flex; | |
| height: 42px; | |
| min-width: 570px; | |
| max-width: 700px; | |
| margin: 0 auto; | |
| justify-content: space-around; | |
| align-items: center; | |
| pointer-events: auto; | |
| } | |
| #status-menu .status-button { | |
| display: block; | |
| height: 32px; | |
| padding: 0 12px; | |
| border-radius: 3px; | |
| flex: 0 1 auto; | |
| font: 0/30px var(--font); | |
| /*text-shadow: -0.6px 0.84px 1.68px #000;*/ | |
| transform: none; | |
| } | |
| #status-menu .status-button::before { | |
| color: hsla(var(--text), 48%); | |
| font-size: 18px; | |
| display: block; | |
| transition: all var(--timeButtonLarge) var(--bezierSmooth); | |
| pointer-events: none; | |
| } #status-menu .status-button.all_anime::before { | |
| content: "ALL"; | |
| } #status-menu .status-button.watching::before, | |
| #status-menu .status-button.reading::before { | |
| content: "CURRENT"; | |
| } #status-menu .status-button.completed::before { | |
| content: "COMPLETED"; | |
| } #status-menu .status-button.onhold::before { | |
| content: "PAUSED"; | |
| } #status-menu .status-button.dropped::before { | |
| content: "DROPPED"; | |
| } #status-menu .status-button.plantowatch::before, | |
| #status-menu .status-button.plantoread::before { | |
| content: "PLANNED"; | |
| } #status-menu .status-button.on::before { | |
| color: hsl(var(--text)); | |
| font-weight: bold; | |
| } #status-menu .status-button:hover::before { | |
| color: hsl(var(--text)); | |
| transform: translateY(-2px); | |
| } | |
| #status-menu .status-button::after { | |
| content: none; | |
| } | |
| /* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\ | |
| @Search | |
| \*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */ | |
| #status-menu .search-container { | |
| position: absolute; | |
| top: 5px; | |
| right: 20px; | |
| width: calc(169px + 0.07 * (100vw - 980px)); | |
| } #status-menu.fixed .search-container { | |
| right: 12px; | |
| width: calc(177px + 0.07 * (100vw - 980px)); | |
| } | |
| #status-menu .search-container #search-box { | |
| width: 100%; | |
| transition: | |
| box-shadow var(--timeMenu) var(--bezierFast), | |
| border-color var(--timeButton) var(--bezierFast); | |
| } #status-menu.fixed .search-container #search-box { | |
| --btn: var(--btnAlt); | |
| box-shadow: none; | |
| } | |
| #status-menu .search-container #search-box input { | |
| background: none; | |
| padding: 2px 6px 2px 30px; | |
| border: none; | |
| color: hsla(var(--text), 80%); | |
| line-height: 28px; | |
| } #status-menu .search-container #search-box input:focus { | |
| color: hsl(var(--text)); | |
| outline: none; | |
| } | |
| #status-menu .search-container #search-box::after { | |
| content: "\f002"; | |
| position: absolute; | |
| top: 0; | |
| left: 4px; | |
| width: 24px; | |
| color: hsla(var(--text), 83%); | |
| font-size: 16px; | |
| line-height: 30px; | |
| text-align: center; | |
| } | |
| #status-menu .search-container #search-button { | |
| display: none; | |
| } | |
| /*==============================*\ | |
| !SORT-BUTTONS @Filters | |
| \*------------------------------*/ | |
| .list-unit .list-status-title { | |
| position: absolute; | |
| top: -40px; | |
| left: 20px; | |
| z-index: 30; | |
| width: 80px; | |
| height: 32px; | |
| background: none; | |
| } | |
| .list-unit .list-status-title .text { | |
| display: none; | |
| } | |
| .list-unit .list-status-title .stats { | |
| position: static; | |
| font-size: 0; | |
| white-space: nowrap; | |
| } | |
| .list-unit .list-status-title .stats a { | |
| display: inline-block; | |
| width: calc(80px + 0.035 * (100vw - 980px)); | |
| } | |
| .list-unit .list-status-title .stats a:first-child { | |
| display: none; | |
| } | |
| /* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\ | |
| @Sort-By | |
| \*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */ | |
| .list-table > tbody:first-of-type { | |
| position: absolute; | |
| top: -40px; | |
| left: calc(109px + 0.035 * (100vw - 980px)); | |
| z-index: 35; | |
| width: calc(80px + 0.035 * (100vw - 980px)); | |
| height: 32px; | |
| background: none !important; | |
| pointer-events: none; | |
| } .list-table > tbody:first-of-type:hover { | |
| pointer-events: auto; | |
| } | |
| .list-table > tbody:first-of-type::after { | |
| content: "\f0dc Order"; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| z-index: -1; | |
| display: block; | |
| width: 100%; | |
| pointer-events: auto; | |
| } | |
| .list-table > tbody:first-of-type::before { | |
| content: ""; | |
| display: block; | |
| width: calc(100% + 24px); | |
| height: 44px; | |
| border-radius: 12px 12px 0 0 / 100% 100% 0 0; | |
| margin: 0 0 -3px -12px; | |
| } | |
| .list-table .list-table-header { | |
| position: relative; | |
| left: 50%; | |
| display: inline-flex; | |
| min-width: calc(100% + 24px); | |
| height: auto; | |
| background: hsl(var(--btn)); | |
| border-radius: 3px; | |
| box-shadow: -1.2px 1.68px 3.36px hsla(0, 0%, 0%, 50%); | |
| flex-flow: column nowrap; | |
| overflow: hidden; | |
| opacity: 0; | |
| transform: translateX(-50%); | |
| transition: all var(--timeButtonLarge) var(--bezierFast); | |
| } .list-table tbody:first-of-type:hover .list-table-header { | |
| opacity: 1; | |
| } | |
| .list-table .list-table-header .header-title { | |
| display: block; | |
| width: auto !important; | |
| height: auto; | |
| padding: 0 !important; | |
| background: none; | |
| border: none; | |
| font-size: 0 !important; | |
| line-height: 0; | |
| text-align: center !important; | |
| } | |
| .list-table .list-table-header .header-title a { | |
| width: 100%; | |
| height: 32px; | |
| padding: 0 8px; | |
| border-left: 2px solid hsl(var(--btn)); | |
| border-right: 2px solid transparent; | |
| color: hsl(var(--text)) !important; | |
| font-size: 13px !important; | |
| line-height: 30px; | |
| font-weight: normal; | |
| text-indent: -1px; | |
| transition: all var(--timeButton) var(--bezierFast) !important; | |
| } .list-table .list-table-header .header-title a:hover { | |
| background: hsla(var(--btnLight)); | |
| border-left-color: hsl(var(--btnAccent)); | |
| line-height: 28px; | |
| } | |
| .list-table .list-table-header .header-title .sort-icon { | |
| margin-left: 1px; | |
| color: hsl(var(--accent)); | |
| font: 10.5px var(--font); | |
| vertical-align: baseline; | |
| } .list-table .list-table-header .header-title .fa-sort-asc::before { | |
| content: "ASC"; | |
| } .list-table .list-table-header .header-title .fa-sort-desc::before { | |
| content: "DESC"; | |
| } | |
| .header-title.status, | |
| .header-title.number, | |
| .header-title.image, | |
| .header-title.tags, | |
| .header-title.days { | |
| display: none !important; | |
| } | |
| /*==============================*\ | |
| !LIST | |
| \*------------------------------*/ | |
| /* Empty Table Message */ | |
| .list-table[data-items="[]"]::before, | |
| .list-table[data-items="[]"]::after { | |
| content: ""; | |
| display: block; | |
| width: calc(224px * 3); | |
| height: 309px; | |
| background: url(https://i.imgur.com/5G6hsJk.png) hsl(var(--bg)); | |
| background-blend-mode: screen; | |
| padding: 48px calc((224px * 1.5) - 90px); | |
| margin: 0 auto; | |
| } | |
| /* No Entries (Generic/Non-Owner) */ | |
| .list-table[data-items="[]"]::after { | |
| content: "No entries found."; | |
| background: | |
| linear-gradient( | |
| to right, | |
| hsla(var(--bg), 100%), | |
| hsla(var(--bg), 0%) 12.5%, | |
| hsla(var(--bg), 0%) 87.5%, | |
| hsla(var(--bg), 100%) | |
| ); | |
| margin-top: -309px; | |
| font-size: 18px; | |
| text-align: center; | |
| } /* No Entries (Owner) */ | |
| [data-owner="1"] .list-table[data-items="[]"]::after { | |
| content: "No entries found. Why not add some?"; | |
| } /* No Entries (Bad Search) */ | |
| [data-query*='"s":'] .list-table[data-items="[]"]::after { | |
| content: "No entries found. Perhaps your search terms are too restrictive?"; | |
| } | |
| @media (min-width: calc(224px * 5 + 33px)) { | |
| .list-table[data-items="[]"]::before, | |
| .list-table[data-items="[]"]::after { | |
| width: calc(224px * 5); | |
| padding: 48px calc((224px * 2.5) - 90px); | |
| } | |
| .list-table[data-items="[]"]::after { | |
| background: | |
| linear-gradient( | |
| to right, | |
| hsla(var(--bg), 100%), | |
| hsla(var(--bg), 0%) 20%, | |
| hsla(var(--bg), 0%) 80%, | |
| hsla(var(--bg), 100%) | |
| ); | |
| } | |
| } | |
| @media (min-width: calc(224px * 7 + 33px)) { | |
| .list-table[data-items="[]"]::before, | |
| .list-table[data-items="[]"]::after { | |
| width: calc(224px * 7); | |
| padding: 48px calc((224px * 3.5) - 90px); | |
| } | |
| .list-table[data-items="[]"]::after { | |
| background: | |
| linear-gradient( | |
| to right, | |
| hsla(var(--bg), 100%), | |
| hsla(var(--bg), 0%) 25%, | |
| hsla(var(--bg), 0%) 85%, | |
| hsla(var(--bg), 100%) | |
| ); | |
| } | |
| } | |
| /* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\ | |
| @Item-Base | |
| \*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */ | |
| .list-item { | |
| position: relative; | |
| z-index: 1; | |
| display: block; | |
| width: 210px; | |
| height: 300px; | |
| background: none !important; | |
| margin: calc((300px * -0.025) + 12px) calc((210px * -0.025) + 12px); | |
| flex: 0 0 auto; | |
| color: hsl(var(--text)); | |
| transform: scale(0.95); | |
| transition: all var(--timeItem) var(--bezierItemBounce); | |
| } .list-item:hover { | |
| transform: scale(1); | |
| } | |
| .list-table-data { | |
| display: flex; | |
| width: 50%; | |
| padding: 13px 0 0 12px; | |
| flex-flow: column nowrap; | |
| align-items: flex-start; | |
| } | |
| .list-table .list-table-data .data { | |
| padding: 0; | |
| border-width: 0; | |
| border-style: solid; | |
| } | |
| .data:not(.image) { | |
| z-index: 5; | |
| /*text-shadow: -0.6px 0.84px 1.68px #000;*/ | |
| line-height: 15px; | |
| opacity: 0; | |
| transition: | |
| all var(--timeButton) var(--bezierFast), | |
| opacity calc(var(--timeItem) * 1.5) var(--bezierFast); | |
| } .list-item:hover .data:not(.image) { | |
| opacity: 1; | |
| } | |
| .list-table .list-table-data .data a { | |
| color: hsl(var(--text)) !important; | |
| transition-property: all; | |
| } .list-table .list-table-data .data a:not(.edit-disabled):hover { | |
| color: hsl(var(--textLinkHov)) !important; | |
| } .list-table .list-table-data a.edit-disabled { | |
| pointer-events: none; | |
| } | |
| /* Dynamic Columns */ | |
| .data.type, | |
| .data.rated, | |
| .data.season, | |
| .data.started, | |
| .data.finished, | |
| .data.days, | |
| .data.airing-started, | |
| .data.airing-finished, | |
| .data.studio, | |
| .data.licensor, | |
| .data.magazine, | |
| .data.priority, | |
| .data.storage, | |
| .data.retail { | |
| position: relative; | |
| max-width: 100%; | |
| min-height: 15px; | |
| padding-left: 15px !important; | |
| margin-bottom: 4px; | |
| text-align: left !important; | |
| overflow-wrap: break-word; | |
| cursor: default; | |
| } | |
| /* Icons */ | |
| .data.type::after, | |
| .data.rated::after, | |
| .data.season::after, | |
| .data.started::after, | |
| .data.days::before, | |
| .data.airing-started::after, | |
| .data.studio::after, | |
| .data.licensor::after, | |
| .data.magazine::after, | |
| .data.priority::after, | |
| .data.storage::after, | |
| .data.retail::after { | |
| position: absolute; | |
| top: 0; | |
| left: -3px; | |
| width: 16px; | |
| height: 15px; | |
| color: hsla(var(--text), 83%); | |
| text-align: center; | |
| } | |
| /* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\ | |
| @Image | |
| \*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */ | |
| .data.image, | |
| .data.image .link, | |
| .data.image .image, | |
| .data.image .link::after { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 100% !important; | |
| height: 100% !important; | |
| border: none !important; | |
| object-fit: cover; | |
| } | |
| .data.image { | |
| z-index: -1; | |
| background: hsla(var(--bg), 70%); | |
| border-radius: 6px; | |
| box-shadow: -1.2px 1.68px 3.36px hsla(0, 0%, 0%, 35%); | |
| overflow: hidden; | |
| pointer-events: none; | |
| } | |
| .data.image .link { | |
| filter: | |
| brightness(var(--imageBrightness)) | |
| opacity(var(--imageBrightness)); | |
| transition: filter var(--timeItem) var(--bezierFast) !important; | |
| } .list-item:hover .data.image .link { | |
| filter: | |
| brightness(var(--imageBrightnessHov)) | |
| opacity(var(--imageBrightnessHov)) | |
| blur(var(--imageBlurHov)); | |
| } | |
| .data.image .link::after { | |
| content: ""; | |
| background: center / cover no-repeat scroll; | |
| background-image: inherit; | |
| } | |
| /* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\ | |
| @Status | |
| \*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */ | |
| /*------------------------------*\ | |
| |* Category-Coloured Info BG *| | |
| |* - - - - - V1.2.0 - - - - - *| | |
| \* - - - - - - - - - - - - - - -*/ | |
| .data.status { | |
| display: none !important; | |
| } | |
| .data.watching ~ .title, | |
| .data.reading ~ .title { | |
| background: hsla(var(--current), var(--infoBGOpacity)); | |
| } .data.completed ~ .title { | |
| background: hsla(var(--completed), var(--infoBGOpacity)); | |
| } .data.onhold ~ .title { | |
| background: hsla(var(--paused), var(--infoBGOpacity)); | |
| } .data.dropped ~ .title { | |
| background: hsla(var(--dropped), var(--infoBGOpacity)); | |
| } .data.plantowatch ~ .title, | |
| .data.plantoread ~ .title { | |
| background: hsla(var(--planned), var(--infoBGOpacity)); | |
| } | |
| /* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\ | |
| @Title | |
| \*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */ | |
| .data.title { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| z-index: 9; | |
| width: 100%; | |
| padding: 5px 0 27px !important; | |
| background: hsla(var(--btn), var(--infoBGOpacity)); | |
| border-radius: 0 0 6px 6px; | |
| order: 95; | |
| opacity: 1; | |
| } | |
| .data.title .link { | |
| display: inline-block; | |
| max-width: 100%; | |
| max-height: 64px; | |
| padding: 5px 12px; | |
| overflow: hidden; | |
| font-size: 13px !important; | |
| line-height: 18px; | |
| } | |
| .title [class^="icon-watch"] { | |
| position: absolute; | |
| bottom: 12px; | |
| right: 7.5px; | |
| z-index: 1; | |
| width: auto; | |
| height: 15px; | |
| background: none; | |
| margin: 0; | |
| font-size: 0; | |
| text-indent: 0; | |
| /*text-shadow: 0.84px 0.6px 1.68px #000;*/ | |
| opacity: 1 !important; | |
| transform: rotate(90deg); | |
| transform-origin: right bottom; | |
| /*Toggle*/ | |
| visibility: var(--togglePV); | |
| } | |
| [class^="icon-watch"]::after { | |
| content: "\f144 VIDEOS"; | |
| color: hsla(var(--text), 80%); | |
| font-size: 12px; | |
| line-height: 1; | |
| letter-spacing: 1.5px; | |
| transition: color var(--timeText) var(--bezierFast); | |
| } .title [class^="icon-watch"]:hover::after { | |
| color: hsl(var(--textLinkHov)); | |
| } | |
| .content-status, | |
| .rewatching, | |
| .rereading { | |
| position: absolute; | |
| bottom: 270px; | |
| left: 7.5px; | |
| height: 15px; | |
| color: hsl(var(--textProminent)) !important; | |
| font-size: 12px !important; | |
| font-weight: bold; | |
| line-height: 1; | |
| letter-spacing: 1.5px; | |
| text-transform: uppercase; | |
| /*text-shadow: 0.84px 0.6px 1.68px #000;*/ | |
| transform: rotate(90deg); | |
| transform-origin: left top; | |
| pointer-events: none; | |
| } | |
| .add-edit-more { | |
| position: absolute; | |
| bottom: 267px; | |
| right: 6px; | |
| width: auto; | |
| margin: 0 !important; | |
| font-size: 0 !important; | |
| opacity: 0; | |
| transition: inherit; | |
| } .list-item:hover .add-edit-more { | |
| opacity: 1; | |
| } | |
| .add-edit-more span { | |
| float: left; | |
| } | |
| .add-edit-more a { | |
| display: block; | |
| padding: 6px; | |
| font-size: 12px; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } .add-edit-more span:nth-of-type(1) a { | |
| padding-right: 4.5px; | |
| } .add-edit-more .more a { | |
| padding-left: 4.5px; | |
| font-size: 0; | |
| } | |
| .add-edit-more .more a::before { | |
| content: "NOTES"; | |
| font-size: 12px; | |
| vertical-align: top; | |
| } | |
| /* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\ | |
| @Progress/@Score | |
| \*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */ | |
| .data.progress, | |
| .data.chapter, | |
| .data.volume, | |
| .data.score { | |
| position: absolute; | |
| bottom: 12px; | |
| z-index: 10; | |
| height: 15px; | |
| white-space: nowrap; | |
| cursor: default; | |
| } | |
| /* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\ | |
| Score | |
| \*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */ | |
| .data.score { | |
| left: 12px; | |
| max-width: calc(66% - 12px); | |
| text-align: left !important; | |
| opacity: 1; | |
| } | |
| .data.score::before { | |
| white-space: pre; | |
| vertical-align: top; | |
| } [data-query*='"status":7'] .watching ~ .data.score::before, | |
| [data-query*='"status":7'] .reading ~ .data.score::before { | |
| content: "Current | "; | |
| } [data-query*='"status":7'] .completed ~ .data.score::before { | |
| content: "Completed | "; | |
| } [data-query*='"status":7'] .onhold ~ .data.score::before { | |
| content: "Paused | "; | |
| } [data-query*='"status":7'] .dropped ~ .data.score::before { | |
| content: "Dropped | "; | |
| } [data-query*='"status":7'] .plantowatch ~ .data.score::before, | |
| [data-query*='"status":7'] .plantoread ~ .data.score::before { | |
| content: "Planned | "; | |
| } | |
| .data.score .link { | |
| display: inline-flex; | |
| font-size: 14px !important; | |
| vertical-align: top; | |
| text-transform: capitalize; | |
| } | |
| .data.score .link::before { | |
| content: "Scored "; | |
| font-size: 12px; | |
| font-weight: normal; | |
| white-space: pre; | |
| } | |
| /* Planned */ | |
| [class*="planto"] ~ .data.score .link { | |
| display: none; | |
| } | |
| [class*="planto"] ~ .data.score::before { | |
| content: "Planned" !important; | |
| } | |
| /* Not Rated */ | |
| .data .score-na { | |
| font-size: 0; | |
| order: -1; | |
| } .data .score-na::before { | |
| content: "Not "; | |
| font-size: 12px; | |
| font-weight: normal; | |
| } | |
| /* Top Rated Banners for 9 & 10 rated items. These do not display on ordered lists. */ | |
| body:not([data-query*='order":4']) .data .score-9::before, | |
| body:not([data-query*='order":4']) .data .score-10::before { | |
| content: ""; | |
| position: absolute; | |
| left: -12px; | |
| bottom: 282px; | |
| z-index: -1; | |
| width: 210px; | |
| height: 6px; | |
| border-top: 2px solid hsl(var(--goldRating)); | |
| border-radius: 6px 6px 0 0; | |
| pointer-events: none; | |
| /*Toggle*/ | |
| visibility: var(--toggleTopRatings); | |
| } body:not([data-query*='order":4']) .data .score-9::before { | |
| border-color: hsl(var(--silverRating)); | |
| } | |
| body:not([data-query*='order":4']) .data .score-9::after, | |
| body:not([data-query*='order":4']) .data .score-10::after { | |
| content: "TOP RATED"; | |
| position: absolute; | |
| left: 43px; | |
| bottom: 277px; | |
| z-index: -1; | |
| width: 100px; | |
| height: 16px; | |
| border-radius: 3px; | |
| background: hsl(var(--goldRating)); | |
| color: hsl(var(--bg)); | |
| font: bold 13px/13px var(--font); | |
| text-align: center; | |
| letter-spacing: 1px; | |
| /*text-shadow: none;*/ | |
| pointer-events: none; | |
| visibility: var(--toggleTopRatings); | |
| } body:not([data-query*='order":4']) .data .score-9::after { | |
| background: hsl(var(--silverRating)); | |
| } | |
| /* Prevent change score box layout flicker (caused by default list functions) */ | |
| .data.score a:not([style="display: none;"]) + select { | |
| display: none; | |
| } | |
| /* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\ | |
| Progress | |
| \*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */ | |
| .data.progress, | |
| .data.chapter, | |
| .data.volume { | |
| right: 12px; | |
| text-align: right !important; | |
| opacity: .64; | |
| } | |
| /* Remove Slash */ | |
| .progress div, | |
| .chapter div, | |
| .volume div { | |
| font-size: 0; | |
| } | |
| .progress span:first-of-type:not(:only-of-type) a::after, | |
| .chapter span:first-of-type:not(:only-of-type) a::after, | |
| .volume span:first-of-type:not(:only-of-type) a::after { | |
| content: " of "; | |
| } | |
| /* Watched # */ | |
| .data.progress a, | |
| .data.chapter a, | |
| .data.volume a { | |
| font-size: 12px; | |
| } | |
| /* Watched # - Planned */ | |
| .plantowatch ~ .data.progress span:first-of-type, | |
| .plantoread ~ .data.chapter span:first-of-type, | |
| .plantoread ~ .data.volume span:first-of-type { | |
| opacity: 0; | |
| transition: all var(--timeItem) var(--bezierFast); | |
| } | |
| .list-item:hover .plantowatch ~ .data.progress span:first-of-type, | |
| .list-item:hover .plantoread ~ .data.chapter span:first-of-type, | |
| .list-item:hover .plantoread ~ .data.volume span:first-of-type { | |
| opacity: 1; | |
| } | |
| /* Total # */ | |
| .progress span:nth-of-type(2), | |
| .chapter span:nth-of-type(2), | |
| .volume span:nth-of-type(2) { | |
| font-size: 12px; | |
| vertical-align: top; | |
| } | |
| /* Total # - Completed */ | |
| .progress span:only-of-type, | |
| .chapter span:only-of-type, | |
| .volume span:only-of-type { | |
| font-size: 14px; | |
| } | |
| .progress span:last-of-type::after { | |
| content: "ep"; | |
| } .chapter span:last-of-type::after { | |
| content: "ch"; | |
| } .volume span:last-of-type::after { | |
| content: "vol"; | |
| } | |
| span:nth-of-type(2)::after { | |
| color: hsl(var(--text)); | |
| text-shadow: inherit; | |
| transition: all var(--timeItem) var(--bezierFast); | |
| } [data-owner="1"] .list-item:hover span:nth-of-type(2)::after { | |
| color: transparent; | |
| text-shadow: none; | |
| } | |
| /* Increment Total */ | |
| .list-table .list-item .data [class^="icon-add-"] { | |
| position: absolute; | |
| top: 3px; | |
| right: 0; | |
| display: inline-block; | |
| color: hsla(var(--text), 0%) !important; | |
| font-size: 12px !important; | |
| text-shadow: none; | |
| transition: all var(--timeItem) var(--bezierFast); | |
| } .list-table .list-item:hover .data [class^="icon-add-"] { | |
| color: hsla(var(--text), 83%) !important; | |
| text-shadow: inherit; | |
| } | |
| [class^="icon-add-"] .fa::before { | |
| content: "\f067"; | |
| } | |
| /* Remove Unsupported Items */ | |
| .data.chapter + .data.volume { | |
| display: none !important; | |
| } | |
| /* Prevent change episode box layout flicker (caused by default list functions) */ | |
| .progress a + input, | |
| .chapter a + input, | |
| .volume a + input { | |
| display: none; | |
| } | |
| /* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\ | |
| @Tags | |
| \*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */ | |
| .data.tags { | |
| position: absolute; | |
| top: 51px; | |
| right: 6px; | |
| width: calc(50% - 6px); | |
| padding: 0 6px 0 0 !important; | |
| height: 148px; | |
| overflow-x: hidden; | |
| overflow-y: auto; | |
| } | |
| .data.tags div, | |
| .data.tags a { | |
| position: relative; | |
| } | |
| .data.tags span { | |
| display: block; | |
| min-height: 15px; | |
| margin-bottom: 4px; | |
| font-size: 0; | |
| line-height: 0; | |
| text-align: right; | |
| } | |
| .data.tags a { | |
| display: inline-block; | |
| padding-right: 15px; | |
| font: 12px/15px var(--font) !important; | |
| vertical-align: top; | |
| overflow-wrap: break-word; | |
| } | |
| .list-table .list-table-data .tags .edit { | |
| width: auto; | |
| float: right; | |
| color: hsl(var(--text)) !important; | |
| } | |
| .data.tags a::after { | |
| position: absolute; | |
| top: 1px; | |
| right: 0; | |
| display: inline-block; | |
| color: hsla(var(--text), 83%); | |
| } .data.tags span a::after { | |
| content: "\f02b"; | |
| } .data.tags .edit::after { | |
| content: "\f040"; | |
| } | |
| .data.tags textarea { | |
| position: absolute; | |
| top: 0; | |
| right: 6px; | |
| display: block; | |
| width: calc(100% - 6px) !important; | |
| height: 99% !important; | |
| border-style: solid; | |
| border-radius: 3px; | |
| overflow: auto; | |
| word-break: break-all; | |
| resize: none; | |
| } | |
| /* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\ | |
| @Number | |
| \*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */ | |
| .data.number { | |
| height: 15px; | |
| margin: -1px 0 24px; | |
| font-size: 14px; | |
| font-weight: bold; | |
| opacity: 0.53; | |
| cursor: default; | |
| } | |
| .data.number::before { | |
| content: "#"; | |
| font-size: 12px; | |
| } | |
| /* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\ | |
| @Type | |
| \*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */ | |
| .data.type::after { | |
| content: "\f069"; | |
| } | |
| .data.type { | |
| order: 10; | |
| } | |
| /* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\ | |
| @Rated | |
| \*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */ | |
| .data.rated::after { | |
| content: "\f129"; | |
| } | |
| .data.rated { | |
| order: 20; | |
| } | |
| .data.rated:empty::before { | |
| content: "Unrated"; | |
| } | |
| /* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\ | |
| @Season | |
| \*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */ | |
| .data.season::after { | |
| content: "\f1bb"; | |
| } | |
| .data.season { | |
| order: 30; | |
| } | |
| .data.season:empty::before { | |
| content: "Unknown"; | |
| } | |
| /* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\ | |
| @Studio/@Licensor/@Magazine | |
| \*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */ | |
| .data.studio::after { | |
| content: "\f0b1"; | |
| } .data.licensor::after { | |
| content: "\f19c"; | |
| } .data.magazine::after { | |
| content: "\f02d"; | |
| } | |
| .data.studio, | |
| .data.licensor, | |
| .data.magazine { | |
| order: 50; | |
| } | |
| .data.studio:empty::before, | |
| .data.licensor:empty::before, | |
| .data.magazine:empty::before { | |
| content: "Unknown"; | |
| color: hsla(var(--text), 80%); | |
| } | |
| /* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\ | |
| @Dates | |
| \*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */ | |
| .data.started::after { | |
| content: "\f073"; | |
| } .data.airing-started::after { | |
| content: "\f073"; | |
| } .data.days::before { | |
| content: "\f017"; | |
| } | |
| .data[class*="started"], | |
| .data[class*="finished"], | |
| .data.days { | |
| order: 70; | |
| } | |
| .data.started, | |
| .data.airing-started { | |
| margin: 0; | |
| } | |
| .data[class*="started"]::before { | |
| display: block; | |
| color: hsla(var(--text), 80%); | |
| font-size: 12px; | |
| } .anime .data.started::before { | |
| content: "Watched"; | |
| } .manga .data.started::before { | |
| content: "Read"; | |
| } .anime .data.airing-started::before { | |
| content: "Aired"; | |
| } .manga .data.airing-started::before { | |
| content: "Published"; | |
| } | |
| .data.finished::before, | |
| .data.airing-finished::before { | |
| content: "to "; | |
| color: hsla(var(--text), 80%); | |
| } | |
| .data.days::after { | |
| content: "Days"; | |
| } | |
| /* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\ | |
| @Priority | |
| \*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */ | |
| .data.priority::after { | |
| content: "\f005"; | |
| } | |
| .data.priority { | |
| display: block !important; | |
| order: 90; | |
| } | |
| .status:not([class*="planto"]) ~ .data.priority { | |
| display: none !important; | |
| } | |
| /* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\ | |
| @Storage | |
| \*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */ | |
| .data.storage::after, | |
| .data.retail::after { | |
| content: "\f1c0"; | |
| } | |
| .data.storage, | |
| .data.retail { | |
| order: 95; | |
| } | |
| /* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\ | |
| @More-Info | |
| \*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */ | |
| .more-info { | |
| position: absolute; | |
| left: 0; | |
| bottom: 0; | |
| z-index: 25; | |
| width: 100%; | |
| height: 100%; | |
| border: none !important; | |
| border-radius: 5px; | |
| overflow: hidden; | |
| opacity: 0; | |
| transition: all calc(var(--timeItem) * 1.5) var(--bezierFast); | |
| animation: var(--timeItem) var(--bezierFast) backwards fade-in; | |
| pointer-events: none; | |
| } .list-item:hover .more-info { | |
| opacity: 1; | |
| } | |
| .more-info td, | |
| .more-info table, | |
| .more-info tbody, | |
| .more-info tr { | |
| display: block; | |
| } | |
| .more-content { | |
| width: 100%; | |
| height: calc(100% - 37px); | |
| padding: 0 !important; | |
| background: hsla(var(--bgAlt), 0.96); | |
| border-radius: 6px 6px 0 0; | |
| box-shadow: 0 0 3.36px 1.68px hsla(0, 0%, 0%, 50%); | |
| margin-top: 37px; | |
| overflow-x: hidden; | |
| overflow-y: auto; | |
| backdrop-filter: blur(var(--imageBlurHov)); | |
| pointer-events: auto; | |
| } | |
| .more-content table { | |
| padding: 9px 15px 12px !important | |
| } | |
| .list-table .more-info .more-content a { | |
| color: hsl(var(--text)); | |
| text-decoration: underline hsla(var(--text), 50%) !important; | |
| } .list-table .more-info .more-content a:hover { | |
| color: hsl(var(--textLinkHov)); | |
| } | |
| /* Remove unwanted info */ | |
| .td1::first-line { | |
| font-size: 0; | |
| line-height: 0; | |
| } | |
| .more-info br, | |
| .more-info div:first-of-type { | |
| display: none; | |
| } | |
| .anime .more-info small ~ br, | |
| .manga .more-info br:nth-of-type(n+9) { | |
| display: initial; | |
| } | |
| /* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\ | |
| @Loading-Icon | |
| \*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */ | |
| .list-unit .loading-space { | |
| height: auto; | |
| margin: 18px 0 0; | |
| } | |
| .list-unit .loading-space i { | |
| width: 24px; | |
| height: 24px; | |
| background: url(https://files.catbox.moe/qs9f3v.svg) center / auto no-repeat; | |
| margin: 0 auto; | |
| font-size: 0; | |
| animation: 1.2s cubic-bezier(.35,0,.35,1) 0s infinite both loading; | |
| } | |
| @keyframes loading { | |
| from { | |
| transform: rotate(45deg); | |
| } to { | |
| transform: rotate(405deg); | |
| } | |
| } | |
| /*==============================*\ | |
| !OVERLAYS | |
| \*------------------------------*/ | |
| #fancybox-overlay { | |
| background: #000 !important; | |
| opacity: 0.78 !important; | |
| } | |
| body #fancybox-close { | |
| box-shadow: none; | |
| } | |
| #fancybox-close::before { | |
| content: "Close"; | |
| } | |
| /* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\ | |
| @iFrames | |
| \*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */ | |
| body #fancybox-wrap { | |
| left: calc(50% - (190px + 20vw)) !important; | |
| width: calc(380px + 40vw) !important; | |
| height: auto !important; | |
| padding: 0; | |
| } | |
| #fancybox-outer .fancy-bg { | |
| display: none; | |
| } | |
| body #fancybox-outer { | |
| padding: 14px 12px 56px; | |
| background: hsl(var(--bg)); | |
| border-radius: 8px; | |
| box-shadow: -1.6px 2.24px 4.48px hsla(0, 0%, 0%, 70%); | |
| } | |
| body #fancybox-inner { | |
| position: static; | |
| width: 100% !important; | |
| border-radius: 4px; | |
| } | |
| body #fancybox-frame { | |
| filter: | |
| sepia(20%) | |
| invert(91.5%); | |
| } | |
| #fancybox-outer #fancybox-close { | |
| top: auto; | |
| bottom: 12px; | |
| right: 20px; | |
| } | |
| /* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\ | |
| @Rewatch-Box | |
| \*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */ | |
| .ownlist #fancybox-wrap:not([style*="width: 1000px;"]) { | |
| left: calc(50% - 160px) !important; | |
| width: auto !important; | |
| height: auto !important; | |
| } | |
| #fancybox-wrap:not([style*="width: 1000px;"]) #fancybox-close { | |
| display: none !important; | |
| } | |
| #fancybox-wrap:not([style*="width: 1000px;"]) #fancybox-outer { | |
| padding: 12px; | |
| } | |
| #fancybox-wrap:not([style*="width: 1000px;"]) #fancybox-inner { | |
| width: auto !important; | |
| height: auto !important; | |
| } | |
| div[style^="width: 300px;"] { | |
| width: 100% !important; | |
| height: 100% !important; | |
| font: 0/0 var(--font) !important; | |
| } | |
| div[style^="width: 300px;"]::before { | |
| content: 'Finished rewatching?'; | |
| color: hsla(var(--text), 88%); | |
| font-size: 14px; | |
| line-height: 1; | |
| } | |
| div[style^="width: 300px;"] div { | |
| display: flex; | |
| margin-top: 9px !important; | |
| } | |
| div[style^="width: 300px;"] input { | |
| width: auto; | |
| padding: 0 12px; | |
| font-family: inherit; | |
| cursor: pointer; | |
| text-transform: capitalize; | |
| } div[style^="width: 300px;"] input + input { | |
| margin-left: 9px; | |
| } | |
| /* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~*\ | |
| @Filter-Menu | |
| \*~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */ | |
| #advanced-options { | |
| position: fixed; | |
| top: calc(50px + 10vh); | |
| width: calc(630px + 0.111 * (100vw - 700px)); | |
| min-width: 630px; | |
| max-width: 730px; | |
| height: auto; | |
| padding: 0 calc(40px + 0.05 * (100vw - 700px)) 12px; | |
| background: hsl(var(--bg)); | |
| box-shadow: -1.6px 2.24px 4.48px hsla(0, 0%, 0%, 70%); | |
| border: none; | |
| color: hsla(var(--text), 88%); | |
| font-family: var(--font); | |
| } | |
| #advanced-options::before { | |
| content: ""; | |
| position: absolute; | |
| top: -2px; | |
| left: 0; | |
| width: 100%; | |
| height: 2px; | |
| background: linear-gradient(to right, hsla(var(--accent), 1), hsla(var(--accent), 0.55)) hsl(var(--bg)); | |
| } | |
| #advanced-options #fancybox-close { | |
| top: auto; | |
| bottom: 24px; | |
| right: calc(40px + 0.05 * (100vw - 700px)); | |
| } | |
| #advanced-options div { | |
| padding: 12px 0; | |
| } | |
| #advanced-options .advanced-options-header { | |
| width: 100%; | |
| height: 32px; | |
| border: none; | |
| font-size: 15px; | |
| line-height: 28px; | |
| text-align: left; | |
| text-transform: uppercase; | |
| } | |
| #advanced-options .advanced-options-header .description { | |
| display: none; | |
| } | |
| #advanced-options .sort-widget, | |
| #advanced-options .filter-widget { | |
| display: flex; | |
| width: 100%; | |
| padding: 12px 12px 0 108px; | |
| } | |
| #advanced-options .sort-widget:last-of-type, | |
| #advanced-options .filter-widget:last-of-type { | |
| padding-bottom: 12px; | |
| } | |
| #advanced-options .sort-widget .widget-header, | |
| #advanced-options .filter-widget .widget-header { | |
| width: 108px; | |
| padding-left: 12px; | |
| margin-left: -108px; | |
| flex: 0 0 auto; | |
| font: 13px/22px var(--font); | |
| } | |
| #advanced-options input, | |
| #advanced-options .sort-widget select, | |
| #advanced-options .filter-widget select, | |
| #advanced-options .sort-widget label { | |
| height: 24px !important; | |
| background: calc(100% - 5px) center / auto no-repeat hsl(var(--btn)); | |
| border: none !important; | |
| border-radius: 3px; | |
| margin-right: 2%; | |
| flex: 0 1 auto; | |
| color: hsla(var(--text), 88%); | |
| font: 13px/16px var(--font); | |
| } | |
| #advanced-options .sort-widget select, | |
| #advanced-options .filter-widget select { | |
| background-image: var(--arrowDn); | |
| } | |
| #advanced-options .sort-widget select:disabled, | |
| #advanced-options .filter-widget select:disabled { | |
| background-blend-mode: soft-light; | |
| opacity: 0.57; | |
| } | |
| #advanced-options .filter-widget.title input[type="text"] { | |
| width: 80%; | |
| } | |
| #advanced-options .filter-widget.airing-status select, | |
| #advanced-options .filter-widget.publishing-status select { | |
| width: 60%; | |
| } | |
| #advanced-options .filter-widget.producer select, | |
| #advanced-options .filter-widget.magazine select { | |
| width: 60%; | |
| } | |
| #advanced-options .filter-widget.aired-date select.year, | |
| #advanced-options .filter-widget.published-date select.year { | |
| width: 15%; | |
| border-radius: 4px 0 0 4px; | |
| margin-right: 0; | |
| } | |
| #advanced-options .filter-widget.aired-date select.month, | |
| #advanced-options .filter-widget.published-date select.month { | |
| width: 12%; | |
| border-radius: 0; | |
| margin-right: 0; | |
| } | |
| #advanced-options .filter-widget.aired-date select.day, | |
| #advanced-options .filter-widget.published-date select.day { | |
| width: 12%; | |
| border-radius: 0 4px 4px 0; | |
| } | |
| #advanced-options .filter-widget.aired-date .text, | |
| #advanced-options .filter-widget.published-date .text { | |
| display: none; | |
| } | |
| #advanced-options .filter-widget.aired-season select.year { | |
| width: 20%; | |
| } | |
| #advanced-options .filter-widget.aired-season select.season { | |
| width: 28%; | |
| } | |
| #advanced-options .sort-widget select { | |
| width: 34%; | |
| } | |
| #advanced-options .sort-widget input[type=radio] + label { | |
| width: 12%; | |
| padding: 0; | |
| background: hsl(var(--btn)) !important; | |
| border: 2px solid hsla(var(--btnLight)) !important; | |
| margin: 0; | |
| color: hsla(var(--text), 88%) !important; | |
| line-height: 18px; | |
| transition: all var(--timeButton) var(--bezierFast); | |
| } #advanced-options .sort-widget input[type=radio] + label:first-of-type { | |
| border-radius: 3px 0 0 3px; | |
| border-right-width: 0 !important; | |
| } #advanced-options .sort-widget input[type=radio] + label:last-of-type { | |
| border-radius: 0 3px 3px 0; | |
| border-left-width: 0 !important; | |
| } #advanced-options .sort-widget :not(:disabled) + label:hover, | |
| #advanced-options .sort-widget :not(:disabled):checked + label { | |
| border-color: hsl(var(--btnAccent)) !important; | |
| color: hsl(var(--accent)) !important; | |
| } #advanced-options .sort-widget input[type="radio"]:disabled + label { | |
| opacity: 0.57; | |
| cursor: default; | |
| } | |
| #advanced-options .advanced-options-button { | |
| width: 100%; | |
| padding: 12px 0; | |
| border: none; | |
| font-size: 0; | |
| text-align: left; | |
| } | |
| #advanced-options .advanced-options-button a { | |
| margin-right: 9px; | |
| box-shadow: none; | |
| } | |
| /*==============================*\ | |
| !FOOTER | |
| \*------------------------------*/ | |
| #footer-block { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 60px; | |
| padding: 22px 0; | |
| background: none; | |
| font: 13px/16px var(--font); | |
| } | |
| #copyright { | |
| display: inline-block; | |
| padding: 0; | |
| color: hsla(var(--text), 40%); | |
| font: inherit; | |
| /*text-shadow: -0.6px 0.84px 1.68px hsl(var(--bg));*/ | |
| transition: color var(--timeText) var(--bezierFast); | |
| cursor: text; | |
| } #copyright:hover { | |
| color: hsla(var(--text), 100%) | |
| } | |
| #copyright::after { | |
| content: "List design by Valerio Lyndon."; | |
| } | |
| .list-unit .list-stats { | |
| position: absolute; | |
| bottom: -32px; | |
| left: 0; | |
| display: block !important; | |
| width: 100%; | |
| height: 16px; | |
| background: none; | |
| margin: 0 auto; | |
| color: hsla(var(--text), 40%); | |
| font: 12px/16px var(--font); | |
| /*Toggle*/ | |
| visibility: var(--toggleStats); | |
| } | |
| /*==============================*\ | |
| !MEDIA-QUERIES | |
| \*------------------------------*/ | |
| @media (max-width: 700px) { | |
| /* List Area */ | |
| .list-block { | |
| min-height: calc(100vh - (184px + (700px * 0.3))); | |
| } | |
| /* Overlays */ | |
| body #fancybox-wrap { | |
| left: calc(50% - (190px + (700px * 0.2))) !important; | |
| width: calc(380px + (700px * 0.4)) !important; | |
| } | |
| #advanced-options { | |
| position: absolute; | |
| padding: 0 calc(40px) 12px; | |
| } | |
| } | |
| @media (max-width: 980px) { | |
| /* Headers */ | |
| .list-block { | |
| padding-top: 44px; | |
| } | |
| #status-menu { | |
| height: 0; | |
| margin-top: 50px; | |
| } #status-menu:not(.fixed) { | |
| padding: 0; | |
| } | |
| #status-menu:not(.fixed) .status-menu { | |
| position: relative; | |
| top: -42px; | |
| } | |
| #status-menu:not(.fixed) .search-container { | |
| top: 49px; | |
| left: calc(50% - 32px); | |
| width: 250px; | |
| } | |
| #status-menu.fixed .status-button { | |
| pointer-events: none; | |
| opacity: 0; | |
| } | |
| #status-menu.fixed .search-container { | |
| width: calc(100% - 29px); | |
| } | |
| .status-menu-container.fixed + div.list-block { | |
| margin-top: 53px; | |
| } | |
| .list-block::before { | |
| top: -53px; | |
| } | |
| /* Buttons */ | |
| .list-unit .list-status-title { | |
| top: 4px; | |
| left: calc(50% - 218px); | |
| } | |
| .list-unit .list-status-title .stats a { | |
| width: 84px; | |
| } | |
| .list-table > tbody:first-of-type { | |
| top: 4px; | |
| left: calc(50% - 125px); | |
| width: 84px; | |
| } | |
| } | |
| @media (min-width: 1600px) { | |
| /* Overlays */ | |
| #advanced-options { | |
| padding: 0 85px 12px; | |
| } | |
| } | |
| @media (min-width: 1804px) { | |
| /* Headers */ | |
| #status-menu .search-container { | |
| width: calc(169px + (1804px * 0.035)); | |
| } #status-menu:not(.fixed) .search-container { | |
| right: calc(8px + (50% - 1804px * 0.5)); | |
| } | |
| .list-unit .list-status-title { | |
| left: calc(8px + (50% - 1804px * 0.5)); | |
| } | |
| .list-unit .list-status-title .stats a { | |
| width: calc(80px + (1804px * 0.0175)); | |
| } | |
| .list-table > tbody:first-of-type { | |
| left: calc(97px + (1804px * 0.0175) + (50% - 1804px * 0.5)); | |
| width: calc(80px + (1804px * 0.0175)); | |
| } | |
| } | |
| @media (min-width: 1920px) { | |
| /* List Area */ | |
| .list-block { | |
| min-height: calc(100vh - (184px + (1920px * 0.3))); | |
| } | |
| } | |
| /*==============================*\ | |
| !FIXES | |
| \*------------------------------*/ | |
| /* MAL Security Fix */ | |
| [data-owner=""] { | |
| --arrowUp: url(https://i.imgur.com/Cu2u9Hu.png); | |
| --arrowRt: url(https://i.imgur.com/vqOtoms.png); | |
| --arrowDn: url(https://i.imgur.com/0YI7VxA.png); | |
| --arrowLt: url(https://i.imgur.com/BArw1oI.png); | |
| } | |
| [data-owner=""] .header .header-title { | |
| background-image: url(https://i.imgur.com/g0WEEth.png); | |
| } | |
| [data-owner=""] .list-menu-float::after, | |
| [data-owner=""] .list-container::before { | |
| background-image: url(https://i.imgur.com/Ly6A4ph.png); | |
| } | |
| [data-owner=""] .list-unit .loading-space i { | |
| background-image: url(https://i.imgur.com/1NLFsAe.png); | |
| } | |
| /* Firefox Tweaks & Fixes */ | |
| @-moz-document url-prefix() { | |
| /* Performance */ | |
| .list-item { | |
| will-change: transform; | |
| } | |
| /* Visual Tweaks */ | |
| .data.title { | |
| padding-top: 2px !important; | |
| } | |
| } | |
| /*==============================*\ | |
| !MODS | |
| \*------------------------------*/ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* List design by 5cm */ | |
| @\import "https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"; | |
| @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelink"; | |
| body { | |
| background: url(https://image.myanimelist.net/ui/fkLITaJTefafxFKPGRznglNnufcAvn5pOQqmKwnxF4MEGjNRtCIn1TT-_7JXz8nZ), | |
| url() !important; | |
| font: 300 11px Open Sans; color: black !important;} | |
| *:not(a:hover):not(input) { | |
| cursor: default;} | |
| a:link, a:active, a:visited {color: black;} | |
| .header .header-title, .header .header-menu .btn-menu, | |
| #header-menu-dropdown svg, [data-work="anime"] .icon-menu.anime-list, [data-work="manga"] .icon-menu.manga-list, | |
| [data-owner=""] .list-menu-float, .list-menu-float .icon-menu.setting, form[action], | |
| .list-menu-float .icon-menu .text, | |
| .list-unit .list-status-title .text, #show-stats-button, | |
| .list-table .list-table-header .header-title.status, | |
| .list-table .list-table-header .header-title.number, .list-table .list-table-header .header-title.image, | |
| .list-table .list-table-header .header-title.progress ~ th, | |
| .list-table .list-table-data .data.status, .list-table .list-table-data .data.number, | |
| .list-table .list-table-data .data.status.plantowatch ~ .data.score, | |
| .list-table .list-table-data .data.progress ~ td, | |
| .cover-block, i.fa:not([class*=sort]):not([class$=circle]), img, .icon-watch.ml4, .more, | |
| [data-owner=""] .add-edit-more {display: none;} | |
| .header { | |
| background: #fbf3de no-repeat center 60%; | |
| width: 100%; height: 60px;} | |
| .header .header-menu.other { | |
| position: static; color: #999; text-align: left; text-transform: uppercase;} | |
| .header .header-menu.other .btn-menu { | |
| font: 700 25px Open Sans; color: #999; | |
| display: inline-block; overflow: hidden; text-indent: -116px; | |
| position: relative; top: 13px; left: 18px;} | |
| .header .header-menu .header-info { | |
| position: absolute; top: 17px; right: 257px; font-size: 0;} | |
| .header .username { | |
| font-weight: 700;} | |
| .header a, #header-menu-dropdown a { | |
| width: auto; height: auto; | |
| font-weight: 400; color: #999 !important; transition: none;} | |
| .header .header-menu .header-info a, #header-menu-dropdown a { | |
| font-size: 11px; margin: 0 15px;} | |
| .header .header-menu .header-info a:hover, #header-menu-dropdown a:hover { | |
| background: none; color: #ef8577 !important; text-decoration: none;} | |
| #header-menu-dropdown { | |
| display: block!important; top: 23px; right: 182px; | |
| background: none; border: 0; box-shadow: none;} | |
| body[data-owner="1"]:before { | |
| content: ''; background: top left/contain url(); | |
| width: 130px; height: 250px; position: absolute; top: 10px; left: 10px; z-index: 1;} | |
| .list-menu-float { | |
| position: absolute; top: 23px; right: 185px; | |
| width: auto; border: 0;} | |
| .list-menu-float .icon-menu { | |
| display: inline-block; width: 16px; height: 16px; | |
| background: none !important; margin: 0 5px;} | |
| .list-menu-float .icon-menu svg.icon { | |
| position: static; width: 16px; height: 16px; fill: #aaa;} | |
| .list-menu-float .icon-menu:hover svg.icon, .header .header-menu .list-menu .icon-menu .text { | |
| position: static; fill: #ef8577;} | |
| .list-menu-float .icon-menu:not(.profile):hover { | |
| width: auto; background: none;} | |
| .list-menu-float .icon-menu.profile { | |
| background: none !important;} | |
| .list-menu-float .icon-menu.profile:before { | |
| content: '\f007'; font: 16px FontAwesome; color: #aaa; line-height: 15px; | |
| position: absolute; right: 2px;} | |
| .list-menu-float .icon-menu.profile:hover:before { | |
| color: #ef8577;} | |
| .list-container { | |
| background: none !important; width: 100%; border: 0;} | |
| #status-menu, .status-menu-container.fixed { | |
| width: 100%; height: auto; | |
| background: #ef8577; border: 0; position: static;} | |
| #status-menu .status-menu { | |
| width: 100%; border-spacing: 0; text-align: center;} | |
| #status-menu .status-menu:before { | |
| content: ''; display: inline-block; width: 90px; height: 90px; border-radius: 50%; | |
| background: center/cover url(); | |
| position: absolute; margin-top: -20px;} | |
| #status-menu .status-button { | |
| background: #ef8577; display: inline-block; font: 300 13px Open Sans; | |
| color: white; letter-spacing: 1px; text-transform: uppercase; padding: 15px 20px;} | |
| #status-menu .status-button:first-child { | |
| margin-left: 100px;} | |
| #header-menu-button, #status-menu .status-button.on { | |
| cursor: default; font-weight: 700; text-decoration: none;} | |
| #status-menu .status-button:not(.on):hover { | |
| background: #f6a8a0;} | |
| #status-menu .status-button::after { | |
| background: none;} | |
| #status-menu .status-button.on::after { | |
| background: none; left: calc(50% - 20px); bottom: -19px; | |
| width: 0; height: 0; | |
| border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #ef8577;} | |
| #status-menu .search-container { | |
| top: -475px; right: 20px;} | |
| #status-menu #search-box { | |
| width: 150px; height: auto;} | |
| #search-box input { | |
| background: white 3px 50%/20px no-repeat url(https://image.myanimelist.net/ui/ueQLRyZL_yQZxD14iYLZC_gLr-mtem_jVqxnLpUY6LHlp_sr_ZwRrhNpbh7nV5sCeo7Sp3-sdxOAu1kTqLeHfW7i3YHTvUNvkDS5qKJPeIQyZ4XG2BGDzLdXX1QvKlrJ); | |
| font: 300 11px Open Sans; color: #999; | |
| padding: 4px 12px 6px 25px; border: 1px solid #ddd; border-radius: 10px;} | |
| .list-block, .status-menu-container.fixed + div.list-block { | |
| margin-top: 30px; min-height: 0;} | |
| .list-unit { | |
| width: 80%;} | |
| .list-unit .list-status-title { | |
| display: inline-block; width: calc(100% - 30px); height: 0; | |
| background: none; text-align: right; margin: auto;} | |
| .list-unit .list-status-title .stats { | |
| height: 0; line-height: 100%; top: 26px;} | |
| .list-unit .list-stats { | |
| position: absolute; display: block; bottom: 0px; width: 80%; height: auto; background: none; | |
| font: normal 11px Open Sans; color: #777; text-transform: uppercase;} | |
| #advanced-options-button, .list-table .list-table-header .header-title .link.sort { | |
| font-weight: normal; color: #999; text-transform: uppercase; padding: 4px 6px; z-index: 1;} | |
| .list-table > tbody:nth-of-type(2n+1):first-of-type { | |
| display: block; Width: 100%; height: auto; margin: 20px; | |
| background: none; text-transform: uppercase; z-index: 3;} | |
| .list-table-header { | |
| display: inline-block; width: 100%;} | |
| .list-table-header:before { | |
| content: 'Sort by:'; position: relative; top: 2px; margin-right: 12px;} | |
| .list-table .list-table-header .header-title { | |
| display: inline-block; width: auto !important; height: auto; | |
| background: none; border: 0; padding: 0 !important; margin: 0 15px;} | |
| .list-table .list-table-header .header-title .link.sort:hover, #advanced-options-button:hover { | |
| background: #fbf3de; color: #999;} | |
| .list-table .list-table-header .header-title .sort-icon { | |
| color: rgba(239,133,119,.65); font-size: 18px; position: relative; line-height: 0;} | |
| .fa-sort-asc {top: 6px;} | |
| .fa-sort-desc {top: -2px;} | |
| .fa-plus-circle::before {content: '+' !important; margin-left: 1px;} | |
| .list-table {border: 0; text-align: center;} | |
| .list-item, .list-table > tbody:nth-of-type(2n+1):not(:first-child) { | |
| width: 200px; height: 290px; display: inline-block; background: none; margin: 15px;} | |
| .list-table .list-table-data .data { | |
| position: absolute; width: 200px; height: 280px; border: 0; padding: 0;} | |
| .list-table .list-table-data:hover .data.title { | |
| background: rgba(255,255,255,0.8); outline: 3px solid white;} | |
| .list-table .list-table-data:hover .data.title .link, | |
| .list-table .list-table-data:hover .data.progress, | |
| .list-table .list-table-data:hover .data.type, | |
| .list-table .list-table-data:hover .data .edit a:after, | |
| .list-table .list-table-data:hover .data.title span { | |
| opacity: 1;} | |
| .list-table .list-table-data .data.title { | |
| letter-spacing: 0; padding: 0;} | |
| .list-table .list-table-data .data.title .link { | |
| position: absolute; left: 20px; bottom: 45px; width: 160px; z-index: 2; opacity: 0; | |
| font-size: 20px; color: #333 !important; line-height: 22px; text-transform: upper;} | |
| .list-table .list-table-data .data.score { | |
| text-align: right;} | |
| .list-table .list-table-data .data.score .link { | |
| font-weight: 700; text-align: right!important; | |
| margin-right: 10px; padding: 4px 6px; word-spacing: -3px;} | |
| .list-table .list-table-data .data.score .link:after { | |
| content: ".0"} | |
| .list-table .list-table-data .data.status.watching ~ .data.score .link {background: #cfe88d;} | |
| .list-table .list-table-data .data.status.completed ~ .data.score .link {background: #ffff92;} | |
| .list-table .list-table-data .data.status.onhold ~ .data.score .link {background: #afb8e2;} | |
| .list-table .list-table-data .data.status.dropped ~ .data.score .link {background: #fc7671;} | |
| .list-table .list-table-data .data.progress { | |
| width: auto; height: auto; margin-top: 250px; margin-left: 20px; | |
| font: italic 11px Open Sans; text-transform: lowercase; word-spacing: -3px; opacity: 0;} | |
| .list-table .list-table-data .data.type { | |
| width: 35px; height: auto; margin-left: 145px; opacity: 0; | |
| margin-top: 250px; font-size: 11px; text-align: right;} | |
| .progress div:after { | |
| content: 'episodes'; margin-left: 3px;} | |
| .list-table .list-table-data .data.title .rewatching, | |
| .list-table .list-table-data .data.title .rereading, | |
| .list-table .list-table-data .data.title .content-status { | |
| position: absolute; top: 20px; left: 20px; font: 600 9px Open Sans; | |
| color: #444; border: 1px solid #555; padding: 2px 4px; opacity: 0; text-transform: uppercase;} | |
| [data-owner="1"] .list-table .list-table-data .data.title span:not([style]) { | |
| left: 30px;} | |
| .list-table .list-table-data .data.title .add-edit-more { | |
| font-size: 0; float: none; z-index: 5; position: relative; top: 19px; left: 15px} | |
| .edit a:after { | |
| content: '\f142'; font: 18px FontAwesome; | |
| color: #888; opacity: 0;} | |
| .list-table .list-table-data .data.image a { | |
| width: 200px; height: 280px; background-size: contain; background-position: center; background-repeat: no-repeat;} | |
| .list-table .list-table-data .data a, .list-table .list-table-data a.edit-disabled { | |
| color: black !important;} | |
| .list-table .list-table-data .data a:not(.edit-disabled):hover { | |
| color: #888 !important;} | |
| #footer-block { | |
| background: #fbf3de; margin-top: 20px;} | |
| #copyright { | |
| font: 400 8px Open Sans; letter-spacing: 1px; color: #777; text-transform: uppercase;} |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Adapted from "[CSS - Modern] Brink by V.L -- Cover-style theme!" by <Valerio_Lyndon> at https://myanimelist.net/forum/?topicid=1772180