@itwin/itwinui-css/css/skip-to-content.css

CSS library for building beautiful and well working web UI components within Bentley Systems & iTwin.js applications.

/*---------------------------------------------------------------------------------------------
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
.iui-skip-to-content-link{background-color:hsl(0 0% 0%/var(--iui-opacity-2));color:var(--iui-color-white);border-radius:var(--iui-border-radius-round);-webkit-user-select:none;user-select:none;padding-block:calc(var(--iui-size-s)*.75);padding-inline:var(--iui-size-m);text-align:center;opacity:0;z-index:99;transition:background-color var(--iui-duration-1)ease-in-out;text-decoration:none;position:fixed;inset-block-start:calc(var(--iui-size-s)*2);inset-inline-start:50%;transform:translate(-50%)translateY(-170%)}@supports ((-webkit-backdrop-filter:blur(5px)) or (backdrop-filter:blur(5px))){.iui-skip-to-content-link{background-color:hsl(0 0% 0%/var(--iui-opacity-3));-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}}.iui-skip-to-content-link:focus-visible{outline:2px solid var(--iui-color-border-accent);outline-offset:2px}@media (prefers-reduced-motion:no-preference){.iui-skip-to-content-link{transition:opacity var(--iui-duration-3)ease-in-out,background-color var(--iui-duration-3)ease-in-out,transform var(--iui-duration-3)ease-in-out,box-shadow var(--iui-duration-3)ease-in-out}}.iui-skip-to-content-link:hover{background-color:hsl(0 0% 0%/var(--iui-opacity-1))}@supports ((-webkit-backdrop-filter:blur(5px)) or (backdrop-filter:blur(5px))){.iui-skip-to-content-link:hover{background-color:hsl(0 0% 0%/var(--iui-opacity-2));-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}}.iui-skip-to-content-link:focus{opacity:1;box-shadow:var(--iui-shadow-4);transform:translate(-50%)translateY(0)}@media (prefers-reduced-motion:no-preference){.iui-skip-to-content-link:focus{transition:opacity var(--iui-duration-0)ease-in-out,background-color var(--iui-duration-1)ease-in-out,transform var(--iui-duration-1)ease-in-out,box-shadow var(--iui-duration-1)ease-in-out}}