diff options
Diffstat (limited to 'src/static')
-rw-r--r-- | src/static/css/site.css | 82 | ||||
-rw-r--r-- | src/static/js/client/image-overlay.js | 5 | ||||
-rw-r--r-- | src/static/js/client/sticky-heading.js | 15 | ||||
-rw-r--r-- | src/static/js/rectangles.js | 42 |
4 files changed, 109 insertions, 35 deletions
diff --git a/src/static/css/site.css b/src/static/css/site.css index e4057620..0a7e36ae 100644 --- a/src/static/css/site.css +++ b/src/static/css/site.css @@ -931,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; @@ -1119,7 +1123,7 @@ a .normal-content { font-size: 0.9rem; } -li:not(:first-child:last-child) .tooltip, +li:not(:first-child:last-child) .tooltip:where(:not(.cover-artwork .tooltip)), .offset-tooltips > :not(:first-child:last-child) .tooltip { left: 14px; } @@ -1161,7 +1165,7 @@ li:not(:first-child:last-child) .tooltip, .thing-name-tooltip, .wiki-edits-tooltip { padding: 3px 4px 2px 2px; - left: -6px !important; + left: -6px; } .thing-name-tooltip .tooltip-content, @@ -1169,11 +1173,15 @@ li:not(:first-child:last-child) .tooltip, 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; @@ -1548,14 +1556,13 @@ p.image-details.origin-details { 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; @@ -1565,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; } @@ -1574,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; } @@ -1596,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%; @@ -1610,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 { @@ -1746,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; @@ -1830,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; @@ -3477,12 +3501,12 @@ main.long-content .content-sticky-heading-container .content-sticky-subheading-r 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; } diff --git a/src/static/js/client/image-overlay.js b/src/static/js/client/image-overlay.js index da192178..e9e2708d 100644 --- a/src/static/js/client/image-overlay.js +++ b/src/static/js/client/image-overlay.js @@ -96,7 +96,10 @@ function handleContainerClicked(evt) { // If you clicked anything near the action bar, don't hide the // image overlay. const rect = info.actionContainer.getBoundingClientRect(); - if (evt.clientY >= rect.top - 40 && evt.clientY <= rect.bottom + 40) { + if ( + evt.clientY >= rect.top - 40 && evt.clientY <= rect.bottom + 40 && + evt.clientX >= rect.left + 20 && evt.clientX <= rect.right - 20 + ) { return; } diff --git a/src/static/js/client/sticky-heading.js b/src/static/js/client/sticky-heading.js index fba05b84..b65574d0 100644 --- a/src/static/js/client/sticky-heading.js +++ b/src/static/js/client/sticky-heading.js @@ -23,6 +23,7 @@ export const info = { contentContainers: null, contentHeadings: null, + contentCoverColumns: null, contentCovers: null, contentCoversReveal: null, @@ -82,9 +83,13 @@ export function getPageReferences() { info.stickyContainers .map(el => el.closest('.content-sticky-heading-root').parentElement); - info.contentCovers = + info.contentCoverColumns = info.contentContainers - .map(el => el.querySelector('#cover-art-container')); + .map(el => el.querySelector('#artwork-column')); + + info.contentCovers = + info.contentCoverColumns + .map(el => el ? el.querySelector('.cover-artwork') : null); info.contentCoversReveal = info.contentCovers @@ -212,10 +217,10 @@ function updateCollapseStatus(index) { function updateStickyCoverVisibility(index) { const stickyCoverContainer = info.stickyCoverContainers[index]; const stickyContainer = info.stickyContainers[index]; - const contentCover = info.contentCovers[index]; + const contentCoverColumn = info.contentCoverColumns[index]; - if (contentCover && stickyCoverContainer) { - if (contentCover.getBoundingClientRect().bottom < 4) { + if (contentCoverColumn && stickyCoverContainer) { + if (contentCoverColumn.getBoundingClientRect().bottom < 4) { stickyCoverContainer.classList.add('visible'); stickyContainer.classList.add('cover-visible'); } else { diff --git a/src/static/js/rectangles.js b/src/static/js/rectangles.js index cdab2cb8..b00ed98e 100644 --- a/src/static/js/rectangles.js +++ b/src/static/js/rectangles.js @@ -510,4 +510,46 @@ export class WikiRect extends DOMRect { height: this.height, }); } + + // Other utilities + + #display = null; + + display() { + if (!this.#display) { + this.#display = document.createElement('div'); + document.body.appendChild(this.#display); + } + + Object.assign(this.#display.style, { + position: 'fixed', + background: '#000c', + border: '3px solid var(--primary-color)', + borderRadius: '4px', + top: this.top + 'px', + left: this.left + 'px', + width: this.width + 'px', + height: this.height + 'px', + pointerEvents: 'none', + }); + + let i = 0; + const int = setInterval(() => { + i++; + if (i >= 3) clearInterval(int); + if (!this.#display) return; + + this.#display.style.display = 'none'; + setTimeout(() => { + this.#display.style.display = ''; + }, 200); + }, 600); + } + + hide() { + if (this.#display) { + this.#display.remove(); + this.#display = null; + } + } } |