@phantompixeldev/retrocss 1.0.7 → 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 +942 -645
- 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 +53 -51
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;
|
|
@@ -1779,7 +2075,7 @@ input[type=radio].retro-input:focus {
|
|
|
1779
2075
|
left: 0;
|
|
1780
2076
|
right: 0;
|
|
1781
2077
|
bottom: 0;
|
|
1782
|
-
background:
|
|
2078
|
+
background: var(--retro-body-bg);
|
|
1783
2079
|
border: 2px solid var(--retro-border-dark);
|
|
1784
2080
|
box-shadow: inset -1px -1px 0 var(--retro-border-light), inset 1px 1px 0 var(--retro-border-medium);
|
|
1785
2081
|
transition: 0.1s;
|
|
@@ -1802,11 +2098,11 @@ input[type=radio].retro-input:focus {
|
|
|
1802
2098
|
.retro-switch input:checked + .retro-switch-slider:before {
|
|
1803
2099
|
transform: translateX(16px);
|
|
1804
2100
|
}
|
|
1805
|
-
.retro-switch input:focus + .retro-switch-slider {
|
|
1806
|
-
outline: 1px dotted var(--retro-
|
|
2101
|
+
.retro-switch input:focus-visible + .retro-switch-slider {
|
|
2102
|
+
outline: 1px dotted var(--retro-text);
|
|
1807
2103
|
}
|
|
1808
2104
|
.retro-switch input:disabled + .retro-switch-slider {
|
|
1809
|
-
background:
|
|
2105
|
+
background: var(--retro-body-bg);
|
|
1810
2106
|
opacity: 0.7;
|
|
1811
2107
|
cursor: not-allowed;
|
|
1812
2108
|
}
|
|
@@ -1849,7 +2145,7 @@ input[type=radio].retro-input:focus {
|
|
|
1849
2145
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
1850
2146
|
/* Main SCSS file that imports all components */
|
|
1851
2147
|
/* Core */
|
|
1852
|
-
/*
|
|
2148
|
+
/* Base Styles */
|
|
1853
2149
|
/**
|
|
1854
2150
|
* @name Retro Alert
|
|
1855
2151
|
* @group components
|
|
@@ -1890,7 +2186,7 @@ input[type=radio].retro-input:focus {
|
|
|
1890
2186
|
border-left: 2px solid var(--retro-border-medium);
|
|
1891
2187
|
border-top: 2px solid var(--retro-border-medium);
|
|
1892
2188
|
border-radius: 0 !important;
|
|
1893
|
-
font-family:
|
|
2189
|
+
font-family: var(--retro-font-heading);
|
|
1894
2190
|
box-shadow: none;
|
|
1895
2191
|
margin-bottom: 1.2em;
|
|
1896
2192
|
padding: 0.7em 1.2em;
|
|
@@ -1911,44 +2207,44 @@ input[type=radio].retro-input:focus {
|
|
|
1911
2207
|
width: 100%;
|
|
1912
2208
|
margin: 0;
|
|
1913
2209
|
padding: 0.3em 1em 0.2em 1em;
|
|
1914
|
-
font-size:
|
|
2210
|
+
font-size: var(--retro-font-size-sm);
|
|
1915
2211
|
font-family: inherit;
|
|
1916
2212
|
border-radius: 0;
|
|
1917
2213
|
box-shadow: none;
|
|
1918
|
-
border-top: 2px solid rgba(
|
|
1919
|
-
background:
|
|
1920
|
-
color:
|
|
2214
|
+
border-top: 2px solid rgba(var(--retro-black-rgb), 0.12);
|
|
2215
|
+
background: var(--retro-light);
|
|
2216
|
+
color: var(--retro-text);
|
|
1921
2217
|
text-align: left;
|
|
1922
2218
|
}
|
|
1923
2219
|
|
|
1924
2220
|
.retro-alert-primary .retro-alert-footer {
|
|
1925
|
-
background:
|
|
1926
|
-
color:
|
|
1927
|
-
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);
|
|
1928
2224
|
}
|
|
1929
2225
|
|
|
1930
2226
|
.retro-alert-success .retro-alert-footer {
|
|
1931
|
-
background:
|
|
1932
|
-
color:
|
|
1933
|
-
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);
|
|
1934
2230
|
}
|
|
1935
2231
|
|
|
1936
2232
|
.retro-alert-danger .retro-alert-footer {
|
|
1937
|
-
background:
|
|
1938
|
-
color:
|
|
1939
|
-
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);
|
|
1940
2236
|
}
|
|
1941
2237
|
|
|
1942
2238
|
.retro-alert-warning .retro-alert-footer {
|
|
1943
|
-
background:
|
|
1944
|
-
color:
|
|
1945
|
-
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);
|
|
1946
2242
|
}
|
|
1947
2243
|
|
|
1948
2244
|
.retro-alert-info .retro-alert-footer {
|
|
1949
|
-
background:
|
|
1950
|
-
color:
|
|
1951
|
-
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);
|
|
1952
2248
|
}
|
|
1953
2249
|
|
|
1954
2250
|
.retro-alert-icon, .retro-toast-icon, .retro-alert-close, .retro-toast-close {
|
|
@@ -1956,40 +2252,40 @@ input[type=radio].retro-input:focus {
|
|
|
1956
2252
|
}
|
|
1957
2253
|
|
|
1958
2254
|
.retro-toast-primary, .retro-toast.retro-alert-primary {
|
|
1959
|
-
background:
|
|
1960
|
-
color:
|
|
1961
|
-
border-left: 6px solid
|
|
2255
|
+
background: var(--retro-primary);
|
|
2256
|
+
color: var(--retro-primary-fg);
|
|
2257
|
+
border-left: 6px solid var(--retro-primary-active);
|
|
1962
2258
|
}
|
|
1963
2259
|
|
|
1964
2260
|
.retro-toast-success, .retro-toast.retro-alert-success {
|
|
1965
|
-
background:
|
|
1966
|
-
color:
|
|
1967
|
-
border-left: 6px solid
|
|
2261
|
+
background: var(--retro-success);
|
|
2262
|
+
color: var(--retro-success-fg);
|
|
2263
|
+
border-left: 6px solid var(--retro-success-active);
|
|
1968
2264
|
}
|
|
1969
2265
|
|
|
1970
2266
|
.retro-toast-danger, .retro-toast.retro-alert-danger {
|
|
1971
|
-
background:
|
|
1972
|
-
color:
|
|
1973
|
-
border-left: 6px solid
|
|
2267
|
+
background: var(--retro-danger);
|
|
2268
|
+
color: var(--retro-danger-fg);
|
|
2269
|
+
border-left: 6px solid var(--retro-danger-active);
|
|
1974
2270
|
}
|
|
1975
2271
|
|
|
1976
2272
|
.retro-toast-warning, .retro-toast.retro-alert-warning {
|
|
1977
|
-
background:
|
|
1978
|
-
color:
|
|
1979
|
-
border-left: 6px solid
|
|
2273
|
+
background: var(--retro-warning);
|
|
2274
|
+
color: var(--retro-warning-fg);
|
|
2275
|
+
border-left: 6px solid var(--retro-warning-active);
|
|
1980
2276
|
}
|
|
1981
2277
|
|
|
1982
2278
|
.retro-toast-info, .retro-toast.retro-alert-info {
|
|
1983
|
-
background:
|
|
1984
|
-
color:
|
|
1985
|
-
border-left: 6px solid
|
|
2279
|
+
background: var(--retro-info);
|
|
2280
|
+
color: var(--retro-info-fg);
|
|
2281
|
+
border-left: 6px solid var(--retro-info-active);
|
|
1986
2282
|
}
|
|
1987
2283
|
|
|
1988
2284
|
.retro-toast-close {
|
|
1989
2285
|
background: none;
|
|
1990
2286
|
border: none;
|
|
1991
2287
|
color: inherit;
|
|
1992
|
-
font-size:
|
|
2288
|
+
font-size: var(--retro-font-size-xl);
|
|
1993
2289
|
font-weight: bold;
|
|
1994
2290
|
margin-left: auto;
|
|
1995
2291
|
cursor: pointer;
|
|
@@ -2002,42 +2298,45 @@ input[type=radio].retro-input:focus {
|
|
|
2002
2298
|
}
|
|
2003
2299
|
|
|
2004
2300
|
.retro-alert-primary {
|
|
2005
|
-
background:
|
|
2006
|
-
color:
|
|
2007
|
-
border-left: 6px solid
|
|
2301
|
+
background: var(--retro-primary);
|
|
2302
|
+
color: var(--retro-primary-fg);
|
|
2303
|
+
border-left: 6px solid var(--retro-primary-active);
|
|
2008
2304
|
}
|
|
2009
2305
|
|
|
2010
2306
|
.retro-alert-success {
|
|
2011
|
-
background:
|
|
2012
|
-
color:
|
|
2013
|
-
border-left: 6px solid
|
|
2307
|
+
background: var(--retro-success);
|
|
2308
|
+
color: var(--retro-success-fg);
|
|
2309
|
+
border-left: 6px solid var(--retro-success-active);
|
|
2014
2310
|
}
|
|
2015
2311
|
|
|
2016
2312
|
.retro-alert-danger {
|
|
2017
|
-
background:
|
|
2018
|
-
color:
|
|
2019
|
-
border-left: 6px solid
|
|
2313
|
+
background: var(--retro-danger);
|
|
2314
|
+
color: var(--retro-danger-fg);
|
|
2315
|
+
border-left: 6px solid var(--retro-danger-active);
|
|
2020
2316
|
}
|
|
2021
2317
|
|
|
2022
2318
|
.retro-alert-warning {
|
|
2023
|
-
background:
|
|
2024
|
-
color:
|
|
2025
|
-
border-left: 6px solid
|
|
2319
|
+
background: var(--retro-warning);
|
|
2320
|
+
color: var(--retro-warning-fg);
|
|
2321
|
+
border-left: 6px solid var(--retro-warning-active);
|
|
2026
2322
|
}
|
|
2027
2323
|
|
|
2028
2324
|
.retro-alert-info {
|
|
2029
|
-
background:
|
|
2030
|
-
color:
|
|
2031
|
-
border-left: 6px solid
|
|
2325
|
+
background: var(--retro-info);
|
|
2326
|
+
color: var(--retro-info-fg);
|
|
2327
|
+
border-left: 6px solid var(--retro-info-active);
|
|
2032
2328
|
}
|
|
2033
2329
|
|
|
2034
2330
|
.retro-toast {
|
|
2035
|
-
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);
|
|
2036
2332
|
border-width: 1.5px;
|
|
2037
2333
|
margin-bottom: 0.75em;
|
|
2038
2334
|
animation: retro-toast-fadein 0.3s;
|
|
2039
2335
|
min-width: 240px;
|
|
2040
2336
|
max-width: 400px;
|
|
2337
|
+
position: relative;
|
|
2338
|
+
z-index: var(--retro-z-index-tooltip);
|
|
2339
|
+
pointer-events: auto;
|
|
2041
2340
|
}
|
|
2042
2341
|
|
|
2043
2342
|
@keyframes retro-toast-fadein {
|
|
@@ -2050,34 +2349,6 @@ input[type=radio].retro-input:focus {
|
|
|
2050
2349
|
transform: translateY(0);
|
|
2051
2350
|
}
|
|
2052
2351
|
}
|
|
2053
|
-
.retro-toast::before {
|
|
2054
|
-
content: "";
|
|
2055
|
-
display: inline-block;
|
|
2056
|
-
width: 20px;
|
|
2057
|
-
height: 20px;
|
|
2058
|
-
margin-right: 1em;
|
|
2059
|
-
margin-left: -2em;
|
|
2060
|
-
background-repeat: no-repeat;
|
|
2061
|
-
background-position: center;
|
|
2062
|
-
background-size: 18px 18px;
|
|
2063
|
-
}
|
|
2064
|
-
|
|
2065
|
-
.retro-toast-info::before {
|
|
2066
|
-
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>');
|
|
2067
|
-
}
|
|
2068
|
-
|
|
2069
|
-
.retro-toast-warning::before {
|
|
2070
|
-
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>');
|
|
2071
|
-
}
|
|
2072
|
-
|
|
2073
|
-
.retro-toast-danger::before {
|
|
2074
|
-
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>');
|
|
2075
|
-
}
|
|
2076
|
-
|
|
2077
|
-
.retro-toast-success::before {
|
|
2078
|
-
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>');
|
|
2079
|
-
}
|
|
2080
|
-
|
|
2081
2352
|
.retro-alert-main, .retro-toast-main {
|
|
2082
2353
|
display: flex;
|
|
2083
2354
|
flex-direction: row;
|
|
@@ -2096,40 +2367,10 @@ input[type=radio].retro-input:focus {
|
|
|
2096
2367
|
display: flex;
|
|
2097
2368
|
align-items: center;
|
|
2098
2369
|
justify-content: center;
|
|
2099
|
-
font-size:
|
|
2370
|
+
font-size: var(--retro-font-size-lg);
|
|
2100
2371
|
flex-shrink: 0;
|
|
2101
2372
|
}
|
|
2102
2373
|
|
|
2103
|
-
.retro-alert-primary .retro-alert-icon, .retro-toast-primary .retro-toast-icon {
|
|
2104
|
-
content: "";
|
|
2105
|
-
background: none;
|
|
2106
|
-
color: #fff;
|
|
2107
|
-
}
|
|
2108
|
-
|
|
2109
|
-
.retro-alert-success .retro-alert-icon, .retro-toast-success .retro-toast-icon {
|
|
2110
|
-
content: "";
|
|
2111
|
-
background: none;
|
|
2112
|
-
color: #fff;
|
|
2113
|
-
}
|
|
2114
|
-
|
|
2115
|
-
.retro-alert-danger .retro-alert-icon, .retro-toast-danger .retro-toast-icon {
|
|
2116
|
-
content: "";
|
|
2117
|
-
background: none;
|
|
2118
|
-
color: #fff;
|
|
2119
|
-
}
|
|
2120
|
-
|
|
2121
|
-
.retro-alert-warning .retro-alert-icon, .retro-toast-warning .retro-toast-icon {
|
|
2122
|
-
content: "";
|
|
2123
|
-
background: none;
|
|
2124
|
-
color: #222;
|
|
2125
|
-
}
|
|
2126
|
-
|
|
2127
|
-
.retro-alert-info .retro-alert-icon, .retro-toast-info .retro-toast-icon {
|
|
2128
|
-
content: "";
|
|
2129
|
-
background: none;
|
|
2130
|
-
color: #222;
|
|
2131
|
-
}
|
|
2132
|
-
|
|
2133
2374
|
.retro-alert-primary .retro-alert-icon::before, .retro-toast-primary .retro-toast-icon::before {
|
|
2134
2375
|
content: "ℹ"; /* ℹ */
|
|
2135
2376
|
}
|
|
@@ -2162,11 +2403,9 @@ input[type=radio].retro-input:focus {
|
|
|
2162
2403
|
|
|
2163
2404
|
.retro-alert {
|
|
2164
2405
|
margin-bottom: 1.25rem;
|
|
2165
|
-
border-radius: 6px;
|
|
2166
|
-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
2167
2406
|
}
|
|
2168
2407
|
|
|
2169
|
-
/*
|
|
2408
|
+
/* Base Styles */
|
|
2170
2409
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
2171
2410
|
/* Main SCSS file that imports all components */
|
|
2172
2411
|
/* Core */
|
|
@@ -2197,8 +2436,8 @@ input[type=radio].retro-input:focus {
|
|
|
2197
2436
|
border: 1px solid var(--retro-border-dark);
|
|
2198
2437
|
background-color: var(--retro-table-bg);
|
|
2199
2438
|
color: var(--retro-table-header-text);
|
|
2200
|
-
font-family:
|
|
2201
|
-
font-size:
|
|
2439
|
+
font-family: var(--retro-font);
|
|
2440
|
+
font-size: 0.875rem;
|
|
2202
2441
|
box-shadow: var(--retro-box-shadow-outset-button);
|
|
2203
2442
|
overflow-x: auto;
|
|
2204
2443
|
margin-bottom: var(--retro-spacing-md);
|
|
@@ -2274,7 +2513,7 @@ input[type=radio].retro-input:focus {
|
|
|
2274
2513
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
2275
2514
|
/* Main SCSS file that imports all components */
|
|
2276
2515
|
/* Core */
|
|
2277
|
-
/*
|
|
2516
|
+
/* Base Styles */
|
|
2278
2517
|
/**
|
|
2279
2518
|
* @name Retro Modal
|
|
2280
2519
|
* @group components
|
|
@@ -2303,7 +2542,7 @@ input[type=radio].retro-input:focus {
|
|
|
2303
2542
|
display: none;
|
|
2304
2543
|
overflow: auto;
|
|
2305
2544
|
outline: 0;
|
|
2306
|
-
background: rgba(
|
|
2545
|
+
background: rgba(var(--retro-black-rgb), 0.6);
|
|
2307
2546
|
padding: 1rem;
|
|
2308
2547
|
box-sizing: border-box;
|
|
2309
2548
|
text-align: center;
|
|
@@ -2325,11 +2564,11 @@ input[type=radio].retro-input:focus {
|
|
|
2325
2564
|
width: 100%;
|
|
2326
2565
|
max-width: 500px;
|
|
2327
2566
|
margin: 1.75rem auto;
|
|
2328
|
-
background: var(--retro-bg);
|
|
2567
|
+
background: var(--retro-modal-bg);
|
|
2329
2568
|
border: 2px solid var(--retro-border-dark);
|
|
2330
|
-
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);
|
|
2331
2570
|
border-radius: 4px !important;
|
|
2332
|
-
font-family:
|
|
2571
|
+
font-family: var(--retro-font-heading);
|
|
2333
2572
|
transition: none;
|
|
2334
2573
|
text-align: left;
|
|
2335
2574
|
vertical-align: middle;
|
|
@@ -2339,34 +2578,34 @@ input[type=radio].retro-input:focus {
|
|
|
2339
2578
|
align-items: center;
|
|
2340
2579
|
justify-content: space-between;
|
|
2341
2580
|
padding: 8px 24px;
|
|
2342
|
-
background: var(--retro-
|
|
2343
|
-
color:
|
|
2581
|
+
background: var(--retro-modal-header-bg);
|
|
2582
|
+
color: var(--retro-modal-header-text);
|
|
2344
2583
|
border-top: 2px solid var(--retro-border-light);
|
|
2345
2584
|
border-bottom: 2px solid var(--retro-border-dark);
|
|
2346
|
-
border-left: 8px solid var(--retro-
|
|
2585
|
+
border-left: 8px solid var(--retro-modal-header-bg);
|
|
2347
2586
|
border-radius: 4px 4px 0 0 !important;
|
|
2348
|
-
font-family:
|
|
2349
|
-
font-size:
|
|
2587
|
+
font-family: var(--retro-font-heading);
|
|
2588
|
+
font-size: var(--retro-font-size-lg);
|
|
2350
2589
|
font-weight: bold;
|
|
2351
2590
|
line-height: 1.5;
|
|
2352
2591
|
user-select: none;
|
|
2353
2592
|
letter-spacing: 0.5px;
|
|
2354
|
-
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);
|
|
2355
2594
|
}
|
|
2356
2595
|
.retro-modal-close {
|
|
2357
2596
|
display: flex;
|
|
2358
2597
|
align-items: center;
|
|
2359
2598
|
justify-content: center;
|
|
2360
2599
|
margin-left: var(--retro-spacing-sm);
|
|
2361
|
-
background:
|
|
2362
|
-
border: 2px outset
|
|
2600
|
+
background: var(--retro-light);
|
|
2601
|
+
border: 2px outset var(--retro-border-light);
|
|
2363
2602
|
box-shadow: none;
|
|
2364
2603
|
width: 22px;
|
|
2365
2604
|
height: 22px;
|
|
2366
2605
|
padding: 0;
|
|
2367
|
-
font-size:
|
|
2606
|
+
font-size: var(--retro-font-size-xl);
|
|
2368
2607
|
line-height: 1;
|
|
2369
|
-
color:
|
|
2608
|
+
color: var(--retro-text);
|
|
2370
2609
|
text-shadow: none;
|
|
2371
2610
|
cursor: pointer;
|
|
2372
2611
|
border-radius: 2px;
|
|
@@ -2374,12 +2613,12 @@ input[type=radio].retro-input:focus {
|
|
|
2374
2613
|
transition: background 0.1s, border 0.1s;
|
|
2375
2614
|
}
|
|
2376
2615
|
.retro-modal-close:hover {
|
|
2377
|
-
background:
|
|
2378
|
-
border: 2px inset
|
|
2616
|
+
background: var(--retro-gray-100);
|
|
2617
|
+
border: 2px inset var(--retro-border-light);
|
|
2379
2618
|
}
|
|
2380
2619
|
.retro-modal-close:active {
|
|
2381
|
-
background:
|
|
2382
|
-
border: 2px inset
|
|
2620
|
+
background: var(--retro-border-medium);
|
|
2621
|
+
border: 2px inset var(--retro-border-dark);
|
|
2383
2622
|
}
|
|
2384
2623
|
.retro-modal-body {
|
|
2385
2624
|
position: relative;
|
|
@@ -2418,7 +2657,7 @@ input[type=radio].retro-input:focus {
|
|
|
2418
2657
|
left: 0;
|
|
2419
2658
|
right: 0;
|
|
2420
2659
|
bottom: 0;
|
|
2421
|
-
background: rgba(
|
|
2660
|
+
background: rgba(var(--retro-black-rgb), 0.5);
|
|
2422
2661
|
z-index: 1040;
|
|
2423
2662
|
}
|
|
2424
2663
|
.retro-modal-scroll {
|
|
@@ -2443,18 +2682,18 @@ input[type=radio].retro-input:focus {
|
|
|
2443
2682
|
.retro-modal-header h4,
|
|
2444
2683
|
.retro-modal-header h5,
|
|
2445
2684
|
.retro-modal-header h6 {
|
|
2446
|
-
color:
|
|
2447
|
-
font-size:
|
|
2685
|
+
color: var(--retro-modal-header-text);
|
|
2686
|
+
font-size: var(--retro-font-size-xl);
|
|
2448
2687
|
font-weight: bold;
|
|
2449
2688
|
margin: 0;
|
|
2450
2689
|
font-family: inherit;
|
|
2451
|
-
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);
|
|
2452
2691
|
}
|
|
2453
2692
|
|
|
2454
2693
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
2455
2694
|
/* Main SCSS file that imports all components */
|
|
2456
2695
|
/* Core */
|
|
2457
|
-
/*
|
|
2696
|
+
/* Base Styles */
|
|
2458
2697
|
/* Retro Nav - Win9x Style Only */
|
|
2459
2698
|
/**
|
|
2460
2699
|
* @name Retro Navigation
|
|
@@ -2478,7 +2717,7 @@ input[type=radio].retro-input:focus {
|
|
|
2478
2717
|
border: 2px solid var(--retro-border-dark);
|
|
2479
2718
|
border-radius: 0;
|
|
2480
2719
|
box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-medium);
|
|
2481
|
-
font-family:
|
|
2720
|
+
font-family: var(--retro-font);
|
|
2482
2721
|
transition: none;
|
|
2483
2722
|
}
|
|
2484
2723
|
|
|
@@ -2490,7 +2729,7 @@ input[type=radio].retro-input:focus {
|
|
|
2490
2729
|
border-radius: 0;
|
|
2491
2730
|
background: var(--retro-light);
|
|
2492
2731
|
border-right: 1px solid var(--retro-border-medium);
|
|
2493
|
-
font-family:
|
|
2732
|
+
font-family: var(--retro-font);
|
|
2494
2733
|
transition: none;
|
|
2495
2734
|
}
|
|
2496
2735
|
.retro-nav-item:hover, .retro-tab:hover {
|
|
@@ -2504,10 +2743,19 @@ input[type=radio].retro-input:focus {
|
|
|
2504
2743
|
outline: 2px solid var(--retro-border-light);
|
|
2505
2744
|
outline-offset: -2px;
|
|
2506
2745
|
}
|
|
2746
|
+
.retro-nav-item:focus-visible, .retro-tab:focus-visible {
|
|
2747
|
+
z-index: 2;
|
|
2748
|
+
}
|
|
2507
2749
|
.retro-nav-item:focus, .retro-tab:focus {
|
|
2508
|
-
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);
|
|
2509
2758
|
outline-offset: 2px;
|
|
2510
|
-
z-index: 2;
|
|
2511
2759
|
}
|
|
2512
2760
|
|
|
2513
2761
|
.retro-tab {
|
|
@@ -2522,8 +2770,8 @@ input[type=radio].retro-input:focus {
|
|
|
2522
2770
|
min-width: 80px;
|
|
2523
2771
|
height: 32px;
|
|
2524
2772
|
box-shadow: none;
|
|
2525
|
-
font-family:
|
|
2526
|
-
font-size:
|
|
2773
|
+
font-family: var(--retro-font);
|
|
2774
|
+
font-size: var(--retro-font-size-lg);
|
|
2527
2775
|
font-weight: normal;
|
|
2528
2776
|
color: var(--retro-black);
|
|
2529
2777
|
transition: background 0.2s, color 0.2s;
|
|
@@ -2635,7 +2883,7 @@ input[type=radio].retro-input:focus {
|
|
|
2635
2883
|
border: 2px solid var(--retro-border-dark);
|
|
2636
2884
|
border-radius: 0;
|
|
2637
2885
|
box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-medium);
|
|
2638
|
-
font-family:
|
|
2886
|
+
font-family: var(--retro-font);
|
|
2639
2887
|
}
|
|
2640
2888
|
.retro-nav-toolbar .retro-nav-item, .retro-nav-toolbar .retro-tab {
|
|
2641
2889
|
display: flex;
|
|
@@ -2671,7 +2919,7 @@ input[type=radio].retro-input:focus {
|
|
|
2671
2919
|
font-weight: normal;
|
|
2672
2920
|
}
|
|
2673
2921
|
.retro-nav-toolbar .retro-nav-item .retro-nav-icon, .retro-nav-toolbar .retro-tab .retro-nav-icon {
|
|
2674
|
-
font-size:
|
|
2922
|
+
font-size: var(--retro-font-size-xl);
|
|
2675
2923
|
margin-right: 4px;
|
|
2676
2924
|
}
|
|
2677
2925
|
.retro-nav-toolbar.retro-nav-icons .retro-nav-item, .retro-nav-toolbar.retro-nav-icons .retro-tab {
|
|
@@ -2841,12 +3089,12 @@ input[type=radio].retro-input:focus {
|
|
|
2841
3089
|
left: 50%;
|
|
2842
3090
|
top: 50%;
|
|
2843
3091
|
transform: translate(-50%, -50%);
|
|
2844
|
-
font-size:
|
|
2845
|
-
color: var(--retro-
|
|
2846
|
-
font-family:
|
|
3092
|
+
font-size: var(--retro-font-size-sm);
|
|
3093
|
+
color: var(--retro-text);
|
|
3094
|
+
font-family: var(--retro-font);
|
|
2847
3095
|
pointer-events: none;
|
|
2848
3096
|
user-select: none;
|
|
2849
|
-
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);
|
|
2850
3098
|
}
|
|
2851
3099
|
|
|
2852
3100
|
.retro-progress-bar-striped {
|
|
@@ -2869,19 +3117,19 @@ input[type=radio].retro-input:focus {
|
|
|
2869
3117
|
min-width: 26px;
|
|
2870
3118
|
min-height: 18px;
|
|
2871
3119
|
padding: 2px 10px;
|
|
2872
|
-
font-size:
|
|
2873
|
-
font-family:
|
|
2874
|
-
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);
|
|
2875
3123
|
letter-spacing: 0.3px;
|
|
2876
3124
|
text-transform: uppercase;
|
|
2877
3125
|
color: var(--retro-badge-text);
|
|
2878
3126
|
background: var(--retro-badge-bg);
|
|
2879
|
-
border: 1px solid
|
|
3127
|
+
border: 1px solid var(--retro-border-dark);
|
|
2880
3128
|
border-radius: 0;
|
|
2881
|
-
box-shadow: 0 0 0 2px rgba(
|
|
2882
|
-
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;
|
|
2883
3131
|
margin: 0.2em 0.4em 0.2em 0;
|
|
2884
|
-
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;
|
|
2885
3133
|
position: relative;
|
|
2886
3134
|
overflow: hidden;
|
|
2887
3135
|
}
|
|
@@ -2892,130 +3140,130 @@ input[type=radio].retro-input:focus {
|
|
|
2892
3140
|
left: 0;
|
|
2893
3141
|
right: 0;
|
|
2894
3142
|
height: 40%;
|
|
2895
|
-
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));
|
|
2896
3144
|
pointer-events: none;
|
|
2897
3145
|
}
|
|
2898
|
-
.retro-badge:hover, .retro-badge:focus {
|
|
3146
|
+
.retro-badge:hover, .retro-badge:focus-visible {
|
|
2899
3147
|
transform: translateY(-1px) scale(1.05);
|
|
2900
|
-
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);
|
|
2901
3149
|
filter: brightness(1.1);
|
|
2902
3150
|
}
|
|
2903
3151
|
.retro-badge:active {
|
|
2904
3152
|
transform: translateY(1px) scale(0.98);
|
|
2905
|
-
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);
|
|
2906
3154
|
filter: brightness(0.9);
|
|
2907
3155
|
}
|
|
2908
3156
|
|
|
2909
3157
|
.retro-badge-primary {
|
|
2910
|
-
background:
|
|
2911
|
-
color:
|
|
2912
|
-
border: 2px solid
|
|
2913
|
-
box-shadow: inset 1px 1px 0
|
|
2914
|
-
text-shadow:
|
|
2915
|
-
}
|
|
2916
|
-
.retro-badge-primary:hover, .retro-badge-primary:focus {
|
|
2917
|
-
background:
|
|
2918
|
-
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);
|
|
2919
3167
|
filter: brightness(1.08);
|
|
2920
3168
|
}
|
|
2921
3169
|
.retro-badge-primary:active {
|
|
2922
|
-
background:
|
|
2923
|
-
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);
|
|
2924
3172
|
filter: brightness(0.95);
|
|
2925
3173
|
}
|
|
2926
3174
|
|
|
2927
3175
|
.retro-badge-success {
|
|
2928
|
-
background:
|
|
2929
|
-
color:
|
|
2930
|
-
border: 2px solid
|
|
2931
|
-
box-shadow: inset 1px 1px 0
|
|
2932
|
-
text-shadow:
|
|
2933
|
-
}
|
|
2934
|
-
.retro-badge-success:hover, .retro-badge-success:focus {
|
|
2935
|
-
background:
|
|
2936
|
-
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);
|
|
2937
3185
|
filter: brightness(1.08);
|
|
2938
3186
|
}
|
|
2939
3187
|
.retro-badge-success:active {
|
|
2940
|
-
background:
|
|
2941
|
-
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);
|
|
2942
3190
|
filter: brightness(0.95);
|
|
2943
3191
|
}
|
|
2944
3192
|
|
|
2945
3193
|
.retro-badge-danger {
|
|
2946
|
-
background:
|
|
2947
|
-
color:
|
|
2948
|
-
border: 2px solid
|
|
2949
|
-
box-shadow: inset 1px 1px 0
|
|
2950
|
-
text-shadow:
|
|
2951
|
-
}
|
|
2952
|
-
.retro-badge-danger:hover, .retro-badge-danger:focus {
|
|
2953
|
-
background:
|
|
2954
|
-
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);
|
|
2955
3203
|
filter: brightness(1.08);
|
|
2956
3204
|
}
|
|
2957
3205
|
.retro-badge-danger:active {
|
|
2958
|
-
background:
|
|
2959
|
-
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);
|
|
2960
3208
|
filter: brightness(0.95);
|
|
2961
3209
|
}
|
|
2962
3210
|
|
|
2963
3211
|
.retro-badge-warning {
|
|
2964
|
-
background:
|
|
2965
|
-
color:
|
|
2966
|
-
border: 2px solid
|
|
2967
|
-
box-shadow: inset 1px 1px 0
|
|
2968
|
-
text-shadow:
|
|
2969
|
-
}
|
|
2970
|
-
.retro-badge-warning:hover, .retro-badge-warning:focus {
|
|
2971
|
-
background:
|
|
2972
|
-
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);
|
|
2973
3221
|
filter: brightness(1.08);
|
|
2974
3222
|
}
|
|
2975
3223
|
.retro-badge-warning:active {
|
|
2976
|
-
background:
|
|
2977
|
-
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);
|
|
2978
3226
|
filter: brightness(0.95);
|
|
2979
3227
|
}
|
|
2980
3228
|
|
|
2981
3229
|
.retro-badge-info {
|
|
2982
|
-
background:
|
|
2983
|
-
color:
|
|
2984
|
-
border: 2px solid
|
|
2985
|
-
box-shadow: inset 1px 1px 0
|
|
2986
|
-
text-shadow:
|
|
2987
|
-
}
|
|
2988
|
-
.retro-badge-info:hover, .retro-badge-info:focus {
|
|
2989
|
-
background:
|
|
2990
|
-
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);
|
|
2991
3239
|
filter: brightness(1.08);
|
|
2992
3240
|
}
|
|
2993
3241
|
.retro-badge-info:active {
|
|
2994
|
-
background:
|
|
2995
|
-
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);
|
|
2996
3244
|
filter: brightness(0.95);
|
|
2997
3245
|
}
|
|
2998
3246
|
|
|
2999
3247
|
.retro-badge-secondary {
|
|
3000
|
-
background:
|
|
3001
|
-
color:
|
|
3002
|
-
border: 2px solid
|
|
3003
|
-
box-shadow: inset 1px 1px 0
|
|
3004
|
-
text-shadow:
|
|
3005
|
-
}
|
|
3006
|
-
.retro-badge-secondary:hover, .retro-badge-secondary:focus {
|
|
3007
|
-
background:
|
|
3008
|
-
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);
|
|
3009
3257
|
filter: brightness(1.08);
|
|
3010
3258
|
}
|
|
3011
3259
|
.retro-badge-secondary:active {
|
|
3012
|
-
background:
|
|
3013
|
-
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);
|
|
3014
3262
|
filter: brightness(0.95);
|
|
3015
3263
|
}
|
|
3016
3264
|
|
|
3017
3265
|
.retro-badge.retro-badge-xs {
|
|
3018
|
-
font-size:
|
|
3266
|
+
font-size: var(--retro-font-size-xs) !important;
|
|
3019
3267
|
min-width: 16px !important;
|
|
3020
3268
|
min-height: 12px !important;
|
|
3021
3269
|
padding: 1px 4px !important;
|
|
@@ -3023,7 +3271,7 @@ input[type=radio].retro-input:focus {
|
|
|
3023
3271
|
}
|
|
3024
3272
|
|
|
3025
3273
|
.retro-badge.retro-badge-sm {
|
|
3026
|
-
font-size:
|
|
3274
|
+
font-size: var(--retro-font-size-xs) !important;
|
|
3027
3275
|
min-width: 20px !important;
|
|
3028
3276
|
min-height: 14px !important;
|
|
3029
3277
|
padding: 1px 6px !important;
|
|
@@ -3031,7 +3279,7 @@ input[type=radio].retro-input:focus {
|
|
|
3031
3279
|
}
|
|
3032
3280
|
|
|
3033
3281
|
.retro-badge.retro-badge-md {
|
|
3034
|
-
font-size:
|
|
3282
|
+
font-size: var(--retro-font-size-sm) !important;
|
|
3035
3283
|
min-width: 26px !important;
|
|
3036
3284
|
min-height: 18px !important;
|
|
3037
3285
|
padding: 2px 10px !important;
|
|
@@ -3039,7 +3287,7 @@ input[type=radio].retro-input:focus {
|
|
|
3039
3287
|
}
|
|
3040
3288
|
|
|
3041
3289
|
.retro-badge.retro-badge-lg {
|
|
3042
|
-
font-size:
|
|
3290
|
+
font-size: var(--retro-font-size) !important;
|
|
3043
3291
|
min-width: 36px !important;
|
|
3044
3292
|
min-height: 22px !important;
|
|
3045
3293
|
padding: 3px 14px !important;
|
|
@@ -3047,7 +3295,7 @@ input[type=radio].retro-input:focus {
|
|
|
3047
3295
|
}
|
|
3048
3296
|
|
|
3049
3297
|
.retro-badge.retro-badge-xl {
|
|
3050
|
-
font-size:
|
|
3298
|
+
font-size: var(--retro-font-size-lg) !important;
|
|
3051
3299
|
min-width: 46px !important;
|
|
3052
3300
|
min-height: 28px !important;
|
|
3053
3301
|
padding: 4px 18px !important;
|
|
@@ -3055,7 +3303,7 @@ input[type=radio].retro-input:focus {
|
|
|
3055
3303
|
}
|
|
3056
3304
|
|
|
3057
3305
|
.retro-badge.retro-badge-xxl {
|
|
3058
|
-
font-size:
|
|
3306
|
+
font-size: var(--retro-font-size-xl) !important;
|
|
3059
3307
|
min-width: 60px !important;
|
|
3060
3308
|
min-height: 36px !important;
|
|
3061
3309
|
padding: 6px 24px !important;
|
|
@@ -3085,21 +3333,21 @@ input[type=radio].retro-input:focus {
|
|
|
3085
3333
|
}
|
|
3086
3334
|
|
|
3087
3335
|
.retro-badge-pixel {
|
|
3088
|
-
font-family:
|
|
3089
|
-
font-weight:
|
|
3336
|
+
font-family: var(--retro-font-heading);
|
|
3337
|
+
font-weight: var(--retro-font-weight-bold);
|
|
3090
3338
|
image-rendering: pixelated;
|
|
3091
|
-
border: 2px solid
|
|
3339
|
+
border: 2px solid var(--retro-border-dark);
|
|
3092
3340
|
border-radius: 0;
|
|
3093
|
-
box-shadow: 4px 4px 0
|
|
3341
|
+
box-shadow: 4px 4px 0 var(--retro-border-dark);
|
|
3094
3342
|
transform-origin: center;
|
|
3095
3343
|
}
|
|
3096
|
-
.retro-badge-pixel:hover, .retro-badge-pixel:focus {
|
|
3344
|
+
.retro-badge-pixel:hover, .retro-badge-pixel:focus-visible {
|
|
3097
3345
|
transform: translateY(-2px) translateX(-2px);
|
|
3098
|
-
box-shadow: 6px 6px 0
|
|
3346
|
+
box-shadow: 6px 6px 0 var(--retro-border-dark);
|
|
3099
3347
|
}
|
|
3100
3348
|
.retro-badge-pixel:active {
|
|
3101
3349
|
transform: translateY(0) translateX(0);
|
|
3102
|
-
box-shadow: 0 0 0
|
|
3350
|
+
box-shadow: 0 0 0 var(--retro-border-dark);
|
|
3103
3351
|
}
|
|
3104
3352
|
|
|
3105
3353
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
@@ -3154,7 +3402,7 @@ input[type=radio].retro-input:focus {
|
|
|
3154
3402
|
top: 50%;
|
|
3155
3403
|
transform: translateY(-50%);
|
|
3156
3404
|
font-weight: bold;
|
|
3157
|
-
font-size:
|
|
3405
|
+
font-size: var(--retro-font-size-lg);
|
|
3158
3406
|
}
|
|
3159
3407
|
|
|
3160
3408
|
.retro-accordion-content {
|
|
@@ -3183,21 +3431,21 @@ input[type=radio].retro-input:focus {
|
|
|
3183
3431
|
.retro-pagination .retro-btn {
|
|
3184
3432
|
min-width: 36px;
|
|
3185
3433
|
padding: 4px 12px;
|
|
3186
|
-
font-size:
|
|
3434
|
+
font-size: var(--retro-font-size-lg);
|
|
3187
3435
|
border-radius: 2px;
|
|
3188
|
-
border: 2px solid
|
|
3189
|
-
background:
|
|
3190
|
-
color:
|
|
3191
|
-
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);
|
|
3192
3440
|
transition: background 0.2s, color 0.2s;
|
|
3193
3441
|
}
|
|
3194
3442
|
|
|
3195
3443
|
.retro-pagination .retro-btn.active,
|
|
3196
3444
|
.retro-pagination .retro-btn:active {
|
|
3197
|
-
background:
|
|
3198
|
-
color:
|
|
3445
|
+
background: var(--retro-primary);
|
|
3446
|
+
color: var(--retro-white);
|
|
3199
3447
|
font-weight: bold;
|
|
3200
|
-
border-color:
|
|
3448
|
+
border-color: var(--retro-primary);
|
|
3201
3449
|
}
|
|
3202
3450
|
|
|
3203
3451
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
@@ -3206,8 +3454,8 @@ input[type=radio].retro-input:focus {
|
|
|
3206
3454
|
.retro-breadcrumbs {
|
|
3207
3455
|
display: flex;
|
|
3208
3456
|
align-items: center;
|
|
3209
|
-
font-family:
|
|
3210
|
-
font-size:
|
|
3457
|
+
font-family: var(--retro-font);
|
|
3458
|
+
font-size: var(--retro-font-size-lg);
|
|
3211
3459
|
background: var(--retro-card-bg);
|
|
3212
3460
|
padding: 6px 12px;
|
|
3213
3461
|
border-radius: 2px;
|
|
@@ -3237,12 +3485,12 @@ input[type=radio].retro-input:focus {
|
|
|
3237
3485
|
}
|
|
3238
3486
|
|
|
3239
3487
|
.retro-breadcrumb-icon {
|
|
3240
|
-
font-size:
|
|
3488
|
+
font-size: var(--retro-font-size-lg);
|
|
3241
3489
|
margin-right: 2px;
|
|
3242
3490
|
}
|
|
3243
3491
|
|
|
3244
3492
|
.retro-breadcrumb-sep {
|
|
3245
|
-
color:
|
|
3493
|
+
color: var(--retro-text-muted);
|
|
3246
3494
|
margin: 0 2px;
|
|
3247
3495
|
font-weight: bold;
|
|
3248
3496
|
}
|
|
@@ -3270,10 +3518,10 @@ input[type=radio].retro-input:focus {
|
|
|
3270
3518
|
border-radius: 2px;
|
|
3271
3519
|
padding: 6px 16px;
|
|
3272
3520
|
font-family: var(--retro-font);
|
|
3273
|
-
font-size:
|
|
3521
|
+
font-size: var(--retro-font-size-lg);
|
|
3274
3522
|
color: var(--retro-dropdown-text);
|
|
3275
3523
|
box-shadow: 1px 1px 0 var(--retro-border-light);
|
|
3276
|
-
transition:
|
|
3524
|
+
transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
|
|
3277
3525
|
min-width: 120px;
|
|
3278
3526
|
}
|
|
3279
3527
|
.retro-dropdown-toggle:hover {
|
|
@@ -3286,7 +3534,7 @@ input[type=radio].retro-input:focus {
|
|
|
3286
3534
|
|
|
3287
3535
|
.retro-dropdown-arrow {
|
|
3288
3536
|
margin-left: 8px;
|
|
3289
|
-
font-size:
|
|
3537
|
+
font-size: var(--retro-font-size);
|
|
3290
3538
|
transition: transform 0.2s ease;
|
|
3291
3539
|
}
|
|
3292
3540
|
.open .retro-dropdown-arrow {
|
|
@@ -3306,7 +3554,7 @@ input[type=radio].retro-input:focus {
|
|
|
3306
3554
|
opacity: 0;
|
|
3307
3555
|
visibility: hidden;
|
|
3308
3556
|
transform: translateY(-10px);
|
|
3309
|
-
transition:
|
|
3557
|
+
transition: opacity 0.2s ease, transform 0.2s ease;
|
|
3310
3558
|
}
|
|
3311
3559
|
.retro-dropdown.open > .retro-dropdown-menu {
|
|
3312
3560
|
opacity: 1;
|
|
@@ -3320,10 +3568,10 @@ input[type=radio].retro-input:focus {
|
|
|
3320
3568
|
color: var(--retro-dropdown-text);
|
|
3321
3569
|
text-decoration: none;
|
|
3322
3570
|
font-family: var(--retro-font);
|
|
3323
|
-
font-size:
|
|
3571
|
+
font-size: var(--retro-font-size-lg);
|
|
3324
3572
|
background: var(--retro-dropdown-bg);
|
|
3325
3573
|
border-bottom: 1px solid var(--retro-border-light);
|
|
3326
|
-
transition:
|
|
3574
|
+
transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
|
|
3327
3575
|
white-space: nowrap;
|
|
3328
3576
|
cursor: pointer;
|
|
3329
3577
|
}
|
|
@@ -3360,7 +3608,7 @@ input[type=radio].retro-input:focus {
|
|
|
3360
3608
|
}
|
|
3361
3609
|
|
|
3362
3610
|
.retro-file-filename {
|
|
3363
|
-
font-size:
|
|
3611
|
+
font-size: var(--retro-font-size);
|
|
3364
3612
|
color: var(--retro-input-text);
|
|
3365
3613
|
margin-left: 8px;
|
|
3366
3614
|
}
|
|
@@ -3372,16 +3620,16 @@ input[type=radio].retro-input:focus {
|
|
|
3372
3620
|
background: var(--retro-input-bg);
|
|
3373
3621
|
border: 1px solid var(--retro-border-medium);
|
|
3374
3622
|
border-radius: 4px;
|
|
3375
|
-
color: var(--retro-
|
|
3376
|
-
font-size:
|
|
3623
|
+
color: var(--retro-text-muted);
|
|
3624
|
+
font-size: var(--retro-font-size-lg);
|
|
3377
3625
|
margin-top: 8px;
|
|
3378
3626
|
transition: background 0.2s, border 0.2s;
|
|
3379
3627
|
}
|
|
3380
3628
|
|
|
3381
3629
|
.retro-file-drop.dragover {
|
|
3382
|
-
background:
|
|
3383
|
-
color:
|
|
3384
|
-
border-color:
|
|
3630
|
+
background: var(--retro-primary);
|
|
3631
|
+
color: var(--retro-primary-fg);
|
|
3632
|
+
border-color: var(--retro-primary);
|
|
3385
3633
|
}
|
|
3386
3634
|
|
|
3387
3635
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
@@ -3413,7 +3661,7 @@ input[type=radio].retro-input:focus {
|
|
|
3413
3661
|
border: 1px solid var(--retro-border-medium);
|
|
3414
3662
|
border-radius: 12px;
|
|
3415
3663
|
padding: 3px 12px 3px 10px;
|
|
3416
|
-
font-size:
|
|
3664
|
+
font-size: var(--retro-font-size);
|
|
3417
3665
|
margin-right: 4px;
|
|
3418
3666
|
margin-bottom: 4px;
|
|
3419
3667
|
box-shadow: 1px 1px 0 var(--retro-border-light);
|
|
@@ -3421,21 +3669,21 @@ input[type=radio].retro-input:focus {
|
|
|
3421
3669
|
|
|
3422
3670
|
.retro-tag-remove {
|
|
3423
3671
|
margin-left: 8px;
|
|
3424
|
-
color:
|
|
3672
|
+
color: var(--retro-danger-text);
|
|
3425
3673
|
cursor: pointer;
|
|
3426
3674
|
font-weight: bold;
|
|
3427
|
-
font-size:
|
|
3675
|
+
font-size: var(--retro-font-size-lg);
|
|
3428
3676
|
transition: color 0.2s;
|
|
3429
3677
|
}
|
|
3430
3678
|
.retro-tag-remove:hover {
|
|
3431
|
-
color:
|
|
3679
|
+
color: var(--retro-primary-text);
|
|
3432
3680
|
}
|
|
3433
3681
|
|
|
3434
3682
|
.retro-tag-text {
|
|
3435
3683
|
border: none;
|
|
3436
3684
|
outline: none;
|
|
3437
3685
|
background: transparent;
|
|
3438
|
-
font-size:
|
|
3686
|
+
font-size: var(--retro-font-size);
|
|
3439
3687
|
min-width: 80px;
|
|
3440
3688
|
margin-left: 4px;
|
|
3441
3689
|
padding: 2px 0;
|
|
@@ -3456,8 +3704,8 @@ input[type=radio].retro-input:focus {
|
|
|
3456
3704
|
}
|
|
3457
3705
|
|
|
3458
3706
|
.retro-search-icon {
|
|
3459
|
-
font-size:
|
|
3460
|
-
color:
|
|
3707
|
+
font-size: var(--retro-font-size-xl);
|
|
3708
|
+
color: var(--retro-text);
|
|
3461
3709
|
margin-right: 8px;
|
|
3462
3710
|
}
|
|
3463
3711
|
|
|
@@ -3465,7 +3713,7 @@ input[type=radio].retro-input:focus {
|
|
|
3465
3713
|
border: none;
|
|
3466
3714
|
outline: none;
|
|
3467
3715
|
background: transparent;
|
|
3468
|
-
font-size:
|
|
3716
|
+
font-size: var(--retro-font-size-lg);
|
|
3469
3717
|
flex: 1;
|
|
3470
3718
|
padding: 4px 0;
|
|
3471
3719
|
color: var(--retro-input-text);
|
|
@@ -3490,7 +3738,7 @@ input[type=radio].retro-input:focus {
|
|
|
3490
3738
|
|
|
3491
3739
|
.retro-search-suggestion {
|
|
3492
3740
|
padding: 8px 12px;
|
|
3493
|
-
font-size:
|
|
3741
|
+
font-size: var(--retro-font-size-lg);
|
|
3494
3742
|
color: var(--retro-input-text);
|
|
3495
3743
|
cursor: pointer;
|
|
3496
3744
|
border-bottom: 1px solid var(--retro-border-light);
|
|
@@ -3514,15 +3762,15 @@ input[type=radio].retro-input:focus {
|
|
|
3514
3762
|
}
|
|
3515
3763
|
|
|
3516
3764
|
.retro-rating-star {
|
|
3517
|
-
font-size:
|
|
3518
|
-
color:
|
|
3765
|
+
font-size: var(--retro-font-size-3xl);
|
|
3766
|
+
color: var(--retro-border-dark);
|
|
3519
3767
|
cursor: pointer;
|
|
3520
3768
|
transition: color 0.2s, text-shadow 0.2s, border 0.2s;
|
|
3521
|
-
text-shadow: 1px 1px 0
|
|
3769
|
+
text-shadow: 1px 1px 0 var(--retro-border-light);
|
|
3522
3770
|
user-select: none;
|
|
3523
|
-
border: 2px solid
|
|
3771
|
+
border: 2px solid var(--retro-border-dark);
|
|
3524
3772
|
border-radius: 6px;
|
|
3525
|
-
background:
|
|
3773
|
+
background: var(--retro-bg);
|
|
3526
3774
|
padding: 2px 2px 0 2px;
|
|
3527
3775
|
margin-right: 2px;
|
|
3528
3776
|
box-sizing: border-box;
|
|
@@ -3534,17 +3782,17 @@ input[type=radio].retro-input:focus {
|
|
|
3534
3782
|
|
|
3535
3783
|
.retro-rating-star.selected,
|
|
3536
3784
|
.retro-rating-star.active {
|
|
3537
|
-
color:
|
|
3538
|
-
background:
|
|
3539
|
-
border-color:
|
|
3540
|
-
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);
|
|
3541
3789
|
}
|
|
3542
3790
|
|
|
3543
3791
|
.retro-rating-star:hover,
|
|
3544
3792
|
.retro-rating-star:hover ~ .retro-rating-star {
|
|
3545
|
-
color:
|
|
3546
|
-
background:
|
|
3547
|
-
border-color:
|
|
3793
|
+
color: var(--retro-warning-text);
|
|
3794
|
+
background: rgba(var(--retro-warning-rgb), 0.2);
|
|
3795
|
+
border-color: var(--retro-warning);
|
|
3548
3796
|
}
|
|
3549
3797
|
|
|
3550
3798
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
@@ -3644,16 +3892,16 @@ input[type=radio].retro-input:focus {
|
|
|
3644
3892
|
padding: 6px 10px;
|
|
3645
3893
|
background: var(--retro-black);
|
|
3646
3894
|
color: var(--retro-white);
|
|
3647
|
-
font-size:
|
|
3895
|
+
font-size: var(--retro-font-size-sm);
|
|
3648
3896
|
border-radius: 4px;
|
|
3649
3897
|
white-space: nowrap;
|
|
3650
|
-
box-shadow: 3px 3px 0 rgba(
|
|
3898
|
+
box-shadow: 3px 3px 0 rgba(var(--retro-black-rgb), 0.2);
|
|
3651
3899
|
z-index: 1050;
|
|
3652
3900
|
pointer-events: none;
|
|
3653
3901
|
opacity: 0;
|
|
3654
3902
|
visibility: hidden;
|
|
3655
3903
|
transition: opacity 0.2s, visibility 0.2s;
|
|
3656
|
-
font-family:
|
|
3904
|
+
font-family: var(--retro-font);
|
|
3657
3905
|
max-width: 200px;
|
|
3658
3906
|
line-height: 1.4;
|
|
3659
3907
|
/* Arrow */
|
|
@@ -3814,11 +4062,11 @@ input[type=radio].retro-input:focus {
|
|
|
3814
4062
|
list-style: none;
|
|
3815
4063
|
padding: 0;
|
|
3816
4064
|
margin: 0 0 var(--retro-spacing-lg) 0;
|
|
3817
|
-
font-size:
|
|
4065
|
+
font-size: var(--retro-font-size);
|
|
3818
4066
|
background: var(--retro-list-bg);
|
|
3819
4067
|
color: var(--retro-list-text);
|
|
3820
4068
|
border-radius: 6px;
|
|
3821
|
-
box-shadow: 0 1px 4px rgba(
|
|
4069
|
+
box-shadow: 0 1px 4px rgba(var(--retro-black-rgb), 0.04);
|
|
3822
4070
|
}
|
|
3823
4071
|
.retro-list li {
|
|
3824
4072
|
padding: var(--retro-spacing-sm) var(--retro-spacing-md);
|
|
@@ -3854,7 +4102,7 @@ input[type=radio].retro-input:focus {
|
|
|
3854
4102
|
.retro-list-bordered {
|
|
3855
4103
|
border: 1px solid var(--retro-border-medium);
|
|
3856
4104
|
background: var(--retro-white);
|
|
3857
|
-
box-shadow: 0 2px 8px rgba(
|
|
4105
|
+
box-shadow: 0 2px 8px rgba(var(--retro-black-rgb), 0.03);
|
|
3858
4106
|
}
|
|
3859
4107
|
.retro-list-bordered li {
|
|
3860
4108
|
border-bottom: 1px solid var(--retro-border-light);
|
|
@@ -3871,10 +4119,10 @@ input[type=radio].retro-input:focus {
|
|
|
3871
4119
|
.retro-list-hover li {
|
|
3872
4120
|
cursor: pointer;
|
|
3873
4121
|
}
|
|
3874
|
-
.retro-list-hover li:hover, .retro-list-hover li:focus {
|
|
4122
|
+
.retro-list-hover li:hover, .retro-list-hover li:focus-visible {
|
|
3875
4123
|
background-color: var(--retro-primary);
|
|
3876
4124
|
color: var(--retro-white);
|
|
3877
|
-
box-shadow: 0 2px 8px rgba(
|
|
4125
|
+
box-shadow: 0 2px 8px rgba(var(--retro-black-rgb), 0.06);
|
|
3878
4126
|
outline: none;
|
|
3879
4127
|
}
|
|
3880
4128
|
|
|
@@ -3911,7 +4159,7 @@ ol.retro-list li::before {
|
|
|
3911
4159
|
display: flex;
|
|
3912
4160
|
align-items: center;
|
|
3913
4161
|
justify-content: center;
|
|
3914
|
-
box-shadow: 0 1px 2px rgba(
|
|
4162
|
+
box-shadow: 0 1px 2px rgba(var(--retro-black-rgb), 0.08);
|
|
3915
4163
|
border: 2px solid var(--retro-border-dark);
|
|
3916
4164
|
}
|
|
3917
4165
|
ol.retro-list li ol.retro-list {
|
|
@@ -3958,7 +4206,7 @@ dl.retro-list dd {
|
|
|
3958
4206
|
background: var(--retro-bg);
|
|
3959
4207
|
border: 2px solid var(--retro-border-dark);
|
|
3960
4208
|
box-shadow: inset 2px 2px 0 var(--retro-border-light), inset -2px -2px 0 var(--retro-border-dark);
|
|
3961
|
-
font-family:
|
|
4209
|
+
font-family: var(--retro-font-mono);
|
|
3962
4210
|
margin-bottom: 1.5rem;
|
|
3963
4211
|
}
|
|
3964
4212
|
|
|
@@ -3998,12 +4246,12 @@ dl.retro-list dd {
|
|
|
3998
4246
|
height: 32px;
|
|
3999
4247
|
cursor: pointer;
|
|
4000
4248
|
z-index: 2;
|
|
4001
|
-
font-size:
|
|
4249
|
+
font-size: var(--retro-font-size-2xl);
|
|
4002
4250
|
display: flex;
|
|
4003
4251
|
align-items: center;
|
|
4004
4252
|
justify-content: center;
|
|
4005
4253
|
opacity: 1;
|
|
4006
|
-
font-family:
|
|
4254
|
+
font-family: var(--retro-font-mono);
|
|
4007
4255
|
padding: 0;
|
|
4008
4256
|
/* Add pressed state */
|
|
4009
4257
|
}
|
|
@@ -4045,6 +4293,7 @@ dl.retro-list dd {
|
|
|
4045
4293
|
box-shadow: inset 1px 1px 0 var(--retro-border-dark), inset -1px -1px 0 var(--retro-border-light);
|
|
4046
4294
|
}
|
|
4047
4295
|
|
|
4296
|
+
/* Base Styles */
|
|
4048
4297
|
/**
|
|
4049
4298
|
* @name Date/Time Input
|
|
4050
4299
|
* @group components
|
|
@@ -4090,11 +4339,17 @@ input[type=datetime-local].retro-input:focus {
|
|
|
4090
4339
|
border: 2px solid var(--retro-primary);
|
|
4091
4340
|
box-shadow: 0 0 0 2px rgba(var(--retro-primary-rgb), 0.2);
|
|
4092
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
|
+
}
|
|
4093
4348
|
input[type=date].retro-input:disabled,
|
|
4094
4349
|
input[type=time].retro-input:disabled,
|
|
4095
4350
|
input[type=datetime-local].retro-input:disabled {
|
|
4096
4351
|
background-color: var(--retro-light);
|
|
4097
|
-
color: var(--retro-
|
|
4352
|
+
color: var(--retro-text-muted);
|
|
4098
4353
|
cursor: not-allowed;
|
|
4099
4354
|
}
|
|
4100
4355
|
input[type=date].retro-input.retro-input-lg,
|
|
@@ -4220,7 +4475,7 @@ input[type=datetime-local].retro-input.retro-input-sm {
|
|
|
4220
4475
|
letter-spacing: 2px;
|
|
4221
4476
|
background: var(--retro-bg);
|
|
4222
4477
|
border: 2px solid var(--retro-border-dark);
|
|
4223
|
-
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);
|
|
4224
4479
|
padding: 4px 16px;
|
|
4225
4480
|
border-radius: 4px;
|
|
4226
4481
|
filter: blur(0.2px);
|
|
@@ -4261,7 +4516,7 @@ input[type=datetime-local].retro-input.retro-input-sm {
|
|
|
4261
4516
|
height: auto;
|
|
4262
4517
|
position: static;
|
|
4263
4518
|
overflow-y: auto;
|
|
4264
|
-
transition:
|
|
4519
|
+
transition: transform 0.3s ease, left 0.3s ease, width 0.3s ease;
|
|
4265
4520
|
color: var(--retro-sidebar-text);
|
|
4266
4521
|
}
|
|
4267
4522
|
.retro-sidebar-header {
|
|
@@ -4276,8 +4531,8 @@ input[type=datetime-local].retro-input.retro-input-sm {
|
|
|
4276
4531
|
.retro-sidebar-section-title {
|
|
4277
4532
|
font-weight: bold;
|
|
4278
4533
|
margin-bottom: var(--retro-spacing-xs, 4px);
|
|
4279
|
-
font-size:
|
|
4280
|
-
color: var(--retro-text-muted
|
|
4534
|
+
font-size: var(--retro-font-size-sm);
|
|
4535
|
+
color: var(--retro-text-muted);
|
|
4281
4536
|
}
|
|
4282
4537
|
.retro-sidebar .active {
|
|
4283
4538
|
font-weight: bold;
|
|
@@ -4306,7 +4561,7 @@ input[type=datetime-local].retro-input.retro-input-sm {
|
|
|
4306
4561
|
margin: 16px;
|
|
4307
4562
|
margin-right: 0;
|
|
4308
4563
|
border-right: 2px solid var(--retro-border-medium);
|
|
4309
|
-
box-shadow: 2px 0 5px rgba(
|
|
4564
|
+
box-shadow: 2px 0 5px rgba(var(--retro-black-rgb), 0.05);
|
|
4310
4565
|
}
|
|
4311
4566
|
}
|
|
4312
4567
|
|
|
@@ -4335,7 +4590,7 @@ input[type=datetime-local].retro-input.retro-input-sm {
|
|
|
4335
4590
|
background: var(--retro-text);
|
|
4336
4591
|
position: absolute;
|
|
4337
4592
|
left: 0;
|
|
4338
|
-
transition:
|
|
4593
|
+
transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
|
|
4339
4594
|
}
|
|
4340
4595
|
.retro-sidebar-toggle-icon:before {
|
|
4341
4596
|
top: 6px;
|
|
@@ -4359,7 +4614,7 @@ input[type=datetime-local].retro-input.retro-input-sm {
|
|
|
4359
4614
|
left: 0;
|
|
4360
4615
|
right: 0;
|
|
4361
4616
|
bottom: 0;
|
|
4362
|
-
background: rgba(
|
|
4617
|
+
background: rgba(var(--retro-black-rgb), 0.5);
|
|
4363
4618
|
z-index: 999;
|
|
4364
4619
|
}
|
|
4365
4620
|
.retro-sidebar-overlay.active {
|
|
@@ -4372,6 +4627,48 @@ input[type=datetime-local].retro-input.retro-input-sm {
|
|
|
4372
4627
|
}
|
|
4373
4628
|
|
|
4374
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
|
+
|
|
4375
4672
|
.mt-0 {
|
|
4376
4673
|
margin-top: 0px !important;
|
|
4377
4674
|
}
|
|
@@ -4813,15 +5110,15 @@ input[type=datetime-local].retro-input.retro-input-sm {
|
|
|
4813
5110
|
}
|
|
4814
5111
|
|
|
4815
5112
|
.retro-grid-areas {
|
|
4816
|
-
grid-template-areas: var(--retro-grid-areas);
|
|
5113
|
+
grid-template-areas: var(--retro-grid-areas, none);
|
|
4817
5114
|
}
|
|
4818
5115
|
|
|
4819
5116
|
.retro-col-span {
|
|
4820
|
-
grid-column: var(--retro-col-span);
|
|
5117
|
+
grid-column: var(--retro-col-span, auto);
|
|
4821
5118
|
}
|
|
4822
5119
|
|
|
4823
5120
|
.retro-row-span {
|
|
4824
|
-
grid-row: var(--retro-row-span);
|
|
5121
|
+
grid-row: var(--retro-row-span, auto);
|
|
4825
5122
|
}
|
|
4826
5123
|
|
|
4827
5124
|
@media (min-width: 0) {
|