diff options
Diffstat (limited to 'src/static/css/site.css')
| -rw-r--r-- | src/static/css/site.css | 4641 |
1 files changed, 14 insertions, 4627 deletions
diff --git a/src/static/css/site.css b/src/static/css/site.css index 55628c1c..b3fff34c 100644 --- a/src/static/css/site.css +++ b/src/static/css/site.css @@ -1,4627 +1,14 @@ -/* A frontend file! Wow. - * This file is just loaded statically 8y <link>s in the HTML files, so there's - * no need to re-run upd8.js when tweaking values here. Handy! - */ - -/* Squares */ - -/* This styling is kind of awkwardly placed at the very top. Sorry! - * We need to rework what order sets of styles get applied in to be - * much more explicit (so that overriding isn't a headache), and - * hopefully that can be done through @imports, but it'll take some - * reworking and cleaning up. - */ - -.square { - position: relative; - width: 100%; -} - -.square::after { - content: ""; - display: block; - padding-bottom: 100%; -} - -.square-content { - position: absolute; - width: 100%; - height: 100%; -} - -/* Layout - Common */ - -body { - position: relative; - margin: 0; - padding: 10px; - overflow-y: scroll; -} - -body::before { - content: ""; -} - -body::before, .wallpaper-part { - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - z-index: -1; - - /* NB: these are 100 LVW, "largest view width", etc. - * Stabilizes background on viewports with modal dimensions, - * e.g. expanding/shrinking tab bar or collapsible find bar. - * 100% dimensions are kept above for browser compatibility. - */ - width: 100lvw; - height: 100lvh; -} - -#page-container { - max-width: 1100px; - - margin: 0 auto 40px; - padding: calc(15px - var(--page-border-width)) 0; - - --page-border-width: 0; - border: var(--page-border-width) solid transparent; - box-sizing: border-box; -} - -#page-container > * { - margin-left: calc(15px - var(--page-border-width)); - margin-right: calc(15px - var(--page-border-width)); -} - -#skippers:focus-within { - position: static; - width: unset; - height: unset; -} - -@property --banner-shine { - syntax: '<percentage>'; - initial-value: 0%; - inherits: false; -} - -#banner { - margin: 10px calc(-1 * var(--page-border-width)); - position: relative; - - --banner-shine: 4%; - -webkit-box-reflect: below -12px linear-gradient(transparent, color-mix(in srgb, transparent, var(--banner-shine) white)); - transition: --banner-shine 0.8s; -} - -#banner:not(.dim, .collapsed):hover { - --banner-shine: 35%; - transition-delay: 0.3s; -} - -#banner.dim, #banner.collapsed { - --banner-shine: 0%; -} - -#banner::after, #banner::before { - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; -} - -#banner img { - display: block; - width: 100%; - height: auto; -} - -#skippers { - position: absolute; - left: -10000px; - top: auto; - width: 1px; - height: 1px; -} - -.layout-columns { - display: flex; - align-items: stretch; -} - -#header, -#secondary-nav, -#skippers, -#footer { - padding: 5px; -} - -#header, -#secondary-nav, -#skippers { - margin-bottom: 10px; -} - -#footer { - margin-top: 10px; -} - -#header { - display: grid; -} - -#header.nav-has-main-links.nav-has-content { - grid-template-columns: 2.5fr 3fr; - grid-template-rows: min-content 1fr; - grid-template-areas: - "main-links content" - "bottom-row content"; -} - -#header.nav-has-main-links:not(.nav-has-content) { - grid-template-columns: 1fr; - grid-template-areas: - "main-links" - "bottom-row"; -} - -.nav-main-links { - grid-area: main-links; - margin-right: 20px; -} - -.nav-content { - grid-area: content; -} - -.nav-bottom-row { - grid-area: bottom-row; - align-self: start; -} - -.sidebar-column { - flex: 1 1 35%; - min-width: 150px; - max-width: 250px; - align-self: flex-start; -} - -.sidebar-column.wide { - max-width: 350px; - flex-basis: 300px; - flex-shrink: 0; - flex-grow: 1; -} - -.sidebar-column.initially-hidden { - display: none; -} - -.sidebar-column.always-content-column { - /* duplicated in thin & medium media query */ - position: static !important; - max-width: unset !important; - flex-basis: unset !important; - margin-right: 0 !important; - margin-left: 0 !important; - width: 100%; -} - -.sidebar-multiple { - display: flex; - flex-direction: column; -} - -.sidebar-multiple .sidebar:not(:first-child) { - margin-top: 15px; -} - -.sidebar { - --content-padding: 5px; - padding: var(--content-padding); -} - -#sidebar-left { - margin-right: 10px; -} - -#sidebar-right { - margin-left: 10px; -} - -#content { - position: relative; - --content-padding: 20px; - box-sizing: border-box; - padding: var(--content-padding); - flex-grow: 1; - flex-shrink: 3; -} - -.footer-content { - margin: 5px 12%; -} - -.footer-content > :first-child { - margin-top: 0; -} - -.footer-content > :last-child { - margin-bottom: 0; -} - -.footer-localization-links { - margin: 5px 12%; -} - -/* Design & Appearance - Layout elements */ - -@property --box-opacity { - /* This property rule doesn't actually do anything in practice. - * It just lets us see the effective value of --box-opacity - * in browser CSS inspectors. - */ - syntax: "<number>"; - inherits: true; - initial-value: 0.6; -} - -:root { - color-scheme: dark; - - --initial-wallpaper-opacity: 0.5; - --wallpaper-brightness: var(--initial-wallpaper-opacity); - --box-opacity: calc(0.6 + 0.3 * (clamp(0.75, var(--wallpaper-brightness), 0.95) - 0.75) / (0.95 - 0.75)); -} - -body { - background: black; -} - -body::before { - /* This is where the basic background-image rule - * gets applied... but the path *to* that media file - * isn't part of the CSS itself anymore! - */ -} - -body::before, .wallpaper-part { - background-position: center; - background-size: cover; - opacity: var(--initial-wallpaper-opacity); -} - -#page-container { - background-color: var(--bg-color, rgba(35, 35, 35, 0.8)); - - --adjust-page-opacity: calc(alpha * (1.0 + 0.55 * (var(--box-opacity, 0.6) - 0.6))); - - background-color: - color-mix(in oklab, - rgb(from var(--bg-color, rgba(35, 35, 35, 0.8)) - r g b / var(--adjust-page-opacity)), - rgb(from var(--bg-color, rgba(35, 35, 35, 0.8)) - 0 0 0 / var(--adjust-page-opacity)) - calc((var(--box-opacity, 0.6) - 0.6) * 40%)); - - color: #ffffff; - - --page-border-width: 0.5px; - border-bottom-width: 1px; - border-radius: 4px 4px 5px 5px; - - --page-border-color: rgba( - 144, 144, 144, - calc(0.4 + 0.5 * (var(--box-opacity) - 0.6) / 0.4)); - border-color: var(--page-border-color); - - box-shadow: - 0 0 40px #0008, - 0 20px 15px -4px #0002, - 0 6px 15px -3px #2221, - 0 4px 6px 2px #1113, - 0 1px 4px 1px #1114; -} - -#skippers > * { - display: inline-block; -} - -#skippers > .skipper-list:not(:last-child)::after { - display: inline-block; - content: "\00a0"; - margin-left: 2px; - margin-right: -2px; - border-left: 1px dotted; -} - -#skippers .skipper-list > .skipper:not(:last-child)::after { - content: " \00b7 "; - font-weight: 800; -} - -#page-container:not(.showing-sidebar-left) #skippers .skipper[data-for=sidebar-left], -#page-container:not(.showing-sidebar-right) #skippers .skipper[data-for=sidebar-right] { - display: none; -} - -#banner { - background: black; - border-bottom: 1px solid var(--primary-color); -} - -#banner::before { - top: -1px; - left: var(--page-border-width); - right: var(--page-border-width); - border-top: 1px dashed var(--page-border-color); - pointer-events: none; -} - -#banner::after { - box-shadow: - inset 0 -2px 3px rgba(0, 0, 0, 0.35), - inset 0 1px 4px 2px rgba(0, 0, 0, 0.15); - pointer-events: none; -} - -#banner { - background-color: var(--abyss-color); -} - -#banner.dim img { - opacity: 0.32; -} - -#banner.short, #banner.short img { - /* 1100px -> 72.5px, 900px -> 60px - * 12.5px height per 200px width - * Viewport maxes at 1124px, so: - * Start from 72.5px - * Get width below maximum: - * (1124px - min(1124px, 100vw)) - * Multiply by rate of change: - * (12.5 / 200) - */ - max-height: calc(72.5px - (1124px - min(1124px, 100vw)) * (12.5 / 200)); -} - -#banner.short img { - object-position: 0 var(--short-banner-alignment, 50%); -} - -#header, -#secondary-nav, -#skippers, -#footer, -.sidebar { - font-size: 0.85em; -} - -.sidebar, -#content, -#header, -#secondary-nav, -#skippers, -#footer { - background-color: rgba(0, 0, 0, var(--box-opacity, 0.6)); - border: 1px dotted var(--primary-color); - border-radius: 3px; - transition: background-color 0.2s; -} - -/* -.sidebar:focus-within, -#content:focus-within, -#header:focus-within, -#secondary-nav:focus-within, -#skippers:focus-within, -#footer:focus-within { - background-color: rgba(0, 0, 0, 0.85); - border-style: solid; -} -*/ - -.sidebar > h1, -.sidebar > h2, -.sidebar > h3, -.sidebar > p { - text-align: center; - padding-left: 4px; - padding-right: 4px; -} - -.sidebar h1 { - font-size: 1.25em; -} - -.sidebar h2 { - font-size: 1.1em; - margin: 0; -} - -.sidebar h2:first-child { - margin-top: 0.5em; - margin-bottom: 0.5em; -} - -.sidebar h3 { - font-size: 1.1em; - font-style: oblique; - font-variant: small-caps; - margin-top: 0.3em; - margin-bottom: 0em; -} - -.sidebar > p { - margin: 0.5em 0; - padding: 0 5px; -} - -.sidebar hr { - color: #555; - margin: 10px 5px; -} - -.sidebar > ol, -.sidebar > ul { - padding-left: 30px; - padding-right: 15px; -} - -.sidebar > dl { - padding-right: 15px; - padding-left: 0; -} - -.sidebar > dl dt { - padding-left: 10px; - margin-top: 0.5em; -} - -.sidebar > dl dt.current { - font-weight: 800; -} - -.sidebar > dl dd { - margin-left: 0; -} - -.sidebar > dl dd ul { - padding-left: 30px; - margin-left: 0; -} - -.sidebar > dl .side { - padding-left: 10px; -} - -.sidebar details.has-tree-list[open] summary { - font-weight: 800; -} - -.sidebar dl.tree-list { - margin-top: 0.25em; - line-height: 1.25em; - padding-left: 15px; -} - -.sidebar dl.tree-list dt { - display: list-item; - list-style-type: disc; - padding-left: 0; - margin-left: 20px; -} - -.sidebar dl.tree-list dl { - padding-left: 15px; -} - -.sidebar dl.tree-list dd { - margin-left: 0; -} - -.sidebar dl.tree-list dt.current a { - font-weight: 800; - border-bottom: 1px solid; -} - -.sidebar .times-used { - opacity: 0.7; - font-size: 0.9em; - cursor: default; -} - -.sidebar li.current { - font-weight: 800; -} - -.sidebar li { - overflow-wrap: break-word; - padding-right: 3px; -} - -.sidebar li.structured { - margin-bottom: 3px; -} - -.sidebar > details.current summary { - font-weight: 800; -} - -.sidebar > details summary { - margin-top: 0.5em; - padding-left: 5px; -} - -.sidebar > details.current summary span b { - font-weight: 800; -} - -summary > span b { - font-weight: normal; - color: var(--primary-color); -} - -summary > span:hover { - cursor: pointer; - text-decoration: underline; - text-decoration-color: var(--primary-color); -} - -summary > span:hover a { - text-decoration: none !important; -} - -summary > span:hover:has(a:hover), -summary > span:hover:has(a.nested-hover), -summary.has-nested-hover > span { - text-decoration: none !important; -} - -summary > span:hover:has(a:hover) a, -summary > span:hover:has(a.nested-hover) a, -summary.has-nested-hover > span a { - text-decoration: underline !important; -} - -summary.underline-white > span:hover { - text-decoration-color: white; -} - -/* This link isn't supposed to be underlined *at all* - * when the summary (and not link) is hovered, but - * for some reason Safari is still applying its colored - * and dotted(!) underline. Get around the apparent - * effect by just making it white. - */ -summary.underline-white > span:hover a:not(:hover) { - text-decoration-color: white; -} - -.sidebar > details ul, -.sidebar > details ol { - margin-top: 0; - margin-bottom: 0; -} - -.sidebar > details:last-child { - margin-bottom: 10px; -} - -.sidebar > details[open] { - margin-bottom: 1em; -} - -.sidebar article { - text-align: left; - margin: 5px 5px 15px 5px; -} - -.sidebar article:last-child { - margin-bottom: 5px; -} - -.sidebar article h2, -.news-index h2 { - border-bottom: 1px dotted; -} - -.sidebar article h2 time, -.news-index time { - float: right; - font-weight: normal; -} - -.sidebar-column.search-showing-results { - position: sticky; - top: 5px; - align-self: flex-start !important; /* pls */ -} - -.sidebar-box-joiner { - width: 0; - margin-left: auto; - margin-right: auto; - border-right: 1px dashed var(--primary-color); - height: 10px; -} - -.sidebar-box-joiner + .sidebar { - margin-top: 0 !important; -} - -.track-release-sidebar-box { - --content-padding: 3px; -} - -.track-release-sidebar-box h1 { - margin: 0; - font-weight: normal; - font-size: 0.9em; - font-style: oblique; -} - -.track-release-sidebar-box + .track-release-sidebar-box, -.track-release-sidebar-box + .track-list-sidebar-box, -.track-list-sidebar-box + .track-release-sidebar-box { - margin-top: 5px !important; - border-top-left-radius: 0; - border-top-right-radius: 0; -} - -.track-release-sidebar-box:has(+ .track-list-sidebar-box), -.track-list-sidebar-box:has(+ .track-release-sidebar-box) { - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; -} - -.track-list-sidebar-box summary { - padding-left: 20px !important; - text-indent: -15px !important; -} - -.track-list-sidebar-box .track-section-range { - white-space: nowrap; -} - -.wiki-search-sidebar-box { - padding: 1px 0 0 0; - - z-index: 100; - max-height: calc(100vh - 20px); - - display: flex; - flex-direction: column; - - background-color: #000000c0; - - -webkit-backdrop-filter: - brightness(1.2) blur(4px); - - backdrop-filter: - brightness(1.2) blur(4px); -} - -.wiki-search-sidebar-box.showing-results { - box-shadow: - 0 4px 16px -8px var(--primary-color), - 0 10px 6px var(--bg-black-color), - 0 6px 4px #00000040; -} - -/* This is to say, any sidebar that's *not* - * the first sidebar after the search box. - */ -.wiki-search-sidebar-box.showing-results + .sidebar ~ .sidebar { - margin-top: 5px; -} - -.wiki-search-sidebar-box.showing-results ~ .sidebar:not(:hover) { - opacity: 0.8; - filter: brightness(0.7); -} - -.wiki-search-label { - width: calc(100% - 4px); - padding: 2px 4px; - margin: 2px 2px 3px 2px; - box-sizing: border-box; - - display: flex; - flex-direction: row; - - background: transparent; - border: 1px solid var(--dim-color); - border-radius: 3px; -} - -.wiki-search-label::before { - display: inline-block; - padding-left: 3px; - padding-right: 3px; - margin-right: 3px; - width: 1.8em; - text-align: center; - content: '\1f50d\fe0e'; -} - -.wiki-search-input { - background: transparent; - border: transparent; - color: inherit; - flex-grow: 1; -} - -.wiki-search-input::-webkit-search-cancel-button { - filter: grayscale(1) invert(1); -} - -.wiki-search-label.disabled { - opacity: 0.6; -} - -.wiki-search-label.disabled, -.wiki-search-input[disabled] { - cursor: not-allowed; -} - -.wiki-search-label:not(.disabled):hover, -.wiki-search-label:focus-within { - background: var(--light-ghost-color); -} - -.wiki-search-label:focus-within { - border-color: var(--primary-color); -} - -.wiki-search-label:focus-within::before { - opacity: 0.7; -} - -.wiki-search-input:focus { - border: none; - outline: none; -} - -.wiki-search-input::placeholder { - color: var(--primary-color); - font-style: oblique; -} - -.wiki-search-input:focus::placeholder { - color: var(--dim-color); -} - -.wiki-search-sidebar-box hr { - border-color: var(--primary-color); - border-style: none none dotted none; - margin-top: 3px; - margin-bottom: 3px; -} - -.wiki-search-progress-container { - padding: 2px 6px 4px 6px; - display: flex; - flex-direction: row; -} - -.wiki-search-progress-label { - font-size: 0.9em; - font-style: oblique; - cursor: default; - margin-right: 1ch; -} - -.wiki-search-progress-bar { - flex-grow: 1; -} - -.wiki-search-failed-container { - padding: 2px 3px 4px 6px; -} - -.wiki-search-failed-container p { - margin: 0; -} - -.wiki-search-context-container { - padding: 2px 12px 4px; - font-size: 0.9em; - border-bottom: 1px solid var(--dim-color); -} - -.wiki-search-results-container { - margin-bottom: 0; - padding: 2px; -} - -.wiki-search-no-results { - font-size: 0.9em; - padding: 2px 3px 4px 6px; - cursor: default; -} - -.wiki-search-filter-container { - padding: 4px; -} - -.wiki-search-filter-link { - display: inline-block; - margin: 2px; - padding: 2px 4px; - border: 2px solid transparent; - border-radius: 4px; -} - -.wiki-search-filter-link:where(.active.shown) { - animation: - 0.15s ease 0.00s forwards normal show-filter, - 0.60s linear 0.15s infinite alternate blink-filter; -} - -.wiki-search-filter-link:where(.active:not(.shown)) { - animation: - 0.00s linear 0.00s forwards normal show-filter, - 0.60s linear 0.00s infinite alternate blink-filter; -} - -.wiki-search-filter-link:where(:not(.active).hidden) { - /* We can't just reverse the show-filter animation, - * because that won't actually start it over again. - */ - animation: - 0.15s ease 0.00s forwards reverse show-filter-the-sequel; -} - -.wiki-search-filter-link.active-from-query { - background: var(--primary-color); - border-color: var(--primary-color); - color: #000a; - animation: none; -} - -.wiki-search-filter-link.active-from-query::after { - content: "I"; - color: black; - font-family: monospace; - font-weight: 800; - font-size: 1.2em; - margin-left: 0.5ch; - vertical-align: middle; - animation: 1s steps(2, jump-none) 0.6s infinite blink-caret; -} - -@keyframes show-filter { - from { - background: transparent; - border-color: transparent; - color: var(--primary-color); - } - - to { - background: var(--primary-color); - border-color: var(--primary-color); - color: black; - } -} - -/* Exactly the same as show-filter above. */ -@keyframes show-filter-the-sequel { - from { - background: transparent; - border-color: transparent; - color: var(--primary-color); - } - - to { - background: var(--primary-color); - border-color: var(--primary-color); - color: black; - } -} - -@keyframes blink-filter { - to { - background: color-mix(in srgb, var(--primary-color) 90%, transparent); - } -} - -@keyframes blink-caret { - from { opacity: 0; } - to { opacity: 1; } -} - -.wiki-search-result { - position: relative; - display: flex; - padding: 4px 3px 4px 6px; -} - -.wiki-search-result:hover { - text-decoration: none !important; -} - -.wiki-search-result::before { - content: ''; - position: absolute; - top: -2px; - bottom: -2px; - left: 0; - right: 0; - - border: 1.5px solid var(--primary-color); - border-radius: 4px; - display: none; -} - -.wiki-search-result.current-result { - background: var(--light-ghost-color); - border-top: 1px solid var(--dim-color); - border-bottom: 1px solid var(--dim-color); -} - -.wiki-search-result:hover::before, -.wiki-search-result:focus::before { - display: block; - background: var(--light-ghost-color); -} - -.wiki-search-result.current-result:hover { - background: none; - border-color: transparent; -} - -.wiki-search-result.current-result:hover .wiki-search-current-result-text { - filter: saturate(0.8) brightness(1.4); -} - -.wiki-search-result-text-area { - align-self: center; - flex-grow: 1; - min-width: 0; - overflow-wrap: break-word; - padding-bottom: 2px; -} - -.wiki-search-result-name { - margin-right: 0.25em; -} - -.wiki-search-result:hover .wiki-search-result-name { - text-decoration: underline; -} - -.wiki-search-current-result-text, -.wiki-search-result-kind { - font-style: oblique; - opacity: 0.9; - display: inline-block; -} - -.wiki-search-result-disambiguator { - opacity: 0.9; - display: inline-block; -} - -.wiki-search-result-image-container { - align-self: flex-start; - flex-shrink: 0; - margin-right: 6px; - border-radius: 2px; - overflow: hidden; - - background-color: var(--deep-color); - border: 2px solid var(--deep-color); -} - -.wiki-search-results:not(:has(.wiki-search-result-image)) .wiki-search-result-image-container { - display: none; -} - -.wiki-search-result-image, -.wiki-search-result-image-placeholder { - display: block; - width: 1.8em; - height: 1.8em; - aspect-ratio: 1 / 1; - border-radius: 1.5px; -} - -.wiki-search-result-image-placeholder { - background-color: #0004; - box-shadow: 0 1px 3px -1px #0008 inset; -} - -.wiki-search-result-image.has-warning { - filter: blur(2px) brightness(0.8); -} - -.wiki-search-end-search-line { - text-align: center; - margin-top: 6px; - margin-bottom: 2px; -} - -.wiki-search-end-search-line a { - display: inline-block; - font-style: oblique; - opacity: 0.9; - padding: 3px 6px 4px 6px; - border-radius: 4px; - border: 1.5px solid transparent; -} - -.wiki-search-end-search-line a:hover { - opacity: 1; - background: var(--light-ghost-color); - border-color: var(--deep-color); -} - -#content { - overflow-wrap: anywhere; -} - -footer { - text-align: center; - font-style: oblique; -} - -.footer-localization-links > span:not(:last-child)::after { - content: " \00b7 "; - font-weight: 800; -} - -/* Design & Appearance - Content elements */ - -a { - color: var(--primary-color); - text-decoration: none; -} - -a:hover { - text-decoration: underline; - text-decoration-style: solid !important; -} - -a.current { - font-weight: 800; -} - -a.series { - font-style: oblique; -} - -a:not([href]) { - cursor: default; -} - -a:not([href]):hover { - text-decoration: none; -} - -a .normal-content { - color: white; -} - -.external-link:not(.from-content) { - white-space: nowrap; -} - -.external-link.indicate-external::after { - content: '\00a0➚'; - font-style: normal; -} - -.external-link.indicate-external:hover::after { - color: white; -} - -.image-media-link::after { - /* Thanks to Jay Freestone for being awesome: - * https://www.jayfreestone.com/writing/wrapping-and-inline-pseudo-elements/ - */ - - pointer-events: none; - content: '\200b'; - padding-left: 22px; - - background-color: var(--primary-color); - - /* mask-image is set in content JavaScript, - * because we can't identify the correct nor - * absolute path to the file from CSS. - */ - - mask-repeat: no-repeat; - mask-position: calc(100% - 2px); -} - -.image-media-link:hover::after { - background-color: white; -} - -.nav-link { - display: inline-block; -} - -.nav-main-links .nav-link.current > span.nav-link-content > a { - font-weight: 800; -} - -.nav-main-links .nav-link-accent { - display: inline-block; -} - -.nav-links-index .nav-link:not(:first-child)::before, -.nav-links-groups .nav-link:not(:first-child)::before { - content: "\0020\00b7\0020"; - font-weight: 800; -} - -.nav-links-hierarchical .nav-link + .nav-link::before, -.nav-links-hierarchical .nav-link + .blockwrap .nav-link::before { - content: "\0020/\0020"; -} - -.series-nav-links { - display: inline-block; -} - -.group-with-series .group-nav-links + .series-nav-links::before { - content: "\00a0»\00a0"; - font-weight: normal; -} - -.group-with-series .series-nav-links:not(:last-child)::after { - content: ",\00a0"; - font-weight: normal; -} - -.group-with-series .series-nav-links + .series-nav-links::before { - content: ""; -} - -.dot-switcher > span:not(:first-child) { - display: inline-block; - white-space: nowrap; -} - -/* Yeah, all this stuff only applies to elements of the dot switcher - * besides the first, which will necessarily have a bullet point at left. - */ -.dot-switcher *:where(.dot-switcher > span:not(:first-child) > *) { - display: inline-block; - white-space: wrap; - text-align: left; - vertical-align: top; -} - -.dot-switcher > span:not(:first-child)::before { - content: "\0020\00b7\0020"; - white-space: pre; - font-weight: 800; -} - -.dot-switcher > span { - color: #ffffffcc; -} - -.dot-switcher > span.current { - font-weight: normal; - color: white; -} - -.dot-switcher > span.current a { - font-weight: 800; -} - -.dot-switcher.intrapage > span:not(.current) a { - text-decoration: underline; - text-decoration-style: dotted; -} - -.dot-switcher.intrapage > span.current a { - /* Keeping cursor: pointer (the default) is intentional here. */ - text-decoration: none !important; -} - -label:hover span { - text-decoration: underline; - text-decoration-style: solid; -} - -label > input[type=checkbox]:not(:checked) + span { - opacity: 0.8; -} - -#secondary-nav { - text-align: center; - - /* Default to visible. It'll automatically be hidden - * in layouts where the sidebar is visible. - */ - display: block; -} - -#secondary-nav.album-secondary-nav { - display: flex; - justify-content: space-around; - padding-left: 7.5% !important; - padding-right: 7.5% !important; - flex-wrap: wrap; - line-height: 1.4; -} - -#secondary-nav.album-secondary-nav.with-previous-next .group-with-series { - width: 100%; -} - -#secondary-nav.album-secondary-nav.with-previous-next > * { - margin-left: 5px; - margin-right: 5px; -} - -#secondary-nav.album-secondary-nav .group-nav-links .dot-switcher, -#secondary-nav.album-secondary-nav .series-nav-links .dot-switcher { - white-space: nowrap; -} - -.inert-previous-next-link { - opacity: 0.7; -} - -.nowrap { - white-space: nowrap; -} - -.blockwrap, .chunkwrap { - display: inline-block; -} - -.text-with-tooltip { - position: relative; -} - -.text-with-tooltip .text-with-tooltip-interaction-cue { - text-decoration: underline; - text-decoration-style: dotted; -} - -.text-with-tooltip > .hoverable:hover .text-with-tooltip-interaction-cue, -.text-with-tooltip > .hoverable.has-visible-tooltip .text-with-tooltip-interaction-cue { - text-decoration-style: wavy !important; -} - -.text-with-tooltip.datetimestamp .text-with-tooltip-interaction-cue, -.text-with-tooltip.missing-duration .text-with-tooltip-interaction-cue, -.text-with-tooltip.commentary-date .text-with-tooltip-interaction-cue, -.text-with-tooltip.wiki-edits .text-with-tooltip-interaction-cue, -.text-with-tooltip.rerelease .text-with-tooltip-interaction-cue, -.text-with-tooltip.first-release .text-with-tooltip-interaction-cue { - cursor: default; -} - -.text-with-tooltip.missing-duration > .hoverable { - opacity: 0.5; -} - -.text-with-tooltip.missing-duration > .hoverable:hover, -.text-with-tooltip.missing-duration > .hoverable.has-visible-tooltip { - opacity: 1; -} - -.text-with-tooltip.missing-duration .text-with-tooltip-interaction-cue { - text-decoration: none !important; -} - -.text-with-tooltip.wiki-edits > .hoverable { - white-space: nowrap; -} - -:where(.isolate-tooltip-z-indexing) { - position: relative; - z-index: 1; -} - -:where(.isolate-tooltip-z-indexing > *) { - position: relative; - z-index: -1; -} - -.tooltip { - font-size: 1rem; - position: absolute; - z-index: 3; - left: -10px; - top: calc(1em + 1px); - display: none; -} - -.cover-artwork .tooltip, -#sidebar .tooltip { - font-size: 0.9rem; -} - -.offset-tooltips .tooltip { - left: 14px; -} - -.tooltip-content { - display: block; - - background: var(--bg-black-color); - border: 1px dotted var(--primary-color); - border-radius: 6px; - - -webkit-backdrop-filter: - brightness(1.5) saturate(1.4) blur(4px); - - backdrop-filter: - brightness(1.5) saturate(1.4) blur(4px); - - box-shadow: - 0 3px 4px 4px #000000aa, - 0 -2px 4px -2px var(--primary-color) inset; - - text-indent: 0; -} - -.contribution-tooltip { - padding: 3px 6px 6px 6px; - left: -34px; -} - -.datetimestamp-tooltip, -.missing-duration-tooltip, -.commentary-date-tooltip, -.rerelease-tooltip, -.first-release-tooltip, -.other-release-tooltip, -.content-tooltip { - padding: 3px 4px 2px 2px; - left: -10px; -} - -.thing-name-tooltip, -.wiki-edits-tooltip { - padding: 3px 4px 2px 2px; - left: -6px; -} - -.thing-name-tooltip .tooltip-content, -.wiki-edits-tooltip .tooltip-content { - font-size: 0.85em; -} - -.thing-name-tooltip .tooltip-content { - width: max-content; - max-width: 120px; -} - -.wiki-edits-tooltip .tooltip-content { - width: max-content; - max-width: 200px; -} - -.contribution-tooltip .tooltip-content { - padding: 6px 2px 2px 2px; - - -webkit-user-select: none; - user-select: none; - - cursor: default; - - display: grid; - - grid-template-columns: - [icon-start] 26px [icon-end handle-start] auto [handle-end platform-start] auto [platform-end]; -} - -.contribution-tooltip .external-link { - display: grid; - grid-column-start: icon-start; - grid-column-end: handle-end; - grid-template-columns: subgrid; - - height: 1.4em; -} - -.contribution-tooltip .chronology-heading { - grid-column-start: handle-start; - grid-column-end: platform-end; - min-width: 30ch; - - font-size: 0.85em; - font-style: oblique; - margin-bottom: 2px; -} - -.contribution-tooltip .chronology-link { - display: grid; - grid-column-start: icon-start; - grid-column-end: handle-end; - grid-template-columns: subgrid; - - height: 1.2em; -} - -.contribution-tooltip .external-icon, -.contribution-tooltip .chronology-symbol { - grid-column-start: icon-start; - grid-column-end: icon-end; -} - -.contribution-tooltip .external-icon svg { - width: 18px; - height: 18px; - top: -0.1em; -} - -.contribution-tooltip .chronology-symbol { - text-align: center; -} - -.contribution-tooltip .external-handle, -.contribution-tooltip .chronology-text { - grid-column-start: handle-start; - grid-column-end: handle-end; - - width: max-content; - max-width: 200px; - - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} - -.contribution-tooltip .external-handle { - padding-right: 8px; -} - -.contribution-tooltip .chronology-text { - padding-right: 6px; -} - -.contribution-tooltip .chronology-text, -.contribution-tooltip .chronology-info { - font-size: 0.85em; -} - -.contribution-tooltip .tooltip-divider, -.tooltip-content hr.cute, -.tooltip-content span.cute-break { - display: block; - grid-column-start: icon-start; - grid-column-end: platform-end; - border-top: 1px dotted var(--primary-color); -} - -/* Don't mind me... */ -.tooltip-content .tooltip-divider, -.tooltip-content hr.cute { - margin-top: 3px; - margin-bottom: 4px; -} - -.contribution-tooltip .external-platform, -.contribution-tooltip .chronology-info { - display: none; - - grid-column-start: platform-start; - grid-column-end: platform-end; - - --external-platform-opacity: 0.8; - opacity: 0.8; - padding-right: 4px; - - white-space: nowrap; -} - -.contribution-tooltip.show-info .external-platform, -.contribution-tooltip.show-info .chronology-info { - display: inline; - animation: external-platform 0.2s forwards linear; -} - -@keyframes external-platform { - from { - opacity: 0; - } - - to { - opacity: var(--external-platform-opacity); - } -} - -.contribution-tooltip .external-link:hover, -.contribution-tooltip .chronology-link:hover { - filter: brightness(1.4); - text-decoration: none; -} - -.contribution-tooltip .external-link:hover .external-handle, -.contribution-tooltip .chronology-link:hover .chronology-text { - text-decoration: underline; -} - -.contribution-tooltip .external-link:hover + .external-platform, -.contribution-tooltip .chronology-link:hover + .chronology-info { - --external-platform-opacity: 1; - text-decoration: underline; - text-decoration-color: #ffffffaa; -} - -.datetimestamp-tooltip .tooltip-content, -.missing-duration-tooltip .tooltip-content, -.commentary-date-tooltip .tooltip-content { - padding: 5px 6px; - white-space: nowrap; - font-size: 0.9em; -} - -.thing-name-tooltip .tooltip-content, -.wiki-edits-tooltip .tooltip-content { - padding: 3px 4.5px; -} - -.rerelease-tooltip .tooltip-content, -.first-release-tooltip .tooltip-content { - padding: 3px 4.5px; - width: 260px; - font-size: 0.9em; -} - -.other-release-tooltip .tooltip-content { - padding: 3px 4.5px; - width: max-content; - max-width: 250px; - font-size: 0.9em; -} - -.other-release-tooltip .tooltip-content .when { - /* technically just putting this in a <span> was enough - * to keep it from wrapping all tight-like, for some - * reason, but im not taking any chances... - */ - white-space: nowrap; -} - -.rerelease-tooltip .not-credited-on-first-release { - opacity: 0.9; -} - -.content-tooltip-guy .hoverable a { - text-decoration-color: transparent; - text-decoration-style: dotted; -} - -.content-tooltip-guy { - display: inline-block; -} - -.content-tooltip-guy:not(.has-link) .hoverable { - cursor: default; -} - -.content-tooltip-guy.has-link .text-with-tooltip-interaction-cue { - text-decoration-color: var(--primary-color); -} - -.content-tooltip .tooltip-content { - padding: 3px 4.5px; - width: max-content; - max-width: 240px; -} - -.cover-artwork .content-tooltip { - font-size: 0.85rem; - padding: 2px 3px; - width: max-content; - max-width: 220px; -} - -.external-icon { - display: inline-block; - padding: 0 3px; - width: 24px; - height: 1em; - position: relative; -} - -.external-icon svg { - width: 24px; - height: 24px; - top: -0.25em; - position: absolute; - fill: var(--primary-color); -} - -.other-group-accent, -.rerelease-line { - opacity: 0.7; - font-style: oblique; -} - -.other-group-accent { - white-space: nowrap; -} - -.other-group-accent a { - color: var(--page-primary-color); -} - -.flash-act-title { - display: inline-block; - text-decoration: inherit; -} - -a .flash-act-title { - color: var(--primary-color); -} - -.wiki-commentary s:not(.spoiler) { - text-decoration-color: #fff9; - text-decoration-thickness: 1.4px; - color: #fffb; -} - -pre.content-code { - position: relative; - white-space: nowrap; - - max-width: calc(100vw - 180px); - - /* Welcome to heck. */ - font-family: inherit; - - border: 1px dashed var(--primary-color); -} - -pre.content-code span { - display: block; - overflow-x: scroll; - padding: 5px 20px 5px 5px; - background: black; - color: white; -} - -pre.content-code::before { - content: ""; - display: block; - position: absolute; - top: 0; - right: 0; - width: 100%; - height: 100%; - box-shadow: -15px 0 24px -8px black inset; - pointer-events: none; -} - -pre.content-code code { - font-family: "courier new", monospace; - font-weight: 800; - font-size: 0.8em; -} - -s.spoiler { - display: inline-block; - color: transparent; - text-decoration: underline; - text-decoration-color: white; - text-decoration-style: dashed; - text-decoration-skip: none; - text-decoration-skip-ink: none; -} - -s.spoiler::selection { - color: black; - background: white; -} - -s.spoiler::-moz-selection { - color: black; - background: white; -} - -span.path, code.filename { - font-size: 0.95em; - font-family: "courier new", monospace; - font-weight: 800; - background: #ccc3; - - padding: 0.05em 0.5ch; - border: 1px solid #ccce; - border-radius: 2px; - line-height: 1.4; -} - -blockquote :is(span.path, code.filename) { - font-size: 0.9em; -} - -.image-details code.filename { - margin-left: -0.4ch; - opacity: 0.8; -} - -.image-details code.filename:hover { - opacity: 1; - cursor: text; -} - -span.path i { - display: inline-block; - font-style: normal; -} - -span.path i::before { - content: "\0020/\0020"; - color: #ccc; -} - -progress { - accent-color: var(--primary-color); -} - -.content-columns { - columns: 2; -} - -.content-columns .column { - break-inside: avoid; -} - -.content-columns .column h2 { - margin-top: 0; - font-size: 1em; -} - -p .current { - font-weight: 800; -} - -hr.cute, -#content hr.cute, -.sidebar hr.cute { - border-color: var(--primary-color); - border-style: none none dotted none; -} - -.cover-artwork, -.music-video { - font-size: 0.8em; - border: 2px solid var(--primary-color); - - border-radius: 0 0 4px 4px; - background: var(--bg-black-color); - - -webkit-backdrop-filter: blur(3px); - backdrop-filter: blur(3px); -} - -.cover-artwork:has(.image-details), -.cover-artwork.has-image-details { - border-radius: 0 0 6px 6px; -} - -.cover-artwork:not(:has(.image-details)), -.cover-artwork:not(.has-image-details) { - /* Hacky: `overflow: hidden` hides tag tooltips, so it can't be applied - * if we've got tags/details visible. But it's okay, because we only - * need to apply it if it *doesn't* - that's when the rounded border - * of the .cover-artwork needs to cut off its child .image-container - * (which has a background that otherwise causes sharp corners). - */ - overflow: hidden; -} - -#artwork-column .cover-artwork, -#artwork-column .music-video { - --normal-shadow: 0 0 12px 12px #00000080; - - box-shadow: - 0 2px 14px -6px var(--primary-color), - var(--normal-shadow); -} - -#artwork-column .cover-artwork:not(:first-child), -#artwork-column .cover-artwork-joiner { - margin-left: 30px; - margin-right: 5px; -} - -#artwork-column .cover-artwork:not(:first-child) { - --normal-shadow: 0 0 9px 9px #00000068; -} - -#artwork-column .cover-artwork:first-child + .cover-artwork-joiner, -#artwork-column .cover-artwork.attached-artwork-is-main-artwork, -#artwork-column .cover-artwork.attached-artwork-is-main-artwork + .cover-artwork-joiner { - margin-left: 17.5px; - margin-right: 17.5px; -} - -#artwork-column *:where(.cover-artwork, .music-video):where(:not(:first-child)) { - margin-top: 20px; -} - -#artwork-column *:is(.cover-artwork, .music-video):last-child:not(:first-child) { - margin-bottom: 25px; -} - -.cover-artwork .image-container, -.music-video .image-container { - /* Border is handled on the .cover-artwork or .music-video. */ - border: none; - border-radius: 0 !important; -} - -.cover-artwork .image-details { - border-top-color: var(--deep-color); -} - -.cover-artwork .image-details + .image-details { - border-top-color: var(--primary-color); -} - -.cover-artwork .image { - display: block; - width: 100%; - height: 100%; -} - -.image-details { - display: block; - - margin-top: 0; - margin-bottom: 0; - - /* Styles below only apply for first image-details. */ - - margin-left: 0; - margin-right: 0; - padding-left: 9px; - padding-right: 9px; - - padding-top: 6px; - padding-bottom: 4px; - - border-top: 1px dashed var(--dim-color); -} - -.image-details + .image-details { - display: block; - - margin-left: 6px; - margin-right: 6px; - padding-left: 3px; - padding-right: 3px; - - padding-top: 4px; - padding-bottom: 4px; - - border-top: 1px dotted var(--primary-color); -} - -.image-details:last-child { - margin-bottom: 2px; -} - -ul.image-details.art-tag-details { - padding-bottom: 0; -} - -ul.image-details.art-tag-details li { - display: inline-block; -} - -ul.image-details.art-tag-details li:not(:last-child)::after { - content: " \00b7 "; -} - -p.image-details.illustrator-details { - text-align: center; - font-style: oblique; -} - -p.image-details.origin-details { - margin-bottom: 2px; -} - -p.image-details.origin-details .origin-details-line { - display: block; - margin-top: 0.25em; -} - -p.image-details.origin-details .filename-line { - display: block; - margin-top: 0.25em; -} - -.cover-artwork-joiner { - z-index: -2; -} - -.cover-artwork-joiner::after { - content: ""; - display: block; - width: 0; - height: 15px; - margin-left: auto; - margin-right: auto; - border-right: 3px solid var(--primary-color); -} - -.cover-artwork-joiner + .cover-artwork { - margin-top: 0 !important; -} - -.music-video { - width: 88.888888%; - margin-left: auto; - border-radius: 4px; - padding: 0 4px; -} - -#artwork-column .cover-artwork + .music-video { - /* higher specificity because CSS is annoying */ - margin-top: 25px; -} - -#artwork-column .cover-artwork + .cover-artwork + .music-video { - margin-top: 30px; -} - -.music-video .music-video-label { - margin: 6px 12px 3px; - text-align: center; -} - -.music-video .music-video-label.title-style { - margin-bottom: 4px; - font-style: oblique; -} - -.music-video .image-container ~ p { - margin: 3px 5px; -} - -.music-video .image-container + p { - margin-top: 5px; -} - -.music-video .image-container ~ p:last-child { - margin-bottom: 6px; -} - -.music-video .image-container { - background: transparent; - border-style: dashed none; - border-width: 2px; - border-color: var(--dim-color); -} - -.music-video .image { - display: block; - aspect-ratio: 16 / 9; - width: 100%; - height: 100%; -} - -.music-video .image-link::after { - content: "▶︎"; - background: #0008; - color: white; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - display: flex; - justify-content: center; - align-items: center; -} - -.music-video .image-link:hover::after { - font-size: 1.4em; - background: #0006; -} - -.music-video .image-inner-area::after { - /* We're overriding normal image-inner-area stuff. */ - opacity: 0.8; - box-shadow: 0 0 4px inset black; -} - -.music-video .image-link:hover .image { - transform: scale(1.02); -} - -.music-video .artists-line { - display: block; - padding-left: 1.2ch; - text-indent: -1.2ch; -} - -.music-video .artists-line > * { - text-indent: 0; -} - -.music-video .artists-line + br { - display: none; -} - -.album-art-info { - font-size: 0.8em; - border: 2px solid var(--deep-color); - - margin: 10px min(15px, 1vw) 15px; - - background: var(--bg-black-color); - padding: 6px; - border-radius: 5px; - - -webkit-backdrop-filter: blur(3px); - backdrop-filter: blur(3px); -} - -.album-art-info p { - margin: 0; -} - -.content-entry-heading { - margin-left: 15px; - padding-left: calc(5px + 1.25ch); - text-indent: -1.25ch; - margin-right: min(calc(8vw - 35px), 45px); - padding-bottom: 0.2em; - - border-bottom: 1px solid var(--dim-color); -} - -.content-entry-accent { - margin-left: 0.25ch; -} - -.content-entry-heading.dated .content-entry-accent { - margin-right: 0.75ch; -} - -.content-entry-annotation { - font-style: oblique; -} - -.content-entry-heading .commentary-date { - display: inline-block; - text-indent: 0; -} - -.content-entry-heading .hoverable { - box-shadow: 1px 2px 6px 5px #04040460; -} - -.content-entry-body summary { - list-style-position: outside; -} - -.content-entry-body summary > span { - color: var(--primary-color); -} - -.inherited-commentary-section { - clear: right; - margin-top: 1em; - margin-bottom: 1.5em; - margin-right: min(4vw, 60px); - border: 2px solid var(--deep-color); - border-radius: 4px; - background: #ffffff07; -} - -.commentary-art { - float: right; - width: 30%; - max-width: 250px; - margin: 15px 0 10px 20px; - - /* This !important is unfortunate, but it's necessary - * even if the rule itself is placed lower, because this - * is a relatively low-priority selector compared to - * others that alter image shadows. - */ - box-shadow: 0 0 4px 5px rgba(0, 0, 0, 0.25) !important; -} - -.lyrics-switcher { - padding-left: 20px; -} - -.lyrics-switcher > span:not(:first-child)::before { - content: "\0020\00b7\0020"; - font-weight: 800; -} - -.lyrics-entry .lyrics-details, -.lyrics-entry .origin-details { - font-size: 0.9em; - font-style: oblique; -} - -.lyrics-entry .lyrics-details { - margin-bottom: 0; -} - -.lyrics-entry .origin-details { - margin-top: 0.25em; -} - -.lyrics-entry.long-lyrics { - clip-path: inset(-15px -20px); -} - -.lyrics-entry.long-lyrics::after { - content: ""; - pointer-events: none; - display: block; - - /* Slight stretching past the bottom of the screen seems - * to make resizing the window (and "revealing" that area) - * a bit smoother. - */ - position: fixed; - bottom: -20px; - left: 0; - right: 0; - - height: calc(20px + min(90px, 13.5vh)); - background: linear-gradient(to bottom, transparent, black 70%, black); - opacity: 0.6; -} - -.lyrics-entry sup { - vertical-align: text-top; - opacity: 0.8; - cursor: default; -} - -.js-hide, -.js-show-once-data, -.js-hide-once-data { - display: none; -} - -.content-image-container, -.content-video-container, -.content-audio-container { - margin-top: 1em; - margin-bottom: 1em; -} - -.content-image-container.align-center { - text-align: center; - margin-top: 1.5em; - margin-bottom: 1.5em; -} - -.content-image-container.align-full { - width: 100%; -} - -a.align-center, img.align-center, audio.align-center, video.align-center { - display: block; - margin-left: auto; - margin-right: auto; -} - -a.align-full, a.align-full img, img.align-full, video.align-full { - width: 100%; -} - -center { - margin-top: 1em; - margin-bottom: 1em; -} - -.content-image { - display: inline-block !important; -} - -.image-link { - display: block; - overflow: hidden; -} - -.image-link:focus { - outline: 3px double white; -} - -.image-link:focus:not(:focus-visible) { - outline: none; -} - -.image-link .image { - display: block; - max-width: 100%; - height: auto; -} - -.square .image-link { - width: 100%; - height: 100%; -} - -.square .image { - width: 100%; - height: 100%; -} - -h1 { - font-size: 1.5em; -} - -#content li { - margin-bottom: 4px; -} - -#content li i { - white-space: nowrap; -} - -#content li.divider { - list-style-type: none; - max-width: 220px; - margin-top: 0.5em; - margin-bottom: 0.5em; -} - -#content li.divider hr { - color: #888; - border: none; - border-bottom: 1px solid; -} - -#content details { - margin-top: 0.25em; - margin-bottom: 0.25em; -} - -#content.top-index h1, -#content.flash-index h1 { - text-align: center; - font-size: 2em; -} - -#content.flash-index h2 { - text-align: center; - font-size: 2.5em; - font-variant: small-caps; - font-style: oblique; - margin-bottom: 0; - text-align: center; - width: 100%; -} - -#content.flash-index h2 .flash-act-title, -#content.flash-index h1 .flash-act-title { - display: block; -} - -#content.flash-index h2 .flash-act-title { - text-transform: uppercase; -} - -#content.top-index h2 { - text-align: center; - font-size: 2em; - font-weight: normal; - margin-bottom: 0.25em; -} - -#content.top-index.has-subtitle h1 { - margin-bottom: 0.35em; -} - -#content.top-index h2.page-subtitle { - font-size: 1.8em; - margin-top: 0.35em; - margin-bottom: 0.5em; -} - -.quick-info { - text-align: center; - padding-left: calc(var(--responsive-padding-ratio) * 100%); - padding-right: calc(var(--responsive-padding-ratio) * 100%); - line-height: 1.25em; -} - -ul.quick-info { - list-style: none; - padding-left: 0; - padding-right: 0; -} - -ul.quick-info li { - display: inline-block; -} - -ul.quick-info li:not(:last-child)::after { - content: " \00b7 "; - font-weight: 800; -} - -.carousel-container + .quick-info, -.carousel-container + .quick-description { - margin-top: 25px; -} - -.gallery-set-switcher { - text-align: center; -} - -.gallery-view-switcher, -.gallery-style-selector { - margin-left: auto; - margin-right: auto; - text-align: center; - line-height: 1.4; -} - -.gallery-style-selector .styles { - display: inline-flex; - justify-content: center; -} - -.gallery-style-selector .styles label:not(:last-child) { - margin-right: 1.25ch; -} - -.gallery-style-selector .count { - font-size: 0.85em; - - position: relative; - bottom: -0.25em; - - opacity: 0.9; -} - -#content.top-index section { - margin-bottom: 1.5em; -} - -.quick-description:not(.has-external-links-only) { - --clamped-padding-ratio: max(var(--responsive-padding-ratio), 0.06); - margin-left: auto; - margin-right: auto; - padding-left: calc(0.40 * var(--clamped-padding-ratio) * 100%); - padding-right: calc(0.40 * var(--clamped-padding-ratio) * 100%); - max-width: 500px; - - padding-top: 0.25em; - padding-bottom: 0.75em; - border-left: 1px solid var(--dim-color); - border-right: 1px solid var(--dim-color); - line-height: 1.25em; -} - -.quick-description.has-external-links-only { - padding-left: 12%; - padding-right: 12%; -} - -.quick-description.has-content-only { - padding-bottom: 0.5em; -} - -.quick-description p { - text-align: center; -} - -.quick-description > blockquote { - margin-left: 0 !important; - margin-right: 0 !important; -} - -.quick-description .description-content.long hr ~ p { - text-align: left; -} - -.quick-description > .description-content :first-child { - margin-top: 0; -} - -.quick-description > .quick-description-actions, -.quick-description.has-content-only .description-content :last-child { - margin-bottom: 0; -} - -.quick-description:not(.collapsed) .description-content.short, -.quick-description:not(.collapsed) .quick-description-actions.when-collapsed, -.quick-description:not(.expanded) .description-content.long, -.quick-description:not(.expanded) .quick-description-actions.when-expanded { - display: none; -} - -.quick-description .quick-description-actions .expand-link, -.quick-description .quick-description-actions .collapse-link { - text-decoration: underline; - text-decoration-style: dotted; -} - -#intro-menu { - margin: 24px 0; - padding: 10px; - background-color: #222222; - text-align: center; - border: 1px dotted var(--primary-color); - border-radius: 2px; -} - -#intro-menu p { - margin: 12px 0; -} - -#intro-menu a { - margin: 0 6px; -} - -dt .by, li .by { - font-style: oblique; -} - -dt .by a, li .by a { - display: inline-block; -} - -p code { - font-size: 0.95em; - font-family: "courier new", monospace; - font-weight: 800; - line-height: 1.1; -} - -#content blockquote { - margin-left: 40px; - margin-right: min(8vw, 75px); - width: auto; -} - -#content blockquote blockquote { - margin-left: 10px; - padding-left: 10px; - margin-right: 20px; - border-left: dotted 1px; - padding-top: 6px; - padding-bottom: 6px; -} - -#content blockquote blockquote > :first-child { - margin-top: 0; -} - -#content blockquote blockquote > :last-child { - margin-bottom: 0; -} - -#content blockquote h2 { - font-size: 1em; - font-weight: 800; -} - -#content blockquote h3 { - font-size: 1em; - font-weight: normal; - font-style: oblique; -} - -main { - --responsive-padding-ratio: 0.10; -} - -main.long-content { - --long-content-padding-ratio: var(--responsive-padding-ratio); -} - -main.long-content .main-content-container, -main.long-content > h1 { - padding-left: calc(var(--long-content-padding-ratio) * 100%); - padding-right: calc(var(--long-content-padding-ratio) * 100%); -} - -dl dt { - padding-left: 40px; -} - -dl dt { - /* Heads up, this affects the measurement - * for dl dt which are .content-heading! - */ - margin-bottom: 2px; -} - -dl dt[id]:not(.content-heading) { - --custom-scroll-offset: calc(2.5em - 2px); -} - -dl dd { - margin-bottom: 1em; -} - -dl ul, -dl ol { - margin-top: 0; - margin-bottom: 0; -} - -ul > li.has-details { - list-style-type: none; - margin-left: -17px; -} - -li .origin-details { - display: block; - margin-left: 2ch; - font-size: 0.9em; - font-style: oblique; -} - -.album-group-list dt, -.group-series-list dt { - font-style: oblique; - padding-left: 0; -} - -.album-group-list dd, -.group-series-list dd { - margin-left: 0; -} - -.album-group-list li { - padding-left: 1.5ch; - text-indent: -1.5ch; -} - -.album-group-list li > * { - text-indent: 0; -} - -blockquote:is( - .album-group-list *, .group-series-list * -) { - max-width: 540px; - margin-bottom: 9px; - margin-top: 3px; -} - -blockquote p:first-child:is( - .album-group-list *, .group-series-list * -) { - margin-top: 0; -} - -blockquote p:last-child:is( - .album-group-list *, .group-series-list * -) { - margin-bottom: 0; -} - -.group-chronology-link, -.series-chronology-link { - font-style: oblique; -} - -.group-chronology-link a, -.series-chronology-link a { - font-style: normal; -} - -.group-view-switcher { - margin-left: 1ch; -} - -#content hr { - border: 1px inset #808080; -} - -#content hr.split { - color: #808080; -} - -#content hr.split::before { - content: "(split)"; -} - -#content hr.main-separator { - color: var(--dim-color); - clear: none; - margin-top: -0.25em; - margin-bottom: 1.75em; -} - -#content hr.main-separator::before { - content: "♦"; - font-size: 1.2em; -} - -#content hr.split, -#content hr.main-separator { - position: relative; - overflow: hidden; - border: none; -} - -#content hr.split::after, -#content hr.main-separator::after { - display: inline-block; - content: ""; - width: calc(100% - min(calc(8vw - 35px), 45px)); - position: absolute; - top: 50%; - margin-left: 10px; -} - -#content hr.split::after { - border: 1px inset currentColor; - margin-top: -2px; -} - -#content hr.main-separator::after { - border-bottom: 1px solid currentColor; -} - -li > ul { - margin-top: 5px; -} - -.additional-files-list { - padding-left: 0; -} - -.additional-files-list > li { - list-style-type: none; -} - -.additional-files-list summary { - /* Sorry, Safari! - * https://bugs.webkit.org/show_bug.cgi?id=157323 - */ - list-style-position: outside; - margin-left: 40px; -} - -.additional-files-list details ul { - margin-left: 40px; - margin-top: 2px; - margin-bottom: 10px; -} - -.additional-files-list .entry-description { - list-style-type: none; - max-width: 540px; - - /* This should be margin-bottom, but cascading rules - * cause some awkwardness - `#content li` takes precedence. - */ - padding-bottom: 3px; -} - -.group-contributions-table { - display: inline-block; -} - -.group-contributions-table .group-contributions-row { - display: flex; - justify-content: space-between; -} - -.group-contributions-table .group-contributions-metrics { - margin-left: 1.5ch; - white-space: nowrap; -} - -.group-contributions-sorted-by-count:not(.visible), -.group-contributions-sorted-by-duration:not(.visible) { - display: none; -} - -.group-contributions-sort-button { - text-decoration: underline; - text-decoration-style: dotted; -} - -html[data-url-key="localized.albumCommentary"] li.no-commentary { - opacity: 0.7; -} - -html[data-url-key="localized.albumCommentary"] .content-heading-main-title { - margin-right: 0.25em; -} - -html[data-url-key="localized.albumCommentary"] .content-heading-accent { - font-weight: normal; - font-style: oblique; - font-size: 0.9rem; - display: inline-block; -} - -html[data-url-key="localized.albumCommentary"] p.track-info { - margin-left: 20px; -} - -html[data-url-key="localized.artistRollingWindow"] #content p { - text-align: center; -} - -html[data-url-key="localized.artistRollingWindow"] #content input[type=number] { - width: 3em; - margin: 0 0.25em; - background: black; - color: white; - border: 1px dotted var(--primary-color); - padding: 4px; - border-radius: 3px; -} - -html[data-url-key="localized.artistRollingWindow"] #timeframe-selection-control a { - display: inline-block; - padding: 5px; - text-decoration: underline; - text-decoration-style: dotted; -} - -html[data-url-key="localized.artistRollingWindow"] #timeframe-selection-control a:not([href]) { - text-decoration: none; - opacity: 0.7; -} - -html[data-url-key="localized.artistRollingWindow"] #timeframe-source-area { - border: 1px dashed #ffffff42; - border-top-style: solid; - border-bottom-style: solid; - - display: flex; - flex-direction: column; - justify-content: center; - min-height: calc(100vh - 260px); -} - -html[data-url-key="localized.artistRollingWindow"] #timeframe-source-area .grid-listing { - width: 100%; -} - -html[data-url-key="localized.artistRollingWindow"] .grid-item.peeking { - opacity: 0.8; - background: #ffffff24; -} - -html[data-url-key="localized.artistRollingWindow"] .grid-item > span:not(:first-of-type) { - display: flex; - flex-direction: row; - justify-content: center; - flex-wrap: wrap; -} - -html[data-url-key="localized.artistRollingWindow"] .grid-item > span:not(:first-of-type) > *:not([style*="display: none"]) ~ *::before { - content: '\00b7'; - margin-left: 0.5ch; - margin-right: 0.5ch; -} - -html[data-url-key="localized.groupInfo"] .by a { - color: var(--page-primary-color); -} - -html[data-url-key="localized.listing"][data-url-value0="random"] #data-loading-line, -html[data-url-key="localized.listing"][data-url-value0="random"] #data-loaded-line, -html[data-url-key="localized.listing"][data-url-value0="random"] #data-error-line { - display: none; -} - -html[data-url-key="localized.listing"][data-url-value0="random"] #content a:not([href]) { - opacity: 0.7; -} - -html[data-url-key="localized.newsEntry"] .read-another-links { - font-style: oblique; - font-size: 0.9em; -} - -/* Additional names (heading and box) */ - -h1 a[href="#additional-names-box"] { - color: inherit; - text-decoration: underline; - text-decoration-style: dotted; -} - -h1 a[href="#additional-names-box"]:hover { - text-decoration-style: solid; -} - -#additional-names-box { - --custom-scroll-offset: calc(0.5em - 2px); - - margin: 1em 0 1em -10px; - max-width: min(60vw, 600px); - - padding: 15px 20px 10px 20px; -} - -#additional-names-box:not(.always-visible) { - display: none; -} - -#additional-names-box > :first-child { margin-top: 0; } -#additional-names-box > :last-child { margin-bottom: 0; } - -#additional-names-box p { - padding-left: 10px; - padding-right: 10px; - margin-bottom: 0; - font-style: oblique; -} - -#additional-names-box ul { - padding-left: 10px; - margin-top: 0.5em; -} - -#additional-names-box li .additional-name { - margin-right: 0.25em; -} - -#additional-names-box li .additional-name .content-image { - margin-bottom: 0.25em; - margin-top: 0.5em; -} - -#additional-names-box li .accent { - opacity: 0.8; -} - -#additional-names-box li .additional-name > img { - vertical-align: text-bottom; -} - -#content.top-index #additional-names-box { - margin-left: auto; - margin-right: auto; - margin-bottom: 2em; -} - -#content.top-index #additional-names-box { - text-align: center; - margin-bottom: 0.75em; -} - -/* Specific pages - homepage */ - -html[data-url-key="localized.home"] #content h1 { - text-align: center; - font-size: 2.5em; -} - -html[data-language-code="preview-en"][data-url-key="localized.home"] #content h1::after { - font-family: cursive; - display: block; - content: "(Preview Build)"; - font-size: 0.8em; -} - -/* Specific pages - art tag gallery */ - -html[data-url-key="localized.artTagGallery"] #descends-from-line { - margin-bottom: 0.25em; -} - -html[data-url-key="localized.artTagGallery"] #descendants-line { - margin-top: 0.25em; -} - -html[data-url-key="localized.artTagGallery"] #descends-from-line a, -html[data-url-key="localized.artTagGallery"] #descendants-line a { - display: inline-block; -} - - -html[data-url-key="localized.artTagGallery"] #featured-direct-line, -html[data-url-key="localized.artTagGallery"] #featured-indirect-line, -html[data-url-key="localized.artTagGallery"] #showing-direct-line, -html[data-url-key="localized.artTagGallery"] #showing-indirect-line { - display: none; -} - -html[data-url-key="localized.artTagGallery"] #showing-all-line a, -html[data-url-key="localized.artTagGallery"] #showing-direct-line a, -html[data-url-key="localized.artTagGallery"] #showing-indirect-line a { - text-decoration: underline; - text-decoration-style: dotted; -} - -/* Specific pages - "Art Tag Network" listing */ - -html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dd:not(#network-top-dl > dd) { - margin-left: 20px; - margin-bottom: 0; - padding-left: 10px; -} - -html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dd:not(#network-top-dl > dd):not(:last-child) { - padding-bottom: 20px; -} - -html[data-url-key="localized.listing"][data-url-value0="tags/network"] #network-stat-line { - padding-left: 10px; - margin-left: 20px; -} - -html[data-url-key="localized.listing"][data-url-value0="tags/network"] #network-stat-line a { - text-decoration: underline; - text-decoration-style: dotted; -} - -html[data-url-key="localized.listing"][data-url-value0="tags/network"] .network-tag-stat { - display: inline-block; - text-align: right; - min-width: 5ch; - margin-right: 2px; -} - -html[data-url-key="localized.listing"][data-url-value0="tags/network"] #network-top-dl > dt:has(.network-tag.with-stat:not([style*="display: none"])) { - padding-left: 20px; -} - -html[data-url-key="localized.listing"][data-url-value0="tags/network"] dt + dt:has(+ dd) { - padding-top: 20px; -} - -html[data-url-key="localized.listing"][data-url-value0="tags/network"] dt:has(+ dd) .network-tag-stat { - text-align: center; -} - -html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dt { - padding-left: 10px; - margin-left: 20px; - margin-bottom: 0; - padding-bottom: 2px; - max-width: unset; -} - -html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dd:not(#network-top-dl > dd).even, -html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dt:not(#network-top-dl > dt).even { - border-left: 1px solid #eaeaea; -} - -html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dd:not(#network-top-dl > dd).odd, -html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dt:not(#network-top-dl > dt).odd { - border-left: 1px solid #7b7b7b; -} - -html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dd, -html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dt { - position: relative; -} - -html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dd:last-child:not(#network-top-dl > dd).odd::after, -html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dt:last-child:not(#network-top-dl > dt).odd::after { - content: ""; - display: block; - width: 7px; - height: 7px; - background: #7b7b7b; - position: absolute; - bottom: -4px; - left: -4px; -} - -html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dd:last-child:not(#network-top-dl > dd).even::after, -html[data-url-key="localized.listing"][data-url-value0="tags/network"] dl dt:last-child:not(#network-top-dl > dt).even::after { - content: ""; - display: block; - width: 6px; - height: 6px; - background: #eaeaea; - position: absolute; - bottom: -3px; - left: -3px; - border-bottom-right-radius: 6px; - border-top-left-radius: 3px; -} - -/* "Drops" */ - -.drop { - padding: 15px 20px; - width: max-content; - max-width: min(60vw, 600px); - - border: 1px dotted var(--primary-color); - border-radius: 6px; - - background: - linear-gradient(var(--bg-color), var(--bg-color)), - linear-gradient(#000000bb, #000000bb), - var(--primary-color); - - --drop-shadow: 0 -2px 6px -1px var(--dim-color) inset; - box-shadow: var(--drop-shadow); -} - -.drop.shiny { - cursor: default; -} - -@supports (box-shadow: 1px 1px 1px color-mix(in srgb, blue, 40% red)) { - @property --drop-shine { - syntax: '<percentage>'; - initial-value: 0%; - inherits: false; - } - - .drop.shiny { - cursor: default; - transition: --drop-shine 0.2s; - } - - .drop.shiny:hover { - --drop-shine: 100%; - - box-shadow: - var(--drop-shadow), - 0 2px 4px -0.5px color-mix(in srgb, var(--primary-color), calc(100% - var(--drop-shine)) transparent); - } -} - -.commentary-drop { - margin-top: 25px; - margin-bottom: 15px; - margin-left: 20px; - padding: 10px 20px; - max-width: min(60vw, 300px); -} - -/* Images */ - -.image-container { - display: block; - box-sizing: border-box; - position: relative; - height: 100%; - overflow: hidden; - - background-color: var(--dim-color); - border: 2px solid var(--primary-color); - border-radius: 0; - box-shadow: 0 2px 4px -2px var(--bg-black-color) inset; - - text-align: left; - color: white; -} - -/* Videos and audios (in content) get a lite version of image-container. */ -.content-video-container, -.content-audio-container { - width: fit-content; - max-width: 100%; - background-color: var(--dark-color); - border: 2px solid var(--primary-color); - border-radius: 2.5px 2.5px 3px 3px; - padding: 5px; -} - -.content-video-container video, -.content-audio-container audio { - display: block; - max-width: 100%; -} - -.content-video-container.align-center, -.content-audio-container.align-center { - margin-left: auto; - margin-right: auto; -} - -.content-video-container.align-full, -.content-audio-container.align-full { - width: 100%; -} - -.content-audio-container .filename { - color: white; - font-family: monospace; - display: block; - font-size: 0.9em; - padding-left: 1ch; - padding-right: 1ch; - padding-bottom: 0.25em; - margin-bottom: 0.5em; - border-bottom: 1px solid #fff4; -} - -.image-text-area { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - display: flex; - align-items: center; - justify-content: center; - text-align: center; - padding: 5px 15px; - - background: rgba(0, 0, 0, 0.65); - box-shadow: 0 0 5px rgba(0, 0, 0, 0.5) inset; - - line-height: 1.35em; - color: var(--primary-color); - font-style: oblique; - text-shadow: 0 2px 5px rgba(0, 0, 0, 0.75); -} - -.image-outer-area { - width: 100%; - height: 100%; - padding: 5px; - box-sizing: border-box; -} - -.image-link { - border-bottom: 1px solid #ffffff03; - border-radius: 2.5px 2.5px 3px 3px; - box-shadow: - 0 1px 8px -3px var(--bg-black-color); -} - -.image-inner-area { - position: relative; - width: 100%; - height: 100%; -} - -.image-link .image-inner-area { - /* Jankily fix a rendering issue with border-radius on Safari. - * The `-webkit-` prefix is only to keep this from applying on - * other browsers (well, Firefox), where it doesn't *break* - * anything, but also isn't necessary. - */ - -webkit-transform: translateZ(0); -} - -img { - object-fit: cover; -} - -.image { - --reveal-filter: ; - --shadow-filter: ; - - backdrop-filter: blur(0); - filter: - var(--reveal-filter) - var(--shadow-filter); -} - -p > img, li > img { - max-width: 100%; - object-fit: contain; - height: auto; - vertical-align: text-bottom; -} - -.image-inner-area::after { - content: ""; - display: block; - position: absolute; - pointer-events: none; - top: 0; - left: 0; - right: 0; - bottom: 0; - border-bottom-left-radius: 0.5px; - opacity: 0.035; - box-shadow: - 6px -6px 2px -4px white inset; -} - -img.pixelate, .pixelate img, -video.pixelate, .pixelate video { - image-rendering: crisp-edges; -} - -.reveal-text-container { - position: absolute; - top: 15px; - left: 10px; - right: 10px; - bottom: 10px; - display: flex; - flex-direction: column; - justify-content: center; -} - -.grid-item .reveal-text { - font-size: 0.9em; -} - -.reveal-text { - color: white; - text-align: center; - font-weight: bold; - padding-bottom: 0.5em; - font-size: 0.8rem; -} - -.reveal-symbol { - display: inline-block; - width: 1em; - height: 1em; - margin-bottom: 0.1em; - - font-size: 1.6em; - opacity: 0.8; -} - -.reveal-interaction { - opacity: 0.8; - text-decoration: underline; - text-decoration-style: dotted; -} - -.reveal:not(.revealed) .image { - opacity: 0.7; - --reveal-filter: blur(20px) brightness(0.7); -} - -.reveal .image.reveal-thumbnail { - position: absolute; - top: 0; - left: 0; - image-rendering: pixelated; -} - -.reveal.has-reveal-thumbnail:not(.revealed) .image:not(.reveal-thumbnail) { - /* Keep the main image as part of the box model. - * It's what actually defines the dimensions of the - * image-container, so those dimensions never shift - * once the image is actually revealed. - */ - visibility: hidden; -} - -.reveal.revealed.has-reveal-thumbnail .image.reveal-thumbnail { - display: none !important; -} - -.reveal.revealed .image { - opacity: 1; -} - -.reveal.revealed .reveal-text-container { - display: none; -} - -.reveal:not(.revealed) .image-outer-area > * { - --reveal-border-radius: 6px; - position: relative; - border-radius: var(--reveal-border-radius); -} - -.reveal:not(.revealed) .image-outer-area > *::after { - content: ""; - position: absolute; - box-sizing: border-box; - top: 0; - left: 0; - bottom: 0; - right: 0; - border: 1px dotted var(--primary-color); - border-radius: var(--reveal-border-radius); - pointer-events: none; - - /* By an awkward DOM intersection, this element might be - * .image-inner-area::after, which is already styled with - * a slight visual effect. Guarantee that the properties - * set to that end are overwritten, and fully co-opt it - * to serve as the interaction cue instead. - */ - box-shadow: none; - opacity: 1; -} - -.reveal:not(.revealed) .image-inner-area { - background: var(--deep-color); -} - -.reveal:not(.revealed) .image-outer-area > *:hover::after { - border-style: solid; - box-shadow: 0 0 0 1.5px #00000099 inset; -} - -.reveal:not(.revealed) .image-outer-area > *:hover .image { - --reveal-filter: blur(20px) brightness(0.6); - opacity: 0.6; -} - -.reveal:not(.revealed) .image-outer-area > *:hover .reveal-interaction { - text-decoration-style: solid; -} - -.image-container.has-link:not(.no-image-preview) { - background: var(--deep-color); - box-shadow: none; - border-radius: 0 0 4px 4px; -} - -.sidebar .image-container { - max-width: 350px; -} - -/* Grid listings */ - -.grid-listing { - display: flex; - flex-wrap: wrap; - justify-content: center; - align-items: flex-start; - padding: 5px 15px; - box-sizing: border-box; - margin-top: 1em; -} - -.grid-listing:not(:has(.grid-item:not([class*="hidden-by-"]))) { - padding-bottom: 140px; - background: #cccccc07; - border-radius: 10px; - border: 1px dashed #fff3; -} - -.grid-listing .reveal-all-container { - flex-basis: 100%; -} - -.grid-listing:not(:has(.grid-item:not([class*="hidden-by-"]))) .reveal-all-container { - display: none; -} - -.grid-listing .reveal-all-container.has-nearby-tab { - margin-bottom: 0.6em; -} - -.grid-listing .reveal-all { - max-width: 400px; - margin: 0.20em auto 0; - text-align: center; -} - -.grid-listing .reveal-all .warnings:not(.reveal-all:hover *) { - opacity: 0.4; -} - -.grid-listing .reveal-all a { - display: inline-block; - margin-bottom: 0.15em; - - text-decoration: underline; - text-decoration-style: dotted; -} - -.grid-listing .reveal-all b { - white-space: nowrap; -} - -.grid-item { - line-height: 1.2; - font-size: 0.9em; -} - -.grid-item { - --tab-pull: 0px; - --tabnt-offset: 0px; - - display: inline-block; - text-align: center; - background-color: #111111; - border: 1px dotted var(--primary-color); - border-radius: 2px; - padding: 5px; - - margin: 10px; - margin-top: - calc( - 10px - - var(--tab-pull) - + var(--tabnt-offset)); -} - -.grid-item.has-tab { - border-radius: 8px 8px 3px 3px; -} - -.grid-item.has-tab:hover { - --tab-pull: 3px; -} - -.grid-item:not(.has-tab) { - --tabnt-offset: calc(1.2em - 4px); -} - -.grid-item[class*="hidden-by-"] { - display: none; -} - -.grid-item .image-container { - width: 100%; -} - -.grid-item .image-inner-area { - border-radius: 0; - box-shadow: none; -} - -.grid-item .image-inner-area::after { - box-shadow: none; -} - -.grid-item .image { - --shadow-filter: - drop-shadow(0 3px 2px #0004) - drop-shadow(0 1px 5px #0001) - drop-shadow(0 3px 4px #0001); - - width: 100%; - height: 100% !important; - margin-top: auto; - margin-bottom: auto; - object-fit: contain; -} - -.grid-item:hover { - text-decoration: none; -} - -.grid-actions .grid-item:hover { - text-decoration: underline; -} - -.grid-item > span { - display: block; - overflow-wrap: break-word; - hyphens: auto; -} - -/* tab */ -.grid-item > span:first-child { - margin-bottom: calc(3px + var(--tab-pull)); - - font-style: oblique; -} - -/* info */ -.grid-item > .image-container + span ~ span { - margin-top: 2px; - - font-size: 0.9em; - opacity: 0.8; -} - -/* title */ -.grid-item > .image-container + span { - margin-top: 6px; -} - -.grid-item:hover > .image-container + span { - text-decoration: underline; -} - -.grid-listing > .grid-item { - flex: 1 25%; - max-width: 200px; -} - -.grid-name-marker { - color: white; -} - -.grid-actions { - display: flex; - flex-direction: row; - margin: 15px; - align-self: center; - flex-wrap: wrap; - justify-content: center; -} - -.grid-actions > .grid-item { - flex-basis: unset !important; - margin: 5px; - width: 120px; - --primary-color: inherit !important; - --dim-color: inherit !important; -} - -.grid-caption { - flex-basis: 100%; - text-align: center; - line-height: 1.5; -} - -.grid-expando { - margin-top: 1em; - margin-bottom: 2em; - flex-basis: 100%; - - display: flex; - flex-direction: row; - justify-content: space-around; -} - -.grid-expando-content { - margin: 0; - text-align: center; - line-height: 1.5; -} - -.grid-expando-toggle { - text-decoration: underline; - text-decoration-style: dotted; -} - -.grid-item.shown-by-expandable-cut { - animation: expand-cover-grid 0.8s forwards; -} - -@keyframes expand-cover-grid { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} - -/* Carousel */ - -.carousel-container { - --carousel-tile-min-width: 120px; - --carousel-row-count: 3; - --carousel-column-count: 6; - - position: relative; - overflow: hidden; - margin: 20px 0 5px 0; - padding: 8px 0; -} - -.carousel-container::before { - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: var(--dim-color); - filter: brightness(0.6); -} - -.carousel-container::after { - content: ""; - pointer-events: none; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - border: 1px solid var(--primary-color); - border-radius: 4px; - z-index: 40; - box-shadow: - inset 20px 2px 40px var(--shadow-color), - inset -20px -2px 40px var(--shadow-color); -} - -.carousel-container:hover .carousel-grid { - animation-play-state: running; -} - -html[data-url-key="localized.home"] .carousel-container { - --carousel-tile-size: 140px; -} - -.carousel-container[data-carousel-rows="1"] { --carousel-row-count: 1; } -.carousel-container[data-carousel-rows="2"] { --carousel-row-count: 2; } -.carousel-container[data-carousel-rows="3"] { --carousel-row-count: 3; } -.carousel-container[data-carousel-columns="4"] { --carousel-column-count: 4; } -.carousel-container[data-carousel-columns="5"] { --carousel-column-count: 5; } -.carousel-container[data-carousel-columns="6"] { --carousel-column-count: 6; } - -.carousel-grid:nth-child(2), -.carousel-grid:nth-child(3) { - position: absolute; - top: 8px; - left: 0; - right: 0; -} - -.carousel-grid:nth-child(2) { - animation-name: carousel-marquee2; -} - -.carousel-grid:nth-child(3) { - animation-name: carousel-marquee3; -} - -@keyframes carousel-marquee1 { - 0% { - transform: translateX(-100%) translateX(70px); - } - - 100% { - transform: translateX(-200%) translateX(70px); - } -} - -@keyframes carousel-marquee2 { - 0% { - transform: translateX(0%) translateX(70px); - } - - 100% { - transform: translateX(-100%) translateX(70px); - } -} - -@keyframes carousel-marquee3 { - 0% { - transform: translateX(100%) translateX(70px); - } - - 100% { - transform: translateX(0%) translateX(70px); - } -} - -.carousel-grid { - /* Thanks to: https://css-tricks.com/an-auto-filling-css-grid-with-max-columns/ */ - --carousel-gap-count: calc(var(--carousel-column-count) - 1); - --carousel-total-gap-width: calc(var(--carousel-gap-count) * 10px); - --carousel-calculated-tile-max-width: calc((100% - var(--carousel-total-gap-width)) / var(--carousel-column-count)); - - display: grid; - grid-template-columns: repeat(auto-fill, minmax(max(var(--carousel-tile-min-width), var(--carousel-calculated-tile-max-width)), 1fr)); - grid-template-rows: repeat(var(--carousel-row-count), auto); - grid-auto-flow: dense; - grid-auto-rows: 0; - overflow: hidden; - margin: auto; - - transform: translateX(0); - animation: carousel-marquee1 40s linear infinite; - animation-play-state: paused; - z-index: 5; -} - -.carousel-item { - display: inline-block; - margin: 0; - flex: 1 1 150px; - padding: 3px; - border-radius: 10px; - filter: brightness(0.8); -} - -.carousel-item .image-container { - border: none; - border-radius: 5px; -} - -.carousel-item .image-outer-area { - padding: 0; -} - -.carousel-item .image-inner-area::after { - box-shadow: none; -} - -.carousel-item .image { - width: 100%; - height: 100%; - margin-top: auto; - margin-bottom: auto; -} - -.carousel-item:hover { - filter: brightness(1); - background: var(--dim-color); -} - -/* Info card */ - -#info-card-container { - position: absolute; - - left: 0; - right: 10px; - - pointer-events: none; /* Padding area shouldn't 8e interactive. */ - display: none; -} - -#info-card-container.show, -#info-card-container.hide { - display: flex; -} - -#info-card-container > * { - flex-basis: 400px; -} - -#info-card-container.show { - animation: 0.2s linear forwards info-card-show; - transition: top 0.1s, left 0.1s; -} - -#info-card-container.hide { - animation: 0.2s linear forwards info-card-hide; -} - -@keyframes info-card-show { - 0% { - opacity: 0; - margin-top: -5px; - } - - 100% { - opacity: 1; - margin-top: 0; - } -} - -@keyframes info-card-hide { - 0% { - opacity: 1; - margin-top: 0; - } - - 100% { - opacity: 0; - margin-top: 5px; - display: none !important; - } -} - -.info-card-decor { - padding-left: 3ch; - border-top: 1px solid white; -} - -.info-card { - background-color: black; - color: white; - - border: 1px dotted var(--primary-color); - border-radius: 3px; - box-shadow: 0 5px 5px black; - - padding: 5px; - font-size: 0.9em; - - pointer-events: none; -} - -.info-card::after { - content: ""; - display: block; - clear: both; -} - -#info-card-container.show .info-card { - animation: 0.01s linear 0.2s forwards info-card-become-interactive; -} - -@keyframes info-card-become-interactive { - to { - pointer-events: auto; - } -} - -.info-card-art-container { - float: right; - - width: 40%; - margin: 5px; - font-size: 0.8em; - - /* Dynamically shown. */ - display: none; -} - -.info-card-art-container .image-container { - padding: 2px; -} - -.info-card-art { - display: block; - width: 100%; - height: 100%; -} - -.info-card-name { - font-size: 1em; - border-bottom: 1px dotted; - margin: 0; -} - -.info-card p { - margin-top: 0.25em; - margin-bottom: 0.25em; -} - -.info-card p:last-child { - margin-bottom: 0; -} - -/* Custom hash links */ - -.content-heading { - border-bottom: 3px double transparent; - margin-bottom: -3px; -} - -.content-heading.highlight-hash-link { - animation: highlight-hash-link 4s; - animation-delay: 125ms; -} - -dl dt.content-heading { - /* Basic margin-bottom for dt is 2px, - * so just subtract 3px from that. - */ - margin-bottom: -1px; -} - -h3.content-heading { - clear: both; -} - -summary.content-heading { - list-style-type: none; -} - -summary.content-heading .cue { - display: inline-flex; - color: var(--primary-color); -} - -summary.content-heading .cue::after { - content: ""; - padding-left: 0.5ch; - display: list-item; - list-style-type: disclosure-closed; - list-style-position: inside; -} - -details[open] > summary.content-heading .cue::after { - list-style-type: disclosure-open; -} - -summary.content-heading > span:hover { - text-decoration: none !important; -} - -summary.content-heading > span:hover .cue { - text-decoration: underline; - text-decoration-style: wavy; -} - -summary.content-heading .when-open { - display: none; -} - -details[open] > summary.content-heading .when-open { - display: unset; -} - -details[open] > summary.content-heading .when-collapsed { - display: none; -} - -/* This animation's name is referenced in JavaScript */ -@keyframes highlight-hash-link { - 0% { - border-bottom-color: transparent; - } - - 10% { - border-bottom-color: white; - } - - 25% { - border-bottom-color: white; - } - - 100% { - border-bottom-color: transparent; - } -} - -/* Sticky heading */ - -[id] { - --custom-scroll-offset: 0px; -} - -#content [id] { - /* Adjust scroll margin. */ - scroll-margin-top: calc( - 74px /* Sticky heading */ - + 33px /* Sticky subheading */ - - 1em /* One line of text (align bottom) */ - - 12px /* Padding for hanging letters & focus ring */ - + var(--custom-scroll-offset) /* Customizable offset */ - ); -} - -.content-sticky-heading-root { - width: calc(100% + 2 * var(--content-padding)); - margin: calc(-1 * var(--content-padding)); - margin-bottom: 0; -} - -.content-sticky-heading-anchor, -.content-sticky-heading-container { - width: 100%; -} - -.content-sticky-heading-root:not([inert]) { - position: sticky; - top: 0; -} - -.content-sticky-heading-anchor:not(:where(.content-sticky-heading-root[inert]) *) { - position: relative; -} - -.content-sticky-heading-container:not(:where(.content-sticky-heading-root[inert]) *) { - position: absolute; -} - -.content-sticky-heading-root[inert] { - visibility: hidden; -} - -main.long-content .content-sticky-heading-container { - padding-left: 0; - padding-right: 0; -} - -main.long-content .content-sticky-heading-container .content-sticky-heading-row, -main.long-content .content-sticky-heading-container .content-sticky-subheading-row { - padding-left: calc(var(--long-content-padding-ratio) * (100% - 2 * var(--content-padding)) + var(--content-padding)); - padding-right: calc(var(--long-content-padding-ratio) * (100% - 2 * var(--content-padding)) + var(--content-padding)); -} - -.content-sticky-heading-row { - box-sizing: border-box; - padding: - calc(1.25 * var(--content-padding) + 5px) - 20px - calc(0.75 * var(--content-padding)) - 20px; - - width: 100%; - margin: 0; - - background: var(--bg-black-color); - border-bottom: 1px dotted rgba(220, 220, 220, 0.4); - - -webkit-backdrop-filter: blur(6px); - backdrop-filter: blur(6px); -} - -.content-sticky-heading-container.has-cover .content-sticky-heading-row, -.content-sticky-heading-container.has-cover .content-sticky-subheading-row { - display: grid; - grid-template-areas: - "title cover"; - grid-template-columns: 1fr min(40%, 400px); -} - -.content-sticky-heading-container.cover-visible .content-sticky-heading-row { - grid-template-columns: 1fr min(40%, 90px); -} - -.content-sticky-heading-row h1 { - position: relative; - margin: 0; - padding-right: 20px; - overflow-x: hidden; -} - -.content-sticky-heading-row h1 .reference-collapsed-heading { - position: absolute; - white-space: nowrap; - visibility: hidden; -} - -.content-sticky-heading-container.collapse h1 { - white-space: nowrap; - overflow-wrap: normal; - - animation: collapse-sticky-heading 0.35s forwards; - text-overflow: ellipsis; - overflow-x: hidden; -} - -@keyframes collapse-sticky-heading { - from { - height: var(--uncollapsed-heading-height); - } - - 99.9% { - height: var(--collapsed-heading-height); - } - - to { - height: auto; - } -} - -.content-sticky-heading-container h1 a { - transition: text-decoration-color 0.35s; -} - -.content-sticky-heading-container h1 a:not([href]) { - color: inherit; - cursor: text; - text-decoration: underline; - text-decoration-style: dotted; - text-decoration-color: transparent; -} - -.content-sticky-heading-cover-container { - position: relative; - height: 0; - margin: -15px 0px -5px -5px; -} - -.content-sticky-heading-cover-needs-reveal { - display: none; -} - -.content-sticky-heading-cover { - position: absolute; - top: 0; - width: 80px; - right: 10px; - box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.25); - transition: transform 0.35s, opacity 0.25s; -} - -.content-sticky-heading-cover-container:not(.visible) .content-sticky-heading-cover { - opacity: 0; - transform: translateY(15px); - transition: transform 0.35s, opacity 0.30s; -} - -.content-sticky-heading-cover .cover-artwork { - border-width: 1px; - border-radius: 1.25px; - box-shadow: none; -} - -.content-sticky-heading-container .image-outer-area { - padding: 3px; -} - -.content-sticky-heading-container .image-inner-area { - border-radius: 1.75px; - overflow: hidden; -} - -.content-sticky-heading-cover .image { - display: block; - width: 100%; - height: 100%; -} - -.content-sticky-subheading-row { - position: absolute; - width: 100%; - box-sizing: border-box; - padding: 10px 20px 5px 20px; - margin-top: 0; - z-index: -1; - - background: var(--bg-black-color); - border-bottom: 1px dotted rgba(220, 220, 220, 0.4); - box-shadow: - 0 2px 2px -1px #00000060, - 0 4px 12px -4px #00000090; - - -webkit-backdrop-filter: blur(4px); - backdrop-filter: blur(4px); - - transition: margin-top 0.35s, opacity 0.25s; -} - -.content-sticky-subheading-row h2 { - margin: 0; - - font-size: 0.9em !important; - font-weight: normal; - font-style: oblique; - color: #eee; -} - -.content-sticky-subheading-row:not(.visible) { - margin-top: -20px; - opacity: 0; -} - -.content-sticky-subheading { - padding-right: 20px; -} - -.content-sticky-heading-container h2.visible { - margin-top: 0; - opacity: 1; -} - -.content-sticky-heading-row { - box-shadow: - inset 0 10px 10px -5px var(--shadow-color), - 0 4px 8px -4px #000000b0; -} - -#content, .sidebar { - /* In the year of our pizza 2025, we try commenting this out. - */ - /*contain: paint;*/ -} - -/* Sticky sidebar */ - -.sidebar-column:not(.sticky-column) { - align-self: stretch; -} - -.sidebar-column.sticky-column { - position: sticky; - top: 10px; - align-self: flex-start; - max-height: calc(100vh - 20px); - display: flex; - flex-direction: column; -} - -.sidebar-multiple.sticky-column .sidebar:last-child { - flex-shrink: 1; - overflow-y: scroll; - scrollbar-width: thin; - scrollbar-color: var(--dim-color) var(--dark-color); -} - -.wiki-search-sidebar-box .wiki-search-results-container { - overflow-y: scroll; - scrollbar-width: thin; - scrollbar-color: var(--dim-color) var(--dark-color); -} - -.sidebar-column.sticky-column .sidebar:last-child::-webkit-scrollbar, -.wiki-search-sidebar-box .wiki-search-results-container::-webkit-scrollbar { - background: var(--dark-color); - width: 12px; -} - -.sidebar-column.sticky-column .sidebar:last-child::-webkit-scrollbar-thumb, -.wiki-search-sidebar-box .wiki-search-results-container::-webkit-scrollbar-thumb { - transition: background 0.2s; - background: rgba(255, 255, 255, 0.2); - border: 3px solid transparent; - border-radius: 10px; - background-clip: content-box; -} - -.sidebar-column.sidebar.sticky-column > h1 { - position: sticky; - top: 0; - z-index: 2; - - margin: 0 calc(-1 * var(--content-padding)); - margin-bottom: 10px; - - border-bottom: 1px dotted rgba(220, 220, 220, 0.4); - padding: 10px 5px; - - background: var(--bg-black-color); - -webkit-backdrop-filter: blur(4px); - backdrop-filter: blur(4px); - - box-shadow: - 0 2px 3px -1px #0006, - 0 4px 8px -2px #0009; -} - -/* Image overlay */ - -#image-overlay-container { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 4000; - - background: rgba(0, 0, 0, 0.8); - color: white; - padding: 20px 40px; - box-sizing: border-box; - - opacity: 0; - pointer-events: none; - transition: opacity 0.4s; - - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; -} - -#image-overlay-container::before { - content: ''; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - - background: var(--deep-color); - opacity: 0.20; -} - -#image-overlay-container.visible { - opacity: 1; - pointer-events: auto; -} - -#image-overlay-content-container { - border-radius: 0 0 8px 8px; - border: 2px solid var(--primary-color); - background: var(--deep-ghost-color); - overflow: hidden; - - box-shadow: - 0 0 90px 30px #00000060, - 0 0 20px 10px #00000040, - 0 0 10px 3px #00000080; - - -webkit-backdrop-filter: blur(3px); - backdrop-filter: blur(3px); -} - -#image-overlay-image-area { - display: block; - overflow: hidden; - width: 80vmin; - margin-left: auto; - margin-right: auto; -} - -#image-overlay-image-layout { - display: block; - position: relative; - margin: 4px 3px; - background: rgba(0, 0, 0, 0.65); -} - -#image-overlay-image, -#image-overlay-image-thumb { - display: block; - width: 100%; - height: auto; -} - -#image-overlay-image { - position: absolute; -} - -#image-overlay-container.no-thumb #image-overlay-image { - position: static; -} - -#image-overlay-image-thumb { - filter: blur(16px); - transform: scale(1.5); -} - -#image-overlay-container.loaded #image-overlay-image-thumb { - opacity: 0; - pointer-events: none; - transition: opacity 0.25s; -} - -#image-overlay-image-area::after { - content: ""; - display: block; - position: absolute; - bottom: 0; - left: 0; - height: 4px; - width: var(--download-progress); - background: var(--primary-color); - box-shadow: 0 -3px 12px 4px var(--primary-color); - transition: 0.25s; -} - -#image-overlay-container.loaded #image-overlay-image-area::after { - width: 100%; - background: white; - opacity: 0; -} - -#image-overlay-container.errored #image-overlay-image-area::after { - width: 100%; - background: red; -} - -#image-overlay-container:not(.visible) #image-overlay-image-area::after { - width: 0 !important; -} - -#image-overlay-action-container { - padding: 7px 4px 7px 4px; - border-radius: 0 0 5px 5px; - background: var(--bg-black-color); - color: white; - font-style: oblique; - text-align: center; - box-shadow: - 0 3px 8px -5px var(--primary-color) inset; -} - -#image-overlay-container #image-overlay-action-content-without-size:not(.visible), -#image-overlay-container #image-overlay-action-content-with-size:not(.visible), -#image-overlay-container #image-overlay-file-size-warning:not(.visible), -#image-overlay-container #image-overlay-file-size-kilobytes:not(.visible), -#image-overlay-container #image-overlay-file-size-megabytes:not(.visible) { - display: none; -} - -#image-overlay-file-size-warning { - opacity: 0.8; - font-size: 0.9em; -} - -/* Layout - Wide (most computers) */ - -@media (min-width: 850px) { - #page-container.showing-sidebar-left:not(.sidebars-in-content-column) #secondary-nav:not(.always-visible), - #page-container.showing-sidebar-right:not(.sidebars-in-content-column) #secondary-nav:not(.always-visible) { - display: none; - } -} - -/* Layout - Medium (tablets, some landscape mobiles) - * - * Note: Rules defined here are exclusive to "medium" width, i.e. they don't - * additionally apply to "thin". Use the later section which applies to both - * if so desired. - */ - -@media (min-width: 600px) and (max-width: 849.98px) { - /* Medium layout is mainly defined (to the user) by hiding the sidebar, so - * don't apply the similar layout change of widening the long-content area - * if this page doesn't have a sidebar to hide in the first place. - */ - #page-container.showing-sidebar-left main, - #page-container.showing-sidebar-right main { - --responsive-padding-ratio: 0.06; - } -} - -/* Layout - Wide or Medium */ - -@media (min-width: 600px) { - .content-sticky-heading-root { - /* Safari doesn't always play nicely with position: sticky, - * this seems to fix images sometimes displaying above the - * position: absolute subheading (h2) child - * - * See also: https://stackoverflow.com/questions/50224855/ - */ - transform: translate3d(0, 0, 0); - z-index: 1; - } - - /* Cover art floats to the right. It's positioned in HTML beneath the - * heading, so pull it up a little to "float" on top. - */ - #artwork-column { - float: right; - width: 40%; - min-width: 220px; - max-width: 280px; - margin: -60px 0 10px 20px; - - position: relative; - z-index: 2; - } - - /* ...Except on top-indexes, where cover art is displayed prominently - * between the heading and subheading. - */ - #content.top-index #artwork-column { - float: none; - margin: 2em auto 2.5em auto; - max-width: 375px; - } - - html[data-url-key="localized.home"] #page-container.showing-sidebar-left .grid-listing > .grid-item:not(:nth-child(n+7)) { - flex-basis: 23%; - margin: 15px; - } - - html[data-url-key="localized.home"] #page-container.showing-sidebar-left .grid-listing > .grid-item:nth-child(n+7) { - flex-basis: 18%; - margin: 10px; - } -} - -/* Layout - Medium or Thin */ - -@media (max-width: 849.98px) { - .sidebar.collapsible, - .sidebar-box-joiner.collapsible, - .sidebar-column.all-boxes-collapsible { - display: none; - } - - /* Duplicated for "sidebars in content column" */ - - .layout-columns { - flex-direction: column; - } - - .layout-columns > *:not(:last-child) { - margin-bottom: 10px; - } - - .sidebar-column { - position: static !important; - max-width: unset !important; - flex-basis: unset !important; - margin-right: 0 !important; - margin-left: 0 !important; - width: 100%; - } - - .sidebar .news-entry:not(.first-news-entry) { - display: none; - } - - .wiki-search-sidebar-box { - max-height: max(245px, 60vh, calc(100vh - 205px)); - } - - /* End duplicated for "sidebars in content column" */ - - .grid-listing > .grid-item { - flex-basis: 40%; - } -} - -/* Layout - "sidebars in content column" - * This is the same code as immediately above, for medium and - * thin layouts, but can be opted into by the page itself - * instead of through a media query. - */ - -#page-container.sidebars-in-content-column -.layout-columns { - flex-direction: column; -} - -#page-container.sidebars-in-content-column -.layout-columns > *:not(:last-child) { - margin-bottom: 10px; -} - -#page-container.sidebars-in-content-column -.sidebar-column { - position: static !important; - max-width: unset !important; - flex-basis: unset !important; - margin-right: 0 !important; - margin-left: 0 !important; - width: 100%; -} - -#page-container.sidebars-in-content-column -.sidebar .news-entry:not(.first-news-entry) { - display: none; -} - -#page-container.sidebars-in-content-column -.wiki-search-sidebar-box { - max-height: max(245px, 60vh, calc(100vh - 205px)); -} - -/* Layout - Thin (phones) */ - -@media (max-width: 600px) { - .content-columns { - columns: 1; - } - - main { - --responsive-padding-ratio: 0.02; - } - - #artwork-column { - margin: 25px 0 5px 0; - width: 100%; - max-width: unset; - } - - #artwork-column .cover-artwork { - --normal-shadow: 0 0 transparent; - } - - #artwork-column .cover-artwork:not(:first-child), - #artwork-column .cover-artwork-joiner { - margin-left: 30px; - margin-right: 30px; - } - - .music-video { - width: 70%; - margin-left: auto; - margin-right: auto; - } - - .music-video .image { - aspect-ratio: 32 / 9; - } - - #additional-names-box { - width: unset; - max-width: unset; - } - - .nav-has-content .nav-main-links .nav-link-accent { - display: block; - } - - /* Show sticky heading above cover art */ - - .content-sticky-heading-root { - z-index: 2; - } - - .content-sticky-heading-row h1 { - padding-right: 10px; - } - - /* Let sticky heading text span past lower-index cover art */ - - .content-sticky-heading-container.has-cover .content-sticky-heading-row, - .content-sticky-heading-container.has-cover .content-sticky-subheading-row { - grid-template-columns: 1fr 90px; - } - - /* Disable grid features, just line header children up vertically */ - - #header { - display: block; - } - - #header > div:not(:first-child) { - margin-top: 0.5em; - } -} +@layer interactivity; +@layer layout; +@layer material, print; +@layer construction; +@layer interaction; + +@import url(miscellany.css); +@import url(page.css); +@import url(search.css); +@import url(tooltips.css); +@import url(features.css); +@import url(responsive.css); + +@import url(specific-pages.css); |