diff options
Diffstat (limited to 'src/static/css/site.css')
| -rw-r--r-- | src/static/css/site.css | 226 |
1 files changed, 164 insertions, 62 deletions
diff --git a/src/static/css/site.css b/src/static/css/site.css index d3ab28a7..0a7e36ae 100644 --- a/src/static/css/site.css +++ b/src/static/css/site.css @@ -583,6 +583,15 @@ summary.underline-white > span:hover a:not(:hover) { 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; @@ -922,7 +931,11 @@ a .normal-content { background-color: var(--primary-color); - mask-image: url(/static-4p1/misc/image.svg); + /* 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); vertical-align: text-bottom; @@ -950,29 +963,46 @@ a .normal-content { font-weight: 800; } -.nav-links-hierarchical .nav-link:not(:first-child)::before { +.nav-links-hierarchical .nav-link + .nav-link::before, +.nav-links-hierarchical .nav-link + .blockwrap .nav-link::before { content: "\0020/\0020"; } -.series-nav-link { +.series-nav-links { display: inline-block; } -.series-nav-link:not(:first-child)::before { +.series-nav-links:not(:first-child)::before { content: "\00a0»\00a0"; font-weight: normal; } -.series-nav-link:not(:last-child)::after { +.series-nav-links:not(:last-child)::after { content: ",\00a0"; } -.series-nav-link + .series-nav-link::before { +.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; } @@ -999,7 +1029,7 @@ a .normal-content { display: block; } -#secondary-nav.album-secondary-nav.with-previous-next { +#secondary-nav.album-secondary-nav { display: flex; justify-content: space-around; padding-left: 7.5% !important; @@ -1017,7 +1047,8 @@ a .normal-content { margin-right: 5px; } -#secondary-nav.album-secondary-nav .dot-switcher { +#secondary-nav.album-secondary-nav .group-nav-links .dot-switcher, +#secondary-nav.album-secondary-nav .series-nav-links .dot-switcher { white-space: nowrap; } @@ -1069,7 +1100,17 @@ a .normal-content { text-decoration: none !important; } +.text-with-tooltip.wiki-edits > .hoverable { + white-space: nowrap; +} + +.isolate-tooltip-z-indexing > * { + position: relative; + z-index: -1; +} + .tooltip { + font-size: 1rem; position: absolute; z-index: 3; left: -10px; @@ -1077,7 +1118,12 @@ a .normal-content { display: none; } -li:not(:first-child:last-child) .tooltip, +.cover-artwork .tooltip, +#sidebar .tooltip { + font-size: 0.9rem; +} + +li:not(:first-child:last-child) .tooltip:where(:not(.cover-artwork .tooltip)), .offset-tooltips > :not(:first-child:last-child) .tooltip { left: 14px; } @@ -1119,18 +1165,23 @@ li:not(:first-child:last-child) .tooltip, .thing-name-tooltip, .wiki-edits-tooltip { padding: 3px 4px 2px 2px; - left: -6px !important; + left: -6px; } -.wiki-edits-tooltip { +.thing-name-tooltip .tooltip-content, +.wiki-edits-tooltip .tooltip-content { font-size: 0.85em; } -/* Terrifying? - * https://stackoverflow.com/a/64424759/4633828 - */ -.thing-name-tooltip { margin-right: -120px; } -.wiki-edits-tooltip { margin-right: -200px; } +.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; @@ -1366,12 +1417,9 @@ hr.cute, border-style: none none dotted none; } -#cover-art-container { +.cover-artwork { font-size: 0.8em; border: 2px solid var(--primary-color); - box-shadow: - 0 2px 14px -6px var(--primary-color), - 0 0 12px 12px #00000080; border-radius: 0 0 4px 4px; background: var(--bg-black-color); @@ -1380,37 +1428,53 @@ hr.cute, backdrop-filter: blur(3px); } -#cover-art-container:has(.image-details), -#cover-art-container.has-image-details { +.cover-artwork:has(.image-details), +.cover-artwork.has-image-details { border-radius: 0 0 6px 6px; } -#cover-art-container:not(:has(.image-details)), -#cover-art-container:not(.has-image-details) { +.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 #cover-art-container needs to cut off its child image-container + * of the .cover-artwork needs to cut off its child .image-container * (which has a background that otherwise causes sharp corners). */ overflow: hidden; } -#cover-art-container .image-container { - /* Border is handled on the cover-art-container. */ +#artwork-column .cover-artwork { + box-shadow: + 0 2px 14px -6px var(--primary-color), + 0 0 12px 12px #00000080; +} + +#artwork-column .cover-artwork:not(:first-child) { + margin-top: 20px; + margin-left: 30px; + margin-right: 5px; +} + +#artwork-column .cover-artwork:last-child:not(:first-child) { + margin-bottom: 25px; +} + +.cover-artwork .image-container { + /* Border is handled on the .cover-artwork. */ border: none; - border-radius: 0; + border-radius: 0 !important; } -#cover-art-container .image-details { +.cover-artwork .image-details { border-top-color: var(--deep-color); } -#cover-art-container .image-details + .image-details { +.cover-artwork .image-details + .image-details { border-top-color: var(--primary-color); } -#cover-art-container .image { +.cover-artwork .image { display: block; width: 100%; height: 100%; @@ -1453,6 +1517,10 @@ hr.cute, margin-bottom: 2px; } +ul.image-details.art-tag-details { + padding-bottom: 0; +} + ul.image-details.art-tag-details li { display: inline-block; } @@ -1461,23 +1529,40 @@ ul.image-details.art-tag-details li:not(:last-child)::after { content: " \00b7 "; } -.image-details.non-unique-details { - font-style: oblique; -} - p.image-details.illustrator-details { text-align: center; font-style: oblique; } +p.image-details.origin-details { + margin-bottom: 2px; +} + +.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; +} + +/* p.content-heading:has(+ .commentary-entry-heading.dated) { clear: right; } +*/ .commentary-entry-heading { - display: flex; - flex-direction: row; - margin-left: 15px; padding-left: 5px; max-width: 625px; @@ -1487,7 +1572,7 @@ p.content-heading:has(+ .commentary-entry-heading.dated) { } .commentary-entry-heading-text { - flex-grow: 1; + display: block; padding-left: 1.25ch; text-indent: -1.25ch; } @@ -1496,20 +1581,6 @@ p.content-heading:has(+ .commentary-entry-heading.dated) { font-style: oblique; } -.commentary-entry-heading .commentary-date { - flex-shrink: 0; - - margin-left: 0.75ch; - align-self: flex-end; - - padding-left: 0.5ch; - padding-right: 0.25ch; -} - -.commentary-entry-heading .hoverable { - box-shadow: 1px 2px 6px 5px #04040460; -} - .commentary-entry-body summary { list-style-position: outside; } @@ -1518,6 +1589,19 @@ p.content-heading:has(+ .commentary-entry-heading.dated) { color: var(--primary-color); } +.commentary-date { + float: right; + margin-top: -0.8em; + margin-left: 0.75ch; + padding-left: 0.5ch; + padding-right: 0.4em; + font-size: 0.9em; +} + +.commentary-date .hoverable { + box-shadow: 1px 2px 6px 5px #04040460; +} + .commentary-art { float: right; width: 30%; @@ -1532,6 +1616,20 @@ p.content-heading:has(+ .commentary-entry-heading.dated) { 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 { + padding-left: 40px; + max-width: 600px; +} + .js-hide, .js-show-once-data, .js-hide-once-data { @@ -1668,6 +1766,10 @@ ul.quick-info li:not(:last-child)::after { margin-top: 25px; } +.gallery-set-switcher { + text-align: center; +} + .quick-description:not(.has-external-links-only) { --clamped-padding-ratio: max(var(--responsive-padding-ratio), 0.06); margin-left: auto; @@ -1752,7 +1854,7 @@ li .by a { display: inline-block; } -p code { +p code, li code { font-size: 0.95em; font-family: "courier new", monospace; font-weight: 800; @@ -2919,11 +3021,11 @@ h3.content-heading { top: 0; } -.content-sticky-heading-anchor:not(:matches(.content-sticky-heading-root[inert]) *) { +.content-sticky-heading-anchor:not(:where(.content-sticky-heading-root[inert]) *) { position: relative; } -.content-sticky-heading-container:not(:matches(.content-sticky-heading-root[inert]) *) { +.content-sticky-heading-container:not(:where(.content-sticky-heading-root[inert]) *) { position: absolute; } @@ -3049,7 +3151,7 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r transition: transform 0.35s, opacity 0.30s; } -.content-sticky-heading-cover .image-container { +.content-sticky-heading-cover .cover-artwork { border-width: 1px; border-radius: 1.25px; box-shadow: none; @@ -3380,7 +3482,7 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r /* Cover art floats to the right. It's positioned in HTML beneath the * heading, so pull it up a little to "float" on top. */ - #cover-art-container { + #artwork-column { float: right; width: 40%; max-width: 400px; @@ -3393,18 +3495,18 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r /* ...Except on top-indexes, where cover art is displayed prominently * between the heading and subheading. */ - #content.top-index #cover-art-container { + #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+10)) { + 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+10) { + html[data-url-key="localized.home"] #page-container.showing-sidebar-left .grid-listing > .grid-item:nth-child(n+7) { flex-basis: 18%; margin: 10px; } @@ -3500,7 +3602,7 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r --responsive-padding-ratio: 0.02; } - #cover-art-container { + #artwork-column { margin: 25px 0 5px 0; width: 100%; max-width: unset; |