Unicode text, UTF-8 text
1
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
2
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;0,700;1,300;1,700&display=swap');
3
:root, ::backdrop {
5
/* FONTS */
6
--body-font: /* body text */
7
normal /* style */
8
normal /* variant */
9
400 /* weight */
10
normal /* stretch */
11
16px/1.33 /* size / line height */
12
"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
13
;
14
--table-font:
15
normal /* style */
16
normal /* variant */
17
400 /* weight */
18
normal /* stretch */
19
15.4px/1.33 /* size / line height */
20
"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
21
;
22
--table-header-font:
23
normal /* style */
24
normal /* variant */
25
500 /* weight */
26
normal /* stretch */
27
15.4px/1.33 /* size / line height */
28
"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
29
;
30
--mono-font: /* code */
31
normal /* style */
32
normal /* variant */
33
300 /* weight */
34
normal /* stretch */
35
0.9em/1.2 /* size / line height */
36
"Roboto Mono", "Noto Sans Mono", "Noto Mono", "Source Code Pro", "Source Code", "source-pro-code", Cousine, Consolas, monospace /* family */
37
;
38
--keyboard-font: /* keyboard */
39
normal /* style */
40
normal /* variant */
41
600 /* weight */
42
normal /* stretch */
43
0.8em/1 /* size / line height */
44
"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
45
;
46
--button-font: /* buttons */
47
normal /* style */
48
normal /* variant */
49
600 /* weight */
50
normal /* stretch */
51
15px/1 /* size / line height */
52
"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
53
;
54
--badge-font: /* badges */
55
normal /* style */
56
normal /* variant */
57
700 /* weight */
58
normal /* stretch */
59
13.2px/1 /* size / line height */
60
"Roboto Mono", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
61
;
62
--gui-font: /* everything not covered by something else */
63
var(--body-font);
64
--input-font: /* all inputs which show text */
65
var(--gui-font);
66
--textarea-font: /* textareas */
67
var(--mono-font);
68
--h6-font: /* h6 */
69
normal /* style */
70
normal /* variant */
71
700 /* weight */
72
normal /* stretch */
73
15px/1.33 /* size / line height */
74
"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
75
;
76
--h5-font: /* h5 */
77
normal /* style */
78
normal /* variant */
79
900 /* weight */
80
normal /* stretch */
81
18px/1.315 /* size / line height */
82
"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
83
;
84
--h4-font: /* h4 */
85
normal /* style */
86
normal /* variant */
87
700 /* weight */
88
normal /* stretch */
89
19.5px/1.30 /* size / line height */
90
"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
91
;
92
--h3-font: /* h3 */
93
normal /* style */
94
normal /* variant */
95
400 /* weight */
96
normal /* stretch */
97
22.5px/1.30 /* size / line height */
98
"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
99
;
100
--h2-font: /* h2 */
101
normal /* style */
102
normal /* variant */
103
300 /* weight */
104
normal /* stretch */
105
28px/1.30 /* size / line height */
106
"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
107
;
108
--h1-font: /* h1 */
109
normal /* style */
110
normal /* variant */
111
300 /* weight */
112
normal /* stretch */
113
36px/1.30 /* size / line height */
114
"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
115
;
116
--headline-font: /* h1 as a headline */
117
normal /* style */
118
normal /* variant */
119
100 /* weight */
120
normal /* stretch */
121
52px/1.30 /* size / line height */
122
"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
123
;
124
125
/* GENERAL COLOURS */
126
/* background */ /* foreground */
127
--color-primary: #3F51B5; --color-primary-text: #ffffff;
128
--color-primary-1: #303F9F; --color-primary-1-text: #ffffff;
129
--color-primary-2: #1A237E; --color-primary-2-text: #ffffff;
130
--color-primary-3: #7986CB; --color-primary-3-text: #000000;
131
--color-primary-4: #C5CAE9; --color-primary-4-text: #000000;
132
--color-accent: #E91E63; --color-accent-text: #ffffff;
134
--color-accent-1: #C2185B; --color-accent-1-text: #ffffff;
135
--color-accent-2: #880E4F; --color-accent-2-text: #ffffff;
136
--color-accent-3: #F06292; --color-accent-3-text: #000000;
137
--color-accent-4: #F8BBD0; --color-accent-4-text: #000000;
138
--color-background: #fafafa; --color-background-text: #000000df;
140
--color-caption-text: #000000b9;
141
--color-label-text: #000000df;
142
--color-error: #d50000; --color-error-text: #ffffff;
144
--color-alert: #ffab00; --color-alert-text: #000000;
145
--color-info: #00b8d4; --color-info-text: #000000;
146
--color-success: #00c853; --color-success-text: #ffffff;
147
--color-not-accent: transparent; --color-not-accent-text: var(--color-background-text);
149
150
--color-scheme: light;
151
/* CODE BLOCKS */
153
--color-code: #263238; --color-code-text: #ffffff;
154
--color-quote: #fafafa; --color-quote-text: #000000cc;
155
--color-short-code: #f5f5f5; --color-short-code-text: #000000cc;
156
--color-keyboard: #757575; --color-keyboard-text: #ffffff;
157
--color-scheme-code: dark;
159
--size-keyboard: 1.5em;
161
--padding-keyboard: 0.375em;
162
--padding-code: 12px;
163
--radius-code: 0;
165
--radius-short-code: 0.125em;
166
--border-code: none;
167
--border-short-code: none;
168
--shadow-keyboard: 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24);
170
/* BUTTONS */
172
--color-button: var(--color-primary); --color-button-text: var(--color-primary-text);
173
--color-button-hover: var(--color-primary); --color-button-hover-text: var(--color-primary-text);
174
--color-button-active: var(--color-primary); --color-button-active-text: var(--color-primary-text);
175
--color-flat-button: transparent; --color-flat-button-text: var(--color-primary);
176
--color-flat-button-hover: #00000020; --color-flat-button-hover-text: var(--color-primary-2);
177
--color-flat-button-active: #00000030; --color-flat-button-active-text: var(--color-primary-3);
178
--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);
180
--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);
181
--shadow-flat-button: none;
182
--shadow-flat-button-hover: none;
183
--border-button: none;
185
--border-button-hover: none;
186
--border-flat-button: none;
187
--border-flat-button-hover: none;
188
--radius-button: 2px;
190
--radius-flat-button: 2px;
191
192
--height-button: 36px;
193
--padding-button: 4px 8px;
194
--gap-button: 4px;
195
--min-width-button: 64px;
196
/* LINKS */
198
--color-link-text: #1e88e5;
199
--color-link-hover-text: #1565c0;
200
--color-link-active-text: #1e88e580;
201
--color-link-visited-text: #1e88e5;
202
--color-link-visited-hover-text: #1565c0;
203
/* TOASTS */
205
--color-callout: #546e7a; --color-callout-text: #ffffff;
206
--color-callout-1: #37474f; --color-callout-1-text: #ffffff;
207
--color-callout-2: #78909c; --color-callout-2-text: #ffffff;
208
--color-callout-button-text: var(--color-accent-4);
209
210
--border-toast: none;
211
--radius-toast: 2px;
212
--gap-toast: 8px;
213
--min-width-toast: 192px;
214
--max-width-toast: 50%;
215
--height-toast: 40px;
216
--padding-toast: 0 0 0 8px;
217
--toast-align-horizontal: end;
218
--toast-align-vertical: end;
219
--toast-stack: column-reverse wrap;
220
--margin-toast: 12px;
221
--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);
223
224
/* CHECKBOXES */
225
--color-checkbox: var(--color-not-accent); --color-checkbox-text: var(--color-accent);
226
--color-checkbox-hover: var(--color-not-accent); --color-checkbox-hover-text: var(--color-accent);
227
--color-checkbox-active: var(--color-accent); --color-checkbox-active-text: var(--color-accent-text);
228
--color-checkbox-indeterminate: var(--color-accent);--color-checkbox-indeterminate-text: var(--color-accent-text);
229
--color-checkbox-indeterminate-hover: var(--color-accent);--color-checkbox-indeterminate-hover-text: var(--color-accent-text);
230
--color-checkbox-active-hover: var(--color-accent);--color-checkbox-active-hover-text: var(--color-accent-text);
231
--color-radio: var(--color-not-accent); --color-radio-text: var(--color-accent);
232
--color-radio-active: var(--color-not-accent); --color-radio-active-text: var(--color-accent);
233
--color-radio-hover: var(--color-not-accent); --color-radio-hover-text: var(--color-accent);
234
--color-radio-active-hover: var(--color-not-accent);--color-radio-active-hover-text: var(--color-accent);
235
--border-checkbox: 0.125em solid currentColor;
237
--border-checkbox-checked: 0.125em solid var(--color-checkbox-active);
238
--border-checkbox-indeterminate: 0.125em solid var(--color-checkbox-indeterminate);
239
--border-checkbox-hover: 0.125em solid currentColor;
240
--border-checkbox-checked-hover: 0.125em solid var(--color-checkbox-active);
241
--border-checkbox-indeterminate-hover: 0.125em solid var(--color-checkbox-indeterminate);
242
--border-radio: 0.125em solid currentColor;
243
--border-radio-checked: 0.125em solid currentColor;
244
--border-radio-hover: 0.125em solid currentColor;
245
--border-radio-checked-hover: 0.125em solid currentColor;
246
--color-switch: #eeeeee; --color-switch-thumb: #757575;
248
--color-switch-on: var(--color-accent-4); --color-switch-thumb-on: var(--color-accent);
249
--color-switch-hover: #eeeeee; --color-switch-thumb-hover: #757575;
250
--color-switch-on-hover: var(--color-accent-4); --color-switch-thumb-on-hover: var(--color-accent);
251
--border-switch: none;
253
--border-switch-hover: none;
254
--radius-switch: 1em;
255
--height-switch: 0.75em;
256
--width-switch: 2em;
257
--border-switch-thumb: none;
258
--border-switch-thumb-hover: none;
259
--radius-switch-thumb: 1em;
260
--width-switch-thumb: 1em;
261
--height-switch-thumb: 1em;
262
--padding-switch-thumb: 0em; /* for some reason, you must set the unit */
263
--width-switch-thumb-hover: 1em;
264
--height-switch-thumb-hover: 1em;
265
--shadow-switch: 0 0 0 0 transparent; /* none */
267
--shadow-switch-thumb: 0 0 2px 0 rgba(0, 0, 0, 0.28), 0 0 3px 0 rgba(0, 0, 0, 0.40);
268
--shadow-switch-hover: 0 0 0 0 transparent; /* none */
269
--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);
270
--border-switch-on: none;
272
--border-switch-on-hover: none;
273
--border-switch-thumb-on: none;
274
--border-switch-thumb-on-hover: none;
275
--radius-switch-thumb-on: 1em;
276
--width-switch-thumb-on: 1em;
277
--height-switch-thumb-on: 1em;
278
--padding-switch-thumb-on: 0em; /* for some reason, you must set the unit */
279
--width-switch-thumb-on-hover: 1em;
280
--height-switch-thumb-on-hover: 1em;
281
--shadow-switch-on: 0 0 0 0 transparent; /* none */
283
--shadow-switch-thumb-on: 0 0 2px 0 rgba(0, 0, 0, 0.28), 0 0 3px 0 rgba(0, 0, 0, 0.40);
284
--shadow-switch-on-hover: 0 0 0 0 transparent; /* none */
285
--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);
286
--radius-checkbox: 0.125em;
288
--radius-radio: 1em;
289
--size-checkbox: 1em;
290
--shadow-form: 0 0 0 0 transparent; /* none */
292
--shadow-form-checked: 0 0 0 0 transparent; /* none */
293
--shadow-form-indeterminate: 0 0 0 0 transparent; /* none */
294
--shadow-form-hover: 0 0 0 0 transparent; /* none */
295
--shadow-form-checked-hover: 0 0 0 0 transparent; /* none */
296
--shadow-form-indeterminate-hover: 0 0 0 0 transparent; /* none */
297
/* RANGES */
299
--color-range: var(--color-accent-4); --color-range-text: var(--color-accent);
300
--color-range-hover: var(--color-accent-4); --color-range-hover-text: var(--color-accent);
301
--border-range: none;
303
--border-range-hover: none;
304
--radius-range: 1em;
305
--height-range: 0.75em;
306
--border-range-thumb: none;
307
--border-range-thumb-hover: none;
308
--position-range-thumb: -12.5%;
309
--position-range-thumb-hover: -12.5%;
310
--radius-range-thumb: 1em;
311
--width-range-thumb: 1em;
312
--height-range-thumb: 1em;
313
--width-range-thumb-hover: 1em;
314
--height-range-thumb-hover: 1em;
315
--shadow-range: 0 0 0 0 transparent; /* none */
316
--shadow-range-thumb: 0 0 2px 0 rgba(0, 0, 0, 0.28), 0 0 3px 0 rgba(0, 0, 0, 0.40);
317
--shadow-range-hover: 0 0 0 0 transparent; /* none */
318
--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);
319
/* CARDS */
321
--color-card: #ffffff; --color-card-text: #000000df;
322
--color-figcaption-text: #000000df;
323
--radius-card: 0;
325
--outline-outlined-card: 1px solid #00000080;
326
--radius-outlined-card: 4px;
327
--border-card: none;
328
--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);
329
--padding-card: 0 12px 12px 12px;
331
--padding-card-top: 12px;
332
--padding-card-figcaption: 0 12px 12px 12px;
333
--figure-max-size-horizontal-card: clamp(200px, 50%, 768px);
334
/* LAYOUT */
336
--gap-buttonbox: 4px;
337
--gap-label-checkbox: 4px;
338
--gap-box: 16px;
339
/* NAVBAR */
341
--color-navbar: #546E7A; --color-navbar-text: var(--color-primary-text);
342
--color-navbar-link: var(--color-primary-text);
343
344
--height-navbar: 56px;
345
--padding-navbar: 16px;
346
--gap-navbar: 8px;
347
--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);
348
--border-navbar: none;
349
--radius-navbar: 0;
350
/* BREADCRUMBS */
352
--color-breadcrumbs: #455A64; --color-breadcrumbs-text: var(--color-primary-1-text);
353
--color-breadcrumbs-link: var(--color-primary-1-text);
354
--color-breadcrumbs-separator: var(--color-primary-3);
355
--height-breadcrumbs: 32px;
357
--padding-breadcrumbs: 16px;
358
--shadow-breadcrumbs: none;
359
--border-breadcrumbs: none;
360
--radius-breadcrumbs: 0;
361
--separator-breadcrumbs: " > ";
362
/* TABS */
364
--color-tab: var(--color-primary); --color-tab-text: var(--color-primary-text);
365
--color-tab-selected: var(--color-primary); --color-tab-selected-text: var(--color-primary-text);
366
--color-tab-hover: var(--color-primary); --color-tab-hover-text: var(--color-primary-text);
367
--color-tab-hover-selected: var(--color-primary);--color-tab-hover-selected-text: var(--color-primary-text);
368
--justify-tab-row: space-around;
370
--height-tab: 36px;
371
--width-tab: 80px;
372
--align-tab: center;
373
--border-tab: none;
374
--border-tab-selected: 0 0 4px solid var(--color-accent) 0;
375
--radius-tab: 0;
376
/* DIVIDERS */
378
--line-divider: 1px solid #00000080;
379
/* LISTS */
381
--style-unordered-list: disc;
382
--color-unordered-list-marker: currentColor;
383
--font-unordered-list-marker: var(--body-font);
384
--indent-unordered-list: 1em;
385
--style-ordered-list: decimal;
387
--color-ordered-list-marker: currentColor;
388
--font-ordered-list-marker: var(--body-font);
389
--indent-ordered-list: 1em;
390
/* TABLES */
392
--padding-cell: 1ch;
393
--border-cell-horizontal: 1px solid #00000020;
394
--border-cell-vertical: 1px solid #00000040;
395
--color-table: #fafafa; --color-table-text: #000000;
396
--color-row-odd: #00000010; --color-row-odd-text: #000000;
397
--color-row-even: transparent; --color-row-even-text: #000000;
398
--color-row-header: var(--color-primary-1); --color-row-header-text: var(--color-primary-1-text);
399
/* BADGES */
401
--border-badge: none;
402
--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);
403
--x-badge: 100%;
404
--y-badge: 25%;
405
--width-badge: 2.25ch;
406
--height-badge: 2.25ch;
407
--radius-badge: 3ch;
408
--padding-badge: 0.25ch;
409
--color-badge: var(--color-accent); --color-badge-text: var(--color-accent-text);
410
/* AVATARS */
412
--radius-avatar: 50%;
413
/* BUBBLES */
415
--border-bubble: none;
416
--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);
417
--radius-bubble: 1em;
418
--padding-bubble: 1ch;
419
--color-bubble: var(--color-accent-1); --color-bubble-text: var(--color-accent-1-text);
420
--color-bubble-alt: var(--color-accent-4); --color-bubble-alt-text: var(--color-accent-4-text);
421
/* INPUTS */
423
--color-input: #ffffff; --color-input-text: #000000bb;
424
--color-input-hover: #ffffff; --color-input-hover-text: #000000bb;
425
--color-input-active: #ffffff; --color-input-active-text: #000000df;
426
--color-flat-input: transparent; --color-flat-input-text: #000000bb;
427
--color-flat-input-hover: transparent; --color-flat-input-hover-text: #000000bb;
428
--color-flat-input-active: transparent; --color-flat-input-active-text: #000000df;
429
--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);
431
--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);
432
--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);
433
--shadow-flat-input: none;
434
--shadow-flat-input-hover: none;
435
--shadow-flat-input-active: none;
436
--border-input: none;
438
--border-input-hover: none;
439
--border-input-active: none;
440
--border-flat-input: none;
441
--border-flat-input-hover: none;
442
--border-flat-input-active: none;
443
--radius-input: 2px;
445
--radius-flat-input: 2px;
446
447
--height-input: 36px;
448
--padding-input: 4px 8px;
449
--min-width-input: 64px;
450
--size-input-icon: 16px;
452
/* TEXTAREAS */
454
--color-textarea: #ffffff; --color-textarea-text: #000000bb;
455
--color-textarea-hover: #ffffff; --color-textarea-hover-text: #000000bb;
456
--color-textarea-active: #ffffff; --color-textarea-active-text: #000000df;
457
--color-flat-textarea: transparent; --color-flat-textarea-text: #000000bb;
458
--color-flat-textarea-hover: transparent; --color-flat-textarea-hover-text: #000000bb;
459
--color-flat-textarea-active: transparent; --color-flat-textarea-active-text: #000000df;
460
--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);
462
--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);
463
--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);
464
--shadow-flat-textarea: none;
465
--shadow-flat-textarea-hover: none;
466
--shadow-flat-textarea-active: none;
467
--border-textarea: none;
469
--border-textarea-hover: none;
470
--border-textarea-active: none;
471
--border-flat-textarea: 1px solid #00000040;
472
--border-flat-textarea-hover: 1px solid #00000040;
473
--border-flat-textarea-active: 1px solid #00000040;
474
--radius-textarea: 2px;
476
--radius-flat-textarea: 8px;
477
478
--padding-textarea: 8px;
479
/* MENUS */
481
--color-toolbar: #ffffff; --color-toolbar-text: #000000bb;
482
--color-menu: #ffffff; --color-menu-text: #000000bb;
483
--color-menu-item: transparent; --color-menu-item-text: #000000bb;
484
--color-menu-item-hover: #00000010; --color-menu-item-hover-text: #000000bb;
485
486
--gap-toolbar: 4px;
487
--gap-menu: 0;
488
--border-toolbar: none;
489
--border-menu: none;
490
--border-menu-item: none;
491
--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);
492
--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);
493
--height-toolbar: 48px;
494
--height-menu-item: 24px;
495
--width-toolbar: fit-content;
496
--radius-toolbar: 0;
497
--radius-menu: 0;
498
--padding-toolbar: 4px;
499
--padding-menu: 2px 0;
500
--padding-menu-item: 2px 8px;
501
/* DIALOGS */
503
--color-modal-backdrop: radial-gradient(circle, #00000040 12.5%, #000000cc 100%);
504
}
505
/* Extra styles */
507
h6 {
509
/* Make it look nicer */
510
text-transform: uppercase;
511
color: var(--color-accent);
512
}
513
:any-link {
515
/* Make them nicer, not possible with the font property */
516
font-weight: bolder;
517
text-decoration: underline;
518
text-decoration-thickness: .05em;
519
text-underline-offset: .1em;
520
}
521
button, .button, input[type=button], input[type=submit], input[type=reset], input[type="file"]::file-selector-button {
523
/* Make it look nicer */
524
text-transform: uppercase;
525
}
526
.toast-container li {
528
/* Toast appear */
529
animation: toastSlide 750ms cubic-bezier(0.16, 1, 0.3, 1);
530
transform-origin: bottom;
531
}
532
.toast-container li.removing {
534
/* Toast disappear */
535
animation: toastCompress 500ms cubic-bezier(0.55, 0, 1, 0.45);
536
}
537
.toast-container li.removing ~ li {
539
/* TODO */
540
}
541
@keyframes toastSlide {
543
0% {
544
opacity: 0;
545
transform: translateY(100vh);
546
}
547
100% {
549
opacity: 1;
550
transform: translateY(0);
551
}
552
}
553
@keyframes toastCompress {
555
0% {
556
transform: rotateX(0);
557
opacity: 1;
558
}
559
100% {
561
transform: rotateX(180deg);
562
opacity: 0;
563
}
564
}
565
input[type="checkbox"]:not(.switch):checked::after, input[type="checkbox"]:not(.switch):indeterminate::after, input[type="radio"]:checked::after {
567
/* Checked */
568
animation: check 250ms cubic-bezier(0.61, 1, 0.88, 1);
569
}
570
input[type="checkbox"]:not(.switch), input[type="radio"] {
572
/* Transition background */
573
transition: box-shadow 250ms cubic-bezier(0.61, 1, 0.88, 1);
574
}
575
input[type="checkbox"].switch::after {
577
/* Transition switch thumb */
578
transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 375ms cubic-bezier(0.61, 1, 0.88, 1);
579
}
580
input[type="range"]::-webkit-slider-thumb {
582
transition: box-shadow 375ms cubic-bezier(0.61, 1, 0.88, 1);
583
}
584
input[type="range"]::-moz-range-thumb {
586
transition: box-shadow 375ms cubic-bezier(0.61, 1, 0.88, 1);
587
}
588
button, .button, input[type="file"]::file-selector-button, input, select, textarea {
590
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);
591
}
592
@keyframes check {
594
0% {
595
transform: scale(0);
596
}
597
100% {
599
transform: scale(1);
600
}
601
}
602
.navbar {
604
position: sticky;
605
}
606
:is(.navbar, .breadcrumbs) a:not(:hover) {
608
text-decoration: none;
609
}
610
x-notebook > label:has(input[type="radio"]:checked) {
612
border-bottom: 4px solid var(--color-accent);
613
transition: border 125ms ease;
614
}
615
x-notebook > label {
617
text-transform: uppercase;
618
font-weight: 600;
619
flex: 1 0 auto;
620
}
621
th, ol.table > li.list-header {
623
border: none;
624
}
625
tbody th {
627
text-align: end;
628
}
629
thead th {
631
vertical-align: bottom;
632
text-align: center;
633
}
634
.chat-bubble::before {
636
content: "";
637
position: absolute;
638
width: 1em;
639
height: 1em;
640
border: 0.75em solid;
641
border-color: transparent var(--color-bubble) transparent transparent;
642
left: -1.5em;
643
top: 1em;
644
}
645
.bubble-alt::before {
647
content: "";
648
position: absolute;
649
width: 1em;
650
height: 1em;
651
border: 0.75em solid;
652
border-color: transparent transparent transparent var(--color-bubble-alt);
653
transform: translateX(100%);
654
width: 100%;
655
left: 0;
656
top: 1em;
657
}
658
::placeholder {
660
opacity: 0.5;
661
}
662
:is(input:not([type=button], [type=checkbox], [type=radio], [type=submit], [type=reset], [type=file], [type=range], [type=color]), select).input-flat {
664
border-bottom: 2px solid var(--color-primary) !important;
665
}
666
:disabled {
668
opacity: 0.5;
669
}
670
input[type="color"] {
672
padding: 0;
673
border: 0;
674
overflow: hidden;
675
}
676
input[type="color"]::-webkit-color-swatch {
678
border: none;
679
}
680
input[type="color"]::-webkit-color-swatch-wrapper {
682
padding: 0;
683
}
684
:is(input:not([type=button], [type=checkbox], [type=radio], [type=submit], [type=reset], [type=file], [type=range]), select, textarea):focus {
686
outline: none; /* there is a blinking cursor, better not to have an outline */
687
}
688
textarea {
690
font: var(--mono-font);
691
}
692
button:has(iconify-icon) {
694
min-width: var(--height-button);
695
}
696
details.dropdown[open] > summary ~ * {
698
animation: menu 375ms cubic-bezier(0.22, 1, 0.36, 1);
699
transform-origin: top;
700
}
701
@keyframes menu {
703
0% {
704
transform: rotateX(-90deg);
705
opacity: 0;
706
}
707
100% {
709
transform: rotateX(0);
710
opacity: 1;
711
}
712
}
713
details.slidein[open] > summary ~ * {
715
animation: menu2 375ms cubic-bezier(0.22, 1, 0.36, 1);
716
transform-origin: left;
717
}
718
@keyframes menu2 {
720
0% {
721
transform: rotateY(-90deg);
722
opacity: 0;
723
}
724
100% {
726
transform: rotateY(0);
727
opacity: 1;
728
}
729
}
730
dialog:modal {
732
animation: entranceY 500ms cubic-bezier(0.33, 1, 0.68, 1);
733
transform-origin: center;
734
}
735
dialog {
737
transition: opacity 250ms cubic-bezier(0.33, 1, 0.68, 1);
738
}
739
dialog.sheet-left:modal {
741
animation: entranceX 500ms cubic-bezier(0.33, 1, 0.68, 1);
742
transform-origin: left;
743
}
744
dialog.sheet-right:modal {
746
animation: entranceX 500ms cubic-bezier(0.33, 1, 0.68, 1);
747
transform-origin: right;
748
}
749
dialog.sheet-top:modal {
751
animation: entranceY 500ms cubic-bezier(0.33, 1, 0.68, 1);
752
transform-origin: top;
753
}
754
dialog.sheet-bottom:modal {
756
animation: entranceY 500ms cubic-bezier(0.33, 1, 0.68, 1);
757
transform-origin: bottom;
758
}
759
dialog::backdrop {
761
backdrop-filter: saturate(0.5) contrast(0.5) brightness(1.25) blur(2px);
762
}
763
@keyframes entranceX {
765
0% {
766
transform: rotateY(-90deg);
767
}
768
100% {
769
transform: rotateY(0);
770
}
771
}
772
@keyframes entranceY {
774
0% {
775
transform: rotateX(-90deg);
776
}
777
100% {
778
transform: rotateX(0);
779
}
780
}
781
@keyframes fade {
783
0% {
784
opacity: 0;
785
}
786
100% {
787
opacity: 1;
788
}
789
}
790