Unicode text, UTF-8 text
1
/*
2
Dusk theme for roundabout web interface
3
Copyright (C) 2024 Roundabout developer
4
This stylesheet is free software: you can redistribute it and/or modify
6
it under the terms of the GNU General Public License as published by
7
the Free Software Foundation, either version 3 of the License, or
8
(at your option) any later version.
9
This stylesheet is distributed in the hope that it will be useful,
11
but WITHOUT ANY WARRANTY; without even the implied warranty of
12
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13
GNU General Public License for more details.
14
You should have received a copy of the GNU General Public License
16
along with this stylesheet. If not, see <https://www.gnu.org/licenses/>
17
*/
18
:root, ::backdrop {
20
/* FONTS */
21
--body-font: /* body text */
22
normal /* style */
23
normal /* variant */
24
400 /* weight */
25
normal /* stretch */
26
16px/20px /* size / line height */
27
"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
28
;
29
--table-font:
30
normal /* style */
31
normal /* variant */
32
400 /* weight */
33
normal /* stretch */
34
15.4px/20px /* size / line height */
35
"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
36
;
37
--table-header-font:
38
normal /* style */
39
normal /* variant */
40
500 /* weight */
41
normal /* stretch */
42
15.4px/20px /* size / line height */
43
"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
44
;
45
--mono-font: /* code */
46
normal /* style */
47
normal /* variant */
48
400 /* weight */
49
normal /* stretch */
50
14.5px/20px /* size / line height */
51
"Roboto Mono", "Noto Sans Mono", "Noto Mono", "Source Code Pro", "Source Code", "source-pro-code", Cousine, Consolas, monospace /* family */
52
;
53
--keyboard-font: /* keyboard */
54
normal /* style */
55
normal /* variant */
56
600 /* weight */
57
normal /* stretch */
58
12px/12px /* size / line height */
59
"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
60
;
61
--button-font: /* buttons */
62
normal /* style */
63
normal /* variant */
64
600 /* weight */
65
normal /* stretch */
66
15px/20px /* size / line height */
67
"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
68
;
69
--badge-font: /* badges */
70
normal /* style */
71
normal /* variant */
72
700 /* weight */
73
normal /* stretch */
74
13.2px/16px /* size / line height */
75
"Roboto Mono", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
76
;
77
--gui-font: /* everything not covered by something else */
78
var(--body-font);
79
--input-font: /* all inputs which show text */
80
var(--gui-font);
81
--textarea-font: /* textareas */
82
var(--mono-font);
83
--h6-font: /* h6 */
84
normal /* style */
85
normal /* variant */
86
700 /* weight */
87
normal /* stretch */
88
16px/20px /* size / line height */
89
"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
90
;
91
--h5-font: /* h5 */
92
normal /* style */
93
normal /* variant */
94
900 /* weight */
95
normal /* stretch */
96
18px/20px /* size / line height */
97
"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
98
;
99
--h4-font: /* h4 */
100
normal /* style */
101
normal /* variant */
102
700 /* weight */
103
normal /* stretch */
104
19.5px/24px /* size / line height */
105
"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
106
;
107
--h3-font: /* h3 */
108
normal /* style */
109
normal /* variant */
110
400 /* weight */
111
normal /* stretch */
112
22.5px/28px /* size / line height */
113
"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
114
;
115
--h2-font: /* h2 */
116
normal /* style */
117
normal /* variant */
118
300 /* weight */
119
normal /* stretch */
120
28px/32px /* size / line height */
121
"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
122
;
123
--h1-font: /* h1 */
124
normal /* style */
125
normal /* variant */
126
300 /* weight */
127
normal /* stretch */
128
36px/44px /* size / line height */
129
"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
130
;
131
--headline-font: /* h1 as a headline */
132
normal /* style */
133
normal /* variant */
134
100 /* weight */
135
normal /* stretch */
136
52px/60px /* size / line height */
137
"Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
138
;
139
/* GENERAL COLOURS */
141
/* background */ /* foreground */
142
--color-primary: #4DB6AC; --color-primary-text: #ffffff;
143
--color-primary-1: #009688; --color-primary-1-text: #ffffff;
144
--color-primary-2: #00796B; --color-primary-2-text: #ffffff;
145
--color-primary-3: #80CBC4; --color-primary-3-text: #000000;
146
--color-primary-4: #B2DFDB; --color-primary-4-text: #000000;
147
--color-accent: #FFAB40; --color-accent-text: #000000;
149
--color-accent-1: #FF9100; --color-accent-1-text: #ffffff;
150
--color-accent-2: #FF6D00; --color-accent-2-text: #ffffff;
151
--color-accent-3: #FFD180; --color-accent-3-text: #000000;
152
--color-accent-4: #FFF3E0; --color-accent-4-text: #000000;
153
--color-background: #455A64; --color-background-text: #FFFFFFf4;
155
--color-caption-text: #FFFFFFb9;
156
--color-label-text: #FFFFFFdf;
157
--color-error: #FF1744; --color-error-text: #FFFFFF;
159
--color-alert: #FFC400; --color-alert-text: #000000;
160
--color-info: #40C4FF; --color-info-text: #000000;
161
--color-success: #00E676; --color-success-text: #000000;
162
--color-not-accent: transparent; --color-not-accent-text: var(--color-background-text);
164
--color-scheme: dark;
166
/* CODE BLOCKS */
168
--color-code: #263238; --color-code-text: #FFFFFFea;
169
--color-quote: #546E7A; --color-quote-text: #FFFFFFea;
170
--color-short-code: #37474F; --color-short-code-text: #FFFFFFea;
171
--color-keyboard: #607D8B; --color-keyboard-text: #FFFFFF;
172
--color-scheme-code: dark;
174
--size-keyboard: 1.5em;
176
--padding-keyboard: 0.375em;
177
--padding-code: 12px;
178
--radius-code: 0;
180
--radius-short-code: 0.125em;
181
--border-code: none;
182
--border-short-code: none;
183
--shadow-keyboard: 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24);
185
/* BUTTONS */
187
--color-button: var(--color-primary); --color-button-text: var(--color-primary-text);
188
--color-button-hover: var(--color-primary); --color-button-hover-text: var(--color-primary-text);
189
--color-button-active: var(--color-primary); --color-button-active-text: var(--color-primary-text);
190
--color-flat-button: transparent; --color-flat-button-text: var(--color-primary);
191
--color-flat-button-hover: #FFFFFF20; --color-flat-button-hover-text: var(--color-primary-2);
192
--color-flat-button-active: #FFFFFF30; --color-flat-button-active-text: var(--color-primary-3);
193
--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);
195
--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);
196
--shadow-flat-button: none;
197
--shadow-flat-button-hover: none;
198
--border-button: none;
200
--border-button-hover: none;
201
--border-flat-button: none;
202
--border-flat-button-hover: none;
203
--radius-button: 2px;
205
--radius-round-button: 100vmin;
206
--radius-flat-button: 2px;
207
--height-button: 36px;
209
--size-round-button: 48px;
210
--margin-round-button: 8px;
211
--padding-button: 4px 8px;
212
--padding-round-button: 8px;
213
--gap-button: 4px;
214
--min-width-button: 64px;
215
/* LINKS */
217
--color-link-text: var(--color-primary-3);
218
--color-link-hover-text: var(--color-primary-4);
219
--color-link-active-text: var(--color-primary-2);
220
--color-link-visited-text: var(--color-link-text);
221
--color-link-visited-hover-text: var(--color-link-hover-text);
222
/* TOASTS */
224
--color-callout: #546e7a; --color-callout-text: #ffffff;
225
--color-callout-1: #37474f; --color-callout-1-text: #ffffff;
226
--color-callout-2: #78909c; --color-callout-2-text: #ffffff;
227
--color-callout-button-text: var(--color-accent-4);
228
--border-toast: none;
230
--radius-toast: 2px;
231
--gap-toast: 8px;
232
--min-width-toast: 192px;
233
--max-width-toast: 50%;
234
--height-toast: 40px;
235
--padding-toast: 0 0 0 8px;
236
--toast-align-horizontal: end;
237
--toast-align-vertical: end;
238
--toast-stack: column-reverse wrap;
239
--margin-toast: 12px;
240
--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);
242
/* CHECKBOXES */
244
--color-checkbox: var(--color-not-accent); --color-checkbox-text: var(--color-accent);
245
--color-checkbox-hover: var(--color-not-accent); --color-checkbox-hover-text: var(--color-accent);
246
--color-checkbox-active: var(--color-accent); --color-checkbox-active-text: var(--color-accent-text);
247
--color-checkbox-indeterminate: var(--color-accent);--color-checkbox-indeterminate-text: var(--color-accent-text);
248
--color-checkbox-indeterminate-hover: var(--color-accent);--color-checkbox-indeterminate-hover-text: var(--color-accent-text);
249
--color-checkbox-active-hover: var(--color-accent);--color-checkbox-active-hover-text: var(--color-accent-text);
250
--color-radio: var(--color-not-accent); --color-radio-text: var(--color-accent);
251
--color-radio-active: var(--color-not-accent); --color-radio-active-text: var(--color-accent);
252
--color-radio-hover: var(--color-not-accent); --color-radio-hover-text: var(--color-accent);
253
--color-radio-active-hover: var(--color-not-accent);--color-radio-active-hover-text: var(--color-accent);
254
--border-checkbox: 0.125em solid currentColor;
256
--border-checkbox-checked: 0.125em solid var(--color-checkbox-active);
257
--border-checkbox-indeterminate: 0.125em solid var(--color-checkbox-indeterminate);
258
--border-checkbox-hover: 0.125em solid currentColor;
259
--border-checkbox-checked-hover: 0.125em solid var(--color-checkbox-active);
260
--border-checkbox-indeterminate-hover: 0.125em solid var(--color-checkbox-indeterminate);
261
--border-radio: 0.125em solid currentColor;
262
--border-radio-checked: 0.125em solid currentColor;
263
--border-radio-hover: 0.125em solid currentColor;
264
--border-radio-checked-hover: 0.125em solid currentColor;
265
--color-switch: #607D8B; --color-switch-thumb: #90A4AE;
267
--color-switch-on: var(--color-accent-2); --color-switch-thumb-on: var(--color-accent);
268
--color-switch-hover: #607D8B; --color-switch-thumb-hover: #90A4AE;
269
--color-switch-on-hover: var(--color-accent-2); --color-switch-thumb-on-hover: var(--color-accent);
270
--border-switch: none;
272
--border-switch-hover: none;
273
--radius-switch: 1em;
274
--height-switch: 0.75em;
275
--width-switch: 2em;
276
--border-switch-thumb: none;
277
--border-switch-thumb-hover: none;
278
--radius-switch-thumb: 1em;
279
--width-switch-thumb: 1em;
280
--height-switch-thumb: 1em;
281
--padding-switch-thumb: 0em; /* for some reason, you must set the unit */
282
--width-switch-thumb-hover: 1em;
283
--height-switch-thumb-hover: 1em;
284
--shadow-switch: 0 0 0 0 transparent; /* none */
286
--shadow-switch-thumb: 0 0 2px 0 rgba(0, 0, 0, 0.28), 0 0 3px 0 rgba(0, 0, 0, 0.40);
287
--shadow-switch-hover: 0 0 0 0 transparent; /* none */
288
--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);
289
--border-switch-on: none;
291
--border-switch-on-hover: none;
292
--border-switch-thumb-on: none;
293
--border-switch-thumb-on-hover: none;
294
--radius-switch-thumb-on: 1em;
295
--width-switch-thumb-on: 1em;
296
--height-switch-thumb-on: 1em;
297
--padding-switch-thumb-on: 0em; /* for some reason, you must set the unit */
298
--width-switch-thumb-on-hover: 1em;
299
--height-switch-thumb-on-hover: 1em;
300
--shadow-switch-on: 0 0 0 0 transparent; /* none */
302
--shadow-switch-thumb-on: 0 0 2px 0 rgba(0, 0, 0, 0.28), 0 0 3px 0 rgba(0, 0, 0, 0.40);
303
--shadow-switch-on-hover: 0 0 0 0 transparent; /* none */
304
--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);
305
--radius-checkbox: 0.125em;
307
--radius-radio: 1em;
308
--size-checkbox: 1em;
309
--shadow-form: 0 0 0 0 transparent; /* none */
311
--shadow-form-checked: 0 0 0 0 transparent; /* none */
312
--shadow-form-indeterminate: 0 0 0 0 transparent; /* none */
313
--shadow-form-hover: 0 0 0 0 transparent; /* none */
314
--shadow-form-checked-hover: 0 0 0 0 transparent; /* none */
315
--shadow-form-indeterminate-hover: 0 0 0 0 transparent; /* none */
316
/* RANGES */
318
--color-range: var(--color-accent-2); --color-range-text: var(--color-accent);
319
--color-range-hover: var(--color-accent-2); --color-range-hover-text: var(--color-accent);
320
--border-range: none;
322
--border-range-hover: none;
323
--radius-range: 1em;
324
--height-range: 0.75em;
325
--border-range-thumb: none;
326
--border-range-thumb-hover: none;
327
--position-range-thumb: -12.5%;
328
--position-range-thumb-hover: -12.5%;
329
--radius-range-thumb: 1em;
330
--width-range-thumb: 1em;
331
--height-range-thumb: 1em;
332
--width-range-thumb-hover: 1em;
333
--height-range-thumb-hover: 1em;
334
--shadow-range: 0 0 0 0 transparent; /* none */
335
--shadow-range-thumb: 0 0 2px 0 rgba(0, 0, 0, 0.28), 0 0 3px 0 rgba(0, 0, 0, 0.40);
336
--shadow-range-hover: 0 0 0 0 transparent; /* none */
337
--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);
338
/* CARDS */
340
--color-card: #546E7A; --color-card-text: var(--color-background-text);
341
--color-figcaption-text: #000000df;
342
--radius-card: 0;
344
--outline-outlined-card: 1px solid #FFFFFF80;
345
--radius-outlined-card: 4px;
346
--border-card: none;
347
--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);
348
--padding-card: 0 12px 12px 12px;
350
--padding-card-top: 12px;
351
--padding-card-figcaption: 0 12px 12px 12px;
352
--figure-max-size-horizontal-card: clamp(200px, 50%, 768px);
353
/* LAYOUT */
355
--gap-buttonbox: 4px;
356
--gap-label-checkbox: 4px;
357
--gap-box: 16px;
358
/* NAVBAR */
360
--color-navbar: #546E7A; --color-navbar-text: var(--color-background-text);
361
--color-navbar-link: var(--color-background-text);
362
--height-navbar: 48px;
364
--width-navbar-button: 56px;
365
--padding-navbar: 12px;
366
--gap-navbar: 0;
367
--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);
368
--border-navbar: none;
369
--radius-navbar: 0;
370
/* NAVRAIL */
372
--color-navrail: #546E7A; --color-navrail-text: var(--color-primary-text);
373
--color-navrail-link: var(--color-primary-text);
374
--color-navrail-link-hover: var(--color-primary-3);
375
--color-navrail-link-selected: var(--color-primary-3);
376
--width-navrail: 72px;
378
--height-navrail-button: 56px;
379
--padding-navrail: 0;
380
--gap-navrail: 0;
381
--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);
382
--border-navrail: none;
383
--radius-navrail: 0;
384
/* SIDENAV */
386
--color-sidenav: transparent; --color-sidenav-text: var(--color-caption-text);
387
--gap-sidenav-item: 1ch;
388
--padding-sidenav: 8px;
389
/* BREADCRUMBS */
391
--color-breadcrumbs: var(--color-navbar); --color-breadcrumbs-text: var(--color-navbar-text);
392
--color-breadcrumbs-link: var(--color-navbar-text);
393
--color-breadcrumbs-separator: var(--color-navbar-text);
394
--height-breadcrumbs: 48px;
396
--padding-breadcrumbs: 16px;
397
--shadow-breadcrumbs: var(--shadow-navbar);
398
--border-breadcrumbs: none;
399
--radius-breadcrumbs: 0;
400
--separator-breadcrumbs: " > ";
401
/* TABS */
403
--color-tab: var(--color-navbar); --color-tab-text: var(--color-navbar-text);
404
--color-tab-selected: var(--color-navbar); --color-tab-selected-text: var(--color-navbar-text);
405
--color-tab-hover: var(--color-navbar); --color-tab-hover-text: var(--color-navbar-text);
406
--color-tab-hover-selected: var(--color-navbar); --color-tab-hover-selected-text: var(--color-navbar-text);
407
--justify-tab-row: space-around;
409
--height-tab: 36px;
410
--width-tab: 80px;
411
--align-tab: center;
412
--border-tab: none;
413
--border-tab-selected: none;
414
--radius-tab: 0;
415
/* DIVIDERS */
417
--line-divider: 1px solid #FFFFFF80;
418
/* LISTS */
420
--style-unordered-list: disc;
421
--color-unordered-list-marker: currentColor;
422
--font-unordered-list-marker: var(--body-font);
423
--indent-unordered-list: 1em;
424
--style-ordered-list: decimal;
426
--color-ordered-list-marker: currentColor;
427
--font-ordered-list-marker: var(--body-font);
428
--indent-ordered-list: 1em;
429
/* TABLES */
431
--padding-cell: 1ch;
432
--border-cell-horizontal: 1px solid #FFFFFF20;
433
--border-cell-vertical: 1px solid #FFFFFF40;
434
--color-table: #546E7A; --color-table-text: var(--color-background-text);
435
--color-row-odd: #FFFFFF10; --color-row-odd-text: var(--color-background-text);
436
--color-row-even: transparent; --color-row-even-text: var(--color-background-text);
437
--color-row-header: var(--color-primary-1); --color-row-header-text: var(--color-primary-1-text);
438
/* BADGES */
440
--border-badge: none;
441
--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);
442
--x-badge: 100%;
443
--y-badge: 25%;
444
--width-badge: 2.25ch;
445
--height-badge: 2.25ch;
446
--radius-badge: 3ch;
447
--padding-badge: 0.25ch;
448
--color-badge: var(--color-accent); --color-badge-text: var(--color-accent-text);
449
/* AVATARS */
451
--radius-avatar: 0;
452
/* BUBBLES */
454
--border-bubble: none;
455
--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);
456
--radius-bubble: 1em;
457
--padding-bubble: 1ch;
458
--color-bubble: var(--color-accent-3); --color-bubble-text: var(--color-accent-3-text);
459
--color-bubble-alt: var(--color-accent-2); --color-bubble-alt-text: var(--color-accent-2-text);
460
/* INPUTS */
462
--color-input: #607D8B; --color-input-text: #FFFFFFbb;
463
--color-input-hover: #607D8B; --color-input-hover-text: #FFFFFFbb;
464
--color-input-active: #607D8B; --color-input-active-text: #FFFFFFdf;
465
--color-flat-input: transparent; --color-flat-input-text: #FFFFFFbb;
466
--color-flat-input-hover: transparent; --color-flat-input-hover-text: #FFFFFFbb;
467
--color-flat-input-active: transparent; --color-flat-input-active-text: #FFFFFFdf;
468
--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);
470
--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);
471
--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);
472
--shadow-flat-input: none;
473
--shadow-flat-input-hover: none;
474
--shadow-flat-input-active: none;
475
--border-input: none;
477
--border-input-hover: none;
478
--border-input-active: none;
479
--border-flat-input: none;
480
--border-flat-input-hover: none;
481
--border-flat-input-active: none;
482
--radius-input: 2px;
484
--radius-flat-input: 2px;
485
--height-input: 36px;
487
--padding-input: 4px 8px;
488
--min-width-input: 64px;
489
--size-input-icon: 16px;
491
/* TEXTAREAS */
493
--color-textarea: #607D8B; --color-textarea-text: #FFFFFFbb;
494
--color-textarea-hover: #607D8B; --color-textarea-hover-text: #FFFFFFbb;
495
--color-textarea-active: #607D8B; --color-textarea-active-text: #FFFFFFdf;
496
--color-flat-textarea: transparent; --color-flat-textarea-text: #FFFFFFbb;
497
--color-flat-textarea-hover: transparent; --color-flat-textarea-hover-text: #FFFFFFbb;
498
--color-flat-textarea-active: transparent; --color-flat-textarea-active-text: #FFFFFFdf;
499
--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);
501
--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);
502
--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);
503
--shadow-flat-textarea: none;
504
--shadow-flat-textarea-hover: none;
505
--shadow-flat-textarea-active: none;
506
--border-textarea: none;
508
--border-textarea-hover: none;
509
--border-textarea-active: none;
510
--border-flat-textarea: 1px solid #FFFFFF40;
511
--border-flat-textarea-hover: 1px solid #FFFFFF40;
512
--border-flat-textarea-active: 1px solid #FFFFFF40;
513
--radius-textarea: 2px;
515
--radius-flat-textarea: 8px;
516
--padding-textarea: 8px;
518
/* MENUS */
520
--color-toolbar: #546E7A; --color-toolbar-text: #FFFFFFde;
521
--color-menu: #607D8B; --color-menu-text: #FFFFFFde;
522
--color-menu-item: transparent; --color-menu-item-text: #FFFFFFde;
523
--color-menu-item-hover: #FFFFFF10; --color-menu-item-hover-text: #FFFFFFde;
524
--gap-toolbar: 4px;
526
--gap-menu: 0;
527
--border-toolbar: none;
528
--border-menu: none;
529
--border-menu-item: none;
530
--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);
531
--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);
532
--height-toolbar: 48px;
533
--height-menu-item: 24px;
534
--width-toolbar: fit-content;
535
--radius-toolbar: 0;
536
--radius-menu: 0;
537
--padding-toolbar: 4px;
538
--padding-menu: 2px 0;
539
--padding-menu-item: 2px 8px;
540
/* DIALOGS */
542
--color-modal-backdrop: radial-gradient(circle, #00000040 12.5%, #000000cc 100%);
543
}
544
/* Extra styles */
546
h6 {
548
/* Make it look nicer */
549
text-transform: uppercase;
550
color: var(--color-accent);
551
}
552
:any-link, .link-button {
554
/* Make them nicer, not possible with the font property */
555
font-weight: 500;
556
text-decoration: underline;
557
text-decoration-thickness: .05em;
558
text-underline-offset: .1em;
559
}
560
button, .button, input[type=button], input[type=submit], input[type=reset], input[type="file"]::file-selector-button {
562
/* Make it look nicer */
563
text-transform: uppercase;
564
}
565
.toast-container li {
567
/* Toast appear */
568
animation: toastSlide 750ms cubic-bezier(0.16, 1, 0.3, 1);
569
transform-origin: bottom;
570
}
571
.toast-container li.removing {
573
/* Toast disappear */
574
animation: toastCompress 500ms cubic-bezier(0.55, 0, 1, 0.45);
575
}
576
.toast-container li.removing ~ li {
578
/* TODO */
579
}
580
@keyframes toastSlide {
582
0% {
583
opacity: 0;
584
transform: translateY(100vh);
585
}
586
100% {
588
opacity: 1;
589
transform: translateY(0);
590
}
591
}
592
@keyframes toastCompress {
594
0% {
595
transform: rotateX(0);
596
opacity: 1;
597
}
598
100% {
600
transform: rotateX(180deg);
601
opacity: 0;
602
}
603
}
604
input[type="checkbox"]:not(.switch):checked::after, input[type="checkbox"]:not(.switch):indeterminate::after, input[type="radio"]:checked::after {
606
/* Checked */
607
animation: check 250ms cubic-bezier(0.61, 1, 0.88, 1);
608
}
609
input[type="checkbox"]:not(.switch), input[type="radio"] {
611
/* Transition background */
612
transition: box-shadow 250ms cubic-bezier(0.61, 1, 0.88, 1);
613
}
614
input[type="checkbox"].switch::after {
616
/* Transition switch thumb */
617
transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 375ms cubic-bezier(0.61, 1, 0.88, 1);
618
}
619
input[type="range"]::-webkit-slider-thumb {
621
transition: box-shadow 375ms cubic-bezier(0.61, 1, 0.88, 1);
622
}
623
input[type="range"]::-moz-range-thumb {
625
transition: box-shadow 375ms cubic-bezier(0.61, 1, 0.88, 1);
626
}
627
button, .button, input[type="file"]::file-selector-button, input, select, textarea {
629
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);
630
}
631
@keyframes check {
633
0% {
634
transform: scale(0);
635
}
636
100% {
638
transform: scale(1);
639
}
640
}
641
.navbar {
643
position: sticky;
644
}
645
:is(.navbar, .breadcrumbs) a:not(:hover) {
647
text-decoration: none;
648
}
649
x-notebook > label:has(input[type="radio"]:checked) {
651
border-bottom: 4px solid var(--color-accent);
652
transition: border 125ms ease;
653
}
654
x-notebook > label {
656
text-transform: uppercase;
657
font-weight: 600;
658
flex: 1 0 auto;
659
}
660
th, ol.table > li.list-header {
662
border: none;
663
}
664
th, td {
666
text-align: start;
667
}
668
.chat-bubble::before {
670
content: "";
671
position: absolute;
672
width: 1em;
673
height: 1em;
674
border: 0.75em solid;
675
border-color: transparent var(--color-bubble) transparent transparent;
676
left: -1.5em;
677
top: 1em;
678
}
679
.bubble-alt::before {
681
content: "";
682
position: absolute;
683
width: 1em;
684
height: 1em;
685
border: 0.75em solid;
686
border-color: transparent transparent transparent var(--color-bubble-alt);
687
transform: translateX(100%);
688
width: 100%;
689
left: 0;
690
top: 1em;
691
}
692
::placeholder {
694
opacity: 0.5;
695
}
696
:is(input:not([type=button], [type=checkbox], [type=radio], [type=submit], [type=reset], [type=file], [type=range], [type=color]), select).input-flat {
698
border-bottom: 2px solid var(--color-primary) !important;
699
}
700
:disabled {
702
opacity: 0.5;
703
}
704
input[type="color"] {
706
padding: 0;
707
border: 0;
708
overflow: hidden;
709
}
710
input[type="color"]::-webkit-color-swatch {
712
border: none;
713
}
714
input[type="color"]::-webkit-color-swatch-wrapper {
716
padding: 0;
717
}
718
:is(input:not([type=button], [type=checkbox], [type=radio], [type=submit], [type=reset], [type=file], [type=range]), select, textarea):focus {
720
outline: none; /* there is a blinking cursor, better not to have an outline */
721
}
722
textarea {
724
font: var(--mono-font);
725
}
726
button:has(iconify-icon) {
728
min-width: var(--height-button);
729
}
730
details.dropdown[open] > summary ~ * {
732
animation: menu 375ms cubic-bezier(0.22, 1, 0.36, 1);
733
transform-origin: top;
734
}
735
@keyframes menu {
737
0% {
738
transform: rotateX(-90deg);
739
opacity: 0;
740
}
741
100% {
743
transform: rotateX(0);
744
opacity: 1;
745
}
746
}
747
details.slidein[open] > summary ~ * {
749
animation: menu2 375ms cubic-bezier(0.22, 1, 0.36, 1);
750
transform-origin: left;
751
}
752
@keyframes menu2 {
754
0% {
755
transform: rotateY(-90deg);
756
opacity: 0;
757
}
758
100% {
760
transform: rotateY(0);
761
opacity: 1;
762
}
763
}
764
dialog:modal {
766
animation: entranceY 500ms cubic-bezier(0.33, 1, 0.68, 1);
767
transform-origin: center;
768
}
769
dialog {
771
transition: opacity 250ms cubic-bezier(0.33, 1, 0.68, 1);
772
}
773
dialog.sheet-left:modal {
775
animation: entranceX 500ms cubic-bezier(0.33, 1, 0.68, 1);
776
transform-origin: left;
777
}
778
dialog.sheet-right:modal {
780
animation: entranceX 500ms cubic-bezier(0.33, 1, 0.68, 1);
781
transform-origin: right;
782
}
783
dialog.sheet-top:modal {
785
animation: entranceY 500ms cubic-bezier(0.33, 1, 0.68, 1);
786
transform-origin: top;
787
}
788
dialog.sheet-bottom:modal {
790
animation: entranceY 500ms cubic-bezier(0.33, 1, 0.68, 1);
791
transform-origin: bottom;
792
}
793
dialog::backdrop {
795
backdrop-filter: saturate(0.5) contrast(0.5) brightness(1.25) blur(2px);
796
}
797
@keyframes entranceX {
799
0% {
800
transform: rotateY(-90deg);
801
}
802
100% {
803
transform: rotateY(0);
804
}
805
}
806
@keyframes entranceY {
808
0% {
809
transform: rotateX(-90deg);
810
}
811
100% {
812
transform: rotateX(0);
813
}
814
}
815
@keyframes fade {
817
0% {
818
opacity: 0;
819
}
820
100% {
821
opacity: 1;
822
}
823
}
824
:where(.navrail, .navbar, .sidenav) > iconify-icon {
826
font-size: 1.5rem;
827
}
828
.navbar > *, .navbar > ul > li > * {
830
height: var(--height-navbar);
831
display: flex;
832
align-items: center;
833
justify-content: center;
834
}
835
header:has(.navbar) .breadcrumbs {
837
z-index: 2 !important;
838
position: relative;
839
box-shadow: none;
840
}
841
.navbar a {
843
font-weight: 500;
844
}
845
x-notebook > label:has(input[type="radio"]:checked) {
847
background: var(--color-tab-selected);
848
color: var(--color-tab-selected-text);
849
border: none;
850
box-shadow: inset 0 -4px 0 var(--color-accent);
851
transition: box-shadow 125ms ease;
852
}
853
x-notebook > label:has(input[type="radio"]) {
855
transition: box-shadow 125ms ease;
856
}
857
.file-link, .button, #forum-banner a, .nolink, ins, .code-view > ins, del, .code-view > del, #pagination > a {
859
text-decoration: none;
860
}
861