newtil-css 0.2.99 → 0.3.0
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/components.css +1 -1430
- package/dist/style.css +1 -13106
- package/dist/utils.css +1 -14027
- package/package.json +1 -1
package/dist/components.css
CHANGED
|
@@ -1,1430 +1 @@
|
|
|
1
|
-
|
|
2
|
-
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
|
|
3
|
-
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
|
|
4
|
-
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
|
|
5
|
-
/* ===== NEWTIL CSS COMPONENTS ===== */
|
|
6
|
-
/* Material 3 Components */
|
|
7
|
-
/*
|
|
8
|
-
=== Google Material Icons - Essential 버전 ===
|
|
9
|
-
총 60개 핵심 아이콘
|
|
10
|
-
크기: ~3180바이트 (압축 전)
|
|
11
|
-
|
|
12
|
-
실제 프로젝트에서 자주 사용하는 핵심 아이콘들만 선별했습니다.
|
|
13
|
-
더 많은 아이콘이 필요하면 material-icons-github.css를 사용하세요.
|
|
14
|
-
|
|
15
|
-
사용법:
|
|
16
|
-
<i class="n-icon icon:home"></i>
|
|
17
|
-
<button class="n-btn n-icon icon:search">검색</button>
|
|
18
|
-
*/
|
|
19
|
-
/* Material Icons 폰트 로드 */
|
|
20
|
-
/* === NAVIGATION === */
|
|
21
|
-
.icon\:home::before {
|
|
22
|
-
content: "\e88a";
|
|
23
|
-
}
|
|
24
|
-
.icon\:menu::before {
|
|
25
|
-
content: "\e5d2";
|
|
26
|
-
}
|
|
27
|
-
.icon\:close::before {
|
|
28
|
-
content: "\e5cd";
|
|
29
|
-
}
|
|
30
|
-
.icon\:arrow_back::before {
|
|
31
|
-
content: "\e5c4";
|
|
32
|
-
}
|
|
33
|
-
.icon\:arrow_forward::before {
|
|
34
|
-
content: "\e5c8";
|
|
35
|
-
}
|
|
36
|
-
.icon\:expand_more::before {
|
|
37
|
-
content: "\e5cf";
|
|
38
|
-
}
|
|
39
|
-
.icon\:expand_less::before {
|
|
40
|
-
content: "\e5ce";
|
|
41
|
-
}
|
|
42
|
-
.icon\:chevron_left::before {
|
|
43
|
-
content: "\e5cb";
|
|
44
|
-
}
|
|
45
|
-
.icon\:chevron_right::before {
|
|
46
|
-
content: "\e5cc";
|
|
47
|
-
}
|
|
48
|
-
.icon\:more_vert::before {
|
|
49
|
-
content: "\e5d4";
|
|
50
|
-
}
|
|
51
|
-
.icon\:more_horiz::before {
|
|
52
|
-
content: "\e5d3";
|
|
53
|
-
}
|
|
54
|
-
.icon\:refresh::before {
|
|
55
|
-
content: "\e5d5";
|
|
56
|
-
}
|
|
57
|
-
.icon\:settings::before {
|
|
58
|
-
content: "\e8b8";
|
|
59
|
-
}
|
|
60
|
-
.icon\:apps::before {
|
|
61
|
-
content: "\e5c3";
|
|
62
|
-
}
|
|
63
|
-
.icon\:launch::before {
|
|
64
|
-
content: "\e895";
|
|
65
|
-
}
|
|
66
|
-
/* === ACTIONS === */
|
|
67
|
-
.icon\:add::before {
|
|
68
|
-
content: "\e145";
|
|
69
|
-
}
|
|
70
|
-
.icon\:remove::before {
|
|
71
|
-
content: "\e15b";
|
|
72
|
-
}
|
|
73
|
-
.icon\:edit::before {
|
|
74
|
-
content: "\e3c9";
|
|
75
|
-
}
|
|
76
|
-
.icon\:delete::before {
|
|
77
|
-
content: "\e872";
|
|
78
|
-
}
|
|
79
|
-
.icon\:save::before {
|
|
80
|
-
content: "\e161";
|
|
81
|
-
}
|
|
82
|
-
.icon\:check::before {
|
|
83
|
-
content: "\e5ca";
|
|
84
|
-
}
|
|
85
|
-
.icon\:clear::before {
|
|
86
|
-
content: "\e14c";
|
|
87
|
-
}
|
|
88
|
-
.icon\:cancel::before {
|
|
89
|
-
content: "\e5c9";
|
|
90
|
-
}
|
|
91
|
-
.icon\:done::before {
|
|
92
|
-
content: "\e876";
|
|
93
|
-
}
|
|
94
|
-
.icon\:search::before {
|
|
95
|
-
content: "\e8b6";
|
|
96
|
-
}
|
|
97
|
-
.icon\:share::before {
|
|
98
|
-
content: "\e80d";
|
|
99
|
-
}
|
|
100
|
-
.icon\:download::before {
|
|
101
|
-
content: "\e2c4";
|
|
102
|
-
}
|
|
103
|
-
.icon\:upload::before {
|
|
104
|
-
content: "\e2c6";
|
|
105
|
-
}
|
|
106
|
-
.icon\:copy::before {
|
|
107
|
-
content: "\e14d";
|
|
108
|
-
}
|
|
109
|
-
.icon\:visibility::before {
|
|
110
|
-
content: "\e8f4";
|
|
111
|
-
}
|
|
112
|
-
.icon\:visibility_off::before {
|
|
113
|
-
content: "\e8f5";
|
|
114
|
-
}
|
|
115
|
-
.icon\:lock::before {
|
|
116
|
-
content: "\e897";
|
|
117
|
-
}
|
|
118
|
-
.icon\:lock_open::before {
|
|
119
|
-
content: "\e898";
|
|
120
|
-
}
|
|
121
|
-
.icon\:sync::before {
|
|
122
|
-
content: "\e627";
|
|
123
|
-
}
|
|
124
|
-
.icon\:info::before {
|
|
125
|
-
content: "\e88e";
|
|
126
|
-
}
|
|
127
|
-
/* === COMMUNICATION === */
|
|
128
|
-
.icon\:email::before {
|
|
129
|
-
content: "\e0be";
|
|
130
|
-
}
|
|
131
|
-
.icon\:phone::before {
|
|
132
|
-
content: "\e0cd";
|
|
133
|
-
}
|
|
134
|
-
.icon\:chat::before {
|
|
135
|
-
content: "\e0b7";
|
|
136
|
-
}
|
|
137
|
-
.icon\:notifications::before {
|
|
138
|
-
content: "\e7f4";
|
|
139
|
-
}
|
|
140
|
-
.icon\:send::before {
|
|
141
|
-
content: "\e163";
|
|
142
|
-
}
|
|
143
|
-
.icon\:reply::before {
|
|
144
|
-
content: "\e15e";
|
|
145
|
-
}
|
|
146
|
-
.icon\:help::before {
|
|
147
|
-
content: "\e887";
|
|
148
|
-
}
|
|
149
|
-
.icon\:feedback::before {
|
|
150
|
-
content: "\e87f";
|
|
151
|
-
}
|
|
152
|
-
/* === MEDIA === */
|
|
153
|
-
.icon\:play_arrow::before {
|
|
154
|
-
content: "\e037";
|
|
155
|
-
}
|
|
156
|
-
.icon\:pause::before {
|
|
157
|
-
content: "\e034";
|
|
158
|
-
}
|
|
159
|
-
.icon\:stop::before {
|
|
160
|
-
content: "\e047";
|
|
161
|
-
}
|
|
162
|
-
.icon\:volume_up::before {
|
|
163
|
-
content: "\e050";
|
|
164
|
-
}
|
|
165
|
-
.icon\:volume_off::before {
|
|
166
|
-
content: "\e04f";
|
|
167
|
-
}
|
|
168
|
-
.icon\:mic::before {
|
|
169
|
-
content: "\e029";
|
|
170
|
-
}
|
|
171
|
-
.icon\:mic_off::before {
|
|
172
|
-
content: "\e02b";
|
|
173
|
-
}
|
|
174
|
-
/* === FILES === */
|
|
175
|
-
.icon\:folder::before {
|
|
176
|
-
content: "\e2c7";
|
|
177
|
-
}
|
|
178
|
-
.icon\:folder_open::before {
|
|
179
|
-
content: "\e2c8";
|
|
180
|
-
}
|
|
181
|
-
.icon\:attach_file::before {
|
|
182
|
-
content: "\e226";
|
|
183
|
-
}
|
|
184
|
-
.icon\:cloud::before {
|
|
185
|
-
content: "\e2bd";
|
|
186
|
-
}
|
|
187
|
-
.icon\:description::before {
|
|
188
|
-
content: "\e873";
|
|
189
|
-
}
|
|
190
|
-
/* === SOCIAL === */
|
|
191
|
-
.icon\:person::before {
|
|
192
|
-
content: "\e7fd";
|
|
193
|
-
}
|
|
194
|
-
.icon\:people::before {
|
|
195
|
-
content: "\e7fb";
|
|
196
|
-
}
|
|
197
|
-
.icon\:favorite::before {
|
|
198
|
-
content: "\e87d";
|
|
199
|
-
}
|
|
200
|
-
.icon\:star::before {
|
|
201
|
-
content: "\e838";
|
|
202
|
-
}
|
|
203
|
-
.icon\:thumb_up::before {
|
|
204
|
-
content: "\e8dc";
|
|
205
|
-
}
|
|
206
|
-
:root {
|
|
207
|
-
--icon-size: 24px;
|
|
208
|
-
--icon-family: "Material Symbols Outlined";
|
|
209
|
-
--icon-color: var(--color-base-9);
|
|
210
|
-
--icon-fill: 0;
|
|
211
|
-
--icon-weight: 400;
|
|
212
|
-
--icon-grade: 0;
|
|
213
|
-
--icon-optical-size: 24;
|
|
214
|
-
}
|
|
215
|
-
@media (prefers-color-scheme: dark) {
|
|
216
|
-
:root {
|
|
217
|
-
--icon-color: var(--color-base-2);
|
|
218
|
-
}
|
|
219
|
-
}
|
|
220
|
-
.m3-icon {
|
|
221
|
-
display: inline-flex;
|
|
222
|
-
width: var(--icon-size);
|
|
223
|
-
height: var(--icon-size);
|
|
224
|
-
overflow: hidden;
|
|
225
|
-
align-items: center;
|
|
226
|
-
/* justify-content: center; */
|
|
227
|
-
|
|
228
|
-
visibility: visible;
|
|
229
|
-
|
|
230
|
-
transition: all 0.2s ease-in-out;
|
|
231
|
-
|
|
232
|
-
&::before {
|
|
233
|
-
|
|
234
|
-
flex-shrink: 0;
|
|
235
|
-
|
|
236
|
-
display: inline-flex;
|
|
237
|
-
align-items: center;
|
|
238
|
-
vertical-align: top;
|
|
239
|
-
|
|
240
|
-
width: var(--icon-size);
|
|
241
|
-
height: var(--icon-size);
|
|
242
|
-
overflow: hidden;
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
color: inherit;
|
|
246
|
-
font-family: var(--icon-family);
|
|
247
|
-
font-size: var(--icon-size);
|
|
248
|
-
font-variation-settings:
|
|
249
|
-
"FILL" var(--icon-fill, 0),
|
|
250
|
-
"wght" var(--icon-weight, 400),
|
|
251
|
-
"GRAD" var(--icon-grade, 0),
|
|
252
|
-
"OPSZ" var(--icon-optical-size, 24);
|
|
253
|
-
}
|
|
254
|
-
|
|
255
|
-
&.hover:not(.n-deco):hover {
|
|
256
|
-
border-radius: 50%;
|
|
257
|
-
background-color: var(--color-base-3);
|
|
258
|
-
transform: scale(1.4);
|
|
259
|
-
|
|
260
|
-
&::before {
|
|
261
|
-
transform: scale(0.72);
|
|
262
|
-
}
|
|
263
|
-
}
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
/* === style =============================== */
|
|
267
|
-
&.icon-style\:outlined::before { --icon-family: "Material Symbols Outlined"; }
|
|
268
|
-
&.icon-style\:rounded::before { --icon-family: "Material Symbols Rounded"; }
|
|
269
|
-
&.icon-style\:sharp::before { --icon-family: "Material Symbols Sharp"; }
|
|
270
|
-
|
|
271
|
-
/* ==== variation/filled =============================== */
|
|
272
|
-
&.icon-filled\:0::before { --icon-fill: 0; }
|
|
273
|
-
&.icon-filled\:1::before { --icon-fill: 1; }
|
|
274
|
-
|
|
275
|
-
/* ==== variation/weight =============================== */
|
|
276
|
-
&.icon-weight\:100::before { --icon-weight: 100; }
|
|
277
|
-
&.icon-weight\:200::before { --icon-weight: 200; }
|
|
278
|
-
&.icon-weight\:300::before { --icon-weight: 300; }
|
|
279
|
-
&.icon-weight\:400::before { --icon-weight: 400; }
|
|
280
|
-
&.icon-weight\:500::before { --icon-weight: 500; }
|
|
281
|
-
&.icon-weight\:600::before { --icon-weight: 600; }
|
|
282
|
-
&.icon-weight\:700::before { --icon-weight: 700; }
|
|
283
|
-
|
|
284
|
-
/* ==== variation/grade =============================== */
|
|
285
|
-
&.icon-grade\:-25::before { --icon-grade: -25; }
|
|
286
|
-
&.icon-grade\:0::before { --icon-grade: 0; }
|
|
287
|
-
&.icon-grade\:200::before { --icon-grade: 200; }
|
|
288
|
-
|
|
289
|
-
/* ==== variation/optical-size =============================== */
|
|
290
|
-
&.icon-optical-size\:20::before { --icon-optical-size: 20px; }
|
|
291
|
-
&.icon-optical-size\:24::before { --icon-optical-size: 24px; }
|
|
292
|
-
&.icon-optical-size\:40::before { --icon-optical-size: 40px; }
|
|
293
|
-
&.icon-optical-size\:48::before { --icon-optical-size: 48px; }
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
/* === color ======================================= */
|
|
297
|
-
&.icon-color\:main-1::before { color: var(--color-main-1); }
|
|
298
|
-
&.icon-color\:main-2::before { color: var(--color-main-2); }
|
|
299
|
-
&.icon-color\:main-3::before { color: var(--color-main-3); }
|
|
300
|
-
&.icon-color\:sub-1::before { color: var(--color-sub-1); }
|
|
301
|
-
&.icon-color\:sub-2::before { color: var(--color-sub-2); }
|
|
302
|
-
&.icon-color\:sub-3::before { color: var(--color-sub-3); }
|
|
303
|
-
&.icon-color\:accent-1::before { color: var(--color-accent-1); }
|
|
304
|
-
&.icon-color\:accent-2::before { color: var(--color-accent-2); }
|
|
305
|
-
&.icon-color\:accent-3::before { color: var(--color-accent-3); }
|
|
306
|
-
&.icon-color\:base-1::before { color: var(--color-base-1); }
|
|
307
|
-
&.icon-color\:base-2::before { color: var(--color-base-2); }
|
|
308
|
-
&.icon-color\:base-3::before { color: var(--color-base-3); }
|
|
309
|
-
&.icon-color\:base-4::before { color: var(--color-base-4); }
|
|
310
|
-
&.icon-color\:base-5::before { color: var(--color-base-5); }
|
|
311
|
-
&.icon-color\:base-6::before { color: var(--color-base-6); }
|
|
312
|
-
&.icon-color\:base-7::before { color: var(--color-base-7); }
|
|
313
|
-
&.icon-color\:base-8::before { color: var(--color-base-8); }
|
|
314
|
-
&.icon-color\:base-9::before { color: var(--color-base-9); }
|
|
315
|
-
&.icon-color\:base-10::before { color: var(--color-base-10); }
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
/* ---- icon-size ------------------------------------------------- */
|
|
319
|
-
&.icon-size\:20 { --icon-size: 20px; }
|
|
320
|
-
&.icon-size\:24 { --icon-size: 24px; }
|
|
321
|
-
&.icon-size\:40 { --icon-size: 40px; }
|
|
322
|
-
&.icon-size\:48 { --icon-size: 48px; }
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
}
|
|
326
|
-
@media (min-width: 640px) {
|
|
327
|
-
|
|
328
|
-
}
|
|
329
|
-
@media (min-width: 768px) {
|
|
330
|
-
|
|
331
|
-
}
|
|
332
|
-
@media (min-width: 1024px) {
|
|
333
|
-
|
|
334
|
-
}
|
|
335
|
-
@media (min-width: 1280px) {
|
|
336
|
-
|
|
337
|
-
}
|
|
338
|
-
/* ====== M3 Button options (spec overview) =====================
|
|
339
|
-
Size : Small (default) | XS | M | L | XL
|
|
340
|
-
Shape : Round (default) | Square
|
|
341
|
-
Color : Filled (default) | Elevated | Tonal | Outlined | Text
|
|
342
|
-
State : Enabled (default) | Disabled | Hover | Focus | Active(Pressed) */
|
|
343
|
-
/* ================Variable=====================*/
|
|
344
|
-
.m3-btn {
|
|
345
|
-
/* boxing */
|
|
346
|
-
--btn-gap: 2px;
|
|
347
|
-
--btn-margin-top: 5px;
|
|
348
|
-
--btn-fill: 1;
|
|
349
|
-
|
|
350
|
-
/* color */
|
|
351
|
-
--btn-background: rgba(var(--rgb-main-2), 1);
|
|
352
|
-
--btn-color: rgb(var(--rgb-base-1));
|
|
353
|
-
--btn-box-shadow: none;
|
|
354
|
-
--btn-border: 0;
|
|
355
|
-
--btn-outline: none;
|
|
356
|
-
--btn-outline-offset: 0px;
|
|
357
|
-
--btn-border-radius: 999px;
|
|
358
|
-
|
|
359
|
-
/* size */
|
|
360
|
-
--btn-height: var(--space-22);
|
|
361
|
-
--btn-padding: 0 var(--space-10);
|
|
362
|
-
|
|
363
|
-
/* content */
|
|
364
|
-
--btn-font-size: var(--space-8);
|
|
365
|
-
--btn-font-weight: var(--font-weight-medium);
|
|
366
|
-
--btn-line-height: var(--space-13);
|
|
367
|
-
--btn-letter-spacing: 0.1px;
|
|
368
|
-
}
|
|
369
|
-
/* ================Dark Mode===================*/
|
|
370
|
-
@media (prefers-color-scheme: dark) {
|
|
371
|
-
.m3-btn {
|
|
372
|
-
/* color - default dark mode variables */
|
|
373
|
-
--btn-background-dark: rgba(var(--rgb-main-2), 1);
|
|
374
|
-
--btn-color-dark: rgb(var(--rgb-base-1));
|
|
375
|
-
--btn-box-shadow-dark: none;
|
|
376
|
-
--btn-border-dark: 0;
|
|
377
|
-
--btn-outline-dark: none;
|
|
378
|
-
}
|
|
379
|
-
|
|
380
|
-
.m3-btn:disabled,
|
|
381
|
-
.m3-btn.btn-state\:disabled {
|
|
382
|
-
--btn-background-dark: rgba(var(--rgb-main-3), 0.3);
|
|
383
|
-
--btn-color-dark: rgba(var(--rgb-main-1), 0.3);
|
|
384
|
-
--btn-box-shadow-dark: none;
|
|
385
|
-
--btn-border-dark: 0;
|
|
386
|
-
--btn-outline-dark: none;
|
|
387
|
-
}
|
|
388
|
-
|
|
389
|
-
.m3-btn:focus:not(:active),
|
|
390
|
-
.m3-btn.btn-state\:focus:not(:active) {
|
|
391
|
-
--btn-border-dark: 2px solid rgb(var(--rgb-base-1));
|
|
392
|
-
--btn-outline-dark: 2px solid rgb(var(--rgb-main-2));
|
|
393
|
-
}
|
|
394
|
-
|
|
395
|
-
.m3-btn:hover,
|
|
396
|
-
.m3-btn.btn-state\:hover {
|
|
397
|
-
--btn-background-dark: rgba(var(--rgb-main-1), 1);
|
|
398
|
-
}
|
|
399
|
-
|
|
400
|
-
.m3-btn:active,
|
|
401
|
-
.m3-btn.btn-state\:active {
|
|
402
|
-
--btn-background-dark: radial-gradient(107% 112% at 65% 103%,
|
|
403
|
-
rgba(var(--rgb-main-2), 1) 65%,
|
|
404
|
-
rgba(var(--rgb-main-1), 1) 66%);
|
|
405
|
-
--btn-border-radius-dark: var(--radius-lg);
|
|
406
|
-
}
|
|
407
|
-
|
|
408
|
-
.btn\:elevated {
|
|
409
|
-
/* boxing */
|
|
410
|
-
--btn-background-dark: rgba(var(--rgb-main-3), 0.3);
|
|
411
|
-
--btn-box-shadow-dark: 0px 1px 2px 0.5px rgba(var(--rgb-base-10), 1);
|
|
412
|
-
|
|
413
|
-
/* content */
|
|
414
|
-
--btn-color-dark: rgb(var(--rgb-main-1));
|
|
415
|
-
}
|
|
416
|
-
|
|
417
|
-
.btn\:tonal {
|
|
418
|
-
--btn-background-dark: rgba(var(--rgb-main-2), 0.5);
|
|
419
|
-
--btn-color-dark: rgb(var(--rgb-main-1));
|
|
420
|
-
}
|
|
421
|
-
|
|
422
|
-
.btn\:outlined {
|
|
423
|
-
--btn-background-dark: none;
|
|
424
|
-
--btn-color-dark: rgb(var(--rgb-main-1));
|
|
425
|
-
--btn-outline-dark: 0.2px solid rgba(var(--rgb-main-3), 0.7);
|
|
426
|
-
}
|
|
427
|
-
|
|
428
|
-
.btn\:text {
|
|
429
|
-
--btn-background-dark: none;
|
|
430
|
-
--btn-color-dark: rgb(var(--rgb-main-2));
|
|
431
|
-
}
|
|
432
|
-
|
|
433
|
-
/* ----------Elevated State------------ */
|
|
434
|
-
.btn\:elevated:focus:not(:active),
|
|
435
|
-
.btn\:elevated.btn-state\:focus:not(:active) {
|
|
436
|
-
--btn-border-dark: 2px solid rgb(var(--rgb-main-3));
|
|
437
|
-
--btn-outline-dark: 2px solid rgb(var(--rgb-base-1));
|
|
438
|
-
}
|
|
439
|
-
|
|
440
|
-
.btn\:elevated:hover,
|
|
441
|
-
.btn\:elevated.btn-state\:hover {
|
|
442
|
-
--btn-background-dark: rgba(var(--rgb-main-2), 0.3);
|
|
443
|
-
}
|
|
444
|
-
|
|
445
|
-
.btn\:elevated:active,
|
|
446
|
-
.btn\:elevated.btn-state\:active {
|
|
447
|
-
--btn-background-dark: radial-gradient(144% 100% at 80% 94%,
|
|
448
|
-
rgba(var(--rgb-main-3), 0.5) 65%,
|
|
449
|
-
rgba(var(--rgb-main-3), 1) 66%);
|
|
450
|
-
--btn-border-radius-dark: var(--radius-lg);
|
|
451
|
-
}
|
|
452
|
-
|
|
453
|
-
/* ----------Tonal State---------------- */
|
|
454
|
-
.btn\:tonal:focus:not(:active),
|
|
455
|
-
.btn\:tonal.btn-state\:focus:not(:active) {
|
|
456
|
-
--btn-border-dark: 2px solid rgb(var(--rgb-base-1));
|
|
457
|
-
--btn-outline-dark: 3px solid rgba(var(--rgb-main-2), 0.5);
|
|
458
|
-
}
|
|
459
|
-
|
|
460
|
-
.btn\:tonal:hover,
|
|
461
|
-
.btn\:tonal.btn-state\:hover {
|
|
462
|
-
--btn-background-dark: rgba(var(--rgb-main-3), 0.7);
|
|
463
|
-
}
|
|
464
|
-
|
|
465
|
-
.btn\:tonal:active,
|
|
466
|
-
.btn\:tonal.btn-state\:active {
|
|
467
|
-
--btn-background-dark: radial-gradient(107% 112% at 65% 103%,
|
|
468
|
-
rgba(var(--rgb-main-2), 0.5) 65%,
|
|
469
|
-
rgba(var(--rgb-main-3), 0.7) 66%);
|
|
470
|
-
--btn-border-radius-dark: var(--radius-lg);
|
|
471
|
-
}
|
|
472
|
-
|
|
473
|
-
/* ----------Outlined State------------ */
|
|
474
|
-
.btn\:outlined:focus:not(:active),
|
|
475
|
-
.btn\:outlined.btn-state\:focus:not(:active) {
|
|
476
|
-
--btn-border-dark: 2px solid rgb(var(--rgb-main-1));
|
|
477
|
-
--btn-outline-dark: 0.1px solid rgba(var(--rgb-main-1), 0.5);
|
|
478
|
-
--btn-outline-offset-dark: -5px;
|
|
479
|
-
}
|
|
480
|
-
|
|
481
|
-
.btn\:outlined:hover,
|
|
482
|
-
.btn\:outlined.btn-state\:hover {
|
|
483
|
-
--btn-background-dark: rgba(var(--rgb-main-3), 0.5);
|
|
484
|
-
}
|
|
485
|
-
|
|
486
|
-
.btn\:outlined:active,
|
|
487
|
-
.btn\:outlined.btn-state\:active {
|
|
488
|
-
--btn-background-dark: radial-gradient(107% 112% at 65% 103%,
|
|
489
|
-
rgba(var(--rgb-main-2), 0.5) 65%,
|
|
490
|
-
rgba(var(--rgb-main-2), 0.3) 66%);
|
|
491
|
-
--btn-border-radius-dark: var(--radius-lg);
|
|
492
|
-
}
|
|
493
|
-
|
|
494
|
-
/* ----------Text State----------------- */
|
|
495
|
-
.btn\:text:focus:not(:active),
|
|
496
|
-
.btn\:text.btn-state\:focus:not(:active) {
|
|
497
|
-
--btn-border-dark: 2px solid rgb(var(--rgb-main-1));
|
|
498
|
-
--btn-outline-dark: 0.1px solid rgba(var(--rgb-main-1), 0.5);
|
|
499
|
-
--btn-outline-offset-dark: -5px;
|
|
500
|
-
}
|
|
501
|
-
|
|
502
|
-
.btn\:text:hover,
|
|
503
|
-
.btn\:text.btn-state\:hover {
|
|
504
|
-
--btn-background-dark: rgba(var(--rgb-main-3), 0.5);
|
|
505
|
-
}
|
|
506
|
-
|
|
507
|
-
.btn\:text:active,
|
|
508
|
-
.btn\:text.btn-state\:active {
|
|
509
|
-
--btn-background-dark: radial-gradient(107% 112% at 65% 103%,
|
|
510
|
-
rgba(var(--rgb-main-2), 0.5) 65%,
|
|
511
|
-
rgba(var(--rgb-main-2), 0.3) 66%);
|
|
512
|
-
--btn-border-radius-dark: var(--radius-lg);
|
|
513
|
-
}
|
|
514
|
-
}
|
|
515
|
-
/* ================Base Type====================*/
|
|
516
|
-
.m3-btn {
|
|
517
|
-
/* boxing */
|
|
518
|
-
border-radius: var(--btn-border-radius);
|
|
519
|
-
height: var(--btn-height);
|
|
520
|
-
padding: var(--btn-padding);
|
|
521
|
-
margin-top: var(--btn-margin-top);
|
|
522
|
-
gap: var(--btn-gap);
|
|
523
|
-
|
|
524
|
-
/* layout */
|
|
525
|
-
display: inline-flex;
|
|
526
|
-
align-items: center;
|
|
527
|
-
justify-content: center;
|
|
528
|
-
|
|
529
|
-
/* color */
|
|
530
|
-
background: var(--btn-background-dark, var(--btn-background));
|
|
531
|
-
color: var(--btn-color-dark, var(--btn-color));
|
|
532
|
-
box-shadow: var(--btn-box-shadow-dark, var(--btn-box-shadow));
|
|
533
|
-
border: var(--btn-border-dark, var(--btn-border));
|
|
534
|
-
outline: var(--btn-outline-dark, var(--btn-outline));
|
|
535
|
-
outline-offset: var(--btn-outline-offset);
|
|
536
|
-
|
|
537
|
-
/* content */
|
|
538
|
-
font-family: roboto;
|
|
539
|
-
font-variation-settings: 'FILL' var(--btn-fill);
|
|
540
|
-
font-size: var(--btn-font-size);
|
|
541
|
-
font-weight: var(--btn-font-weight);
|
|
542
|
-
line-height: var(--btn-line-height);
|
|
543
|
-
letter-spacing: var(--btn-letter-spacing);
|
|
544
|
-
|
|
545
|
-
/* effect */
|
|
546
|
-
transition: background-color 0.3s ease, transform 0.3s ease;
|
|
547
|
-
}
|
|
548
|
-
/* ================Light Mode===================*/
|
|
549
|
-
.m3-btn:disabled,
|
|
550
|
-
.m3-btn.btn-state\:disabled {
|
|
551
|
-
--btn-background: rgba(var(--rgb-base-10), 0.08);
|
|
552
|
-
--btn-color: rgba(var(--rgb-base-10), 0.2);
|
|
553
|
-
--btn-box-shadow: none;
|
|
554
|
-
--btn-border: none;
|
|
555
|
-
--btn-outline: none;
|
|
556
|
-
}
|
|
557
|
-
.m3-btn:focus:not(:active),
|
|
558
|
-
.btn-state\:focus:not(:active) {
|
|
559
|
-
--btn-border: 2px solid rgba(var(--rgb-base-1), 1);
|
|
560
|
-
--btn-outline: 2.5px solid rgba(var(--rgb-main-2), 1);
|
|
561
|
-
}
|
|
562
|
-
.m3-btn:hover,
|
|
563
|
-
.btn-state\:hover {
|
|
564
|
-
--btn-background: rgba(var(--rgb-main-2), 0.7);
|
|
565
|
-
}
|
|
566
|
-
.m3-btn:active,
|
|
567
|
-
.btn-state\:active {
|
|
568
|
-
--btn-background: radial-gradient(144% 100% at 80% 94%,
|
|
569
|
-
rgba(var(--rgb-main-2), 0.7) 65%,
|
|
570
|
-
rgba(var(--rgb-main-2), 1) 66%);
|
|
571
|
-
--btn-border-radius: var(--radius-lg);
|
|
572
|
-
}
|
|
573
|
-
.btn\:elevated {
|
|
574
|
-
/* boxing */
|
|
575
|
-
--btn-background: linear-gradient(161deg,
|
|
576
|
-
rgba(var(--rgb-main-1), 0.01) 0%,
|
|
577
|
-
rgba(var(--rgb-main-1), 0.2) 100%);
|
|
578
|
-
--btn-box-shadow: 0px 0.7px 2px 0.5px rgba(var(--rgb-base-10), 0.5);
|
|
579
|
-
|
|
580
|
-
/* content */
|
|
581
|
-
--btn-color: rgb(var(--rgb-main-2));
|
|
582
|
-
}
|
|
583
|
-
.btn\:tonal {
|
|
584
|
-
/* boxing */
|
|
585
|
-
--btn-background: radial-gradient(144% 100% at 80% 94%,
|
|
586
|
-
rgba(var(--rgb-main-1), 1) 0%,
|
|
587
|
-
rgba(var(--rgb-main-1), 0.7) 100%);
|
|
588
|
-
|
|
589
|
-
/* content */
|
|
590
|
-
--btn-color: rgb(var(--rgb-main-3));
|
|
591
|
-
}
|
|
592
|
-
.btn\:outlined {
|
|
593
|
-
/* boxing */
|
|
594
|
-
--btn-background: none;
|
|
595
|
-
--btn-border: 1px solid rgba(var(--rgb-main-3), 0.2);
|
|
596
|
-
|
|
597
|
-
/* content */
|
|
598
|
-
--btn-color: rgb(var(--rgb-main-3));
|
|
599
|
-
}
|
|
600
|
-
.btn\:text {
|
|
601
|
-
/* boxing */
|
|
602
|
-
--btn-background: none;
|
|
603
|
-
--btn-border: none;
|
|
604
|
-
--btn-outline: none;
|
|
605
|
-
|
|
606
|
-
/* content */
|
|
607
|
-
--btn-color: rgb(var(--rgb-main-2));
|
|
608
|
-
}
|
|
609
|
-
/* ----------Elevated State------------ */
|
|
610
|
-
.btn\:elevated:focus:not(:active),
|
|
611
|
-
.btn\:elevated.btn-state\:focus:not(:active) {
|
|
612
|
-
--btn-border: 2px solid rgb(var(--rgb-main-3));
|
|
613
|
-
--btn-outline: 0.3px solid rgba(var(--rgb-main-3), 0.3);
|
|
614
|
-
--btn-outline-offset: -4px;
|
|
615
|
-
}
|
|
616
|
-
.btn\:elevated:hover,
|
|
617
|
-
.btn\:elevated.btn-state\:hover {
|
|
618
|
-
--btn-background: linear-gradient(161deg,
|
|
619
|
-
rgba(var(--rgb-main-1), 0.1) 0%,
|
|
620
|
-
rgba(var(--rgb-main-1), 0.5) 100%);
|
|
621
|
-
}
|
|
622
|
-
.btn\:elevated:active,
|
|
623
|
-
.btn\:elevated.btn-state\:active {
|
|
624
|
-
--btn-background: radial-gradient(107% 112% at 65% 103%,
|
|
625
|
-
rgba(var(--rgb-main-1), 0.4) 65%,
|
|
626
|
-
rgba(var(--rgb-main-1), 0.2) 66%);
|
|
627
|
-
--btn-border-radius: var(--radius-lg);
|
|
628
|
-
}
|
|
629
|
-
/* ----------Tonal State---------------- */
|
|
630
|
-
.btn\:tonal:focus:not(:active),
|
|
631
|
-
.btn\:tonal.btn-state\:focus:not(:active) {
|
|
632
|
-
--btn-border: 2px solid rgb(var(--rgb-base-1));
|
|
633
|
-
--btn-outline: 2.5px solid rgb(var(--rgb-main-2));
|
|
634
|
-
}
|
|
635
|
-
.btn\:tonal:hover,
|
|
636
|
-
.btn\:tonal.btn-state\:hover {
|
|
637
|
-
--btn-background: linear-gradient(161deg,
|
|
638
|
-
rgba(var(--rgb-main-1), 0.5) 8%,
|
|
639
|
-
rgba(var(--rgb-main-1), 0.6) 81%);
|
|
640
|
-
}
|
|
641
|
-
.btn\:tonal:active,
|
|
642
|
-
.btn\:tonal.btn-state\:active {
|
|
643
|
-
--btn-background: radial-gradient(107% 112% at 65% 103%,
|
|
644
|
-
rgba(var(--rgb-main-1), 1) 65%,
|
|
645
|
-
rgba(var(--rgb-main-1), 0.8) 66%);
|
|
646
|
-
--btn-border-radius: var(--radius-lg);
|
|
647
|
-
}
|
|
648
|
-
/* ----------Outlined State------------ */
|
|
649
|
-
.btn\:outlined:focus:not(:active),
|
|
650
|
-
.btn\:outlined.btn-state\:focus:not(:active) {
|
|
651
|
-
--btn-border: 2px solid rgb(var(--rgb-main-3));
|
|
652
|
-
--btn-outline: 0.3px solid rgba(var(--rgb-main-3), 0.3);
|
|
653
|
-
--btn-outline-offset: -4px;
|
|
654
|
-
}
|
|
655
|
-
.btn\:outlined:hover,
|
|
656
|
-
.btn\:outlined.btn-state\:hover {
|
|
657
|
-
--btn-background: linear-gradient(161deg,
|
|
658
|
-
rgba(var(--rgb-main-1), 0.01) 0%,
|
|
659
|
-
rgba(var(--rgb-main-1), 0.2) 100%);
|
|
660
|
-
}
|
|
661
|
-
.btn\:outlined:active,
|
|
662
|
-
.btn\:outlined.btn-state\:active {
|
|
663
|
-
--btn-background: radial-gradient(107% 112% at 65% 103%,
|
|
664
|
-
rgba(var(--rgb-main-1), 0.4) 65%,
|
|
665
|
-
rgba(var(--rgb-main-1), 0.2) 66%);
|
|
666
|
-
--btn-border-radius: var(--radius-lg);
|
|
667
|
-
}
|
|
668
|
-
/* ----------Text State----------------- */
|
|
669
|
-
.btn\:text:focus:not(:active),
|
|
670
|
-
.btn\:text.btn-state\:focus:not(:active) {
|
|
671
|
-
--btn-border: 2px solid rgb(var(--rgb-main-3));
|
|
672
|
-
--btn-outline: 0.3px solid rgba(var(--rgb-main-3), 0.3);
|
|
673
|
-
--btn-outline-offset: -4px;
|
|
674
|
-
}
|
|
675
|
-
.btn\:text:hover,
|
|
676
|
-
.btn\:text.btn-state\:hover {
|
|
677
|
-
--btn-background: linear-gradient(161deg,
|
|
678
|
-
rgba(var(--rgb-main-1), 0.01) 0%,
|
|
679
|
-
rgba(var(--rgb-main-1), 0.2) 100%);
|
|
680
|
-
}
|
|
681
|
-
.btn\:text:active,
|
|
682
|
-
.btn\:text.btn-state\:active {
|
|
683
|
-
--btn-background: radial-gradient(107% 112% at 65% 103%,
|
|
684
|
-
rgba(var(--rgb-main-1), 0.4) 65%,
|
|
685
|
-
rgba(var(--rgb-main-1), 0.2) 66%);
|
|
686
|
-
--btn-border-radius: var(--radius-lg);
|
|
687
|
-
}
|
|
688
|
-
/* ================Button Size===================*/
|
|
689
|
-
.btn-shape\:square {
|
|
690
|
-
--btn-border-radius: 12px;
|
|
691
|
-
}
|
|
692
|
-
.btn-size\:xs {
|
|
693
|
-
/* boxing */
|
|
694
|
-
--btn-height: var(--space-19);
|
|
695
|
-
--btn-padding: 0 var(--space-6);
|
|
696
|
-
|
|
697
|
-
/* content */
|
|
698
|
-
--btn-font-size: var(--space-8);
|
|
699
|
-
--btn-font-weight: var(--font-weight-medium);
|
|
700
|
-
--btn-line-height: var(--space-13);
|
|
701
|
-
--btn-letter-spacing: 0.1px;
|
|
702
|
-
}
|
|
703
|
-
.btn-size\:xs.btn-shape\:square {
|
|
704
|
-
--btn-border-radius: 12px;
|
|
705
|
-
}
|
|
706
|
-
.btn-size\:m {
|
|
707
|
-
/* boxing */
|
|
708
|
-
--btn-height: var(--space-28);
|
|
709
|
-
--btn-padding: 0 var(--space-15);
|
|
710
|
-
|
|
711
|
-
/* content */
|
|
712
|
-
--btn-font-size: var(--space-10);
|
|
713
|
-
--btn-font-weight: var(--font-weight-medium);
|
|
714
|
-
--btn-line-height: var(--space-15);
|
|
715
|
-
--btn-letter-spacing: 0.15px;
|
|
716
|
-
}
|
|
717
|
-
.btn-size\:m.btn-shape\:square {
|
|
718
|
-
--btn-border-radius: 16px;
|
|
719
|
-
}
|
|
720
|
-
.btn-size\:l {
|
|
721
|
-
/* boxing */
|
|
722
|
-
--btn-height: var(--space-32);
|
|
723
|
-
--btn-padding: 0 var(--space-24);
|
|
724
|
-
|
|
725
|
-
/* content */
|
|
726
|
-
--btn-font-size: var(--space-15);
|
|
727
|
-
--btn-font-weight: 600;
|
|
728
|
-
--btn-line-height: var(--space-19);
|
|
729
|
-
--btn-letter-spacing: 0px;
|
|
730
|
-
}
|
|
731
|
-
.btn-size\:l.btn-shape\:square {
|
|
732
|
-
--btn-border-radius: 28px;
|
|
733
|
-
}
|
|
734
|
-
.btn-size\:xl {
|
|
735
|
-
/* boxing */
|
|
736
|
-
--btn-height: var(--space-35);
|
|
737
|
-
--btn-padding: 0 var(--space-29);
|
|
738
|
-
|
|
739
|
-
/* content */
|
|
740
|
-
--btn-font-size: var(--space-19);
|
|
741
|
-
--btn-font-weight: 600;
|
|
742
|
-
--btn-line-height: var(--space-22);
|
|
743
|
-
--btn-letter-spacing: 0px;
|
|
744
|
-
}
|
|
745
|
-
.btn-size\:xl.btn-shape\:square {
|
|
746
|
-
--btn-border-radius: 28px;
|
|
747
|
-
}
|
|
748
|
-
/* 체크박스 변수 */
|
|
749
|
-
.m3-checkbox {
|
|
750
|
-
--checkbox-main-color: var(--color-main-2);
|
|
751
|
-
--checkbox-icon-color: var(--color-white);
|
|
752
|
-
--checkbox-border-color: var(--color-base-8);
|
|
753
|
-
--checkbox-outline-color: var(--color-main-2);
|
|
754
|
-
--checkbox-text-color: var(--color-base-8);
|
|
755
|
-
--checkbox-opacity: var(--opacity-0);
|
|
756
|
-
--checkbox-icon-content: "\e5ca";
|
|
757
|
-
--checkbox-transparent-0: transparent 0%;
|
|
758
|
-
--checkbox-transparent-38: transparent 38%;
|
|
759
|
-
--checkbox-transparent-92: transparent 92%;
|
|
760
|
-
--checkbox-transparent-100: transparent 100%;
|
|
761
|
-
--background-gradient: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(106, 142, 41, 0.3) 50%, rgba(106, 142, 41, 0.5) 100%);
|
|
762
|
-
}
|
|
763
|
-
/* 다크모드 */
|
|
764
|
-
@media (prefers-color-scheme: dark) {
|
|
765
|
-
.m3-checkbox {
|
|
766
|
-
--checkbox-main-color: var(--color-main-1);
|
|
767
|
-
--checkbox-icon-color: var(--color-main-3);
|
|
768
|
-
--checkbox-outline-color: var(--color-main-1);
|
|
769
|
-
--color-main-2: var(--color-main-1);
|
|
770
|
-
--background-gradient: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(140, 186, 53, 0.3) 50%, rgba(140, 186, 53, 0.5) 100%);
|
|
771
|
-
}
|
|
772
|
-
}
|
|
773
|
-
/* 체크박스 동작 트랜지션 */
|
|
774
|
-
.m3-checkbox,
|
|
775
|
-
.m3-checkbox input[type="checkbox"]::after,
|
|
776
|
-
.m3-checkbox input[type="checkbox"]::before {
|
|
777
|
-
transition: all 0.3s ease;
|
|
778
|
-
}
|
|
779
|
-
.m3-checkbox {
|
|
780
|
-
display: inline-flex;
|
|
781
|
-
align-items: center;
|
|
782
|
-
padding: 15px;
|
|
783
|
-
cursor: pointer;
|
|
784
|
-
user-select: none;
|
|
785
|
-
font-size: 16px;
|
|
786
|
-
color: var(--checkbox-text-color);
|
|
787
|
-
}
|
|
788
|
-
.m3-checkbox input[type="checkbox"] {
|
|
789
|
-
appearance: none;
|
|
790
|
-
position: relative;
|
|
791
|
-
margin-right: 20px;
|
|
792
|
-
/* 크기/모양 */
|
|
793
|
-
width: 18px;
|
|
794
|
-
height: 18px;
|
|
795
|
-
border-radius: 2px;
|
|
796
|
-
border: 2px solid var(--checkbox-border-color);
|
|
797
|
-
box-sizing: border-box;
|
|
798
|
-
}
|
|
799
|
-
.m3-checkbox input[type="checkbox"]::after {
|
|
800
|
-
/* 레이아웃 */
|
|
801
|
-
display: flex;
|
|
802
|
-
justify-content: center;
|
|
803
|
-
align-items: center;
|
|
804
|
-
/* 크기/모양 */
|
|
805
|
-
width: inherit;
|
|
806
|
-
height: inherit;
|
|
807
|
-
position: absolute;
|
|
808
|
-
top: -2px;
|
|
809
|
-
left: -2px;
|
|
810
|
-
background-color: var(--checkbox-main-color);
|
|
811
|
-
border-color: var(--checkbox-main-color);
|
|
812
|
-
border-radius: 2px;
|
|
813
|
-
/* 컨텐츠 */
|
|
814
|
-
content: var(--checkbox-icon-content);
|
|
815
|
-
font-family: "Material Symbols Outlined";
|
|
816
|
-
font-size: 18px;
|
|
817
|
-
font-weight: var(--font-weight-medium);
|
|
818
|
-
color: var(--checkbox-icon-color);
|
|
819
|
-
opacity: var(--checkbox-opacity);
|
|
820
|
-
}
|
|
821
|
-
.m3-checkbox input[type="checkbox"]::before {
|
|
822
|
-
display: inline-flex;
|
|
823
|
-
/* 크기/모양 */
|
|
824
|
-
content: "";
|
|
825
|
-
width: 40px;
|
|
826
|
-
height: 40px;
|
|
827
|
-
position: absolute;
|
|
828
|
-
top: 50%;
|
|
829
|
-
left: 50%;
|
|
830
|
-
transform: translate(-50%, -50%);
|
|
831
|
-
border-radius: 50%;
|
|
832
|
-
outline: 3px solid var(--checkbox-outline-color);
|
|
833
|
-
background: var(--checkbox-main-color);
|
|
834
|
-
opacity: var(--checkbox-opacity);
|
|
835
|
-
}
|
|
836
|
-
/* ⬇️state별 변수 구간 */
|
|
837
|
-
.m3-checkbox input[type="checkbox"]:not(:disabled):checked::after {
|
|
838
|
-
--checkbox-icon-content: "\e5ca";
|
|
839
|
-
--checkbox-opacity: var(--opacity-100);
|
|
840
|
-
}
|
|
841
|
-
.m3-checkbox input[type="checkbox"]:disabled {
|
|
842
|
-
--checkbox-border-color: color-mix(in srgb, var(--color-base-8), var(--checkbox-transparent-38));
|
|
843
|
-
--checkbox-text-color: color-mix(in srgb, var(--color-base-8), var(--checkbox-transparent-38));
|
|
844
|
-
}
|
|
845
|
-
.m3-checkbox input[type="checkbox"]:not(:disabled):hover::before {
|
|
846
|
-
--checkbox-outline-color: color-mix(in srgb, var(--color-main-2), var(--checkbox-transparent-100));
|
|
847
|
-
--checkbox-main-color: color-mix(in srgb, var(--color-main-2), var(--checkbox-transparent-92));
|
|
848
|
-
--checkbox-opacity: var(--opacity-100);
|
|
849
|
-
}
|
|
850
|
-
.m3-checkbox input[type="checkbox"]:not(:disabled):focus::before {
|
|
851
|
-
--checkbox-outline-color: color-mix(in srgb, var(--color-main-2), var(--checkbox-transparent-0));
|
|
852
|
-
--checkbox-main-color: color-mix(in srgb, var(--color-main-2), var(--checkbox-transparent-100));
|
|
853
|
-
--checkbox-opacity: var(--opacity-100);
|
|
854
|
-
}
|
|
855
|
-
.m3-checkbox input[type="checkbox"]:not(:disabled):active::before {
|
|
856
|
-
--checkbox-outline-color: color-mix(in srgb, var(--color-main-2), var(--checkbox-transparent-100));
|
|
857
|
-
--checkbox-main-color: var(--background-gradient);
|
|
858
|
-
--checkbox-opacity: var(--opacity-90);
|
|
859
|
-
}
|
|
860
|
-
.m3-checkbox.checkbox-mode\:indeterminate input[type="checkbox"]::after {
|
|
861
|
-
--checkbox-icon-content: "\f88a" !important;
|
|
862
|
-
}
|
|
863
|
-
/* ⬇️각 상태를 기본으로 하는 정적인 상태의 체크박스 */
|
|
864
|
-
.m3-checkbox.checkbox-state\:enabled input[type="checkbox"]::after {
|
|
865
|
-
--checkbox-icon-content: "\e5ca";
|
|
866
|
-
--checkbox-opacity: var(--opacity-100);
|
|
867
|
-
}
|
|
868
|
-
.m3-checkbox.checkbox-state\:unselected-disabled input[type="checkbox"] {
|
|
869
|
-
--checkbox-border-color: color-mix(in srgb, var(--color-base-8), var(--checkbox-transparent-38));
|
|
870
|
-
--checkbox-text-color: color-mix(in srgb, var(--color-base-8), var(--checkbox-transparent-38));
|
|
871
|
-
}
|
|
872
|
-
.m3-checkbox.checkbox-state\:hovered input[type="checkbox"]::before {
|
|
873
|
-
--checkbox-outline-color: color-mix(in srgb, var(--color-main-2), var(--checkbox-transparent-100));
|
|
874
|
-
--checkbox-main-color: color-mix(in srgb, var(--color-main-2), var(--checkbox-transparent-92));
|
|
875
|
-
--checkbox-opacity: var(--opacity-100);
|
|
876
|
-
}
|
|
877
|
-
.m3-checkbox.checkbox-state\:focused input[type="checkbox"]::before {
|
|
878
|
-
--checkbox-outline-color: color-mix(in srgb, var(--color-main-2), var(--checkbox-transparent-0));
|
|
879
|
-
--checkbox-main-color: color-mix(in srgb, var(--color-main-2), var(--checkbox-transparent-100));
|
|
880
|
-
--checkbox-opacity: var(--opacity-100);
|
|
881
|
-
}
|
|
882
|
-
.m3-checkbox.checkbox-state\:pressed input[type="checkbox"]::before {
|
|
883
|
-
--checkbox-outline-color: color-mix(in srgb, var(--color-main-2), var(--checkbox-transparent-100));
|
|
884
|
-
--checkbox-main-color: var(--background-gradient);
|
|
885
|
-
--checkbox-opacity: var(--opacity-90);
|
|
886
|
-
}
|
|
887
|
-
/* =========================================
|
|
888
|
-
M3 Radio Button Variables
|
|
889
|
-
Google Material Design 3 스타일 변수 정의
|
|
890
|
-
========================================= */
|
|
891
|
-
.m3-radio {
|
|
892
|
-
/* 크기 및 간격 */
|
|
893
|
-
--radio-size: 20px; /* 라디오 버튼 크기 */
|
|
894
|
-
--radio-touch-size: 48px; /* 터치 영역 크기 (접근성) */
|
|
895
|
-
--radio-stroke-width: 2px; /* 테두리 두께 */
|
|
896
|
-
--radio-inner-stroke-width: 5px; /* 내부 점 크기 제어용 테두리 */
|
|
897
|
-
--radio-inner-dot-size: 10px; /* 내부 점 크기 (참조용) */
|
|
898
|
-
--radio-spacing-label: 15px; /* 라디오와 라벨 사이 간격 */
|
|
899
|
-
--radio-label-size: 15px; /* 라벨 폰트 크기 */
|
|
900
|
-
|
|
901
|
-
/* 버튼속성 */
|
|
902
|
-
--radio-display: inline-flex;
|
|
903
|
-
--radio-align-items: center;
|
|
904
|
-
--radio-cursor: pointer;
|
|
905
|
-
--radio-user-select: none;
|
|
906
|
-
|
|
907
|
-
/* 색상 */
|
|
908
|
-
--radio-select-primary: var(--color-main-2); /* 선택 컬러 */
|
|
909
|
-
--radio-unselect-primary: var(--color-base-9); /* 미선택 컬러 */
|
|
910
|
-
--radio-focus-ring: 3px;
|
|
911
|
-
|
|
912
|
-
/* 버튼스타일 before,after */
|
|
913
|
-
--radio-transform: translate(-50%, -50%);
|
|
914
|
-
--radio-pointer: none;
|
|
915
|
-
--radio-box-sizing: border-box;
|
|
916
|
-
--radio-transition: all 180ms ease;
|
|
917
|
-
--radio-border-color: var(--radio-unselect-primary);
|
|
918
|
-
--radio-border-color-checked: var(--radio-select-primary);
|
|
919
|
-
--radio-background-color: transparent;
|
|
920
|
-
/* 액션 스타일 hover, press, focus */
|
|
921
|
-
--radio-box-shadow: none;
|
|
922
|
-
--radio-background-color: transparent;
|
|
923
|
-
--radio-outline: none;
|
|
924
|
-
--radio-outline-offset: 0;
|
|
925
|
-
--radio-outline-offset-focus: 5px;
|
|
926
|
-
|
|
927
|
-
/* 투명도 (Opacity) */
|
|
928
|
-
--alpha-1: 8%;
|
|
929
|
-
--alpha-2: 10%;
|
|
930
|
-
--alpha-3: 62%;
|
|
931
|
-
|
|
932
|
-
/* 투명도 (Color Mix용) */
|
|
933
|
-
--transparent-1: 10%;
|
|
934
|
-
--transparent-2: 90%;
|
|
935
|
-
--transparent-3: 92%;
|
|
936
|
-
--transparent-disabled: 62%;
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
}
|
|
940
|
-
/* 다크 모드 오버라이드 */
|
|
941
|
-
@media (prefers-color-scheme: dark) {
|
|
942
|
-
.m3-radio {
|
|
943
|
-
--radio-select-primary: var(--color-main-1);
|
|
944
|
-
}
|
|
945
|
-
}
|
|
946
|
-
/* =========================================
|
|
947
|
-
Container & Layout
|
|
948
|
-
========================================= */
|
|
949
|
-
.m3-radio {
|
|
950
|
-
display: var(--radio-display);
|
|
951
|
-
align-items: var(--radio-align-items);
|
|
952
|
-
cursor: var(--radio-cursor);
|
|
953
|
-
user-select: var(--radio-user-select);
|
|
954
|
-
gap: var(--radio-spacing-label);
|
|
955
|
-
}
|
|
956
|
-
/* =========================================
|
|
957
|
-
Input Reset & Touch Area
|
|
958
|
-
기본 라디오 버튼 숨김 및 커스텀 스타일 공간 확보
|
|
959
|
-
========================================= */
|
|
960
|
-
.m3-radio input[type="radio"] {
|
|
961
|
-
appearance: none; /* 기본 브라우저 스타일 제거 */
|
|
962
|
-
width: var(--radio-touch-size); /* 터치 영역 확보 */
|
|
963
|
-
height: var(--radio-touch-size);
|
|
964
|
-
margin: var(--scale-0);
|
|
965
|
-
border: none;
|
|
966
|
-
position: relative;
|
|
967
|
-
background-color: var(--radio-background-color);
|
|
968
|
-
cursor: var(--radio-cursor);
|
|
969
|
-
}
|
|
970
|
-
/* =========================================
|
|
971
|
-
Pseudo-elements Setup
|
|
972
|
-
::before -> 외부 링
|
|
973
|
-
::after -> 내부 점
|
|
974
|
-
========================================= */
|
|
975
|
-
.m3-radio input[type="radio"]::before,
|
|
976
|
-
.m3-radio input[type="radio"]::after {
|
|
977
|
-
content: "";
|
|
978
|
-
position: absolute;
|
|
979
|
-
left: 50%;
|
|
980
|
-
top: 50%;
|
|
981
|
-
|
|
982
|
-
transform: var(--radio-transform); /* 중앙 정렬 */
|
|
983
|
-
pointer-events: var(--radio-pointer);
|
|
984
|
-
box-sizing: var(--radio-box-sizing);
|
|
985
|
-
transition: var(--radio-transition);
|
|
986
|
-
}
|
|
987
|
-
/* 외부 링 (Unchecked State) */
|
|
988
|
-
.m3-radio input[type="radio"]::before {
|
|
989
|
-
width: var(--radio-size);
|
|
990
|
-
height: var(--radio-size);
|
|
991
|
-
border-radius: var(--radius-8); /* 원형 */
|
|
992
|
-
border: var(--radio-stroke-width) solid var(--radio-unselect-primary);
|
|
993
|
-
box-shadow: var(--radio-box-shadow);
|
|
994
|
-
background-color: var(--radio-background-color);
|
|
995
|
-
outline: var(--radio-outline);
|
|
996
|
-
outline-offset: var(--radio-outline-offset);
|
|
997
|
-
}
|
|
998
|
-
/* 내부 점 (Hidden by default) */
|
|
999
|
-
.m3-radio input[type="radio"]::after {
|
|
1000
|
-
width: 0;
|
|
1001
|
-
height: 0;
|
|
1002
|
-
border-radius: var(--radius-8);
|
|
1003
|
-
border: var(--radio-inner-stroke-width) solid var(--radio-select-primary);
|
|
1004
|
-
opacity: var(--opacity-0);
|
|
1005
|
-
}
|
|
1006
|
-
/* =========================================
|
|
1007
|
-
States: Checked
|
|
1008
|
-
========================================= */
|
|
1009
|
-
/* 체크 시 외부 링 색상 변경 */
|
|
1010
|
-
.m3-radio input[type="radio"]:checked::before {
|
|
1011
|
-
border-color: var(--radio-border-color-checked);
|
|
1012
|
-
}
|
|
1013
|
-
/* 체크 시 내부 점 표시 */
|
|
1014
|
-
.m3-radio input[type="radio"]:checked::after {
|
|
1015
|
-
opacity: var(--opacity-100);
|
|
1016
|
-
}
|
|
1017
|
-
/* =========================================
|
|
1018
|
-
States: Hover
|
|
1019
|
-
Hover 시 배경에 희미한 원(Ripple) 표시
|
|
1020
|
-
========================================= */
|
|
1021
|
-
.m3-radio input[type="radio"]:hover::before {
|
|
1022
|
-
/* box-shadow로 Ripple 효과 구현 */
|
|
1023
|
-
--radio-box-shadow: 0 0 0 10px color-mix(in srgb, var(--radio-unselect-primary), transparent var(--transparent-3));
|
|
1024
|
-
--radio-background-color: color-mix(in srgb, var(--radio-unselect-primary), transparent var(--transparent-2));
|
|
1025
|
-
}
|
|
1026
|
-
.m3-radio input[type="radio"]:checked:hover::before {
|
|
1027
|
-
--radio-box-shadow: 0 0 0 10px color-mix(in srgb, var(--radio-select-primary), transparent var(--transparent-3));
|
|
1028
|
-
--radio-background-color: color-mix(in srgb, var(--radio-select-primary), transparent var(--transparent-2));
|
|
1029
|
-
}
|
|
1030
|
-
/* =========================================
|
|
1031
|
-
States: Active (Press)
|
|
1032
|
-
눌렀을 때 진한 Ripple 표시
|
|
1033
|
-
========================================= */
|
|
1034
|
-
.m3-radio input[type="radio"]:active::before {
|
|
1035
|
-
--radio-box-shadow: 0 0 0 10px color-mix(in srgb, var(--radio-unselect-primary), transparent var(--transparent-2));
|
|
1036
|
-
--radio-background-color: color-mix(in srgb, var(--radio-unselect-primary), transparent var(--transparent-2));
|
|
1037
|
-
}
|
|
1038
|
-
.m3-radio input[type="radio"]:checked:active::before {
|
|
1039
|
-
--radio-box-shadow: 0 0 0 10px color-mix(in srgb, var(--radio-select-primary), transparent var(--transparent-2));
|
|
1040
|
-
--radio-background-color: color-mix(in srgb, var(--radio-select-primary), transparent var(--transparent-2));
|
|
1041
|
-
}
|
|
1042
|
-
/* =========================================
|
|
1043
|
-
States: Focus
|
|
1044
|
-
키보드 접근성 등을 위한 포커스 링
|
|
1045
|
-
========================================= */
|
|
1046
|
-
.m3-radio input[type="radio"]:focus::before {
|
|
1047
|
-
--radio-outline: 1px solid color-mix(in srgb, var(--radio-unselect-primary), transparent var(--transparent-1));
|
|
1048
|
-
--radio-outline-offset: var(--radio-outline-offset-focus);
|
|
1049
|
-
}
|
|
1050
|
-
.m3-radio input[type="radio"]:checked:focus::before {
|
|
1051
|
-
--radio-outline: 1px solid color-mix(in srgb, var(--radio-select-primary), transparent var(--transparent-1));
|
|
1052
|
-
--radio-outline-offset: var(--radio-outline-offset-focus);
|
|
1053
|
-
}
|
|
1054
|
-
/* =========================================
|
|
1055
|
-
States: Disabled
|
|
1056
|
-
========================================= */
|
|
1057
|
-
.m3-radio input[type="radio"]:disabled {
|
|
1058
|
-
cursor: not-allowed;
|
|
1059
|
-
box-shadow: none;
|
|
1060
|
-
}
|
|
1061
|
-
.m3-radio input[type="radio"]:checked:disabled::before,
|
|
1062
|
-
.m3-radio input[type="radio"]:checked:disabled::after,
|
|
1063
|
-
.m3-radio input[type="radio"]:disabled::before,
|
|
1064
|
-
.m3-radio input[type="radio"]:disabled::after {
|
|
1065
|
-
--radio-border-color: color-mix(in srgb, var(--radio-unselect-primary), transparent var(--transparent-disabled));
|
|
1066
|
-
background-color: transparent;
|
|
1067
|
-
box-shadow: none;
|
|
1068
|
-
}
|
|
1069
|
-
/* =========================================
|
|
1070
|
-
Label
|
|
1071
|
-
========================================= */
|
|
1072
|
-
.m3-radio .m3-radio-label {
|
|
1073
|
-
font-size: var(--radio-label-size);
|
|
1074
|
-
color: var(--radio-unselect-primary);
|
|
1075
|
-
}
|
|
1076
|
-
/* =========================================
|
|
1077
|
-
Helpers: Force States
|
|
1078
|
-
테스트 또는 강제 상태 표현용 클래스
|
|
1079
|
-
(.radio:hover, .radio:press, .radio:focus)
|
|
1080
|
-
========================================= */
|
|
1081
|
-
/* Hover Force */
|
|
1082
|
-
.radio\:hover input[type="radio"]::before {
|
|
1083
|
-
--radio-box-shadow: 0 0 0 10px color-mix(in srgb, var(--radio-unselect-primary), transparent var(--transparent-3));
|
|
1084
|
-
--radio-background-color: color-mix(in srgb, var(--radio-unselect-primary), transparent var(--transparent-2));
|
|
1085
|
-
}
|
|
1086
|
-
.radio\:hover input[type="radio"]:checked::before {
|
|
1087
|
-
--radio-box-shadow: 0 0 0 10px color-mix(in srgb, var(--radio-select-primary), transparent var(--transparent-3));
|
|
1088
|
-
--radio-background-color: color-mix(in srgb, var(--radio-select-primary), transparent var(--transparent-2));
|
|
1089
|
-
}
|
|
1090
|
-
/* Press Force */
|
|
1091
|
-
.radio\:press input[type="radio"]::before {
|
|
1092
|
-
--radio-box-shadow: 0 0 0 10px color-mix(in srgb, var(--radio-unselect-primary), transparent var(--transparent-2));
|
|
1093
|
-
--radio-background-color: color-mix(in srgb, var(--radio-unselect-primary), transparent var(--transparent-2));
|
|
1094
|
-
}
|
|
1095
|
-
.radio\:press input[type="radio"]:checked::before {
|
|
1096
|
-
--radio-box-shadow: 0 0 0 10px color-mix(in srgb, var(--radio-select-primary), transparent var(--transparent-2));
|
|
1097
|
-
--radio-background-color: color-mix(in srgb, var(--radio-select-primary), transparent var(--transparent-2));
|
|
1098
|
-
}
|
|
1099
|
-
/* Focus Force */
|
|
1100
|
-
.radio\:focus input[type="radio"]::before {
|
|
1101
|
-
--radio-outline: 1px solid color-mix(in srgb, var(--radio-unselect-primary), transparent var(--transparent-1));
|
|
1102
|
-
--radio-outline-offset: var(--radio-outline-offset-focus);
|
|
1103
|
-
}
|
|
1104
|
-
.radio\:focus input[type="radio"]:checked::before {
|
|
1105
|
-
--radio-outline: 1px solid color-mix(in srgb, var(--radio-select-primary), transparent var(--transparent-1));
|
|
1106
|
-
--radio-outline-offset: var(--radio-outline-offset-focus);
|
|
1107
|
-
}
|
|
1108
|
-
.m3-card {
|
|
1109
|
-
/* 추가 변수 선언 */
|
|
1110
|
-
--overflow-hidden: hidden;
|
|
1111
|
-
--cursor-pointer: pointer;
|
|
1112
|
-
--cursor-grab: grab;
|
|
1113
|
-
--cursor-not-allowed: not-allowed;
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
/* ========== 카드의 변수 선언(기본값) ========== */
|
|
1117
|
-
/* boxing */
|
|
1118
|
-
--card-background: var(--color-base-1);
|
|
1119
|
-
--card-width: auto;
|
|
1120
|
-
--card-height: auto;
|
|
1121
|
-
--card-padding: var(--space-10);
|
|
1122
|
-
--card-border: none;
|
|
1123
|
-
/* --card-border: var(--border-width-2) solid var(--color-base-2); */
|
|
1124
|
-
--card-border-radius: var(--radius-xl);
|
|
1125
|
-
--card-box-shadow: 0 var(--space-1) var(--space-3) rgba(0, 0, 0, var(--opacity-40)),
|
|
1126
|
-
0 var(--space-1) var(--space-2) rgba(0, 0, 0, var(--opacity-50));
|
|
1127
|
-
--card-opacity: var(--opacity-100);
|
|
1128
|
-
--card-outline: none;
|
|
1129
|
-
--card-outline-offset: 0;
|
|
1130
|
-
--card-transform: none;
|
|
1131
|
-
|
|
1132
|
-
/* 상태별 변수 */
|
|
1133
|
-
--card-focused-outline-color: var(--color-base-8);
|
|
1134
|
-
|
|
1135
|
-
/* overlay */
|
|
1136
|
-
--card-overflow: var(--overflow-hidden);
|
|
1137
|
-
|
|
1138
|
-
/* effect */
|
|
1139
|
-
--card-cursor: var(--cursor-pointer);
|
|
1140
|
-
--card-transition: box-shadow var(--duration-5) var(--ease-out),
|
|
1141
|
-
transform var(--duration-5) var(--ease-out),
|
|
1142
|
-
opacity var(--duration-5) var(--ease-out);
|
|
1143
|
-
|
|
1144
|
-
/* ========== 카드 내부 컨텐츠의 변수 선언(기본값) ========== */
|
|
1145
|
-
/* boxing */
|
|
1146
|
-
--card-content-padding: var(--space-10);
|
|
1147
|
-
|
|
1148
|
-
/* ========== 카드 내부 헤드라인의 변수 선언(기본값) ========== */
|
|
1149
|
-
/* boxing */
|
|
1150
|
-
--card-headline-margin-bottom: var(--space-3);
|
|
1151
|
-
|
|
1152
|
-
/* font */
|
|
1153
|
-
--card-headline-font-size: var(--size-15);
|
|
1154
|
-
--card-headline-font-weight: var(--font-weight-semibold);
|
|
1155
|
-
--card-headline-color: var(--color-base-10);
|
|
1156
|
-
--card-headline-line-height: var(--size-19);
|
|
1157
|
-
--card-headline-letter-spacing: 0;
|
|
1158
|
-
|
|
1159
|
-
/* ========== 카드 내부 서브헤드의 변수 선언(기본값) ========== */
|
|
1160
|
-
/* boxing */
|
|
1161
|
-
--card-subhead-margin-bottom: var(--space-3);
|
|
1162
|
-
|
|
1163
|
-
/* font */
|
|
1164
|
-
--card-subhead-font-size: var(--size-10);
|
|
1165
|
-
--card-subhead-font-weight: var(--font-weight-normal);
|
|
1166
|
-
--card-subhead-color: var(--color-base-8);
|
|
1167
|
-
--card-subhead-line-height: var(--size-13);
|
|
1168
|
-
--card-subhead-letter-spacing: 0;
|
|
1169
|
-
|
|
1170
|
-
/* font */
|
|
1171
|
-
--card-supporting-text-font-size: var(--size-6);
|
|
1172
|
-
--card-supporting-text-font-weight: var(--font-weight-normal);
|
|
1173
|
-
--card-supporting-text-color: var(--color-base-10);
|
|
1174
|
-
--card-supporting-text-line-height: var(--size-9);
|
|
1175
|
-
--card-supporting-text-margin-bottom: var(--space-2);
|
|
1176
|
-
--card-supporting-text-letter-spacing: 0;
|
|
1177
|
-
}
|
|
1178
|
-
/* ====== 다크 모드 ====== */
|
|
1179
|
-
@media (prefers-color-scheme: dark) {
|
|
1180
|
-
.m3-card {
|
|
1181
|
-
/* 다크모드에서 변경되는 변수들만 재정의 */
|
|
1182
|
-
--card-background: var(--color-base-2);
|
|
1183
|
-
--card-headline-color: var(--color-base-10);
|
|
1184
|
-
--card-subhead-color: var(--color-base-8);
|
|
1185
|
-
--card-supporting-text-color: var(--color-base-9);
|
|
1186
|
-
}
|
|
1187
|
-
|
|
1188
|
-
.m3-card.card-state\:focused {
|
|
1189
|
-
--card-focused-outline-color: var(--color-accent-2);
|
|
1190
|
-
}
|
|
1191
|
-
}
|
|
1192
|
-
/* ====== LIGHT MODE (Default) ====== */
|
|
1193
|
-
/* 카드 컨테이너 */
|
|
1194
|
-
.m3-card {
|
|
1195
|
-
/* boxing */
|
|
1196
|
-
background: var(--card-background);
|
|
1197
|
-
width: var(--card-width);
|
|
1198
|
-
height: var(--card-height);
|
|
1199
|
-
padding: var(--card-padding);
|
|
1200
|
-
border: var(--card-border);
|
|
1201
|
-
border-radius: var(--card-border-radius);
|
|
1202
|
-
box-shadow: var(--card-box-shadow);
|
|
1203
|
-
opacity: var(--card-opacity);
|
|
1204
|
-
outline: var(--card-outline);
|
|
1205
|
-
outline-offset: var(--card-outline-offset);
|
|
1206
|
-
transform: var(--card-transform);
|
|
1207
|
-
/* layout */
|
|
1208
|
-
overflow: var(--card-overflow);
|
|
1209
|
-
|
|
1210
|
-
/* effect */
|
|
1211
|
-
cursor: var(--card-cursor);
|
|
1212
|
-
transition: var(--card-transition);
|
|
1213
|
-
}
|
|
1214
|
-
/* 카드 상태 */
|
|
1215
|
-
.m3-card.card-state\:enabled {
|
|
1216
|
-
--card-opacity: var(--opacity-100);
|
|
1217
|
-
--card-box-shadow: 0px solid black;
|
|
1218
|
-
}
|
|
1219
|
-
.m3-card.card-state\:disabled,
|
|
1220
|
-
.m3-card.card-state\:disabled button {
|
|
1221
|
-
--card-opacity: var(--opacity-60);
|
|
1222
|
-
--card-cursor: var(--cursor-not-allowed);
|
|
1223
|
-
}
|
|
1224
|
-
.m3-card.card-state\:hovered {
|
|
1225
|
-
--card-box-shadow: 0 var(--space-4) var(--space-4) rgba(0, 0, 0, 0.16),
|
|
1226
|
-
0 var(--space-2) var(--space-4) rgba(0, 0, 0, 0.23);
|
|
1227
|
-
--card-opacity: var(--opacity-90);
|
|
1228
|
-
}
|
|
1229
|
-
.m3-card.card-state\:focused {
|
|
1230
|
-
--card-box-shadow: 0 var(--space-4) var(--space-4) rgba(0, 0, 0, 0.16),
|
|
1231
|
-
0 var(--space-2) var(--space-4) rgba(0, 0, 0, 0.23);
|
|
1232
|
-
--card-outline: 3px solid var(--card-focused-outline-color);
|
|
1233
|
-
--card-outline-offset: var(--space-2);
|
|
1234
|
-
--card-opacity: var(--opacity-90);
|
|
1235
|
-
}
|
|
1236
|
-
.m3-card.card-state\:dragged {
|
|
1237
|
-
--card-box-shadow: 0 var(--space-4) var(--space-10) rgba(0, 0, 0, var(--opacity-25)),
|
|
1238
|
-
0 var(--space-6) var(--space-6) rgba(0, 0, 0, var(--opacity-30));
|
|
1239
|
-
--card-transform: scale(1.02);
|
|
1240
|
-
--card-opacity: var(--opacity-80);
|
|
1241
|
-
--card-cursor: var(--cursor-grap);
|
|
1242
|
-
}
|
|
1243
|
-
/* 카드 컨텐츠 */
|
|
1244
|
-
.m3-card .content {
|
|
1245
|
-
padding: var(--card-content-padding);
|
|
1246
|
-
|
|
1247
|
-
}
|
|
1248
|
-
.m3-card .headline {
|
|
1249
|
-
font-size: var(--card-headline-font-size);
|
|
1250
|
-
font-weight: var(--card-headline-font-semibold);
|
|
1251
|
-
color: var(--card-headline-color);
|
|
1252
|
-
line-height: var(--card-headline-line-height);
|
|
1253
|
-
margin-bottom: var(--card-headline-margin-bottom);
|
|
1254
|
-
letter-spacing: var(--card-headline-letter-spacing);
|
|
1255
|
-
}
|
|
1256
|
-
.m3-card .subhead {
|
|
1257
|
-
font-size: var(--card-subhead-font-size);
|
|
1258
|
-
font-weight: var(--card-subhead-font-weight);
|
|
1259
|
-
color: var(--card-subhead-color);
|
|
1260
|
-
line-height: var(--card-subhead-line-height);
|
|
1261
|
-
margin-bottom: var(--card-subhead-margin-bottom);
|
|
1262
|
-
letter-spacing: var(--card-subhead-letter-spacing);
|
|
1263
|
-
}
|
|
1264
|
-
.m3-card .supporting-text {
|
|
1265
|
-
font-size: var(--card-supporting-text-font-size);
|
|
1266
|
-
font-weight: var(--card-supporting-text-font-weight);
|
|
1267
|
-
color: var(--card-supporting-text-color);
|
|
1268
|
-
line-height: var(--card-supporting-text-line-height);
|
|
1269
|
-
margin-bottom: var(--card-supporting-text-margin-bottom);
|
|
1270
|
-
letter-spacing: var(--card-supporting-text-letter-spacing);
|
|
1271
|
-
}
|
|
1272
|
-
.m3-dialog {
|
|
1273
|
-
/* =====공통 상수 variables.css에서 정의 어떤값 사용했는지 주석으로 표시 ===== */
|
|
1274
|
-
/* color */
|
|
1275
|
-
/* --color-base-10: #000000;
|
|
1276
|
-
--color-base-9: #191919;
|
|
1277
|
-
--color-base-8: #585858;
|
|
1278
|
-
--color-sub-2: #2570b6;
|
|
1279
|
-
--color-sub-1: #2983d7;
|
|
1280
|
-
--color-base-4: #b3b3b3;
|
|
1281
|
-
--color-base-2: #d7d7d7;
|
|
1282
|
-
--color-base-3: #e5e7eb; */
|
|
1283
|
-
|
|
1284
|
-
/* font size */
|
|
1285
|
-
/* --space-15: 24px;
|
|
1286
|
-
--space-8: 14px;
|
|
1287
|
-
*/
|
|
1288
|
-
|
|
1289
|
-
/* radius */
|
|
1290
|
-
/* --space-17: 28px; */
|
|
1291
|
-
|
|
1292
|
-
/* opacity */
|
|
1293
|
-
/* --opacity-10: 0.1; */
|
|
1294
|
-
|
|
1295
|
-
/* padding */
|
|
1296
|
-
/* --space-15: 24px;
|
|
1297
|
-
--space-14: 22px;
|
|
1298
|
-
--space-13: 20px;
|
|
1299
|
-
--space-12: 18px;
|
|
1300
|
-
--space-10: 16px;
|
|
1301
|
-
--space-8: 14px;
|
|
1302
|
-
--space-6: 12px;
|
|
1303
|
-
--space-5: 10px;
|
|
1304
|
-
--space-4: 8px;
|
|
1305
|
-
--space-3: 4px;
|
|
1306
|
-
--space-2: 2px;
|
|
1307
|
-
--space-1: 1px; */
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
/* margin */
|
|
1311
|
-
/* --space-15: 24px;
|
|
1312
|
-
--space-14: 22px;
|
|
1313
|
-
--space-13: 20px;
|
|
1314
|
-
--space-12: 18px;
|
|
1315
|
-
--space-10: 16px;
|
|
1316
|
-
--space-8: 14px;
|
|
1317
|
-
--space-6: 12px;
|
|
1318
|
-
--space-5: 10px;
|
|
1319
|
-
--space-4: 8px;
|
|
1320
|
-
--space-3: 4px;
|
|
1321
|
-
--space-2: 2px;
|
|
1322
|
-
--space-1: 1px; */
|
|
1323
|
-
|
|
1324
|
-
/* gap */
|
|
1325
|
-
/* --space-4: 8px;
|
|
1326
|
-
--space-3: 4px;
|
|
1327
|
-
--space-2: 2px;
|
|
1328
|
-
--space-1: 1px; */
|
|
1329
|
-
|
|
1330
|
-
/* line height */
|
|
1331
|
-
/* --space-13: 20px;
|
|
1332
|
-
--space-10: 16px;
|
|
1333
|
-
--space-6: 12px;
|
|
1334
|
-
--space-4: 8px;
|
|
1335
|
-
--space-3: 4px; */
|
|
1336
|
-
|
|
1337
|
-
/* width, height */
|
|
1338
|
-
/* 문서에는 최소, 최대 넓이로 나와있어서 수정하였음 */
|
|
1339
|
-
--dialog-spec-min-width: 280px;
|
|
1340
|
-
--dialog-spec-max-width: 560px;
|
|
1341
|
-
|
|
1342
|
-
/*======================= 변수 =======================*/
|
|
1343
|
-
/* 여기서만 수정한다 */
|
|
1344
|
-
--dialog-bg-color: var(--color-base-3);
|
|
1345
|
-
--dialog-radius: var(--space-17);
|
|
1346
|
-
--dialog-padding: var(--space-15);
|
|
1347
|
-
--dialog-min-width: var(--dialog-spec-min-width);
|
|
1348
|
-
--dialog-max-width: var(--dialog-spec-max-width);
|
|
1349
|
-
|
|
1350
|
-
--dialog-color: var(--color-base-8);
|
|
1351
|
-
|
|
1352
|
-
--dialog-headline-font-color: var(--color-base-10);
|
|
1353
|
-
--dialog-headline-font-size: var(--space-15);
|
|
1354
|
-
--dialog-headline-font-weight: var(--font-weight-4);
|
|
1355
|
-
--dialog-headline-margin-bottom: var(--space-14);
|
|
1356
|
-
|
|
1357
|
-
--dialog-content-font-color: var(--color-base-8);
|
|
1358
|
-
--dialog-content-font-size: var(--space-8);
|
|
1359
|
-
--dialog-content-margin-bottom: var(--space-15);
|
|
1360
|
-
--dialog-content-line-height: var(--space-13);
|
|
1361
|
-
|
|
1362
|
-
--dialog-actions-gap: var(--space-4);
|
|
1363
|
-
|
|
1364
|
-
--dialog-btn-color: var(--color-sub-2);
|
|
1365
|
-
--dialog-btn-padding: var(--space-12) var(--space-10);
|
|
1366
|
-
|
|
1367
|
-
/* Text Button specific */
|
|
1368
|
-
/* --dialog-opacity-1: 0.08 -> 8% */
|
|
1369
|
-
--dialog-hovered-bg: color-mix(in srgb, var(--dialog-btn-color) 8%, transparent);
|
|
1370
|
-
--dialog-focused-bg: color-mix(in srgb, var(--dialog-btn-color) 10%, transparent);
|
|
1371
|
-
--dialog-pressed-bg: color-mix(in srgb, var(--dialog-btn-color) 10%, transparent);
|
|
1372
|
-
}
|
|
1373
|
-
/* ====다크모드 테마==== */
|
|
1374
|
-
@media (prefers-color-scheme: dark) {
|
|
1375
|
-
.m3-dialog {
|
|
1376
|
-
--dialog-bg-color: var(--color-base-3);
|
|
1377
|
-
--dialog-headline-font-color: var(--color-base-10);
|
|
1378
|
-
--dialog-content-font-color: var(--color-base-8);
|
|
1379
|
-
--dialog-btn-color: var(--color-sub-2);
|
|
1380
|
-
}
|
|
1381
|
-
}
|
|
1382
|
-
/* ====기본 테마==== */
|
|
1383
|
-
.m3-dialog {
|
|
1384
|
-
position: fixed;
|
|
1385
|
-
/* top, right, bottom, left 값을 한 번에 지정하는 속성 */
|
|
1386
|
-
inset: 0;
|
|
1387
|
-
margin: auto;
|
|
1388
|
-
width: fit-content;
|
|
1389
|
-
height: fit-content;
|
|
1390
|
-
|
|
1391
|
-
/* backdrop */
|
|
1392
|
-
box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.4);
|
|
1393
|
-
|
|
1394
|
-
/* moved from .modal-container */
|
|
1395
|
-
background: var(--dialog-bg-color);
|
|
1396
|
-
padding: var(--dialog-padding);
|
|
1397
|
-
border-radius: var(--dialog-radius);
|
|
1398
|
-
min-width: var(--dialog-min-width);
|
|
1399
|
-
max-width: var(--dialog-max-width);
|
|
1400
|
-
box-sizing: border-box;
|
|
1401
|
-
|
|
1402
|
-
color: var(--dialog-color);
|
|
1403
|
-
font-family: 'Roboto', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
|
|
1404
|
-
|
|
1405
|
-
flex-direction: column;
|
|
1406
|
-
|
|
1407
|
-
.header,
|
|
1408
|
-
> :first-child {
|
|
1409
|
-
margin: 0 0 var(--dialog-headline-margin-bottom) 0;
|
|
1410
|
-
color: var(--dialog-headline-font-color);
|
|
1411
|
-
font-size: var(--dialog-headline-font-size);
|
|
1412
|
-
font-weight: var(--dialog-headline-font-weight);
|
|
1413
|
-
}
|
|
1414
|
-
|
|
1415
|
-
.content,
|
|
1416
|
-
> :nth-child(2) {
|
|
1417
|
-
margin: 0 0 var(--dialog-content-margin-bottom) 0;
|
|
1418
|
-
color: var(--dialog-content-font-color);
|
|
1419
|
-
font-size: var(--dialog-content-font-size);
|
|
1420
|
-
line-height: var(--dialog-content-line-height);
|
|
1421
|
-
}
|
|
1422
|
-
|
|
1423
|
-
.actions,
|
|
1424
|
-
> :nth-child(3) {
|
|
1425
|
-
display: flex;
|
|
1426
|
-
justify-content: flex-end;
|
|
1427
|
-
gap: var(--dialog-actions-gap);
|
|
1428
|
-
}
|
|
1429
|
-
}
|
|
1430
|
-
/* === 1. n-btn & STRUCTURE === */
|
|
1
|
+
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");.icon\:home:before{content:"\e88a"}.icon\:menu:before{content:"\e5d2"}.icon\:close:before{content:"\e5cd"}.icon\:arrow_back:before{content:"\e5c4"}.icon\:arrow_forward:before{content:"\e5c8"}.icon\:expand_more:before{content:"\e5cf"}.icon\:expand_less:before{content:"\e5ce"}.icon\:chevron_left:before{content:"\e5cb"}.icon\:chevron_right:before{content:"\e5cc"}.icon\:more_vert:before{content:"\e5d4"}.icon\:more_horiz:before{content:"\e5d3"}.icon\:refresh:before{content:"\e5d5"}.icon\:settings:before{content:"\e8b8"}.icon\:apps:before{content:"\e5c3"}.icon\:launch:before{content:"\e895"}.icon\:add:before{content:"\e145"}.icon\:remove:before{content:"\e15b"}.icon\:edit:before{content:"\e3c9"}.icon\:delete:before{content:"\e872"}.icon\:save:before{content:"\e161"}.icon\:check:before{content:"\e5ca"}.icon\:clear:before{content:"\e14c"}.icon\:cancel:before{content:"\e5c9"}.icon\:done:before{content:"\e876"}.icon\:search:before{content:"\e8b6"}.icon\:share:before{content:"\e80d"}.icon\:download:before{content:"\e2c4"}.icon\:upload:before{content:"\e2c6"}.icon\:copy:before{content:"\e14d"}.icon\:visibility:before{content:"\e8f4"}.icon\:visibility_off:before{content:"\e8f5"}.icon\:lock:before{content:"\e897"}.icon\:lock_open:before{content:"\e898"}.icon\:sync:before{content:"\e627"}.icon\:info:before{content:"\e88e"}.icon\:email:before{content:"\e0be"}.icon\:phone:before{content:"\e0cd"}.icon\:chat:before{content:"\e0b7"}.icon\:notifications:before{content:"\e7f4"}.icon\:send:before{content:"\e163"}.icon\:reply:before{content:"\e15e"}.icon\:help:before{content:"\e887"}.icon\:feedback:before{content:"\e87f"}.icon\:play_arrow:before{content:"\e037"}.icon\:pause:before{content:"\e034"}.icon\:stop:before{content:"\e047"}.icon\:volume_up:before{content:"\e050"}.icon\:volume_off:before{content:"\e04f"}.icon\:mic:before{content:"\e029"}.icon\:mic_off:before{content:"\e02b"}.icon\:folder:before{content:"\e2c7"}.icon\:folder_open:before{content:"\e2c8"}.icon\:attach_file:before{content:"\e226"}.icon\:cloud:before{content:"\e2bd"}.icon\:description:before{content:"\e873"}.icon\:person:before{content:"\e7fd"}.icon\:people:before{content:"\e7fb"}.icon\:favorite:before{content:"\e87d"}.icon\:star:before{content:"\e838"}.icon\:thumb_up:before{content:"\e8dc"}:root{--icon-size:24px;--icon-family:"Material Symbols Outlined";--icon-color:var(--color-base-9);--icon-fill:0;--icon-weight:400;--icon-grade:0;--icon-optical-size:24}@media (prefers-color-scheme:dark){:root{--icon-color:var(--color-base-2)}}.m3-icon{align-items:center;display:inline-flex;height:var(--icon-size);overflow:hidden;transition:all .2s ease-in-out;visibility:visible;width:var(--icon-size);&:before{align-items:center;color:inherit;display:inline-flex;flex-shrink:0;font-family:var(--icon-family);font-size:var(--icon-size);font-variation-settings:"FILL" var(--icon-fill,0),"wght" var(--icon-weight,400),"GRAD" var(--icon-grade,0),"OPSZ" var(--icon-optical-size,24);height:var(--icon-size);overflow:hidden;vertical-align:top;width:var(--icon-size)}&.hover:not(.n-deco):hover{background-color:var(--color-base-3);border-radius:50%;transform:scale(1.4);&:before{transform:scale(.72)}}&.icon-style\:outlined:before{--icon-family:"Material Symbols Outlined"}&.icon-style\:rounded:before{--icon-family:"Material Symbols Rounded"}&.icon-style\:sharp:before{--icon-family:"Material Symbols Sharp"}&.icon-filled\:0:before{--icon-fill:0}&.icon-filled\:1:before{--icon-fill:1}&.icon-weight\:100:before{--icon-weight:100}&.icon-weight\:200:before{--icon-weight:200}&.icon-weight\:300:before{--icon-weight:300}&.icon-weight\:400:before{--icon-weight:400}&.icon-weight\:500:before{--icon-weight:500}&.icon-weight\:600:before{--icon-weight:600}&.icon-weight\:700:before{--icon-weight:700}&.icon-grade\:-25:before{--icon-grade:-25}&.icon-grade\:0:before{--icon-grade:0}&.icon-grade\:200:before{--icon-grade:200}&.icon-optical-size\:20:before{--icon-optical-size:20px}&.icon-optical-size\:24:before{--icon-optical-size:24px}&.icon-optical-size\:40:before{--icon-optical-size:40px}&.icon-optical-size\:48:before{--icon-optical-size:48px}&.icon-color\:main-1:before{color:var(--color-main-1)}&.icon-color\:main-2:before{color:var(--color-main-2)}&.icon-color\:main-3:before{color:var(--color-main-3)}&.icon-color\:sub-1:before{color:var(--color-sub-1)}&.icon-color\:sub-2:before{color:var(--color-sub-2)}&.icon-color\:sub-3:before{color:var(--color-sub-3)}&.icon-color\:accent-1:before{color:var(--color-accent-1)}&.icon-color\:accent-2:before{color:var(--color-accent-2)}&.icon-color\:accent-3:before{color:var(--color-accent-3)}&.icon-color\:base-1:before{color:var(--color-base-1)}&.icon-color\:base-2:before{color:var(--color-base-2)}&.icon-color\:base-3:before{color:var(--color-base-3)}&.icon-color\:base-4:before{color:var(--color-base-4)}&.icon-color\:base-5:before{color:var(--color-base-5)}&.icon-color\:base-6:before{color:var(--color-base-6)}&.icon-color\:base-7:before{color:var(--color-base-7)}&.icon-color\:base-8:before{color:var(--color-base-8)}&.icon-color\:base-9:before{color:var(--color-base-9)}&.icon-color\:base-10:before{color:var(--color-base-10)}&.icon-size\:20{--icon-size:20px}&.icon-size\:24{--icon-size:24px}&.icon-size\:40{--icon-size:40px}&.icon-size\:48{--icon-size:48px}}.m3-btn{--btn-gap:2px;--btn-margin-top:5px;--btn-fill:1;--btn-background:rgba(var(--rgb-main-2),1);--btn-color:rgb(var(--rgb-base-1));--btn-box-shadow:none;--btn-border:0;--btn-outline:none;--btn-outline-offset:0px;--btn-border-radius:999px;--btn-height:var(--space-22);--btn-padding:0 var(--space-10);--btn-font-size:var(--space-8);--btn-font-weight:var(--font-weight-medium);--btn-line-height:var(--space-13);--btn-letter-spacing:0.1px}@media (prefers-color-scheme:dark){.m3-btn{--btn-background-dark:rgba(var(--rgb-main-2),1);--btn-color-dark:rgb(var(--rgb-base-1));--btn-box-shadow-dark:none;--btn-border-dark:0;--btn-outline-dark:none}.m3-btn.btn-state\:disabled,.m3-btn:disabled{--btn-background-dark:rgba(var(--rgb-main-3),0.3);--btn-color-dark:rgba(var(--rgb-main-1),0.3);--btn-box-shadow-dark:none;--btn-border-dark:0;--btn-outline-dark:none}.m3-btn.btn-state\:focus:not(:active),.m3-btn:focus:not(:active){--btn-border-dark:2px solid rgb(var(--rgb-base-1));--btn-outline-dark:2px solid rgb(var(--rgb-main-2))}.m3-btn.btn-state\:hover,.m3-btn:hover{--btn-background-dark:rgba(var(--rgb-main-1),1)}.m3-btn.btn-state\:active,.m3-btn:active{--btn-background-dark:radial-gradient(107% 112% at 65% 103%,rgba(var(--rgb-main-2),1) 65%,rgba(var(--rgb-main-1),1) 66%);--btn-border-radius-dark:var(--radius-lg)}.btn\:elevated{--btn-background-dark:rgba(var(--rgb-main-3),0.3);--btn-box-shadow-dark:0px 1px 2px 0.5px rgba(var(--rgb-base-10),1);--btn-color-dark:rgb(var(--rgb-main-1))}.btn\:tonal{--btn-background-dark:rgba(var(--rgb-main-2),0.5);--btn-color-dark:rgb(var(--rgb-main-1))}.btn\:outlined{--btn-background-dark:none;--btn-color-dark:rgb(var(--rgb-main-1));--btn-outline-dark:0.2px solid rgba(var(--rgb-main-3),0.7)}.btn\:text{--btn-background-dark:none;--btn-color-dark:rgb(var(--rgb-main-2))}.btn\:elevated.btn-state\:focus:not(:active),.btn\:elevated:focus:not(:active){--btn-border-dark:2px solid rgb(var(--rgb-main-3));--btn-outline-dark:2px solid rgb(var(--rgb-base-1))}.btn\:elevated.btn-state\:hover,.btn\:elevated:hover{--btn-background-dark:rgba(var(--rgb-main-2),0.3)}.btn\:elevated.btn-state\:active,.btn\:elevated:active{--btn-background-dark:radial-gradient(144% 100% at 80% 94%,rgba(var(--rgb-main-3),0.5) 65%,rgba(var(--rgb-main-3),1) 66%);--btn-border-radius-dark:var(--radius-lg)}.btn\:tonal.btn-state\:focus:not(:active),.btn\:tonal:focus:not(:active){--btn-border-dark:2px solid rgb(var(--rgb-base-1));--btn-outline-dark:3px solid rgba(var(--rgb-main-2),0.5)}.btn\:tonal.btn-state\:hover,.btn\:tonal:hover{--btn-background-dark:rgba(var(--rgb-main-3),0.7)}.btn\:tonal.btn-state\:active,.btn\:tonal:active{--btn-background-dark:radial-gradient(107% 112% at 65% 103%,rgba(var(--rgb-main-2),0.5) 65%,rgba(var(--rgb-main-3),0.7) 66%);--btn-border-radius-dark:var(--radius-lg)}.btn\:outlined.btn-state\:focus:not(:active),.btn\:outlined:focus:not(:active){--btn-border-dark:2px solid rgb(var(--rgb-main-1));--btn-outline-dark:0.1px solid rgba(var(--rgb-main-1),0.5);--btn-outline-offset-dark:-5px}.btn\:outlined.btn-state\:hover,.btn\:outlined:hover{--btn-background-dark:rgba(var(--rgb-main-3),0.5)}.btn\:outlined.btn-state\:active,.btn\:outlined:active{--btn-background-dark:radial-gradient(107% 112% at 65% 103%,rgba(var(--rgb-main-2),0.5) 65%,rgba(var(--rgb-main-2),0.3) 66%);--btn-border-radius-dark:var(--radius-lg)}.btn\:text.btn-state\:focus:not(:active),.btn\:text:focus:not(:active){--btn-border-dark:2px solid rgb(var(--rgb-main-1));--btn-outline-dark:0.1px solid rgba(var(--rgb-main-1),0.5);--btn-outline-offset-dark:-5px}.btn\:text.btn-state\:hover,.btn\:text:hover{--btn-background-dark:rgba(var(--rgb-main-3),0.5)}.btn\:text.btn-state\:active,.btn\:text:active{--btn-background-dark:radial-gradient(107% 112% at 65% 103%,rgba(var(--rgb-main-2),0.5) 65%,rgba(var(--rgb-main-2),0.3) 66%);--btn-border-radius-dark:var(--radius-lg)}}.m3-btn{align-items:center;background:var(--btn-background-dark,var(--btn-background));border:var(--btn-border-dark,var(--btn-border));border-radius:var(--btn-border-radius);box-shadow:var(--btn-box-shadow-dark,var(--btn-box-shadow));color:var(--btn-color-dark,var(--btn-color));display:inline-flex;font-family:roboto;font-size:var(--btn-font-size);font-variation-settings:"FILL" var(--btn-fill);font-weight:var(--btn-font-weight);gap:var(--btn-gap);height:var(--btn-height);justify-content:center;letter-spacing:var(--btn-letter-spacing);line-height:var(--btn-line-height);margin-top:var(--btn-margin-top);outline:var(--btn-outline-dark,var(--btn-outline));outline-offset:var(--btn-outline-offset);padding:var(--btn-padding);transition:background-color .3s ease,transform .3s ease}.m3-btn.btn-state\:disabled,.m3-btn:disabled{--btn-background:rgba(var(--rgb-base-10),0.08);--btn-color:rgba(var(--rgb-base-10),0.2);--btn-box-shadow:none;--btn-border:none;--btn-outline:none}.btn-state\:focus:not(:active),.m3-btn:focus:not(:active){--btn-border:2px solid rgba(var(--rgb-base-1),1);--btn-outline:2.5px solid rgba(var(--rgb-main-2),1)}.btn-state\:hover,.m3-btn:hover{--btn-background:rgba(var(--rgb-main-2),0.7)}.btn-state\:active,.m3-btn:active{--btn-background:radial-gradient(144% 100% at 80% 94%,rgba(var(--rgb-main-2),0.7) 65%,rgba(var(--rgb-main-2),1) 66%);--btn-border-radius:var(--radius-lg)}.btn\:elevated{--btn-background:linear-gradient(161deg,rgba(var(--rgb-main-1),0.01) 0%,rgba(var(--rgb-main-1),0.2) 100%);--btn-box-shadow:0px 0.7px 2px 0.5px rgba(var(--rgb-base-10),0.5);--btn-color:rgb(var(--rgb-main-2))}.btn\:tonal{--btn-background:radial-gradient(144% 100% at 80% 94%,rgba(var(--rgb-main-1),1) 0%,rgba(var(--rgb-main-1),0.7) 100%);--btn-color:rgb(var(--rgb-main-3))}.btn\:outlined{--btn-background:none;--btn-border:1px solid rgba(var(--rgb-main-3),0.2);--btn-color:rgb(var(--rgb-main-3))}.btn\:text{--btn-background:none;--btn-border:none;--btn-outline:none;--btn-color:rgb(var(--rgb-main-2))}.btn\:elevated.btn-state\:focus:not(:active),.btn\:elevated:focus:not(:active){--btn-border:2px solid rgb(var(--rgb-main-3));--btn-outline:0.3px solid rgba(var(--rgb-main-3),0.3);--btn-outline-offset:-4px}.btn\:elevated.btn-state\:hover,.btn\:elevated:hover{--btn-background:linear-gradient(161deg,rgba(var(--rgb-main-1),0.1) 0%,rgba(var(--rgb-main-1),0.5) 100%)}.btn\:elevated.btn-state\:active,.btn\:elevated:active{--btn-background:radial-gradient(107% 112% at 65% 103%,rgba(var(--rgb-main-1),0.4) 65%,rgba(var(--rgb-main-1),0.2) 66%);--btn-border-radius:var(--radius-lg)}.btn\:tonal.btn-state\:focus:not(:active),.btn\:tonal:focus:not(:active){--btn-border:2px solid rgb(var(--rgb-base-1));--btn-outline:2.5px solid rgb(var(--rgb-main-2))}.btn\:tonal.btn-state\:hover,.btn\:tonal:hover{--btn-background:linear-gradient(161deg,rgba(var(--rgb-main-1),0.5) 8%,rgba(var(--rgb-main-1),0.6) 81%)}.btn\:tonal.btn-state\:active,.btn\:tonal:active{--btn-background:radial-gradient(107% 112% at 65% 103%,rgba(var(--rgb-main-1),1) 65%,rgba(var(--rgb-main-1),0.8) 66%);--btn-border-radius:var(--radius-lg)}.btn\:outlined.btn-state\:focus:not(:active),.btn\:outlined:focus:not(:active){--btn-border:2px solid rgb(var(--rgb-main-3));--btn-outline:0.3px solid rgba(var(--rgb-main-3),0.3);--btn-outline-offset:-4px}.btn\:outlined.btn-state\:hover,.btn\:outlined:hover{--btn-background:linear-gradient(161deg,rgba(var(--rgb-main-1),0.01) 0%,rgba(var(--rgb-main-1),0.2) 100%)}.btn\:outlined.btn-state\:active,.btn\:outlined:active{--btn-background:radial-gradient(107% 112% at 65% 103%,rgba(var(--rgb-main-1),0.4) 65%,rgba(var(--rgb-main-1),0.2) 66%);--btn-border-radius:var(--radius-lg)}.btn\:text.btn-state\:focus:not(:active),.btn\:text:focus:not(:active){--btn-border:2px solid rgb(var(--rgb-main-3));--btn-outline:0.3px solid rgba(var(--rgb-main-3),0.3);--btn-outline-offset:-4px}.btn\:text.btn-state\:hover,.btn\:text:hover{--btn-background:linear-gradient(161deg,rgba(var(--rgb-main-1),0.01) 0%,rgba(var(--rgb-main-1),0.2) 100%)}.btn\:text.btn-state\:active,.btn\:text:active{--btn-background:radial-gradient(107% 112% at 65% 103%,rgba(var(--rgb-main-1),0.4) 65%,rgba(var(--rgb-main-1),0.2) 66%);--btn-border-radius:var(--radius-lg)}.btn-shape\:square{--btn-border-radius:12px}.btn-size\:xs{--btn-height:var(--space-19);--btn-padding:0 var(--space-6);--btn-font-size:var(--space-8);--btn-font-weight:var(--font-weight-medium);--btn-line-height:var(--space-13);--btn-letter-spacing:0.1px}.btn-size\:xs.btn-shape\:square{--btn-border-radius:12px}.btn-size\:m{--btn-height:var(--space-28);--btn-padding:0 var(--space-15);--btn-font-size:var(--space-10);--btn-font-weight:var(--font-weight-medium);--btn-line-height:var(--space-15);--btn-letter-spacing:0.15px}.btn-size\:m.btn-shape\:square{--btn-border-radius:16px}.btn-size\:l{--btn-height:var(--space-32);--btn-padding:0 var(--space-24);--btn-font-size:var(--space-15);--btn-font-weight:600;--btn-line-height:var(--space-19);--btn-letter-spacing:0px}.btn-size\:l.btn-shape\:square{--btn-border-radius:28px}.btn-size\:xl{--btn-height:var(--space-35);--btn-padding:0 var(--space-29);--btn-font-size:var(--space-19);--btn-font-weight:600;--btn-line-height:var(--space-22);--btn-letter-spacing:0px}.btn-size\:xl.btn-shape\:square{--btn-border-radius:28px}.m3-checkbox{--checkbox-main-color:var(--color-main-2);--checkbox-icon-color:var(--color-white);--checkbox-border-color:var(--color-base-8);--checkbox-outline-color:var(--color-main-2);--checkbox-text-color:var(--color-base-8);--checkbox-opacity:var(--opacity-0);--checkbox-icon-content:"\e5ca";--checkbox-transparent-0:transparent 0%;--checkbox-transparent-38:transparent 38%;--checkbox-transparent-92:transparent 92%;--checkbox-transparent-100:transparent 100%;--background-gradient:linear-gradient(180deg,#fff,rgba(106,142,41,.3) 50%,rgba(106,142,41,.5))}@media (prefers-color-scheme:dark){.m3-checkbox{--checkbox-main-color:var(--color-main-1);--checkbox-icon-color:var(--color-main-3);--checkbox-outline-color:var(--color-main-1);--color-main-2:var(--color-main-1);--background-gradient:linear-gradient(180deg,#fff,rgba(140,186,53,.3) 50%,rgba(140,186,53,.5))}}.m3-checkbox,.m3-checkbox input[type=checkbox]:after,.m3-checkbox input[type=checkbox]:before{transition:all .3s ease}.m3-checkbox{align-items:center;color:var(--checkbox-text-color);cursor:pointer;display:inline-flex;font-size:16px;padding:15px;user-select:none}.m3-checkbox input[type=checkbox]{appearance:none;border:2px solid var(--checkbox-border-color);border-radius:2px;box-sizing:border-box;height:18px;margin-right:20px;position:relative;width:18px}.m3-checkbox input[type=checkbox]:after{align-items:center;background-color:var(--checkbox-main-color);border-color:var(--checkbox-main-color);border-radius:2px;color:var(--checkbox-icon-color);content:var(--checkbox-icon-content);display:flex;font-family:Material Symbols Outlined;font-size:18px;font-weight:var(--font-weight-medium);height:inherit;justify-content:center;left:-2px;opacity:var(--checkbox-opacity);position:absolute;top:-2px;width:inherit}.m3-checkbox input[type=checkbox]:before{background:var(--checkbox-main-color);border-radius:50%;content:"";display:inline-flex;height:40px;left:50%;opacity:var(--checkbox-opacity);outline:3px solid var(--checkbox-outline-color);position:absolute;top:50%;transform:translate(-50%,-50%);width:40px}.m3-checkbox input[type=checkbox]:not(:disabled):checked:after{--checkbox-icon-content:"\e5ca";--checkbox-opacity:var(--opacity-100)}.m3-checkbox input[type=checkbox]:disabled{--checkbox-border-color:color-mix(in srgb,var(--color-base-8),var(--checkbox-transparent-38));--checkbox-text-color:color-mix(in srgb,var(--color-base-8),var(--checkbox-transparent-38))}.m3-checkbox input[type=checkbox]:not(:disabled):hover:before{--checkbox-outline-color:color-mix(in srgb,var(--color-main-2),var(--checkbox-transparent-100));--checkbox-main-color:color-mix(in srgb,var(--color-main-2),var(--checkbox-transparent-92));--checkbox-opacity:var(--opacity-100)}.m3-checkbox input[type=checkbox]:not(:disabled):focus:before{--checkbox-outline-color:color-mix(in srgb,var(--color-main-2),var(--checkbox-transparent-0));--checkbox-main-color:color-mix(in srgb,var(--color-main-2),var(--checkbox-transparent-100));--checkbox-opacity:var(--opacity-100)}.m3-checkbox input[type=checkbox]:not(:disabled):active:before{--checkbox-outline-color:color-mix(in srgb,var(--color-main-2),var(--checkbox-transparent-100));--checkbox-main-color:var(--background-gradient);--checkbox-opacity:var(--opacity-90)}.m3-checkbox.checkbox-mode\:indeterminate input[type=checkbox]:after{--checkbox-icon-content:"\f88a"!important}.m3-checkbox.checkbox-state\:enabled input[type=checkbox]:after{--checkbox-icon-content:"\e5ca";--checkbox-opacity:var(--opacity-100)}.m3-checkbox.checkbox-state\:unselected-disabled input[type=checkbox]{--checkbox-border-color:color-mix(in srgb,var(--color-base-8),var(--checkbox-transparent-38));--checkbox-text-color:color-mix(in srgb,var(--color-base-8),var(--checkbox-transparent-38))}.m3-checkbox.checkbox-state\:hovered input[type=checkbox]:before{--checkbox-outline-color:color-mix(in srgb,var(--color-main-2),var(--checkbox-transparent-100));--checkbox-main-color:color-mix(in srgb,var(--color-main-2),var(--checkbox-transparent-92));--checkbox-opacity:var(--opacity-100)}.m3-checkbox.checkbox-state\:focused input[type=checkbox]:before{--checkbox-outline-color:color-mix(in srgb,var(--color-main-2),var(--checkbox-transparent-0));--checkbox-main-color:color-mix(in srgb,var(--color-main-2),var(--checkbox-transparent-100));--checkbox-opacity:var(--opacity-100)}.m3-checkbox.checkbox-state\:pressed input[type=checkbox]:before{--checkbox-outline-color:color-mix(in srgb,var(--color-main-2),var(--checkbox-transparent-100));--checkbox-main-color:var(--background-gradient);--checkbox-opacity:var(--opacity-90)}.m3-radio{--radio-size:20px;--radio-touch-size:48px;--radio-stroke-width:2px;--radio-inner-stroke-width:5px;--radio-inner-dot-size:10px;--radio-spacing-label:15px;--radio-label-size:15px;--radio-display:inline-flex;--radio-align-items:center;--radio-cursor:pointer;--radio-user-select:none;--radio-select-primary:var(--color-main-2);--radio-unselect-primary:var(--color-base-9);--radio-focus-ring:3px;--radio-transform:translate(-50%,-50%);--radio-pointer:none;--radio-box-sizing:border-box;--radio-transition:all 180ms ease;--radio-border-color:var(--radio-unselect-primary);--radio-border-color-checked:var(--radio-select-primary);--radio-box-shadow:none;--radio-background-color:transparent;--radio-outline:none;--radio-outline-offset:0;--radio-outline-offset-focus:5px;--alpha-1:8%;--alpha-2:10%;--alpha-3:62%;--transparent-1:10%;--transparent-2:90%;--transparent-3:92%;--transparent-disabled:62%}@media (prefers-color-scheme:dark){.m3-radio{--radio-select-primary:var(--color-main-1)}}.m3-radio{align-items:var(--radio-align-items);cursor:var(--radio-cursor);display:var(--radio-display);gap:var(--radio-spacing-label);user-select:var(--radio-user-select)}.m3-radio input[type=radio]{appearance:none;background-color:var(--radio-background-color);border:none;cursor:var(--radio-cursor);height:var(--radio-touch-size);margin:var(--scale-0);position:relative;width:var(--radio-touch-size)}.m3-radio input[type=radio]:after,.m3-radio input[type=radio]:before{box-sizing:var(--radio-box-sizing);content:"";left:50%;pointer-events:var(--radio-pointer);position:absolute;top:50%;transform:var(--radio-transform);transition:var(--radio-transition)}.m3-radio input[type=radio]:before{background-color:var(--radio-background-color);border:var(--radio-stroke-width) solid var(--radio-unselect-primary);border-radius:var(--radius-8);box-shadow:var(--radio-box-shadow);height:var(--radio-size);outline:var(--radio-outline);outline-offset:var(--radio-outline-offset);width:var(--radio-size)}.m3-radio input[type=radio]:after{border:var(--radio-inner-stroke-width) solid var(--radio-select-primary);border-radius:var(--radius-8);height:0;opacity:var(--opacity-0);width:0}.m3-radio input[type=radio]:checked:before{border-color:var(--radio-border-color-checked)}.m3-radio input[type=radio]:checked:after{opacity:var(--opacity-100)}.m3-radio input[type=radio]:hover:before{--radio-box-shadow:0 0 0 10px color-mix(in srgb,var(--radio-unselect-primary),transparent var(--transparent-3));--radio-background-color:color-mix(in srgb,var(--radio-unselect-primary),transparent var(--transparent-2))}.m3-radio input[type=radio]:checked:hover:before{--radio-box-shadow:0 0 0 10px color-mix(in srgb,var(--radio-select-primary),transparent var(--transparent-3));--radio-background-color:color-mix(in srgb,var(--radio-select-primary),transparent var(--transparent-2))}.m3-radio input[type=radio]:active:before{--radio-box-shadow:0 0 0 10px color-mix(in srgb,var(--radio-unselect-primary),transparent var(--transparent-2));--radio-background-color:color-mix(in srgb,var(--radio-unselect-primary),transparent var(--transparent-2))}.m3-radio input[type=radio]:checked:active:before{--radio-box-shadow:0 0 0 10px color-mix(in srgb,var(--radio-select-primary),transparent var(--transparent-2));--radio-background-color:color-mix(in srgb,var(--radio-select-primary),transparent var(--transparent-2))}.m3-radio input[type=radio]:focus:before{--radio-outline:1px solid color-mix(in srgb,var(--radio-unselect-primary),transparent var(--transparent-1));--radio-outline-offset:var(--radio-outline-offset-focus)}.m3-radio input[type=radio]:checked:focus:before{--radio-outline:1px solid color-mix(in srgb,var(--radio-select-primary),transparent var(--transparent-1));--radio-outline-offset:var(--radio-outline-offset-focus)}.m3-radio input[type=radio]:disabled{box-shadow:none;cursor:not-allowed}.m3-radio input[type=radio]:checked:disabled:after,.m3-radio input[type=radio]:checked:disabled:before,.m3-radio input[type=radio]:disabled:after,.m3-radio input[type=radio]:disabled:before{--radio-border-color:color-mix(in srgb,var(--radio-unselect-primary),transparent var(--transparent-disabled));background-color:transparent;box-shadow:none}.m3-radio .m3-radio-label{color:var(--radio-unselect-primary);font-size:var(--radio-label-size)}.radio\:hover input[type=radio]:before{--radio-box-shadow:0 0 0 10px color-mix(in srgb,var(--radio-unselect-primary),transparent var(--transparent-3));--radio-background-color:color-mix(in srgb,var(--radio-unselect-primary),transparent var(--transparent-2))}.radio\:hover input[type=radio]:checked:before{--radio-box-shadow:0 0 0 10px color-mix(in srgb,var(--radio-select-primary),transparent var(--transparent-3));--radio-background-color:color-mix(in srgb,var(--radio-select-primary),transparent var(--transparent-2))}.radio\:press input[type=radio]:before{--radio-box-shadow:0 0 0 10px color-mix(in srgb,var(--radio-unselect-primary),transparent var(--transparent-2));--radio-background-color:color-mix(in srgb,var(--radio-unselect-primary),transparent var(--transparent-2))}.radio\:press input[type=radio]:checked:before{--radio-box-shadow:0 0 0 10px color-mix(in srgb,var(--radio-select-primary),transparent var(--transparent-2));--radio-background-color:color-mix(in srgb,var(--radio-select-primary),transparent var(--transparent-2))}.radio\:focus input[type=radio]:before{--radio-outline:1px solid color-mix(in srgb,var(--radio-unselect-primary),transparent var(--transparent-1));--radio-outline-offset:var(--radio-outline-offset-focus)}.radio\:focus input[type=radio]:checked:before{--radio-outline:1px solid color-mix(in srgb,var(--radio-select-primary),transparent var(--transparent-1));--radio-outline-offset:var(--radio-outline-offset-focus)}.m3-card{--overflow-hidden:hidden;--cursor-pointer:pointer;--cursor-grab:grab;--cursor-not-allowed:not-allowed;--card-background:var(--color-base-1);--card-width:auto;--card-height:auto;--card-padding:var(--space-10);--card-border:none;--card-border-radius:var(--radius-xl);--card-box-shadow:0 var(--space-1) var(--space-3) rgba(0,0,0,var(--opacity-40)),0 var(--space-1) var(--space-2) rgba(0,0,0,var(--opacity-50));--card-opacity:var(--opacity-100);--card-outline:none;--card-outline-offset:0;--card-transform:none;--card-focused-outline-color:var(--color-base-8);--card-overflow:var(--overflow-hidden);--card-cursor:var(--cursor-pointer);--card-transition:box-shadow var(--duration-5) var(--ease-out),transform var(--duration-5) var(--ease-out),opacity var(--duration-5) var(--ease-out);--card-content-padding:var(--space-10);--card-headline-margin-bottom:var(--space-3);--card-headline-font-size:var(--size-15);--card-headline-font-weight:var(--font-weight-semibold);--card-headline-color:var(--color-base-10);--card-headline-line-height:var(--size-19);--card-headline-letter-spacing:0;--card-subhead-margin-bottom:var(--space-3);--card-subhead-font-size:var(--size-10);--card-subhead-font-weight:var(--font-weight-normal);--card-subhead-color:var(--color-base-8);--card-subhead-line-height:var(--size-13);--card-subhead-letter-spacing:0;--card-supporting-text-font-size:var(--size-6);--card-supporting-text-font-weight:var(--font-weight-normal);--card-supporting-text-color:var(--color-base-10);--card-supporting-text-line-height:var(--size-9);--card-supporting-text-margin-bottom:var(--space-2);--card-supporting-text-letter-spacing:0}@media (prefers-color-scheme:dark){.m3-card{--card-background:var(--color-base-2);--card-headline-color:var(--color-base-10);--card-subhead-color:var(--color-base-8);--card-supporting-text-color:var(--color-base-9)}.m3-card.card-state\:focused{--card-focused-outline-color:var(--color-accent-2)}}.m3-card{background:var(--card-background);border:var(--card-border);border-radius:var(--card-border-radius);box-shadow:var(--card-box-shadow);cursor:var(--card-cursor);height:var(--card-height);opacity:var(--card-opacity);outline:var(--card-outline);outline-offset:var(--card-outline-offset);overflow:var(--card-overflow);padding:var(--card-padding);transform:var(--card-transform);transition:var(--card-transition);width:var(--card-width)}.m3-card.card-state\:enabled{--card-opacity:var(--opacity-100);--card-box-shadow:0px solid #000}.m3-card.card-state\:disabled,.m3-card.card-state\:disabled button{--card-opacity:var(--opacity-60);--card-cursor:var(--cursor-not-allowed)}.m3-card.card-state\:hovered{--card-opacity:var(--opacity-90)}.m3-card.card-state\:focused,.m3-card.card-state\:hovered{--card-box-shadow:0 var(--space-4) var(--space-4) rgba(0,0,0,.16),0 var(--space-2) var(--space-4) rgba(0,0,0,.23)}.m3-card.card-state\:focused{--card-outline:3px solid var(--card-focused-outline-color);--card-outline-offset:var(--space-2);--card-opacity:var(--opacity-90)}.m3-card.card-state\:dragged{--card-box-shadow:0 var(--space-4) var(--space-10) rgba(0,0,0,var(--opacity-25)),0 var(--space-6) var(--space-6) rgba(0,0,0,var(--opacity-30));--card-transform:scale(1.02);--card-opacity:var(--opacity-80);--card-cursor:var(--cursor-grap)}.m3-card .content{padding:var(--card-content-padding)}.m3-card .headline{color:var(--card-headline-color);font-size:var(--card-headline-font-size);font-weight:var(--card-headline-font-semibold);letter-spacing:var(--card-headline-letter-spacing);line-height:var(--card-headline-line-height);margin-bottom:var(--card-headline-margin-bottom)}.m3-card .subhead{color:var(--card-subhead-color);font-size:var(--card-subhead-font-size);font-weight:var(--card-subhead-font-weight);letter-spacing:var(--card-subhead-letter-spacing);line-height:var(--card-subhead-line-height);margin-bottom:var(--card-subhead-margin-bottom)}.m3-card .supporting-text{color:var(--card-supporting-text-color);font-size:var(--card-supporting-text-font-size);font-weight:var(--card-supporting-text-font-weight);letter-spacing:var(--card-supporting-text-letter-spacing);line-height:var(--card-supporting-text-line-height);margin-bottom:var(--card-supporting-text-margin-bottom)}.m3-dialog{--dialog-spec-min-width:280px;--dialog-spec-max-width:560px;--dialog-bg-color:var(--color-base-3);--dialog-radius:var(--space-17);--dialog-padding:var(--space-15);--dialog-min-width:var(--dialog-spec-min-width);--dialog-max-width:var(--dialog-spec-max-width);--dialog-color:var(--color-base-8);--dialog-headline-font-color:var(--color-base-10);--dialog-headline-font-size:var(--space-15);--dialog-headline-font-weight:var(--font-weight-4);--dialog-headline-margin-bottom:var(--space-14);--dialog-content-font-color:var(--color-base-8);--dialog-content-font-size:var(--space-8);--dialog-content-margin-bottom:var(--space-15);--dialog-content-line-height:var(--space-13);--dialog-actions-gap:var(--space-4);--dialog-btn-color:var(--color-sub-2);--dialog-btn-padding:var(--space-12) var(--space-10);--dialog-hovered-bg:color-mix(in srgb,var(--dialog-btn-color) 8%,transparent);--dialog-focused-bg:color-mix(in srgb,var(--dialog-btn-color) 10%,transparent);--dialog-pressed-bg:color-mix(in srgb,var(--dialog-btn-color) 10%,transparent)}@media (prefers-color-scheme:dark){.m3-dialog{--dialog-bg-color:var(--color-base-3);--dialog-headline-font-color:var(--color-base-10);--dialog-content-font-color:var(--color-base-8);--dialog-btn-color:var(--color-sub-2)}}.m3-dialog{background:var(--dialog-bg-color);border-radius:var(--dialog-radius);box-shadow:0 0 0 100vmax rgba(0,0,0,.4);box-sizing:border-box;color:var(--dialog-color);flex-direction:column;font-family:Roboto,Segoe UI,Helvetica Neue,Arial,sans-serif;height:fit-content;inset:0;margin:auto;max-width:var(--dialog-max-width);min-width:var(--dialog-min-width);padding:var(--dialog-padding);position:fixed;width:fit-content;.header,>:first-child{color:var(--dialog-headline-font-color);font-size:var(--dialog-headline-font-size);font-weight:var(--dialog-headline-font-weight);margin:0 0 var(--dialog-headline-margin-bottom) 0}.content,>:nth-child(2){color:var(--dialog-content-font-color);font-size:var(--dialog-content-font-size);line-height:var(--dialog-content-line-height);margin:0 0 var(--dialog-content-margin-bottom) 0}.actions,>:nth-child(3){display:flex;gap:var(--dialog-actions-gap);justify-content:flex-end}}
|