Fixes#3168. (Implemented by [jules.google](https://jules.google).)
This commit resolves issues with footnote and citation styling in
Distill posts, particularly ensuring that pop-up contents and the
numbers themselves respect the site's light/dark theme via shadow DOM
style definitions.
Key changes:
1. **`d-hover-box` Internal Styling (template.v2.js):**
The `<style>` tag within the `d-hover-box` component's template
in `assets/js/distillpub/template.v2.js` has been updated.
Styles for `.panel` (the main pop-up container) now define:
- `background-color: var(--global-card-bg-color);`
- `border: 1px solid var(--global-divider-color);`
- `color: var(--global-text-color);` (for default text)
- Links within the panel are styled with
`color: var(--global-theme-color);` and
`color: var(--global-hover-color);` on hover.
This ensures pop-up content is correctly themed from within its
shadow DOM.
2. **Footnote/Citation Number Color (template.v2.js):**
The hardcoded `hsla(206, 90%, 20%, 0.7)` color previously used for
footnote numbers (in `d-footnote` template) and citation numbers
(in `d-cite` template) in `assets/js/distillpub/template.v2.js`
has been replaced with `color: var(--global-theme-color);`.
3. **Cleaned `_sass/_distill.scss`:**
Removed the (now redundant) global CSS overrides for `d-hover-box`
from `_sass/_distill.scss`, as these styles are now correctly
encapsulated within the `d-hover-box` component itself.
These changes ensure that all aspects of Distill footnotes and
citations (numbers, pop-up background, pop-up text, and links within
pop-ups) are styled using theme-aware CSS variables, providing
correct visual appearance and readability in both light and dark modes.
---------
Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
71969cce7e