:root { /** * RefreshLess page transition duration when entering a page. * * @type {time} */ --refreshless-page-transition-in-duration: 0.1s; /** * RefreshLess page transition duration when leaving a page. * * @type {time} */ --refreshless-page-transition-out-duration: 0.3s; /** * RefreshLess page transition overlay z-index. * * This should be one less than the progress bar to avoid being on top of * it. If --refreshless-progress-bar-z-index is defined, it will use that to * calc() the value, falling back to a literal value of one less than the * default value of that custom property. * * @type {integer} */ --refreshless-page-transition-overlay-z-index: calc(var( --refreshless-progress-bar-z-index, 2147483646 ) - 1); /** * RefreshLess page transition overlay background colour. * * Themes are encouraged to override this if needed. * * This attempts to set the overlay colour in this order: * * 1. Using the --gin-bg-app custom property if it exists, usually because the * current theme is Gin. * * 2. Using light-dark(white, black) if that's supported by the browser. * * 3. Finally, just setting to white if the above fail. * * Note that we could try inherit as the final fallback, but Claro and * possibly other themes do not set a background-color on the * element, which would result in an invisible overlay. * * @type {color} */ --refreshless-page-transition-overlay-background-colour: var( --gin-bg-app, var( --refreshless-page-transition-overlay-light-dark-fallback, white ) ); } @supports (background-color: light-dark(white, black)) { :root { /** * RefreshLess page transition overlay fallback when light-dark() supported. * * @type {color} */ --refreshless-page-transition-overlay-light-dark-fallback: light-dark( white, black ); } } .refreshless-page-transition-overlay { display: block; position: fixed; opacity: 0; pointer-events: none; transition-property: opacity; transition-timing-function: linear; transition-duration: var(--refreshless-page-transition-out-duration); top: 0; left: 0; width: 100vw; height: 100vh; z-index: var(--refreshless-page-transition-overlay-z-index); background-color: var( --refreshless-page-transition-overlay-background-colour ); } /* Use dynamic viewport units if available. @see https://developer.mozilla.org/en-US/docs/Web/CSS/length#dynamic */ @supports (width: 100dvw) { .refreshless-page-transition-overlay { width: 100dvw; height: 100dvh; } } .refreshless-page-transition-overlay--active { opacity: 1; pointer-events: auto; transition-duration: var(--refreshless-page-transition-in-duration); }