@klodd/ds 5.15.3 → 5.15.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/base/ambient.css +46 -0
- package/css/index.css +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
/* ================================================================
|
|
2
|
+
Ambient glow - page-level decoration för glaseffekten
|
|
3
|
+
Aktiveras via .has-ambient-glow på <body>.
|
|
4
|
+
Ger backdrop-filter natt att arbeta med på mobil bar-mode.
|
|
5
|
+
|
|
6
|
+
Värden:
|
|
7
|
+
- 80vw bredd: bred nog att ge ett mjukt ljusfält utan spotlight-känsla
|
|
8
|
+
- 45vh höjd: sträcker sig upp bakom kortlistan utan att dominera
|
|
9
|
+
- accent-a6: måttlig mättnad i centrum (Radix steg 6 = subtil border-emphasis-alpha)
|
|
10
|
+
- accent-a3: yttre glow-toning nedtonat (Radix steg 3 = vila-tint)
|
|
11
|
+
- bottom: -10%: centrerar glöden strax under viewport-kanten så
|
|
12
|
+
den mättar under pillen snarare än rakt bakom den
|
|
13
|
+
================================================================ */
|
|
14
|
+
|
|
15
|
+
@media (max-width: 720px) {
|
|
16
|
+
.has-ambient-glow::before {
|
|
17
|
+
content: '';
|
|
18
|
+
position: fixed;
|
|
19
|
+
bottom: -10%;
|
|
20
|
+
left: 50%;
|
|
21
|
+
transform: translateX(-50%);
|
|
22
|
+
width: 80vw;
|
|
23
|
+
height: 45vh;
|
|
24
|
+
background: radial-gradient(
|
|
25
|
+
ellipse at center bottom,
|
|
26
|
+
var(--accent-a6) 0%,
|
|
27
|
+
var(--accent-a3) 40%,
|
|
28
|
+
transparent 70%
|
|
29
|
+
);
|
|
30
|
+
pointer-events: none;
|
|
31
|
+
z-index: 0;
|
|
32
|
+
/* Säkerställ att glöden ligger UNDER allt innehåll
|
|
33
|
+
men ÖVER page-bakgrunden */
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/* Dark mode only - light mode behöver ingen ambient glow */
|
|
38
|
+
@media (max-width: 720px) and (prefers-color-scheme: light) {
|
|
39
|
+
.has-ambient-glow::before {
|
|
40
|
+
display: none;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
[data-theme="light"] .has-ambient-glow::before {
|
|
45
|
+
display: none;
|
|
46
|
+
}
|
package/css/index.css
CHANGED
|
@@ -45,6 +45,7 @@
|
|
|
45
45
|
@import url('base/pwa.css') layer(klodd.base);
|
|
46
46
|
@import url('base/typography.css') layer(klodd.base);
|
|
47
47
|
@import url('base/layout.css') layer(klodd.base);
|
|
48
|
+
@import url('base/ambient.css') layer(klodd.base);
|
|
48
49
|
@import url('base/interactions.css') layer(klodd.base);
|
|
49
50
|
|
|
50
51
|
/* Komponenter */
|