diff options
| author | erdgeist <erdgeist@erdgeist.org> | 2026-07-21 14:24:59 +0200 |
|---|---|---|
| committer | erdgeist <erdgeist@erdgeist.org> | 2026-07-21 14:24:59 +0200 |
| commit | c14683fe37fabe06082f43e8bf67debc4cca7297 (patch) | |
| tree | 10054588f053cf071a55df067180091d3388e05a /public/stylesheets | |
| parent | 1912b8fbf0e1e1ea84a89c033e20e34235d19cce (diff) | |
Render asset credit inside the gallery lightbox correctly
GLightbox's own selector-based description feature never actually
resolved a selector in three different attempts -- literal text,
then a resolved-but-empty div, then apparently not firing at all
against the installed (unversioned) build. Replaced with a small
afterSlideLoad handler that reads a plain data-credit-selector
attribute and copies the real element's HTML into the slide's
description area directly, depending only on GLightbox handing back
a real DOM node per slide -- a much smaller contract than trusting
its own caption-resolution feature.
Renamed the credit div's class from glightbox-desc, since that name
is reserved by the library's own bundled CSS (display: none
!important) and can't be reliably overridden from here.
Also: distinguishes the credit line and the "N Bilder" caption from
ordinary body text (italic, muted, matching .author_and_date's
existing convention), and makes the lightbox's caption card follow
the site's light/dark toggle via Canvas/CanvasText, since the
library's bundled theme never adapts to it on its own.
Diffstat (limited to 'public/stylesheets')
| -rw-r--r-- | public/stylesheets/ccc.css | 26 |
1 files changed, 23 insertions, 3 deletions
diff --git a/public/stylesheets/ccc.css b/public/stylesheets/ccc.css index 8358d06..9654594 100644 --- a/public/stylesheets/ccc.css +++ b/public/stylesheets/ccc.css | |||
| @@ -727,7 +727,6 @@ div.teaser_ruler { | |||
| 727 | min-width: 0; | 727 | min-width: 0; |
| 728 | } | 728 | } |
| 729 | 729 | ||
| 730 | |||
| 731 | .inline-image--full { | 730 | .inline-image--full { |
| 732 | width: 100%; | 731 | width: 100%; |
| 733 | margin: 1rem 0; | 732 | margin: 1rem 0; |
| @@ -748,10 +747,31 @@ div.teaser_ruler { | |||
| 748 | margin-left: 1rem; | 747 | margin-left: 1rem; |
| 749 | } | 748 | } |
| 750 | 749 | ||
| 751 | #asset_credits .glightbox-desc { | 750 | #asset_credits .asset_credit_block { |
| 752 | display: none; | 751 | display: none; |
| 753 | } | 752 | } |
| 754 | 753 | ||
| 755 | #asset_credits .headline_credit { | 754 | #asset_credits .asset_credit_block.headline_credit { |
| 756 | display: block; | 755 | display: block; |
| 757 | } | 756 | } |
| 757 | |||
| 758 | #asset_credits { | ||
| 759 | border-top: dotted 1px silver; | ||
| 760 | } | ||
| 761 | |||
| 762 | #asset_credits, | ||
| 763 | .right { | ||
| 764 | font-style: italic; | ||
| 765 | font-family: Georgia; | ||
| 766 | font-size: 0.9rem; | ||
| 767 | color: color-mix(in srgb, CanvasText, #808080); | ||
| 768 | } | ||
| 769 | |||
| 770 | .glightbox-clean .gslide-description { | ||
| 771 | background: Canvas !important; | ||
| 772 | } | ||
| 773 | |||
| 774 | .glightbox-clean .gslide-title, | ||
| 775 | .glightbox-clean .gslide-desc { | ||
| 776 | color: CanvasText !important; | ||
| 777 | } | ||
