@phantompixeldev/retrocss 1.0.6 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/MIGRATION.md +127 -0
- package/README.md +243 -171
- package/dist/retro.css +1035 -722
- package/dist/retro.css.map +1 -1
- package/dist/retro.js +231 -48
- package/dist/retro.min.css +1 -1
- package/dist/retro.min.css.map +1 -1
- package/dist/retro.min.js +2 -2
- package/package.json +5 -3
package/dist/retro.css
CHANGED
|
@@ -45,6 +45,73 @@
|
|
|
45
45
|
* color: $retro-primary;
|
|
46
46
|
*/
|
|
47
47
|
/* Colors */
|
|
48
|
+
/**
|
|
49
|
+
* @name Accessible Text Colors
|
|
50
|
+
* @group variables
|
|
51
|
+
* @type Color
|
|
52
|
+
* @description
|
|
53
|
+
* Companion ramp to the palette above. The palette values are tuned as *fills*
|
|
54
|
+
* -- a filled badge or button with inverse text sitting on top. Used directly
|
|
55
|
+
* as *text* on a page background many of them fail WCAG AA badly: $retro-info
|
|
56
|
+
* (#00ffff) measures 1.25:1 on white, $retro-gold 1.40:1, $retro-warning 1.97:1.
|
|
57
|
+
*
|
|
58
|
+
* These `-text` values keep each colour's hue and saturation but clear 4.75:1
|
|
59
|
+
* against both light surfaces (#ffffff and the #c0c0c0 body). Dark-theme
|
|
60
|
+
* counterparts live in the [data-theme="dark"] block and clear 4.75:1 against
|
|
61
|
+
* both #23242a (card) and #181818 (body).
|
|
62
|
+
*
|
|
63
|
+
* Use the palette value for a fill, the -text value for text on a surface.
|
|
64
|
+
* @example scss
|
|
65
|
+
* background: var(--retro-info); // fill
|
|
66
|
+
* color: var(--retro-info-text); // text on a page background
|
|
67
|
+
*/
|
|
68
|
+
/**
|
|
69
|
+
* @name On-Fill Text Colors
|
|
70
|
+
* @group variables
|
|
71
|
+
* @type Color
|
|
72
|
+
* @description
|
|
73
|
+
* Text/icon colour to place *on top of* the matching fill. Distinct from the
|
|
74
|
+
* -text ramp, which is that hue used as text on a page surface.
|
|
75
|
+
*
|
|
76
|
+
* This is the framework's biggest dark-mode defect: components hardcode
|
|
77
|
+
* `color: #fff` over `background: var(--retro-name)`, and the dark palette is
|
|
78
|
+
* light, so 16 of 19 fills currently carry white text below 4.5:1 --
|
|
79
|
+
* #fff on the dark --retro-success (#2ecc71) is 2.10:1. Each -fg value below
|
|
80
|
+
* is whichever of black/white scores higher on its own fill.
|
|
81
|
+
*
|
|
82
|
+
* Each value is whichever of black/white scores higher on its own fill, and the
|
|
83
|
+
* hover/active states below are clamped so that choice stays >=4.5:1 across all
|
|
84
|
+
* three. Note --retro-danger-fg is black: white on pure #ff0000 is only 4.00:1.
|
|
85
|
+
* For white-on-red at full AA, override the fill instead:
|
|
86
|
+
* :root { --retro-danger: #cc0000; --retro-danger-fg: #fff; }
|
|
87
|
+
*/
|
|
88
|
+
/**
|
|
89
|
+
* @name Semantic Text Colors
|
|
90
|
+
* @group variables
|
|
91
|
+
* @type Color
|
|
92
|
+
* @description
|
|
93
|
+
* Surface-aware text colours. Prefer these over $retro-black / $retro-white,
|
|
94
|
+
* which invert between themes for backward compatibility and therefore read
|
|
95
|
+
* confusingly at the call site.
|
|
96
|
+
*/
|
|
97
|
+
/**
|
|
98
|
+
* @name Interaction State Colors
|
|
99
|
+
* @group variables
|
|
100
|
+
* @type Color
|
|
101
|
+
* @description
|
|
102
|
+
* Hover/active fills for every palette hue, as (hover, active) pairs.
|
|
103
|
+
*
|
|
104
|
+
* Nominally +/-10% lightness, but each state is clamped back toward its base
|
|
105
|
+
* until it holds >=4.6:1 against that hue's -fg. Without the clamp a mid-
|
|
106
|
+
* luminance fill drifts past whichever of black/white sits on it -- e.g. the
|
|
107
|
+
* light teal at +10% carried its white text at only 2.59:1.
|
|
108
|
+
*
|
|
109
|
+
* Tokens rather than inline color.adjust() calls, because a compiled
|
|
110
|
+
* color.adjust() is a fixed hex and cannot respond to [data-theme]. Written as
|
|
111
|
+
* literals so Sass emits hex rather than rgb(46.257%...) notation.
|
|
112
|
+
*/
|
|
113
|
+
/* Darker primary, used for open/active dropdown chrome */
|
|
114
|
+
/* Neutral surface tint, used for subtle hover backgrounds */
|
|
48
115
|
/**
|
|
49
116
|
* @name Typography Variables
|
|
50
117
|
* @group variables
|
|
@@ -127,6 +194,7 @@
|
|
|
127
194
|
/* Container Sizes */
|
|
128
195
|
/* CSS Custom Properties */
|
|
129
196
|
:root {
|
|
197
|
+
color-scheme: light;
|
|
130
198
|
--retro-body-bg: #c0c0c0; /* Fallback for IE11 */
|
|
131
199
|
--retro-body-bg-dark: #3a3a3a; /* Fallback for IE11 */
|
|
132
200
|
--retro-bg: #ffffff; /* Fallback for IE11 */
|
|
@@ -135,14 +203,16 @@
|
|
|
135
203
|
--retro-light: #f0f0f0; /* Fallback for IE11 */
|
|
136
204
|
--retro-white: #ffffff; /* Fallback for IE11 */
|
|
137
205
|
--retro-black: #000000; /* Fallback for IE11 */
|
|
138
|
-
--retro-color-primary:
|
|
139
|
-
--retro-color-success:
|
|
140
|
-
--retro-color-danger:
|
|
141
|
-
--retro-color-warning:
|
|
142
|
-
--retro-color-info:
|
|
143
|
-
--retro-color-teal:
|
|
144
|
-
--retro-color-pink:
|
|
145
|
-
--retro-color-lime:
|
|
206
|
+
--retro-color-primary: var(--retro-primary-text);
|
|
207
|
+
--retro-color-success: var(--retro-success-text);
|
|
208
|
+
--retro-color-danger: var(--retro-danger-text);
|
|
209
|
+
--retro-color-warning: var(--retro-warning-text);
|
|
210
|
+
--retro-color-info: var(--retro-info-text);
|
|
211
|
+
--retro-color-teal: var(--retro-teal-text);
|
|
212
|
+
--retro-color-pink: var(--retro-pink-text);
|
|
213
|
+
--retro-color-lime: var(--retro-lime-text);
|
|
214
|
+
--retro-color-success-rgb: 0, 128, 0;
|
|
215
|
+
--retro-color-danger-rgb: 255, 0, 0;
|
|
146
216
|
--retro-border-light: #ffffff; /* Fallback for IE11 */
|
|
147
217
|
--retro-border-medium: #808080; /* Fallback for IE11 */
|
|
148
218
|
--retro-border-dark: #000000; /* Fallback for IE11 */
|
|
@@ -184,12 +254,102 @@
|
|
|
184
254
|
--retro-black-rgb: 0, 0, 0; /* Fallback for IE11 */
|
|
185
255
|
--retro-white-rgb: 255, 255, 255; /* Fallback for IE11 */
|
|
186
256
|
--retro-light-rgb: 240, 240, 240; /* Fallback for IE11 */
|
|
187
|
-
--retro-
|
|
188
|
-
--retro-
|
|
189
|
-
--retro-
|
|
190
|
-
--retro-
|
|
191
|
-
--retro-
|
|
192
|
-
--retro-
|
|
257
|
+
--retro-primary-text: #000080;
|
|
258
|
+
--retro-success-text: #005900;
|
|
259
|
+
--retro-danger-text: #9c0000;
|
|
260
|
+
--retro-warning-text: #694400;
|
|
261
|
+
--retro-info-text: #005454;
|
|
262
|
+
--retro-teal-text: #005454;
|
|
263
|
+
--retro-tan-text: #604726;
|
|
264
|
+
--retro-pink-text: #97004c;
|
|
265
|
+
--retro-lime-text: #155715;
|
|
266
|
+
--retro-cyan-text: #005458;
|
|
267
|
+
--retro-orange-text: #6e4100;
|
|
268
|
+
--retro-brown-text: #67441f;
|
|
269
|
+
--retro-violet-text: #5913d0;
|
|
270
|
+
--retro-gray-text: #4b4b4b;
|
|
271
|
+
--retro-maroon-text: #800000;
|
|
272
|
+
--retro-gold-text: #584a00;
|
|
273
|
+
--retro-navy-text: #001f4f;
|
|
274
|
+
--retro-olive-text: #4e4e00;
|
|
275
|
+
--retro-silver-text: #4b4b4b;
|
|
276
|
+
--retro-primary-fg: #ffffff;
|
|
277
|
+
--retro-success-fg: #ffffff;
|
|
278
|
+
--retro-danger-fg: #000000;
|
|
279
|
+
--retro-warning-fg: #000000;
|
|
280
|
+
--retro-info-fg: #000000;
|
|
281
|
+
--retro-teal-fg: #ffffff;
|
|
282
|
+
--retro-tan-fg: #000000;
|
|
283
|
+
--retro-pink-fg: #000000;
|
|
284
|
+
--retro-lime-fg: #000000;
|
|
285
|
+
--retro-cyan-fg: #000000;
|
|
286
|
+
--retro-orange-fg: #000000;
|
|
287
|
+
--retro-brown-fg: #ffffff;
|
|
288
|
+
--retro-violet-fg: #ffffff;
|
|
289
|
+
--retro-gray-fg: #000000;
|
|
290
|
+
--retro-maroon-fg: #ffffff;
|
|
291
|
+
--retro-gold-fg: #000000;
|
|
292
|
+
--retro-navy-fg: #ffffff;
|
|
293
|
+
--retro-olive-fg: #000000;
|
|
294
|
+
--retro-silver-fg: #000000;
|
|
295
|
+
--retro-text: #000000;
|
|
296
|
+
--retro-text-muted: #4b4b4b;
|
|
297
|
+
--retro-text-inverse: #ffffff;
|
|
298
|
+
--retro-primary-hover: #0000b3;
|
|
299
|
+
--retro-primary-active: #00004d;
|
|
300
|
+
--retro-success-hover: #008500;
|
|
301
|
+
--retro-success-active: #004d00;
|
|
302
|
+
--retro-danger-hover: #ff3333;
|
|
303
|
+
--retro-danger-active: #f00000;
|
|
304
|
+
--retro-warning-hover: #ffb733;
|
|
305
|
+
--retro-warning-active: #cc8400;
|
|
306
|
+
--retro-info-hover: #33ffff;
|
|
307
|
+
--retro-info-active: #00cccc;
|
|
308
|
+
--retro-teal-hover: #008080;
|
|
309
|
+
--retro-teal-active: #004d4d;
|
|
310
|
+
--retro-tan-hover: #e0ccb1;
|
|
311
|
+
--retro-tan-active: #c49c67;
|
|
312
|
+
--retro-pink-hover: #ff9cce;
|
|
313
|
+
--retro-pink-active: #ff369b;
|
|
314
|
+
--retro-lime-hover: #5bd75b;
|
|
315
|
+
--retro-lime-active: #28a428;
|
|
316
|
+
--retro-cyan-hover: #22f7ff;
|
|
317
|
+
--retro-cyan-active: #00b4bb;
|
|
318
|
+
--retro-orange-hover: #ffc87a;
|
|
319
|
+
--retro-orange-active: #ff9e14;
|
|
320
|
+
--retro-brown-hover: #9f6930;
|
|
321
|
+
--retro-brown-active: #64421e;
|
|
322
|
+
--retro-violet-hover: #8c51ef;
|
|
323
|
+
--retro-violet-active: #5f14e0;
|
|
324
|
+
--retro-gray-hover: #cacaca;
|
|
325
|
+
--retro-gray-active: #979797;
|
|
326
|
+
--retro-maroon-hover: #b30000;
|
|
327
|
+
--retro-maroon-active: #4d0000;
|
|
328
|
+
--retro-gold-hover: #ffdf33;
|
|
329
|
+
--retro-gold-active: #ccac00;
|
|
330
|
+
--retro-navy-hover: #003382;
|
|
331
|
+
--retro-navy-active: #000b1c;
|
|
332
|
+
--retro-olive-hover: #b3b300;
|
|
333
|
+
--retro-olive-active: #7b7b00;
|
|
334
|
+
--retro-silver-hover: #dadada;
|
|
335
|
+
--retro-silver-active: #a7a7a7;
|
|
336
|
+
--retro-primary-dark: #00004d;
|
|
337
|
+
--retro-gray-100: #f0f0f0;
|
|
338
|
+
--retro-font: MS Sans Serif, Microsoft Sans Serif, Arial, sans-serif;
|
|
339
|
+
--retro-font-heading: MS Sans Serif, Microsoft Sans Serif, Arial, sans-serif;
|
|
340
|
+
--retro-font-mono: Courier New, Courier, monospace;
|
|
341
|
+
--retro-font-size: 0.875rem;
|
|
342
|
+
--retro-font-size-xs: 0.6875rem;
|
|
343
|
+
--retro-font-size-sm: 0.75rem;
|
|
344
|
+
--retro-font-size-lg: 1rem;
|
|
345
|
+
--retro-font-size-xl: 1.125rem;
|
|
346
|
+
--retro-font-size-2xl: 1.375rem;
|
|
347
|
+
--retro-font-size-3xl: 1.75rem;
|
|
348
|
+
--retro-line-height: 1.5;
|
|
349
|
+
--retro-line-height-tight: 1.25;
|
|
350
|
+
--retro-font-weight-normal: 400;
|
|
351
|
+
--retro-font-weight-bold: 700;
|
|
352
|
+
--retro-measure: 70ch;
|
|
193
353
|
--retro-spacing-xxs: 2px; /* Fallback for IE11 */
|
|
194
354
|
--retro-spacing-xs: 4px; /* Fallback for IE11 */
|
|
195
355
|
--retro-spacing-sm: 8px; /* Fallback for IE11 */
|
|
@@ -207,6 +367,9 @@
|
|
|
207
367
|
--retro-border-sunken: inset -1px -1px 0 #ffffff, inset 1px 1px 0 #000000; /* Fallback for IE11 */
|
|
208
368
|
--retro-box-shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.1); /* Fallback for IE11 */
|
|
209
369
|
--retro-box-shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.15); /* Fallback for IE11 */
|
|
370
|
+
--retro-shadow-light: #ffffff;
|
|
371
|
+
--retro-box-shadow-outset-button: inset -1px -1px 0 #000000, inset 1px 1px 0 #ffffff;
|
|
372
|
+
--retro-box-shadow-inset: inset -1px -1px 0 #ffffff, inset 1px 1px 0 #000000;
|
|
210
373
|
--retro-z-index-base: 1;
|
|
211
374
|
--retro-z-index-dropdown: 1000;
|
|
212
375
|
--retro-z-index-sticky: 1020;
|
|
@@ -220,6 +383,7 @@
|
|
|
220
383
|
--retro-transition-duration-fast: 0.05s;
|
|
221
384
|
--retro-transition-timing-function: ease;
|
|
222
385
|
--retro-transition-timing-function-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
386
|
+
--retro-transition-base: 0.1s ease;
|
|
223
387
|
--retro-container-sm: 540px;
|
|
224
388
|
--retro-container-md: 720px;
|
|
225
389
|
--retro-container-lg: 960px;
|
|
@@ -228,35 +392,49 @@
|
|
|
228
392
|
--retro-container-fluid: 100%;
|
|
229
393
|
--retro-card-bg: #f0f0f0;
|
|
230
394
|
--retro-card-header-bg: #000080;
|
|
231
|
-
--retro-card-header-text: #
|
|
232
|
-
--retro-card-content-bg: #
|
|
233
|
-
--retro-card-content-text: #
|
|
395
|
+
--retro-card-header-text: #ffffff;
|
|
396
|
+
--retro-card-content-bg: #ffffff;
|
|
397
|
+
--retro-card-content-text: #000000;
|
|
234
398
|
--retro-card-footer-bg: #f0f0f0;
|
|
235
|
-
--retro-card-footer-text: #
|
|
399
|
+
--retro-card-footer-text: #000000;
|
|
236
400
|
--retro-modal-bg: #f0f0f0;
|
|
237
401
|
--retro-modal-header-bg: #000080;
|
|
238
|
-
--retro-modal-header-text: #
|
|
239
|
-
--retro-table-bg: #
|
|
402
|
+
--retro-modal-header-text: #ffffff;
|
|
403
|
+
--retro-table-bg: #ffffff;
|
|
240
404
|
--retro-table-header-bg: #f0f0f0;
|
|
241
|
-
--retro-table-header-text: #
|
|
242
|
-
--retro-table-striped-bg: #
|
|
243
|
-
--retro-input-bg: #
|
|
244
|
-
--retro-input-text: #
|
|
245
|
-
--retro-sidebar-bg: #
|
|
246
|
-
--retro-sidebar-text: #
|
|
247
|
-
--retro-dropdown-bg: #
|
|
248
|
-
--retro-dropdown-text: #
|
|
249
|
-
--retro-list-bg: #
|
|
250
|
-
--retro-list-text: #
|
|
251
|
-
--retro-progress-bg: #
|
|
405
|
+
--retro-table-header-text: #000000;
|
|
406
|
+
--retro-table-striped-bg: #f0f0f0;
|
|
407
|
+
--retro-input-bg: #ffffff;
|
|
408
|
+
--retro-input-text: #000000;
|
|
409
|
+
--retro-sidebar-bg: #f0f0f0;
|
|
410
|
+
--retro-sidebar-text: #000000;
|
|
411
|
+
--retro-dropdown-bg: #ffffff;
|
|
412
|
+
--retro-dropdown-text: #000000;
|
|
413
|
+
--retro-list-bg: #ffffff;
|
|
414
|
+
--retro-list-text: #000000;
|
|
415
|
+
--retro-progress-bg: #f0f0f0;
|
|
252
416
|
--retro-progress-bar-bg: #000080;
|
|
253
|
-
--retro-alert-bg: #
|
|
254
|
-
--retro-alert-text: #
|
|
255
|
-
--retro-badge-bg: #
|
|
256
|
-
--retro-badge-text: #
|
|
417
|
+
--retro-alert-bg: #f0f0f0;
|
|
418
|
+
--retro-alert-text: #000000;
|
|
419
|
+
--retro-badge-bg: #3a3a3a;
|
|
420
|
+
--retro-badge-text: #ffffff;
|
|
421
|
+
--retro-toast-bg: #ffffcc;
|
|
422
|
+
--retro-toast-text: #000000;
|
|
423
|
+
--retro-syntax-keyword: #000080;
|
|
424
|
+
--retro-syntax-string: #006e00;
|
|
425
|
+
--retro-syntax-comment: #5f6b5f;
|
|
426
|
+
--retro-syntax-function: #800080;
|
|
427
|
+
--retro-syntax-number: #b00000;
|
|
428
|
+
--retro-syntax-operator: #0000cc;
|
|
429
|
+
--retro-syntax-variable: #800000;
|
|
430
|
+
--retro-syntax-class: #006464;
|
|
431
|
+
--retro-syntax-property: #0000cc;
|
|
432
|
+
--retro-syntax-tag: #800000;
|
|
433
|
+
--retro-syntax-attribute: #a03000;
|
|
257
434
|
}
|
|
258
435
|
|
|
259
436
|
[data-theme=dark] {
|
|
437
|
+
color-scheme: dark;
|
|
260
438
|
--retro-body-bg: #181818;
|
|
261
439
|
--retro-bg: #232323;
|
|
262
440
|
--retro-primary: #4a90e2;
|
|
@@ -335,6 +513,101 @@
|
|
|
335
513
|
--retro-alert-text: #f3f3f3;
|
|
336
514
|
--retro-badge-bg: #444;
|
|
337
515
|
--retro-badge-text: #fff;
|
|
516
|
+
--retro-toast-bg: #2f2f22;
|
|
517
|
+
--retro-toast-text: #f3f3f3;
|
|
518
|
+
--retro-primary-text: #4b91e2;
|
|
519
|
+
--retro-success-text: #2ecc71;
|
|
520
|
+
--retro-danger-text: #ea6456;
|
|
521
|
+
--retro-warning-text: #f39c12;
|
|
522
|
+
--retro-info-text: #3498db;
|
|
523
|
+
--retro-teal-text: #1abc9c;
|
|
524
|
+
--retro-tan-text: #d4b483;
|
|
525
|
+
--retro-pink-text: #eb59a0;
|
|
526
|
+
--retro-lime-text: #00b894;
|
|
527
|
+
--retro-cyan-text: #00cec9;
|
|
528
|
+
--retro-orange-text: #e67e22;
|
|
529
|
+
--retro-brown-text: #af875e;
|
|
530
|
+
--retro-violet-text: #af7bc5;
|
|
531
|
+
--retro-gray-text: #95a5a6;
|
|
532
|
+
--retro-maroon-text: #dc6e62;
|
|
533
|
+
--retro-gold-text: #f1c40f;
|
|
534
|
+
--retro-navy-text: #7292b1; /* fill is 1.41:1 as text -- worst case in the framework */
|
|
535
|
+
--retro-olive-text: #859192;
|
|
536
|
+
--retro-silver-text: #bdc3c7;
|
|
537
|
+
--retro-primary-fg: #000000;
|
|
538
|
+
--retro-success-fg: #000000;
|
|
539
|
+
--retro-danger-fg: #000000;
|
|
540
|
+
--retro-warning-fg: #000000;
|
|
541
|
+
--retro-info-fg: #000000;
|
|
542
|
+
--retro-teal-fg: #000000;
|
|
543
|
+
--retro-tan-fg: #000000;
|
|
544
|
+
--retro-pink-fg: #000000;
|
|
545
|
+
--retro-lime-fg: #000000;
|
|
546
|
+
--retro-cyan-fg: #000000;
|
|
547
|
+
--retro-orange-fg: #000000;
|
|
548
|
+
--retro-brown-fg: #000000;
|
|
549
|
+
--retro-violet-fg: #ffffff;
|
|
550
|
+
--retro-gray-fg: #000000;
|
|
551
|
+
--retro-maroon-fg: #ffffff;
|
|
552
|
+
--retro-gold-fg: #000000;
|
|
553
|
+
--retro-navy-fg: #ffffff;
|
|
554
|
+
--retro-olive-fg: #000000;
|
|
555
|
+
--retro-silver-fg: #000000;
|
|
556
|
+
--retro-text: #f3f3f3;
|
|
557
|
+
--retro-text-muted: #a8a8a8;
|
|
558
|
+
--retro-text-inverse: #181818;
|
|
559
|
+
--retro-primary-hover: #76abe9;
|
|
560
|
+
--retro-primary-active: #2378db;
|
|
561
|
+
--retro-success-hover: #54d98c;
|
|
562
|
+
--retro-success-active: #25a25a;
|
|
563
|
+
--retro-danger-hover: #ed7669;
|
|
564
|
+
--retro-danger-active: #e32f1c;
|
|
565
|
+
--retro-warning-hover: #f5b043;
|
|
566
|
+
--retro-warning-active: #c87f0a;
|
|
567
|
+
--retro-info-hover: #5faee3;
|
|
568
|
+
--retro-info-active: #217dbb;
|
|
569
|
+
--retro-teal-hover: #28e1bd;
|
|
570
|
+
--retro-teal-active: #148f77;
|
|
571
|
+
--retro-tan-hover: #e1cba9;
|
|
572
|
+
--retro-tan-active: #c79d5d;
|
|
573
|
+
--retro-pink-hover: #ee70ad;
|
|
574
|
+
--retro-pink-active: #e21c7c;
|
|
575
|
+
--retro-lime-hover: #00ebbd;
|
|
576
|
+
--retro-lime-active: #008a6f;
|
|
577
|
+
--retro-cyan-hover: #02fff9;
|
|
578
|
+
--retro-cyan-active: #009b97;
|
|
579
|
+
--retro-orange-hover: #eb9950;
|
|
580
|
+
--retro-orange-active: #bf6516;
|
|
581
|
+
--retro-brown-hover: #b99672;
|
|
582
|
+
--retro-brown-active: #956f4a;
|
|
583
|
+
--retro-violet-hover: #9b59b6;
|
|
584
|
+
--retro-violet-active: #804399;
|
|
585
|
+
--retro-gray-hover: #b1bdbd;
|
|
586
|
+
--retro-gray-active: #798d8f;
|
|
587
|
+
--retro-maroon-hover: #d14233;
|
|
588
|
+
--retro-maroon-active: #962d22;
|
|
589
|
+
--retro-gold-hover: #f4d03f;
|
|
590
|
+
--retro-gold-active: #c29d0b;
|
|
591
|
+
--retro-navy-hover: #3e5771;
|
|
592
|
+
--retro-navy-active: #1a242f;
|
|
593
|
+
--retro-olive-hover: #9aa4a5;
|
|
594
|
+
--retro-olive-active: #6d7a7b;
|
|
595
|
+
--retro-silver-hover: #d9dcde;
|
|
596
|
+
--retro-silver-active: #a1aab0;
|
|
597
|
+
--retro-primary-dark: #2378db;
|
|
598
|
+
--retro-gray-100: #2a2b31;
|
|
599
|
+
--retro-shadow-light: #444;
|
|
600
|
+
--retro-syntax-keyword: #569cd6;
|
|
601
|
+
--retro-syntax-string: #ce9178;
|
|
602
|
+
--retro-syntax-comment: #7ba05b;
|
|
603
|
+
--retro-syntax-function: #dcdcaa;
|
|
604
|
+
--retro-syntax-number: #b5cea8;
|
|
605
|
+
--retro-syntax-operator: #9cdcfe;
|
|
606
|
+
--retro-syntax-variable: #d4d4d4;
|
|
607
|
+
--retro-syntax-class: #4ec9b0;
|
|
608
|
+
--retro-syntax-property: #9cdcfe;
|
|
609
|
+
--retro-syntax-tag: #569cd6;
|
|
610
|
+
--retro-syntax-attribute: #c8a2e0;
|
|
338
611
|
}
|
|
339
612
|
|
|
340
613
|
/* Layout Specific Variables */
|
|
@@ -343,6 +616,9 @@
|
|
|
343
616
|
/* Main SCSS file that imports all components */
|
|
344
617
|
/* Core */
|
|
345
618
|
/* Base Styles */
|
|
619
|
+
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
620
|
+
/* Main SCSS file that imports all components */
|
|
621
|
+
/* Core */
|
|
346
622
|
/* Reset & Base Styles */
|
|
347
623
|
*, *::before, *::after {
|
|
348
624
|
box-sizing: border-box;
|
|
@@ -354,16 +630,16 @@
|
|
|
354
630
|
}
|
|
355
631
|
|
|
356
632
|
html {
|
|
357
|
-
font-size:
|
|
633
|
+
font-size: 100%;
|
|
358
634
|
-webkit-text-size-adjust: 100%;
|
|
359
635
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
360
636
|
}
|
|
361
637
|
|
|
362
638
|
body {
|
|
363
|
-
font-family:
|
|
364
|
-
font-size:
|
|
365
|
-
line-height:
|
|
366
|
-
color: var(--retro-
|
|
639
|
+
font-family: var(--retro-font);
|
|
640
|
+
font-size: var(--retro-font-size);
|
|
641
|
+
line-height: var(--retro-line-height);
|
|
642
|
+
color: var(--retro-text);
|
|
367
643
|
background-color: var(--retro-body-bg);
|
|
368
644
|
-webkit-font-smoothing: antialiased;
|
|
369
645
|
-moz-osx-font-smoothing: grayscale;
|
|
@@ -383,6 +659,13 @@ a:focus {
|
|
|
383
659
|
outline: 2px solid var(--retro-primary);
|
|
384
660
|
outline-offset: 2px;
|
|
385
661
|
}
|
|
662
|
+
a:focus:not(:focus-visible) {
|
|
663
|
+
outline: none;
|
|
664
|
+
}
|
|
665
|
+
a:focus-visible {
|
|
666
|
+
outline: 2px solid var(--retro-primary);
|
|
667
|
+
outline-offset: 2px;
|
|
668
|
+
}
|
|
386
669
|
|
|
387
670
|
/* Images */
|
|
388
671
|
img {
|
|
@@ -426,22 +709,37 @@ button {
|
|
|
426
709
|
/* Code */
|
|
427
710
|
code,
|
|
428
711
|
pre {
|
|
429
|
-
font-family:
|
|
430
|
-
font-size:
|
|
712
|
+
font-family: var(--retro-font-mono);
|
|
713
|
+
font-size: var(--retro-font-size-sm);
|
|
431
714
|
}
|
|
432
715
|
|
|
433
716
|
/* Selection */
|
|
434
717
|
::selection {
|
|
435
718
|
background-color: var(--retro-primary);
|
|
436
|
-
color: var(--retro-
|
|
719
|
+
color: var(--retro-text-inverse);
|
|
437
720
|
}
|
|
438
721
|
|
|
439
|
-
/* Focus Styles
|
|
722
|
+
/* Focus Styles.
|
|
723
|
+
:focus-visible, so the ring is there for keyboard and assistive-tech users
|
|
724
|
+
but does not fire on every mouse click. The plain :focus rule is the
|
|
725
|
+
fallback for engines without :focus-visible; :focus:not(:focus-visible)
|
|
726
|
+
removes it again wherever the selector is supported. Note browsers still
|
|
727
|
+
match :focus-visible on text inputs clicked with a mouse, so fields keep
|
|
728
|
+
their ring. */
|
|
440
729
|
:focus {
|
|
441
730
|
outline: 2px solid var(--retro-primary);
|
|
442
731
|
outline-offset: 2px;
|
|
443
732
|
}
|
|
444
733
|
|
|
734
|
+
:focus:not(:focus-visible) {
|
|
735
|
+
outline: none;
|
|
736
|
+
}
|
|
737
|
+
|
|
738
|
+
:focus-visible {
|
|
739
|
+
outline: 2px solid var(--retro-primary);
|
|
740
|
+
outline-offset: 2px;
|
|
741
|
+
}
|
|
742
|
+
|
|
445
743
|
/* Print Styles */
|
|
446
744
|
@media print {
|
|
447
745
|
*,
|
|
@@ -519,12 +817,12 @@ pre {
|
|
|
519
817
|
}
|
|
520
818
|
.retro-tab-content {
|
|
521
819
|
background: var(--retro-bg);
|
|
522
|
-
border:
|
|
820
|
+
border: var(--retro-border-width) var(--retro-border-style) var(--retro-border-dark);
|
|
523
821
|
border-top: none;
|
|
524
822
|
padding: var(--retro-spacing-md);
|
|
525
823
|
margin-bottom: var(--retro-spacing-md);
|
|
526
824
|
min-height: 60px;
|
|
527
|
-
box-shadow:
|
|
825
|
+
box-shadow: var(--retro-box-shadow-subtle);
|
|
528
826
|
display: none;
|
|
529
827
|
}
|
|
530
828
|
|
|
@@ -532,44 +830,51 @@ pre {
|
|
|
532
830
|
display: block;
|
|
533
831
|
}
|
|
534
832
|
|
|
535
|
-
.retro-toast {
|
|
536
|
-
background: #ffffcc;
|
|
537
|
-
color: #000000;
|
|
538
|
-
min-width: 220px;
|
|
539
|
-
max-width: 350px;
|
|
540
|
-
padding: 16px 24px;
|
|
541
|
-
border-radius: 0;
|
|
542
|
-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
|
|
543
|
-
font-size: 14px;
|
|
544
|
-
font-weight: 500;
|
|
545
|
-
margin-bottom: 16px;
|
|
546
|
-
position: relative;
|
|
547
|
-
display: flex;
|
|
548
|
-
align-items: center;
|
|
549
|
-
gap: 16px;
|
|
550
|
-
z-index: 1070;
|
|
551
|
-
animation: fadeIn 0.3s;
|
|
552
|
-
pointer-events: auto;
|
|
553
|
-
}
|
|
554
|
-
|
|
555
833
|
#retro-toast-container {
|
|
556
834
|
position: fixed;
|
|
557
|
-
bottom:
|
|
558
|
-
right:
|
|
559
|
-
z-index:
|
|
835
|
+
bottom: var(--retro-spacing-xl);
|
|
836
|
+
right: var(--retro-spacing-xl);
|
|
837
|
+
z-index: var(--retro-z-index-tooltip);
|
|
560
838
|
display: flex;
|
|
561
839
|
flex-direction: column;
|
|
562
840
|
align-items: flex-end;
|
|
563
841
|
pointer-events: none;
|
|
564
842
|
}
|
|
565
843
|
|
|
844
|
+
/* Reduced motion.
|
|
845
|
+
Honours the OS "reduce motion" setting. The blanket rule neutralises every
|
|
846
|
+
transition and animation the framework ships; the three text effects below
|
|
847
|
+
need an explicit `animation: none` on top, because merely shortening them
|
|
848
|
+
leaves a filter applied (hue-rotate) or freezes `alternate-reverse` on a
|
|
849
|
+
doubled-shadow keyframe that is unreadable (glitch). */
|
|
850
|
+
@media (prefers-reduced-motion: reduce) {
|
|
851
|
+
*,
|
|
852
|
+
*::before,
|
|
853
|
+
*::after {
|
|
854
|
+
animation-duration: 0.01ms !important;
|
|
855
|
+
animation-iteration-count: 1 !important;
|
|
856
|
+
transition-duration: 0.01ms !important;
|
|
857
|
+
scroll-behavior: auto !important;
|
|
858
|
+
}
|
|
859
|
+
.retro-text-rainbow,
|
|
860
|
+
.retro-text-hue-rotate,
|
|
861
|
+
.retro-text-glitch,
|
|
862
|
+
.retro-spinner,
|
|
863
|
+
.retro-progress-bar-striped {
|
|
864
|
+
animation: none !important;
|
|
865
|
+
}
|
|
866
|
+
.retro-text-hue-rotate {
|
|
867
|
+
filter: none !important;
|
|
868
|
+
}
|
|
869
|
+
.retro-text-glitch {
|
|
870
|
+
text-shadow: none !important;
|
|
871
|
+
}
|
|
872
|
+
}
|
|
566
873
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
567
874
|
/* Main SCSS file that imports all components */
|
|
568
875
|
/* Core */
|
|
876
|
+
/* Base Styles */
|
|
569
877
|
/* Typography Styles */
|
|
570
|
-
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
571
|
-
/* Main SCSS file that imports all components */
|
|
572
|
-
/* Core */
|
|
573
878
|
/**
|
|
574
879
|
* @name Headings
|
|
575
880
|
* @group typography
|
|
@@ -578,67 +883,60 @@ pre {
|
|
|
578
883
|
* @example scss
|
|
579
884
|
* <h1>Heading 1</h1>
|
|
580
885
|
*/
|
|
581
|
-
body {
|
|
582
|
-
font-family: "MS Sans Serif", "Microsoft Sans Serif", Arial, sans-serif;
|
|
583
|
-
font-size: 14px;
|
|
584
|
-
line-height: 1.4;
|
|
585
|
-
color: var(--retro-black);
|
|
586
|
-
background: var(--retro-body-bg);
|
|
587
|
-
}
|
|
588
|
-
|
|
589
886
|
h1, h2, h3, h4, h5, h6 {
|
|
590
|
-
font-family:
|
|
591
|
-
font-weight: bold;
|
|
887
|
+
font-family: var(--retro-font-heading);
|
|
888
|
+
font-weight: var(--retro-font-weight-bold);
|
|
592
889
|
text-align: left;
|
|
593
|
-
margin
|
|
594
|
-
margin-bottom: 0.5em;
|
|
890
|
+
margin: var(--retro-spacing-lg) 0 var(--retro-spacing-sm);
|
|
595
891
|
border-radius: 0;
|
|
596
892
|
box-shadow: none;
|
|
597
893
|
letter-spacing: 0;
|
|
598
894
|
background: none;
|
|
599
|
-
color: var(--retro-
|
|
895
|
+
color: var(--retro-text);
|
|
600
896
|
text-shadow: none;
|
|
601
897
|
padding: 0;
|
|
898
|
+
line-height: var(--retro-line-height-tight);
|
|
602
899
|
}
|
|
603
900
|
|
|
604
901
|
h1 {
|
|
605
902
|
background: var(--retro-bg);
|
|
606
903
|
border-left: 6px solid var(--retro-primary);
|
|
607
904
|
padding: 0.18em 0.7em 0.18em 0.6em;
|
|
608
|
-
font-size:
|
|
609
|
-
margin-
|
|
905
|
+
font-size: var(--retro-font-size-3xl);
|
|
906
|
+
margin-top: var(--retro-spacing-xl);
|
|
610
907
|
}
|
|
611
908
|
|
|
612
909
|
h2 {
|
|
613
910
|
background: var(--retro-bg);
|
|
614
911
|
border-left: 4px solid var(--retro-primary);
|
|
615
912
|
padding: 0.15em 0.7em 0.15em 0.5em;
|
|
616
|
-
font-size:
|
|
617
|
-
margin-
|
|
913
|
+
font-size: var(--retro-font-size-2xl);
|
|
914
|
+
margin-top: var(--retro-spacing-xl);
|
|
618
915
|
}
|
|
619
916
|
|
|
620
917
|
h3 {
|
|
621
|
-
font-size:
|
|
622
|
-
margin-bottom: 0.4em;
|
|
918
|
+
font-size: var(--retro-font-size-xl);
|
|
623
919
|
}
|
|
624
920
|
|
|
625
|
-
h4
|
|
626
|
-
font-size:
|
|
627
|
-
|
|
628
|
-
|
|
921
|
+
h4 {
|
|
922
|
+
font-size: var(--retro-font-size-lg);
|
|
923
|
+
}
|
|
924
|
+
|
|
925
|
+
h5, h6 {
|
|
926
|
+
font-size: var(--retro-font-size);
|
|
629
927
|
}
|
|
630
928
|
|
|
631
929
|
.retro-heading-primary, .retro-heading-success, .retro-heading-warning, .retro-heading-danger, .retro-heading-info, .retro-heading-teal, .retro-heading-pink, .retro-heading-lime {
|
|
632
|
-
padding:
|
|
633
|
-
margin-bottom:
|
|
930
|
+
padding: var(--retro-spacing-sm) var(--retro-spacing-md);
|
|
931
|
+
margin-bottom: var(--retro-spacing-md);
|
|
634
932
|
border: 2px solid;
|
|
635
933
|
position: relative;
|
|
636
|
-
font-family:
|
|
637
|
-
font-weight: bold;
|
|
934
|
+
font-family: var(--retro-font-heading);
|
|
935
|
+
font-weight: var(--retro-font-weight-bold);
|
|
638
936
|
letter-spacing: 0.5px;
|
|
639
|
-
box-shadow: inset -1px -1px 0
|
|
640
|
-
text-shadow: 1px 1px 0 rgba(
|
|
641
|
-
background: linear-gradient(to bottom, rgba(
|
|
937
|
+
box-shadow: inset -1px -1px 0 var(--retro-shadow-light), inset 1px 1px 0 var(--retro-border-dark), 2px 2px 0 rgba(var(--retro-black-rgb), 0.2);
|
|
938
|
+
text-shadow: 1px 1px 0 rgba(var(--retro-black-rgb), 0.3);
|
|
939
|
+
background: linear-gradient(to bottom, rgba(var(--retro-white-rgb), 0.1) 0%, rgba(var(--retro-white-rgb), 0) 100%);
|
|
642
940
|
transform: translateZ(0);
|
|
643
941
|
transition: transform 0.1s ease;
|
|
644
942
|
}
|
|
@@ -647,7 +945,7 @@ h4, h5, h6 {
|
|
|
647
945
|
}
|
|
648
946
|
.retro-heading-primary:active, .retro-heading-success:active, .retro-heading-warning:active, .retro-heading-danger:active, .retro-heading-info:active, .retro-heading-teal:active, .retro-heading-pink:active, .retro-heading-lime:active {
|
|
649
947
|
transform: translateY(1px);
|
|
650
|
-
box-shadow: inset 1px 1px 0
|
|
948
|
+
box-shadow: inset 1px 1px 0 var(--retro-shadow-light), inset -1px -1px 0 var(--retro-border-dark);
|
|
651
949
|
}
|
|
652
950
|
.retro-heading-primary::before, .retro-heading-success::before, .retro-heading-warning::before, .retro-heading-danger::before, .retro-heading-info::before, .retro-heading-teal::before, .retro-heading-pink::before, .retro-heading-lime::before {
|
|
653
951
|
content: "";
|
|
@@ -656,48 +954,48 @@ h4, h5, h6 {
|
|
|
656
954
|
left: 0;
|
|
657
955
|
right: 0;
|
|
658
956
|
bottom: 0;
|
|
659
|
-
background: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(
|
|
957
|
+
background: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(var(--retro-white-rgb), 0.1) 2px, rgba(var(--retro-white-rgb), 0.1) 4px);
|
|
660
958
|
pointer-events: none;
|
|
661
959
|
}
|
|
662
960
|
.retro-heading-primary {
|
|
663
|
-
background: linear-gradient(to bottom,
|
|
664
|
-
color:
|
|
665
|
-
border-color:
|
|
961
|
+
background: linear-gradient(to bottom, var(--retro-primary) 0%, var(--retro-primary-active) 100%);
|
|
962
|
+
color: var(--retro-primary-fg);
|
|
963
|
+
border-color: var(--retro-primary-active);
|
|
666
964
|
}
|
|
667
965
|
.retro-heading-success {
|
|
668
|
-
background: linear-gradient(to bottom,
|
|
669
|
-
color:
|
|
670
|
-
border-color:
|
|
966
|
+
background: linear-gradient(to bottom, var(--retro-success) 0%, var(--retro-success-active) 100%);
|
|
967
|
+
color: var(--retro-success-fg);
|
|
968
|
+
border-color: var(--retro-success-active);
|
|
671
969
|
}
|
|
672
970
|
.retro-heading-warning {
|
|
673
|
-
background: linear-gradient(to bottom,
|
|
674
|
-
color:
|
|
675
|
-
border-color:
|
|
971
|
+
background: linear-gradient(to bottom, var(--retro-warning) 0%, var(--retro-warning-active) 100%);
|
|
972
|
+
color: var(--retro-warning-fg);
|
|
973
|
+
border-color: var(--retro-warning-active);
|
|
676
974
|
}
|
|
677
975
|
.retro-heading-danger {
|
|
678
|
-
background: linear-gradient(to bottom,
|
|
679
|
-
color:
|
|
680
|
-
border-color:
|
|
976
|
+
background: linear-gradient(to bottom, var(--retro-danger) 0%, var(--retro-danger-active) 100%);
|
|
977
|
+
color: var(--retro-danger-fg);
|
|
978
|
+
border-color: var(--retro-danger-active);
|
|
681
979
|
}
|
|
682
980
|
.retro-heading-info {
|
|
683
|
-
background: linear-gradient(to bottom,
|
|
684
|
-
color:
|
|
685
|
-
border-color:
|
|
981
|
+
background: linear-gradient(to bottom, var(--retro-info) 0%, var(--retro-info-active) 100%);
|
|
982
|
+
color: var(--retro-info-fg);
|
|
983
|
+
border-color: var(--retro-info-active);
|
|
686
984
|
}
|
|
687
985
|
.retro-heading-teal {
|
|
688
|
-
background: linear-gradient(to bottom,
|
|
689
|
-
color:
|
|
690
|
-
border-color:
|
|
986
|
+
background: linear-gradient(to bottom, var(--retro-teal) 0%, var(--retro-teal-active) 100%);
|
|
987
|
+
color: var(--retro-teal-fg);
|
|
988
|
+
border-color: var(--retro-teal-active);
|
|
691
989
|
}
|
|
692
990
|
.retro-heading-pink {
|
|
693
|
-
background: linear-gradient(to bottom,
|
|
694
|
-
color:
|
|
695
|
-
border-color:
|
|
991
|
+
background: linear-gradient(to bottom, var(--retro-pink) 0%, var(--retro-pink-active) 100%);
|
|
992
|
+
color: var(--retro-pink-fg);
|
|
993
|
+
border-color: var(--retro-pink-active);
|
|
696
994
|
}
|
|
697
995
|
.retro-heading-lime {
|
|
698
|
-
background: linear-gradient(to bottom,
|
|
699
|
-
color:
|
|
700
|
-
border-color:
|
|
996
|
+
background: linear-gradient(to bottom, var(--retro-lime) 0%, var(--retro-lime-active) 100%);
|
|
997
|
+
color: var(--retro-lime-fg);
|
|
998
|
+
border-color: var(--retro-lime-active);
|
|
701
999
|
}
|
|
702
1000
|
|
|
703
1001
|
/**
|
|
@@ -761,15 +1059,23 @@ h4, h5, h6 {
|
|
|
761
1059
|
}
|
|
762
1060
|
|
|
763
1061
|
.retro-text-monospace {
|
|
764
|
-
font-family:
|
|
1062
|
+
font-family: var(--retro-font-mono);
|
|
765
1063
|
}
|
|
766
1064
|
|
|
767
1065
|
.retro-text-xs {
|
|
768
|
-
font-size:
|
|
1066
|
+
font-size: var(--retro-font-size-xs);
|
|
1067
|
+
}
|
|
1068
|
+
|
|
1069
|
+
.retro-text-sm {
|
|
1070
|
+
font-size: var(--retro-font-size-sm);
|
|
769
1071
|
}
|
|
770
1072
|
|
|
771
1073
|
.retro-text-lg {
|
|
772
|
-
font-size:
|
|
1074
|
+
font-size: var(--retro-font-size-lg);
|
|
1075
|
+
}
|
|
1076
|
+
|
|
1077
|
+
.retro-text-xl {
|
|
1078
|
+
font-size: var(--retro-font-size-xl);
|
|
773
1079
|
}
|
|
774
1080
|
|
|
775
1081
|
.retro-text-strike {
|
|
@@ -777,15 +1083,15 @@ h4, h5, h6 {
|
|
|
777
1083
|
}
|
|
778
1084
|
|
|
779
1085
|
.retro-text-shadow-strong {
|
|
780
|
-
text-shadow: 2px 2px 2px
|
|
1086
|
+
text-shadow: 2px 2px 2px var(--retro-border-medium);
|
|
781
1087
|
}
|
|
782
1088
|
|
|
783
1089
|
.retro-text-shadow-soft {
|
|
784
|
-
text-shadow: 1px 1px 4px
|
|
1090
|
+
text-shadow: 1px 1px 4px var(--retro-gray);
|
|
785
1091
|
}
|
|
786
1092
|
|
|
787
1093
|
.retro-text-glow {
|
|
788
|
-
text-shadow: 0 0 6px
|
|
1094
|
+
text-shadow: 0 0 6px var(--retro-cyan), 0 0 12px var(--retro-cyan);
|
|
789
1095
|
}
|
|
790
1096
|
|
|
791
1097
|
/**
|
|
@@ -805,7 +1111,7 @@ h4, h5, h6 {
|
|
|
805
1111
|
text-fill-color: transparent;
|
|
806
1112
|
animation: rainbow-hue 3s linear infinite;
|
|
807
1113
|
font-weight: bold;
|
|
808
|
-
text-shadow: 0 1px 1px
|
|
1114
|
+
text-shadow: 0 1px 1px var(--retro-bg), 0 2px 2px rgba(var(--retro-black-rgb), 0.13);
|
|
809
1115
|
}
|
|
810
1116
|
|
|
811
1117
|
@keyframes rainbow-hue {
|
|
@@ -836,38 +1142,38 @@ h4, h5, h6 {
|
|
|
836
1142
|
background-clip: text;
|
|
837
1143
|
color: transparent;
|
|
838
1144
|
text-fill-color: transparent;
|
|
839
|
-
font-weight: bold;
|
|
840
|
-
text-shadow: 0 1px 1px
|
|
1145
|
+
font-weight: var(--retro-font-weight-bold);
|
|
1146
|
+
text-shadow: 0 1px 1px var(--retro-bg), 0 2px 2px rgba(var(--retro-black-rgb), 0.13);
|
|
841
1147
|
}
|
|
842
1148
|
|
|
843
1149
|
.retro-text-outline-strong {
|
|
844
|
-
color:
|
|
845
|
-
font-weight: bold;
|
|
846
|
-
-webkit-text-stroke: 2px
|
|
1150
|
+
color: var(--retro-bg);
|
|
1151
|
+
font-weight: var(--retro-font-weight-bold);
|
|
1152
|
+
-webkit-text-stroke: 2px var(--retro-text);
|
|
847
1153
|
text-shadow: none;
|
|
848
1154
|
}
|
|
849
1155
|
|
|
850
1156
|
.retro-text-emboss {
|
|
851
|
-
color:
|
|
852
|
-
font-weight: bold;
|
|
853
|
-
text-shadow: 1px 1px 0
|
|
1157
|
+
color: var(--retro-text);
|
|
1158
|
+
font-weight: var(--retro-font-weight-bold);
|
|
1159
|
+
text-shadow: 1px 1px 0 var(--retro-border-light), -1px -1px 0 var(--retro-border-medium);
|
|
854
1160
|
}
|
|
855
1161
|
|
|
856
1162
|
.retro-text-deboss {
|
|
857
|
-
color:
|
|
858
|
-
font-weight: bold;
|
|
859
|
-
text-shadow: 1px 1px 0
|
|
1163
|
+
color: var(--retro-text-muted);
|
|
1164
|
+
font-weight: var(--retro-font-weight-bold);
|
|
1165
|
+
text-shadow: 1px 1px 0 var(--retro-border-light), -1px -1px 0 var(--retro-border-medium);
|
|
860
1166
|
}
|
|
861
1167
|
|
|
862
1168
|
.retro-text-shadow-multicolor {
|
|
863
|
-
color:
|
|
864
|
-
font-weight: bold;
|
|
865
|
-
text-shadow: 1px 1px 0
|
|
1169
|
+
color: var(--retro-text);
|
|
1170
|
+
font-weight: var(--retro-font-weight-bold);
|
|
1171
|
+
text-shadow: 1px 1px 0 var(--retro-primary);
|
|
866
1172
|
}
|
|
867
1173
|
|
|
868
1174
|
.retro-text-glitch {
|
|
869
1175
|
position: relative;
|
|
870
|
-
color:
|
|
1176
|
+
color: var(--retro-text);
|
|
871
1177
|
text-shadow: 2px 0 #f0f, -2px 0 #0ff;
|
|
872
1178
|
animation: glitch 1s infinite linear alternate-reverse;
|
|
873
1179
|
}
|
|
@@ -900,8 +1206,8 @@ h4, h5, h6 {
|
|
|
900
1206
|
color: transparent;
|
|
901
1207
|
text-fill-color: transparent;
|
|
902
1208
|
font-weight: bold;
|
|
903
|
-
-webkit-text-stroke: 1px
|
|
904
|
-
text-shadow: 0 1px 2px
|
|
1209
|
+
-webkit-text-stroke: 1px var(--retro-border-dark);
|
|
1210
|
+
text-shadow: 0 1px 2px var(--retro-bg), 0 2px 4px rgba(var(--retro-black-rgb), 0.53);
|
|
905
1211
|
}
|
|
906
1212
|
|
|
907
1213
|
.retro-text-fire {
|
|
@@ -913,7 +1219,7 @@ h4, h5, h6 {
|
|
|
913
1219
|
text-fill-color: transparent;
|
|
914
1220
|
font-weight: bold;
|
|
915
1221
|
-webkit-text-stroke: 1px #800;
|
|
916
|
-
text-shadow: 0 1px 2px
|
|
1222
|
+
text-shadow: 0 1px 2px var(--retro-bg), 0 2px 8px #ff6600, 0 4px 16px #ff3300;
|
|
917
1223
|
}
|
|
918
1224
|
|
|
919
1225
|
/**
|
|
@@ -934,9 +1240,11 @@ h4, h5, h6 {
|
|
|
934
1240
|
position: relative;
|
|
935
1241
|
font-style: italic;
|
|
936
1242
|
box-shadow: inset -1px -1px 0 var(--retro-shadow-light), inset 1px 1px 0 var(--retro-border-dark);
|
|
937
|
-
font-family:
|
|
938
|
-
font-size:
|
|
939
|
-
line-height:
|
|
1243
|
+
font-family: var(--retro-font);
|
|
1244
|
+
font-size: var(--retro-font-size);
|
|
1245
|
+
line-height: var(--retro-line-height);
|
|
1246
|
+
max-width: var(--retro-measure);
|
|
1247
|
+
color: var(--retro-text);
|
|
940
1248
|
}
|
|
941
1249
|
.retro-blockquote::before {
|
|
942
1250
|
content: '"';
|
|
@@ -945,7 +1253,7 @@ h4, h5, h6 {
|
|
|
945
1253
|
position: absolute;
|
|
946
1254
|
left: 0.3rem;
|
|
947
1255
|
top: -0.2rem;
|
|
948
|
-
font-family:
|
|
1256
|
+
font-family: var(--retro-font);
|
|
949
1257
|
opacity: 0.7;
|
|
950
1258
|
}
|
|
951
1259
|
.retro-blockquote::after {
|
|
@@ -955,7 +1263,7 @@ h4, h5, h6 {
|
|
|
955
1263
|
position: absolute;
|
|
956
1264
|
right: 0.3rem;
|
|
957
1265
|
bottom: -0.5rem;
|
|
958
|
-
font-family:
|
|
1266
|
+
font-family: var(--retro-font);
|
|
959
1267
|
opacity: 0.7;
|
|
960
1268
|
}
|
|
961
1269
|
|
|
@@ -972,7 +1280,7 @@ h4, h5, h6 {
|
|
|
972
1280
|
border-left-color: var(--retro-border-light);
|
|
973
1281
|
padding: 0;
|
|
974
1282
|
margin: 1.5rem 0;
|
|
975
|
-
font-family:
|
|
1283
|
+
font-family: var(--retro-font-mono);
|
|
976
1284
|
white-space: pre-wrap;
|
|
977
1285
|
overflow-x: auto;
|
|
978
1286
|
position: relative;
|
|
@@ -985,7 +1293,7 @@ h4, h5, h6 {
|
|
|
985
1293
|
left: 0;
|
|
986
1294
|
right: 0;
|
|
987
1295
|
height: 24px;
|
|
988
|
-
background: linear-gradient(to bottom,
|
|
1296
|
+
background: linear-gradient(to bottom, var(--retro-primary) 0%, var(--retro-primary-hover) 100%);
|
|
989
1297
|
border-bottom: 1px solid var(--retro-border-dark);
|
|
990
1298
|
}
|
|
991
1299
|
.retro-code::after {
|
|
@@ -993,10 +1301,10 @@ h4, h5, h6 {
|
|
|
993
1301
|
position: absolute;
|
|
994
1302
|
top: 2px;
|
|
995
1303
|
left: 8px;
|
|
996
|
-
color:
|
|
997
|
-
font-family:
|
|
998
|
-
font-size:
|
|
999
|
-
font-weight: bold;
|
|
1304
|
+
color: var(--retro-primary-fg);
|
|
1305
|
+
font-family: var(--retro-font);
|
|
1306
|
+
font-size: var(--retro-font-size-sm);
|
|
1307
|
+
font-weight: var(--retro-font-weight-bold);
|
|
1000
1308
|
}
|
|
1001
1309
|
.retro-code .retro-code-copy {
|
|
1002
1310
|
position: absolute;
|
|
@@ -1009,10 +1317,10 @@ h4, h5, h6 {
|
|
|
1009
1317
|
border-left: 1px solid var(--retro-border-medium);
|
|
1010
1318
|
border-top: 1px solid var(--retro-border-medium);
|
|
1011
1319
|
padding: 2px 8px;
|
|
1012
|
-
font-family:
|
|
1013
|
-
font-size:
|
|
1320
|
+
font-family: var(--retro-font);
|
|
1321
|
+
font-size: var(--retro-font-size-xs);
|
|
1014
1322
|
cursor: pointer;
|
|
1015
|
-
color: var(--retro-
|
|
1323
|
+
color: var(--retro-text);
|
|
1016
1324
|
box-shadow: inset -1px -1px 0 var(--retro-shadow-light), inset 1px 1px 0 var(--retro-border-dark);
|
|
1017
1325
|
}
|
|
1018
1326
|
.retro-code .retro-code-copy:hover {
|
|
@@ -1025,115 +1333,92 @@ h4, h5, h6 {
|
|
|
1025
1333
|
display: block;
|
|
1026
1334
|
padding: 1.2rem;
|
|
1027
1335
|
padding-top: calc(1.2rem + 24px);
|
|
1028
|
-
color: var(--retro-
|
|
1029
|
-
font-size:
|
|
1030
|
-
line-height:
|
|
1336
|
+
color: var(--retro-text);
|
|
1337
|
+
font-size: var(--retro-font-size-sm);
|
|
1338
|
+
line-height: var(--retro-line-height);
|
|
1031
1339
|
}
|
|
1032
1340
|
.retro-code code .keyword {
|
|
1033
|
-
color:
|
|
1034
|
-
font-weight: bold;
|
|
1341
|
+
color: var(--retro-syntax-keyword);
|
|
1342
|
+
font-weight: var(--retro-font-weight-bold);
|
|
1035
1343
|
}
|
|
1036
1344
|
.retro-code code .string {
|
|
1037
|
-
color:
|
|
1345
|
+
color: var(--retro-syntax-string);
|
|
1038
1346
|
}
|
|
1039
1347
|
.retro-code code .comment {
|
|
1040
|
-
color:
|
|
1348
|
+
color: var(--retro-syntax-comment);
|
|
1041
1349
|
font-style: italic;
|
|
1042
1350
|
}
|
|
1043
1351
|
.retro-code code .function {
|
|
1044
|
-
color:
|
|
1352
|
+
color: var(--retro-syntax-function);
|
|
1045
1353
|
}
|
|
1046
1354
|
.retro-code code .number {
|
|
1047
|
-
color:
|
|
1355
|
+
color: var(--retro-syntax-number);
|
|
1048
1356
|
}
|
|
1049
1357
|
.retro-code code .operator {
|
|
1050
|
-
color:
|
|
1358
|
+
color: var(--retro-syntax-operator);
|
|
1051
1359
|
}
|
|
1052
1360
|
.retro-code code .variable {
|
|
1053
|
-
color:
|
|
1361
|
+
color: var(--retro-syntax-variable);
|
|
1054
1362
|
}
|
|
1055
1363
|
.retro-code code .class {
|
|
1056
|
-
color:
|
|
1364
|
+
color: var(--retro-syntax-class);
|
|
1057
1365
|
}
|
|
1058
1366
|
.retro-code code .property {
|
|
1059
|
-
color:
|
|
1367
|
+
color: var(--retro-syntax-property);
|
|
1060
1368
|
}
|
|
1061
1369
|
.retro-code code .tag {
|
|
1062
|
-
color:
|
|
1370
|
+
color: var(--retro-syntax-tag);
|
|
1063
1371
|
}
|
|
1064
1372
|
.retro-code code .attribute {
|
|
1065
|
-
color:
|
|
1373
|
+
color: var(--retro-syntax-attribute);
|
|
1066
1374
|
}
|
|
1067
1375
|
|
|
1068
1376
|
.retro-heading-variant {
|
|
1069
|
-
font-family:
|
|
1070
|
-
font-size:
|
|
1071
|
-
font-weight: bold;
|
|
1377
|
+
font-family: var(--retro-font-mono);
|
|
1378
|
+
font-size: var(--retro-font-size-2xl);
|
|
1379
|
+
font-weight: var(--retro-font-weight-bold);
|
|
1072
1380
|
text-transform: uppercase;
|
|
1073
1381
|
letter-spacing: 0.08em;
|
|
1074
1382
|
padding: 0.5rem 1.2rem;
|
|
1075
1383
|
margin-bottom: 0.5rem;
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1384
|
+
color: var(--retro-text);
|
|
1385
|
+
border: 2.5px double var(--retro-border-dark);
|
|
1386
|
+
box-shadow: inset 0 2px 8px rgba(var(--retro-white-rgb), 0.53), 0 2px 0 rgba(var(--retro-black-rgb), 0.27);
|
|
1387
|
+
background: var(--retro-bg);
|
|
1079
1388
|
display: flex;
|
|
1080
1389
|
align-items: center;
|
|
1081
1390
|
gap: 0.5em;
|
|
1082
1391
|
}
|
|
1083
1392
|
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
.
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
color: #b26a00;
|
|
1098
|
-
border-color: #b26a00;
|
|
1099
|
-
background: #fffbe3;
|
|
1100
|
-
}
|
|
1101
|
-
|
|
1102
|
-
.retro-heading-danger {
|
|
1103
|
-
color: #b71c1c;
|
|
1104
|
-
border-color: #b71c1c;
|
|
1105
|
-
background: #fae3e3;
|
|
1106
|
-
}
|
|
1107
|
-
|
|
1108
|
-
.retro-heading-info {
|
|
1109
|
-
color: #01579b;
|
|
1110
|
-
border-color: #01579b;
|
|
1111
|
-
background: #e3f2fa;
|
|
1393
|
+
/**
|
|
1394
|
+
* @name Retro Prose
|
|
1395
|
+
* @group typography
|
|
1396
|
+
* @description
|
|
1397
|
+
* Opt-in long-form container. Caps the measure and opens up leading so an
|
|
1398
|
+
* article does not run 200-character lines edge to edge. Opt-in rather than
|
|
1399
|
+
* applied to `p` globally, which would break dashboard and form layouts.
|
|
1400
|
+
* @example scss
|
|
1401
|
+
* <article class="retro-prose">...</article>
|
|
1402
|
+
*/
|
|
1403
|
+
.retro-prose {
|
|
1404
|
+
max-width: var(--retro-measure);
|
|
1405
|
+
line-height: var(--retro-line-height);
|
|
1112
1406
|
}
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
color: #00695c;
|
|
1116
|
-
border-color: #00695c;
|
|
1117
|
-
background: #e3faf7;
|
|
1407
|
+
.retro-prose p, .retro-prose ul, .retro-prose ol, .retro-prose blockquote, .retro-prose pre {
|
|
1408
|
+
margin-bottom: var(--retro-spacing-md);
|
|
1118
1409
|
}
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
color: #ad1457;
|
|
1122
|
-
border-color: #ad1457;
|
|
1123
|
-
background: #fae3f2;
|
|
1410
|
+
.retro-prose > :first-child {
|
|
1411
|
+
margin-top: 0;
|
|
1124
1412
|
}
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
color: #827717;
|
|
1128
|
-
border-color: #827717;
|
|
1129
|
-
background: #f7fae3;
|
|
1413
|
+
.retro-prose > :last-child {
|
|
1414
|
+
margin-bottom: 0;
|
|
1130
1415
|
}
|
|
1131
1416
|
|
|
1132
1417
|
/* Components */
|
|
1133
1418
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
1134
1419
|
/* Main SCSS file that imports all components */
|
|
1135
1420
|
/* Core */
|
|
1136
|
-
/*
|
|
1421
|
+
/* Base Styles */
|
|
1137
1422
|
/**
|
|
1138
1423
|
* @name Retro Button
|
|
1139
1424
|
* @group components
|
|
@@ -1145,121 +1430,122 @@ h4, h5, h6 {
|
|
|
1145
1430
|
/* Retro Button - Win9x Style Only */
|
|
1146
1431
|
.retro-btn {
|
|
1147
1432
|
display: inline-block;
|
|
1148
|
-
font-family:
|
|
1149
|
-
font-size:
|
|
1150
|
-
font-weight: normal;
|
|
1151
|
-
line-height:
|
|
1433
|
+
font-family: var(--retro-font);
|
|
1434
|
+
font-size: var(--retro-font-size);
|
|
1435
|
+
font-weight: var(--retro-font-weight-normal);
|
|
1436
|
+
line-height: var(--retro-line-height-tight);
|
|
1152
1437
|
text-align: center;
|
|
1153
1438
|
text-decoration: none;
|
|
1154
1439
|
vertical-align: middle;
|
|
1155
1440
|
cursor: pointer;
|
|
1156
1441
|
user-select: none;
|
|
1157
|
-
padding:
|
|
1158
|
-
border:
|
|
1442
|
+
padding: var(--retro-spacing-xs) var(--retro-spacing-md);
|
|
1443
|
+
border: var(--retro-border-width-thick) solid var(--retro-border-dark);
|
|
1159
1444
|
border-radius: 0;
|
|
1160
1445
|
background: var(--retro-light);
|
|
1161
|
-
color: var(--retro-
|
|
1162
|
-
box-shadow: inset 1px 1px 0
|
|
1446
|
+
color: var(--retro-text);
|
|
1447
|
+
box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-dark), 1px 1px 0 var(--retro-border-medium);
|
|
1163
1448
|
transition: none;
|
|
1164
1449
|
}
|
|
1165
1450
|
.retro-btn:hover {
|
|
1166
1451
|
background: var(--retro-white);
|
|
1167
|
-
box-shadow: inset -0.5px -0.5px 0
|
|
1452
|
+
box-shadow: inset -0.5px -0.5px 0 var(--retro-border-light), inset 0.5px 0.5px 0 var(--retro-border-medium);
|
|
1168
1453
|
}
|
|
1169
1454
|
.retro-btn:active {
|
|
1170
1455
|
background: var(--retro-border-medium);
|
|
1171
|
-
color: var(--retro-
|
|
1172
|
-
box-shadow: inset -1px -1px 0
|
|
1456
|
+
color: var(--retro-text-inverse);
|
|
1457
|
+
box-shadow: inset -1px -1px 0 var(--retro-border-light), inset 1px 1px 0 var(--retro-border-dark), 0.5px 0.5px 0 var(--retro-border-medium);
|
|
1173
1458
|
}
|
|
1174
1459
|
.retro-btn:focus {
|
|
1175
|
-
outline: 1px dotted var(--retro-
|
|
1460
|
+
outline: 1px dotted var(--retro-text);
|
|
1461
|
+
outline-offset: -4px;
|
|
1462
|
+
}
|
|
1463
|
+
.retro-btn:focus:not(:focus-visible) {
|
|
1464
|
+
outline: none;
|
|
1465
|
+
}
|
|
1466
|
+
.retro-btn:focus-visible {
|
|
1467
|
+
outline: 1px dotted var(--retro-text);
|
|
1176
1468
|
outline-offset: -4px;
|
|
1177
1469
|
}
|
|
1178
1470
|
|
|
1179
1471
|
.retro-btn-primary {
|
|
1180
|
-
background:
|
|
1181
|
-
color:
|
|
1472
|
+
background: var(--retro-primary);
|
|
1473
|
+
color: var(--retro-primary-fg);
|
|
1182
1474
|
}
|
|
1183
1475
|
.retro-btn-primary:hover {
|
|
1184
|
-
background:
|
|
1476
|
+
background: var(--retro-primary-hover);
|
|
1185
1477
|
}
|
|
1186
1478
|
.retro-btn-primary:active {
|
|
1187
|
-
background:
|
|
1479
|
+
background: var(--retro-primary-active);
|
|
1188
1480
|
}
|
|
1189
1481
|
|
|
1190
1482
|
.retro-btn-success {
|
|
1191
|
-
background:
|
|
1192
|
-
color:
|
|
1483
|
+
background: var(--retro-success);
|
|
1484
|
+
color: var(--retro-success-fg);
|
|
1193
1485
|
}
|
|
1194
1486
|
.retro-btn-success:hover {
|
|
1195
|
-
background:
|
|
1487
|
+
background: var(--retro-success-hover);
|
|
1196
1488
|
}
|
|
1197
1489
|
.retro-btn-success:active {
|
|
1198
|
-
background:
|
|
1490
|
+
background: var(--retro-success-active);
|
|
1199
1491
|
}
|
|
1200
1492
|
|
|
1201
1493
|
.retro-btn-danger {
|
|
1202
|
-
background:
|
|
1203
|
-
color:
|
|
1494
|
+
background: var(--retro-danger);
|
|
1495
|
+
color: var(--retro-danger-fg);
|
|
1204
1496
|
}
|
|
1205
1497
|
.retro-btn-danger:hover {
|
|
1206
|
-
background:
|
|
1498
|
+
background: var(--retro-danger-hover);
|
|
1207
1499
|
}
|
|
1208
1500
|
.retro-btn-danger:active {
|
|
1209
|
-
background:
|
|
1501
|
+
background: var(--retro-danger-active);
|
|
1210
1502
|
}
|
|
1211
1503
|
|
|
1212
1504
|
.retro-btn-warning {
|
|
1213
|
-
background:
|
|
1214
|
-
color:
|
|
1505
|
+
background: var(--retro-warning);
|
|
1506
|
+
color: var(--retro-warning-fg);
|
|
1215
1507
|
}
|
|
1216
1508
|
.retro-btn-warning:hover {
|
|
1217
|
-
background:
|
|
1509
|
+
background: var(--retro-warning-hover);
|
|
1218
1510
|
}
|
|
1219
1511
|
.retro-btn-warning:active {
|
|
1220
|
-
background:
|
|
1512
|
+
background: var(--retro-warning-active);
|
|
1221
1513
|
}
|
|
1222
1514
|
|
|
1223
1515
|
.retro-btn-xs {
|
|
1224
|
-
font-size:
|
|
1516
|
+
font-size: var(--retro-font-size-xs);
|
|
1225
1517
|
padding: 2px 8px;
|
|
1226
|
-
line-height: 1.2;
|
|
1227
1518
|
}
|
|
1228
1519
|
|
|
1229
1520
|
.retro-btn-sm {
|
|
1230
|
-
font-size:
|
|
1521
|
+
font-size: var(--retro-font-size-sm);
|
|
1231
1522
|
padding: 3px 10px;
|
|
1232
|
-
line-height: 1.3;
|
|
1233
1523
|
}
|
|
1234
1524
|
|
|
1235
1525
|
.retro-btn-md {
|
|
1236
|
-
font-size:
|
|
1526
|
+
font-size: var(--retro-font-size);
|
|
1237
1527
|
padding: 4px 12px;
|
|
1238
|
-
line-height: 1.4;
|
|
1239
1528
|
}
|
|
1240
1529
|
|
|
1241
1530
|
.retro-btn-lg {
|
|
1242
|
-
font-size:
|
|
1531
|
+
font-size: var(--retro-font-size-lg);
|
|
1243
1532
|
padding: 6px 16px;
|
|
1244
|
-
line-height: 1.5;
|
|
1245
1533
|
}
|
|
1246
1534
|
|
|
1247
1535
|
.retro-btn-xl {
|
|
1248
|
-
font-size:
|
|
1536
|
+
font-size: var(--retro-font-size-xl);
|
|
1249
1537
|
padding: 8px 20px;
|
|
1250
|
-
line-height: 1.6;
|
|
1251
1538
|
}
|
|
1252
1539
|
|
|
1253
1540
|
.retro-btn-xxl {
|
|
1254
|
-
font-size:
|
|
1541
|
+
font-size: var(--retro-font-size-2xl);
|
|
1255
1542
|
padding: 10px 24px;
|
|
1256
|
-
line-height: 1.7;
|
|
1257
1543
|
}
|
|
1258
1544
|
|
|
1259
1545
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
1260
1546
|
/* Main SCSS file that imports all components */
|
|
1261
1547
|
/* Core */
|
|
1262
|
-
/*
|
|
1548
|
+
/* Base Styles */
|
|
1263
1549
|
/**
|
|
1264
1550
|
* @name Retro Card
|
|
1265
1551
|
* @group components
|
|
@@ -1278,7 +1564,7 @@ h4, h5, h6 {
|
|
|
1278
1564
|
border-left: 2px solid var(--retro-border-medium);
|
|
1279
1565
|
border-right: 2px solid var(--retro-border-light);
|
|
1280
1566
|
border-bottom: 2px solid var(--retro-border-light);
|
|
1281
|
-
font-family:
|
|
1567
|
+
font-family: var(--retro-font);
|
|
1282
1568
|
margin-bottom: 24px;
|
|
1283
1569
|
position: relative;
|
|
1284
1570
|
}
|
|
@@ -1290,7 +1576,7 @@ h4, h5, h6 {
|
|
|
1290
1576
|
text-shadow: none;
|
|
1291
1577
|
padding: 8px 16px;
|
|
1292
1578
|
font-weight: bold;
|
|
1293
|
-
font-size:
|
|
1579
|
+
font-size: 0.875rem;
|
|
1294
1580
|
user-select: none;
|
|
1295
1581
|
display: block;
|
|
1296
1582
|
text-align: left;
|
|
@@ -1300,7 +1586,7 @@ h4, h5, h6 {
|
|
|
1300
1586
|
padding: 16px 16px;
|
|
1301
1587
|
background: var(--retro-card-content-bg);
|
|
1302
1588
|
border-top: 2px solid var(--retro-card-content-bg);
|
|
1303
|
-
font-size:
|
|
1589
|
+
font-size: 0.875rem;
|
|
1304
1590
|
color: var(--retro-card-content-text);
|
|
1305
1591
|
min-height: 2em;
|
|
1306
1592
|
text-align: left;
|
|
@@ -1311,27 +1597,27 @@ h4, h5, h6 {
|
|
|
1311
1597
|
border-top: 2px solid var(--retro-card-footer-bg);
|
|
1312
1598
|
color: var(--retro-card-footer-text);
|
|
1313
1599
|
padding: 8px 16px;
|
|
1314
|
-
font-size:
|
|
1600
|
+
font-size: 0.75rem;
|
|
1315
1601
|
text-align: left;
|
|
1316
1602
|
}
|
|
1317
1603
|
|
|
1318
1604
|
.retro-card-image {
|
|
1319
1605
|
width: 100%;
|
|
1320
1606
|
display: block;
|
|
1321
|
-
border-bottom: 2px solid
|
|
1607
|
+
border-bottom: 2px solid var(--retro-border-medium);
|
|
1322
1608
|
max-height: 140px;
|
|
1323
1609
|
object-fit: cover;
|
|
1324
1610
|
}
|
|
1325
1611
|
|
|
1326
1612
|
.retro-card-compact .retro-card-content {
|
|
1327
1613
|
padding: 4px 8px;
|
|
1328
|
-
font-size:
|
|
1614
|
+
font-size: 0.75rem;
|
|
1329
1615
|
}
|
|
1330
1616
|
|
|
1331
1617
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
1332
1618
|
/* Main SCSS file that imports all components */
|
|
1333
1619
|
/* Core */
|
|
1334
|
-
/*
|
|
1620
|
+
/* Base Styles */
|
|
1335
1621
|
/* Retro Form - Win9x Style Only */
|
|
1336
1622
|
/**
|
|
1337
1623
|
* @name Retro Form
|
|
@@ -1365,19 +1651,34 @@ h4, h5, h6 {
|
|
|
1365
1651
|
border: 2px solid var(--retro-border-dark);
|
|
1366
1652
|
box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-medium);
|
|
1367
1653
|
color: var(--retro-input-text);
|
|
1368
|
-
font-family:
|
|
1369
|
-
font-size:
|
|
1370
|
-
border-radius: 0;
|
|
1654
|
+
font-family: var(--retro-font);
|
|
1655
|
+
font-size: var(--retro-font-size);
|
|
1656
|
+
border-radius: 0 !important;
|
|
1371
1657
|
transition: none;
|
|
1372
1658
|
}
|
|
1373
1659
|
.retro-input:focus,
|
|
1374
1660
|
.retro-textarea:focus,
|
|
1375
1661
|
.retro-select:focus {
|
|
1376
|
-
outline: 1px dotted var(--retro-input-text);
|
|
1377
|
-
outline-offset: -4px;
|
|
1378
1662
|
border-color: var(--retro-primary);
|
|
1379
1663
|
box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-medium);
|
|
1380
1664
|
}
|
|
1665
|
+
.retro-input:focus,
|
|
1666
|
+
.retro-textarea:focus,
|
|
1667
|
+
.retro-select:focus {
|
|
1668
|
+
outline: 1px dotted var(--retro-text);
|
|
1669
|
+
outline-offset: -4px;
|
|
1670
|
+
}
|
|
1671
|
+
.retro-input:focus:not(:focus-visible),
|
|
1672
|
+
.retro-textarea:focus:not(:focus-visible),
|
|
1673
|
+
.retro-select:focus:not(:focus-visible) {
|
|
1674
|
+
outline: none;
|
|
1675
|
+
}
|
|
1676
|
+
.retro-input:focus-visible,
|
|
1677
|
+
.retro-textarea:focus-visible,
|
|
1678
|
+
.retro-select:focus-visible {
|
|
1679
|
+
outline: 1px dotted var(--retro-text);
|
|
1680
|
+
outline-offset: -4px;
|
|
1681
|
+
}
|
|
1381
1682
|
|
|
1382
1683
|
.retro-textarea {
|
|
1383
1684
|
min-height: 100px;
|
|
@@ -1447,33 +1748,10 @@ h4, h5, h6 {
|
|
|
1447
1748
|
color: var(--retro-color-danger);
|
|
1448
1749
|
}
|
|
1449
1750
|
|
|
1450
|
-
.retro-input,
|
|
1451
|
-
.retro-textarea,
|
|
1452
|
-
.retro-select {
|
|
1453
|
-
border-radius: 0 !important;
|
|
1454
|
-
border: 2px solid var(--retro-border-dark);
|
|
1455
|
-
box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-medium);
|
|
1456
|
-
background: var(--retro-white);
|
|
1457
|
-
color: var(--retro-black);
|
|
1458
|
-
font-family: "MS Sans Serif", "Microsoft Sans Serif", Arial, sans-serif;
|
|
1459
|
-
font-size: 14px;
|
|
1460
|
-
transition: none;
|
|
1461
|
-
}
|
|
1462
|
-
.retro-input:focus,
|
|
1463
|
-
.retro-textarea:focus,
|
|
1464
|
-
.retro-select:focus {
|
|
1465
|
-
outline: 1px dotted var(--retro-black);
|
|
1466
|
-
outline-offset: -4px;
|
|
1467
|
-
border-color: var(--retro-primary);
|
|
1468
|
-
box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-medium);
|
|
1469
|
-
}
|
|
1470
|
-
|
|
1471
1751
|
.retro-input,
|
|
1472
1752
|
.retro-select,
|
|
1473
1753
|
textarea {
|
|
1474
1754
|
padding: 0.5em 0.75em;
|
|
1475
|
-
border-radius: 4px;
|
|
1476
|
-
border: 1px solid #b0b0b0;
|
|
1477
1755
|
}
|
|
1478
1756
|
|
|
1479
1757
|
input[type=color].retro-input {
|
|
@@ -1482,7 +1760,7 @@ input[type=color].retro-input {
|
|
|
1482
1760
|
padding: 2px;
|
|
1483
1761
|
border-radius: 4px;
|
|
1484
1762
|
border: 2px solid var(--retro-border-dark);
|
|
1485
|
-
background: var(--retro-
|
|
1763
|
+
background: var(--retro-input-bg);
|
|
1486
1764
|
box-shadow: 1px 1px 0 var(--retro-border-light);
|
|
1487
1765
|
}
|
|
1488
1766
|
|
|
@@ -1531,30 +1809,30 @@ input[type=range].retro-input::-ms-thumb {
|
|
|
1531
1809
|
|
|
1532
1810
|
input[type=range].retro-input::-webkit-slider-runnable-track {
|
|
1533
1811
|
height: 6px;
|
|
1534
|
-
background: var(--retro-
|
|
1812
|
+
background: var(--retro-input-bg);
|
|
1535
1813
|
border-radius: 4px;
|
|
1536
1814
|
}
|
|
1537
1815
|
|
|
1538
1816
|
input[type=range].retro-input::-ms-fill-lower,
|
|
1539
1817
|
input[type=range].retro-input::-ms-fill-upper {
|
|
1540
|
-
background: var(--retro-
|
|
1818
|
+
background: var(--retro-input-bg);
|
|
1541
1819
|
}
|
|
1542
1820
|
|
|
1543
1821
|
input[type=file].retro-input {
|
|
1544
1822
|
padding: 4px;
|
|
1545
|
-
background: var(--retro-
|
|
1823
|
+
background: var(--retro-input-bg);
|
|
1546
1824
|
border: 2px solid var(--retro-border-dark);
|
|
1547
1825
|
box-shadow: 1px 1px 0 var(--retro-border-light);
|
|
1548
|
-
color: var(--retro-
|
|
1549
|
-
font-family:
|
|
1550
|
-
font-size:
|
|
1826
|
+
color: var(--retro-input-text);
|
|
1827
|
+
font-family: var(--retro-font);
|
|
1828
|
+
font-size: var(--retro-font-size);
|
|
1551
1829
|
}
|
|
1552
1830
|
|
|
1553
1831
|
.retro-input:disabled,
|
|
1554
1832
|
.retro-select:disabled,
|
|
1555
1833
|
.retro-textarea:disabled {
|
|
1556
|
-
background:
|
|
1557
|
-
color:
|
|
1834
|
+
background: var(--retro-light);
|
|
1835
|
+
color: var(--retro-text-muted);
|
|
1558
1836
|
border-color: var(--retro-border-medium);
|
|
1559
1837
|
cursor: not-allowed;
|
|
1560
1838
|
opacity: 1;
|
|
@@ -1572,8 +1850,8 @@ input[type=checkbox].retro-input,
|
|
|
1572
1850
|
input[type=radio].retro-input {
|
|
1573
1851
|
appearance: none;
|
|
1574
1852
|
-webkit-appearance: none;
|
|
1575
|
-
background:
|
|
1576
|
-
border: 2px solid
|
|
1853
|
+
background: var(--retro-input-bg);
|
|
1854
|
+
border: 2px solid var(--retro-border-medium);
|
|
1577
1855
|
width: 16px;
|
|
1578
1856
|
height: 16px;
|
|
1579
1857
|
margin: 0 8px 0 0;
|
|
@@ -1596,7 +1874,7 @@ input[type=checkbox].retro-input:checked::after {
|
|
|
1596
1874
|
top: 0px;
|
|
1597
1875
|
width: 5px;
|
|
1598
1876
|
height: 10px;
|
|
1599
|
-
border: solid
|
|
1877
|
+
border: solid var(--retro-primary);
|
|
1600
1878
|
border-width: 0 2px 2px 0;
|
|
1601
1879
|
transform: rotate(45deg);
|
|
1602
1880
|
background: none;
|
|
@@ -1614,21 +1892,30 @@ input[type=radio].retro-input:checked::after {
|
|
|
1614
1892
|
top: 4px;
|
|
1615
1893
|
width: 6px;
|
|
1616
1894
|
height: 6px;
|
|
1617
|
-
background:
|
|
1895
|
+
background: var(--retro-primary);
|
|
1618
1896
|
border-radius: 50%;
|
|
1619
1897
|
display: block;
|
|
1620
1898
|
}
|
|
1621
1899
|
|
|
1622
1900
|
input[type=checkbox].retro-input:focus,
|
|
1623
1901
|
input[type=radio].retro-input:focus {
|
|
1624
|
-
outline: 2px solid
|
|
1902
|
+
outline: 2px solid var(--retro-primary);
|
|
1903
|
+
outline-offset: 2px;
|
|
1904
|
+
}
|
|
1905
|
+
input[type=checkbox].retro-input:focus:not(:focus-visible),
|
|
1906
|
+
input[type=radio].retro-input:focus:not(:focus-visible) {
|
|
1907
|
+
outline: none;
|
|
1908
|
+
}
|
|
1909
|
+
input[type=checkbox].retro-input:focus-visible,
|
|
1910
|
+
input[type=radio].retro-input:focus-visible {
|
|
1911
|
+
outline: 2px solid var(--retro-primary);
|
|
1625
1912
|
outline-offset: 2px;
|
|
1626
1913
|
}
|
|
1627
1914
|
|
|
1628
1915
|
.retro-label {
|
|
1629
|
-
font-family:
|
|
1630
|
-
font-size:
|
|
1631
|
-
color: var(--retro-
|
|
1916
|
+
font-family: var(--retro-font);
|
|
1917
|
+
font-size: var(--retro-font-size);
|
|
1918
|
+
color: var(--retro-text);
|
|
1632
1919
|
display: inline-flex;
|
|
1633
1920
|
align-items: center;
|
|
1634
1921
|
cursor: pointer;
|
|
@@ -1638,7 +1925,7 @@ input[type=radio].retro-input:focus {
|
|
|
1638
1925
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
1639
1926
|
/* Main SCSS file that imports all components */
|
|
1640
1927
|
/* Core */
|
|
1641
|
-
/*
|
|
1928
|
+
/* Base Styles */
|
|
1642
1929
|
/* Retro Checkbox and Radio Styles */
|
|
1643
1930
|
/**
|
|
1644
1931
|
* @name Retro Checkbox & Radio
|
|
@@ -1662,7 +1949,7 @@ input[type=radio].retro-input:focus {
|
|
|
1662
1949
|
box-shadow: inset -1px -1px 0 var(--retro-border-light), inset 1px 1px 0 var(--retro-border-medium);
|
|
1663
1950
|
outline: none;
|
|
1664
1951
|
display: inline-block;
|
|
1665
|
-
transition:
|
|
1952
|
+
transition: background-color 0.1s, border-color 0.1s, box-shadow 0.1s;
|
|
1666
1953
|
color: var(--retro-input-text);
|
|
1667
1954
|
}
|
|
1668
1955
|
.retro-checkbox:hover,
|
|
@@ -1671,12 +1958,21 @@ input[type=radio].retro-input:focus {
|
|
|
1671
1958
|
}
|
|
1672
1959
|
.retro-checkbox:focus,
|
|
1673
1960
|
.retro-radio:focus {
|
|
1674
|
-
outline: 1px dotted var(--retro-
|
|
1961
|
+
outline: 1px dotted var(--retro-text);
|
|
1962
|
+
outline-offset: 2px;
|
|
1963
|
+
}
|
|
1964
|
+
.retro-checkbox:focus:not(:focus-visible),
|
|
1965
|
+
.retro-radio:focus:not(:focus-visible) {
|
|
1966
|
+
outline: none;
|
|
1967
|
+
}
|
|
1968
|
+
.retro-checkbox:focus-visible,
|
|
1969
|
+
.retro-radio:focus-visible {
|
|
1970
|
+
outline: 1px dotted var(--retro-text);
|
|
1675
1971
|
outline-offset: 2px;
|
|
1676
1972
|
}
|
|
1677
1973
|
.retro-checkbox:disabled,
|
|
1678
1974
|
.retro-radio:disabled {
|
|
1679
|
-
background:
|
|
1975
|
+
background: var(--retro-body-bg);
|
|
1680
1976
|
border-color: var(--retro-border-medium);
|
|
1681
1977
|
cursor: not-allowed;
|
|
1682
1978
|
opacity: 0.7;
|
|
@@ -1685,7 +1981,6 @@ input[type=radio].retro-input:focus {
|
|
|
1685
1981
|
/* Checkbox specific styles */
|
|
1686
1982
|
.retro-checkbox {
|
|
1687
1983
|
border-radius: 0;
|
|
1688
|
-
/* Color variants */
|
|
1689
1984
|
}
|
|
1690
1985
|
.retro-checkbox:checked {
|
|
1691
1986
|
background: var(--retro-white);
|
|
@@ -1702,6 +1997,9 @@ input[type=radio].retro-input:focus {
|
|
|
1702
1997
|
transform: rotate(45deg);
|
|
1703
1998
|
display: block;
|
|
1704
1999
|
}
|
|
2000
|
+
.retro-checkbox {
|
|
2001
|
+
/* Color variants */
|
|
2002
|
+
}
|
|
1705
2003
|
.retro-checkbox.retro-checkbox-primary:checked:after {
|
|
1706
2004
|
border-color: var(--retro-primary);
|
|
1707
2005
|
}
|
|
@@ -1721,7 +2019,6 @@ input[type=radio].retro-input:focus {
|
|
|
1721
2019
|
/* Radio button specific styles */
|
|
1722
2020
|
.retro-radio {
|
|
1723
2021
|
border-radius: 50%;
|
|
1724
|
-
/* Color variants */
|
|
1725
2022
|
}
|
|
1726
2023
|
.retro-radio:checked {
|
|
1727
2024
|
background: var(--retro-white);
|
|
@@ -1737,6 +2034,9 @@ input[type=radio].retro-input:focus {
|
|
|
1737
2034
|
border-radius: 50%;
|
|
1738
2035
|
display: block;
|
|
1739
2036
|
}
|
|
2037
|
+
.retro-radio {
|
|
2038
|
+
/* Color variants */
|
|
2039
|
+
}
|
|
1740
2040
|
.retro-radio.retro-radio-primary:checked:after {
|
|
1741
2041
|
background: var(--retro-primary);
|
|
1742
2042
|
}
|
|
@@ -1775,7 +2075,7 @@ input[type=radio].retro-input:focus {
|
|
|
1775
2075
|
left: 0;
|
|
1776
2076
|
right: 0;
|
|
1777
2077
|
bottom: 0;
|
|
1778
|
-
background:
|
|
2078
|
+
background: var(--retro-body-bg);
|
|
1779
2079
|
border: 2px solid var(--retro-border-dark);
|
|
1780
2080
|
box-shadow: inset -1px -1px 0 var(--retro-border-light), inset 1px 1px 0 var(--retro-border-medium);
|
|
1781
2081
|
transition: 0.1s;
|
|
@@ -1798,11 +2098,11 @@ input[type=radio].retro-input:focus {
|
|
|
1798
2098
|
.retro-switch input:checked + .retro-switch-slider:before {
|
|
1799
2099
|
transform: translateX(16px);
|
|
1800
2100
|
}
|
|
1801
|
-
.retro-switch input:focus + .retro-switch-slider {
|
|
1802
|
-
outline: 1px dotted var(--retro-
|
|
2101
|
+
.retro-switch input:focus-visible + .retro-switch-slider {
|
|
2102
|
+
outline: 1px dotted var(--retro-text);
|
|
1803
2103
|
}
|
|
1804
2104
|
.retro-switch input:disabled + .retro-switch-slider {
|
|
1805
|
-
background:
|
|
2105
|
+
background: var(--retro-body-bg);
|
|
1806
2106
|
opacity: 0.7;
|
|
1807
2107
|
cursor: not-allowed;
|
|
1808
2108
|
}
|
|
@@ -1845,7 +2145,7 @@ input[type=radio].retro-input:focus {
|
|
|
1845
2145
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
1846
2146
|
/* Main SCSS file that imports all components */
|
|
1847
2147
|
/* Core */
|
|
1848
|
-
/*
|
|
2148
|
+
/* Base Styles */
|
|
1849
2149
|
/**
|
|
1850
2150
|
* @name Retro Alert
|
|
1851
2151
|
* @group components
|
|
@@ -1886,7 +2186,7 @@ input[type=radio].retro-input:focus {
|
|
|
1886
2186
|
border-left: 2px solid var(--retro-border-medium);
|
|
1887
2187
|
border-top: 2px solid var(--retro-border-medium);
|
|
1888
2188
|
border-radius: 0 !important;
|
|
1889
|
-
font-family:
|
|
2189
|
+
font-family: var(--retro-font-heading);
|
|
1890
2190
|
box-shadow: none;
|
|
1891
2191
|
margin-bottom: 1.2em;
|
|
1892
2192
|
padding: 0.7em 1.2em;
|
|
@@ -1907,44 +2207,44 @@ input[type=radio].retro-input:focus {
|
|
|
1907
2207
|
width: 100%;
|
|
1908
2208
|
margin: 0;
|
|
1909
2209
|
padding: 0.3em 1em 0.2em 1em;
|
|
1910
|
-
font-size:
|
|
2210
|
+
font-size: var(--retro-font-size-sm);
|
|
1911
2211
|
font-family: inherit;
|
|
1912
2212
|
border-radius: 0;
|
|
1913
2213
|
box-shadow: none;
|
|
1914
|
-
border-top: 2px solid rgba(
|
|
1915
|
-
background:
|
|
1916
|
-
color:
|
|
2214
|
+
border-top: 2px solid rgba(var(--retro-black-rgb), 0.12);
|
|
2215
|
+
background: var(--retro-light);
|
|
2216
|
+
color: var(--retro-text);
|
|
1917
2217
|
text-align: left;
|
|
1918
2218
|
}
|
|
1919
2219
|
|
|
1920
2220
|
.retro-alert-primary .retro-alert-footer {
|
|
1921
|
-
background:
|
|
1922
|
-
color:
|
|
1923
|
-
border-top: 2px solid
|
|
2221
|
+
background: var(--retro-primary-active);
|
|
2222
|
+
color: var(--retro-primary-fg);
|
|
2223
|
+
border-top: 2px solid var(--retro-primary-active);
|
|
1924
2224
|
}
|
|
1925
2225
|
|
|
1926
2226
|
.retro-alert-success .retro-alert-footer {
|
|
1927
|
-
background:
|
|
1928
|
-
color:
|
|
1929
|
-
border-top: 2px solid
|
|
2227
|
+
background: var(--retro-success-active);
|
|
2228
|
+
color: var(--retro-success-fg);
|
|
2229
|
+
border-top: 2px solid var(--retro-success-active);
|
|
1930
2230
|
}
|
|
1931
2231
|
|
|
1932
2232
|
.retro-alert-danger .retro-alert-footer {
|
|
1933
|
-
background:
|
|
1934
|
-
color:
|
|
1935
|
-
border-top: 2px solid
|
|
2233
|
+
background: var(--retro-danger-active);
|
|
2234
|
+
color: var(--retro-danger-fg);
|
|
2235
|
+
border-top: 2px solid var(--retro-danger-active);
|
|
1936
2236
|
}
|
|
1937
2237
|
|
|
1938
2238
|
.retro-alert-warning .retro-alert-footer {
|
|
1939
|
-
background:
|
|
1940
|
-
color:
|
|
1941
|
-
border-top: 2px solid
|
|
2239
|
+
background: var(--retro-warning-active);
|
|
2240
|
+
color: var(--retro-warning-fg);
|
|
2241
|
+
border-top: 2px solid var(--retro-warning-active);
|
|
1942
2242
|
}
|
|
1943
2243
|
|
|
1944
2244
|
.retro-alert-info .retro-alert-footer {
|
|
1945
|
-
background:
|
|
1946
|
-
color:
|
|
1947
|
-
border-top: 2px solid
|
|
2245
|
+
background: var(--retro-info-active);
|
|
2246
|
+
color: var(--retro-info-fg);
|
|
2247
|
+
border-top: 2px solid var(--retro-info-active);
|
|
1948
2248
|
}
|
|
1949
2249
|
|
|
1950
2250
|
.retro-alert-icon, .retro-toast-icon, .retro-alert-close, .retro-toast-close {
|
|
@@ -1952,40 +2252,40 @@ input[type=radio].retro-input:focus {
|
|
|
1952
2252
|
}
|
|
1953
2253
|
|
|
1954
2254
|
.retro-toast-primary, .retro-toast.retro-alert-primary {
|
|
1955
|
-
background:
|
|
1956
|
-
color:
|
|
1957
|
-
border-left: 6px solid
|
|
2255
|
+
background: var(--retro-primary);
|
|
2256
|
+
color: var(--retro-primary-fg);
|
|
2257
|
+
border-left: 6px solid var(--retro-primary-active);
|
|
1958
2258
|
}
|
|
1959
2259
|
|
|
1960
2260
|
.retro-toast-success, .retro-toast.retro-alert-success {
|
|
1961
|
-
background:
|
|
1962
|
-
color:
|
|
1963
|
-
border-left: 6px solid
|
|
2261
|
+
background: var(--retro-success);
|
|
2262
|
+
color: var(--retro-success-fg);
|
|
2263
|
+
border-left: 6px solid var(--retro-success-active);
|
|
1964
2264
|
}
|
|
1965
2265
|
|
|
1966
2266
|
.retro-toast-danger, .retro-toast.retro-alert-danger {
|
|
1967
|
-
background:
|
|
1968
|
-
color:
|
|
1969
|
-
border-left: 6px solid
|
|
2267
|
+
background: var(--retro-danger);
|
|
2268
|
+
color: var(--retro-danger-fg);
|
|
2269
|
+
border-left: 6px solid var(--retro-danger-active);
|
|
1970
2270
|
}
|
|
1971
2271
|
|
|
1972
2272
|
.retro-toast-warning, .retro-toast.retro-alert-warning {
|
|
1973
|
-
background:
|
|
1974
|
-
color:
|
|
1975
|
-
border-left: 6px solid
|
|
2273
|
+
background: var(--retro-warning);
|
|
2274
|
+
color: var(--retro-warning-fg);
|
|
2275
|
+
border-left: 6px solid var(--retro-warning-active);
|
|
1976
2276
|
}
|
|
1977
2277
|
|
|
1978
2278
|
.retro-toast-info, .retro-toast.retro-alert-info {
|
|
1979
|
-
background:
|
|
1980
|
-
color:
|
|
1981
|
-
border-left: 6px solid
|
|
2279
|
+
background: var(--retro-info);
|
|
2280
|
+
color: var(--retro-info-fg);
|
|
2281
|
+
border-left: 6px solid var(--retro-info-active);
|
|
1982
2282
|
}
|
|
1983
2283
|
|
|
1984
2284
|
.retro-toast-close {
|
|
1985
2285
|
background: none;
|
|
1986
2286
|
border: none;
|
|
1987
2287
|
color: inherit;
|
|
1988
|
-
font-size:
|
|
2288
|
+
font-size: var(--retro-font-size-xl);
|
|
1989
2289
|
font-weight: bold;
|
|
1990
2290
|
margin-left: auto;
|
|
1991
2291
|
cursor: pointer;
|
|
@@ -1998,42 +2298,45 @@ input[type=radio].retro-input:focus {
|
|
|
1998
2298
|
}
|
|
1999
2299
|
|
|
2000
2300
|
.retro-alert-primary {
|
|
2001
|
-
background:
|
|
2002
|
-
color:
|
|
2003
|
-
border-left: 6px solid
|
|
2301
|
+
background: var(--retro-primary);
|
|
2302
|
+
color: var(--retro-primary-fg);
|
|
2303
|
+
border-left: 6px solid var(--retro-primary-active);
|
|
2004
2304
|
}
|
|
2005
2305
|
|
|
2006
2306
|
.retro-alert-success {
|
|
2007
|
-
background:
|
|
2008
|
-
color:
|
|
2009
|
-
border-left: 6px solid
|
|
2307
|
+
background: var(--retro-success);
|
|
2308
|
+
color: var(--retro-success-fg);
|
|
2309
|
+
border-left: 6px solid var(--retro-success-active);
|
|
2010
2310
|
}
|
|
2011
2311
|
|
|
2012
2312
|
.retro-alert-danger {
|
|
2013
|
-
background:
|
|
2014
|
-
color:
|
|
2015
|
-
border-left: 6px solid
|
|
2313
|
+
background: var(--retro-danger);
|
|
2314
|
+
color: var(--retro-danger-fg);
|
|
2315
|
+
border-left: 6px solid var(--retro-danger-active);
|
|
2016
2316
|
}
|
|
2017
2317
|
|
|
2018
2318
|
.retro-alert-warning {
|
|
2019
|
-
background:
|
|
2020
|
-
color:
|
|
2021
|
-
border-left: 6px solid
|
|
2319
|
+
background: var(--retro-warning);
|
|
2320
|
+
color: var(--retro-warning-fg);
|
|
2321
|
+
border-left: 6px solid var(--retro-warning-active);
|
|
2022
2322
|
}
|
|
2023
2323
|
|
|
2024
2324
|
.retro-alert-info {
|
|
2025
|
-
background:
|
|
2026
|
-
color:
|
|
2027
|
-
border-left: 6px solid
|
|
2325
|
+
background: var(--retro-info);
|
|
2326
|
+
color: var(--retro-info-fg);
|
|
2327
|
+
border-left: 6px solid var(--retro-info-active);
|
|
2028
2328
|
}
|
|
2029
2329
|
|
|
2030
2330
|
.retro-toast {
|
|
2031
|
-
box-shadow: 2px 4px 16px rgba(
|
|
2331
|
+
box-shadow: 2px 4px 16px rgba(var(--retro-black-rgb), 0.18), 1px 1px 0 var(--retro-border-light), 2px 2px 0 var(--retro-border-medium);
|
|
2032
2332
|
border-width: 1.5px;
|
|
2033
2333
|
margin-bottom: 0.75em;
|
|
2034
2334
|
animation: retro-toast-fadein 0.3s;
|
|
2035
2335
|
min-width: 240px;
|
|
2036
2336
|
max-width: 400px;
|
|
2337
|
+
position: relative;
|
|
2338
|
+
z-index: var(--retro-z-index-tooltip);
|
|
2339
|
+
pointer-events: auto;
|
|
2037
2340
|
}
|
|
2038
2341
|
|
|
2039
2342
|
@keyframes retro-toast-fadein {
|
|
@@ -2046,34 +2349,6 @@ input[type=radio].retro-input:focus {
|
|
|
2046
2349
|
transform: translateY(0);
|
|
2047
2350
|
}
|
|
2048
2351
|
}
|
|
2049
|
-
.retro-toast::before {
|
|
2050
|
-
content: "";
|
|
2051
|
-
display: inline-block;
|
|
2052
|
-
width: 20px;
|
|
2053
|
-
height: 20px;
|
|
2054
|
-
margin-right: 1em;
|
|
2055
|
-
margin-left: -2em;
|
|
2056
|
-
background-repeat: no-repeat;
|
|
2057
|
-
background-position: center;
|
|
2058
|
-
background-size: 18px 18px;
|
|
2059
|
-
}
|
|
2060
|
-
|
|
2061
|
-
.retro-toast-info::before {
|
|
2062
|
-
background-image: url('data:image/svg+xml;utf8,<svg fill="%230099b3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><circle cx="10" cy="10" r="10"/><text x="10" y="15" font-size="12" text-anchor="middle" fill="white">i</text></svg>');
|
|
2063
|
-
}
|
|
2064
|
-
|
|
2065
|
-
.retro-toast-warning::before {
|
|
2066
|
-
background-image: url('data:image/svg+xml;utf8,<svg fill="%23e6a800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><polygon points="10,2 18,18 2,18"/><text x="10" y="15" font-size="12" text-anchor="middle" fill="black">!</text></svg>');
|
|
2067
|
-
}
|
|
2068
|
-
|
|
2069
|
-
.retro-toast-danger::before {
|
|
2070
|
-
background-image: url('data:image/svg+xml;utf8,<svg fill="%23b20000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><circle cx="10" cy="10" r="10"/><text x="10" y="15" font-size="14" text-anchor="middle" fill="white">×</text></svg>');
|
|
2071
|
-
}
|
|
2072
|
-
|
|
2073
|
-
.retro-toast-success::before {
|
|
2074
|
-
background-image: url('data:image/svg+xml;utf8,<svg fill="%23006400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><circle cx="10" cy="10" r="10"/><polyline points="5,11 9,15 15,6" fill="none" stroke="white" stroke-width="2"/></svg>');
|
|
2075
|
-
}
|
|
2076
|
-
|
|
2077
2352
|
.retro-alert-main, .retro-toast-main {
|
|
2078
2353
|
display: flex;
|
|
2079
2354
|
flex-direction: row;
|
|
@@ -2092,40 +2367,10 @@ input[type=radio].retro-input:focus {
|
|
|
2092
2367
|
display: flex;
|
|
2093
2368
|
align-items: center;
|
|
2094
2369
|
justify-content: center;
|
|
2095
|
-
font-size:
|
|
2370
|
+
font-size: var(--retro-font-size-lg);
|
|
2096
2371
|
flex-shrink: 0;
|
|
2097
2372
|
}
|
|
2098
2373
|
|
|
2099
|
-
.retro-alert-primary .retro-alert-icon, .retro-toast-primary .retro-toast-icon {
|
|
2100
|
-
content: "";
|
|
2101
|
-
background: none;
|
|
2102
|
-
color: #fff;
|
|
2103
|
-
}
|
|
2104
|
-
|
|
2105
|
-
.retro-alert-success .retro-alert-icon, .retro-toast-success .retro-toast-icon {
|
|
2106
|
-
content: "";
|
|
2107
|
-
background: none;
|
|
2108
|
-
color: #fff;
|
|
2109
|
-
}
|
|
2110
|
-
|
|
2111
|
-
.retro-alert-danger .retro-alert-icon, .retro-toast-danger .retro-toast-icon {
|
|
2112
|
-
content: "";
|
|
2113
|
-
background: none;
|
|
2114
|
-
color: #fff;
|
|
2115
|
-
}
|
|
2116
|
-
|
|
2117
|
-
.retro-alert-warning .retro-alert-icon, .retro-toast-warning .retro-toast-icon {
|
|
2118
|
-
content: "";
|
|
2119
|
-
background: none;
|
|
2120
|
-
color: #222;
|
|
2121
|
-
}
|
|
2122
|
-
|
|
2123
|
-
.retro-alert-info .retro-alert-icon, .retro-toast-info .retro-toast-icon {
|
|
2124
|
-
content: "";
|
|
2125
|
-
background: none;
|
|
2126
|
-
color: #222;
|
|
2127
|
-
}
|
|
2128
|
-
|
|
2129
2374
|
.retro-alert-primary .retro-alert-icon::before, .retro-toast-primary .retro-toast-icon::before {
|
|
2130
2375
|
content: "ℹ"; /* ℹ */
|
|
2131
2376
|
}
|
|
@@ -2158,11 +2403,9 @@ input[type=radio].retro-input:focus {
|
|
|
2158
2403
|
|
|
2159
2404
|
.retro-alert {
|
|
2160
2405
|
margin-bottom: 1.25rem;
|
|
2161
|
-
border-radius: 6px;
|
|
2162
|
-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
2163
2406
|
}
|
|
2164
2407
|
|
|
2165
|
-
/*
|
|
2408
|
+
/* Base Styles */
|
|
2166
2409
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
2167
2410
|
/* Main SCSS file that imports all components */
|
|
2168
2411
|
/* Core */
|
|
@@ -2193,8 +2436,8 @@ input[type=radio].retro-input:focus {
|
|
|
2193
2436
|
border: 1px solid var(--retro-border-dark);
|
|
2194
2437
|
background-color: var(--retro-table-bg);
|
|
2195
2438
|
color: var(--retro-table-header-text);
|
|
2196
|
-
font-family:
|
|
2197
|
-
font-size:
|
|
2439
|
+
font-family: var(--retro-font);
|
|
2440
|
+
font-size: 0.875rem;
|
|
2198
2441
|
box-shadow: var(--retro-box-shadow-outset-button);
|
|
2199
2442
|
overflow-x: auto;
|
|
2200
2443
|
margin-bottom: var(--retro-spacing-md);
|
|
@@ -2270,7 +2513,7 @@ input[type=radio].retro-input:focus {
|
|
|
2270
2513
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
2271
2514
|
/* Main SCSS file that imports all components */
|
|
2272
2515
|
/* Core */
|
|
2273
|
-
/*
|
|
2516
|
+
/* Base Styles */
|
|
2274
2517
|
/**
|
|
2275
2518
|
* @name Retro Modal
|
|
2276
2519
|
* @group components
|
|
@@ -2299,7 +2542,7 @@ input[type=radio].retro-input:focus {
|
|
|
2299
2542
|
display: none;
|
|
2300
2543
|
overflow: auto;
|
|
2301
2544
|
outline: 0;
|
|
2302
|
-
background: rgba(
|
|
2545
|
+
background: rgba(var(--retro-black-rgb), 0.6);
|
|
2303
2546
|
padding: 1rem;
|
|
2304
2547
|
box-sizing: border-box;
|
|
2305
2548
|
text-align: center;
|
|
@@ -2321,11 +2564,11 @@ input[type=radio].retro-input:focus {
|
|
|
2321
2564
|
width: 100%;
|
|
2322
2565
|
max-width: 500px;
|
|
2323
2566
|
margin: 1.75rem auto;
|
|
2324
|
-
background: var(--retro-bg);
|
|
2567
|
+
background: var(--retro-modal-bg);
|
|
2325
2568
|
border: 2px solid var(--retro-border-dark);
|
|
2326
|
-
box-shadow: 4px 4px 8px rgba(
|
|
2569
|
+
box-shadow: 4px 4px 8px rgba(var(--retro-black-rgb), 0.5), inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-medium);
|
|
2327
2570
|
border-radius: 4px !important;
|
|
2328
|
-
font-family:
|
|
2571
|
+
font-family: var(--retro-font-heading);
|
|
2329
2572
|
transition: none;
|
|
2330
2573
|
text-align: left;
|
|
2331
2574
|
vertical-align: middle;
|
|
@@ -2335,34 +2578,34 @@ input[type=radio].retro-input:focus {
|
|
|
2335
2578
|
align-items: center;
|
|
2336
2579
|
justify-content: space-between;
|
|
2337
2580
|
padding: 8px 24px;
|
|
2338
|
-
background: var(--retro-
|
|
2339
|
-
color:
|
|
2581
|
+
background: var(--retro-modal-header-bg);
|
|
2582
|
+
color: var(--retro-modal-header-text);
|
|
2340
2583
|
border-top: 2px solid var(--retro-border-light);
|
|
2341
2584
|
border-bottom: 2px solid var(--retro-border-dark);
|
|
2342
|
-
border-left: 8px solid var(--retro-
|
|
2585
|
+
border-left: 8px solid var(--retro-modal-header-bg);
|
|
2343
2586
|
border-radius: 4px 4px 0 0 !important;
|
|
2344
|
-
font-family:
|
|
2345
|
-
font-size:
|
|
2587
|
+
font-family: var(--retro-font-heading);
|
|
2588
|
+
font-size: var(--retro-font-size-lg);
|
|
2346
2589
|
font-weight: bold;
|
|
2347
2590
|
line-height: 1.5;
|
|
2348
2591
|
user-select: none;
|
|
2349
2592
|
letter-spacing: 0.5px;
|
|
2350
|
-
text-shadow: 1px 1px 0
|
|
2593
|
+
text-shadow: 1px 1px 0 rgba(var(--retro-black-rgb), 0.8), 0 1px 0 rgba(var(--retro-black-rgb), 0.8);
|
|
2351
2594
|
}
|
|
2352
2595
|
.retro-modal-close {
|
|
2353
2596
|
display: flex;
|
|
2354
2597
|
align-items: center;
|
|
2355
2598
|
justify-content: center;
|
|
2356
2599
|
margin-left: var(--retro-spacing-sm);
|
|
2357
|
-
background:
|
|
2358
|
-
border: 2px outset
|
|
2600
|
+
background: var(--retro-light);
|
|
2601
|
+
border: 2px outset var(--retro-border-light);
|
|
2359
2602
|
box-shadow: none;
|
|
2360
2603
|
width: 22px;
|
|
2361
2604
|
height: 22px;
|
|
2362
2605
|
padding: 0;
|
|
2363
|
-
font-size:
|
|
2606
|
+
font-size: var(--retro-font-size-xl);
|
|
2364
2607
|
line-height: 1;
|
|
2365
|
-
color:
|
|
2608
|
+
color: var(--retro-text);
|
|
2366
2609
|
text-shadow: none;
|
|
2367
2610
|
cursor: pointer;
|
|
2368
2611
|
border-radius: 2px;
|
|
@@ -2370,12 +2613,12 @@ input[type=radio].retro-input:focus {
|
|
|
2370
2613
|
transition: background 0.1s, border 0.1s;
|
|
2371
2614
|
}
|
|
2372
2615
|
.retro-modal-close:hover {
|
|
2373
|
-
background:
|
|
2374
|
-
border: 2px inset
|
|
2616
|
+
background: var(--retro-gray-100);
|
|
2617
|
+
border: 2px inset var(--retro-border-light);
|
|
2375
2618
|
}
|
|
2376
2619
|
.retro-modal-close:active {
|
|
2377
|
-
background:
|
|
2378
|
-
border: 2px inset
|
|
2620
|
+
background: var(--retro-border-medium);
|
|
2621
|
+
border: 2px inset var(--retro-border-dark);
|
|
2379
2622
|
}
|
|
2380
2623
|
.retro-modal-body {
|
|
2381
2624
|
position: relative;
|
|
@@ -2414,7 +2657,7 @@ input[type=radio].retro-input:focus {
|
|
|
2414
2657
|
left: 0;
|
|
2415
2658
|
right: 0;
|
|
2416
2659
|
bottom: 0;
|
|
2417
|
-
background: rgba(
|
|
2660
|
+
background: rgba(var(--retro-black-rgb), 0.5);
|
|
2418
2661
|
z-index: 1040;
|
|
2419
2662
|
}
|
|
2420
2663
|
.retro-modal-scroll {
|
|
@@ -2439,18 +2682,18 @@ input[type=radio].retro-input:focus {
|
|
|
2439
2682
|
.retro-modal-header h4,
|
|
2440
2683
|
.retro-modal-header h5,
|
|
2441
2684
|
.retro-modal-header h6 {
|
|
2442
|
-
color:
|
|
2443
|
-
font-size:
|
|
2685
|
+
color: var(--retro-modal-header-text);
|
|
2686
|
+
font-size: var(--retro-font-size-xl);
|
|
2444
2687
|
font-weight: bold;
|
|
2445
2688
|
margin: 0;
|
|
2446
2689
|
font-family: inherit;
|
|
2447
|
-
text-shadow: 1px 1px 0
|
|
2690
|
+
text-shadow: 1px 1px 0 rgba(var(--retro-black-rgb), 0.8), 0 1px 0 rgba(var(--retro-black-rgb), 0.8);
|
|
2448
2691
|
}
|
|
2449
2692
|
|
|
2450
2693
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
2451
2694
|
/* Main SCSS file that imports all components */
|
|
2452
2695
|
/* Core */
|
|
2453
|
-
/*
|
|
2696
|
+
/* Base Styles */
|
|
2454
2697
|
/* Retro Nav - Win9x Style Only */
|
|
2455
2698
|
/**
|
|
2456
2699
|
* @name Retro Navigation
|
|
@@ -2474,7 +2717,7 @@ input[type=radio].retro-input:focus {
|
|
|
2474
2717
|
border: 2px solid var(--retro-border-dark);
|
|
2475
2718
|
border-radius: 0;
|
|
2476
2719
|
box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-medium);
|
|
2477
|
-
font-family:
|
|
2720
|
+
font-family: var(--retro-font);
|
|
2478
2721
|
transition: none;
|
|
2479
2722
|
}
|
|
2480
2723
|
|
|
@@ -2486,7 +2729,7 @@ input[type=radio].retro-input:focus {
|
|
|
2486
2729
|
border-radius: 0;
|
|
2487
2730
|
background: var(--retro-light);
|
|
2488
2731
|
border-right: 1px solid var(--retro-border-medium);
|
|
2489
|
-
font-family:
|
|
2732
|
+
font-family: var(--retro-font);
|
|
2490
2733
|
transition: none;
|
|
2491
2734
|
}
|
|
2492
2735
|
.retro-nav-item:hover, .retro-tab:hover {
|
|
@@ -2500,50 +2743,59 @@ input[type=radio].retro-input:focus {
|
|
|
2500
2743
|
outline: 2px solid var(--retro-border-light);
|
|
2501
2744
|
outline-offset: -2px;
|
|
2502
2745
|
}
|
|
2746
|
+
.retro-nav-item:focus-visible, .retro-tab:focus-visible {
|
|
2747
|
+
z-index: 2;
|
|
2748
|
+
}
|
|
2503
2749
|
.retro-nav-item:focus, .retro-tab:focus {
|
|
2504
|
-
outline: 2px
|
|
2750
|
+
outline: 2px solid var(--retro-primary);
|
|
2751
|
+
outline-offset: 2px;
|
|
2752
|
+
}
|
|
2753
|
+
.retro-nav-item:focus:not(:focus-visible), .retro-tab:focus:not(:focus-visible) {
|
|
2754
|
+
outline: none;
|
|
2755
|
+
}
|
|
2756
|
+
.retro-nav-item:focus-visible, .retro-tab:focus-visible {
|
|
2757
|
+
outline: 2px solid var(--retro-primary);
|
|
2505
2758
|
outline-offset: 2px;
|
|
2506
|
-
z-index: 2;
|
|
2507
2759
|
}
|
|
2508
2760
|
|
|
2509
2761
|
.retro-tab {
|
|
2510
2762
|
border-radius: 4px 4px 0 0;
|
|
2511
2763
|
margin-right: -1px;
|
|
2512
2764
|
margin-bottom: 0;
|
|
2513
|
-
background:
|
|
2514
|
-
border: 1px solid
|
|
2765
|
+
background: var(--retro-light);
|
|
2766
|
+
border: 1px solid var(--retro-border-dark);
|
|
2515
2767
|
border-bottom: none;
|
|
2516
2768
|
position: relative;
|
|
2517
2769
|
z-index: 1;
|
|
2518
2770
|
min-width: 80px;
|
|
2519
2771
|
height: 32px;
|
|
2520
2772
|
box-shadow: none;
|
|
2521
|
-
font-family:
|
|
2522
|
-
font-size:
|
|
2773
|
+
font-family: var(--retro-font);
|
|
2774
|
+
font-size: var(--retro-font-size-lg);
|
|
2523
2775
|
font-weight: normal;
|
|
2524
|
-
color:
|
|
2776
|
+
color: var(--retro-black);
|
|
2525
2777
|
transition: background 0.2s, color 0.2s;
|
|
2526
2778
|
text-shadow: none;
|
|
2527
|
-
border-left: 1px solid
|
|
2528
|
-
border-top: 1px solid
|
|
2529
|
-
border-right: 1px solid
|
|
2530
|
-
border-bottom: 1px solid
|
|
2779
|
+
border-left: 1px solid var(--retro-border-light);
|
|
2780
|
+
border-top: 1px solid var(--retro-border-light);
|
|
2781
|
+
border-right: 1px solid var(--retro-border-dark);
|
|
2782
|
+
border-bottom: 1px solid var(--retro-border-dark);
|
|
2531
2783
|
}
|
|
2532
2784
|
.retro-tab.active {
|
|
2533
|
-
background:
|
|
2534
|
-
color:
|
|
2785
|
+
background: var(--retro-white);
|
|
2786
|
+
color: var(--retro-black);
|
|
2535
2787
|
font-weight: normal;
|
|
2536
|
-
border-left: 1px solid
|
|
2537
|
-
border-top: 2px solid
|
|
2538
|
-
border-right: 1px solid
|
|
2788
|
+
border-left: 1px solid var(--retro-border-dark);
|
|
2789
|
+
border-top: 2px solid var(--retro-border-dark);
|
|
2790
|
+
border-right: 1px solid var(--retro-border-dark);
|
|
2539
2791
|
border-bottom: none;
|
|
2540
2792
|
z-index: 2;
|
|
2541
2793
|
box-shadow: none;
|
|
2542
2794
|
text-shadow: none;
|
|
2543
2795
|
}
|
|
2544
2796
|
.retro-tab:hover:not(.active) {
|
|
2545
|
-
background:
|
|
2546
|
-
color:
|
|
2797
|
+
background: var(--retro-border-light);
|
|
2798
|
+
color: var(--retro-primary);
|
|
2547
2799
|
}
|
|
2548
2800
|
|
|
2549
2801
|
.retro-nav-tabs {
|
|
@@ -2561,18 +2813,18 @@ input[type=radio].retro-input:focus {
|
|
|
2561
2813
|
display: flex;
|
|
2562
2814
|
flex-direction: column;
|
|
2563
2815
|
width: max-content;
|
|
2564
|
-
border: 2px solid
|
|
2565
|
-
background:
|
|
2816
|
+
border: 2px solid var(--retro-border-dark);
|
|
2817
|
+
background: var(--retro-light);
|
|
2566
2818
|
padding: 0;
|
|
2567
2819
|
margin: 0;
|
|
2568
2820
|
list-style: none;
|
|
2569
|
-
box-shadow: inset 1px 1px 0
|
|
2821
|
+
box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-medium);
|
|
2570
2822
|
}
|
|
2571
2823
|
|
|
2572
2824
|
.retro-nav-vertical .retro-nav-item, .retro-nav-vertical .retro-tab {
|
|
2573
2825
|
display: block;
|
|
2574
2826
|
border-right: none;
|
|
2575
|
-
border-bottom: 1px solid
|
|
2827
|
+
border-bottom: 1px solid var(--retro-border-medium);
|
|
2576
2828
|
border-radius: 0;
|
|
2577
2829
|
width: 100%;
|
|
2578
2830
|
}
|
|
@@ -2592,30 +2844,31 @@ input[type=radio].retro-input:focus {
|
|
|
2592
2844
|
|
|
2593
2845
|
.retro-nav-pills .retro-nav-item, .retro-nav-pills .retro-tab {
|
|
2594
2846
|
border-radius: 999px;
|
|
2595
|
-
background:
|
|
2596
|
-
border: 1px solid
|
|
2847
|
+
background: var(--retro-light);
|
|
2848
|
+
border: 1px solid var(--retro-border-medium);
|
|
2597
2849
|
margin: 0 2px;
|
|
2598
2850
|
padding: 8px 24px;
|
|
2599
2851
|
transition: background 0.2s, color 0.2s;
|
|
2852
|
+
color: var(--retro-black);
|
|
2600
2853
|
}
|
|
2601
2854
|
.retro-nav-pills .retro-nav-item:hover, .retro-nav-pills .retro-tab:hover {
|
|
2602
|
-
background:
|
|
2603
|
-
color:
|
|
2855
|
+
background: var(--retro-primary);
|
|
2856
|
+
color: var(--retro-white);
|
|
2604
2857
|
}
|
|
2605
2858
|
.retro-nav-pills .retro-nav-item.active, .retro-nav-pills .active.retro-tab {
|
|
2606
|
-
background:
|
|
2607
|
-
color:
|
|
2859
|
+
background: var(--retro-primary);
|
|
2860
|
+
color: var(--retro-white);
|
|
2608
2861
|
font-weight: bold;
|
|
2609
|
-
box-shadow: 0 1px 4px
|
|
2862
|
+
box-shadow: 0 1px 4px rgba(var(--retro-primary-rgb), 0.35) inset;
|
|
2610
2863
|
}
|
|
2611
2864
|
|
|
2612
2865
|
.retro-tab-list {
|
|
2613
2866
|
display: flex;
|
|
2614
2867
|
align-items: flex-end;
|
|
2615
|
-
background:
|
|
2616
|
-
border-left: 1px solid
|
|
2617
|
-
border-top: 1px solid
|
|
2618
|
-
border-right: 1px solid
|
|
2868
|
+
background: var(--retro-light);
|
|
2869
|
+
border-left: 1px solid var(--retro-border-dark);
|
|
2870
|
+
border-top: 1px solid var(--retro-border-dark);
|
|
2871
|
+
border-right: 1px solid var(--retro-border-light);
|
|
2619
2872
|
padding: 0 2px;
|
|
2620
2873
|
height: 32px;
|
|
2621
2874
|
box-shadow: none;
|
|
@@ -2626,11 +2879,11 @@ input[type=radio].retro-input:focus {
|
|
|
2626
2879
|
flex-wrap: wrap;
|
|
2627
2880
|
padding: 2px;
|
|
2628
2881
|
margin: 0;
|
|
2629
|
-
background:
|
|
2630
|
-
border: 2px solid
|
|
2882
|
+
background: var(--retro-light);
|
|
2883
|
+
border: 2px solid var(--retro-border-dark);
|
|
2631
2884
|
border-radius: 0;
|
|
2632
|
-
box-shadow: inset 1px 1px 0
|
|
2633
|
-
font-family:
|
|
2885
|
+
box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-medium);
|
|
2886
|
+
font-family: var(--retro-font);
|
|
2634
2887
|
}
|
|
2635
2888
|
.retro-nav-toolbar .retro-nav-item, .retro-nav-toolbar .retro-tab {
|
|
2636
2889
|
display: flex;
|
|
@@ -2640,33 +2893,33 @@ input[type=radio].retro-input:focus {
|
|
|
2640
2893
|
height: 36px;
|
|
2641
2894
|
padding: 2px 10px;
|
|
2642
2895
|
margin: 2px;
|
|
2643
|
-
color:
|
|
2896
|
+
color: var(--retro-black);
|
|
2644
2897
|
text-decoration: none;
|
|
2645
|
-
background:
|
|
2898
|
+
background: var(--retro-light);
|
|
2646
2899
|
border: 2px solid transparent;
|
|
2647
2900
|
border-radius: 0;
|
|
2648
2901
|
text-align: center;
|
|
2649
2902
|
}
|
|
2650
2903
|
.retro-nav-toolbar .retro-nav-item:hover, .retro-nav-toolbar .retro-tab:hover {
|
|
2651
|
-
background:
|
|
2652
|
-
border: 2px solid
|
|
2653
|
-
border-right: 2px solid
|
|
2654
|
-
border-bottom: 2px solid
|
|
2655
|
-
border-left: 2px solid
|
|
2656
|
-
border-top: 2px solid
|
|
2904
|
+
background: var(--retro-white);
|
|
2905
|
+
border: 2px solid var(--retro-border-medium);
|
|
2906
|
+
border-right: 2px solid var(--retro-border-dark);
|
|
2907
|
+
border-bottom: 2px solid var(--retro-border-dark);
|
|
2908
|
+
border-left: 2px solid var(--retro-border-light);
|
|
2909
|
+
border-top: 2px solid var(--retro-border-light);
|
|
2657
2910
|
}
|
|
2658
2911
|
.retro-nav-toolbar .retro-nav-item.active, .retro-nav-toolbar .active.retro-tab {
|
|
2659
|
-
background:
|
|
2660
|
-
border: 2px solid
|
|
2661
|
-
border-right: 2px solid
|
|
2662
|
-
border-bottom: 2px solid
|
|
2663
|
-
border-left: 2px solid
|
|
2664
|
-
border-top: 2px solid
|
|
2665
|
-
color:
|
|
2912
|
+
background: var(--retro-light);
|
|
2913
|
+
border: 2px solid var(--retro-border-medium);
|
|
2914
|
+
border-right: 2px solid var(--retro-border-light);
|
|
2915
|
+
border-bottom: 2px solid var(--retro-border-light);
|
|
2916
|
+
border-left: 2px solid var(--retro-border-dark);
|
|
2917
|
+
border-top: 2px solid var(--retro-border-dark);
|
|
2918
|
+
color: var(--retro-black);
|
|
2666
2919
|
font-weight: normal;
|
|
2667
2920
|
}
|
|
2668
2921
|
.retro-nav-toolbar .retro-nav-item .retro-nav-icon, .retro-nav-toolbar .retro-tab .retro-nav-icon {
|
|
2669
|
-
font-size:
|
|
2922
|
+
font-size: var(--retro-font-size-xl);
|
|
2670
2923
|
margin-right: 4px;
|
|
2671
2924
|
}
|
|
2672
2925
|
.retro-nav-toolbar.retro-nav-icons .retro-nav-item, .retro-nav-toolbar.retro-nav-icons .retro-tab {
|
|
@@ -2680,8 +2933,8 @@ input[type=radio].retro-input:focus {
|
|
|
2680
2933
|
width: 1px;
|
|
2681
2934
|
height: 30px;
|
|
2682
2935
|
margin: 3px 4px;
|
|
2683
|
-
background:
|
|
2684
|
-
box-shadow: 1px 0 0
|
|
2936
|
+
background: var(--retro-border-medium);
|
|
2937
|
+
box-shadow: 1px 0 0 var(--retro-border-light);
|
|
2685
2938
|
}
|
|
2686
2939
|
|
|
2687
2940
|
.retro-nav-tabbed {
|
|
@@ -2690,27 +2943,29 @@ input[type=radio].retro-input:focus {
|
|
|
2690
2943
|
margin: 0 0 -1px 0;
|
|
2691
2944
|
background: transparent;
|
|
2692
2945
|
border: 0;
|
|
2693
|
-
border-bottom: 2px solid
|
|
2946
|
+
border-bottom: 2px solid var(--retro-border-dark);
|
|
2694
2947
|
box-shadow: none;
|
|
2695
2948
|
position: relative;
|
|
2696
2949
|
z-index: 1;
|
|
2697
2950
|
}
|
|
2698
2951
|
.retro-nav-tabbed .retro-nav-item, .retro-nav-tabbed .retro-tab {
|
|
2699
2952
|
padding: 8px 16px;
|
|
2700
|
-
background:
|
|
2701
|
-
border: 2px solid
|
|
2953
|
+
background: var(--retro-light);
|
|
2954
|
+
border: 2px solid var(--retro-border-dark);
|
|
2702
2955
|
border-bottom: 0;
|
|
2703
2956
|
margin-right: 2px;
|
|
2704
2957
|
position: relative;
|
|
2705
|
-
box-shadow: inset 1px 1px 0
|
|
2958
|
+
box-shadow: inset 1px 1px 0 var(--retro-border-light);
|
|
2959
|
+
color: var(--retro-black);
|
|
2706
2960
|
}
|
|
2707
2961
|
.retro-nav-tabbed .retro-nav-item:hover, .retro-nav-tabbed .retro-tab:hover {
|
|
2708
|
-
background:
|
|
2962
|
+
background: var(--retro-white);
|
|
2963
|
+
color: var(--retro-black);
|
|
2709
2964
|
}
|
|
2710
2965
|
.retro-nav-tabbed .retro-nav-item.active, .retro-nav-tabbed .active.retro-tab {
|
|
2711
|
-
background:
|
|
2712
|
-
color:
|
|
2713
|
-
border-bottom: 2px solid
|
|
2966
|
+
background: var(--retro-white);
|
|
2967
|
+
color: var(--retro-black);
|
|
2968
|
+
border-bottom: 2px solid var(--retro-white);
|
|
2714
2969
|
z-index: 2;
|
|
2715
2970
|
margin-bottom: -2px;
|
|
2716
2971
|
}
|
|
@@ -2722,7 +2977,7 @@ input[type=radio].retro-input:focus {
|
|
|
2722
2977
|
background: transparent;
|
|
2723
2978
|
border: 0;
|
|
2724
2979
|
box-shadow: none;
|
|
2725
|
-
border-bottom: 1px solid
|
|
2980
|
+
border-bottom: 1px solid var(--retro-border-medium);
|
|
2726
2981
|
}
|
|
2727
2982
|
.retro-nav-underlined .retro-nav-item, .retro-nav-underlined .retro-tab {
|
|
2728
2983
|
padding: 10px 16px;
|
|
@@ -2730,6 +2985,7 @@ input[type=radio].retro-input:focus {
|
|
|
2730
2985
|
border: none;
|
|
2731
2986
|
position: relative;
|
|
2732
2987
|
margin-right: 4px;
|
|
2988
|
+
color: var(--retro-black);
|
|
2733
2989
|
}
|
|
2734
2990
|
.retro-nav-underlined .retro-nav-item:after, .retro-nav-underlined .retro-tab:after {
|
|
2735
2991
|
content: "";
|
|
@@ -2742,18 +2998,18 @@ input[type=radio].retro-input:focus {
|
|
|
2742
2998
|
}
|
|
2743
2999
|
.retro-nav-underlined .retro-nav-item:hover, .retro-nav-underlined .retro-tab:hover {
|
|
2744
3000
|
background: transparent;
|
|
2745
|
-
color:
|
|
3001
|
+
color: var(--retro-primary);
|
|
2746
3002
|
}
|
|
2747
3003
|
.retro-nav-underlined .retro-nav-item:hover:after, .retro-nav-underlined .retro-tab:hover:after {
|
|
2748
|
-
background: rgba(
|
|
3004
|
+
background: rgba(var(--retro-primary-rgb), 0.3);
|
|
2749
3005
|
}
|
|
2750
3006
|
.retro-nav-underlined .retro-nav-item.active, .retro-nav-underlined .active.retro-tab {
|
|
2751
3007
|
background: transparent;
|
|
2752
|
-
color:
|
|
3008
|
+
color: var(--retro-primary);
|
|
2753
3009
|
font-weight: normal;
|
|
2754
3010
|
}
|
|
2755
3011
|
.retro-nav-underlined .retro-nav-item.active:after, .retro-nav-underlined .active.retro-tab:after {
|
|
2756
|
-
background:
|
|
3012
|
+
background: var(--retro-primary);
|
|
2757
3013
|
}
|
|
2758
3014
|
|
|
2759
3015
|
.retro-nav-buttons {
|
|
@@ -2766,31 +3022,33 @@ input[type=radio].retro-input:focus {
|
|
|
2766
3022
|
}
|
|
2767
3023
|
.retro-nav-buttons .retro-nav-item, .retro-nav-buttons .retro-tab {
|
|
2768
3024
|
padding: 6px 14px;
|
|
2769
|
-
background:
|
|
2770
|
-
border: 2px solid
|
|
2771
|
-
border-right: 1px solid
|
|
2772
|
-
border-left: 1px solid
|
|
3025
|
+
background: var(--retro-light);
|
|
3026
|
+
border: 2px solid var(--retro-border-dark);
|
|
3027
|
+
border-right: 1px solid var(--retro-border-dark);
|
|
3028
|
+
border-left: 1px solid var(--retro-border-dark);
|
|
2773
3029
|
margin: 0;
|
|
2774
3030
|
position: relative;
|
|
2775
|
-
box-shadow: inset 1px 1px 0
|
|
3031
|
+
box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-medium);
|
|
3032
|
+
color: var(--retro-black);
|
|
2776
3033
|
}
|
|
2777
3034
|
.retro-nav-buttons .retro-nav-item:first-child, .retro-nav-buttons .retro-tab:first-child {
|
|
2778
|
-
border-left: 2px solid
|
|
3035
|
+
border-left: 2px solid var(--retro-border-dark);
|
|
2779
3036
|
border-top-left-radius: 3px;
|
|
2780
3037
|
border-bottom-left-radius: 3px;
|
|
2781
3038
|
}
|
|
2782
3039
|
.retro-nav-buttons .retro-nav-item:last-child, .retro-nav-buttons .retro-tab:last-child {
|
|
2783
|
-
border-right: 2px solid
|
|
3040
|
+
border-right: 2px solid var(--retro-border-dark);
|
|
2784
3041
|
border-top-right-radius: 3px;
|
|
2785
3042
|
border-bottom-right-radius: 3px;
|
|
2786
3043
|
}
|
|
2787
3044
|
.retro-nav-buttons .retro-nav-item:hover, .retro-nav-buttons .retro-tab:hover {
|
|
2788
|
-
background:
|
|
3045
|
+
background: var(--retro-white);
|
|
3046
|
+
color: var(--retro-black);
|
|
2789
3047
|
z-index: 1;
|
|
2790
3048
|
}
|
|
2791
3049
|
.retro-nav-buttons .retro-nav-item.active, .retro-nav-buttons .active.retro-tab {
|
|
2792
|
-
background:
|
|
2793
|
-
color:
|
|
3050
|
+
background: var(--retro-primary);
|
|
3051
|
+
color: var(--retro-white);
|
|
2794
3052
|
z-index: 2;
|
|
2795
3053
|
}
|
|
2796
3054
|
|
|
@@ -2831,12 +3089,12 @@ input[type=radio].retro-input:focus {
|
|
|
2831
3089
|
left: 50%;
|
|
2832
3090
|
top: 50%;
|
|
2833
3091
|
transform: translate(-50%, -50%);
|
|
2834
|
-
font-size:
|
|
2835
|
-
color: var(--retro-
|
|
2836
|
-
font-family:
|
|
3092
|
+
font-size: var(--retro-font-size-sm);
|
|
3093
|
+
color: var(--retro-text);
|
|
3094
|
+
font-family: var(--retro-font);
|
|
2837
3095
|
pointer-events: none;
|
|
2838
3096
|
user-select: none;
|
|
2839
|
-
text-shadow:
|
|
3097
|
+
text-shadow: 0 0 2px var(--retro-progress-bg), 0 0 2px var(--retro-progress-bg), 0 0 4px var(--retro-progress-bg), 1px 1px 0 var(--retro-progress-bg);
|
|
2840
3098
|
}
|
|
2841
3099
|
|
|
2842
3100
|
.retro-progress-bar-striped {
|
|
@@ -2859,19 +3117,19 @@ input[type=radio].retro-input:focus {
|
|
|
2859
3117
|
min-width: 26px;
|
|
2860
3118
|
min-height: 18px;
|
|
2861
3119
|
padding: 2px 10px;
|
|
2862
|
-
font-size:
|
|
2863
|
-
font-family:
|
|
2864
|
-
font-weight:
|
|
3120
|
+
font-size: var(--retro-font-size-sm);
|
|
3121
|
+
font-family: var(--retro-font-heading);
|
|
3122
|
+
font-weight: var(--retro-font-weight-bold);
|
|
2865
3123
|
letter-spacing: 0.3px;
|
|
2866
3124
|
text-transform: uppercase;
|
|
2867
3125
|
color: var(--retro-badge-text);
|
|
2868
3126
|
background: var(--retro-badge-bg);
|
|
2869
|
-
border: 1px solid
|
|
3127
|
+
border: 1px solid var(--retro-border-dark);
|
|
2870
3128
|
border-radius: 0;
|
|
2871
|
-
box-shadow: 0 0 0 2px rgba(
|
|
2872
|
-
text-shadow:
|
|
3129
|
+
box-shadow: 0 0 0 2px rgba(var(--retro-white-rgb), 0.1), inset 0 0 6px rgba(var(--retro-black-rgb), 0.8);
|
|
3130
|
+
text-shadow: none;
|
|
2873
3131
|
margin: 0.2em 0.4em 0.2em 0;
|
|
2874
|
-
transition:
|
|
3132
|
+
transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, filter 0.15s ease;
|
|
2875
3133
|
position: relative;
|
|
2876
3134
|
overflow: hidden;
|
|
2877
3135
|
}
|
|
@@ -2882,130 +3140,130 @@ input[type=radio].retro-input:focus {
|
|
|
2882
3140
|
left: 0;
|
|
2883
3141
|
right: 0;
|
|
2884
3142
|
height: 40%;
|
|
2885
|
-
background: linear-gradient(to bottom, rgba(
|
|
3143
|
+
background: linear-gradient(to bottom, rgba(var(--retro-white-rgb), 0.15), rgba(var(--retro-white-rgb), 0));
|
|
2886
3144
|
pointer-events: none;
|
|
2887
3145
|
}
|
|
2888
|
-
.retro-badge:hover, .retro-badge:focus {
|
|
3146
|
+
.retro-badge:hover, .retro-badge:focus-visible {
|
|
2889
3147
|
transform: translateY(-1px) scale(1.05);
|
|
2890
|
-
box-shadow: 0 0 0 2px rgba(
|
|
3148
|
+
box-shadow: 0 0 0 2px rgba(var(--retro-white-rgb), 0.2), inset 0 0 10px rgba(var(--retro-black-rgb), 0.8), 0 0 5px rgba(var(--retro-white-rgb), 0.1);
|
|
2891
3149
|
filter: brightness(1.1);
|
|
2892
3150
|
}
|
|
2893
3151
|
.retro-badge:active {
|
|
2894
3152
|
transform: translateY(1px) scale(0.98);
|
|
2895
|
-
box-shadow: 0 0 0 2px rgba(
|
|
3153
|
+
box-shadow: 0 0 0 2px rgba(var(--retro-white-rgb), 0.1), inset 0 0 8px rgba(var(--retro-black-rgb), 0.9);
|
|
2896
3154
|
filter: brightness(0.9);
|
|
2897
3155
|
}
|
|
2898
3156
|
|
|
2899
3157
|
.retro-badge-primary {
|
|
2900
|
-
background:
|
|
2901
|
-
color:
|
|
2902
|
-
border: 2px solid
|
|
2903
|
-
box-shadow: inset 1px 1px 0
|
|
2904
|
-
text-shadow:
|
|
2905
|
-
}
|
|
2906
|
-
.retro-badge-primary:hover, .retro-badge-primary:focus {
|
|
2907
|
-
background:
|
|
2908
|
-
box-shadow: inset 2px 2px 0
|
|
3158
|
+
background: var(--retro-primary);
|
|
3159
|
+
color: var(--retro-primary-fg);
|
|
3160
|
+
border: 2px solid var(--retro-primary-active);
|
|
3161
|
+
box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-primary-active), 1px 1px 0 var(--retro-primary-hover);
|
|
3162
|
+
text-shadow: none;
|
|
3163
|
+
}
|
|
3164
|
+
.retro-badge-primary:hover, .retro-badge-primary:focus-visible {
|
|
3165
|
+
background: var(--retro-primary-hover);
|
|
3166
|
+
box-shadow: inset 2px 2px 0 var(--retro-border-light), inset -2px -2px 0 var(--retro-primary-active), 2px 2px 0 var(--retro-primary-hover);
|
|
2909
3167
|
filter: brightness(1.08);
|
|
2910
3168
|
}
|
|
2911
3169
|
.retro-badge-primary:active {
|
|
2912
|
-
background:
|
|
2913
|
-
box-shadow: inset 1px 1px 0
|
|
3170
|
+
background: var(--retro-primary-active);
|
|
3171
|
+
box-shadow: inset 1px 1px 0 var(--retro-primary-active), inset -1px -1px 0 var(--retro-border-light);
|
|
2914
3172
|
filter: brightness(0.95);
|
|
2915
3173
|
}
|
|
2916
3174
|
|
|
2917
3175
|
.retro-badge-success {
|
|
2918
|
-
background:
|
|
2919
|
-
color:
|
|
2920
|
-
border: 2px solid
|
|
2921
|
-
box-shadow: inset 1px 1px 0
|
|
2922
|
-
text-shadow:
|
|
2923
|
-
}
|
|
2924
|
-
.retro-badge-success:hover, .retro-badge-success:focus {
|
|
2925
|
-
background:
|
|
2926
|
-
box-shadow: inset 2px 2px 0
|
|
3176
|
+
background: var(--retro-success);
|
|
3177
|
+
color: var(--retro-success-fg);
|
|
3178
|
+
border: 2px solid var(--retro-success-active);
|
|
3179
|
+
box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-success-active), 1px 1px 0 var(--retro-success-hover);
|
|
3180
|
+
text-shadow: none;
|
|
3181
|
+
}
|
|
3182
|
+
.retro-badge-success:hover, .retro-badge-success:focus-visible {
|
|
3183
|
+
background: var(--retro-success-hover);
|
|
3184
|
+
box-shadow: inset 2px 2px 0 var(--retro-border-light), inset -2px -2px 0 var(--retro-success-active), 2px 2px 0 var(--retro-success-hover);
|
|
2927
3185
|
filter: brightness(1.08);
|
|
2928
3186
|
}
|
|
2929
3187
|
.retro-badge-success:active {
|
|
2930
|
-
background:
|
|
2931
|
-
box-shadow: inset 1px 1px 0
|
|
3188
|
+
background: var(--retro-success-active);
|
|
3189
|
+
box-shadow: inset 1px 1px 0 var(--retro-success-active), inset -1px -1px 0 var(--retro-border-light);
|
|
2932
3190
|
filter: brightness(0.95);
|
|
2933
3191
|
}
|
|
2934
3192
|
|
|
2935
3193
|
.retro-badge-danger {
|
|
2936
|
-
background:
|
|
2937
|
-
color:
|
|
2938
|
-
border: 2px solid
|
|
2939
|
-
box-shadow: inset 1px 1px 0
|
|
2940
|
-
text-shadow:
|
|
2941
|
-
}
|
|
2942
|
-
.retro-badge-danger:hover, .retro-badge-danger:focus {
|
|
2943
|
-
background:
|
|
2944
|
-
box-shadow: inset 2px 2px 0
|
|
3194
|
+
background: var(--retro-danger);
|
|
3195
|
+
color: var(--retro-danger-fg);
|
|
3196
|
+
border: 2px solid var(--retro-danger-active);
|
|
3197
|
+
box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-danger-active), 1px 1px 0 var(--retro-danger-hover);
|
|
3198
|
+
text-shadow: none;
|
|
3199
|
+
}
|
|
3200
|
+
.retro-badge-danger:hover, .retro-badge-danger:focus-visible {
|
|
3201
|
+
background: var(--retro-danger-hover);
|
|
3202
|
+
box-shadow: inset 2px 2px 0 var(--retro-border-light), inset -2px -2px 0 var(--retro-danger-active), 2px 2px 0 var(--retro-danger-hover);
|
|
2945
3203
|
filter: brightness(1.08);
|
|
2946
3204
|
}
|
|
2947
3205
|
.retro-badge-danger:active {
|
|
2948
|
-
background:
|
|
2949
|
-
box-shadow: inset 1px 1px 0
|
|
3206
|
+
background: var(--retro-danger-active);
|
|
3207
|
+
box-shadow: inset 1px 1px 0 var(--retro-danger-active), inset -1px -1px 0 var(--retro-border-light);
|
|
2950
3208
|
filter: brightness(0.95);
|
|
2951
3209
|
}
|
|
2952
3210
|
|
|
2953
3211
|
.retro-badge-warning {
|
|
2954
|
-
background:
|
|
2955
|
-
color:
|
|
2956
|
-
border: 2px solid
|
|
2957
|
-
box-shadow: inset 1px 1px 0
|
|
2958
|
-
text-shadow:
|
|
2959
|
-
}
|
|
2960
|
-
.retro-badge-warning:hover, .retro-badge-warning:focus {
|
|
2961
|
-
background:
|
|
2962
|
-
box-shadow: inset 2px 2px 0
|
|
3212
|
+
background: var(--retro-warning);
|
|
3213
|
+
color: var(--retro-warning-fg);
|
|
3214
|
+
border: 2px solid var(--retro-warning-active);
|
|
3215
|
+
box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-warning-active), 1px 1px 0 var(--retro-warning-hover);
|
|
3216
|
+
text-shadow: none;
|
|
3217
|
+
}
|
|
3218
|
+
.retro-badge-warning:hover, .retro-badge-warning:focus-visible {
|
|
3219
|
+
background: var(--retro-warning-hover);
|
|
3220
|
+
box-shadow: inset 2px 2px 0 var(--retro-border-light), inset -2px -2px 0 var(--retro-warning-active), 2px 2px 0 var(--retro-warning-hover);
|
|
2963
3221
|
filter: brightness(1.08);
|
|
2964
3222
|
}
|
|
2965
3223
|
.retro-badge-warning:active {
|
|
2966
|
-
background:
|
|
2967
|
-
box-shadow: inset 1px 1px 0
|
|
3224
|
+
background: var(--retro-warning-active);
|
|
3225
|
+
box-shadow: inset 1px 1px 0 var(--retro-warning-active), inset -1px -1px 0 var(--retro-border-light);
|
|
2968
3226
|
filter: brightness(0.95);
|
|
2969
3227
|
}
|
|
2970
3228
|
|
|
2971
3229
|
.retro-badge-info {
|
|
2972
|
-
background:
|
|
2973
|
-
color:
|
|
2974
|
-
border: 2px solid
|
|
2975
|
-
box-shadow: inset 1px 1px 0
|
|
2976
|
-
text-shadow:
|
|
2977
|
-
}
|
|
2978
|
-
.retro-badge-info:hover, .retro-badge-info:focus {
|
|
2979
|
-
background:
|
|
2980
|
-
box-shadow: inset 2px 2px 0
|
|
3230
|
+
background: var(--retro-info);
|
|
3231
|
+
color: var(--retro-info-fg);
|
|
3232
|
+
border: 2px solid var(--retro-info-active);
|
|
3233
|
+
box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-info-active), 1px 1px 0 var(--retro-info-hover);
|
|
3234
|
+
text-shadow: none;
|
|
3235
|
+
}
|
|
3236
|
+
.retro-badge-info:hover, .retro-badge-info:focus-visible {
|
|
3237
|
+
background: var(--retro-info-hover);
|
|
3238
|
+
box-shadow: inset 2px 2px 0 var(--retro-border-light), inset -2px -2px 0 var(--retro-info-active), 2px 2px 0 var(--retro-info-hover);
|
|
2981
3239
|
filter: brightness(1.08);
|
|
2982
3240
|
}
|
|
2983
3241
|
.retro-badge-info:active {
|
|
2984
|
-
background:
|
|
2985
|
-
box-shadow: inset 1px 1px 0
|
|
3242
|
+
background: var(--retro-info-active);
|
|
3243
|
+
box-shadow: inset 1px 1px 0 var(--retro-info-active), inset -1px -1px 0 var(--retro-border-light);
|
|
2986
3244
|
filter: brightness(0.95);
|
|
2987
3245
|
}
|
|
2988
3246
|
|
|
2989
3247
|
.retro-badge-secondary {
|
|
2990
|
-
background:
|
|
2991
|
-
color:
|
|
2992
|
-
border: 2px solid
|
|
2993
|
-
box-shadow: inset 1px 1px 0
|
|
2994
|
-
text-shadow:
|
|
2995
|
-
}
|
|
2996
|
-
.retro-badge-secondary:hover, .retro-badge-secondary:focus {
|
|
2997
|
-
background:
|
|
2998
|
-
box-shadow: inset 2px 2px 0
|
|
3248
|
+
background: var(--retro-gray);
|
|
3249
|
+
color: var(--retro-gray-fg);
|
|
3250
|
+
border: 2px solid var(--retro-gray-active);
|
|
3251
|
+
box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-gray-active), 1px 1px 0 var(--retro-gray-hover);
|
|
3252
|
+
text-shadow: none;
|
|
3253
|
+
}
|
|
3254
|
+
.retro-badge-secondary:hover, .retro-badge-secondary:focus-visible {
|
|
3255
|
+
background: var(--retro-gray-hover);
|
|
3256
|
+
box-shadow: inset 2px 2px 0 var(--retro-border-light), inset -2px -2px 0 var(--retro-gray-active), 2px 2px 0 var(--retro-gray-hover);
|
|
2999
3257
|
filter: brightness(1.08);
|
|
3000
3258
|
}
|
|
3001
3259
|
.retro-badge-secondary:active {
|
|
3002
|
-
background:
|
|
3003
|
-
box-shadow: inset 1px 1px 0
|
|
3260
|
+
background: var(--retro-gray-active);
|
|
3261
|
+
box-shadow: inset 1px 1px 0 var(--retro-gray-active), inset -1px -1px 0 var(--retro-border-light);
|
|
3004
3262
|
filter: brightness(0.95);
|
|
3005
3263
|
}
|
|
3006
3264
|
|
|
3007
3265
|
.retro-badge.retro-badge-xs {
|
|
3008
|
-
font-size:
|
|
3266
|
+
font-size: var(--retro-font-size-xs) !important;
|
|
3009
3267
|
min-width: 16px !important;
|
|
3010
3268
|
min-height: 12px !important;
|
|
3011
3269
|
padding: 1px 4px !important;
|
|
@@ -3013,7 +3271,7 @@ input[type=radio].retro-input:focus {
|
|
|
3013
3271
|
}
|
|
3014
3272
|
|
|
3015
3273
|
.retro-badge.retro-badge-sm {
|
|
3016
|
-
font-size:
|
|
3274
|
+
font-size: var(--retro-font-size-xs) !important;
|
|
3017
3275
|
min-width: 20px !important;
|
|
3018
3276
|
min-height: 14px !important;
|
|
3019
3277
|
padding: 1px 6px !important;
|
|
@@ -3021,7 +3279,7 @@ input[type=radio].retro-input:focus {
|
|
|
3021
3279
|
}
|
|
3022
3280
|
|
|
3023
3281
|
.retro-badge.retro-badge-md {
|
|
3024
|
-
font-size:
|
|
3282
|
+
font-size: var(--retro-font-size-sm) !important;
|
|
3025
3283
|
min-width: 26px !important;
|
|
3026
3284
|
min-height: 18px !important;
|
|
3027
3285
|
padding: 2px 10px !important;
|
|
@@ -3029,7 +3287,7 @@ input[type=radio].retro-input:focus {
|
|
|
3029
3287
|
}
|
|
3030
3288
|
|
|
3031
3289
|
.retro-badge.retro-badge-lg {
|
|
3032
|
-
font-size:
|
|
3290
|
+
font-size: var(--retro-font-size) !important;
|
|
3033
3291
|
min-width: 36px !important;
|
|
3034
3292
|
min-height: 22px !important;
|
|
3035
3293
|
padding: 3px 14px !important;
|
|
@@ -3037,7 +3295,7 @@ input[type=radio].retro-input:focus {
|
|
|
3037
3295
|
}
|
|
3038
3296
|
|
|
3039
3297
|
.retro-badge.retro-badge-xl {
|
|
3040
|
-
font-size:
|
|
3298
|
+
font-size: var(--retro-font-size-lg) !important;
|
|
3041
3299
|
min-width: 46px !important;
|
|
3042
3300
|
min-height: 28px !important;
|
|
3043
3301
|
padding: 4px 18px !important;
|
|
@@ -3045,7 +3303,7 @@ input[type=radio].retro-input:focus {
|
|
|
3045
3303
|
}
|
|
3046
3304
|
|
|
3047
3305
|
.retro-badge.retro-badge-xxl {
|
|
3048
|
-
font-size:
|
|
3306
|
+
font-size: var(--retro-font-size-xl) !important;
|
|
3049
3307
|
min-width: 60px !important;
|
|
3050
3308
|
min-height: 36px !important;
|
|
3051
3309
|
padding: 6px 24px !important;
|
|
@@ -3075,21 +3333,21 @@ input[type=radio].retro-input:focus {
|
|
|
3075
3333
|
}
|
|
3076
3334
|
|
|
3077
3335
|
.retro-badge-pixel {
|
|
3078
|
-
font-family:
|
|
3079
|
-
font-weight:
|
|
3336
|
+
font-family: var(--retro-font-heading);
|
|
3337
|
+
font-weight: var(--retro-font-weight-bold);
|
|
3080
3338
|
image-rendering: pixelated;
|
|
3081
|
-
border: 2px solid
|
|
3339
|
+
border: 2px solid var(--retro-border-dark);
|
|
3082
3340
|
border-radius: 0;
|
|
3083
|
-
box-shadow: 4px 4px 0
|
|
3341
|
+
box-shadow: 4px 4px 0 var(--retro-border-dark);
|
|
3084
3342
|
transform-origin: center;
|
|
3085
3343
|
}
|
|
3086
|
-
.retro-badge-pixel:hover, .retro-badge-pixel:focus {
|
|
3344
|
+
.retro-badge-pixel:hover, .retro-badge-pixel:focus-visible {
|
|
3087
3345
|
transform: translateY(-2px) translateX(-2px);
|
|
3088
|
-
box-shadow: 6px 6px 0
|
|
3346
|
+
box-shadow: 6px 6px 0 var(--retro-border-dark);
|
|
3089
3347
|
}
|
|
3090
3348
|
.retro-badge-pixel:active {
|
|
3091
3349
|
transform: translateY(0) translateX(0);
|
|
3092
|
-
box-shadow: 0 0 0
|
|
3350
|
+
box-shadow: 0 0 0 var(--retro-border-dark);
|
|
3093
3351
|
}
|
|
3094
3352
|
|
|
3095
3353
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
@@ -3144,7 +3402,7 @@ input[type=radio].retro-input:focus {
|
|
|
3144
3402
|
top: 50%;
|
|
3145
3403
|
transform: translateY(-50%);
|
|
3146
3404
|
font-weight: bold;
|
|
3147
|
-
font-size:
|
|
3405
|
+
font-size: var(--retro-font-size-lg);
|
|
3148
3406
|
}
|
|
3149
3407
|
|
|
3150
3408
|
.retro-accordion-content {
|
|
@@ -3173,21 +3431,21 @@ input[type=radio].retro-input:focus {
|
|
|
3173
3431
|
.retro-pagination .retro-btn {
|
|
3174
3432
|
min-width: 36px;
|
|
3175
3433
|
padding: 4px 12px;
|
|
3176
|
-
font-size:
|
|
3434
|
+
font-size: var(--retro-font-size-lg);
|
|
3177
3435
|
border-radius: 2px;
|
|
3178
|
-
border: 2px solid
|
|
3179
|
-
background:
|
|
3180
|
-
color:
|
|
3181
|
-
box-shadow: 1px 1px 0
|
|
3436
|
+
border: 2px solid var(--retro-border-dark);
|
|
3437
|
+
background: var(--retro-light);
|
|
3438
|
+
color: var(--retro-black);
|
|
3439
|
+
box-shadow: 1px 1px 0 var(--retro-border-light);
|
|
3182
3440
|
transition: background 0.2s, color 0.2s;
|
|
3183
3441
|
}
|
|
3184
3442
|
|
|
3185
3443
|
.retro-pagination .retro-btn.active,
|
|
3186
3444
|
.retro-pagination .retro-btn:active {
|
|
3187
|
-
background:
|
|
3188
|
-
color:
|
|
3445
|
+
background: var(--retro-primary);
|
|
3446
|
+
color: var(--retro-white);
|
|
3189
3447
|
font-weight: bold;
|
|
3190
|
-
border-color:
|
|
3448
|
+
border-color: var(--retro-primary);
|
|
3191
3449
|
}
|
|
3192
3450
|
|
|
3193
3451
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
@@ -3196,8 +3454,8 @@ input[type=radio].retro-input:focus {
|
|
|
3196
3454
|
.retro-breadcrumbs {
|
|
3197
3455
|
display: flex;
|
|
3198
3456
|
align-items: center;
|
|
3199
|
-
font-family:
|
|
3200
|
-
font-size:
|
|
3457
|
+
font-family: var(--retro-font);
|
|
3458
|
+
font-size: var(--retro-font-size-lg);
|
|
3201
3459
|
background: var(--retro-card-bg);
|
|
3202
3460
|
padding: 6px 12px;
|
|
3203
3461
|
border-radius: 2px;
|
|
@@ -3227,12 +3485,12 @@ input[type=radio].retro-input:focus {
|
|
|
3227
3485
|
}
|
|
3228
3486
|
|
|
3229
3487
|
.retro-breadcrumb-icon {
|
|
3230
|
-
font-size:
|
|
3488
|
+
font-size: var(--retro-font-size-lg);
|
|
3231
3489
|
margin-right: 2px;
|
|
3232
3490
|
}
|
|
3233
3491
|
|
|
3234
3492
|
.retro-breadcrumb-sep {
|
|
3235
|
-
color:
|
|
3493
|
+
color: var(--retro-text-muted);
|
|
3236
3494
|
margin: 0 2px;
|
|
3237
3495
|
font-weight: bold;
|
|
3238
3496
|
}
|
|
@@ -3260,10 +3518,10 @@ input[type=radio].retro-input:focus {
|
|
|
3260
3518
|
border-radius: 2px;
|
|
3261
3519
|
padding: 6px 16px;
|
|
3262
3520
|
font-family: var(--retro-font);
|
|
3263
|
-
font-size:
|
|
3521
|
+
font-size: var(--retro-font-size-lg);
|
|
3264
3522
|
color: var(--retro-dropdown-text);
|
|
3265
3523
|
box-shadow: 1px 1px 0 var(--retro-border-light);
|
|
3266
|
-
transition:
|
|
3524
|
+
transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
|
|
3267
3525
|
min-width: 120px;
|
|
3268
3526
|
}
|
|
3269
3527
|
.retro-dropdown-toggle:hover {
|
|
@@ -3276,7 +3534,7 @@ input[type=radio].retro-input:focus {
|
|
|
3276
3534
|
|
|
3277
3535
|
.retro-dropdown-arrow {
|
|
3278
3536
|
margin-left: 8px;
|
|
3279
|
-
font-size:
|
|
3537
|
+
font-size: var(--retro-font-size);
|
|
3280
3538
|
transition: transform 0.2s ease;
|
|
3281
3539
|
}
|
|
3282
3540
|
.open .retro-dropdown-arrow {
|
|
@@ -3296,7 +3554,7 @@ input[type=radio].retro-input:focus {
|
|
|
3296
3554
|
opacity: 0;
|
|
3297
3555
|
visibility: hidden;
|
|
3298
3556
|
transform: translateY(-10px);
|
|
3299
|
-
transition:
|
|
3557
|
+
transition: opacity 0.2s ease, transform 0.2s ease;
|
|
3300
3558
|
}
|
|
3301
3559
|
.retro-dropdown.open > .retro-dropdown-menu {
|
|
3302
3560
|
opacity: 1;
|
|
@@ -3310,10 +3568,10 @@ input[type=radio].retro-input:focus {
|
|
|
3310
3568
|
color: var(--retro-dropdown-text);
|
|
3311
3569
|
text-decoration: none;
|
|
3312
3570
|
font-family: var(--retro-font);
|
|
3313
|
-
font-size:
|
|
3571
|
+
font-size: var(--retro-font-size-lg);
|
|
3314
3572
|
background: var(--retro-dropdown-bg);
|
|
3315
3573
|
border-bottom: 1px solid var(--retro-border-light);
|
|
3316
|
-
transition:
|
|
3574
|
+
transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
|
|
3317
3575
|
white-space: nowrap;
|
|
3318
3576
|
cursor: pointer;
|
|
3319
3577
|
}
|
|
@@ -3350,7 +3608,7 @@ input[type=radio].retro-input:focus {
|
|
|
3350
3608
|
}
|
|
3351
3609
|
|
|
3352
3610
|
.retro-file-filename {
|
|
3353
|
-
font-size:
|
|
3611
|
+
font-size: var(--retro-font-size);
|
|
3354
3612
|
color: var(--retro-input-text);
|
|
3355
3613
|
margin-left: 8px;
|
|
3356
3614
|
}
|
|
@@ -3362,16 +3620,16 @@ input[type=radio].retro-input:focus {
|
|
|
3362
3620
|
background: var(--retro-input-bg);
|
|
3363
3621
|
border: 1px solid var(--retro-border-medium);
|
|
3364
3622
|
border-radius: 4px;
|
|
3365
|
-
color: var(--retro-
|
|
3366
|
-
font-size:
|
|
3623
|
+
color: var(--retro-text-muted);
|
|
3624
|
+
font-size: var(--retro-font-size-lg);
|
|
3367
3625
|
margin-top: 8px;
|
|
3368
3626
|
transition: background 0.2s, border 0.2s;
|
|
3369
3627
|
}
|
|
3370
3628
|
|
|
3371
3629
|
.retro-file-drop.dragover {
|
|
3372
|
-
background:
|
|
3373
|
-
color:
|
|
3374
|
-
border-color:
|
|
3630
|
+
background: var(--retro-primary);
|
|
3631
|
+
color: var(--retro-primary-fg);
|
|
3632
|
+
border-color: var(--retro-primary);
|
|
3375
3633
|
}
|
|
3376
3634
|
|
|
3377
3635
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
@@ -3403,7 +3661,7 @@ input[type=radio].retro-input:focus {
|
|
|
3403
3661
|
border: 1px solid var(--retro-border-medium);
|
|
3404
3662
|
border-radius: 12px;
|
|
3405
3663
|
padding: 3px 12px 3px 10px;
|
|
3406
|
-
font-size:
|
|
3664
|
+
font-size: var(--retro-font-size);
|
|
3407
3665
|
margin-right: 4px;
|
|
3408
3666
|
margin-bottom: 4px;
|
|
3409
3667
|
box-shadow: 1px 1px 0 var(--retro-border-light);
|
|
@@ -3411,21 +3669,21 @@ input[type=radio].retro-input:focus {
|
|
|
3411
3669
|
|
|
3412
3670
|
.retro-tag-remove {
|
|
3413
3671
|
margin-left: 8px;
|
|
3414
|
-
color:
|
|
3672
|
+
color: var(--retro-danger-text);
|
|
3415
3673
|
cursor: pointer;
|
|
3416
3674
|
font-weight: bold;
|
|
3417
|
-
font-size:
|
|
3675
|
+
font-size: var(--retro-font-size-lg);
|
|
3418
3676
|
transition: color 0.2s;
|
|
3419
3677
|
}
|
|
3420
3678
|
.retro-tag-remove:hover {
|
|
3421
|
-
color:
|
|
3679
|
+
color: var(--retro-primary-text);
|
|
3422
3680
|
}
|
|
3423
3681
|
|
|
3424
3682
|
.retro-tag-text {
|
|
3425
3683
|
border: none;
|
|
3426
3684
|
outline: none;
|
|
3427
3685
|
background: transparent;
|
|
3428
|
-
font-size:
|
|
3686
|
+
font-size: var(--retro-font-size);
|
|
3429
3687
|
min-width: 80px;
|
|
3430
3688
|
margin-left: 4px;
|
|
3431
3689
|
padding: 2px 0;
|
|
@@ -3446,8 +3704,8 @@ input[type=radio].retro-input:focus {
|
|
|
3446
3704
|
}
|
|
3447
3705
|
|
|
3448
3706
|
.retro-search-icon {
|
|
3449
|
-
font-size:
|
|
3450
|
-
color:
|
|
3707
|
+
font-size: var(--retro-font-size-xl);
|
|
3708
|
+
color: var(--retro-text);
|
|
3451
3709
|
margin-right: 8px;
|
|
3452
3710
|
}
|
|
3453
3711
|
|
|
@@ -3455,7 +3713,7 @@ input[type=radio].retro-input:focus {
|
|
|
3455
3713
|
border: none;
|
|
3456
3714
|
outline: none;
|
|
3457
3715
|
background: transparent;
|
|
3458
|
-
font-size:
|
|
3716
|
+
font-size: var(--retro-font-size-lg);
|
|
3459
3717
|
flex: 1;
|
|
3460
3718
|
padding: 4px 0;
|
|
3461
3719
|
color: var(--retro-input-text);
|
|
@@ -3480,7 +3738,7 @@ input[type=radio].retro-input:focus {
|
|
|
3480
3738
|
|
|
3481
3739
|
.retro-search-suggestion {
|
|
3482
3740
|
padding: 8px 12px;
|
|
3483
|
-
font-size:
|
|
3741
|
+
font-size: var(--retro-font-size-lg);
|
|
3484
3742
|
color: var(--retro-input-text);
|
|
3485
3743
|
cursor: pointer;
|
|
3486
3744
|
border-bottom: 1px solid var(--retro-border-light);
|
|
@@ -3504,15 +3762,15 @@ input[type=radio].retro-input:focus {
|
|
|
3504
3762
|
}
|
|
3505
3763
|
|
|
3506
3764
|
.retro-rating-star {
|
|
3507
|
-
font-size:
|
|
3508
|
-
color:
|
|
3765
|
+
font-size: var(--retro-font-size-3xl);
|
|
3766
|
+
color: var(--retro-border-dark);
|
|
3509
3767
|
cursor: pointer;
|
|
3510
3768
|
transition: color 0.2s, text-shadow 0.2s, border 0.2s;
|
|
3511
|
-
text-shadow: 1px 1px 0
|
|
3769
|
+
text-shadow: 1px 1px 0 var(--retro-border-light);
|
|
3512
3770
|
user-select: none;
|
|
3513
|
-
border: 2px solid
|
|
3771
|
+
border: 2px solid var(--retro-border-dark);
|
|
3514
3772
|
border-radius: 6px;
|
|
3515
|
-
background:
|
|
3773
|
+
background: var(--retro-bg);
|
|
3516
3774
|
padding: 2px 2px 0 2px;
|
|
3517
3775
|
margin-right: 2px;
|
|
3518
3776
|
box-sizing: border-box;
|
|
@@ -3524,17 +3782,17 @@ input[type=radio].retro-input:focus {
|
|
|
3524
3782
|
|
|
3525
3783
|
.retro-rating-star.selected,
|
|
3526
3784
|
.retro-rating-star.active {
|
|
3527
|
-
color:
|
|
3528
|
-
background:
|
|
3529
|
-
border-color:
|
|
3530
|
-
text-shadow: 0 2px 8px
|
|
3785
|
+
color: var(--retro-warning-text);
|
|
3786
|
+
background: rgba(var(--retro-warning-rgb), 0.2);
|
|
3787
|
+
border-color: var(--retro-warning);
|
|
3788
|
+
text-shadow: 0 2px 8px var(--retro-border-light);
|
|
3531
3789
|
}
|
|
3532
3790
|
|
|
3533
3791
|
.retro-rating-star:hover,
|
|
3534
3792
|
.retro-rating-star:hover ~ .retro-rating-star {
|
|
3535
|
-
color:
|
|
3536
|
-
background:
|
|
3537
|
-
border-color:
|
|
3793
|
+
color: var(--retro-warning-text);
|
|
3794
|
+
background: rgba(var(--retro-warning-rgb), 0.2);
|
|
3795
|
+
border-color: var(--retro-warning);
|
|
3538
3796
|
}
|
|
3539
3797
|
|
|
3540
3798
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
@@ -3634,32 +3892,35 @@ input[type=radio].retro-input:focus {
|
|
|
3634
3892
|
padding: 6px 10px;
|
|
3635
3893
|
background: var(--retro-black);
|
|
3636
3894
|
color: var(--retro-white);
|
|
3637
|
-
font-size:
|
|
3895
|
+
font-size: var(--retro-font-size-sm);
|
|
3638
3896
|
border-radius: 4px;
|
|
3639
3897
|
white-space: nowrap;
|
|
3640
|
-
box-shadow: 3px 3px 0 rgba(
|
|
3898
|
+
box-shadow: 3px 3px 0 rgba(var(--retro-black-rgb), 0.2);
|
|
3641
3899
|
z-index: 1050;
|
|
3642
3900
|
pointer-events: none;
|
|
3643
3901
|
opacity: 0;
|
|
3644
3902
|
visibility: hidden;
|
|
3645
3903
|
transition: opacity 0.2s, visibility 0.2s;
|
|
3646
|
-
font-family:
|
|
3904
|
+
font-family: var(--retro-font);
|
|
3647
3905
|
max-width: 200px;
|
|
3648
3906
|
line-height: 1.4;
|
|
3649
3907
|
/* Arrow */
|
|
3650
|
-
/* Active state */
|
|
3651
|
-
/* Positions */
|
|
3652
|
-
/* Variants */
|
|
3653
3908
|
}
|
|
3654
3909
|
.retro-tooltip::after {
|
|
3655
3910
|
content: "";
|
|
3656
3911
|
position: absolute;
|
|
3657
3912
|
border: 5px solid transparent;
|
|
3658
3913
|
}
|
|
3914
|
+
.retro-tooltip {
|
|
3915
|
+
/* Active state */
|
|
3916
|
+
}
|
|
3659
3917
|
.retro-tooltip.show {
|
|
3660
3918
|
opacity: 1;
|
|
3661
3919
|
visibility: visible;
|
|
3662
3920
|
}
|
|
3921
|
+
.retro-tooltip {
|
|
3922
|
+
/* Positions */
|
|
3923
|
+
}
|
|
3663
3924
|
.retro-tooltip.retro-tooltip-top {
|
|
3664
3925
|
bottom: 100%;
|
|
3665
3926
|
left: 50%;
|
|
@@ -3708,6 +3969,9 @@ input[type=radio].retro-input:focus {
|
|
|
3708
3969
|
transform: translateY(-50%);
|
|
3709
3970
|
border-right-color: var(--retro-black);
|
|
3710
3971
|
}
|
|
3972
|
+
.retro-tooltip {
|
|
3973
|
+
/* Variants */
|
|
3974
|
+
}
|
|
3711
3975
|
.retro-tooltip.retro-tooltip-light {
|
|
3712
3976
|
background: var(--retro-bg);
|
|
3713
3977
|
color: var(--retro-black);
|
|
@@ -3798,11 +4062,11 @@ input[type=radio].retro-input:focus {
|
|
|
3798
4062
|
list-style: none;
|
|
3799
4063
|
padding: 0;
|
|
3800
4064
|
margin: 0 0 var(--retro-spacing-lg) 0;
|
|
3801
|
-
font-size:
|
|
4065
|
+
font-size: var(--retro-font-size);
|
|
3802
4066
|
background: var(--retro-list-bg);
|
|
3803
4067
|
color: var(--retro-list-text);
|
|
3804
4068
|
border-radius: 6px;
|
|
3805
|
-
box-shadow: 0 1px 4px rgba(
|
|
4069
|
+
box-shadow: 0 1px 4px rgba(var(--retro-black-rgb), 0.04);
|
|
3806
4070
|
}
|
|
3807
4071
|
.retro-list li {
|
|
3808
4072
|
padding: var(--retro-spacing-sm) var(--retro-spacing-md);
|
|
@@ -3838,7 +4102,7 @@ input[type=radio].retro-input:focus {
|
|
|
3838
4102
|
.retro-list-bordered {
|
|
3839
4103
|
border: 1px solid var(--retro-border-medium);
|
|
3840
4104
|
background: var(--retro-white);
|
|
3841
|
-
box-shadow: 0 2px 8px rgba(
|
|
4105
|
+
box-shadow: 0 2px 8px rgba(var(--retro-black-rgb), 0.03);
|
|
3842
4106
|
}
|
|
3843
4107
|
.retro-list-bordered li {
|
|
3844
4108
|
border-bottom: 1px solid var(--retro-border-light);
|
|
@@ -3855,10 +4119,10 @@ input[type=radio].retro-input:focus {
|
|
|
3855
4119
|
.retro-list-hover li {
|
|
3856
4120
|
cursor: pointer;
|
|
3857
4121
|
}
|
|
3858
|
-
.retro-list-hover li:hover, .retro-list-hover li:focus {
|
|
4122
|
+
.retro-list-hover li:hover, .retro-list-hover li:focus-visible {
|
|
3859
4123
|
background-color: var(--retro-primary);
|
|
3860
4124
|
color: var(--retro-white);
|
|
3861
|
-
box-shadow: 0 2px 8px rgba(
|
|
4125
|
+
box-shadow: 0 2px 8px rgba(var(--retro-black-rgb), 0.06);
|
|
3862
4126
|
outline: none;
|
|
3863
4127
|
}
|
|
3864
4128
|
|
|
@@ -3895,7 +4159,7 @@ ol.retro-list li::before {
|
|
|
3895
4159
|
display: flex;
|
|
3896
4160
|
align-items: center;
|
|
3897
4161
|
justify-content: center;
|
|
3898
|
-
box-shadow: 0 1px 2px rgba(
|
|
4162
|
+
box-shadow: 0 1px 2px rgba(var(--retro-black-rgb), 0.08);
|
|
3899
4163
|
border: 2px solid var(--retro-border-dark);
|
|
3900
4164
|
}
|
|
3901
4165
|
ol.retro-list li ol.retro-list {
|
|
@@ -3942,7 +4206,7 @@ dl.retro-list dd {
|
|
|
3942
4206
|
background: var(--retro-bg);
|
|
3943
4207
|
border: 2px solid var(--retro-border-dark);
|
|
3944
4208
|
box-shadow: inset 2px 2px 0 var(--retro-border-light), inset -2px -2px 0 var(--retro-border-dark);
|
|
3945
|
-
font-family:
|
|
4209
|
+
font-family: var(--retro-font-mono);
|
|
3946
4210
|
margin-bottom: 1.5rem;
|
|
3947
4211
|
}
|
|
3948
4212
|
|
|
@@ -3982,12 +4246,12 @@ dl.retro-list dd {
|
|
|
3982
4246
|
height: 32px;
|
|
3983
4247
|
cursor: pointer;
|
|
3984
4248
|
z-index: 2;
|
|
3985
|
-
font-size:
|
|
4249
|
+
font-size: var(--retro-font-size-2xl);
|
|
3986
4250
|
display: flex;
|
|
3987
4251
|
align-items: center;
|
|
3988
4252
|
justify-content: center;
|
|
3989
4253
|
opacity: 1;
|
|
3990
|
-
font-family:
|
|
4254
|
+
font-family: var(--retro-font-mono);
|
|
3991
4255
|
padding: 0;
|
|
3992
4256
|
/* Add pressed state */
|
|
3993
4257
|
}
|
|
@@ -4029,6 +4293,7 @@ dl.retro-list dd {
|
|
|
4029
4293
|
box-shadow: inset 1px 1px 0 var(--retro-border-dark), inset -1px -1px 0 var(--retro-border-light);
|
|
4030
4294
|
}
|
|
4031
4295
|
|
|
4296
|
+
/* Base Styles */
|
|
4032
4297
|
/**
|
|
4033
4298
|
* @name Date/Time Input
|
|
4034
4299
|
* @group components
|
|
@@ -4074,11 +4339,17 @@ input[type=datetime-local].retro-input:focus {
|
|
|
4074
4339
|
border: 2px solid var(--retro-primary);
|
|
4075
4340
|
box-shadow: 0 0 0 2px rgba(var(--retro-primary-rgb), 0.2);
|
|
4076
4341
|
}
|
|
4342
|
+
input[type=date].retro-input:focus-visible,
|
|
4343
|
+
input[type=time].retro-input:focus-visible,
|
|
4344
|
+
input[type=datetime-local].retro-input:focus-visible {
|
|
4345
|
+
outline: 2px solid var(--retro-primary);
|
|
4346
|
+
outline-offset: 2px;
|
|
4347
|
+
}
|
|
4077
4348
|
input[type=date].retro-input:disabled,
|
|
4078
4349
|
input[type=time].retro-input:disabled,
|
|
4079
4350
|
input[type=datetime-local].retro-input:disabled {
|
|
4080
4351
|
background-color: var(--retro-light);
|
|
4081
|
-
color: var(--retro-
|
|
4352
|
+
color: var(--retro-text-muted);
|
|
4082
4353
|
cursor: not-allowed;
|
|
4083
4354
|
}
|
|
4084
4355
|
input[type=date].retro-input.retro-input-lg,
|
|
@@ -4204,7 +4475,7 @@ input[type=datetime-local].retro-input.retro-input-sm {
|
|
|
4204
4475
|
letter-spacing: 2px;
|
|
4205
4476
|
background: var(--retro-bg);
|
|
4206
4477
|
border: 2px solid var(--retro-border-dark);
|
|
4207
|
-
box-shadow: 2px 2px 8px rgba(
|
|
4478
|
+
box-shadow: 2px 2px 8px rgba(var(--retro-black-rgb), 0.12), 1px 1px 0 var(--retro-border-light);
|
|
4208
4479
|
padding: 4px 16px;
|
|
4209
4480
|
border-radius: 4px;
|
|
4210
4481
|
filter: blur(0.2px);
|
|
@@ -4245,7 +4516,7 @@ input[type=datetime-local].retro-input.retro-input-sm {
|
|
|
4245
4516
|
height: auto;
|
|
4246
4517
|
position: static;
|
|
4247
4518
|
overflow-y: auto;
|
|
4248
|
-
transition:
|
|
4519
|
+
transition: transform 0.3s ease, left 0.3s ease, width 0.3s ease;
|
|
4249
4520
|
color: var(--retro-sidebar-text);
|
|
4250
4521
|
}
|
|
4251
4522
|
.retro-sidebar-header {
|
|
@@ -4260,8 +4531,8 @@ input[type=datetime-local].retro-input.retro-input-sm {
|
|
|
4260
4531
|
.retro-sidebar-section-title {
|
|
4261
4532
|
font-weight: bold;
|
|
4262
4533
|
margin-bottom: var(--retro-spacing-xs, 4px);
|
|
4263
|
-
font-size:
|
|
4264
|
-
color: var(--retro-text-muted
|
|
4534
|
+
font-size: var(--retro-font-size-sm);
|
|
4535
|
+
color: var(--retro-text-muted);
|
|
4265
4536
|
}
|
|
4266
4537
|
.retro-sidebar .active {
|
|
4267
4538
|
font-weight: bold;
|
|
@@ -4290,7 +4561,7 @@ input[type=datetime-local].retro-input.retro-input-sm {
|
|
|
4290
4561
|
margin: 16px;
|
|
4291
4562
|
margin-right: 0;
|
|
4292
4563
|
border-right: 2px solid var(--retro-border-medium);
|
|
4293
|
-
box-shadow: 2px 0 5px rgba(
|
|
4564
|
+
box-shadow: 2px 0 5px rgba(var(--retro-black-rgb), 0.05);
|
|
4294
4565
|
}
|
|
4295
4566
|
}
|
|
4296
4567
|
|
|
@@ -4319,7 +4590,7 @@ input[type=datetime-local].retro-input.retro-input-sm {
|
|
|
4319
4590
|
background: var(--retro-text);
|
|
4320
4591
|
position: absolute;
|
|
4321
4592
|
left: 0;
|
|
4322
|
-
transition:
|
|
4593
|
+
transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
|
|
4323
4594
|
}
|
|
4324
4595
|
.retro-sidebar-toggle-icon:before {
|
|
4325
4596
|
top: 6px;
|
|
@@ -4343,7 +4614,7 @@ input[type=datetime-local].retro-input.retro-input-sm {
|
|
|
4343
4614
|
left: 0;
|
|
4344
4615
|
right: 0;
|
|
4345
4616
|
bottom: 0;
|
|
4346
|
-
background: rgba(
|
|
4617
|
+
background: rgba(var(--retro-black-rgb), 0.5);
|
|
4347
4618
|
z-index: 999;
|
|
4348
4619
|
}
|
|
4349
4620
|
.retro-sidebar-overlay.active {
|
|
@@ -4356,6 +4627,48 @@ input[type=datetime-local].retro-input.retro-input-sm {
|
|
|
4356
4627
|
}
|
|
4357
4628
|
|
|
4358
4629
|
/* Utilities */
|
|
4630
|
+
/**
|
|
4631
|
+
* @name Accessibility Utilities
|
|
4632
|
+
* @group utilities
|
|
4633
|
+
* @description
|
|
4634
|
+
* Helpers for content that must reach assistive technology without being
|
|
4635
|
+
* visible, and for the keyboard affordances that go with them.
|
|
4636
|
+
*/
|
|
4637
|
+
.retro-sr-only {
|
|
4638
|
+
position: absolute;
|
|
4639
|
+
width: 1px;
|
|
4640
|
+
height: 1px;
|
|
4641
|
+
padding: 0;
|
|
4642
|
+
margin: -1px;
|
|
4643
|
+
overflow: hidden;
|
|
4644
|
+
clip: rect(0, 0, 0, 0);
|
|
4645
|
+
clip-path: inset(50%);
|
|
4646
|
+
white-space: nowrap;
|
|
4647
|
+
border: 0;
|
|
4648
|
+
}
|
|
4649
|
+
|
|
4650
|
+
.retro-sr-only-focusable:not(:focus):not(:focus-within) {
|
|
4651
|
+
position: absolute;
|
|
4652
|
+
width: 1px;
|
|
4653
|
+
height: 1px;
|
|
4654
|
+
padding: 0;
|
|
4655
|
+
margin: -1px;
|
|
4656
|
+
overflow: hidden;
|
|
4657
|
+
clip: rect(0, 0, 0, 0);
|
|
4658
|
+
clip-path: inset(50%);
|
|
4659
|
+
white-space: nowrap;
|
|
4660
|
+
border: 0;
|
|
4661
|
+
}
|
|
4662
|
+
.retro-sr-only-focusable:focus {
|
|
4663
|
+
position: static;
|
|
4664
|
+
z-index: var(--retro-z-index-fixed);
|
|
4665
|
+
padding: var(--retro-spacing-sm) var(--retro-spacing-md);
|
|
4666
|
+
background: var(--retro-bg);
|
|
4667
|
+
color: var(--retro-text);
|
|
4668
|
+
border: var(--retro-border-width-thick) solid var(--retro-border-dark);
|
|
4669
|
+
box-shadow: var(--retro-box-shadow-outset-button);
|
|
4670
|
+
}
|
|
4671
|
+
|
|
4359
4672
|
.mt-0 {
|
|
4360
4673
|
margin-top: 0px !important;
|
|
4361
4674
|
}
|
|
@@ -4797,15 +5110,15 @@ input[type=datetime-local].retro-input.retro-input-sm {
|
|
|
4797
5110
|
}
|
|
4798
5111
|
|
|
4799
5112
|
.retro-grid-areas {
|
|
4800
|
-
grid-template-areas: var(--retro-grid-areas);
|
|
5113
|
+
grid-template-areas: var(--retro-grid-areas, none);
|
|
4801
5114
|
}
|
|
4802
5115
|
|
|
4803
5116
|
.retro-col-span {
|
|
4804
|
-
grid-column: var(--retro-col-span);
|
|
5117
|
+
grid-column: var(--retro-col-span, auto);
|
|
4805
5118
|
}
|
|
4806
5119
|
|
|
4807
5120
|
.retro-row-span {
|
|
4808
|
-
grid-row: var(--retro-row-span);
|
|
5121
|
+
grid-row: var(--retro-row-span, auto);
|
|
4809
5122
|
}
|
|
4810
5123
|
|
|
4811
5124
|
@media (min-width: 0) {
|