@glasshome/ui 0.2.7 → 0.3.1
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/README.md +2 -2
- package/dist/solid/badge.d.ts +2 -2
- package/dist/solid/breadcrumb.d.ts +2 -2
- package/dist/solid/button-group.d.ts +2 -2
- package/dist/solid/color-slider.d.ts +14 -0
- package/dist/solid/color-wheel.d.ts +17 -0
- package/dist/solid/entity-selector.d.ts +3 -0
- package/dist/solid/index.d.ts +5 -2
- package/dist/solid/index.js +11821 -10152
- package/dist/solid/item.d.ts +3 -3
- package/dist/solid/select.d.ts +2 -2
- package/package.json +81 -79
- package/src/styles/theme.css +280 -272
package/src/styles/theme.css
CHANGED
|
@@ -1,406 +1,414 @@
|
|
|
1
1
|
@theme inline {
|
|
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
|
-
|
|
2
|
+
--color-background: var(--background);
|
|
3
|
+
--color-foreground: var(--foreground);
|
|
4
|
+
--color-card: var(--card);
|
|
5
|
+
--color-card-foreground: var(--card-foreground);
|
|
6
|
+
--color-popover: var(--popover);
|
|
7
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
8
|
+
--color-primary: var(--primary);
|
|
9
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
10
|
+
--color-secondary: var(--secondary);
|
|
11
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
12
|
+
--color-muted: var(--muted);
|
|
13
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
14
|
+
--color-accent: var(--accent);
|
|
15
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
16
|
+
--color-destructive: var(--destructive);
|
|
17
|
+
--color-destructive-foreground: var(--destructive-foreground);
|
|
18
|
+
--color-border: var(--border);
|
|
19
|
+
--color-input: var(--input);
|
|
20
|
+
--color-ring: var(--ring);
|
|
21
|
+
--color-chart-1: var(--chart-1);
|
|
22
|
+
--color-chart-2: var(--chart-2);
|
|
23
|
+
--color-chart-3: var(--chart-3);
|
|
24
|
+
--color-chart-4: var(--chart-4);
|
|
25
|
+
--color-chart-5: var(--chart-5);
|
|
26
|
+
--font-sans: var(--font-sans);
|
|
27
|
+
--font-mono: var(--font-mono);
|
|
28
|
+
--font-serif: var(--font-serif);
|
|
29
|
+
|
|
30
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
31
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
32
|
+
--radius-lg: var(--radius);
|
|
33
|
+
--radius-xl: calc(var(--radius) + 4px);
|
|
34
|
+
|
|
35
|
+
--shadow-2xs: var(--shadow-2xs);
|
|
36
|
+
--shadow-xs: var(--shadow-xs);
|
|
37
|
+
--shadow-sm: var(--shadow-sm);
|
|
38
|
+
--shadow: var(--shadow);
|
|
39
|
+
--shadow-md: var(--shadow-md);
|
|
40
|
+
--shadow-lg: var(--shadow-lg);
|
|
41
|
+
--shadow-xl: var(--shadow-xl);
|
|
42
|
+
--shadow-2xl: var(--shadow-2xl);
|
|
43
|
+
|
|
44
|
+
--animate-collapsible-down: collapsible-down 0.2s ease-out;
|
|
45
|
+
--animate-collapsible-up: collapsible-up 0.2s ease-out;
|
|
46
46
|
}
|
|
47
47
|
|
|
48
48
|
@keyframes collapsible-down {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
49
|
+
from {
|
|
50
|
+
height: 0;
|
|
51
|
+
}
|
|
52
|
+
to {
|
|
53
|
+
height: var(--kb-collapsible-content-height);
|
|
54
|
+
}
|
|
55
55
|
}
|
|
56
56
|
|
|
57
57
|
@keyframes collapsible-up {
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
58
|
+
from {
|
|
59
|
+
height: var(--kb-collapsible-content-height);
|
|
60
|
+
}
|
|
61
|
+
to {
|
|
62
|
+
height: 0;
|
|
63
|
+
}
|
|
64
64
|
}
|
|
65
65
|
|
|
66
66
|
:root {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
67
|
+
--background: oklch(0.985 0.002 247.8763);
|
|
68
|
+
--foreground: oklch(0 0 0);
|
|
69
|
+
--card: oklch(0.99 0.008 285);
|
|
70
|
+
--card-foreground: oklch(0 0 0);
|
|
71
|
+
--popover: oklch(0.9911 0 0);
|
|
72
|
+
--popover-foreground: oklch(0 0 0);
|
|
73
|
+
--primary: oklch(0.48 0.2 215.221);
|
|
74
|
+
--primary-foreground: oklch(1 0 0);
|
|
75
|
+
--secondary: oklch(0.96 0.01 250);
|
|
76
|
+
--secondary-foreground: oklch(0.9551 0 0);
|
|
77
|
+
--muted: oklch(0.9702 0 0);
|
|
78
|
+
--muted-foreground: oklch(0.4386 0 0);
|
|
79
|
+
--accent: oklch(0.6 0.2 195);
|
|
80
|
+
--accent-foreground: oklch(1 0 0);
|
|
81
|
+
--destructive: oklch(0.629 0.1902 23.0704);
|
|
82
|
+
--destructive-foreground: oklch(1 0 0);
|
|
83
|
+
--border: oklch(0.93 0.0094 286.2156);
|
|
84
|
+
--input: oklch(0.9401 0 0);
|
|
85
|
+
--ring: oklch(0.6132 0.2294 291.7437);
|
|
86
|
+
--chart-1: oklch(0.7459 0.1483 156.4499);
|
|
87
|
+
--chart-2: oklch(0.48 0.2 215.221);
|
|
88
|
+
--chart-3: oklch(0.7336 0.1758 50.5517);
|
|
89
|
+
--chart-4: oklch(0.5828 0.1809 259.7276);
|
|
90
|
+
--chart-5: oklch(0.559 0 0);
|
|
91
|
+
--font-sans: "Geist Variable", ui-sans-serif, system-ui, sans-serif;
|
|
92
|
+
--font-serif: "Geist Variable", ui-sans-serif, system-ui, sans-serif;
|
|
93
|
+
--font-mono: "GeistMono Variable", "JetBrains Mono", "Fira Code", Consolas, monospace;
|
|
94
|
+
--radius: 1.4rem;
|
|
95
|
+
--shadow-x: 0px;
|
|
96
|
+
--shadow-y: 2px;
|
|
97
|
+
--shadow-blur: 3px;
|
|
98
|
+
--shadow-spread: 0px;
|
|
99
|
+
--shadow-opacity: 0.16;
|
|
100
|
+
--shadow-color: hsl(0 0% 0%);
|
|
101
|
+
--shadow-2xs: 0px 2px 3px 0px hsl(0 0% 0% / 0.08);
|
|
102
|
+
--shadow-xs: 0px 2px 3px 0px hsl(0 0% 0% / 0.08);
|
|
103
|
+
--shadow-sm: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 1px 2px -1px hsl(0 0% 0% / 0.16);
|
|
104
|
+
--shadow: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 1px 2px -1px hsl(0 0% 0% / 0.16);
|
|
105
|
+
--shadow-md: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 2px 4px -1px hsl(0 0% 0% / 0.16);
|
|
106
|
+
--shadow-lg: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 4px 6px -1px hsl(0 0% 0% / 0.16);
|
|
107
|
+
--shadow-xl: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 8px 10px -1px hsl(0 0% 0% / 0.16);
|
|
108
|
+
--shadow-2xl: 0px 2px 3px 0px hsl(0 0% 0% / 0.4);
|
|
109
|
+
--tracking-normal: 0em;
|
|
110
|
+
--spacing: 0.27rem;
|
|
111
111
|
}
|
|
112
112
|
|
|
113
113
|
.dark {
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
114
|
+
--background: oklch(0.12 0.01 250);
|
|
115
|
+
--foreground: oklch(0.9551 0 0);
|
|
116
|
+
--card: oklch(0.17 0.01 250);
|
|
117
|
+
--card-foreground: oklch(0.9551 0 0);
|
|
118
|
+
--popover: oklch(0.16 0.005 0);
|
|
119
|
+
--popover-foreground: oklch(0.9551 0 0);
|
|
120
|
+
--primary: oklch(0.48 0.2 215.221);
|
|
121
|
+
--primary-foreground: oklch(1 0 0);
|
|
122
|
+
--secondary: oklch(0.14 0.01 250);
|
|
123
|
+
--secondary-foreground: oklch(0.9551 0 0);
|
|
124
|
+
--muted: oklch(0.22 0.006 0);
|
|
125
|
+
--muted-foreground: oklch(0.7058 0 0);
|
|
126
|
+
--accent: oklch(0.6 0.2 195);
|
|
127
|
+
--accent-foreground: oklch(1 0 0);
|
|
128
|
+
--destructive: oklch(0.7106 0.1661 22.2162);
|
|
129
|
+
--destructive-foreground: oklch(1 0 0);
|
|
130
|
+
--border: oklch(0.26 0.012 250);
|
|
131
|
+
--input: oklch(0.25 0.005 0);
|
|
132
|
+
--ring: oklch(0.6132 0.2294 291.7437);
|
|
133
|
+
--chart-1: oklch(0.8003 0.1821 151.711);
|
|
134
|
+
--chart-2: oklch(0.48 0.2 215.221);
|
|
135
|
+
--chart-3: oklch(0.8077 0.1035 19.5706);
|
|
136
|
+
--chart-4: oklch(0.6691 0.1569 260.1063);
|
|
137
|
+
--chart-5: oklch(0.7058 0 0);
|
|
138
|
+
--font-sans: "Geist Variable", ui-sans-serif, system-ui, sans-serif;
|
|
139
|
+
--font-serif: "Geist Variable", ui-sans-serif, system-ui, sans-serif;
|
|
140
|
+
--font-mono: "GeistMono Variable", "JetBrains Mono", "Fira Code", Consolas, monospace;
|
|
141
|
+
--radius: 1.4rem;
|
|
142
|
+
--shadow-x: 0px;
|
|
143
|
+
--shadow-y: 2px;
|
|
144
|
+
--shadow-blur: 3px;
|
|
145
|
+
--shadow-spread: 0px;
|
|
146
|
+
--shadow-opacity: 0.16;
|
|
147
|
+
--shadow-color: hsl(0 0% 0%);
|
|
148
|
+
--shadow-2xs: 0px 2px 3px 0px hsl(0 0% 0% / 0.08);
|
|
149
|
+
--shadow-xs: 0px 2px 3px 0px hsl(0 0% 0% / 0.08);
|
|
150
|
+
--shadow-sm: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 1px 2px -1px hsl(0 0% 0% / 0.16);
|
|
151
|
+
--shadow: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 1px 2px -1px hsl(0 0% 0% / 0.16);
|
|
152
|
+
--shadow-md: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 2px 4px -1px hsl(0 0% 0% / 0.16);
|
|
153
|
+
--shadow-lg: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 4px 6px -1px hsl(0 0% 0% / 0.16);
|
|
154
|
+
--shadow-xl: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 8px 10px -1px hsl(0 0% 0% / 0.16);
|
|
155
|
+
--shadow-2xl: 0px 2px 3px 0px hsl(0 0% 0% / 0.4);
|
|
156
156
|
}
|
|
157
157
|
|
|
158
158
|
@layer base {
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
159
|
+
* {
|
|
160
|
+
@apply border-border outline-ring/50;
|
|
161
|
+
}
|
|
162
|
+
body {
|
|
163
|
+
@apply bg-background text-foreground min-w-[320px] min-h-screen relative m-0;
|
|
164
|
+
}
|
|
165
165
|
}
|
|
166
166
|
|
|
167
167
|
/* Utility classes */
|
|
168
168
|
.scrollbar-hide {
|
|
169
|
-
|
|
170
|
-
|
|
169
|
+
-ms-overflow-style: none;
|
|
170
|
+
scrollbar-width: none;
|
|
171
171
|
}
|
|
172
172
|
|
|
173
173
|
.scrollbar-hide::-webkit-scrollbar {
|
|
174
|
-
|
|
174
|
+
display: none;
|
|
175
175
|
}
|
|
176
176
|
|
|
177
177
|
/* Weather widget animations */
|
|
178
178
|
@keyframes rainFall {
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
179
|
+
to {
|
|
180
|
+
transform: translateY(110vh);
|
|
181
|
+
}
|
|
182
182
|
}
|
|
183
183
|
|
|
184
184
|
@keyframes snowFall {
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
185
|
+
to {
|
|
186
|
+
transform: translateY(110vh);
|
|
187
|
+
}
|
|
188
188
|
}
|
|
189
189
|
|
|
190
190
|
@keyframes sway {
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
191
|
+
0%,
|
|
192
|
+
100% {
|
|
193
|
+
transform: translateX(0);
|
|
194
|
+
}
|
|
195
|
+
50% {
|
|
196
|
+
transform: translateX(20px);
|
|
197
|
+
}
|
|
198
198
|
}
|
|
199
199
|
|
|
200
200
|
@keyframes windBlow {
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
201
|
+
to {
|
|
202
|
+
transform: translateX(calc(100vw + 200px));
|
|
203
|
+
}
|
|
204
204
|
}
|
|
205
205
|
|
|
206
206
|
@keyframes swirl {
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
207
|
+
0%,
|
|
208
|
+
100% {
|
|
209
|
+
transform: translate(0, 0) rotate(0deg);
|
|
210
|
+
}
|
|
211
|
+
50% {
|
|
212
|
+
transform: translate(30px, -20px) rotate(180deg);
|
|
213
|
+
}
|
|
214
214
|
}
|
|
215
215
|
|
|
216
216
|
@keyframes cloudDrift {
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
217
|
+
to {
|
|
218
|
+
transform: translateX(calc(100vw + 200px));
|
|
219
|
+
}
|
|
220
220
|
}
|
|
221
221
|
|
|
222
222
|
@keyframes fogDrift {
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
223
|
+
to {
|
|
224
|
+
transform: translateX(50vw);
|
|
225
|
+
}
|
|
226
226
|
}
|
|
227
227
|
|
|
228
228
|
@keyframes shootingStar {
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
229
|
+
0% {
|
|
230
|
+
transform: translate(0, 0) rotate(-45deg);
|
|
231
|
+
opacity: 0;
|
|
232
|
+
}
|
|
233
|
+
10% {
|
|
234
|
+
opacity: 1;
|
|
235
|
+
}
|
|
236
|
+
100% {
|
|
237
|
+
transform: translate(-400px, 400px) rotate(-45deg);
|
|
238
|
+
opacity: 0;
|
|
239
|
+
}
|
|
240
240
|
}
|
|
241
241
|
|
|
242
242
|
/* Loading and Error screen animations */
|
|
243
243
|
@keyframes float {
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
244
|
+
0%,
|
|
245
|
+
100% {
|
|
246
|
+
transform: translateY(0px);
|
|
247
|
+
}
|
|
248
|
+
50% {
|
|
249
|
+
transform: translateY(-10px);
|
|
250
|
+
}
|
|
251
251
|
}
|
|
252
252
|
|
|
253
253
|
@keyframes spin-slow {
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
254
|
+
from {
|
|
255
|
+
transform: rotate(0deg);
|
|
256
|
+
}
|
|
257
|
+
to {
|
|
258
|
+
transform: rotate(360deg);
|
|
259
|
+
}
|
|
260
260
|
}
|
|
261
261
|
|
|
262
262
|
.animate-float {
|
|
263
|
-
|
|
263
|
+
animation: float 3s ease-in-out infinite;
|
|
264
264
|
}
|
|
265
265
|
|
|
266
266
|
.animate-spin-slow {
|
|
267
|
-
|
|
267
|
+
animation: spin-slow 8s linear infinite;
|
|
268
268
|
}
|
|
269
269
|
|
|
270
270
|
/* Line clamp utilities */
|
|
271
271
|
.line-clamp-1 {
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
272
|
+
overflow: hidden;
|
|
273
|
+
display: -webkit-box;
|
|
274
|
+
-webkit-box-orient: vertical;
|
|
275
|
+
-webkit-line-clamp: 1;
|
|
276
276
|
}
|
|
277
277
|
|
|
278
278
|
.line-clamp-2 {
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
279
|
+
overflow: hidden;
|
|
280
|
+
display: -webkit-box;
|
|
281
|
+
-webkit-box-orient: vertical;
|
|
282
|
+
-webkit-line-clamp: 2;
|
|
283
283
|
}
|
|
284
284
|
|
|
285
285
|
.line-clamp-3 {
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
286
|
+
overflow: hidden;
|
|
287
|
+
display: -webkit-box;
|
|
288
|
+
-webkit-box-orient: vertical;
|
|
289
|
+
-webkit-line-clamp: 3;
|
|
290
290
|
}
|
|
291
291
|
|
|
292
292
|
/* Widget fade-in and slide animation */
|
|
293
293
|
@keyframes widget-slot-in {
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
294
|
+
from {
|
|
295
|
+
opacity: 0;
|
|
296
|
+
transform: translateY(30px);
|
|
297
|
+
}
|
|
298
|
+
to {
|
|
299
|
+
opacity: 1;
|
|
300
|
+
transform: translateY(0);
|
|
301
|
+
}
|
|
302
302
|
}
|
|
303
303
|
|
|
304
304
|
.widget-slot-in {
|
|
305
|
-
|
|
306
|
-
|
|
305
|
+
opacity: 0;
|
|
306
|
+
animation: widget-slot-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
|
307
307
|
}
|
|
308
308
|
|
|
309
309
|
/* Area title transition animations only */
|
|
310
310
|
::view-transition-old(area-title),
|
|
311
311
|
::view-transition-new(area-title) {
|
|
312
|
-
|
|
313
|
-
|
|
312
|
+
animation-duration: 0.4s;
|
|
313
|
+
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
314
314
|
}
|
|
315
315
|
|
|
316
316
|
::view-transition-old(area-title) {
|
|
317
|
-
|
|
317
|
+
animation-name: fade-out-scale;
|
|
318
318
|
}
|
|
319
319
|
|
|
320
320
|
::view-transition-new(area-title) {
|
|
321
|
-
|
|
321
|
+
animation-name: fade-in-scale;
|
|
322
322
|
}
|
|
323
323
|
|
|
324
324
|
@keyframes fade-out-scale {
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
325
|
+
from {
|
|
326
|
+
opacity: 1;
|
|
327
|
+
transform: scale(1);
|
|
328
|
+
}
|
|
329
|
+
to {
|
|
330
|
+
opacity: 0;
|
|
331
|
+
transform: scale(0.95);
|
|
332
|
+
}
|
|
333
333
|
}
|
|
334
334
|
|
|
335
335
|
@keyframes fade-in-scale {
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
336
|
+
from {
|
|
337
|
+
opacity: 0;
|
|
338
|
+
transform: scale(1.05);
|
|
339
|
+
}
|
|
340
|
+
to {
|
|
341
|
+
opacity: 1;
|
|
342
|
+
transform: scale(1);
|
|
343
|
+
}
|
|
344
344
|
}
|
|
345
345
|
|
|
346
346
|
@media (prefers-reduced-motion) {
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
347
|
+
::view-transition-old(area-title),
|
|
348
|
+
::view-transition-new(area-title) {
|
|
349
|
+
animation: none !important;
|
|
350
|
+
}
|
|
351
351
|
}
|
|
352
352
|
|
|
353
353
|
/* Performance: disable all backdrop-filter when reduce-blur is active */
|
|
354
354
|
.reduce-blur,
|
|
355
355
|
.reduce-blur * {
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
356
|
+
--tw-backdrop-blur: initial !important;
|
|
357
|
+
backdrop-filter: none !important;
|
|
358
|
+
-webkit-backdrop-filter: none !important;
|
|
359
359
|
}
|
|
360
360
|
|
|
361
361
|
/* Accessibility: minimize animations/transitions when reduce-motion is active */
|
|
362
362
|
.reduce-motion,
|
|
363
363
|
.reduce-motion * {
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
364
|
+
animation-duration: 0.01ms !important;
|
|
365
|
+
animation-iteration-count: 1 !important;
|
|
366
|
+
transition-duration: 0.01ms !important;
|
|
367
|
+
scroll-behavior: auto !important;
|
|
368
368
|
}
|
|
369
369
|
|
|
370
370
|
/* Inline SVG background houses: position lives in keyframes, restore static spot. */
|
|
371
371
|
.reduce-motion .house-shape {
|
|
372
|
-
|
|
373
|
-
|
|
372
|
+
animation: none !important;
|
|
373
|
+
transform: translate(var(--tx), var(--ty)) rotate(var(--rot));
|
|
374
374
|
}
|
|
375
375
|
|
|
376
376
|
/* BottomSheet animations */
|
|
377
377
|
@keyframes bs-slide-up {
|
|
378
|
-
|
|
379
|
-
|
|
378
|
+
from {
|
|
379
|
+
transform: translate3d(0, 100%, 0);
|
|
380
|
+
}
|
|
381
|
+
to {
|
|
382
|
+
transform: translate3d(0, 0, 0);
|
|
383
|
+
}
|
|
380
384
|
}
|
|
381
385
|
@keyframes bs-slide-down {
|
|
382
|
-
|
|
383
|
-
|
|
386
|
+
from {
|
|
387
|
+
transform: translate3d(0, 0, 0);
|
|
388
|
+
}
|
|
389
|
+
to {
|
|
390
|
+
transform: translate3d(0, 100%, 0);
|
|
391
|
+
}
|
|
384
392
|
}
|
|
385
393
|
.bs-content {
|
|
386
|
-
|
|
387
|
-
|
|
394
|
+
transform: translate3d(0, 100%, 0);
|
|
395
|
+
bottom: var(--bs-keyboard-offset, 0);
|
|
388
396
|
}
|
|
389
397
|
.bs-content[data-keyboard-open] {
|
|
390
|
-
|
|
398
|
+
max-height: calc(85dvh - var(--bs-keyboard-offset, 0px));
|
|
391
399
|
}
|
|
392
400
|
.bs-content[data-state="opening"] {
|
|
393
|
-
|
|
401
|
+
animation: bs-slide-up 500ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
|
|
394
402
|
}
|
|
395
403
|
.bs-content[data-state="open"],
|
|
396
404
|
.bs-content[data-state="pressing"],
|
|
397
405
|
.bs-content[data-state="dragging"],
|
|
398
406
|
.bs-content[data-state="snapping"] {
|
|
399
|
-
|
|
407
|
+
transform: translate3d(0, 0, 0);
|
|
400
408
|
}
|
|
401
409
|
.bs-content[data-state="closing"] {
|
|
402
|
-
|
|
410
|
+
animation: bs-slide-down 500ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
|
|
403
411
|
}
|
|
404
412
|
.bs-content[data-reduced-motion] {
|
|
405
|
-
|
|
413
|
+
animation-duration: 0ms !important;
|
|
406
414
|
}
|