/* ========================================================================= SHARED COMPACT SITE FOOTER ------------------------------------------------------------------------- The same footer component /ldp/ and /tick-picker/ already use, pulled into one file so every bot page renders an identical footer. Two deliberate differences from the /ldp/ original: 1. position is `sticky` (top: 100vh), not `fixed`. The /ldp/ version is pinned to the viewport, which only works because that stylesheet also ships body / main / #chartContainer margin overrides to stop the bar covering page content. Those use !important and target generic elements, so shipping them here would re-layout every page this file is linked into. Sticky pins the bar to the bottom of a short page and lets it flow after the content on a long one, reserving no space and never overlapping. See the notes on the position/z-index rules below. 2. Colours resolve from --bbf-* custom properties, so a dark page can flip the whole bar by redefining a handful of values (see the dark variant at the bottom) without forking this file. Defaults reproduce the original light bar exactly. Every selector is scoped to the footer - this file cannot affect anything else on a page it is linked into. ========================================================================= */ /* w3.css sets `html { overflow-x: hidden }` on several of these pages, which makes a scroll container and stops `position: sticky` resolving against the viewport. `overflow-x: clip` clips horizontal overflow exactly the same way but creates no scroll container, so sticky works again. Browsers without `clip` support ignore this line, keep `hidden`, and the footer simply flows after the content - degraded, never broken. */ html { overflow-x: clip; } /* `top: 100vh` can only push the footer down within its parent's box, so body has to be at least viewport-tall or there is nowhere for it to go on a short page. Vertical padding is untouched, so this cannot introduce a scrollbar. */ body { min-height: 100vh; } .site-footer-compact { --bbf-bg: #ffffff; --bbf-rule: #dddddd; --bbf-rule-soft: #eeeeee; --bbf-text: #333333; --bbf-muted: #666666; --bbf-accent: #007acc; --bbf-divider: #cccccc; background: var(--bbf-bg); border-top: 1px solid var(--bbf-rule); padding: 15px 20px 10px 20px; font-size: 11px; color: var(--bbf-text); text-align: center; /* Sits at the bottom of the viewport on a short page, and flows after the content on a long one. Preferred over the /ldp/ original's `position: fixed`, which needs 96-162px of reserved body padding (the bar wraps to 162px at 800px wide) and still risks covering content when it wraps. This never overlaps and reserves no dead space. */ position: sticky; top: 100vh; /* Several of these pages stack `position: fixed` panels (solid's theme has four). Without an explicit z-index the footer paints underneath them and disappears entirely. */ z-index: 900; width: 100%; box-sizing: border-box; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .site-footer-compact .footer-links { display: flex; flex-wrap: wrap; gap: 25px; margin-bottom: 10px; align-items: center; justify-content: center; } .site-footer-compact .footer-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .site-footer-compact .footer-label { color: var(--bbf-accent); font-weight: bold; font-size: 8px; text-transform: uppercase; letter-spacing: 0.5px; } .site-footer-compact .footer-group a { color: var(--bbf-text); text-decoration: none; font-size: 9px; padding: 2px 6px; border-radius: 3px; transition: all 0.2s ease; white-space: nowrap; } .site-footer-compact .footer-group a:hover { color: var(--bbf-accent); background: rgba(0, 122, 204, 0.1); } .site-footer-compact .footer-bottom { display: flex; align-items: center; justify-content: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--bbf-rule-soft); font-size: 10px; color: var(--bbf-muted); } .site-footer-compact .footer-bottom a { color: var(--bbf-accent); text-decoration: none; font-size: 10px; } .site-footer-compact .footer-bottom a:hover { text-decoration: underline; } .site-footer-compact .footer-divider { color: var(--bbf-divider); font-size: 10px; } /* Mobile tool links for SEO */ .site-footer-compact .mobile-tool-links { display: none; font-size: 7px; margin-bottom: 4px; line-height: 1.2; } .site-footer-compact .mobile-tool-links a { color: var(--bbf-accent); text-decoration: none; margin: 0 2px; font-size: 7px; } .site-footer-compact .mobile-tool-links a:hover { text-decoration: underline; } /* Dark variant, applied two ways: - `.is-dark` on the footer, for pages that are always dark (/solid/ and /sniper-v2/ have no theme switch). - `[data-theme="dark"]` on an ancestor, so /sniper/ - which toggles - flips the footer with the rest of the page instead of being pinned to one theme. Background is a solid #161b22, not rgba(0,0,0,.3): over a #0d1117 page the translucent version rendered at rgb(9,11,16), four values off the page colour, which made the bar effectively invisible. */ [data-theme="dark"] .site-footer-compact, .site-footer-compact.is-dark { --bbf-bg: #161b22; --bbf-rule: rgba(255, 255, 255, 0.14); --bbf-rule-soft: rgba(255, 255, 255, 0.08); --bbf-text: rgba(255, 255, 255, 0.75); --bbf-muted: rgba(255, 255, 255, 0.5); --bbf-accent: #8ab4f8; --bbf-divider: rgba(255, 255, 255, 0.25); } [data-theme="dark"] .site-footer-compact .footer-group a:hover, .site-footer-compact.is-dark .footer-group a:hover { background: rgba(138, 180, 248, 0.14); } /* Tablet responsive */ @media (max-width: 768px) { .site-footer-compact { padding: 4px 5px 3px 5px; font-size: 8px; } .site-footer-compact .footer-links { display: none; } .site-footer-compact .mobile-tool-links { display: block; } .site-footer-compact .footer-bottom { margin-bottom: 0; padding-top: 0; border-top: none; font-size: 7px; gap: 4px; } .site-footer-compact .footer-bottom a { font-size: 7px; } .site-footer-compact .footer-divider { font-size: 7px; } } /* Phone responsive */ @media (max-width: 480px) { .site-footer-compact { padding: 3px 5px 2px 5px; font-size: 7px; } .site-footer-compact .mobile-tool-links { font-size: 6px; margin-bottom: 2px; } .site-footer-compact .mobile-tool-links a { font-size: 6px; margin: 0 1px; } .site-footer-compact .footer-bottom { font-size: 6px; gap: 2px; } .site-footer-compact .footer-bottom a { font-size: 6px; } .site-footer-compact .footer-divider { font-size: 6px; } }