| 1 | @import 'props.media.css';
|
| 2 |
|
| 3 | :where(html) {
|
| 4 | --shadow-color: 220 3% 15%;
|
| 5 | --shadow-strength: 1%;
|
| 6 | --shadow-1: 0 1px 2px -1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
|
| 7 | --shadow-2:
|
| 8 | 0 3px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
|
| 9 | 0 7px 14px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%));
|
| 10 | --shadow-3:
|
| 11 | 0 -1px 3px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
|
| 12 | 0 1px 2px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
|
| 13 | 0 2px 5px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
|
| 14 | 0 4px 12px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
|
| 15 | 0 12px 15px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
|
| 16 | --shadow-4:
|
| 17 | 0 -2px 5px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
|
| 18 | 0 1px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
|
| 19 | 0 2px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
|
| 20 | 0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
|
| 21 | 0 9px 9px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
|
| 22 | 0 16px 16px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%));
|
| 23 | --shadow-5:
|
| 24 | 0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
|
| 25 | 0 2px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
|
| 26 | 0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
|
| 27 | 0 10px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
|
| 28 | 0 20px 20px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
|
| 29 | 0 40px 40px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
|
| 30 | --shadow-6:
|
| 31 | 0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
|
| 32 | 0 3px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
|
| 33 | 0 7px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
|
| 34 | 0 12px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
|
| 35 | 0 22px 18px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
|
| 36 | 0 41px 33px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%)),
|
| 37 | 0 100px 80px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
|
| 38 | --inner-shadow-0: inset 0 0 0 1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
|
| 39 | --inner-shadow-1: inset 0 1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
|
| 40 | --inner-shadow-2: inset 0 1px 4px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
|
| 41 | --inner-shadow-3: inset 0 2px 8px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
|
| 42 | --inner-shadow-4: inset 0 2px 14px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
|
| 43 | }
|
| 44 |
|
| 45 | @media (--OSdark) {
|
| 46 | :where(html) {
|
| 47 | --shadow-color: 220 40% 2%;
|
| 48 | --shadow-strength: 25%;
|
| 49 | }
|
| 50 | } |
| \ | No newline at end of file |