react-components/skip-link.css at main · Adjanour/react-components · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
@layer aw-components {
  .aw-skip-link {
    --aw-skip-bg: #0f172a;
    --aw-skip-text: #fff;
    --aw-skip-font: system-ui, -apple-system, sans-serif;
    --aw-skip-radius: 6px;

    position: absolute;
    top: -100%;
    left: 0.5rem;
    z-index: 9999;
    font-family: var(--aw-skip-font);
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.625rem 1rem;
    background: var(--aw-skip-bg);
    color: var(--aw-skip-text);
    border-radius: var(--aw-skip-radius);
    text-decoration: none;
    outline: none;
    transition: top 0.1s ease;
  }

  .aw-skip-link:focus {
    top: 0.5rem;
  }

  @media (prefers-color-scheme: dark) {
    .aw-skip-link {
      --aw-skip-bg: #f1f5f9;
      --aw-skip-text: #0f172a;
    }
  }
}