List of themes made for the Roundabout software

By using this site, you agree to have cookies stored on your device, strictly for functional purposes, such as storing your session and preferences.

Dismiss

 dusk.css

View raw Download
text/plain • 30.25 kiB
Unicode text, UTF-8 text
        
            
1
/*
2
Dusk theme for roundabout web interface
3
Copyright (C) 2024 Roundabout developer
4
5
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
10
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
15
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
19
: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
140
/* 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
148
--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
154
--color-background: #455A64; --color-background-text: #FFFFFFf4;
155
--color-caption-text: #FFFFFFb9;
156
--color-label-text: #FFFFFFdf;
157
158
--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
163
--color-not-accent: transparent; --color-not-accent-text: var(--color-background-text);
164
165
--color-scheme: dark;
166
167
/* 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
173
--color-scheme-code: dark;
174
175
--size-keyboard: 1.5em;
176
--padding-keyboard: 0.375em;
177
--padding-code: 12px;
178
179
--radius-code: 0;
180
--radius-short-code: 0.125em;
181
--border-code: none;
182
--border-short-code: none;
183
184
--shadow-keyboard: 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24);
185
186
/* 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
194
--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
199
--border-button: none;
200
--border-button-hover: none;
201
--border-flat-button: none;
202
--border-flat-button-hover: none;
203
204
--radius-button: 2px;
205
--radius-round-button: 100vmin;
206
--radius-flat-button: 2px;
207
208
--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
216
/* 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
223
/* 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
229
--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
241
--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
243
/* 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
255
--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
266
--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
271
--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
285
--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
290
--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
301
--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
306
--radius-checkbox: 0.125em;
307
--radius-radio: 1em;
308
--size-checkbox: 1em;
309
310
--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
317
/* 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
321
--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
339
/* CARDS */
340
--color-card: #546E7A; --color-card-text: var(--color-background-text);
341
--color-figcaption-text: #000000df;
342
343
--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
349
--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
354
/* LAYOUT */
355
--gap-buttonbox: 4px;
356
--gap-label-checkbox: 4px;
357
--gap-box: 16px;
358
359
/* NAVBAR */
360
--color-navbar: #546E7A; --color-navbar-text: var(--color-background-text);
361
--color-navbar-link: var(--color-background-text);
362
363
--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
371
/* 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
377
--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
385
/* SIDENAV */
386
--color-sidenav: transparent; --color-sidenav-text: var(--color-caption-text);
387
--gap-sidenav-item: 1ch;
388
--padding-sidenav: 8px;
389
390
/* 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
395
--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
402
/* 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
408
--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
416
/* DIVIDERS */
417
--line-divider: 1px solid #FFFFFF80;
418
419
/* 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
425
--style-ordered-list: decimal;
426
--color-ordered-list-marker: currentColor;
427
--font-ordered-list-marker: var(--body-font);
428
--indent-ordered-list: 1em;
429
430
/* 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
439
/* 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
450
/* AVATARS */
451
--radius-avatar: 0;
452
453
/* 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
461
/* 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
469
--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
476
--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
483
--radius-input: 2px;
484
--radius-flat-input: 2px;
485
486
--height-input: 36px;
487
--padding-input: 4px 8px;
488
--min-width-input: 64px;
489
490
--size-input-icon: 16px;
491
492
/* 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
500
--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
507
--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
514
--radius-textarea: 2px;
515
--radius-flat-textarea: 8px;
516
517
--padding-textarea: 8px;
518
519
/* 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
525
--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
541
/* DIALOGS */
542
--color-modal-backdrop: radial-gradient(circle, #00000040 12.5%, #000000cc 100%);
543
}
544
545
/* Extra styles */
546
547
h6 {
548
/* Make it look nicer */
549
text-transform: uppercase;
550
color: var(--color-accent);
551
}
552
553
: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
561
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
566
.toast-container li {
567
/* Toast appear */
568
animation: toastSlide 750ms cubic-bezier(0.16, 1, 0.3, 1);
569
transform-origin: bottom;
570
}
571
572
.toast-container li.removing {
573
/* Toast disappear */
574
animation: toastCompress 500ms cubic-bezier(0.55, 0, 1, 0.45);
575
}
576
577
.toast-container li.removing ~ li {
578
/* TODO */
579
}
580
581
@keyframes toastSlide {
582
0% {
583
opacity: 0;
584
transform: translateY(100vh);
585
}
586
587
100% {
588
opacity: 1;
589
transform: translateY(0);
590
}
591
}
592
593
@keyframes toastCompress {
594
0% {
595
transform: rotateX(0);
596
opacity: 1;
597
}
598
599
100% {
600
transform: rotateX(180deg);
601
opacity: 0;
602
}
603
}
604
605
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
610
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
615
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
620
input[type="range"]::-webkit-slider-thumb {
621
transition: box-shadow 375ms cubic-bezier(0.61, 1, 0.88, 1);
622
}
623
624
input[type="range"]::-moz-range-thumb {
625
transition: box-shadow 375ms cubic-bezier(0.61, 1, 0.88, 1);
626
}
627
628
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
632
@keyframes check {
633
0% {
634
transform: scale(0);
635
}
636
637
100% {
638
transform: scale(1);
639
}
640
}
641
642
.navbar {
643
position: sticky;
644
}
645
646
:is(.navbar, .breadcrumbs) a:not(:hover) {
647
text-decoration: none;
648
}
649
650
x-notebook > label:has(input[type="radio"]:checked) {
651
border-bottom: 4px solid var(--color-accent);
652
transition: border 125ms ease;
653
}
654
655
x-notebook > label {
656
text-transform: uppercase;
657
font-weight: 600;
658
flex: 1 0 auto;
659
}
660
661
th, ol.table > li.list-header {
662
border: none;
663
}
664
665
th, td {
666
text-align: start;
667
}
668
669
.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
680
.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
693
::placeholder {
694
opacity: 0.5;
695
}
696
697
: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
701
:disabled {
702
opacity: 0.5;
703
}
704
705
input[type="color"] {
706
padding: 0;
707
border: 0;
708
overflow: hidden;
709
}
710
711
input[type="color"]::-webkit-color-swatch {
712
border: none;
713
}
714
715
input[type="color"]::-webkit-color-swatch-wrapper {
716
padding: 0;
717
}
718
719
: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
723
textarea {
724
font: var(--mono-font);
725
}
726
727
button:has(iconify-icon) {
728
min-width: var(--height-button);
729
}
730
731
details.dropdown[open] > summary ~ * {
732
animation: menu 375ms cubic-bezier(0.22, 1, 0.36, 1);
733
transform-origin: top;
734
}
735
736
@keyframes menu {
737
0% {
738
transform: rotateX(-90deg);
739
opacity: 0;
740
}
741
742
100% {
743
transform: rotateX(0);
744
opacity: 1;
745
}
746
}
747
748
details.slidein[open] > summary ~ * {
749
animation: menu2 375ms cubic-bezier(0.22, 1, 0.36, 1);
750
transform-origin: left;
751
}
752
753
@keyframes menu2 {
754
0% {
755
transform: rotateY(-90deg);
756
opacity: 0;
757
}
758
759
100% {
760
transform: rotateY(0);
761
opacity: 1;
762
}
763
}
764
765
dialog:modal {
766
animation: entranceY 500ms cubic-bezier(0.33, 1, 0.68, 1);
767
transform-origin: center;
768
}
769
770
dialog {
771
transition: opacity 250ms cubic-bezier(0.33, 1, 0.68, 1);
772
}
773
774
dialog.sheet-left:modal {
775
animation: entranceX 500ms cubic-bezier(0.33, 1, 0.68, 1);
776
transform-origin: left;
777
}
778
779
dialog.sheet-right:modal {
780
animation: entranceX 500ms cubic-bezier(0.33, 1, 0.68, 1);
781
transform-origin: right;
782
}
783
784
dialog.sheet-top:modal {
785
animation: entranceY 500ms cubic-bezier(0.33, 1, 0.68, 1);
786
transform-origin: top;
787
}
788
789
dialog.sheet-bottom:modal {
790
animation: entranceY 500ms cubic-bezier(0.33, 1, 0.68, 1);
791
transform-origin: bottom;
792
}
793
794
dialog::backdrop {
795
backdrop-filter: saturate(0.5) contrast(0.5) brightness(1.25) blur(2px);
796
}
797
798
@keyframes entranceX {
799
0% {
800
transform: rotateY(-90deg);
801
}
802
100% {
803
transform: rotateY(0);
804
}
805
}
806
807
@keyframes entranceY {
808
0% {
809
transform: rotateX(-90deg);
810
}
811
100% {
812
transform: rotateX(0);
813
}
814
}
815
816
@keyframes fade {
817
0% {
818
opacity: 0;
819
}
820
100% {
821
opacity: 1;
822
}
823
}
824
825
:where(.navrail, .navbar, .sidenav) > iconify-icon {
826
font-size: 1.5rem;
827
}
828
829
.navbar > *, .navbar > ul > li > * {
830
height: var(--height-navbar);
831
display: flex;
832
align-items: center;
833
justify-content: center;
834
}
835
836
header:has(.navbar) .breadcrumbs {
837
z-index: 2 !important;
838
position: relative;
839
box-shadow: none;
840
}
841
842
.navbar a {
843
font-weight: 500;
844
}
845
846
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
854
x-notebook > label:has(input[type="radio"]) {
855
transition: box-shadow 125ms ease;
856
}
857
858
.file-link, .button, #forum-banner a, .nolink, ins, .code-view > ins, del, .code-view > del, #pagination > a {
859
text-decoration: none;
860
}
861
862