violette/index.css at main · faergeek/violette · 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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
@import 'modern-normalize';

:root {
  --background: 0 0% 100%;
  --foreground: 224 71.4% 4.1%;
  --primary: 262.1 83.3% 57.8%;
  --primary-foreground: 210 20% 98%;
  --secondary: 220 14.3% 95.9%;
  --secondary-foreground: 220.9 39.3% 11%;
  --muted: 220 14.3% 95.9%;
  --muted-foreground: 220 8.9% 46.1%;
  --accent: 220 14.3% 95.9%;
  --accent-foreground: 220.9 39.3% 11%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 20% 98%;
  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --now-playing-height: 48px;
  --player-toolbar-height: 48px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: 224 71.4% 4.1%;
    --foreground: 210 20% 98%;
    --primary: 263.4 70% 50.4%;
    --primary-foreground: 210 20% 98%;
    --secondary: 215 27.9% 16.9%;
    --secondary-foreground: 210 20% 98%;
    --muted: 215 27.9% 16.9%;
    --muted-foreground: 217.9 10.6% 64.9%;
    --accent: 215 27.9% 16.9%;
    --accent-foreground: 210 20% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 20% 98%;
    --border: 215 27.9% 16.9%;
    --input: 215 27.9% 16.9%;
    color-scheme: dark;
  }
}

* {
  overflow-wrap: break-word;
}

html {
  scroll-padding-top: calc(var(--now-playing-height) + 30px);
  scroll-padding-bottom: var(--player-toolbar-height);
}

body {
  min-width: 320px;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  accent-color: hsl(var(--primary));
}

body[data-scroll-lock] {
  overflow: hidden;
  margin-inline-end: var(--scrollbar-inline-size);
  margin-block-end: var(--scrollbar-block-size);
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

:any-link {
  color: inherit;
  text-decoration: inherit;

  &:hover,
  &:focus-visible {
    color: hsl(var(--primary));
  }
}

:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: -2px;
}

button {
  cursor: pointer;
}