/* ========================================================================== ScrollProgress — scroll position indicator widgets -------------------------------------------------------------------------- Every colour, size and offset is a CSS custom property set on the widget root, so the MODX snippet (or a demo page) can theme an instance without touching this file. Themeable properties (all optional, sane defaults below): --sp-color primary / fill colour --sp-color-2 gradient end stop (defaults to --sp-color = flat fill) --sp-track the unfilled "track" behind the fill --sp-text label text colour --sp-bg surface colour for pill / ring / reader / wave chrome --sp-glow glow colour (set to transparent to switch glow off) --sp-size thickness (bar/rail/frame) or diameter driver (ring etc.) --sp-radius corner radius --sp-x / --sp-y offsets from the anchored edges --sp-font font stack for labels Runtime properties written by scrollprogress.js each frame: --sp-p progress, 0 → 1 --sp-thumb-h rail thumb height in px --sp-e-* (unused placeholder for future edge styles) ========================================================================== */ @property --sp-p { syntax: ''; initial-value: 0; inherits: true; } /* -------------------------------------------------------------------------- 1. Root — the element that is hoisted into the browser Top Layer. The [popover] UA stylesheet gives popovers a border, padding, background, `inset:0` and `width:fit-content`. Author styles always beat the UA sheet, so this block doubles as the popover reset. -------------------------------------------------------------------------- */ .sp { /* theme defaults */ --sp-color: #e63946; --sp-color-2: var(--sp-color); --sp-track: rgba(127, 127, 127, 0.22); --sp-text: #ffffff; --sp-bg: rgba(17, 19, 24, 0.86); --sp-glow: transparent; --sp-size: 6px; --sp-radius: 999px; --sp-x: 24px; --sp-y: 24px; --sp-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* runtime */ --sp-p: 0; --sp-thumb-h: 40px; position: fixed; inset: auto; display: block; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow: visible; width: auto; height: auto; max-width: none; max-height: none; font-family: var(--sp-font); font-size: 13px; line-height: 1; -webkit-font-smoothing: antialiased; /* The widget is decoration — never let it eat a click. Interactive children opt back in with pointer-events:auto. */ pointer-events: none; -webkit-tap-highlight-color: transparent; /* Fallback stacking for browsers with no Top Layer support. JS also keeps the node as the last child of in that case. */ z-index: 2147483647; opacity: 1; transition: opacity 220ms ease, visibility 0s linear 0s; } /* Popover-capable browsers: the element is in the Top Layer, and only paints while the popover is open. */ .sp:popover-open { display: block; } /* Before JS hydrates, and whenever the widget is suppressed outright: not-yet-hydrated, or filtered out by the mobile/desktop device flag. */ .sp[hidden], .sp[data-sp-ready='0'], .sp[data-sp-gated='1'] { display: none !important; } .sp[data-sp-hidden='1'] { opacity: 0; visibility: hidden; transition: opacity 160ms ease, visibility 0s linear 160ms; } @media print { .sp { display: none !important; } } @media (prefers-reduced-motion: reduce) { .sp, .sp * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } /* -------------------------------------------------------------------------- 2. Positioning -------------------------------------------------------------------------- */ .sp[data-pos='top'] { top: 0; left: 0; right: 0; } .sp[data-pos='bottom'] { bottom: 0; left: 0; right: 0; } .sp[data-pos='left'] { left: 0; top: 0; bottom: 0; } .sp[data-pos='right'] { right: 0; top: 0; bottom: 0; } .sp[data-pos='top-left'] { top: var(--sp-y); left: var(--sp-x); } .sp[data-pos='top-right'] { top: var(--sp-y); right: var(--sp-x); } .sp[data-pos='bottom-left'] { bottom: var(--sp-y); left: var(--sp-x); } .sp[data-pos='bottom-right'] { bottom: var(--sp-y); right: var(--sp-x); } .sp[data-pos='top-center'] { top: var(--sp-y); left: 50%; transform: translateX(-50%); } .sp[data-pos='bottom-center'] { bottom: var(--sp-y); left: 50%; transform: translateX(-50%); } .sp[data-pos='center-left'] { left: var(--sp-x); top: 50%; transform: translateY(-50%); } .sp[data-pos='center-right'] { right: var(--sp-x); top: 50%; transform: translateY(-50%); } /* The frame style always spans the whole viewport. */ .sp[data-pos='viewport'] { inset: 0; } /* -------------------------------------------------------------------------- 3. Shared bits -------------------------------------------------------------------------- */ .sp__hit { pointer-events: auto; cursor: pointer; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; display: block; } .sp__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 4. Style: bar — classic edge-hugging progress bar -------------------------------------------------------------------------- */ .sp-bar { position: relative; width: 100%; height: var(--sp-size); background: var(--sp-track); overflow: hidden; } .sp[data-pos='top'] .sp-bar { border-radius: 0 0 var(--sp-radius) 0; } .sp[data-pos='bottom'] .sp-bar { border-radius: 0 var(--sp-radius) 0 0; } .sp-bar__fill { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(var(--sp-p)); background: linear-gradient(90deg, var(--sp-color) 0%, var(--sp-color-2) 100%); will-change: transform; } /* Glow rides the leading edge rather than smearing the whole bar. */ .sp-bar__spark { position: absolute; top: 50%; left: calc(var(--sp-p) * 100%); width: 2px; height: 100%; transform: translate(-50%, -50%); box-shadow: 0 0 12px 4px var(--sp-glow); opacity: var(--sp-p); will-change: left; } .sp-bar__pct { position: absolute; top: calc(var(--sp-size) + 6px); left: calc(var(--sp-p) * 100%); transform: translateX(-50%); padding: 3px 8px; border-radius: var(--sp-radius); background: var(--sp-bg); color: var(--sp-text); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .sp[data-pos='bottom'] .sp-bar__pct { top: auto; bottom: calc(var(--sp-size) + 6px); } /* -------------------------------------------------------------------------- 5. Style: rail — vertical track with a proportional thumb -------------------------------------------------------------------------- */ .sp-rail { position: relative; width: var(--sp-size); height: 100%; background: var(--sp-track); } .sp-rail__fill { position: absolute; top: 0; left: 0; right: 0; height: 100%; transform-origin: top center; transform: scaleY(var(--sp-p)); background: linear-gradient(180deg, var(--sp-color) 0%, var(--sp-color-2) 100%); opacity: 0.45; will-change: transform; } .sp-rail__thumb { position: absolute; left: 50%; width: calc(var(--sp-size) + 4px); height: var(--sp-thumb-h); top: calc(var(--sp-p) * (100% - var(--sp-thumb-h))); transform: translateX(-50%); border-radius: var(--sp-radius); background: linear-gradient(180deg, var(--sp-color) 0%, var(--sp-color-2) 100%); box-shadow: 0 0 10px 0 var(--sp-glow); will-change: top; } .sp-rail__pct { position: absolute; top: calc(var(--sp-p) * (100% - var(--sp-thumb-h)) + var(--sp-thumb-h) / 2); left: calc(var(--sp-size) + 10px); transform: translateY(-50%); padding: 3px 8px; border-radius: var(--sp-radius); background: var(--sp-bg); color: var(--sp-text); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .sp[data-pos='right'] .sp-rail__pct { left: auto; right: calc(var(--sp-size) + 10px); } /* -------------------------------------------------------------------------- 6. Style: ring — circular SVG ring, optional back-to-top -------------------------------------------------------------------------- */ .sp-ring { position: relative; width: calc(var(--sp-size) * 8); height: calc(var(--sp-size) * 8); border-radius: 50%; background: var(--sp-bg); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28), 0 0 0 0 var(--sp-glow); display: flex; align-items: center; justify-content: center; transition: box-shadow 220ms ease, transform 220ms ease; } .sp-ring.sp__hit:hover, .sp-ring.sp__hit:focus-visible { transform: scale(1.06); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.34), 0 0 0 6px var(--sp-glow); outline: none; } .sp-ring__svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .sp-ring__track { fill: none; stroke: var(--sp-track); stroke-width: 8; } .sp-ring__fill { fill: none; stroke: var(--sp-color); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--sp-p)); will-change: stroke-dashoffset; } .sp-ring__label { position: relative; color: var(--sp-text); font-size: calc(var(--sp-size) * 1.9); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } /* Arrow shown instead of the % once the widget is a live back-to-top */ .sp-ring__arrow { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--sp-text); opacity: 0; transition: opacity 160ms ease; } .sp-ring__arrow svg { width: 42%; height: 42%; } .sp-ring.sp__hit:hover .sp-ring__arrow, .sp-ring.sp__hit:focus-visible .sp-ring__arrow { opacity: 1; } .sp-ring.sp__hit:hover .sp-ring__label, .sp-ring.sp__hit:focus-visible .sp-ring__label { opacity: 0; } .sp-ring__label { transition: opacity 160ms ease; } /* -------------------------------------------------------------------------- 7. Style: pill — compact chip with a micro bar and a percentage -------------------------------------------------------------------------- */ .sp-pill { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: var(--sp-radius); background: var(--sp-bg); color: var(--sp-text); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform 220ms ease, box-shadow 220ms ease; } .sp-pill.sp__hit:hover, .sp-pill.sp__hit:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34), 0 0 0 4px var(--sp-glow); outline: none; } .sp-pill__track { position: relative; width: calc(var(--sp-size) * 14); height: calc(var(--sp-size) * 0.7); min-height: 4px; border-radius: var(--sp-radius); background: var(--sp-track); overflow: hidden; } .sp-pill__fill { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(var(--sp-p)); border-radius: inherit; background: linear-gradient(90deg, var(--sp-color) 0%, var(--sp-color-2) 100%); will-change: transform; } .sp-pill__pct { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; } .sp-pill__label { font-size: 12px; font-weight: 500; opacity: 0.72; white-space: nowrap; } /* -------------------------------------------------------------------------- 8. Style: dots — one marker per page section, clickable -------------------------------------------------------------------------- */ .sp-dots { display: flex; flex-direction: column; gap: 12px; align-items: center; } .sp-dots__item { position: relative; pointer-events: auto; cursor: pointer; border: 0; padding: 0; background: none; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; } .sp-dots__dot { width: calc(var(--sp-size) * 1.2); height: calc(var(--sp-size) * 1.2); border-radius: 50%; background: var(--sp-track); transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 220ms ease, box-shadow 220ms ease; } .sp-dots__item[aria-current='true'] .sp-dots__dot { background: var(--sp-color); transform: scale(1.7); box-shadow: 0 0 0 4px var(--sp-glow); } /* Slightly enlarged as well as recoloured — on a palette where --sp-color-2 is dark, colour alone does not separate a passed dot from an unvisited one. */ .sp-dots__item[data-passed='1'] .sp-dots__dot { background: var(--sp-color-2); transform: scale(1.2); } .sp-dots__tip { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(6px); padding: 5px 10px; border-radius: var(--sp-radius); background: var(--sp-bg); color: var(--sp-text); font-size: 12px; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; } .sp[data-pos='center-left'] .sp-dots__tip { right: auto; left: calc(100% + 12px); transform: translateY(-50%) translateX(-6px); } .sp-dots__item:hover .sp-dots__tip, .sp-dots__item:focus-visible .sp-dots__tip { opacity: 1; transform: translateY(-50%) translateX(0); } .sp-dots__item:focus-visible { outline: none; } .sp-dots__item:focus-visible .sp-dots__dot { box-shadow: 0 0 0 3px var(--sp-color); } /* -------------------------------------------------------------------------- 9. Style: frame — the viewport perimeter draws itself as you scroll -------------------------------------------------------------------------- */ .sp-frame { position: absolute; inset: calc(var(--sp-size) / 2); width: auto; height: auto; } .sp-frame__svg { width: 100%; height: 100%; display: block; overflow: visible; } .sp-frame__track { fill: none; stroke: var(--sp-track); stroke-width: var(--sp-size); } .sp-frame__fill { fill: none; stroke: var(--sp-color); stroke-width: var(--sp-size); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--sp-p)); filter: drop-shadow(0 0 6px var(--sp-glow)); will-change: stroke-dashoffset; } /* ------------------------------------------------------------------------- 10. Style: reader — estimated reading time remaining ------------------------------------------------------------------------- */ .sp-reader { display: flex; align-items: center; gap: 10px; padding: 9px 15px; border-radius: var(--sp-radius); background: var(--sp-bg); color: var(--sp-text); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform 220ms ease, box-shadow 220ms ease; } .sp-reader.sp__hit:hover, .sp-reader.sp__hit:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34), 0 0 0 4px var(--sp-glow); outline: none; } .sp-reader__icon { width: 16px; height: 16px; flex: 0 0 auto; color: var(--sp-color); } .sp-reader__icon svg { width: 100%; height: 100%; display: block; } .sp-reader__text { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .sp-reader__meter { position: relative; width: calc(var(--sp-size) * 12); height: 4px; border-radius: var(--sp-radius); background: var(--sp-track); overflow: hidden; } .sp-reader__fill { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(var(--sp-p)); background: linear-gradient(90deg, var(--sp-color) 0%, var(--sp-color-2) 100%); will-change: transform; } /* ------------------------------------------------------------------------- 11. Style: wave — liquid-fill orb ------------------------------------------------------------------------- */ .sp-wave { position: relative; width: calc(var(--sp-size) * 8); height: calc(var(--sp-size) * 8); border-radius: 50%; overflow: hidden; background: var(--sp-bg); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28), inset 0 0 0 2px var(--sp-track); transition: transform 220ms ease, box-shadow 220ms ease; } .sp-wave.sp__hit:hover, .sp-wave.sp__hit:focus-visible { transform: scale(1.06); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.34), 0 0 0 6px var(--sp-glow); outline: none; } .sp-wave__liquid { position: absolute; left: 0; right: 0; top: 0; height: 100%; transform: translateY(calc((1 - var(--sp-p)) * 100%)); will-change: transform; } .sp-wave__body { position: absolute; inset: 0; background: linear-gradient(180deg, var(--sp-color) 0%, var(--sp-color-2) 100%); } .sp-wave__crest { position: absolute; /* 1px of overlap, or a sub-pixel seam shows where the crest meets the body */ bottom: calc(100% - 1px); left: -50%; width: 200%; height: 12px; color: var(--sp-color); animation: sp-drift 3.6s linear infinite; } .sp-wave__crest svg { width: 100%; height: 100%; display: block; } @keyframes sp-drift { from { transform: translateX(0); } to { transform: translateX(25%); } } .sp-wave__label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--sp-text); font-size: calc(var(--sp-size) * 1.9); font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }