@metropolle/design-system 1.2025.1-2.10.2349 → 1.2025.1-2.14.2035
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/dist/css/liquid-glass.css +178 -206
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* ============================================
|
|
2
2
|
Metropolle Design System - Liquid Glass CSS
|
|
3
|
-
iOS 26
|
|
3
|
+
Apple iOS 26 Liquid Glass Style
|
|
4
4
|
============================================ */
|
|
5
5
|
|
|
6
6
|
/* =========================
|
|
@@ -22,106 +22,160 @@
|
|
|
22
22
|
--mds-color-brand-secondary: #667eea;
|
|
23
23
|
--mds-color-brand-accent: #764ba2;
|
|
24
24
|
|
|
25
|
-
/* Semantic Colors - Dark mode (default) */
|
|
26
|
-
--mds-color-text-primary: #ffffff;
|
|
27
|
-
--mds-color-text-secondary: rgba(255, 255, 255, 0.7);
|
|
28
|
-
--mds-color-text-tertiary: rgba(255, 255, 255, 0.5);
|
|
29
|
-
--mds-color-background-primary: #0f0f0f;
|
|
30
|
-
--mds-color-background-secondary: #1f1f1f;
|
|
31
|
-
--mds-color-background-tertiary: #2f2f2f;
|
|
32
|
-
--mds-color-border-default: rgba(255, 255, 255, 0.1);
|
|
33
|
-
--mds-color-border-light: rgba(255, 255, 255, 0.05);
|
|
34
|
-
|
|
35
25
|
/* Status Colors */
|
|
36
26
|
--mds-color-success: #10b981;
|
|
37
27
|
--mds-color-warning: #f59e0b;
|
|
38
28
|
--mds-color-error: #ef4444;
|
|
39
29
|
--mds-color-info: #3b82f6;
|
|
30
|
+
--mds-color-accent: #a855f7;
|
|
31
|
+
}
|
|
40
32
|
|
|
41
|
-
|
|
33
|
+
/* =========================
|
|
34
|
+
Dark Theme (Default)
|
|
35
|
+
========================= */
|
|
36
|
+
:root,
|
|
37
|
+
html[data-theme="dark"] {
|
|
38
|
+
/* Semantic Colors */
|
|
39
|
+
--mds-color-text-primary: #ffffff;
|
|
40
|
+
--mds-color-text-secondary: rgba(255, 255, 255, 0.7);
|
|
41
|
+
--mds-color-text-tertiary: rgba(255, 255, 255, 0.5);
|
|
42
|
+
--mds-color-background-primary: #0f0f0f;
|
|
43
|
+
--mds-color-background-secondary: #1a1a1a;
|
|
44
|
+
--mds-color-background-tertiary: #2a2a2a;
|
|
45
|
+
--mds-color-border-default: rgba(255, 255, 255, 0.15);
|
|
46
|
+
--mds-color-border-light: rgba(255, 255, 255, 0.08);
|
|
47
|
+
|
|
48
|
+
/* Scrollbar */
|
|
42
49
|
--mds-scrollbar-track: rgba(40, 40, 40, 0.8);
|
|
43
50
|
--mds-scrollbar-thumb: rgba(80, 80, 80, 0.8);
|
|
44
51
|
--mds-scrollbar-thumb-hover: rgba(100, 100, 100, 0.8);
|
|
45
52
|
|
|
46
53
|
/* =========================
|
|
47
|
-
Liquid Glass Tokens
|
|
54
|
+
Liquid Glass Tokens - iOS 26 Style
|
|
48
55
|
========================= */
|
|
49
56
|
|
|
50
|
-
/* Blur tokens */
|
|
51
|
-
--mds-liquid-blur-xs:
|
|
52
|
-
--mds-liquid-blur-sm:
|
|
53
|
-
--mds-liquid-blur-md:
|
|
54
|
-
--mds-liquid-blur-lg:
|
|
55
|
-
--mds-liquid-blur-xl:
|
|
56
|
-
|
|
57
|
-
/* Saturate tokens */
|
|
58
|
-
--mds-liquid-saturate-subtle:
|
|
59
|
-
--mds-liquid-saturate-default:
|
|
60
|
-
--mds-liquid-saturate-vibrant:
|
|
61
|
-
|
|
62
|
-
/* Background tokens -
|
|
63
|
-
--mds-liquid-bg-
|
|
64
|
-
--mds-liquid-bg-
|
|
65
|
-
--mds-liquid-bg-overlay: rgba(0, 0, 0, 0.
|
|
66
|
-
--mds-liquid-bg-sidebar: rgba(
|
|
67
|
-
--mds-liquid-bg-navbar: rgba(
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
--mds-liquid-
|
|
71
|
-
--mds-liquid-
|
|
72
|
-
|
|
73
|
-
/*
|
|
74
|
-
--mds-liquid-
|
|
75
|
-
--mds-liquid-
|
|
76
|
-
--mds-liquid-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
--mds-liquid-
|
|
81
|
-
--mds-liquid-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
--mds-liquid-
|
|
57
|
+
/* Blur tokens - Increased for more glass-like effect */
|
|
58
|
+
--mds-liquid-blur-xs: 4px;
|
|
59
|
+
--mds-liquid-blur-sm: 8px;
|
|
60
|
+
--mds-liquid-blur-md: 12px;
|
|
61
|
+
--mds-liquid-blur-lg: 16px;
|
|
62
|
+
--mds-liquid-blur-xl: 24px;
|
|
63
|
+
|
|
64
|
+
/* Saturate tokens - Subtle per Apple guidelines */
|
|
65
|
+
--mds-liquid-saturate-subtle: 105%;
|
|
66
|
+
--mds-liquid-saturate-default: 120%;
|
|
67
|
+
--mds-liquid-saturate-vibrant: 140%;
|
|
68
|
+
|
|
69
|
+
/* Background tokens - True glass transparency */
|
|
70
|
+
--mds-liquid-bg-glass: rgba(255, 255, 255, 0.08);
|
|
71
|
+
--mds-liquid-bg-glass-thick: rgba(255, 255, 255, 0.12);
|
|
72
|
+
--mds-liquid-bg-overlay: rgba(0, 0, 0, 0.4);
|
|
73
|
+
--mds-liquid-bg-sidebar: rgba(0, 0, 0, 0.35);
|
|
74
|
+
--mds-liquid-bg-navbar: rgba(0, 0, 0, 0.4);
|
|
75
|
+
--mds-liquid-bg-card: rgba(255, 255, 255, 0.06);
|
|
76
|
+
--mds-liquid-bg-input: rgba(255, 255, 255, 0.08);
|
|
77
|
+
--mds-liquid-bg-button: rgba(255, 255, 255, 0.1);
|
|
78
|
+
--mds-liquid-bg-button-hover: rgba(255, 255, 255, 0.15);
|
|
79
|
+
|
|
80
|
+
/* Border tokens - Subtle glass edges */
|
|
81
|
+
--mds-liquid-border-subtle: rgba(255, 255, 255, 0.12);
|
|
82
|
+
--mds-liquid-border-default: rgba(255, 255, 255, 0.18);
|
|
83
|
+
--mds-liquid-border-bright: rgba(255, 255, 255, 0.25);
|
|
84
|
+
|
|
85
|
+
/* Shadow tokens - Deeper for lifted effect */
|
|
86
|
+
--mds-liquid-shadow-raised: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
87
|
+
--mds-liquid-shadow-floating: 0 8px 24px rgba(0, 0, 0, 0.25);
|
|
88
|
+
--mds-liquid-shadow-elevated: 0 12px 40px rgba(0, 0, 0, 0.3);
|
|
89
|
+
--mds-liquid-shadow-dramatic: 0 16px 56px rgba(0, 0, 0, 0.4);
|
|
90
|
+
|
|
91
|
+
/* Inner glow - Top edge highlight */
|
|
92
|
+
--mds-liquid-glow-edge: inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
|
93
|
+
--mds-liquid-glow-soft: inset 0 1px 1px rgba(255, 255, 255, 0.08);
|
|
94
|
+
|
|
95
|
+
/* Specular highlight - More dramatic top-left shine */
|
|
96
|
+
--mds-liquid-specular: linear-gradient(
|
|
97
|
+
145deg,
|
|
98
|
+
rgba(255, 255, 255, 0.15) 0%,
|
|
99
|
+
rgba(255, 255, 255, 0.05) 25%,
|
|
100
|
+
rgba(255, 255, 255, 0) 50%
|
|
101
|
+
);
|
|
102
|
+
--mds-liquid-specular-intense: linear-gradient(
|
|
103
|
+
145deg,
|
|
104
|
+
rgba(255, 255, 255, 0.25) 0%,
|
|
105
|
+
rgba(255, 255, 255, 0.08) 30%,
|
|
106
|
+
rgba(255, 255, 255, 0) 60%
|
|
107
|
+
);
|
|
86
108
|
|
|
87
109
|
/* Transitions */
|
|
88
|
-
--mds-liquid-transition: all 0.
|
|
89
|
-
--mds-liquid-transition-fast: all 0.15s cubic-bezier(0.
|
|
90
|
-
--mds-liquid-transition-slow: all 0.
|
|
110
|
+
--mds-liquid-transition: all 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
|
|
111
|
+
--mds-liquid-transition-fast: all 0.15s cubic-bezier(0.25, 0.1, 0.25, 1);
|
|
112
|
+
--mds-liquid-transition-slow: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
|
|
91
113
|
|
|
92
|
-
/* Background
|
|
93
|
-
--mds-liquid-gradient
|
|
94
|
-
--mds-liquid-gradient-light: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);
|
|
114
|
+
/* Background gradient */
|
|
115
|
+
--mds-liquid-gradient: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%);
|
|
95
116
|
}
|
|
96
117
|
|
|
97
|
-
/*
|
|
118
|
+
/* =========================
|
|
119
|
+
Light Theme
|
|
120
|
+
========================= */
|
|
98
121
|
html[data-theme="light"] {
|
|
99
|
-
/* Semantic Colors
|
|
122
|
+
/* Semantic Colors */
|
|
100
123
|
--mds-color-text-primary: #1a1a1a;
|
|
101
|
-
--mds-color-text-secondary: rgba(0, 0, 0, 0.
|
|
102
|
-
--mds-color-text-tertiary: rgba(0, 0, 0, 0.
|
|
103
|
-
--mds-color-background-primary: #
|
|
104
|
-
--mds-color-background-secondary: #
|
|
105
|
-
--mds-color-background-tertiary: #
|
|
106
|
-
--mds-color-border-default: rgba(0, 0, 0, 0.
|
|
107
|
-
--mds-color-border-light: rgba(0, 0, 0, 0.
|
|
108
|
-
|
|
109
|
-
/* Scrollbar
|
|
110
|
-
--mds-scrollbar-track: rgba(
|
|
111
|
-
--mds-scrollbar-thumb: rgba(
|
|
112
|
-
--mds-scrollbar-thumb-hover: rgba(
|
|
113
|
-
|
|
114
|
-
/* Liquid Glass - Light mode */
|
|
115
|
-
--mds-liquid-bg-
|
|
116
|
-
--mds-liquid-bg-
|
|
117
|
-
--mds-liquid-bg-overlay: rgba(255, 255, 255, 0.
|
|
118
|
-
--mds-liquid-
|
|
119
|
-
--mds-liquid-
|
|
120
|
-
--mds-liquid-
|
|
121
|
-
--mds-liquid-
|
|
122
|
-
--mds-liquid-
|
|
123
|
-
--mds-liquid-
|
|
124
|
-
|
|
124
|
+
--mds-color-text-secondary: rgba(0, 0, 0, 0.6);
|
|
125
|
+
--mds-color-text-tertiary: rgba(0, 0, 0, 0.4);
|
|
126
|
+
--mds-color-background-primary: #f8f9fa;
|
|
127
|
+
--mds-color-background-secondary: #ffffff;
|
|
128
|
+
--mds-color-background-tertiary: #f0f0f0;
|
|
129
|
+
--mds-color-border-default: rgba(0, 0, 0, 0.08);
|
|
130
|
+
--mds-color-border-light: rgba(0, 0, 0, 0.04);
|
|
131
|
+
|
|
132
|
+
/* Scrollbar */
|
|
133
|
+
--mds-scrollbar-track: rgba(0, 0, 0, 0.05);
|
|
134
|
+
--mds-scrollbar-thumb: rgba(0, 0, 0, 0.2);
|
|
135
|
+
--mds-scrollbar-thumb-hover: rgba(0, 0, 0, 0.3);
|
|
136
|
+
|
|
137
|
+
/* Liquid Glass - Light mode uses darker glass for contrast */
|
|
138
|
+
--mds-liquid-bg-glass: rgba(255, 255, 255, 0.7);
|
|
139
|
+
--mds-liquid-bg-glass-thick: rgba(255, 255, 255, 0.85);
|
|
140
|
+
--mds-liquid-bg-overlay: rgba(255, 255, 255, 0.6);
|
|
141
|
+
--mds-liquid-bg-sidebar: rgba(255, 255, 255, 0.75);
|
|
142
|
+
--mds-liquid-bg-navbar: rgba(255, 255, 255, 0.8);
|
|
143
|
+
--mds-liquid-bg-card: rgba(255, 255, 255, 0.6);
|
|
144
|
+
--mds-liquid-bg-input: rgba(255, 255, 255, 0.9);
|
|
145
|
+
--mds-liquid-bg-button: rgba(0, 0, 0, 0.04);
|
|
146
|
+
--mds-liquid-bg-button-hover: rgba(0, 0, 0, 0.08);
|
|
147
|
+
|
|
148
|
+
/* Borders - Subtle dark edges */
|
|
149
|
+
--mds-liquid-border-subtle: rgba(0, 0, 0, 0.06);
|
|
150
|
+
--mds-liquid-border-default: rgba(0, 0, 0, 0.1);
|
|
151
|
+
--mds-liquid-border-bright: rgba(0, 0, 0, 0.15);
|
|
152
|
+
|
|
153
|
+
/* Shadows - Softer for light mode */
|
|
154
|
+
--mds-liquid-shadow-raised: 0 2px 8px rgba(0, 0, 0, 0.06);
|
|
155
|
+
--mds-liquid-shadow-floating: 0 8px 24px rgba(0, 0, 0, 0.1);
|
|
156
|
+
--mds-liquid-shadow-elevated: 0 12px 40px rgba(0, 0, 0, 0.12);
|
|
157
|
+
--mds-liquid-shadow-dramatic: 0 16px 56px rgba(0, 0, 0, 0.15);
|
|
158
|
+
|
|
159
|
+
/* Inner glow - Subtle white edge */
|
|
160
|
+
--mds-liquid-glow-edge: inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
|
161
|
+
--mds-liquid-glow-soft: inset 0 1px 1px rgba(255, 255, 255, 0.5);
|
|
162
|
+
|
|
163
|
+
/* Specular - Brighter for light mode */
|
|
164
|
+
--mds-liquid-specular: linear-gradient(
|
|
165
|
+
145deg,
|
|
166
|
+
rgba(255, 255, 255, 0.6) 0%,
|
|
167
|
+
rgba(255, 255, 255, 0.2) 25%,
|
|
168
|
+
rgba(255, 255, 255, 0) 50%
|
|
169
|
+
);
|
|
170
|
+
--mds-liquid-specular-intense: linear-gradient(
|
|
171
|
+
145deg,
|
|
172
|
+
rgba(255, 255, 255, 0.8) 0%,
|
|
173
|
+
rgba(255, 255, 255, 0.3) 30%,
|
|
174
|
+
rgba(255, 255, 255, 0) 60%
|
|
175
|
+
);
|
|
176
|
+
|
|
177
|
+
/* Background gradient */
|
|
178
|
+
--mds-liquid-gradient: linear-gradient(180deg, #f0f2f5 0%, #e4e6e9 100%);
|
|
125
179
|
}
|
|
126
180
|
|
|
127
181
|
|
|
@@ -131,12 +185,12 @@ html[data-theme="light"] {
|
|
|
131
185
|
|
|
132
186
|
.mds-liquid-glass {
|
|
133
187
|
position: relative;
|
|
134
|
-
background: var(--mds-liquid-bg-
|
|
188
|
+
background: var(--mds-liquid-bg-glass);
|
|
135
189
|
backdrop-filter: blur(var(--mds-liquid-blur-md)) saturate(var(--mds-liquid-saturate-default));
|
|
136
190
|
-webkit-backdrop-filter: blur(var(--mds-liquid-blur-md)) saturate(var(--mds-liquid-saturate-default));
|
|
137
191
|
border: 1px solid var(--mds-liquid-border-subtle);
|
|
138
|
-
border-radius:
|
|
139
|
-
box-shadow: var(--mds-liquid-shadow-floating), var(--mds-liquid-glow-
|
|
192
|
+
border-radius: 16px;
|
|
193
|
+
box-shadow: var(--mds-liquid-shadow-floating), var(--mds-liquid-glow-edge);
|
|
140
194
|
transition: var(--mds-liquid-transition);
|
|
141
195
|
overflow: hidden;
|
|
142
196
|
}
|
|
@@ -149,7 +203,6 @@ html[data-theme="light"] {
|
|
|
149
203
|
background: var(--mds-liquid-specular);
|
|
150
204
|
border-radius: inherit;
|
|
151
205
|
pointer-events: none;
|
|
152
|
-
opacity: 0.6;
|
|
153
206
|
z-index: 0;
|
|
154
207
|
}
|
|
155
208
|
|
|
@@ -159,15 +212,17 @@ html[data-theme="light"] {
|
|
|
159
212
|
z-index: 1;
|
|
160
213
|
}
|
|
161
214
|
|
|
162
|
-
/* Hover state -
|
|
215
|
+
/* Hover state - subtle brightness increase */
|
|
163
216
|
.mds-liquid-glass:hover {
|
|
164
217
|
border-color: var(--mds-liquid-border-bright);
|
|
218
|
+
box-shadow: var(--mds-liquid-shadow-elevated), var(--mds-liquid-glow-edge);
|
|
165
219
|
}
|
|
166
220
|
|
|
167
221
|
/* No-hover variant */
|
|
168
222
|
.mds-liquid-glass--no-hover,
|
|
169
223
|
.mds-liquid-glass--no-hover:hover {
|
|
170
224
|
border-color: var(--mds-liquid-border-subtle);
|
|
225
|
+
box-shadow: var(--mds-liquid-shadow-floating), var(--mds-liquid-glow-edge);
|
|
171
226
|
}
|
|
172
227
|
|
|
173
228
|
|
|
@@ -178,25 +233,25 @@ html[data-theme="light"] {
|
|
|
178
233
|
.mds-liquid-glass--xs {
|
|
179
234
|
backdrop-filter: blur(var(--mds-liquid-blur-xs)) saturate(var(--mds-liquid-saturate-subtle));
|
|
180
235
|
-webkit-backdrop-filter: blur(var(--mds-liquid-blur-xs)) saturate(var(--mds-liquid-saturate-subtle));
|
|
181
|
-
border-radius:
|
|
236
|
+
border-radius: 8px;
|
|
182
237
|
}
|
|
183
238
|
|
|
184
239
|
.mds-liquid-glass--sm {
|
|
185
240
|
backdrop-filter: blur(var(--mds-liquid-blur-sm)) saturate(var(--mds-liquid-saturate-subtle));
|
|
186
241
|
-webkit-backdrop-filter: blur(var(--mds-liquid-blur-sm)) saturate(var(--mds-liquid-saturate-subtle));
|
|
187
|
-
border-radius:
|
|
242
|
+
border-radius: 12px;
|
|
188
243
|
}
|
|
189
244
|
|
|
190
245
|
.mds-liquid-glass--lg {
|
|
191
246
|
backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
|
|
192
247
|
-webkit-backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
|
|
193
|
-
border-radius:
|
|
248
|
+
border-radius: 20px;
|
|
194
249
|
}
|
|
195
250
|
|
|
196
251
|
.mds-liquid-glass--xl {
|
|
197
252
|
backdrop-filter: blur(var(--mds-liquid-blur-xl)) saturate(var(--mds-liquid-saturate-vibrant));
|
|
198
253
|
-webkit-backdrop-filter: blur(var(--mds-liquid-blur-xl)) saturate(var(--mds-liquid-saturate-vibrant));
|
|
199
|
-
border-radius:
|
|
254
|
+
border-radius: 24px;
|
|
200
255
|
}
|
|
201
256
|
|
|
202
257
|
|
|
@@ -206,13 +261,13 @@ html[data-theme="light"] {
|
|
|
206
261
|
|
|
207
262
|
/* Navbar */
|
|
208
263
|
.mds-liquid-glass--navbar {
|
|
209
|
-
background: var(--mds-liquid-bg-
|
|
264
|
+
background: var(--mds-liquid-bg-navbar);
|
|
210
265
|
backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
|
|
211
266
|
-webkit-backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
|
|
212
267
|
border: none;
|
|
213
268
|
border-bottom: 1px solid var(--mds-liquid-border-subtle);
|
|
214
269
|
border-radius: 0;
|
|
215
|
-
box-shadow:
|
|
270
|
+
box-shadow: var(--mds-liquid-shadow-raised);
|
|
216
271
|
}
|
|
217
272
|
|
|
218
273
|
.mds-liquid-glass--navbar::before {
|
|
@@ -220,31 +275,27 @@ html[data-theme="light"] {
|
|
|
220
275
|
}
|
|
221
276
|
|
|
222
277
|
.mds-liquid-glass--navbar:hover {
|
|
223
|
-
|
|
278
|
+
box-shadow: var(--mds-liquid-shadow-raised);
|
|
224
279
|
}
|
|
225
280
|
|
|
226
281
|
/* Sidebar */
|
|
227
282
|
.mds-liquid-glass--sidebar {
|
|
228
|
-
background: var(--mds-liquid-bg-
|
|
283
|
+
background: var(--mds-liquid-bg-sidebar);
|
|
229
284
|
backdrop-filter: blur(var(--mds-liquid-blur-xl)) saturate(var(--mds-liquid-saturate-default));
|
|
230
285
|
-webkit-backdrop-filter: blur(var(--mds-liquid-blur-xl)) saturate(var(--mds-liquid-saturate-default));
|
|
231
286
|
border: none;
|
|
232
287
|
border-right: 1px solid var(--mds-liquid-border-subtle);
|
|
233
288
|
border-radius: 0;
|
|
234
|
-
box-shadow:
|
|
289
|
+
box-shadow: var(--mds-liquid-shadow-raised);
|
|
235
290
|
}
|
|
236
291
|
|
|
237
292
|
.mds-liquid-glass--sidebar::before {
|
|
238
293
|
border-radius: 0;
|
|
239
294
|
}
|
|
240
295
|
|
|
241
|
-
.mds-liquid-glass--sidebar:hover {
|
|
242
|
-
transform: none;
|
|
243
|
-
}
|
|
244
|
-
|
|
245
296
|
/* Card */
|
|
246
297
|
.mds-liquid-glass--card {
|
|
247
|
-
background: var(--mds-liquid-bg-
|
|
298
|
+
background: var(--mds-liquid-bg-card);
|
|
248
299
|
backdrop-filter: blur(var(--mds-liquid-blur-md)) saturate(var(--mds-liquid-saturate-default));
|
|
249
300
|
-webkit-backdrop-filter: blur(var(--mds-liquid-blur-md)) saturate(var(--mds-liquid-saturate-default));
|
|
250
301
|
padding: 1.5rem;
|
|
@@ -252,21 +303,17 @@ html[data-theme="light"] {
|
|
|
252
303
|
|
|
253
304
|
/* Modal */
|
|
254
305
|
.mds-liquid-glass--modal {
|
|
255
|
-
background: var(--mds-liquid-bg-
|
|
256
|
-
backdrop-filter: blur(var(--mds-liquid-blur-
|
|
257
|
-
-webkit-backdrop-filter: blur(var(--mds-liquid-blur-
|
|
258
|
-
border-radius:
|
|
259
|
-
box-shadow: var(--mds-liquid-shadow-
|
|
306
|
+
background: var(--mds-liquid-bg-glass-thick);
|
|
307
|
+
backdrop-filter: blur(var(--mds-liquid-blur-xl)) saturate(var(--mds-liquid-saturate-vibrant));
|
|
308
|
+
-webkit-backdrop-filter: blur(var(--mds-liquid-blur-xl)) saturate(var(--mds-liquid-saturate-vibrant));
|
|
309
|
+
border-radius: 20px;
|
|
310
|
+
box-shadow: var(--mds-liquid-shadow-dramatic), var(--mds-liquid-glow-edge);
|
|
260
311
|
}
|
|
261
312
|
|
|
262
313
|
.mds-liquid-glass--modal::before {
|
|
263
314
|
background: var(--mds-liquid-specular-intense);
|
|
264
315
|
}
|
|
265
316
|
|
|
266
|
-
.mds-liquid-glass--modal:hover {
|
|
267
|
-
transform: none;
|
|
268
|
-
}
|
|
269
|
-
|
|
270
317
|
/* Modal Overlay */
|
|
271
318
|
.mds-liquid-glass--overlay {
|
|
272
319
|
background: var(--mds-liquid-bg-overlay);
|
|
@@ -283,77 +330,63 @@ html[data-theme="light"] {
|
|
|
283
330
|
|
|
284
331
|
/* Input */
|
|
285
332
|
.mds-liquid-glass--input {
|
|
286
|
-
background: var(--mds-liquid-bg-
|
|
333
|
+
background: var(--mds-liquid-bg-input);
|
|
287
334
|
backdrop-filter: blur(var(--mds-liquid-blur-sm)) saturate(var(--mds-liquid-saturate-subtle));
|
|
288
335
|
-webkit-backdrop-filter: blur(var(--mds-liquid-blur-sm)) saturate(var(--mds-liquid-saturate-subtle));
|
|
289
|
-
border-radius:
|
|
290
|
-
box-shadow: var(--mds-liquid-
|
|
336
|
+
border-radius: 10px;
|
|
337
|
+
box-shadow: var(--mds-liquid-glow-soft);
|
|
291
338
|
padding: 0.75rem 1rem;
|
|
292
339
|
}
|
|
293
340
|
|
|
294
341
|
.mds-liquid-glass--input:focus {
|
|
295
|
-
border-color: var(--mds-
|
|
296
|
-
box-shadow: var(--mds-liquid-
|
|
342
|
+
border-color: var(--mds-color-brand-primary);
|
|
343
|
+
box-shadow: var(--mds-liquid-glow-soft), 0 0 0 3px rgba(0, 85, 255, 0.2);
|
|
297
344
|
outline: none;
|
|
298
345
|
}
|
|
299
346
|
|
|
300
|
-
.mds-liquid-glass--input:hover {
|
|
301
|
-
transform: none;
|
|
302
|
-
}
|
|
303
|
-
|
|
304
347
|
/* Button */
|
|
305
348
|
.mds-liquid-glass--button {
|
|
306
|
-
background: var(--mds-liquid-bg-
|
|
349
|
+
background: var(--mds-liquid-bg-button);
|
|
307
350
|
backdrop-filter: blur(var(--mds-liquid-blur-xs)) saturate(var(--mds-liquid-saturate-default));
|
|
308
351
|
-webkit-backdrop-filter: blur(var(--mds-liquid-blur-xs)) saturate(var(--mds-liquid-saturate-default));
|
|
309
|
-
border-radius:
|
|
310
|
-
box-shadow: var(--mds-liquid-shadow-raised);
|
|
352
|
+
border-radius: 10px;
|
|
353
|
+
box-shadow: var(--mds-liquid-shadow-raised), var(--mds-liquid-glow-soft);
|
|
311
354
|
padding: 0.5rem 1rem;
|
|
312
355
|
cursor: pointer;
|
|
313
356
|
transition: var(--mds-liquid-transition-fast);
|
|
314
357
|
}
|
|
315
358
|
|
|
316
359
|
.mds-liquid-glass--button:hover {
|
|
317
|
-
background: var(--mds-liquid-bg-
|
|
360
|
+
background: var(--mds-liquid-bg-button-hover);
|
|
318
361
|
border-color: var(--mds-liquid-border-bright);
|
|
319
|
-
transform: translateY(-1px);
|
|
320
362
|
}
|
|
321
363
|
|
|
322
364
|
.mds-liquid-glass--button:active {
|
|
323
|
-
|
|
324
|
-
box-shadow: var(--mds-liquid-shadow-raised);
|
|
365
|
+
box-shadow: var(--mds-liquid-glow-soft);
|
|
325
366
|
}
|
|
326
367
|
|
|
327
368
|
/* Dropdown */
|
|
328
369
|
.mds-liquid-glass--dropdown {
|
|
329
|
-
background: var(--mds-liquid-bg-
|
|
370
|
+
background: var(--mds-liquid-bg-glass-thick);
|
|
330
371
|
backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
|
|
331
372
|
-webkit-backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
|
|
332
|
-
border-radius:
|
|
373
|
+
border-radius: 14px;
|
|
333
374
|
box-shadow: var(--mds-liquid-shadow-elevated);
|
|
334
375
|
padding: 0.5rem;
|
|
335
376
|
}
|
|
336
377
|
|
|
337
|
-
.mds-liquid-glass--dropdown:hover {
|
|
338
|
-
transform: none;
|
|
339
|
-
}
|
|
340
|
-
|
|
341
378
|
/* Table */
|
|
342
379
|
.mds-liquid-glass--table {
|
|
343
|
-
background: var(--mds-liquid-bg-
|
|
380
|
+
background: var(--mds-liquid-bg-glass);
|
|
344
381
|
backdrop-filter: blur(var(--mds-liquid-blur-sm)) saturate(var(--mds-liquid-saturate-subtle));
|
|
345
382
|
-webkit-backdrop-filter: blur(var(--mds-liquid-blur-sm)) saturate(var(--mds-liquid-saturate-subtle));
|
|
346
|
-
border-radius:
|
|
383
|
+
border-radius: 16px;
|
|
347
384
|
overflow: hidden;
|
|
348
385
|
}
|
|
349
386
|
|
|
350
|
-
.mds-liquid-glass--table:hover {
|
|
351
|
-
transform: none;
|
|
352
|
-
}
|
|
353
|
-
|
|
354
387
|
/* Footer */
|
|
355
388
|
.mds-liquid-glass--footer {
|
|
356
|
-
background: var(--mds-liquid-bg-
|
|
389
|
+
background: var(--mds-liquid-bg-navbar);
|
|
357
390
|
backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
|
|
358
391
|
-webkit-backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-default));
|
|
359
392
|
border: none;
|
|
@@ -365,26 +398,18 @@ html[data-theme="light"] {
|
|
|
365
398
|
border-radius: 0;
|
|
366
399
|
}
|
|
367
400
|
|
|
368
|
-
.mds-liquid-glass--footer:hover {
|
|
369
|
-
transform: none;
|
|
370
|
-
}
|
|
371
|
-
|
|
372
401
|
/* TOC (Table of Contents) */
|
|
373
402
|
.mds-liquid-glass--toc {
|
|
374
|
-
background: var(--mds-liquid-bg-
|
|
403
|
+
background: var(--mds-liquid-bg-card);
|
|
375
404
|
backdrop-filter: blur(var(--mds-liquid-blur-md)) saturate(var(--mds-liquid-saturate-subtle));
|
|
376
405
|
-webkit-backdrop-filter: blur(var(--mds-liquid-blur-md)) saturate(var(--mds-liquid-saturate-subtle));
|
|
377
|
-
border-radius:
|
|
406
|
+
border-radius: 14px;
|
|
378
407
|
padding: 1rem;
|
|
379
408
|
}
|
|
380
409
|
|
|
381
|
-
.mds-liquid-glass--toc:hover {
|
|
382
|
-
transform: none;
|
|
383
|
-
}
|
|
384
|
-
|
|
385
410
|
/* Badge */
|
|
386
411
|
.mds-liquid-glass--badge {
|
|
387
|
-
background: var(--mds-liquid-bg-
|
|
412
|
+
background: var(--mds-liquid-bg-button);
|
|
388
413
|
backdrop-filter: blur(var(--mds-liquid-blur-xs)) saturate(var(--mds-liquid-saturate-subtle));
|
|
389
414
|
-webkit-backdrop-filter: blur(var(--mds-liquid-blur-xs)) saturate(var(--mds-liquid-saturate-subtle));
|
|
390
415
|
border-radius: 999px;
|
|
@@ -393,52 +418,14 @@ html[data-theme="light"] {
|
|
|
393
418
|
font-size: 0.75rem;
|
|
394
419
|
}
|
|
395
420
|
|
|
396
|
-
.mds-liquid-glass--badge:hover {
|
|
397
|
-
transform: none;
|
|
398
|
-
}
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
/* =========================
|
|
402
|
-
Intensity Variants
|
|
403
|
-
========================= */
|
|
404
|
-
|
|
405
|
-
/* Subtle - less blur, less saturation */
|
|
406
|
-
.mds-liquid-glass--subtle {
|
|
407
|
-
backdrop-filter: blur(var(--mds-liquid-blur-sm)) saturate(var(--mds-liquid-saturate-subtle));
|
|
408
|
-
-webkit-backdrop-filter: blur(var(--mds-liquid-blur-sm)) saturate(var(--mds-liquid-saturate-subtle));
|
|
409
|
-
box-shadow: var(--mds-liquid-shadow-raised);
|
|
410
|
-
}
|
|
411
|
-
|
|
412
|
-
.mds-liquid-glass--subtle::before {
|
|
413
|
-
opacity: 0.3;
|
|
414
|
-
}
|
|
415
|
-
|
|
416
|
-
/* Vibrant - more blur, more saturation */
|
|
417
|
-
.mds-liquid-glass--vibrant {
|
|
418
|
-
backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-vibrant));
|
|
419
|
-
-webkit-backdrop-filter: blur(var(--mds-liquid-blur-lg)) saturate(var(--mds-liquid-saturate-vibrant));
|
|
420
|
-
box-shadow: var(--mds-liquid-shadow-elevated);
|
|
421
|
-
}
|
|
422
|
-
|
|
423
|
-
.mds-liquid-glass--vibrant::before {
|
|
424
|
-
background: var(--mds-liquid-specular-intense);
|
|
425
|
-
opacity: 0.8;
|
|
426
|
-
}
|
|
427
|
-
|
|
428
421
|
|
|
429
422
|
/* =========================
|
|
430
423
|
Background Utilities
|
|
431
424
|
========================= */
|
|
432
425
|
|
|
433
426
|
.mds-liquid-bg-gradient {
|
|
434
|
-
background: var(--mds-liquid-gradient
|
|
427
|
+
background: var(--mds-liquid-gradient) !important;
|
|
435
428
|
background-attachment: fixed !important;
|
|
436
|
-
background-repeat: no-repeat !important;
|
|
437
|
-
background-size: 100% 100% !important;
|
|
438
|
-
}
|
|
439
|
-
|
|
440
|
-
html[data-theme="light"] .mds-liquid-bg-gradient {
|
|
441
|
-
background: var(--mds-liquid-gradient-light) !important;
|
|
442
429
|
}
|
|
443
430
|
|
|
444
431
|
|
|
@@ -453,30 +440,20 @@ html[data-theme="light"] .mds-liquid-bg-gradient {
|
|
|
453
440
|
.mds-liquid-glass--input {
|
|
454
441
|
transition: none !important;
|
|
455
442
|
}
|
|
456
|
-
|
|
457
|
-
.mds-liquid-glass:hover,
|
|
458
|
-
.mds-liquid-glass--button:hover {
|
|
459
|
-
transform: none !important;
|
|
460
|
-
}
|
|
461
443
|
}
|
|
462
444
|
|
|
463
445
|
/* High contrast */
|
|
464
446
|
@media (prefers-contrast: high) {
|
|
465
447
|
.mds-liquid-glass {
|
|
466
|
-
background:
|
|
448
|
+
background: var(--mds-color-background-secondary) !important;
|
|
467
449
|
backdrop-filter: none !important;
|
|
468
450
|
-webkit-backdrop-filter: none !important;
|
|
469
|
-
border: 2px solid
|
|
451
|
+
border: 2px solid var(--mds-color-text-primary) !important;
|
|
470
452
|
}
|
|
471
453
|
|
|
472
454
|
.mds-liquid-glass::before {
|
|
473
455
|
display: none !important;
|
|
474
456
|
}
|
|
475
|
-
|
|
476
|
-
html[data-theme="light"] .mds-liquid-glass {
|
|
477
|
-
background: rgba(255, 255, 255, 0.95) !important;
|
|
478
|
-
border: 2px solid rgba(0, 0, 0, 0.5) !important;
|
|
479
|
-
}
|
|
480
457
|
}
|
|
481
458
|
|
|
482
459
|
|
|
@@ -484,13 +461,8 @@ html[data-theme="light"] .mds-liquid-bg-gradient {
|
|
|
484
461
|
Browser Fallback
|
|
485
462
|
========================= */
|
|
486
463
|
|
|
487
|
-
/* Fallback for browsers without backdrop-filter support */
|
|
488
464
|
@supports not (backdrop-filter: blur(1px)) {
|
|
489
465
|
.mds-liquid-glass {
|
|
490
|
-
background:
|
|
491
|
-
}
|
|
492
|
-
|
|
493
|
-
html[data-theme="light"] .mds-liquid-glass {
|
|
494
|
-
background: rgba(255, 255, 255, 0.9);
|
|
466
|
+
background: var(--mds-color-background-secondary);
|
|
495
467
|
}
|
|
496
468
|
}
|