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,600;0,700;0,900;1,100;1,300;1,400;1,500;1,600;1,700;1,900&display=swap');
2
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;0,500;0,700;1,300;1,500;1,700&display=swap');
3
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,600;1,600&display=swap');
4
:root, ::backdrop {
6
/* FONTS */
7
--body-font: /* body text */
8
normal /* style */
9
normal /* variant */
10
400 /* weight */
11
normal /* stretch */
12
16px/20px /* size / line height */
13
"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
14
;
15
--table-font:
16
normal /* style */
17
normal /* variant */
18
400 /* weight */
19
normal /* stretch */
20
15.4px/20px /* size / line height */
21
"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
22
;
23
--table-header-font:
24
normal /* style */
25
normal /* variant */
26
500 /* weight */
27
normal /* stretch */
28
15.4px/20px /* size / line height */
29
"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
30
;
31
--mono-font: /* code */
32
normal /* style */
33
normal /* variant */
34
300 /* weight */
35
normal /* stretch */
36
14.5px/20px /* size / line height */
37
"Roboto Mono", "Noto Sans Mono", "Noto Mono", "Source Code Pro", "Source Code", "source-pro-code", Cousine, Consolas, monospace /* family */
38
;
39
--keyboard-font: /* keyboard */
40
normal /* style */
41
normal /* variant */
42
600 /* weight */
43
normal /* stretch */
44
12px/12px /* size / line height */
45
"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
46
;
47
--button-font: /* buttons */
48
normal /* style */
49
normal /* variant */
50
600 /* weight */
51
normal /* stretch */
52
15px/20px /* size / line height */
53
"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
54
;
55
--badge-font: /* badges */
56
normal /* style */
57
normal /* variant */
58
700 /* weight */
59
normal /* stretch */
60
13.2px/16px /* size / line height */
61
"Roboto Mono", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
62
;
63
--gui-font: /* everything not covered by something else */
64
var(--body-font);
65
--input-font: /* all inputs which show text */
66
var(--gui-font);
67
--textarea-font: /* textareas */
68
var(--mono-font);
69
--h6-font: /* h6 */
70
normal /* style */
71
normal /* variant */
72
700 /* weight */
73
normal /* stretch */
74
16px/20px /* size / line height */
75
"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
76
;
77
--h5-font: /* h5 */
78
normal /* style */
79
normal /* variant */
80
900 /* weight */
81
normal /* stretch */
82
18px/20px /* size / line height */
83
"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
84
;
85
--h4-font: /* h4 */
86
normal /* style */
87
normal /* variant */
88
700 /* weight */
89
normal /* stretch */
90
19.5px/24px /* size / line height */
91
"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
92
;
93
--h3-font: /* h3 */
94
normal /* style */
95
normal /* variant */
96
400 /* weight */
97
normal /* stretch */
98
22.5px/28px /* size / line height */
99
"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
100
;
101
--h2-font: /* h2 */
102
normal /* style */
103
normal /* variant */
104
300 /* weight */
105
normal /* stretch */
106
28px/32px /* size / line height */
107
"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
108
;
109
--h1-font: /* h1 */
110
normal /* style */
111
normal /* variant */
112
300 /* weight */
113
normal /* stretch */
114
36px/44px /* size / line height */
115
"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
116
;
117
--headline-font: /* h1 as a headline */
118
normal /* style */
119
normal /* variant */
120
100 /* weight */
121
normal /* stretch */
122
52px/60px /* size / line height */
123
"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
124
;
125
126
/* GENERAL COLOURS */
127
/* background */ /* foreground */
128
--color-primary: #3F51B5; --color-primary-text: #ffffff;
129
--color-primary-1: #303F9F; --color-primary-1-text: #ffffff;
130
--color-primary-2: #1A237E; --color-primary-2-text: #ffffff;
131
--color-primary-3: #7986CB; --color-primary-3-text: #000000;
132
--color-primary-4: #C5CAE9; --color-primary-4-text: #000000;
133
--color-accent: #E91E63; --color-accent-text: #ffffff;
135
--color-accent-1: #C2185B; --color-accent-1-text: #ffffff;
136
--color-accent-2: #880E4F; --color-accent-2-text: #ffffff;
137
--color-accent-3: #F06292; --color-accent-3-text: #000000;
138
--color-accent-4: #F8BBD0; --color-accent-4-text: #000000;
139
--color-background: #fafafa; --color-background-text: #000000df;
141
--color-caption-text: #000000b9;
142
--color-label-text: #000000df;
143
--color-error: #d50000; --color-error-text: #ffffff;
145
--color-alert: #ffab00; --color-alert-text: #000000;
146
--color-info: #00b8d4; --color-info-text: #000000;
147
--color-success: #00c853; --color-success-text: #ffffff;
148
--color-not-accent: transparent; --color-not-accent-text: var(--color-background-text);
150
151
--color-scheme: light;
152
/* CODE BLOCKS */
154
--color-code: #263238; --color-code-text: #ffffff;
155
--color-quote: #fafafa; --color-quote-text: #000000cc;
156
--color-short-code: #f5f5f5; --color-short-code-text: #000000cc;
157
--color-keyboard: #757575; --color-keyboard-text: #ffffff;
158
--color-scheme-code: dark;
160
--size-keyboard: 1.5em;
162
--padding-keyboard: 0.375em;
163
--padding-code: 12px;
164
--radius-code: 0;
166
--radius-short-code: 0.125em;
167
--border-code: none;
168
--border-short-code: none;
169
--shadow-keyboard: 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24);
171
/* BUTTONS */
173
--color-button: var(--color-primary); --color-button-text: var(--color-primary-text);
174
--color-button-hover: var(--color-primary); --color-button-hover-text: var(--color-primary-text);
175
--color-button-active: var(--color-primary); --color-button-active-text: var(--color-primary-text);
176
--color-flat-button: transparent; --color-flat-button-text: var(--color-primary);
177
--color-flat-button-hover: #00000020; --color-flat-button-hover-text: var(--color-primary-2);
178
--color-flat-button-active: #00000030; --color-flat-button-active-text: var(--color-primary-3);
179
--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);
181
--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);
182
--shadow-flat-button: none;
183
--shadow-flat-button-hover: none;
184
--border-button: none;
186
--border-button-hover: none;
187
--border-flat-button: none;
188
--border-flat-button-hover: none;
189
--radius-button: 2px;
191
--radius-round-button: 100vmin;
192
--radius-flat-button: 2px;
193
194
--height-button: 36px;
195
--size-round-button: 48px;
196
--margin-round-button: 8px;
197
--padding-button: 4px 8px;
198
--padding-round-button: 8px;
199
--gap-button: 4px;
200
--min-width-button: 64px;
201
/* LINKS */
203
--color-link-text: #1e88e5;
204
--color-link-hover-text: #1565c0;
205
--color-link-active-text: #1e88e580;
206
--color-link-visited-text: #1e88e5;
207
--color-link-visited-hover-text: #1565c0;
208
/* TOASTS */
210
--color-callout: #546e7a; --color-callout-text: #ffffff;
211
--color-callout-1: #37474f; --color-callout-1-text: #ffffff;
212
--color-callout-2: #78909c; --color-callout-2-text: #ffffff;
213
--color-callout-button-text: var(--color-accent-4);
214
215
--border-toast: none;
216
--radius-toast: 2px;
217
--gap-toast: 8px;
218
--min-width-toast: 192px;
219
--max-width-toast: 50%;
220
--height-toast: 40px;
221
--padding-toast: 0 0 0 8px;
222
--toast-align-horizontal: end;
223
--toast-align-vertical: end;
224
--toast-stack: column-reverse wrap;
225
--margin-toast: 12px;
226
--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);
228
229
/* CHECKBOXES */
230
--color-checkbox: var(--color-not-accent); --color-checkbox-text: var(--color-accent);
231
--color-checkbox-hover: var(--color-not-accent); --color-checkbox-hover-text: var(--color-accent);
232
--color-checkbox-active: var(--color-accent); --color-checkbox-active-text: var(--color-accent-text);
233
--color-checkbox-indeterminate: var(--color-accent);--color-checkbox-indeterminate-text: var(--color-accent-text);
234
--color-checkbox-indeterminate-hover: var(--color-accent);--color-checkbox-indeterminate-hover-text: var(--color-accent-text);
235
--color-checkbox-active-hover: var(--color-accent);--color-checkbox-active-hover-text: var(--color-accent-text);
236
--color-radio: var(--color-not-accent); --color-radio-text: var(--color-accent);
237
--color-radio-active: var(--color-not-accent); --color-radio-active-text: var(--color-accent);
238
--color-radio-hover: var(--color-not-accent); --color-radio-hover-text: var(--color-accent);
239
--color-radio-active-hover: var(--color-not-accent);--color-radio-active-hover-text: var(--color-accent);
240
--border-checkbox: 0.125em solid currentColor;
242
--border-checkbox-checked: 0.125em solid var(--color-checkbox-active);
243
--border-checkbox-indeterminate: 0.125em solid var(--color-checkbox-indeterminate);
244
--border-checkbox-hover: 0.125em solid currentColor;
245
--border-checkbox-checked-hover: 0.125em solid var(--color-checkbox-active);
246
--border-checkbox-indeterminate-hover: 0.125em solid var(--color-checkbox-indeterminate);
247
--border-radio: 0.125em solid currentColor;
248
--border-radio-checked: 0.125em solid currentColor;
249
--border-radio-hover: 0.125em solid currentColor;
250
--border-radio-checked-hover: 0.125em solid currentColor;
251
--color-switch: #eeeeee; --color-switch-thumb: #757575;
253
--color-switch-on: var(--color-accent-4); --color-switch-thumb-on: var(--color-accent);
254
--color-switch-hover: #eeeeee; --color-switch-thumb-hover: #757575;
255
--color-switch-on-hover: var(--color-accent-4); --color-switch-thumb-on-hover: var(--color-accent);
256
--border-switch: none;
258
--border-switch-hover: none;
259
--radius-switch: 1em;
260
--height-switch: 0.75em;
261
--width-switch: 2em;
262
--border-switch-thumb: none;
263
--border-switch-thumb-hover: none;
264
--radius-switch-thumb: 1em;
265
--width-switch-thumb: 1em;
266
--height-switch-thumb: 1em;
267
--padding-switch-thumb: 0em; /* for some reason, you must set the unit */
268
--width-switch-thumb-hover: 1em;
269
--height-switch-thumb-hover: 1em;
270
--shadow-switch: 0 0 0 0 transparent; /* none */
272
--shadow-switch-thumb: 0 0 2px 0 rgba(0, 0, 0, 0.28), 0 0 3px 0 rgba(0, 0, 0, 0.40);
273
--shadow-switch-hover: 0 0 0 0 transparent; /* none */
274
--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);
275
--border-switch-on: none;
277
--border-switch-on-hover: none;
278
--border-switch-thumb-on: none;
279
--border-switch-thumb-on-hover: none;
280
--radius-switch-thumb-on: 1em;
281
--width-switch-thumb-on: 1em;
282
--height-switch-thumb-on: 1em;
283
--padding-switch-thumb-on: 0em; /* for some reason, you must set the unit */
284
--width-switch-thumb-on-hover: 1em;
285
--height-switch-thumb-on-hover: 1em;
286
--shadow-switch-on: 0 0 0 0 transparent; /* none */
288
--shadow-switch-thumb-on: 0 0 2px 0 rgba(0, 0, 0, 0.28), 0 0 3px 0 rgba(0, 0, 0, 0.40);
289
--shadow-switch-on-hover: 0 0 0 0 transparent; /* none */
290
--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);
291
--radius-checkbox: 0.125em;
293
--radius-radio: 1em;
294
--size-checkbox: 1em;
295
--shadow-form: 0 0 0 0 transparent; /* none */
297
--shadow-form-checked: 0 0 0 0 transparent; /* none */
298
--shadow-form-indeterminate: 0 0 0 0 transparent; /* none */
299
--shadow-form-hover: 0 0 0 0 transparent; /* none */
300
--shadow-form-checked-hover: 0 0 0 0 transparent; /* none */
301
--shadow-form-indeterminate-hover: 0 0 0 0 transparent; /* none */
302
/* RANGES */
304
--color-range: var(--color-accent-4); --color-range-text: var(--color-accent);
305
--color-range-hover: var(--color-accent-4); --color-range-hover-text: var(--color-accent);
306
--border-range: none;
308
--border-range-hover: none;
309
--radius-range: 1em;
310
--height-range: 0.75em;
311
--border-range-thumb: none;
312
--border-range-thumb-hover: none;
313
--position-range-thumb: -12.5%;
314
--position-range-thumb-hover: -12.5%;
315
--radius-range-thumb: 1em;
316
--width-range-thumb: 1em;
317
--height-range-thumb: 1em;
318
--width-range-thumb-hover: 1em;
319
--height-range-thumb-hover: 1em;
320
--shadow-range: 0 0 0 0 transparent; /* none */
321
--shadow-range-thumb: 0 0 2px 0 rgba(0, 0, 0, 0.28), 0 0 3px 0 rgba(0, 0, 0, 0.40);
322
--shadow-range-hover: 0 0 0 0 transparent; /* none */
323
--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);
324
/* CARDS */
326
--color-card: #ffffff; --color-card-text: #000000df;
327
--color-figcaption-text: #000000df;
328
--radius-card: 0;
330
--outline-outlined-card: 1px solid #00000080;
331
--radius-outlined-card: 4px;
332
--border-card: none;
333
--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);
334
--padding-card: 0 12px 12px 12px;
336
--padding-card-top: 12px;
337
--padding-card-figcaption: 0 12px 12px 12px;
338
--figure-max-size-horizontal-card: clamp(200px, 50%, 768px);
339
/* LAYOUT */
341
--gap-buttonbox: 4px;
342
--gap-label-checkbox: 4px;
343
--gap-label-input: 4px;
344
--gap-box: 16px;
345
/* NAVBAR */
347
--color-navbar: #546E7A; --color-navbar-text: var(--color-primary-text);
348
--color-navbar-link: var(--color-primary-text);
349
350
--height-navbar: 48px;
351
--width-navbar-button: 56px;
352
--padding-navbar: 12px;
353
--gap-navbar: 0;
354
--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);
355
--border-navbar: none;
356
--radius-navbar: 0;
357
/* NAVRAIL */
359
--color-navrail: #455a64; --color-navrail-text: var(--color-primary-text);
360
--color-navrail-link: var(--color-primary-text);
361
--color-navrail-link-hover: var(--color-primary-3);
362
--color-navrail-link-selected: var(--color-primary-3);
363
--width-navrail: 72px;
365
--height-navrail-button: 56px;
366
--padding-navrail: 0;
367
--gap-navrail: 0;
368
--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);
369
--border-navrail: none;
370
--radius-navrail: 0;
371
/* SIDENAV */
373
--color-sidenav: transparent; --color-sidenav-text: var(--color-caption-text);
374
--gap-sidenav-item: 1ch;
375
--padding-sidenav: 8px;
376
/* BREADCRUMBS */
378
--color-breadcrumbs: var(--color-navbar); --color-breadcrumbs-text: var(--color-navbar-text);
379
--color-breadcrumbs-link: var(--color-navbar-text);
380
--color-breadcrumbs-separator: var(--color-navbar-text);
381
--height-breadcrumbs: 48px;
383
--padding-breadcrumbs: 16px;
384
--shadow-breadcrumbs: var(--shadow-navbar);
385
--border-breadcrumbs: none;
386
--radius-breadcrumbs: 0;
387
--separator-breadcrumbs: " > ";
388
/* TABS */
390
--color-tab: var(--color-navbar); --color-tab-text: var(--color-navbar-text);
391
--color-tab-selected: var(--color-navbar); --color-tab-selected-text: var(--color-navbar-text);
392
--color-tab-hover: var(--color-navbar); --color-tab-hover-text: var(--color-navbar-text);
393
--color-tab-hover-selected: var(--color-navbar); --color-tab-hover-selected-text: var(--color-navbar-text);
394
--justify-tab-row: space-around;
396
--height-tab: 36px;
397
--width-tab: 80px;
398
--align-tab: center;
399
--border-tab: none;
400
--border-tab-selected: none;
401
--radius-tab: 0;
402
/* DIVIDERS */
404
--line-divider: 1px solid #00000080;
405
/* LISTS */
407
--style-unordered-list: disc;
408
--color-unordered-list-marker: currentColor;
409
--font-unordered-list-marker: var(--body-font);
410
--indent-unordered-list: 1em;
411
--style-ordered-list: decimal;
413
--color-ordered-list-marker: currentColor;
414
--font-ordered-list-marker: var(--body-font);
415
--indent-ordered-list: 1em;
416
/* TABLES */
418
--padding-cell: 1ch;
419
--border-cell-horizontal: 1px solid #00000020;
420
--border-cell-vertical: 1px solid #00000040;
421
--color-table: #fafafa; --color-table-text: #000000;
422
--color-row-odd: #00000010; --color-row-odd-text: #000000;
423
--color-row-even: transparent; --color-row-even-text: #000000;
424
--color-row-header: var(--color-primary-1); --color-row-header-text: var(--color-primary-1-text);
425
/* BADGES */
427
--border-badge: none;
428
--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);
429
--x-badge: 100%;
430
--y-badge: 25%;
431
--width-badge: 2.25ch;
432
--height-badge: 2.25ch;
433
--radius-badge: 3ch;
434
--padding-badge: 0.25ch;
435
--color-badge: var(--color-accent); --color-badge-text: var(--color-accent-text);
436
/* AVATARS */
438
--radius-avatar: 0;
439
/* BUBBLES */
441
--border-bubble: none;
442
--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);
443
--radius-bubble: 1em;
444
--padding-bubble: 1ch;
445
--color-bubble: var(--color-accent-1); --color-bubble-text: var(--color-accent-1-text);
446
--color-bubble-alt: var(--color-accent-4); --color-bubble-alt-text: var(--color-accent-4-text);
447
/* INPUTS */
449
--color-input: #ffffff; --color-input-text: #000000bb;
450
--color-input-hover: #ffffff; --color-input-hover-text: #000000bb;
451
--color-input-active: #ffffff; --color-input-active-text: #000000df;
452
--color-flat-input: transparent; --color-flat-input-text: #000000bb;
453
--color-flat-input-hover: transparent; --color-flat-input-hover-text: #000000bb;
454
--color-flat-input-active: transparent; --color-flat-input-active-text: #000000df;
455
--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);
457
--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);
458
--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);
459
--shadow-flat-input: none;
460
--shadow-flat-input-hover: none;
461
--shadow-flat-input-active: none;
462
--border-input: none;
464
--border-input-hover: none;
465
--border-input-active: none;
466
--border-flat-input: none;
467
--border-flat-input-hover: none;
468
--border-flat-input-active: none;
469
--radius-input: 2px;
471
--radius-flat-input: 2px;
472
473
--height-input: 36px;
474
--padding-input: 4px 8px;
475
--min-width-input: 64px;
476
--size-input-icon: 16px;
478
/* TEXTAREAS */
480
--color-textarea: #ffffff; --color-textarea-text: #000000bb;
481
--color-textarea-hover: #ffffff; --color-textarea-hover-text: #000000bb;
482
--color-textarea-active: #ffffff; --color-textarea-active-text: #000000df;
483
--color-flat-textarea: transparent; --color-flat-textarea-text: #000000bb;
484
--color-flat-textarea-hover: transparent; --color-flat-textarea-hover-text: #000000bb;
485
--color-flat-textarea-active: transparent; --color-flat-textarea-active-text: #000000df;
486
--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);
488
--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);
489
--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);
490
--shadow-flat-textarea: none;
491
--shadow-flat-textarea-hover: none;
492
--shadow-flat-textarea-active: none;
493
--border-textarea: none;
495
--border-textarea-hover: none;
496
--border-textarea-active: none;
497
--border-flat-textarea: 1px solid #00000040;
498
--border-flat-textarea-hover: 1px solid #00000040;
499
--border-flat-textarea-active: 1px solid #00000040;
500
--radius-textarea: 2px;
502
--radius-flat-textarea: 8px;
503
504
--padding-textarea: 8px;
505
/* MENUS */
507
--color-toolbar: #ffffff; --color-toolbar-text: #000000bb;
508
--color-menu: #ffffff; --color-menu-text: #000000bb;
509
--color-menu-item: transparent; --color-menu-item-text: #000000bb;
510
--color-menu-item-hover: #00000010; --color-menu-item-hover-text: #000000bb;
511
512
--gap-toolbar: 4px;
513
--gap-menu: 0;
514
--border-toolbar: none;
515
--border-menu: none;
516
--border-menu-item: none;
517
--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);
518
--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);
519
--height-toolbar: 48px;
520
--height-menu-item: 24px;
521
--width-toolbar: fit-content;
522
--radius-toolbar: 0;
523
--radius-menu: 0;
524
--padding-toolbar: 4px;
525
--padding-menu: 2px 0;
526
--padding-menu-item: 2px 8px;
527
/* DIALOGS */
529
--color-modal-backdrop: radial-gradient(circle, #00000040 12.5%, #000000cc 100%);
530
}
531
/* Extra styles */
533
h6 {
535
/* Make it look nicer */
536
text-transform: uppercase;
537
color: var(--color-accent);
538
}
539
:any-link, .link-button {
541
/* Make them nicer, not possible with the font property */
542
font-weight: 500;
543
text-decoration: underline;
544
text-decoration-thickness: .05em;
545
text-underline-offset: .1em;
546
}
547
button, .button, input[type=button], input[type=submit], input[type=reset], input[type="file"]::file-selector-button {
549
/* Make it look nicer */
550
text-transform: uppercase;
551
}
552
.toast-container li {
554
/* Toast appear */
555
animation: toastSlide 750ms cubic-bezier(0.16, 1, 0.3, 1);
556
transform-origin: bottom;
557
}
558
.toast-container li.removing {
560
/* Toast disappear */
561
animation: toastCompress 500ms cubic-bezier(0.55, 0, 1, 0.45);
562
}
563
.toast-container li.removing ~ li {
565
/* TODO */
566
}
567
@keyframes toastSlide {
569
0% {
570
opacity: 0;
571
transform: translateY(100vh);
572
}
573
100% {
575
opacity: 1;
576
transform: translateY(0);
577
}
578
}
579
@keyframes toastCompress {
581
0% {
582
transform: rotateX(0);
583
opacity: 1;
584
}
585
100% {
587
transform: rotateX(180deg);
588
opacity: 0;
589
}
590
}
591
input[type="checkbox"]:not(.switch):checked::after, input[type="checkbox"]:not(.switch):indeterminate::after, input[type="radio"]:checked::after {
593
/* Checked */
594
animation: check 250ms cubic-bezier(0.61, 1, 0.88, 1);
595
}
596
input[type="checkbox"]:not(.switch), input[type="radio"] {
598
/* Transition background */
599
transition: box-shadow 250ms cubic-bezier(0.61, 1, 0.88, 1);
600
}
601
input[type="checkbox"].switch::after {
603
/* Transition switch thumb */
604
transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 375ms cubic-bezier(0.61, 1, 0.88, 1);
605
}
606
input[type="range"]::-webkit-slider-thumb {
608
transition: box-shadow 375ms cubic-bezier(0.61, 1, 0.88, 1);
609
}
610
input[type="range"]::-moz-range-thumb {
612
transition: box-shadow 375ms cubic-bezier(0.61, 1, 0.88, 1);
613
}
614
button, .button, input[type="file"]::file-selector-button, input, select, textarea {
616
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);
617
}
618
@keyframes check {
620
0% {
621
transform: scale(0);
622
}
623
100% {
625
transform: scale(1);
626
}
627
}
628
.navbar {
630
position: sticky;
631
}
632
:is(.navbar, .breadcrumbs) a:not(:hover) {
634
text-decoration: none;
635
}
636
x-notebook > label:has(input[type="radio"]:checked) {
638
border-bottom: 4px solid var(--color-accent);
639
transition: border 125ms ease;
640
}
641
x-notebook > label {
643
text-transform: uppercase;
644
font-weight: 600;
645
flex: 1 0 auto;
646
}
647
th, ol.table > li.list-header {
649
border: none;
650
}
651
th, td {
653
text-align: start;
654
}
655
.chat-bubble::before {
657
content: "";
658
position: absolute;
659
width: 1em;
660
height: 1em;
661
border: 0.75em solid;
662
border-color: transparent var(--color-bubble) transparent transparent;
663
left: -1.5em;
664
top: 1em;
665
}
666
.bubble-alt::before {
668
content: "";
669
position: absolute;
670
width: 1em;
671
height: 1em;
672
border: 0.75em solid;
673
border-color: transparent transparent transparent var(--color-bubble-alt);
674
transform: translateX(100%);
675
width: 100%;
676
left: 0;
677
top: 1em;
678
}
679
::placeholder {
681
opacity: 0.5;
682
}
683
:is(input:not([type=button], [type=checkbox], [type=radio], [type=submit], [type=reset], [type=file], [type=range], [type=color]), select).input-flat {
685
border-bottom: 2px solid var(--color-primary) !important;
686
}
687
:disabled {
689
opacity: 0.5;
690
}
691
input[type="color"] {
693
padding: 0;
694
border: 0;
695
overflow: hidden;
696
}
697
input[type="color"]::-webkit-color-swatch {
699
border: none;
700
}
701
input[type="color"]::-webkit-color-swatch-wrapper {
703
padding: 0;
704
}
705
:is(input:not([type=button], [type=checkbox], [type=radio], [type=submit], [type=reset], [type=file], [type=range]), select, textarea):focus {
707
outline: none; /* there is a blinking cursor, better not to have an outline */
708
}
709
textarea {
711
font: var(--mono-font);
712
}
713
button:has(iconify-icon) {
715
min-width: var(--height-button);
716
}
717
details.dropdown[open] > summary ~ * {
719
animation: menu 375ms cubic-bezier(0.22, 1, 0.36, 1);
720
transform-origin: top;
721
}
722
@keyframes menu {
724
0% {
725
transform: rotateX(-90deg);
726
opacity: 0;
727
}
728
100% {
730
transform: rotateX(0);
731
opacity: 1;
732
}
733
}
734
details.slidein[open] > summary ~ * {
736
animation: menu2 375ms cubic-bezier(0.22, 1, 0.36, 1);
737
transform-origin: left;
738
}
739
@keyframes menu2 {
741
0% {
742
transform: rotateY(-90deg);
743
opacity: 0;
744
}
745
100% {
747
transform: rotateY(0);
748
opacity: 1;
749
}
750
}
751
dialog:modal {
753
animation: entranceY 500ms cubic-bezier(0.33, 1, 0.68, 1);
754
transform-origin: center;
755
}
756
dialog {
758
transition: opacity 250ms cubic-bezier(0.33, 1, 0.68, 1);
759
}
760
dialog.sheet-left:modal {
762
animation: entranceX 500ms cubic-bezier(0.33, 1, 0.68, 1);
763
transform-origin: left;
764
}
765
dialog.sheet-right:modal {
767
animation: entranceX 500ms cubic-bezier(0.33, 1, 0.68, 1);
768
transform-origin: right;
769
}
770
dialog.sheet-top:modal {
772
animation: entranceY 500ms cubic-bezier(0.33, 1, 0.68, 1);
773
transform-origin: top;
774
}
775
dialog.sheet-bottom:modal {
777
animation: entranceY 500ms cubic-bezier(0.33, 1, 0.68, 1);
778
transform-origin: bottom;
779
}
780
dialog::backdrop {
782
backdrop-filter: saturate(0.5) contrast(0.5) brightness(1.25) blur(2px);
783
}
784
@keyframes entranceX {
786
0% {
787
transform: rotateY(-90deg);
788
}
789
100% {
790
transform: rotateY(0);
791
}
792
}
793
@keyframes entranceY {
795
0% {
796
transform: rotateX(-90deg);
797
}
798
100% {
799
transform: rotateX(0);
800
}
801
}
802
@keyframes fade {
804
0% {
805
opacity: 0;
806
}
807
100% {
808
opacity: 1;
809
}
810
}
811
:where(.navrail, .navbar, .sidenav) > iconify-icon {
813
font-size: 1.5rem;
814
}
815
.navbar > *, .navbar > ul > li > * {
817
height: var(--height-navbar);
818
display: flex;
819
align-items: center;
820
justify-content: center;
821
}
822
header:has(.navbar) .breadcrumbs {
824
z-index: 2 !important;
825
position: relative;
826
box-shadow: none;
827
}
828
.navbar a {
830
font-weight: 500;
831
}
832
x-notebook > label:has(input[type="radio"]:checked) {
834
background: var(--color-tab-selected);
835
color: var(--color-tab-selected-text);
836
border: none;
837
box-shadow: inset 0 -4px 0 var(--color-accent);
838
transition: box-shadow 125ms ease;
839
}
840
x-notebook > label:has(input[type="radio"]) {
842
transition: box-shadow 125ms ease;
843
}