Repository navigation
Expand file tree
/
Copy pathvariables.css
More file actions
432 lines (423 loc) · 35.4 KB
/
Copy pathvariables.css
File metadata and controls
432 lines (423 loc) · 35.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
:root {
/* theme */
--theme-root-font-size: 14px;
--theme-accent-r: 25;
--theme-accent-g: 25;
--theme-accent-b: 25;
--theme-accent: var(--theme-accent-r), var(--theme-accent-g), var(--theme-accent-b);
--theme-accent-accessible-threshold: 0.5;
--theme-accent-accessible-r: calc(var(--theme-accent-r) * 0.50);
--theme-accent-accessible-g: calc(var(--theme-accent-g) * 0.60);
--theme-accent-accessible-b: calc(var(--theme-accent-b) * 0.20);
--theme-accent-accessible-sum: calc(var(--theme-accent-accessible-r) + var(--theme-accent-accessible-g) + var(--theme-accent-accessible-b));
--theme-accent-accessible-perceived-lightness: calc(var(--theme-accent-accessible-sum) / 255);
--theme-accent-accessible-color: 0, calc(0 * 1%), calc((var(--theme-accent-accessible-perceived-lightness) - var(--theme-accent-accessible-threshold)) * -10000000%);
--theme-radius: 0.2rem;
--theme-font-display-name: "Fjalla One", sans-serif;
--theme-font-display-weight: 400;
--theme-font-display-style: "normal";
--theme-font-ui-name: "Open Sans", sans-serif;
--theme-font-ui-weight: 400;
--theme-font-ui-style: "normal";
--theme-black: 0, 0, 0;
--theme-white: 255, 255, 255;
--theme-shade-negative-10: 25, 25, 25;
--theme-shade-negative-09: 25, 25, 25;
--theme-shade-negative-08: 25, 25, 25;
--theme-shade-negative-07: 25, 25, 25;
--theme-shade-negative-06: 25, 25, 25;
--theme-shade-negative-05: 25, 25, 25;
--theme-shade-negative-04: 25, 25, 25;
--theme-shade-negative-03: 25, 25, 25;
--theme-shade-negative-02: 25, 25, 25;
--theme-shade-negative-01: 25, 25, 25;
--theme-shade: 25, 25, 25;
--theme-shade-positive-01: 25, 25, 25;
--theme-shade-positive-02: 25, 25, 25;
--theme-shade-positive-03: 25, 25, 25;
--theme-shade-positive-04: 25, 25, 25;
--theme-shade-positive-05: 25, 25, 25;
--theme-shade-positive-06: 25, 25, 25;
--theme-shade-positive-07: 25, 25, 25;
--theme-shade-positive-08: 25, 25, 25;
--theme-shade-positive-09: 25, 25, 25;
--theme-shade-positive-10: 25, 25, 25;
--theme-preview-size: 6em;
--theme-custom-edit-height: 2.5em;
--theme-shadow: 1;
--theme-shadow-offset-y: 0.02em;
--theme-shadow-blur: 0.02em;
--theme-shadow-opacity: 0.02;
--theme-shadow-size-small: calc(var(--theme-shadow) * 1);
--theme-shadow-size-medium: calc(var(--theme-shadow) * 2);
--theme-shadow-size-large: calc(var(--theme-shadow) * 3);
--theme-shadow-bottom-small:
0 calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-offset-y) * 2)) calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-blur) * 4)) rgba(0, 0, 0, calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-opacity) * 1))),
0 calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-offset-y) * 4)) calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-blur) * 8)) rgba(0, 0, 0, calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-opacity) * 2))),
0 calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-offset-y) * 8)) calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-blur) * 16)) rgba(0, 0, 0, calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-opacity) * 3))),
0 calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-offset-y) * 16)) calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-blur) * 32)) rgba(0, 0, 0, calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-opacity) * 4)));
--theme-shadow-bottom-medium:
0 calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-offset-y) * 2)) calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-blur) * 4)) rgba(0, 0, 0, calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-opacity) * 1))),
0 calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-offset-y) * 4)) calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-blur) * 8)) rgba(0, 0, 0, calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-opacity) * 2))),
0 calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-offset-y) * 8)) calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-blur) * 16)) rgba(0, 0, 0, calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-opacity) * 3))),
0 calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-offset-y) * 16)) calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-blur) * 32)) rgba(0, 0, 0, calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-opacity) * 4)));
--theme-shadow-bottom-large:
0 calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-offset-y) * 2)) calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-blur) * 4)) rgba(0, 0, 0, calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-opacity) * 1))),
0 calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-offset-y) * 4)) calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-blur) * 8)) rgba(0, 0, 0, calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-opacity) * 2))),
0 calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-offset-y) * 8)) calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-blur) * 16)) rgba(0, 0, 0, calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-opacity) * 3))),
0 calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-offset-y) * 16)) calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-blur) * 32)) rgba(0, 0, 0, calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-opacity) * 4)));
--theme-shadow-top-small:
0 calc(var(--theme-shadow-size-small) * calc(calc(var(--theme-shadow-offset-y) * -1) * 2)) calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-blur) * 4)) rgba(0, 0, 0, calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-opacity) * 1))),
0 calc(var(--theme-shadow-size-small) * calc(calc(var(--theme-shadow-offset-y) * -1) * 4)) calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-blur) * 8)) rgba(0, 0, 0, calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-opacity) * 2))),
0 calc(var(--theme-shadow-size-small) * calc(calc(var(--theme-shadow-offset-y) * -1) * 8)) calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-blur) * 16)) rgba(0, 0, 0, calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-opacity) * 3))),
0 calc(var(--theme-shadow-size-small) * calc(calc(var(--theme-shadow-offset-y) * -1) * 16)) calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-blur) * 32)) rgba(0, 0, 0, calc(var(--theme-shadow-size-small) * calc(var(--theme-shadow-opacity) * 4)));
--theme-shadow-top-medium:
0 calc(var(--theme-shadow-size-medium) * calc(calc(var(--theme-shadow-offset-y) * -1) * 2)) calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-blur) * 4)) rgba(0, 0, 0, calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-opacity) * 1))),
0 calc(var(--theme-shadow-size-medium) * calc(calc(var(--theme-shadow-offset-y) * -1) * 4)) calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-blur) * 8)) rgba(0, 0, 0, calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-opacity) * 2))),
0 calc(var(--theme-shadow-size-medium) * calc(calc(var(--theme-shadow-offset-y) * -1) * 8)) calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-blur) * 16)) rgba(0, 0, 0, calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-opacity) * 3))),
0 calc(var(--theme-shadow-size-medium) * calc(calc(var(--theme-shadow-offset-y) * -1) * 16)) calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-blur) * 32)) rgba(0, 0, 0, calc(var(--theme-shadow-size-medium) * calc(var(--theme-shadow-opacity) * 4)));
--theme-shadow-top-large:
0 calc(var(--theme-shadow-size-large) * calc(calc(var(--theme-shadow-offset-y) * -1) * 2)) calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-blur) * 4)) rgba(0, 0, 0, calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-opacity) * 1))),
0 calc(var(--theme-shadow-size-large) * calc(calc(var(--theme-shadow-offset-y) * -1) * 4)) calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-blur) * 8)) rgba(0, 0, 0, calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-opacity) * 2))),
0 calc(var(--theme-shadow-size-large) * calc(calc(var(--theme-shadow-offset-y) * -1) * 8)) calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-blur) * 16)) rgba(0, 0, 0, calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-opacity) * 3))),
0 calc(var(--theme-shadow-size-large) * calc(calc(var(--theme-shadow-offset-y) * -1) * 16)) calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-blur) * 32)) rgba(0, 0, 0, calc(var(--theme-shadow-size-large) * calc(var(--theme-shadow-opacity) * 4)));
--theme-shade-opacity: 0.4;
/* header */
--header-area-width: 100%;
--header-color-theme: var(--theme-color-01);
--header-color-custom: rgb(0, 0, 0);
--header-opacity: 0.95;
--header-border-top: 0;
--header-border-bottom: 0;
--header-date-size: 1em;
--header-clock-size: 1em;
--header-search-size: 1em;
--header-search-width-size: 30%;
--header-search-opacity: 1;
--header-editadd-size: 1em;
--header-editadd-opacity: 1;
--header-coloraccent-size: 1em;
--header-coloraccent-opacity: 1;
--header-menu-size: 1em;
--header-menu-opacity: 1;
--header-greeting-size: 1em;
--header-transitional-size: 1em;
/* group */
--group-name-size: 1em;
--group-openall-size: 1em;
--group-openall-opacity: 1;
--group-border: 0;
/* link */
--link-area-width: 100%;
--link-item-color: var(--theme-color-02);
--link-item-color-opacity: 1;
--link-item-image-opacity: 1;
--link-item-color-focus-hover: var(--theme-color-03);
--link-item-size: 1em;
--link-item-display-space: 0.25em;
--link-item-display-gutter: 2;
--link-item-display-letter-size: 3em;
--link-item-display-icon-size: 3em;
--link-item-display-image-size: 3em;
--link-item-display-rotate: 0deg;
--link-item-display-translate-x: 0em;
--link-item-display-translate-y: 0em;
--link-item-display-name-size: 0.9em;
--link-item-border: 0;
--link-item-padding: 1;
--link-item-clip-padding: 1em;
--link-item-display-visual-shadow-size: 1;
--link-item-display-visual-shadow-offset: 0.02em;
--link-item-display-visual-shadow-blur: 0.02em;
--link-item-display-visual-shadow-opacity: 0.01;
--link-item-display-visual-shadow:
0 calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-offset) * 1)) calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-blur) * 2)) rgba(0, 0, 0, calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-opacity) * 1))),
0 calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-offset) * 2)) calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-blur) * 4)) rgba(0, 0, 0, calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-opacity) * 2))),
0 calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-offset) * 4)) calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-blur) * 6)) rgba(0, 0, 0, calc(var(--link-item-display-visual-shadow-size) * calc(var(--link-item-display-visual-shadow-opacity) * 3)));
/* layout */
--layout-size: 1;
--layout-width: 80%;
--layout-line-width: 0.2em;
--layout-space: 0.5em;
--layout-padding: 4;
--layout-gutter: 4;
--layout-duration-01: 0.1s;
--layout-duration-02: 0.2s;
--layout-duration-03: 0.3s;
--layout-duration-04: 0.4s;
--layout-duration-05: 0.5s;
--layout-duration-06: 0.6s;
--layout-duration-07: 0.7s;
--layout-duration-08: 0.8s;
--layout-duration-09: 0.9s;
--layout-duration-10: 1s;
--layout-timing-ease: ease-in-out;
--layout-timing-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);
--layout-transition-extra-fast: var(--layout-duration-02) var(--layout-timing-ease);
--layout-transition-fast: var(--layout-duration-04) var(--layout-timing-ease);
--layout-transition-medium: var(--layout-duration-06) var(--layout-timing-ease);
--layout-transition-slow: var(--layout-duration-08) var(--layout-timing-ease);
--layout-transition-extra-slow: var(--layout-duration-10) var(--layout-timing-ease);
--horizontal-rule-small: 1px solid rgb(var(--theme-color-02));
--horizontal-rule-large: 2px solid rgb(var(--theme-color-02));
/* background */
--background-color-theme: var(--theme-color-01);
--background-color-custom: rgb(0, 0, 0);
--background-image: none;
--background-opacity: 1;
--background-scale: 1;
--background-accent: 0;
--background-blur: 0;
--background-vignette-opacity: 0%;
--background-vignette-start: 90%;
--background-vignette-end: 70%;
/* form */
--form-label: var(--theme-color-16);
--form-label-hover: var(--theme-color-20);
--form-label-focus-active: var(--theme-style-text);
--form-label-checked: var(--theme-style-text);
--form-label-disabled: var(--theme-color-04);
--form-input-text: var(--theme-color-16);
--form-input-text-hover: var(--theme-color-18);
--form-input-text-focus-active: var(--theme-style-text);
--form-input-text-disabled: var(--theme-color-04);
--form-input-background: var(--theme-color-02);
--form-input-background-hover: var(--theme-color-02);
--form-input-background-focus-active: var(--theme-color-01);
--form-input-background-disabled: var(--theme-color-01);
--form-group-text-background: var(--theme-color-02);
--form-group-text-background-focus-hover: var(--theme-color-02);
--form-group-text-background-active: var(--theme-color-02);
--form-group-text-background-disabled: var(--theme-color-01);
--form-group-text-border: var(--theme-color-02);
--form-group-text-border-focus-hover: var(--theme-color-02);
--form-group-text-border-active: var(--theme-color-02);
--form-group-text-border-disabled: var(--theme-color-01);
--form-border-disabled: var(--theme-color-02);
--form-icon: var(--theme-color-08);
--form-icon-hover: var(--theme-color-16);
--form-icon-focus: var(--theme-color-18);
--form-icon-active: var(--theme-style-text);
--form-icon-checked: var(--theme-style-text);
--form-icon-disabled: var(--theme-color-04);
--form-icon-symbol: var(--theme-color-01);
--form-icon-symbol-active: var(--theme-color-01);
--form-icon-symbol-disabled: var(--theme-color-01);
--form-placeholder: var(--theme-color-06);
--form-placeholder-focus-hover: var(--theme-color-10);
--form-placeholder-disabled: var(--theme-color-03);
--form-checkbox-radio-label: var(--theme-color-12);
--form-checkbox-radio-checked-label: var(--theme-color-16);
--form-checkbox-radio-disabled-label: var(--theme-color-04);
--form-feedback-text: var(--theme-color-16);
--form-feedback-text-muted: var(--theme-color-12);
--form-feedback-text-disabled: var(--theme-color-04);
--form-feedback-background: var(--theme-color-02);
--form-feedback-background-disabled: var(--theme-color-01);
--form-feedback-border: var(--theme-color-04);
--form-feedback-border-disabled: var(--theme-color-02);
--form-helper: var(--theme-color-12);
--form-helper-disabled: var(--theme-color-04);
--form-thumb-size: 1.25em;
--form-range-thumb-background: var(--theme-color-16);
--form-range-thumb-background-hover: var(--theme-color-18);
--form-range-thumb-background-focus: var(--theme-style-text);
--form-range-thumb-background-active: var(--theme-style-text);
--form-range-thumb-background-disabled: var(--theme-color-03);
--form-range-track-background: var(--theme-color-06);
--form-range-track-background-focus-hover: var(--theme-color-04);
--form-range-track-background-active: var(--theme-color-03);
--form-range-track-background-disabled: var(--theme-color-02);
--form-range-progress-background: var(--theme-color-08);
--form-range-progress-background-active: var(--theme-accent);
--form-range-progress-background-disabled: var(--theme-color-02);
--form-grid-background: var(--theme-color-02);
--form-grid-background-hover: var(--theme-color-02);
--form-grid-background-focus: var(--theme-color-02);
--form-grid-background-disabled: var(--theme-color-01);
--form-grid-border: var(--theme-color-08);
--form-grid-border-hover-focus: var(--theme-color-20);
--form-grid-border-active: var(--theme-accent);
--form-grid-border-checked: var(--theme-accent);
--form-grid-border-disabled: var(--theme-color-04);
--form-dropdown-background: var(--theme-color-02);
--form-ring-hover: 0 0 0 var(--layout-line-width) rgb(var(--theme-color-06));
--form-ring-focus: 0 0 0 var(--layout-line-width) rgb(var(--theme-color-10)),
0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-color-10), 0.25);
--form-ring-accent: 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)),
0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-accent), 0.25);
--form-wrap-space: 1em;
/* utilities */
--utilities-muted: var(--theme-color-12);
--utilities-muted-hover: var(--theme-color-13);
--utilities-muted-focus-active: var(--theme-color-14);
--utilities-muted-checked: var(--theme-color-14);
--utilities-muted-disabled: var(--theme-color-04);
/* menu */
--menu-space: 0.75em;
--menu-edge-opacity: 0.75;
/* button */
--button-background: var(--theme-color-02);
--button-background-focus-hover: var(--theme-color-03);
--button-background-active: var(--theme-color-04);
--button-background-disabled: var(--theme-color-01);
--button-border: var(--theme-color-02);
--button-border-focus-hover: var(--theme-color-06);
--button-border-active: var(--theme-accent);
--button-border-disabled: var(--theme-color-01);
--button-text: var(--theme-color-12);
--button-text-focus-hover: var(--theme-color-20);
--button-text-active: var(--theme-style-text);
--button-text-disabled: var(--theme-color-04);
--button-link-text: var(--theme-color-12);
--button-link-text-focus-hover: var(--theme-style-text);
--button-link-text-active: var(--theme-style-text);
--button-link-text-disabled: var(--theme-color-04);
/* edge */
--edge-shadow: inset 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)),
inset 0 0 0 calc(var(--layout-line-width) * 4) rgba(var(--theme-accent), 0.1),
inset 0 0 0 calc(var(--layout-line-width) * 8) rgba(var(--theme-accent), 0.1);
/* z index */
--z-index-background: 1000;
--z-index-link: 2000;
--z-index-header: 3000;
--z-index-tip: 4000;
--z-index-shade: 5000;
--z-index-modal: 6000;
--z-index-menu: 7000;
--z-index-auto-suggest: 8000;
--z-index-dropdown: 9000;
--z-index-edge: 10000;
/* breakpoint */
/* can not be used in @media as of yet */
--breakpoint-sm: 550px;
--breakpoint-md: 700px;
--breakpoint-lg: 900px;
--breakpoint-xl: 1100px;
--breakpoint-xxl: 1600px;
}
.is-theme-style-dark {
/* theme */
--theme-color: var(--theme-shade);
--theme-color-01: var(--theme-shade-negative-10);
--theme-color-02: var(--theme-shade-negative-09);
--theme-color-03: var(--theme-shade-negative-08);
--theme-color-04: var(--theme-shade-negative-07);
--theme-color-05: var(--theme-shade-negative-06);
--theme-color-06: var(--theme-shade-negative-05);
--theme-color-07: var(--theme-shade-negative-04);
--theme-color-08: var(--theme-shade-negative-03);
--theme-color-09: var(--theme-shade-negative-02);
--theme-color-10: var(--theme-shade-negative-01);
--theme-color-11: var(--theme-shade-positive-01);
--theme-color-12: var(--theme-shade-positive-02);
--theme-color-13: var(--theme-shade-positive-03);
--theme-color-14: var(--theme-shade-positive-04);
--theme-color-15: var(--theme-shade-positive-05);
--theme-color-16: var(--theme-shade-positive-06);
--theme-color-17: var(--theme-shade-positive-07);
--theme-color-18: var(--theme-shade-positive-08);
--theme-color-19: var(--theme-shade-positive-09);
--theme-color-20: var(--theme-shade-positive-10);
--theme-style-text: var(--theme-white);
}
.is-theme-style-light {
/* theme */
--theme-color: var(--theme-shade);
--theme-color-01: var(--theme-shade-positive-10);
--theme-color-02: var(--theme-shade-positive-09);
--theme-color-03: var(--theme-shade-positive-08);
--theme-color-04: var(--theme-shade-positive-07);
--theme-color-05: var(--theme-shade-positive-06);
--theme-color-06: var(--theme-shade-positive-05);
--theme-color-07: var(--theme-shade-positive-04);
--theme-color-08: var(--theme-shade-positive-03);
--theme-color-09: var(--theme-shade-positive-02);
--theme-color-10: var(--theme-shade-positive-01);
--theme-color-11: var(--theme-shade-negative-01);
--theme-color-12: var(--theme-shade-negative-02);
--theme-color-13: var(--theme-shade-negative-03);
--theme-color-14: var(--theme-shade-negative-04);
--theme-color-15: var(--theme-shade-negative-05);
--theme-color-16: var(--theme-shade-negative-06);
--theme-color-17: var(--theme-shade-negative-07);
--theme-color-18: var(--theme-shade-negative-08);
--theme-color-19: var(--theme-shade-negative-09);
--theme-color-20: var(--theme-shade-negative-10);
--theme-style-text: var(--theme-black);
}
@media (prefers-color-scheme: light) {
.is-theme-style-system {
--theme-color: var(--theme-shade);
--theme-color-01: var(--theme-shade-positive-10);
--theme-color-02: var(--theme-shade-positive-09);
--theme-color-03: var(--theme-shade-positive-08);
--theme-color-04: var(--theme-shade-positive-07);
--theme-color-05: var(--theme-shade-positive-06);
--theme-color-06: var(--theme-shade-positive-05);
--theme-color-07: var(--theme-shade-positive-04);
--theme-color-08: var(--theme-shade-positive-03);
--theme-color-09: var(--theme-shade-positive-02);
--theme-color-10: var(--theme-shade-positive-01);
--theme-color-11: var(--theme-shade-negative-01);
--theme-color-12: var(--theme-shade-negative-02);
--theme-color-13: var(--theme-shade-negative-03);
--theme-color-14: var(--theme-shade-negative-04);
--theme-color-15: var(--theme-shade-negative-05);
--theme-color-16: var(--theme-shade-negative-06);
--theme-color-17: var(--theme-shade-negative-07);
--theme-color-18: var(--theme-shade-negative-08);
--theme-color-19: var(--theme-shade-negative-09);
--theme-color-20: var(--theme-shade-negative-10);
--theme-style-text: var(--theme-black);
}
}
@media (prefers-color-scheme: dark) {
.is-theme-style-system {
--theme-color: var(--theme-shade);
--theme-color-01: var(--theme-shade-negative-10);
--theme-color-02: var(--theme-shade-negative-09);
--theme-color-03: var(--theme-shade-negative-08);
--theme-color-04: var(--theme-shade-negative-07);
--theme-color-05: var(--theme-shade-negative-06);
--theme-color-06: var(--theme-shade-negative-05);
--theme-color-07: var(--theme-shade-negative-04);
--theme-color-08: var(--theme-shade-negative-03);
--theme-color-09: var(--theme-shade-negative-02);
--theme-color-10: var(--theme-shade-negative-01);
--theme-color-11: var(--theme-shade-positive-01);
--theme-color-12: var(--theme-shade-positive-02);
--theme-color-13: var(--theme-shade-positive-03);
--theme-color-14: var(--theme-shade-positive-04);
--theme-color-15: var(--theme-shade-positive-05);
--theme-color-16: var(--theme-shade-positive-06);
--theme-color-17: var(--theme-shade-positive-07);
--theme-color-18: var(--theme-shade-positive-08);
--theme-color-19: var(--theme-shade-positive-09);
--theme-color-20: var(--theme-shade-positive-10);
--theme-style-text: var(--theme-white);
}
}
.is-link-style-block {
/* link */
--link-item-width: 11em;
--link-item-height: 10em;
--link-item-url-height: 2.25em;
--link-item-edit-height: 5em;
}
.is-link-style-list {
/* link */
--link-item-width: 20em;
--link-item-height: 4em;
--link-item-url-height: 1.5em;
--link-item-edit-height: 2em;
}
.is-link-item-color-opacity {
--link-item-clip-padding: calc(0 * 1em);
}
@media (min-width: 700px) {
:root {
/* theme */
--theme-root-font-size: 16px;
}
}