71969cce7e
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> |
||
|---|---|---|
| .. | ||
| audio | ||
| bibliography | ||
| css | ||
| fonts | ||
| html | ||
| img | ||
| js | ||
| json | ||
| jupyter | ||
| plotly | ||
| video | ||
| webfonts | ||