CSSsrc/props.shadows.css -rw-r--r-- 3.2 KiB
1@import 'props.media.css';
2
3:where(html) {
4 --shadow-color: 220 3% 15%;
5 --shadow-strength: 1%;
6 --inner-shadow-highlight: inset 0 -.5px 0 0 #fff, inset 0 .5px 0 0 #0001;
7 --shadow-1: 0 1px 2px -1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
8 --shadow-2:
9 0 3px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
10 0 7px 14px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%));
11 --shadow-3:
12 0 -1px 3px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
13 0 1px 2px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
14 0 2px 5px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
15 0 4px 12px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
16 0 12px 15px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
17 --shadow-4:
18 0 -2px 5px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
19 0 1px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
20 0 2px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
21 0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
22 0 9px 9px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
23 0 16px 16px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%));
24 --shadow-5:
25 0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
26 0 2px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
27 0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
28 0 10px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
29 0 20px 20px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
30 0 40px 40px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
31 --shadow-6:
32 0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
33 0 3px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
34 0 7px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
35 0 12px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
36 0 22px 18px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
37 0 41px 33px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%)),
38 0 100px 80px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
39 --inner-shadow-0: inset 0 0 0 1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
40 --inner-shadow-1: inset 0 1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight);
41 --inner-shadow-2: inset 0 1px 4px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight);
42 --inner-shadow-3: inset 0 2px 8px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight);
43 --inner-shadow-4: inset 0 2px 14px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight);
44}
45
46@media (--OSdark) {
47 :where(html) {
48 --shadow-color: 220 40% 2%;
49 --shadow-strength: 25%;
50 --inner-shadow-highlight: inset 0 -.5px 0 0 #fff1, inset 0 .5px 0 0 #0007;
51 }
52}