Unicode text, UTF-8 text
1
:root, ::backdrop {
2
/* FONTS */
3
--body-font: /* body text */
4
normal /* style */
5
normal /* variant */
6
400 /* weight */
7
normal /* stretch */
8
1rem/1.25rem /* size / line height */
9
"Roboto", "Noto Sans", "DejaVu Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
10
;
11
--table-font:
12
normal /* style */
13
normal /* variant */
14
400 /* weight */
15
normal /* stretch */
16
0.9625rem/1.25rem /* size / line height */
17
"Roboto", "Noto Sans", "DejaVu Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
18
;
19
--table-header-font:
20
normal /* style */
21
normal /* variant */
22
500 /* weight */
23
normal /* stretch */
24
0.9625rem/1.25rem /* size / line height */
25
"Roboto", "Noto Sans", "DejaVu Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
26
;
27
--mono-font: /* code */
28
normal /* style */
29
normal /* variant */
30
300 /* weight */
31
normal /* stretch */
32
0.90625rem/1.25rem /* size / line height */
33
"Roboto Mono", "Noto Sans Mono", "Noto Mono", "DejaVu Sans Mono", "Source Code Pro", "Source Code", "source-pro-code", Cousine, Consolas, monospace /* family */
34
;
35
--keyboard-font: /* keyboard */
36
normal /* style */
37
normal /* variant */
38
600 /* weight */
39
normal /* stretch */
40
0.75rem/0.75rem /* size / line height */
41
"Roboto", "Noto Sans", "DejaVu Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
42
;
43
--button-font: /* buttons */
44
normal /* style */
45
normal /* variant */
46
600 /* weight */
47
normal /* stretch */
48
0.9375rem/1.25rem /* size / line height */
49
"Roboto", "Noto Sans", "DejaVu Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
50
;
51
--badge-font: /* badges */
52
normal /* style */
53
normal /* variant */
54
700 /* weight */
55
normal /* stretch */
56
0.825rem/1rem /* size / line height */
57
"Roboto", "Noto Sans", "DejaVu Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
58
;
59
--gui-font: /* everything not covered by something else */
60
var(--body-font);
61
--input-font: /* all inputs which show text */
62
var(--gui-font);
63
--textarea-font: /* textareas */
64
var(--mono-font);
65
--h6-font: /* h6 */
66
normal /* style */
67
normal /* variant */
68
700 /* weight */
69
normal /* stretch */
70
1rem/1.25rem /* size / line height */
71
"Roboto", "Noto Sans", "DejaVu Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
72
;
73
--h5-font: /* h5 */
74
normal /* style */
75
normal /* variant */
76
900 /* weight */
77
normal /* stretch */
78
1.125rem/1.25rem /* size / line height */
79
"Roboto", "Noto Sans", "DejaVu Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
80
;
81
--h4-font: /* h4 */
82
normal /* style */
83
normal /* variant */
84
700 /* weight */
85
normal /* stretch */
86
1.21875rem/1.5rem /* size / line height */
87
"Roboto", "Noto Sans", "DejaVu Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
88
;
89
--h3-font: /* h3 */
90
normal /* style */
91
normal /* variant */
92
400 /* weight */
93
normal /* stretch */
94
1.40625rem/1.75rem /* size / line height */
95
"Roboto", "Noto Sans", "DejaVu Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
96
;
97
--h2-font: /* h2 */
98
normal /* style */
99
normal /* variant */
100
300 /* weight */
101
normal /* stretch */
102
1.75rem/2rem /* size / line height */
103
"Roboto", "Noto Sans", "DejaVu Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
104
;
105
--h1-font: /* h1 */
106
normal /* style */
107
normal /* variant */
108
300 /* weight */
109
normal /* stretch */
110
2.25rem/2.75rem /* size / line height */
111
"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
112
;
113
--headline-font: /* h1 as a headline */
114
normal /* style */
115
normal /* variant */
116
100 /* weight */
117
normal /* stretch */
118
3.25rem/3.75rem /* size / line height */
119
"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
120
;
121
123
/* GENERAL COLOURS */
124
/* background */ /* foreground */
125
--color-primary: #3F51B5; --color-primary-text: #ffffff;
126
--color-primary-1: #303F9F; --color-primary-1-text: #ffffff;
127
--color-primary-2: #1A237E; --color-primary-2-text: #ffffff;
128
--color-primary-3: #7986CB; --color-primary-3-text: #000000;
129
--color-primary-4: #C5CAE9; --color-primary-4-text: #000000;
130
--color-accent: #E91E63; --color-accent-text: #ffffff;
132
--color-accent-1: #C2185B; --color-accent-1-text: #ffffff;
133
--color-accent-2: #880E4F; --color-accent-2-text: #ffffff;
134
--color-accent-3: #F06292; --color-accent-3-text: #000000;
135
--color-accent-4: #F8BBD0; --color-accent-4-text: #000000;
136
--color-background: #fafafa; --color-background-text: #000000df;
138
--color-caption-text: #000000b9;
139
--color-label-text: #000000df;
140
--color-error: #d50000; --color-error-text: #ffffff;
142
--color-alert: #ffab00; --color-alert-text: #000000;
143
--color-info: #00b8d4; --color-info-text: #000000;
144
--color-success: #00c853; --color-success-text: #ffffff;
145
--color-not-accent: transparent; --color-not-accent-text: var(--color-background-text);
147
148
--color-scheme: light;
149
/* CODE BLOCKS */
151
--color-code: #263238; --color-code-text: #ffffff;
152
--color-quote: #fafafa; --color-quote-text: #000000cc;
153
--color-short-code: #f5f5f5; --color-short-code-text: #000000cc;
154
--color-keyboard: #757575; --color-keyboard-text: #ffffff;
155
--color-scheme-code: dark;
157
--size-keyboard: 1.5em;
159
--padding-keyboard: 0.375em;
160
--padding-code: 12px;
161
--radius-code: 0;
163
--radius-short-code: 0.125em;
164
--border-code: none;
165
--border-short-code: none;
166
--shadow-keyboard: 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24);
168
/* BUTTONS */
170
--color-button: var(--color-primary); --color-button-text: var(--color-primary-text);
171
--color-button-hover: var(--color-primary); --color-button-hover-text: var(--color-primary-text);
172
--color-button-active: var(--color-primary); --color-button-active-text: var(--color-primary-text);
173
--color-flat-button: transparent; --color-flat-button-text: var(--color-primary);
174
--color-flat-button-hover: #3F51B520; --color-flat-button-hover-text: var(--color-primary-2);
175
--color-flat-button-active: #3F51B530; --color-flat-button-active-text: var(--color-primary-3);
176
--shadow-button: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 3px 6px 0 rgba(0, 0, 0, 0.24), 0 1px 4px 0 rgba(0, 0, 0, 0.12);
178
--shadow-button-hover: 0 7px 25px -10px rgba(0, 0, 0, 0.12), 0 7px 25px 0 rgba(0, 0, 0, 0.24), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
179
--shadow-flat-button: none;
180
--shadow-flat-button-hover: none;
181
--border-button: none;
183
--border-button-hover: none;
184
--border-flat-button: none;
185
--border-flat-button-hover: none;
186
--radius-button: 2px;
188
--radius-round-button: 100vmin;
189
--radius-flat-button: 2px;
190
191
--height-button: 36px;
192
--size-round-button: 48px;
193
--margin-round-button: 8px;
194
--padding-button: 4px 8px;
195
--padding-round-button: 8px;
196
--gap-button: 4px;
197
--min-width-button: 64px;
198
/* LINKS */
200
--color-link-text: #1e88e5;
201
--color-link-hover-text: #1565c0;
202
--color-link-active-text: #1e88e580;
203
--color-link-visited-text: #1e88e5;
204
--color-link-visited-hover-text: #1565c0;
205
/* TOASTS */
207
--color-callout: #546e7a; --color-callout-text: #ffffff;
208
--color-callout-1: #37474f; --color-callout-1-text: #ffffff;
209
--color-callout-2: #78909c; --color-callout-2-text: #ffffff;
210
--color-callout-button-text: var(--color-accent-4);
211
212
--border-toast: none;
213
--radius-toast: 2px;
214
--gap-toast: 8px;
215
--min-width-toast: 192px;
216
--max-width-toast: 50%;
217
--height-toast: 40px;
218
--padding-toast: 0 0 0 8px;
219
--toast-align-horizontal: end;
220
--toast-align-vertical: end;
221
--toast-stack: column-reverse wrap;
222
--margin-toast: 12px;
223
--shadow-toast: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 3px 6px 0 rgba(0, 0, 0, 0.24), 0 1px 4px 0 rgba(0, 0, 0, 0.12);
225
226
/* CHECKBOXES */
227
--color-checkbox: var(--color-not-accent); --color-checkbox-text: var(--color-accent);
228
--color-checkbox-hover: var(--color-not-accent); --color-checkbox-hover-text: var(--color-accent);
229
--color-checkbox-active: var(--color-accent); --color-checkbox-active-text: var(--color-accent-text);
230
--color-checkbox-indeterminate: var(--color-accent);--color-checkbox-indeterminate-text: var(--color-accent-text);
231
--color-checkbox-indeterminate-hover: var(--color-accent);--color-checkbox-indeterminate-hover-text: var(--color-accent-text);
232
--color-checkbox-active-hover: var(--color-accent);--color-checkbox-active-hover-text: var(--color-accent-text);
233
--color-radio: var(--color-not-accent); --color-radio-text: var(--color-accent);
234
--color-radio-active: var(--color-not-accent); --color-radio-active-text: var(--color-accent);
235
--color-radio-hover: var(--color-not-accent); --color-radio-hover-text: var(--color-accent);
236
--color-radio-active-hover: var(--color-not-accent);--color-radio-active-hover-text: var(--color-accent);
237
--border-checkbox: 0.125em solid currentColor;
239
--border-checkbox-checked: 0.125em solid var(--color-checkbox-active);
240
--border-checkbox-indeterminate: 0.125em solid var(--color-checkbox-indeterminate);
241
--border-checkbox-hover: 0.125em solid currentColor;
242
--border-checkbox-checked-hover: 0.125em solid var(--color-checkbox-active);
243
--border-checkbox-indeterminate-hover: 0.125em solid var(--color-checkbox-indeterminate);
244
--border-radio: 0.125em solid currentColor;
245
--border-radio-checked: 0.125em solid currentColor;
246
--border-radio-hover: 0.125em solid currentColor;
247
--border-radio-checked-hover: 0.125em solid currentColor;
248
--color-switch: #eeeeee; --color-switch-thumb: #757575;
250
--color-switch-on: var(--color-accent-4); --color-switch-thumb-on: var(--color-accent);
251
--color-switch-hover: #eeeeee; --color-switch-thumb-hover: #757575;
252
--color-switch-on-hover: var(--color-accent-4); --color-switch-thumb-on-hover: var(--color-accent);
253
--border-switch: none;
255
--border-switch-hover: none;
256
--radius-switch: 1em;
257
--height-switch: 0.75em;
258
--width-switch: 2em;
259
--border-switch-thumb: none;
260
--border-switch-thumb-hover: none;
261
--radius-switch-thumb: 1em;
262
--width-switch-thumb: 1em;
263
--height-switch-thumb: 1em;
264
--padding-switch-thumb: 0em; /* for some reason, you must set the unit */
265
--width-switch-thumb-hover: 1em;
266
--height-switch-thumb-hover: 1em;
267
--shadow-switch: 0 0 0 0 transparent; /* none */
269
--shadow-switch-thumb: 0 0 2px 0 rgba(0, 0, 0, 0.28), 0 0 3px 0 rgba(0, 0, 0, 0.40);
270
--shadow-switch-hover: 0 0 0 0 transparent; /* none */
271
--shadow-switch-thumb-hover: 0 0 2px 0 rgba(0, 0, 0, 0.28), 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 4px 0 rgba(0, 0, 0, 0.40);
272
--border-switch-on: none;
274
--border-switch-on-hover: none;
275
--border-switch-thumb-on: none;
276
--border-switch-thumb-on-hover: none;
277
--radius-switch-thumb-on: 1em;
278
--width-switch-thumb-on: 1em;
279
--height-switch-thumb-on: 1em;
280
--padding-switch-thumb-on: 0em; /* for some reason, you must set the unit */
281
--width-switch-thumb-on-hover: 1em;
282
--height-switch-thumb-on-hover: 1em;
283
--shadow-switch-on: 0 0 0 0 transparent; /* none */
285
--shadow-switch-thumb-on: 0 0 2px 0 rgba(0, 0, 0, 0.28), 0 0 3px 0 rgba(0, 0, 0, 0.40);
286
--shadow-switch-on-hover: 0 0 0 0 transparent; /* none */
287
--shadow-switch-thumb-on-hover: 0 0 2px 0 rgba(0, 0, 0, 0.28), 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 4px 0 rgba(0, 0, 0, 0.40);
288
--radius-checkbox: 0.125em;
290
--radius-radio: 1em;
291
--size-checkbox: 1em;
292
--shadow-form: 0 0 0 0 transparent; /* none */
294
--shadow-form-checked: 0 0 0 0 transparent; /* none */
295
--shadow-form-indeterminate: 0 0 0 0 transparent; /* none */
296
--shadow-form-hover: 0 0 0 0 transparent; /* none */
297
--shadow-form-checked-hover: 0 0 0 0 transparent; /* none */
298
--shadow-form-indeterminate-hover: 0 0 0 0 transparent; /* none */
299
/* RANGES */
301
--color-range: var(--color-accent-4); --color-range-text: var(--color-accent);
302
--color-range-hover: var(--color-accent-4); --color-range-hover-text: var(--color-accent);
303
--border-range: none;
305
--border-range-hover: none;
306
--radius-range: 1em;
307
--height-range: 0.75em;
308
--border-range-thumb: none;
309
--border-range-thumb-hover: none;
310
--position-range-thumb: -12.5%;
311
--position-range-thumb-hover: -12.5%;
312
--radius-range-thumb: 1em;
313
--width-range-thumb: 1em;
314
--height-range-thumb: 1em;
315
--width-range-thumb-hover: 1em;
316
--height-range-thumb-hover: 1em;
317
--shadow-range: 0 0 0 0 transparent; /* none */
318
--shadow-range-thumb: 0 0 2px 0 rgba(0, 0, 0, 0.28), 0 0 3px 0 rgba(0, 0, 0, 0.40);
319
--shadow-range-hover: 0 0 0 0 transparent; /* none */
320
--shadow-range-thumb-hover: 0 0 2px 0 rgba(0, 0, 0, 0.28), 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 4px 0 rgba(0, 0, 0, 0.40);
321
/* CARDS */
323
--color-card: #ffffff; --color-card-text: #000000df;
324
--color-figcaption-text: #000000df;
325
--radius-card: 0;
327
--outline-outlined-card: 1px solid #00000080;
328
--radius-outlined-card: 4px;
329
--border-card: none;
330
--shadow-card: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 3px 6px 0 rgba(0, 0, 0, 0.24), 0 1px 4px 0 rgba(0, 0, 0, 0.12);
331
--padding-card: 0 12px 12px 12px;
333
--padding-card-top: 12px;
334
--padding-card-figcaption: 0 12px 12px 12px;
335
--figure-max-size-horizontal-card: clamp(200px, 50%, 768px);
336
/* LAYOUT */
338
--gap-buttonbox: 4px;
339
--gap-label-checkbox: 4px;
340
--gap-label-input: 4px;
341
--gap-box: 16px;
342
/* NAVBAR */
344
--color-navbar: #546E7A; --color-navbar-text: var(--color-primary-text);
345
--color-navbar-link: var(--color-primary-text);
346
347
--height-navbar: 48px;
348
--width-navbar-button: 56px;
349
--padding-navbar: 12px;
350
--gap-navbar: 0;
351
--shadow-navbar: 0 7px 25px -10px rgba(0, 0, 0, 0.12), 0 7px 25px 0 rgba(0, 0, 0, 0.24), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
352
--border-navbar: none;
353
--radius-navbar: 0;
354
/* NAVRAIL */
356
--color-navrail: #455a64; --color-navrail-text: var(--color-primary-text);
357
--color-navrail-link: var(--color-primary-text);
358
--color-navrail-link-hover: var(--color-primary-3);
359
--color-navrail-link-selected: var(--color-primary-3);
360
--width-navrail: 72px;
362
--height-navrail-button: 56px;
363
--padding-navrail: 0;
364
--gap-navrail: 0;
365
--shadow-navrail: 0 7px 25px -10px rgba(0, 0, 0, 0.12), 0 7px 25px 0 rgba(0, 0, 0, 0.24), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
366
--border-navrail: none;
367
--radius-navrail: 0;
368
/* SIDENAV */
370
--color-sidenav: transparent; --color-sidenav-text: var(--color-caption-text);
371
--gap-sidenav-item: 1ch;
372
--padding-sidenav: 8px;
373
/* BREADCRUMBS */
375
--color-breadcrumbs: var(--color-navbar); --color-breadcrumbs-text: var(--color-navbar-text);
376
--color-breadcrumbs-link: var(--color-navbar-text);
377
--color-breadcrumbs-separator: var(--color-navbar-text);
378
--height-breadcrumbs: 48px;
380
--padding-breadcrumbs: 8px;
381
--shadow-breadcrumbs: var(--shadow-navbar);
382
--border-breadcrumbs: none;
383
--radius-breadcrumbs: 0;
384
--separator-breadcrumbs: " > ";
385
/* TABS */
387
--color-tab: var(--color-navbar); --color-tab-text: var(--color-navbar-text);
388
--color-tab-selected: var(--color-navbar); --color-tab-selected-text: var(--color-navbar-text);
389
--color-tab-hover: var(--color-navbar); --color-tab-hover-text: var(--color-navbar-text);
390
--color-tab-hover-selected: var(--color-navbar); --color-tab-hover-selected-text: var(--color-navbar-text);
391
--justify-tab-row: space-around;
393
--height-tab: 36px;
394
--width-tab: 80px;
395
--align-tab: center;
396
--border-tab: none;
397
--border-tab-selected: none;
398
--radius-tab: 0;
399
/* DIVIDERS */
401
--line-divider: 1px solid #00000080;
402
/* LISTS */
404
--style-unordered-list: disc;
405
--color-unordered-list-marker: currentColor;
406
--font-unordered-list-marker: var(--body-font);
407
--indent-unordered-list: 1em;
408
--style-ordered-list: decimal;
410
--color-ordered-list-marker: currentColor;
411
--font-ordered-list-marker: var(--body-font);
412
--indent-ordered-list: 1em;
413
/* TABLES */
415
--padding-cell: 1ch;
416
--border-cell-horizontal: 1px solid #00000020;
417
--border-cell-vertical: 1px solid #00000040;
418
--color-table: #fafafa; --color-table-text: #000000;
419
--color-row-odd: #00000010; --color-row-odd-text: #000000;
420
--color-row-even: transparent; --color-row-even-text: #000000;
421
--color-row-header: var(--color-primary-1); --color-row-header-text: var(--color-primary-1-text);
422
/* BADGES */
424
--border-badge: none;
425
--shadow-badge: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 3px 6px 0 rgba(0, 0, 0, 0.24), 0 1px 4px 0 rgba(0, 0, 0, 0.12);
426
--x-badge: 100%;
427
--y-badge: 25%;
428
--width-badge: 2.25ch;
429
--height-badge: 2.25ch;
430
--radius-badge: 3ch;
431
--padding-badge: 0.25ch;
432
--color-badge: var(--color-accent); --color-badge-text: var(--color-accent-text);
433
/* AVATARS */
435
--radius-avatar: 0;
436
/* BUBBLES */
438
--border-bubble: none;
439
--shadow-bubble: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 3px 6px 0 rgba(0, 0, 0, 0.24), 0 1px 4px 0 rgba(0, 0, 0, 0.12);
440
--radius-bubble: 1em;
441
--padding-bubble: 1ch;
442
--color-bubble: var(--color-accent-1); --color-bubble-text: var(--color-accent-1-text);
443
--color-bubble-alt: var(--color-accent-4); --color-bubble-alt-text: var(--color-accent-4-text);
444
/* INPUTS */
446
--color-input: #ffffff; --color-input-text: #000000bb;
447
--color-input-hover: #ffffff; --color-input-hover-text: #000000bb;
448
--color-input-active: #ffffff; --color-input-active-text: #000000df;
449
--color-flat-input: transparent; --color-flat-input-text: #000000bb;
450
--color-flat-input-hover: transparent; --color-flat-input-hover-text: #000000bb;
451
--color-flat-input-active: transparent; --color-flat-input-active-text: #000000df;
452
--shadow-input: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 3px 6px 0 rgba(0, 0, 0, 0.24), 0 1px 4px 0 rgba(0, 0, 0, 0.12);
454
--shadow-input-hover: 0 7px 25px -10px rgba(0, 0, 0, 0.12), 0 7px 25px 0 rgba(0, 0, 0, 0.24), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
455
--shadow-input-active: 0 7px 25px -10px rgba(0, 0, 0, 0.12), 0 7px 25px 0 rgba(0, 0, 0, 0.24), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
456
--shadow-flat-input: none;
457
--shadow-flat-input-hover: none;
458
--shadow-flat-input-active: none;
459
--border-input: none;
461
--border-input-hover: none;
462
--border-input-active: none;
463
--border-flat-input: none;
464
--border-flat-input-hover: none;
465
--border-flat-input-active: none;
466
--radius-input: 2px;
468
--radius-flat-input: 2px;
469
470
--height-input: 36px;
471
--padding-input: 4px 8px;
472
--min-width-input: 64px;
473
--size-input-icon: 16px;
475
/* TEXTAREAS */
477
--color-textarea: #ffffff; --color-textarea-text: #000000bb;
478
--color-textarea-hover: #ffffff; --color-textarea-hover-text: #000000bb;
479
--color-textarea-active: #ffffff; --color-textarea-active-text: #000000df;
480
--color-flat-textarea: transparent; --color-flat-textarea-text: #000000bb;
481
--color-flat-textarea-hover: transparent; --color-flat-textarea-hover-text: #000000bb;
482
--color-flat-textarea-active: transparent; --color-flat-textarea-active-text: #000000df;
483
--shadow-textarea: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 3px 6px 0 rgba(0, 0, 0, 0.24), 0 1px 4px 0 rgba(0, 0, 0, 0.12);
485
--shadow-textarea-hover: 0 7px 25px -10px rgba(0, 0, 0, 0.12), 0 7px 25px 0 rgba(0, 0, 0, 0.24), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
486
--shadow-textarea-active: 0 7px 25px -10px rgba(0, 0, 0, 0.12), 0 7px 25px 0 rgba(0, 0, 0, 0.24), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
487
--shadow-flat-textarea: none;
488
--shadow-flat-textarea-hover: none;
489
--shadow-flat-textarea-active: none;
490
--border-textarea: none;
492
--border-textarea-hover: none;
493
--border-textarea-active: none;
494
--border-flat-textarea: 1px solid #00000040;
495
--border-flat-textarea-hover: 1px solid #00000040;
496
--border-flat-textarea-active: 1px solid #00000040;
497
--radius-textarea: 2px;
499
--radius-flat-textarea: 8px;
500
501
--padding-textarea: 8px;
502
/* MENUS */
504
--color-toolbar: #ffffff; --color-toolbar-text: #000000bb;
505
--color-menu: #ffffff; --color-menu-text: #000000bb;
506
--color-menu-item: transparent; --color-menu-item-text: #000000bb;
507
--color-menu-item-hover: #00000010; --color-menu-item-hover-text: #000000bb;
508
509
--gap-toolbar: 4px;
510
--gap-menu: 0;
511
--border-toolbar: none;
512
--border-menu: none;
513
--border-menu-item: none;
514
--shadow-toolbar: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 3px 6px 0 rgba(0, 0, 0, 0.24), 0 1px 4px 0 rgba(0, 0, 0, 0.12);
515
--shadow-menu: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 3px 6px 0 rgba(0, 0, 0, 0.24), 0 1px 4px 0 rgba(0, 0, 0, 0.12);
516
--height-toolbar: 48px;
517
--height-menu-item: 24px;
518
--width-toolbar: fit-content;
519
--radius-toolbar: 0;
520
--radius-menu: 0;
521
--padding-toolbar: 4px;
522
--padding-menu: 2px 0;
523
--padding-menu-item: 2px 8px;
524
/* DIALOGS */
526
--color-modal-backdrop: radial-gradient(circle, #00000040 12.5%, #000000cc 100%);
527
--tap-highlight-color: transparent;
529
}
530
/* Make headings smaller */
532
@media screen and (max-width: 576px) {
533
h2 {
534
font-size: 1.59375rem;
535
line-height: 1.75rem;
536
}
537
h1 {
538
font-size: 2.0625rem;
539
line-height: 2.25rem;
540
}
541
h1.headline {
542
font-size: 2.4375rem;
543
line-height: 2.75rem;
544
font-weight: 300;
545
}
546
}
547
/* Extra styles */
549
h6 {
551
/* Make it look nicer */
552
text-transform: uppercase;
553
color: var(--color-accent);
554
}
555
:any-link, .link-button {
557
/* Make them nicer, not possible with the font property */
558
font-weight: 500;
559
text-decoration: underline;
560
text-decoration-thickness: .05em;
561
text-underline-offset: .1em;
562
}
563
button, .button, input[type=button], input[type=submit], input[type=reset], input[type="file"]::file-selector-button {
565
/* Make it look nicer */
566
text-transform: uppercase;
567
}
568
.toast-container li {
570
/* Toast appear */
571
animation: toastSlide 750ms cubic-bezier(0.16, 1, 0.3, 1);
572
transform-origin: bottom;
573
}
574
.toast-container li.removing {
576
/* Toast disappear */
577
animation: toastCompress 500ms cubic-bezier(0.55, 0, 1, 0.45);
578
}
579
.toast-container li.removing ~ li {
581
/* TODO */
582
}
583
@keyframes toastSlide {
585
0% {
586
opacity: 0;
587
transform: translateY(100vh);
588
}
589
100% {
591
opacity: 1;
592
transform: translateY(0);
593
}
594
}
595
@keyframes toastCompress {
597
0% {
598
transform: rotateX(0);
599
opacity: 1;
600
}
601
100% {
603
transform: rotateX(180deg);
604
opacity: 0;
605
}
606
}
607
input[type="checkbox"]:not(.switch):checked::after, input[type="checkbox"]:not(.switch):indeterminate::after, input[type="radio"]:checked::after {
609
/* Checked */
610
animation: check 250ms cubic-bezier(0.61, 1, 0.88, 1);
611
}
612
input[type="checkbox"]:not(.switch), input[type="radio"] {
614
/* Transition background */
615
transition: box-shadow 250ms cubic-bezier(0.61, 1, 0.88, 1);
616
}
617
input[type="checkbox"].switch::after {
619
/* Transition switch thumb */
620
transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 375ms cubic-bezier(0.61, 1, 0.88, 1);
621
}
622
input[type="range"]::-webkit-slider-thumb {
624
transition: box-shadow 375ms cubic-bezier(0.61, 1, 0.88, 1);
625
}
626
input[type="range"]::-moz-range-thumb {
628
transition: box-shadow 375ms cubic-bezier(0.61, 1, 0.88, 1);
629
}
630
button, .button, input[type="file"]::file-selector-button, input, select, textarea {
632
transition: box-shadow 375ms cubic-bezier(0.5, 1, 0.89, 1), background 375ms cubic-bezier(0.5, 1, 0.89, 1), color 375ms cubic-bezier(0.5, 1, 0.89, 1);
633
}
634
@keyframes check {
636
0% {
637
transform: scale(0);
638
}
639
100% {
641
transform: scale(1);
642
}
643
}
644
.navbar {
646
position: sticky;
647
}
648
:is(.navbar, .breadcrumbs) a:not(:hover) {
650
text-decoration: none;
651
}
652
x-notebook > label:has(input[type="radio"]:checked) {
654
border-bottom: 4px solid var(--color-accent);
655
transition: border 125ms ease;
656
}
657
x-notebook > label {
659
text-transform: uppercase;
660
font-weight: 600;
661
flex: 1 0 auto;
662
}
663
th, ol.table > li.list-header {
665
border: none;
666
}
667
th, td {
669
text-align: start;
670
}
671
.chat-bubble::before {
673
content: "";
674
position: absolute;
675
width: 1em;
676
height: 1em;
677
border: 0.75em solid;
678
border-color: transparent var(--color-bubble) transparent transparent;
679
left: -1.5em;
680
top: 1em;
681
}
682
.bubble-alt::before {
684
content: "";
685
position: absolute;
686
width: 1em;
687
height: 1em;
688
border: 0.75em solid;
689
border-color: transparent transparent transparent var(--color-bubble-alt);
690
transform: translateX(100%);
691
width: 100%;
692
left: 0;
693
top: 1em;
694
}
695
::placeholder {
697
opacity: 0.5;
698
}
699
:is(input:not([type=button], [type=checkbox], [type=radio], [type=submit], [type=reset], [type=file], [type=range], [type=color]), select).input-flat {
701
border-bottom: 2px solid var(--color-primary) !important;
702
}
703
:disabled {
705
opacity: 0.5;
706
}
707
input[type="color"] {
709
padding: 0;
710
border: 0;
711
overflow: hidden;
712
}
713
input[type="color"]::-webkit-color-swatch {
715
border: none;
716
}
717
input[type="color"]::-webkit-color-swatch-wrapper {
719
padding: 0;
720
}
721
:is(input:not([type=button], [type=checkbox], [type=radio], [type=submit], [type=reset], [type=file], [type=range]), select, textarea):focus {
723
outline: none; /* there is a blinking cursor, better not to have an outline */
724
}
725
textarea {
727
font: var(--mono-font);
728
}
729
button:has(iconify-icon) {
731
min-width: var(--height-button);
732
}
733
details.dropdown[open] > summary ~ * {
735
animation: menu 375ms cubic-bezier(0.22, 1, 0.36, 1);
736
transform-origin: top;
737
}
738
@keyframes menu {
740
0% {
741
transform: rotateX(-90deg);
742
opacity: 0;
743
}
744
100% {
746
transform: rotateX(0);
747
opacity: 1;
748
}
749
}
750
details.slidein[open] > summary ~ * {
752
animation: menu2 375ms cubic-bezier(0.22, 1, 0.36, 1);
753
transform-origin: left;
754
}
755
@keyframes menu2 {
757
0% {
758
transform: rotateY(-90deg);
759
opacity: 0;
760
}
761
100% {
763
transform: rotateY(0);
764
opacity: 1;
765
}
766
}
767
dialog:modal {
769
animation: entranceY 500ms cubic-bezier(0.33, 1, 0.68, 1);
770
transform-origin: center;
771
}
772
dialog {
774
transition: opacity 250ms cubic-bezier(0.33, 1, 0.68, 1);
775
}
776
dialog.sheet-left:modal {
778
animation: entranceX 500ms cubic-bezier(0.33, 1, 0.68, 1);
779
transform-origin: left;
780
}
781
dialog.sheet-right:modal {
783
animation: entranceX 500ms cubic-bezier(0.33, 1, 0.68, 1);
784
transform-origin: right;
785
}
786
dialog.sheet-top:modal {
788
animation: entranceY 500ms cubic-bezier(0.33, 1, 0.68, 1);
789
transform-origin: top;
790
}
791
dialog.sheet-bottom:modal {
793
animation: entranceY 500ms cubic-bezier(0.33, 1, 0.68, 1);
794
transform-origin: bottom;
795
}
796
dialog::backdrop {
798
backdrop-filter: saturate(0.5) contrast(0.5) brightness(1.25) blur(2px);
799
}
800
@keyframes entranceX {
802
0% {
803
transform: rotateY(-90deg);
804
}
805
100% {
806
transform: rotateY(0);
807
}
808
}
809
@keyframes entranceY {
811
0% {
812
transform: rotateX(-90deg);
813
}
814
100% {
815
transform: rotateX(0);
816
}
817
}
818
@keyframes fade {
820
0% {
821
opacity: 0;
822
}
823
100% {
824
opacity: 1;
825
}
826
}
827
:where(.navrail, .navbar, .sidenav) > iconify-icon {
829
font-size: 1.5rem;
830
}
831
.navbar > *, .navbar > ul > li > * {
833
min-height: var(--height-navbar);
834
display: flex;
835
align-items: center;
836
justify-content: center;
837
}
838
header:has(.navbar) .breadcrumbs {
840
z-index: 2 !important;
841
position: relative;
842
box-shadow: none;
843
}
844
.navbar a {
846
font-weight: 500;
847
}
848
x-notebook > label:has(input[type="radio"]:checked) {
850
background: var(--color-tab-selected);
851
color: var(--color-tab-selected-text);
852
border: none;
853
box-shadow: inset 0 -4px 0 var(--color-accent);
854
transition: box-shadow 125ms ease;
855
}
856
x-notebook > label:has(input[type="radio"]) {
858
transition: box-shadow 125ms ease;
859
}
860
* {
862
-webkit-tap-highlight-color: var(--tap-highlight-color);
863
}
864