/* * Reusable reading-progress component. * Opt in with and include reading-progress.js. */ :root { --reading-progress-color: #efbd4e; --reading-progress-height: 4px; --reading-progress-offset: 0px; --reading-progress-track: rgba(255, 255, 255, 0.16); --reading-progress-z-index: 90; } .reading-progress { background: var(--reading-progress-track); contain: strict; height: var(--reading-progress-height); isolation: isolate; left: 0; overflow: hidden; pointer-events: none; position: fixed; right: 0; top: calc(var(--reading-progress-offset) + env(safe-area-inset-top, 0px)); z-index: var(--reading-progress-z-index); } .reading-progress__bar { background: var(--reading-progress-color); display: block; height: 100%; transform: scaleX(var(--reading-progress-value, 0)); transform-origin: left center; width: 100%; will-change: transform; } @media (forced-colors: active) { .reading-progress { background: Canvas; } .reading-progress__bar { background: Highlight; } } @media print { .reading-progress { display: none; } }