-
Notifications
You must be signed in to change notification settings - Fork 285
/
_variables.css
59 lines (50 loc) · 1.68 KB
/
_variables.css
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
@import "open-props/shadows.shadow.min.css";
@import "open-props/borders.shadow.min.css";
@import "open-props/gray.shadow.min.css";
@import "open-props/gray-hsl.shadow.min.css";
:host {
--theme-bg: white;
--theme-bd: hsl(0 0% 100% / var(--theme-bd-opacity));
--theme-bd-2: hsl(0 0% 100% / var(--theme-bd-2-opacity));
--theme-bd-opacity: 1;
--theme-bd-2-opacity: 1;
--theme-color: hotpink;
--theme-blue: hsl(188 90% 45%);
--theme-purple: hsl(267 100% 58%);
--neon-pink: color(display-p3 1 0 1);
--neon-purple: color(display-p3 .5 0 1);
--neon-lime: color(display-p3 0.25 1 0);
--neon-cyan: color(display-p3 0 1 1);
--theme-text_color: var(--gray-11);
--theme-icon_color: var(--gray-9);
--theme-icon_hover-bg: white;
--theme-icon_active-bg: white;
--layer-top: 2147483647;
--layer-1: 2147483646;
--layer-2: 2147483645;
--layer-3: 2147483644;
--layer-4: 2147483643;
--layer-5: 2147483642;
--text-shadow: 0 1px hsl(0 0% 0% / 40%);
@media (-webkit-min-device-pixel-ratio: 2) {
--text-shadow: 0 .5px hsl(0 0% 0% / 50%);
}
@media (prefers-color-scheme: dark) {
--theme-bg: var(--gray-10);
--theme-bd: hsl(var(--gray-10-hsl) / var(--theme-bd-opacity));
--theme-bd-2: hsl(var(--gray-10-hsl) / var(--theme-bd-2-opacity));
--theme-color: hsl(330deg 65% 75%);
--theme-text_color: var(--gray-0);
--theme-icon_color: var(--gray-2);
--theme-icon_hover-bg: var(--gray-8);
--theme-icon_active-bg: var(--gray-8);
}
@supports (backdrop-filter: blur(5px)) {
--theme-bd-opacity: .8;
--theme-bd-2-opacity: .9;
}
@supports (-webkit-backdrop-filter: blur(5px)) {
--theme-bd-opacity: .8;
--theme-bd-2-opacity: .9;
}
}