@phantompixeldev/retrocss 1.0.7 → 2.1.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 +267 -171
- package/dist/retro.css +2822 -832
- 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 */
|
|
@@ -157,6 +227,7 @@
|
|
|
157
227
|
--retro-teal: #008080; /* Fallback for IE11 */
|
|
158
228
|
--retro-teal-rgb: 0, 128, 128; /* Fallback for IE11 */
|
|
159
229
|
--retro-tan: #d2b48c; /* Fallback for IE11 */
|
|
230
|
+
--retro-tan-rgb: 210, 180, 140;
|
|
160
231
|
--retro-pink: #ff69b4; /* Fallback for IE11 */
|
|
161
232
|
--retro-pink-rgb: 255, 105, 180; /* Fallback for IE11 */
|
|
162
233
|
--retro-lime: #32cd32; /* Fallback for IE11 */
|
|
@@ -184,12 +255,102 @@
|
|
|
184
255
|
--retro-black-rgb: 0, 0, 0; /* Fallback for IE11 */
|
|
185
256
|
--retro-white-rgb: 255, 255, 255; /* Fallback for IE11 */
|
|
186
257
|
--retro-light-rgb: 240, 240, 240; /* Fallback for IE11 */
|
|
187
|
-
--retro-
|
|
188
|
-
--retro-
|
|
189
|
-
--retro-
|
|
190
|
-
--retro-
|
|
191
|
-
--retro-
|
|
192
|
-
--retro-
|
|
258
|
+
--retro-primary-text: #000080;
|
|
259
|
+
--retro-success-text: #005900;
|
|
260
|
+
--retro-danger-text: #9c0000;
|
|
261
|
+
--retro-warning-text: #694400;
|
|
262
|
+
--retro-info-text: #005454;
|
|
263
|
+
--retro-teal-text: #005454;
|
|
264
|
+
--retro-tan-text: #604726;
|
|
265
|
+
--retro-pink-text: #97004c;
|
|
266
|
+
--retro-lime-text: #155715;
|
|
267
|
+
--retro-cyan-text: #005458;
|
|
268
|
+
--retro-orange-text: #6e4100;
|
|
269
|
+
--retro-brown-text: #67441f;
|
|
270
|
+
--retro-violet-text: #5913d0;
|
|
271
|
+
--retro-gray-text: #4b4b4b;
|
|
272
|
+
--retro-maroon-text: #800000;
|
|
273
|
+
--retro-gold-text: #584a00;
|
|
274
|
+
--retro-navy-text: #001f4f;
|
|
275
|
+
--retro-olive-text: #4e4e00;
|
|
276
|
+
--retro-silver-text: #4b4b4b;
|
|
277
|
+
--retro-primary-fg: #ffffff;
|
|
278
|
+
--retro-success-fg: #ffffff;
|
|
279
|
+
--retro-danger-fg: #000000;
|
|
280
|
+
--retro-warning-fg: #000000;
|
|
281
|
+
--retro-info-fg: #000000;
|
|
282
|
+
--retro-teal-fg: #ffffff;
|
|
283
|
+
--retro-tan-fg: #000000;
|
|
284
|
+
--retro-pink-fg: #000000;
|
|
285
|
+
--retro-lime-fg: #000000;
|
|
286
|
+
--retro-cyan-fg: #000000;
|
|
287
|
+
--retro-orange-fg: #000000;
|
|
288
|
+
--retro-brown-fg: #ffffff;
|
|
289
|
+
--retro-violet-fg: #ffffff;
|
|
290
|
+
--retro-gray-fg: #000000;
|
|
291
|
+
--retro-maroon-fg: #ffffff;
|
|
292
|
+
--retro-gold-fg: #000000;
|
|
293
|
+
--retro-navy-fg: #ffffff;
|
|
294
|
+
--retro-olive-fg: #000000;
|
|
295
|
+
--retro-silver-fg: #000000;
|
|
296
|
+
--retro-text: #000000;
|
|
297
|
+
--retro-text-muted: #4b4b4b;
|
|
298
|
+
--retro-text-inverse: #ffffff;
|
|
299
|
+
--retro-primary-hover: #0000b3;
|
|
300
|
+
--retro-primary-active: #00004d;
|
|
301
|
+
--retro-success-hover: #008500;
|
|
302
|
+
--retro-success-active: #004d00;
|
|
303
|
+
--retro-danger-hover: #ff3333;
|
|
304
|
+
--retro-danger-active: #f00000;
|
|
305
|
+
--retro-warning-hover: #ffb733;
|
|
306
|
+
--retro-warning-active: #cc8400;
|
|
307
|
+
--retro-info-hover: #33ffff;
|
|
308
|
+
--retro-info-active: #00cccc;
|
|
309
|
+
--retro-teal-hover: #008080;
|
|
310
|
+
--retro-teal-active: #004d4d;
|
|
311
|
+
--retro-tan-hover: #e0ccb1;
|
|
312
|
+
--retro-tan-active: #c49c67;
|
|
313
|
+
--retro-pink-hover: #ff9cce;
|
|
314
|
+
--retro-pink-active: #ff369b;
|
|
315
|
+
--retro-lime-hover: #5bd75b;
|
|
316
|
+
--retro-lime-active: #28a428;
|
|
317
|
+
--retro-cyan-hover: #22f7ff;
|
|
318
|
+
--retro-cyan-active: #00b4bb;
|
|
319
|
+
--retro-orange-hover: #ffc87a;
|
|
320
|
+
--retro-orange-active: #ff9e14;
|
|
321
|
+
--retro-brown-hover: #9f6930;
|
|
322
|
+
--retro-brown-active: #64421e;
|
|
323
|
+
--retro-violet-hover: #8c51ef;
|
|
324
|
+
--retro-violet-active: #5f14e0;
|
|
325
|
+
--retro-gray-hover: #cacaca;
|
|
326
|
+
--retro-gray-active: #979797;
|
|
327
|
+
--retro-maroon-hover: #b30000;
|
|
328
|
+
--retro-maroon-active: #4d0000;
|
|
329
|
+
--retro-gold-hover: #ffdf33;
|
|
330
|
+
--retro-gold-active: #ccac00;
|
|
331
|
+
--retro-navy-hover: #003382;
|
|
332
|
+
--retro-navy-active: #000b1c;
|
|
333
|
+
--retro-olive-hover: #b3b300;
|
|
334
|
+
--retro-olive-active: #7b7b00;
|
|
335
|
+
--retro-silver-hover: #dadada;
|
|
336
|
+
--retro-silver-active: #a7a7a7;
|
|
337
|
+
--retro-primary-dark: #00004d;
|
|
338
|
+
--retro-gray-100: #f0f0f0;
|
|
339
|
+
--retro-font: MS Sans Serif, Microsoft Sans Serif, Arial, sans-serif;
|
|
340
|
+
--retro-font-heading: MS Sans Serif, Microsoft Sans Serif, Arial, sans-serif;
|
|
341
|
+
--retro-font-mono: Courier New, Courier, monospace;
|
|
342
|
+
--retro-font-size: 0.875rem;
|
|
343
|
+
--retro-font-size-xs: 0.6875rem;
|
|
344
|
+
--retro-font-size-sm: 0.75rem;
|
|
345
|
+
--retro-font-size-lg: 1rem;
|
|
346
|
+
--retro-font-size-xl: 1.125rem;
|
|
347
|
+
--retro-font-size-2xl: 1.375rem;
|
|
348
|
+
--retro-font-size-3xl: 1.75rem;
|
|
349
|
+
--retro-line-height: 1.5;
|
|
350
|
+
--retro-line-height-tight: 1.25;
|
|
351
|
+
--retro-font-weight-normal: 400;
|
|
352
|
+
--retro-font-weight-bold: 700;
|
|
353
|
+
--retro-measure: 70ch;
|
|
193
354
|
--retro-spacing-xxs: 2px; /* Fallback for IE11 */
|
|
194
355
|
--retro-spacing-xs: 4px; /* Fallback for IE11 */
|
|
195
356
|
--retro-spacing-sm: 8px; /* Fallback for IE11 */
|
|
@@ -207,6 +368,9 @@
|
|
|
207
368
|
--retro-border-sunken: inset -1px -1px 0 #ffffff, inset 1px 1px 0 #000000; /* Fallback for IE11 */
|
|
208
369
|
--retro-box-shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.1); /* Fallback for IE11 */
|
|
209
370
|
--retro-box-shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.15); /* Fallback for IE11 */
|
|
371
|
+
--retro-shadow-light: #ffffff;
|
|
372
|
+
--retro-box-shadow-outset-button: inset -1px -1px 0 #000000, inset 1px 1px 0 #ffffff;
|
|
373
|
+
--retro-box-shadow-inset: inset -1px -1px 0 #ffffff, inset 1px 1px 0 #000000;
|
|
210
374
|
--retro-z-index-base: 1;
|
|
211
375
|
--retro-z-index-dropdown: 1000;
|
|
212
376
|
--retro-z-index-sticky: 1020;
|
|
@@ -220,6 +384,7 @@
|
|
|
220
384
|
--retro-transition-duration-fast: 0.05s;
|
|
221
385
|
--retro-transition-timing-function: ease;
|
|
222
386
|
--retro-transition-timing-function-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
387
|
+
--retro-transition-base: 0.1s ease;
|
|
223
388
|
--retro-container-sm: 540px;
|
|
224
389
|
--retro-container-md: 720px;
|
|
225
390
|
--retro-container-lg: 960px;
|
|
@@ -228,35 +393,49 @@
|
|
|
228
393
|
--retro-container-fluid: 100%;
|
|
229
394
|
--retro-card-bg: #f0f0f0;
|
|
230
395
|
--retro-card-header-bg: #000080;
|
|
231
|
-
--retro-card-header-text: #
|
|
232
|
-
--retro-card-content-bg: #
|
|
233
|
-
--retro-card-content-text: #
|
|
396
|
+
--retro-card-header-text: #ffffff;
|
|
397
|
+
--retro-card-content-bg: #ffffff;
|
|
398
|
+
--retro-card-content-text: #000000;
|
|
234
399
|
--retro-card-footer-bg: #f0f0f0;
|
|
235
|
-
--retro-card-footer-text: #
|
|
400
|
+
--retro-card-footer-text: #000000;
|
|
236
401
|
--retro-modal-bg: #f0f0f0;
|
|
237
402
|
--retro-modal-header-bg: #000080;
|
|
238
|
-
--retro-modal-header-text: #
|
|
239
|
-
--retro-table-bg: #
|
|
403
|
+
--retro-modal-header-text: #ffffff;
|
|
404
|
+
--retro-table-bg: #ffffff;
|
|
240
405
|
--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: #
|
|
406
|
+
--retro-table-header-text: #000000;
|
|
407
|
+
--retro-table-striped-bg: #f0f0f0;
|
|
408
|
+
--retro-input-bg: #ffffff;
|
|
409
|
+
--retro-input-text: #000000;
|
|
410
|
+
--retro-sidebar-bg: #f0f0f0;
|
|
411
|
+
--retro-sidebar-text: #000000;
|
|
412
|
+
--retro-dropdown-bg: #ffffff;
|
|
413
|
+
--retro-dropdown-text: #000000;
|
|
414
|
+
--retro-list-bg: #ffffff;
|
|
415
|
+
--retro-list-text: #000000;
|
|
416
|
+
--retro-progress-bg: #f0f0f0;
|
|
252
417
|
--retro-progress-bar-bg: #000080;
|
|
253
|
-
--retro-alert-bg: #
|
|
254
|
-
--retro-alert-text: #
|
|
255
|
-
--retro-badge-bg: #
|
|
256
|
-
--retro-badge-text: #
|
|
418
|
+
--retro-alert-bg: #f0f0f0;
|
|
419
|
+
--retro-alert-text: #000000;
|
|
420
|
+
--retro-badge-bg: #3a3a3a;
|
|
421
|
+
--retro-badge-text: #ffffff;
|
|
422
|
+
--retro-toast-bg: #ffffcc;
|
|
423
|
+
--retro-toast-text: #000000;
|
|
424
|
+
--retro-syntax-keyword: #000080;
|
|
425
|
+
--retro-syntax-string: #006e00;
|
|
426
|
+
--retro-syntax-comment: #5f6b5f;
|
|
427
|
+
--retro-syntax-function: #800080;
|
|
428
|
+
--retro-syntax-number: #b00000;
|
|
429
|
+
--retro-syntax-operator: #0000cc;
|
|
430
|
+
--retro-syntax-variable: #800000;
|
|
431
|
+
--retro-syntax-class: #006464;
|
|
432
|
+
--retro-syntax-property: #0000cc;
|
|
433
|
+
--retro-syntax-tag: #800000;
|
|
434
|
+
--retro-syntax-attribute: #a03000;
|
|
257
435
|
}
|
|
258
436
|
|
|
259
437
|
[data-theme=dark] {
|
|
438
|
+
color-scheme: dark;
|
|
260
439
|
--retro-body-bg: #181818;
|
|
261
440
|
--retro-bg: #232323;
|
|
262
441
|
--retro-primary: #4a90e2;
|
|
@@ -281,6 +460,7 @@
|
|
|
281
460
|
--retro-teal: #1abc9c;
|
|
282
461
|
--retro-teal-rgb: 26, 188, 156;
|
|
283
462
|
--retro-tan: #d4b483;
|
|
463
|
+
--retro-tan-rgb: 212, 180, 131;
|
|
284
464
|
--retro-pink: #e84393;
|
|
285
465
|
--retro-pink-rgb: 232, 67, 147;
|
|
286
466
|
--retro-lime: #00b894;
|
|
@@ -335,6 +515,101 @@
|
|
|
335
515
|
--retro-alert-text: #f3f3f3;
|
|
336
516
|
--retro-badge-bg: #444;
|
|
337
517
|
--retro-badge-text: #fff;
|
|
518
|
+
--retro-toast-bg: #2f2f22;
|
|
519
|
+
--retro-toast-text: #f3f3f3;
|
|
520
|
+
--retro-primary-text: #4b91e2;
|
|
521
|
+
--retro-success-text: #2ecc71;
|
|
522
|
+
--retro-danger-text: #ea6456;
|
|
523
|
+
--retro-warning-text: #f39c12;
|
|
524
|
+
--retro-info-text: #3498db;
|
|
525
|
+
--retro-teal-text: #1abc9c;
|
|
526
|
+
--retro-tan-text: #d4b483;
|
|
527
|
+
--retro-pink-text: #eb59a0;
|
|
528
|
+
--retro-lime-text: #00b894;
|
|
529
|
+
--retro-cyan-text: #00cec9;
|
|
530
|
+
--retro-orange-text: #e67e22;
|
|
531
|
+
--retro-brown-text: #af875e;
|
|
532
|
+
--retro-violet-text: #af7bc5;
|
|
533
|
+
--retro-gray-text: #95a5a6;
|
|
534
|
+
--retro-maroon-text: #dc6e62;
|
|
535
|
+
--retro-gold-text: #f1c40f;
|
|
536
|
+
--retro-navy-text: #7292b1; /* fill is 1.41:1 as text -- worst case in the framework */
|
|
537
|
+
--retro-olive-text: #859192;
|
|
538
|
+
--retro-silver-text: #bdc3c7;
|
|
539
|
+
--retro-primary-fg: #000000;
|
|
540
|
+
--retro-success-fg: #000000;
|
|
541
|
+
--retro-danger-fg: #000000;
|
|
542
|
+
--retro-warning-fg: #000000;
|
|
543
|
+
--retro-info-fg: #000000;
|
|
544
|
+
--retro-teal-fg: #000000;
|
|
545
|
+
--retro-tan-fg: #000000;
|
|
546
|
+
--retro-pink-fg: #000000;
|
|
547
|
+
--retro-lime-fg: #000000;
|
|
548
|
+
--retro-cyan-fg: #000000;
|
|
549
|
+
--retro-orange-fg: #000000;
|
|
550
|
+
--retro-brown-fg: #000000;
|
|
551
|
+
--retro-violet-fg: #ffffff;
|
|
552
|
+
--retro-gray-fg: #000000;
|
|
553
|
+
--retro-maroon-fg: #ffffff;
|
|
554
|
+
--retro-gold-fg: #000000;
|
|
555
|
+
--retro-navy-fg: #ffffff;
|
|
556
|
+
--retro-olive-fg: #000000;
|
|
557
|
+
--retro-silver-fg: #000000;
|
|
558
|
+
--retro-text: #f3f3f3;
|
|
559
|
+
--retro-text-muted: #a8a8a8;
|
|
560
|
+
--retro-text-inverse: #181818;
|
|
561
|
+
--retro-primary-hover: #76abe9;
|
|
562
|
+
--retro-primary-active: #2378db;
|
|
563
|
+
--retro-success-hover: #54d98c;
|
|
564
|
+
--retro-success-active: #25a25a;
|
|
565
|
+
--retro-danger-hover: #ed7669;
|
|
566
|
+
--retro-danger-active: #e32f1c;
|
|
567
|
+
--retro-warning-hover: #f5b043;
|
|
568
|
+
--retro-warning-active: #c87f0a;
|
|
569
|
+
--retro-info-hover: #5faee3;
|
|
570
|
+
--retro-info-active: #217dbb;
|
|
571
|
+
--retro-teal-hover: #28e1bd;
|
|
572
|
+
--retro-teal-active: #148f77;
|
|
573
|
+
--retro-tan-hover: #e1cba9;
|
|
574
|
+
--retro-tan-active: #c79d5d;
|
|
575
|
+
--retro-pink-hover: #ee70ad;
|
|
576
|
+
--retro-pink-active: #e21c7c;
|
|
577
|
+
--retro-lime-hover: #00ebbd;
|
|
578
|
+
--retro-lime-active: #008a6f;
|
|
579
|
+
--retro-cyan-hover: #02fff9;
|
|
580
|
+
--retro-cyan-active: #009b97;
|
|
581
|
+
--retro-orange-hover: #eb9950;
|
|
582
|
+
--retro-orange-active: #bf6516;
|
|
583
|
+
--retro-brown-hover: #b99672;
|
|
584
|
+
--retro-brown-active: #956f4a;
|
|
585
|
+
--retro-violet-hover: #9b59b6;
|
|
586
|
+
--retro-violet-active: #804399;
|
|
587
|
+
--retro-gray-hover: #b1bdbd;
|
|
588
|
+
--retro-gray-active: #798d8f;
|
|
589
|
+
--retro-maroon-hover: #d14233;
|
|
590
|
+
--retro-maroon-active: #962d22;
|
|
591
|
+
--retro-gold-hover: #f4d03f;
|
|
592
|
+
--retro-gold-active: #c29d0b;
|
|
593
|
+
--retro-navy-hover: #3e5771;
|
|
594
|
+
--retro-navy-active: #1a242f;
|
|
595
|
+
--retro-olive-hover: #9aa4a5;
|
|
596
|
+
--retro-olive-active: #6d7a7b;
|
|
597
|
+
--retro-silver-hover: #d9dcde;
|
|
598
|
+
--retro-silver-active: #a1aab0;
|
|
599
|
+
--retro-primary-dark: #2378db;
|
|
600
|
+
--retro-gray-100: #2a2b31;
|
|
601
|
+
--retro-shadow-light: #444;
|
|
602
|
+
--retro-syntax-keyword: #569cd6;
|
|
603
|
+
--retro-syntax-string: #ce9178;
|
|
604
|
+
--retro-syntax-comment: #7ba05b;
|
|
605
|
+
--retro-syntax-function: #dcdcaa;
|
|
606
|
+
--retro-syntax-number: #b5cea8;
|
|
607
|
+
--retro-syntax-operator: #9cdcfe;
|
|
608
|
+
--retro-syntax-variable: #d4d4d4;
|
|
609
|
+
--retro-syntax-class: #4ec9b0;
|
|
610
|
+
--retro-syntax-property: #9cdcfe;
|
|
611
|
+
--retro-syntax-tag: #569cd6;
|
|
612
|
+
--retro-syntax-attribute: #c8a2e0;
|
|
338
613
|
}
|
|
339
614
|
|
|
340
615
|
/* Layout Specific Variables */
|
|
@@ -343,6 +618,9 @@
|
|
|
343
618
|
/* Main SCSS file that imports all components */
|
|
344
619
|
/* Core */
|
|
345
620
|
/* Base Styles */
|
|
621
|
+
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
622
|
+
/* Main SCSS file that imports all components */
|
|
623
|
+
/* Core */
|
|
346
624
|
/* Reset & Base Styles */
|
|
347
625
|
*, *::before, *::after {
|
|
348
626
|
box-sizing: border-box;
|
|
@@ -354,16 +632,16 @@
|
|
|
354
632
|
}
|
|
355
633
|
|
|
356
634
|
html {
|
|
357
|
-
font-size:
|
|
635
|
+
font-size: 100%;
|
|
358
636
|
-webkit-text-size-adjust: 100%;
|
|
359
637
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
360
638
|
}
|
|
361
639
|
|
|
362
640
|
body {
|
|
363
|
-
font-family:
|
|
364
|
-
font-size:
|
|
365
|
-
line-height:
|
|
366
|
-
color: var(--retro-
|
|
641
|
+
font-family: var(--retro-font);
|
|
642
|
+
font-size: var(--retro-font-size);
|
|
643
|
+
line-height: var(--retro-line-height);
|
|
644
|
+
color: var(--retro-text);
|
|
367
645
|
background-color: var(--retro-body-bg);
|
|
368
646
|
-webkit-font-smoothing: antialiased;
|
|
369
647
|
-moz-osx-font-smoothing: grayscale;
|
|
@@ -383,6 +661,13 @@ a:focus {
|
|
|
383
661
|
outline: 2px solid var(--retro-primary);
|
|
384
662
|
outline-offset: 2px;
|
|
385
663
|
}
|
|
664
|
+
a:focus:not(:focus-visible) {
|
|
665
|
+
outline: none;
|
|
666
|
+
}
|
|
667
|
+
a:focus-visible {
|
|
668
|
+
outline: 2px solid var(--retro-primary);
|
|
669
|
+
outline-offset: 2px;
|
|
670
|
+
}
|
|
386
671
|
|
|
387
672
|
/* Images */
|
|
388
673
|
img {
|
|
@@ -426,22 +711,37 @@ button {
|
|
|
426
711
|
/* Code */
|
|
427
712
|
code,
|
|
428
713
|
pre {
|
|
429
|
-
font-family:
|
|
430
|
-
font-size:
|
|
714
|
+
font-family: var(--retro-font-mono);
|
|
715
|
+
font-size: var(--retro-font-size-sm);
|
|
431
716
|
}
|
|
432
717
|
|
|
433
718
|
/* Selection */
|
|
434
719
|
::selection {
|
|
435
720
|
background-color: var(--retro-primary);
|
|
436
|
-
color: var(--retro-
|
|
721
|
+
color: var(--retro-text-inverse);
|
|
437
722
|
}
|
|
438
723
|
|
|
439
|
-
/* Focus Styles
|
|
724
|
+
/* Focus Styles.
|
|
725
|
+
:focus-visible, so the ring is there for keyboard and assistive-tech users
|
|
726
|
+
but does not fire on every mouse click. The plain :focus rule is the
|
|
727
|
+
fallback for engines without :focus-visible; :focus:not(:focus-visible)
|
|
728
|
+
removes it again wherever the selector is supported. Note browsers still
|
|
729
|
+
match :focus-visible on text inputs clicked with a mouse, so fields keep
|
|
730
|
+
their ring. */
|
|
440
731
|
:focus {
|
|
441
732
|
outline: 2px solid var(--retro-primary);
|
|
442
733
|
outline-offset: 2px;
|
|
443
734
|
}
|
|
444
735
|
|
|
736
|
+
:focus:not(:focus-visible) {
|
|
737
|
+
outline: none;
|
|
738
|
+
}
|
|
739
|
+
|
|
740
|
+
:focus-visible {
|
|
741
|
+
outline: 2px solid var(--retro-primary);
|
|
742
|
+
outline-offset: 2px;
|
|
743
|
+
}
|
|
744
|
+
|
|
445
745
|
/* Print Styles */
|
|
446
746
|
@media print {
|
|
447
747
|
*,
|
|
@@ -519,12 +819,12 @@ pre {
|
|
|
519
819
|
}
|
|
520
820
|
.retro-tab-content {
|
|
521
821
|
background: var(--retro-bg);
|
|
522
|
-
border:
|
|
822
|
+
border: var(--retro-border-width) var(--retro-border-style) var(--retro-border-dark);
|
|
523
823
|
border-top: none;
|
|
524
824
|
padding: var(--retro-spacing-md);
|
|
525
825
|
margin-bottom: var(--retro-spacing-md);
|
|
526
826
|
min-height: 60px;
|
|
527
|
-
box-shadow:
|
|
827
|
+
box-shadow: var(--retro-box-shadow-subtle);
|
|
528
828
|
display: none;
|
|
529
829
|
}
|
|
530
830
|
|
|
@@ -532,44 +832,51 @@ pre {
|
|
|
532
832
|
display: block;
|
|
533
833
|
}
|
|
534
834
|
|
|
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
835
|
#retro-toast-container {
|
|
556
836
|
position: fixed;
|
|
557
|
-
bottom:
|
|
558
|
-
right:
|
|
559
|
-
z-index:
|
|
837
|
+
bottom: var(--retro-spacing-xl);
|
|
838
|
+
right: var(--retro-spacing-xl);
|
|
839
|
+
z-index: var(--retro-z-index-tooltip);
|
|
560
840
|
display: flex;
|
|
561
841
|
flex-direction: column;
|
|
562
842
|
align-items: flex-end;
|
|
563
843
|
pointer-events: none;
|
|
564
844
|
}
|
|
565
845
|
|
|
846
|
+
/* Reduced motion.
|
|
847
|
+
Honours the OS "reduce motion" setting. The blanket rule neutralises every
|
|
848
|
+
transition and animation the framework ships; the three text effects below
|
|
849
|
+
need an explicit `animation: none` on top, because merely shortening them
|
|
850
|
+
leaves a filter applied (hue-rotate) or freezes `alternate-reverse` on a
|
|
851
|
+
doubled-shadow keyframe that is unreadable (glitch). */
|
|
852
|
+
@media (prefers-reduced-motion: reduce) {
|
|
853
|
+
*,
|
|
854
|
+
*::before,
|
|
855
|
+
*::after {
|
|
856
|
+
animation-duration: 0.01ms !important;
|
|
857
|
+
animation-iteration-count: 1 !important;
|
|
858
|
+
transition-duration: 0.01ms !important;
|
|
859
|
+
scroll-behavior: auto !important;
|
|
860
|
+
}
|
|
861
|
+
.retro-text-rainbow,
|
|
862
|
+
.retro-text-hue-rotate,
|
|
863
|
+
.retro-text-glitch,
|
|
864
|
+
.retro-spinner,
|
|
865
|
+
.retro-progress-bar-striped {
|
|
866
|
+
animation: none !important;
|
|
867
|
+
}
|
|
868
|
+
.retro-text-hue-rotate {
|
|
869
|
+
filter: none !important;
|
|
870
|
+
}
|
|
871
|
+
.retro-text-glitch {
|
|
872
|
+
text-shadow: none !important;
|
|
873
|
+
}
|
|
874
|
+
}
|
|
566
875
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
567
876
|
/* Main SCSS file that imports all components */
|
|
568
877
|
/* Core */
|
|
878
|
+
/* Base Styles */
|
|
569
879
|
/* Typography Styles */
|
|
570
|
-
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
571
|
-
/* Main SCSS file that imports all components */
|
|
572
|
-
/* Core */
|
|
573
880
|
/**
|
|
574
881
|
* @name Headings
|
|
575
882
|
* @group typography
|
|
@@ -578,67 +885,60 @@ pre {
|
|
|
578
885
|
* @example scss
|
|
579
886
|
* <h1>Heading 1</h1>
|
|
580
887
|
*/
|
|
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
888
|
h1, h2, h3, h4, h5, h6 {
|
|
590
|
-
font-family:
|
|
591
|
-
font-weight: bold;
|
|
889
|
+
font-family: var(--retro-font-heading);
|
|
890
|
+
font-weight: var(--retro-font-weight-bold);
|
|
592
891
|
text-align: left;
|
|
593
|
-
margin
|
|
594
|
-
margin-bottom: 0.5em;
|
|
892
|
+
margin: var(--retro-spacing-lg) 0 var(--retro-spacing-sm);
|
|
595
893
|
border-radius: 0;
|
|
596
894
|
box-shadow: none;
|
|
597
895
|
letter-spacing: 0;
|
|
598
896
|
background: none;
|
|
599
|
-
color: var(--retro-
|
|
897
|
+
color: var(--retro-text);
|
|
600
898
|
text-shadow: none;
|
|
601
899
|
padding: 0;
|
|
900
|
+
line-height: var(--retro-line-height-tight);
|
|
602
901
|
}
|
|
603
902
|
|
|
604
903
|
h1 {
|
|
605
904
|
background: var(--retro-bg);
|
|
606
905
|
border-left: 6px solid var(--retro-primary);
|
|
607
906
|
padding: 0.18em 0.7em 0.18em 0.6em;
|
|
608
|
-
font-size:
|
|
609
|
-
margin-
|
|
907
|
+
font-size: var(--retro-font-size-3xl);
|
|
908
|
+
margin-top: var(--retro-spacing-xl);
|
|
610
909
|
}
|
|
611
910
|
|
|
612
911
|
h2 {
|
|
613
912
|
background: var(--retro-bg);
|
|
614
913
|
border-left: 4px solid var(--retro-primary);
|
|
615
914
|
padding: 0.15em 0.7em 0.15em 0.5em;
|
|
616
|
-
font-size:
|
|
617
|
-
margin-
|
|
915
|
+
font-size: var(--retro-font-size-2xl);
|
|
916
|
+
margin-top: var(--retro-spacing-xl);
|
|
618
917
|
}
|
|
619
918
|
|
|
620
919
|
h3 {
|
|
621
|
-
font-size:
|
|
622
|
-
margin-bottom: 0.4em;
|
|
920
|
+
font-size: var(--retro-font-size-xl);
|
|
623
921
|
}
|
|
624
922
|
|
|
625
|
-
h4
|
|
626
|
-
font-size:
|
|
627
|
-
|
|
628
|
-
|
|
923
|
+
h4 {
|
|
924
|
+
font-size: var(--retro-font-size-lg);
|
|
925
|
+
}
|
|
926
|
+
|
|
927
|
+
h5, h6 {
|
|
928
|
+
font-size: var(--retro-font-size);
|
|
629
929
|
}
|
|
630
930
|
|
|
631
931
|
.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:
|
|
932
|
+
padding: var(--retro-spacing-sm) var(--retro-spacing-md);
|
|
933
|
+
margin-bottom: var(--retro-spacing-md);
|
|
634
934
|
border: 2px solid;
|
|
635
935
|
position: relative;
|
|
636
|
-
font-family:
|
|
637
|
-
font-weight: bold;
|
|
936
|
+
font-family: var(--retro-font-heading);
|
|
937
|
+
font-weight: var(--retro-font-weight-bold);
|
|
638
938
|
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(
|
|
939
|
+
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);
|
|
940
|
+
text-shadow: 1px 1px 0 rgba(var(--retro-black-rgb), 0.3);
|
|
941
|
+
background: linear-gradient(to bottom, rgba(var(--retro-white-rgb), 0.1) 0%, rgba(var(--retro-white-rgb), 0) 100%);
|
|
642
942
|
transform: translateZ(0);
|
|
643
943
|
transition: transform 0.1s ease;
|
|
644
944
|
}
|
|
@@ -647,7 +947,7 @@ h4, h5, h6 {
|
|
|
647
947
|
}
|
|
648
948
|
.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
949
|
transform: translateY(1px);
|
|
650
|
-
box-shadow: inset 1px 1px 0
|
|
950
|
+
box-shadow: inset 1px 1px 0 var(--retro-shadow-light), inset -1px -1px 0 var(--retro-border-dark);
|
|
651
951
|
}
|
|
652
952
|
.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
953
|
content: "";
|
|
@@ -656,48 +956,48 @@ h4, h5, h6 {
|
|
|
656
956
|
left: 0;
|
|
657
957
|
right: 0;
|
|
658
958
|
bottom: 0;
|
|
659
|
-
background: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(
|
|
959
|
+
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
960
|
pointer-events: none;
|
|
661
961
|
}
|
|
662
962
|
.retro-heading-primary {
|
|
663
|
-
background: linear-gradient(to bottom,
|
|
664
|
-
color:
|
|
665
|
-
border-color:
|
|
963
|
+
background: linear-gradient(to bottom, var(--retro-primary) 0%, var(--retro-primary-active) 100%);
|
|
964
|
+
color: var(--retro-primary-fg);
|
|
965
|
+
border-color: var(--retro-primary-active);
|
|
666
966
|
}
|
|
667
967
|
.retro-heading-success {
|
|
668
|
-
background: linear-gradient(to bottom,
|
|
669
|
-
color:
|
|
670
|
-
border-color:
|
|
968
|
+
background: linear-gradient(to bottom, var(--retro-success) 0%, var(--retro-success-active) 100%);
|
|
969
|
+
color: var(--retro-success-fg);
|
|
970
|
+
border-color: var(--retro-success-active);
|
|
671
971
|
}
|
|
672
972
|
.retro-heading-warning {
|
|
673
|
-
background: linear-gradient(to bottom,
|
|
674
|
-
color:
|
|
675
|
-
border-color:
|
|
973
|
+
background: linear-gradient(to bottom, var(--retro-warning) 0%, var(--retro-warning-active) 100%);
|
|
974
|
+
color: var(--retro-warning-fg);
|
|
975
|
+
border-color: var(--retro-warning-active);
|
|
676
976
|
}
|
|
677
977
|
.retro-heading-danger {
|
|
678
|
-
background: linear-gradient(to bottom,
|
|
679
|
-
color:
|
|
680
|
-
border-color:
|
|
978
|
+
background: linear-gradient(to bottom, var(--retro-danger) 0%, var(--retro-danger-active) 100%);
|
|
979
|
+
color: var(--retro-danger-fg);
|
|
980
|
+
border-color: var(--retro-danger-active);
|
|
681
981
|
}
|
|
682
982
|
.retro-heading-info {
|
|
683
|
-
background: linear-gradient(to bottom,
|
|
684
|
-
color:
|
|
685
|
-
border-color:
|
|
983
|
+
background: linear-gradient(to bottom, var(--retro-info) 0%, var(--retro-info-active) 100%);
|
|
984
|
+
color: var(--retro-info-fg);
|
|
985
|
+
border-color: var(--retro-info-active);
|
|
686
986
|
}
|
|
687
987
|
.retro-heading-teal {
|
|
688
|
-
background: linear-gradient(to bottom,
|
|
689
|
-
color:
|
|
690
|
-
border-color:
|
|
988
|
+
background: linear-gradient(to bottom, var(--retro-teal) 0%, var(--retro-teal-active) 100%);
|
|
989
|
+
color: var(--retro-teal-fg);
|
|
990
|
+
border-color: var(--retro-teal-active);
|
|
691
991
|
}
|
|
692
992
|
.retro-heading-pink {
|
|
693
|
-
background: linear-gradient(to bottom,
|
|
694
|
-
color:
|
|
695
|
-
border-color:
|
|
993
|
+
background: linear-gradient(to bottom, var(--retro-pink) 0%, var(--retro-pink-active) 100%);
|
|
994
|
+
color: var(--retro-pink-fg);
|
|
995
|
+
border-color: var(--retro-pink-active);
|
|
696
996
|
}
|
|
697
997
|
.retro-heading-lime {
|
|
698
|
-
background: linear-gradient(to bottom,
|
|
699
|
-
color:
|
|
700
|
-
border-color:
|
|
998
|
+
background: linear-gradient(to bottom, var(--retro-lime) 0%, var(--retro-lime-active) 100%);
|
|
999
|
+
color: var(--retro-lime-fg);
|
|
1000
|
+
border-color: var(--retro-lime-active);
|
|
701
1001
|
}
|
|
702
1002
|
|
|
703
1003
|
/**
|
|
@@ -761,15 +1061,23 @@ h4, h5, h6 {
|
|
|
761
1061
|
}
|
|
762
1062
|
|
|
763
1063
|
.retro-text-monospace {
|
|
764
|
-
font-family:
|
|
1064
|
+
font-family: var(--retro-font-mono);
|
|
765
1065
|
}
|
|
766
1066
|
|
|
767
1067
|
.retro-text-xs {
|
|
768
|
-
font-size:
|
|
1068
|
+
font-size: var(--retro-font-size-xs);
|
|
1069
|
+
}
|
|
1070
|
+
|
|
1071
|
+
.retro-text-sm {
|
|
1072
|
+
font-size: var(--retro-font-size-sm);
|
|
769
1073
|
}
|
|
770
1074
|
|
|
771
1075
|
.retro-text-lg {
|
|
772
|
-
font-size:
|
|
1076
|
+
font-size: var(--retro-font-size-lg);
|
|
1077
|
+
}
|
|
1078
|
+
|
|
1079
|
+
.retro-text-xl {
|
|
1080
|
+
font-size: var(--retro-font-size-xl);
|
|
773
1081
|
}
|
|
774
1082
|
|
|
775
1083
|
.retro-text-strike {
|
|
@@ -777,15 +1085,15 @@ h4, h5, h6 {
|
|
|
777
1085
|
}
|
|
778
1086
|
|
|
779
1087
|
.retro-text-shadow-strong {
|
|
780
|
-
text-shadow: 2px 2px 2px
|
|
1088
|
+
text-shadow: 2px 2px 2px var(--retro-border-medium);
|
|
781
1089
|
}
|
|
782
1090
|
|
|
783
1091
|
.retro-text-shadow-soft {
|
|
784
|
-
text-shadow: 1px 1px 4px
|
|
1092
|
+
text-shadow: 1px 1px 4px var(--retro-gray);
|
|
785
1093
|
}
|
|
786
1094
|
|
|
787
1095
|
.retro-text-glow {
|
|
788
|
-
text-shadow: 0 0 6px
|
|
1096
|
+
text-shadow: 0 0 6px var(--retro-cyan), 0 0 12px var(--retro-cyan);
|
|
789
1097
|
}
|
|
790
1098
|
|
|
791
1099
|
/**
|
|
@@ -805,7 +1113,7 @@ h4, h5, h6 {
|
|
|
805
1113
|
text-fill-color: transparent;
|
|
806
1114
|
animation: rainbow-hue 3s linear infinite;
|
|
807
1115
|
font-weight: bold;
|
|
808
|
-
text-shadow: 0 1px 1px
|
|
1116
|
+
text-shadow: 0 1px 1px var(--retro-bg), 0 2px 2px rgba(var(--retro-black-rgb), 0.13);
|
|
809
1117
|
}
|
|
810
1118
|
|
|
811
1119
|
@keyframes rainbow-hue {
|
|
@@ -836,38 +1144,38 @@ h4, h5, h6 {
|
|
|
836
1144
|
background-clip: text;
|
|
837
1145
|
color: transparent;
|
|
838
1146
|
text-fill-color: transparent;
|
|
839
|
-
font-weight: bold;
|
|
840
|
-
text-shadow: 0 1px 1px
|
|
1147
|
+
font-weight: var(--retro-font-weight-bold);
|
|
1148
|
+
text-shadow: 0 1px 1px var(--retro-bg), 0 2px 2px rgba(var(--retro-black-rgb), 0.13);
|
|
841
1149
|
}
|
|
842
1150
|
|
|
843
1151
|
.retro-text-outline-strong {
|
|
844
|
-
color:
|
|
845
|
-
font-weight: bold;
|
|
846
|
-
-webkit-text-stroke: 2px
|
|
1152
|
+
color: var(--retro-bg);
|
|
1153
|
+
font-weight: var(--retro-font-weight-bold);
|
|
1154
|
+
-webkit-text-stroke: 2px var(--retro-text);
|
|
847
1155
|
text-shadow: none;
|
|
848
1156
|
}
|
|
849
1157
|
|
|
850
1158
|
.retro-text-emboss {
|
|
851
|
-
color:
|
|
852
|
-
font-weight: bold;
|
|
853
|
-
text-shadow: 1px 1px 0
|
|
1159
|
+
color: var(--retro-text);
|
|
1160
|
+
font-weight: var(--retro-font-weight-bold);
|
|
1161
|
+
text-shadow: 1px 1px 0 var(--retro-border-light), -1px -1px 0 var(--retro-border-medium);
|
|
854
1162
|
}
|
|
855
1163
|
|
|
856
1164
|
.retro-text-deboss {
|
|
857
|
-
color:
|
|
858
|
-
font-weight: bold;
|
|
859
|
-
text-shadow: 1px 1px 0
|
|
1165
|
+
color: var(--retro-text-muted);
|
|
1166
|
+
font-weight: var(--retro-font-weight-bold);
|
|
1167
|
+
text-shadow: 1px 1px 0 var(--retro-border-light), -1px -1px 0 var(--retro-border-medium);
|
|
860
1168
|
}
|
|
861
1169
|
|
|
862
1170
|
.retro-text-shadow-multicolor {
|
|
863
|
-
color:
|
|
864
|
-
font-weight: bold;
|
|
865
|
-
text-shadow: 1px 1px 0
|
|
1171
|
+
color: var(--retro-text);
|
|
1172
|
+
font-weight: var(--retro-font-weight-bold);
|
|
1173
|
+
text-shadow: 1px 1px 0 var(--retro-primary);
|
|
866
1174
|
}
|
|
867
1175
|
|
|
868
1176
|
.retro-text-glitch {
|
|
869
1177
|
position: relative;
|
|
870
|
-
color:
|
|
1178
|
+
color: var(--retro-text);
|
|
871
1179
|
text-shadow: 2px 0 #f0f, -2px 0 #0ff;
|
|
872
1180
|
animation: glitch 1s infinite linear alternate-reverse;
|
|
873
1181
|
}
|
|
@@ -900,8 +1208,8 @@ h4, h5, h6 {
|
|
|
900
1208
|
color: transparent;
|
|
901
1209
|
text-fill-color: transparent;
|
|
902
1210
|
font-weight: bold;
|
|
903
|
-
-webkit-text-stroke: 1px
|
|
904
|
-
text-shadow: 0 1px 2px
|
|
1211
|
+
-webkit-text-stroke: 1px var(--retro-border-dark);
|
|
1212
|
+
text-shadow: 0 1px 2px var(--retro-bg), 0 2px 4px rgba(var(--retro-black-rgb), 0.53);
|
|
905
1213
|
}
|
|
906
1214
|
|
|
907
1215
|
.retro-text-fire {
|
|
@@ -913,7 +1221,7 @@ h4, h5, h6 {
|
|
|
913
1221
|
text-fill-color: transparent;
|
|
914
1222
|
font-weight: bold;
|
|
915
1223
|
-webkit-text-stroke: 1px #800;
|
|
916
|
-
text-shadow: 0 1px 2px
|
|
1224
|
+
text-shadow: 0 1px 2px var(--retro-bg), 0 2px 8px #ff6600, 0 4px 16px #ff3300;
|
|
917
1225
|
}
|
|
918
1226
|
|
|
919
1227
|
/**
|
|
@@ -934,9 +1242,11 @@ h4, h5, h6 {
|
|
|
934
1242
|
position: relative;
|
|
935
1243
|
font-style: italic;
|
|
936
1244
|
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:
|
|
1245
|
+
font-family: var(--retro-font);
|
|
1246
|
+
font-size: var(--retro-font-size);
|
|
1247
|
+
line-height: var(--retro-line-height);
|
|
1248
|
+
max-width: var(--retro-measure);
|
|
1249
|
+
color: var(--retro-text);
|
|
940
1250
|
}
|
|
941
1251
|
.retro-blockquote::before {
|
|
942
1252
|
content: '"';
|
|
@@ -945,7 +1255,7 @@ h4, h5, h6 {
|
|
|
945
1255
|
position: absolute;
|
|
946
1256
|
left: 0.3rem;
|
|
947
1257
|
top: -0.2rem;
|
|
948
|
-
font-family:
|
|
1258
|
+
font-family: var(--retro-font);
|
|
949
1259
|
opacity: 0.7;
|
|
950
1260
|
}
|
|
951
1261
|
.retro-blockquote::after {
|
|
@@ -955,7 +1265,7 @@ h4, h5, h6 {
|
|
|
955
1265
|
position: absolute;
|
|
956
1266
|
right: 0.3rem;
|
|
957
1267
|
bottom: -0.5rem;
|
|
958
|
-
font-family:
|
|
1268
|
+
font-family: var(--retro-font);
|
|
959
1269
|
opacity: 0.7;
|
|
960
1270
|
}
|
|
961
1271
|
|
|
@@ -972,7 +1282,7 @@ h4, h5, h6 {
|
|
|
972
1282
|
border-left-color: var(--retro-border-light);
|
|
973
1283
|
padding: 0;
|
|
974
1284
|
margin: 1.5rem 0;
|
|
975
|
-
font-family:
|
|
1285
|
+
font-family: var(--retro-font-mono);
|
|
976
1286
|
white-space: pre-wrap;
|
|
977
1287
|
overflow-x: auto;
|
|
978
1288
|
position: relative;
|
|
@@ -985,7 +1295,7 @@ h4, h5, h6 {
|
|
|
985
1295
|
left: 0;
|
|
986
1296
|
right: 0;
|
|
987
1297
|
height: 24px;
|
|
988
|
-
background: linear-gradient(to bottom,
|
|
1298
|
+
background: linear-gradient(to bottom, var(--retro-primary) 0%, var(--retro-primary-hover) 100%);
|
|
989
1299
|
border-bottom: 1px solid var(--retro-border-dark);
|
|
990
1300
|
}
|
|
991
1301
|
.retro-code::after {
|
|
@@ -993,10 +1303,10 @@ h4, h5, h6 {
|
|
|
993
1303
|
position: absolute;
|
|
994
1304
|
top: 2px;
|
|
995
1305
|
left: 8px;
|
|
996
|
-
color:
|
|
997
|
-
font-family:
|
|
998
|
-
font-size:
|
|
999
|
-
font-weight: bold;
|
|
1306
|
+
color: var(--retro-primary-fg);
|
|
1307
|
+
font-family: var(--retro-font);
|
|
1308
|
+
font-size: var(--retro-font-size-sm);
|
|
1309
|
+
font-weight: var(--retro-font-weight-bold);
|
|
1000
1310
|
}
|
|
1001
1311
|
.retro-code .retro-code-copy {
|
|
1002
1312
|
position: absolute;
|
|
@@ -1009,10 +1319,10 @@ h4, h5, h6 {
|
|
|
1009
1319
|
border-left: 1px solid var(--retro-border-medium);
|
|
1010
1320
|
border-top: 1px solid var(--retro-border-medium);
|
|
1011
1321
|
padding: 2px 8px;
|
|
1012
|
-
font-family:
|
|
1013
|
-
font-size:
|
|
1322
|
+
font-family: var(--retro-font);
|
|
1323
|
+
font-size: var(--retro-font-size-xs);
|
|
1014
1324
|
cursor: pointer;
|
|
1015
|
-
color: var(--retro-
|
|
1325
|
+
color: var(--retro-text);
|
|
1016
1326
|
box-shadow: inset -1px -1px 0 var(--retro-shadow-light), inset 1px 1px 0 var(--retro-border-dark);
|
|
1017
1327
|
}
|
|
1018
1328
|
.retro-code .retro-code-copy:hover {
|
|
@@ -1025,115 +1335,106 @@ h4, h5, h6 {
|
|
|
1025
1335
|
display: block;
|
|
1026
1336
|
padding: 1.2rem;
|
|
1027
1337
|
padding-top: calc(1.2rem + 24px);
|
|
1028
|
-
color: var(--retro-
|
|
1029
|
-
font-size:
|
|
1030
|
-
line-height:
|
|
1338
|
+
color: var(--retro-text);
|
|
1339
|
+
font-size: var(--retro-font-size-sm);
|
|
1340
|
+
line-height: var(--retro-line-height);
|
|
1031
1341
|
}
|
|
1032
1342
|
.retro-code code .keyword {
|
|
1033
|
-
color:
|
|
1034
|
-
font-weight: bold;
|
|
1343
|
+
color: var(--retro-syntax-keyword);
|
|
1344
|
+
font-weight: var(--retro-font-weight-bold);
|
|
1035
1345
|
}
|
|
1036
1346
|
.retro-code code .string {
|
|
1037
|
-
color:
|
|
1347
|
+
color: var(--retro-syntax-string);
|
|
1038
1348
|
}
|
|
1039
1349
|
.retro-code code .comment {
|
|
1040
|
-
color:
|
|
1350
|
+
color: var(--retro-syntax-comment);
|
|
1041
1351
|
font-style: italic;
|
|
1042
1352
|
}
|
|
1043
1353
|
.retro-code code .function {
|
|
1044
|
-
color:
|
|
1354
|
+
color: var(--retro-syntax-function);
|
|
1045
1355
|
}
|
|
1046
1356
|
.retro-code code .number {
|
|
1047
|
-
color:
|
|
1357
|
+
color: var(--retro-syntax-number);
|
|
1048
1358
|
}
|
|
1049
1359
|
.retro-code code .operator {
|
|
1050
|
-
color:
|
|
1360
|
+
color: var(--retro-syntax-operator);
|
|
1051
1361
|
}
|
|
1052
1362
|
.retro-code code .variable {
|
|
1053
|
-
color:
|
|
1363
|
+
color: var(--retro-syntax-variable);
|
|
1054
1364
|
}
|
|
1055
1365
|
.retro-code code .class {
|
|
1056
|
-
color:
|
|
1366
|
+
color: var(--retro-syntax-class);
|
|
1057
1367
|
}
|
|
1058
1368
|
.retro-code code .property {
|
|
1059
|
-
color:
|
|
1369
|
+
color: var(--retro-syntax-property);
|
|
1060
1370
|
}
|
|
1061
1371
|
.retro-code code .tag {
|
|
1062
|
-
color:
|
|
1372
|
+
color: var(--retro-syntax-tag);
|
|
1063
1373
|
}
|
|
1064
1374
|
.retro-code code .attribute {
|
|
1065
|
-
color:
|
|
1375
|
+
color: var(--retro-syntax-attribute);
|
|
1066
1376
|
}
|
|
1067
1377
|
|
|
1068
1378
|
.retro-heading-variant {
|
|
1069
|
-
font-family:
|
|
1070
|
-
font-size:
|
|
1071
|
-
font-weight: bold;
|
|
1379
|
+
font-family: var(--retro-font-mono);
|
|
1380
|
+
font-size: var(--retro-font-size-2xl);
|
|
1381
|
+
font-weight: var(--retro-font-weight-bold);
|
|
1072
1382
|
text-transform: uppercase;
|
|
1073
1383
|
letter-spacing: 0.08em;
|
|
1074
1384
|
padding: 0.5rem 1.2rem;
|
|
1075
1385
|
margin-bottom: 0.5rem;
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1386
|
+
color: var(--retro-text);
|
|
1387
|
+
border: 2.5px double var(--retro-border-dark);
|
|
1388
|
+
box-shadow: inset 0 2px 8px rgba(var(--retro-white-rgb), 0.53), 0 2px 0 rgba(var(--retro-black-rgb), 0.27);
|
|
1389
|
+
background: var(--retro-bg);
|
|
1079
1390
|
display: flex;
|
|
1080
1391
|
align-items: center;
|
|
1081
1392
|
gap: 0.5em;
|
|
1082
1393
|
}
|
|
1083
1394
|
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
.
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
.retro-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
.retro-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
background: #e3f2fa;
|
|
1395
|
+
/**
|
|
1396
|
+
* @name Retro Prose
|
|
1397
|
+
* @group typography
|
|
1398
|
+
* @description
|
|
1399
|
+
* Opt-in long-form container. Caps the measure and opens up leading so an
|
|
1400
|
+
* article does not run 200-character lines edge to edge. Opt-in rather than
|
|
1401
|
+
* applied to `p` globally, which would break dashboard and form layouts.
|
|
1402
|
+
* @example scss
|
|
1403
|
+
* <article class="retro-prose">...</article>
|
|
1404
|
+
*/
|
|
1405
|
+
.retro-prose {
|
|
1406
|
+
line-height: var(--retro-line-height);
|
|
1407
|
+
}
|
|
1408
|
+
.retro-prose > p,
|
|
1409
|
+
.retro-prose > ul,
|
|
1410
|
+
.retro-prose > ol,
|
|
1411
|
+
.retro-prose > dl,
|
|
1412
|
+
.retro-prose > blockquote,
|
|
1413
|
+
.retro-prose > h1, .retro-prose > h2, .retro-prose > h3, .retro-prose > h4, .retro-prose > h5, .retro-prose > h6 {
|
|
1414
|
+
max-width: var(--retro-measure);
|
|
1415
|
+
}
|
|
1416
|
+
.retro-prose > pre,
|
|
1417
|
+
.retro-prose > table,
|
|
1418
|
+
.retro-prose > figure,
|
|
1419
|
+
.retro-prose > .retro-code,
|
|
1420
|
+
.retro-prose > .retro-table {
|
|
1421
|
+
max-width: 100%;
|
|
1112
1422
|
}
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
color: #00695c;
|
|
1116
|
-
border-color: #00695c;
|
|
1117
|
-
background: #e3faf7;
|
|
1423
|
+
.retro-prose p, .retro-prose ul, .retro-prose ol, .retro-prose blockquote, .retro-prose pre {
|
|
1424
|
+
margin-bottom: var(--retro-spacing-md);
|
|
1118
1425
|
}
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
color: #ad1457;
|
|
1122
|
-
border-color: #ad1457;
|
|
1123
|
-
background: #fae3f2;
|
|
1426
|
+
.retro-prose > :first-child {
|
|
1427
|
+
margin-top: 0;
|
|
1124
1428
|
}
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
color: #827717;
|
|
1128
|
-
border-color: #827717;
|
|
1129
|
-
background: #f7fae3;
|
|
1429
|
+
.retro-prose > :last-child {
|
|
1430
|
+
margin-bottom: 0;
|
|
1130
1431
|
}
|
|
1131
1432
|
|
|
1132
1433
|
/* Components */
|
|
1133
1434
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
1134
1435
|
/* Main SCSS file that imports all components */
|
|
1135
1436
|
/* Core */
|
|
1136
|
-
/*
|
|
1437
|
+
/* Base Styles */
|
|
1137
1438
|
/**
|
|
1138
1439
|
* @name Retro Button
|
|
1139
1440
|
* @group components
|
|
@@ -1145,121 +1446,208 @@ h4, h5, h6 {
|
|
|
1145
1446
|
/* Retro Button - Win9x Style Only */
|
|
1146
1447
|
.retro-btn {
|
|
1147
1448
|
display: inline-block;
|
|
1148
|
-
font-family:
|
|
1149
|
-
font-size:
|
|
1150
|
-
font-weight: normal;
|
|
1151
|
-
line-height:
|
|
1449
|
+
font-family: var(--retro-font);
|
|
1450
|
+
font-size: var(--retro-font-size);
|
|
1451
|
+
font-weight: var(--retro-font-weight-normal);
|
|
1452
|
+
line-height: var(--retro-line-height-tight);
|
|
1152
1453
|
text-align: center;
|
|
1153
1454
|
text-decoration: none;
|
|
1154
1455
|
vertical-align: middle;
|
|
1155
1456
|
cursor: pointer;
|
|
1156
1457
|
user-select: none;
|
|
1157
|
-
padding:
|
|
1158
|
-
border:
|
|
1458
|
+
padding: var(--retro-spacing-xs) var(--retro-spacing-md);
|
|
1459
|
+
border: var(--retro-border-width-thick) solid var(--retro-border-dark);
|
|
1159
1460
|
border-radius: 0;
|
|
1160
1461
|
background: var(--retro-light);
|
|
1161
|
-
color: var(--retro-
|
|
1162
|
-
box-shadow: inset 1px 1px 0
|
|
1462
|
+
color: var(--retro-text);
|
|
1463
|
+
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
1464
|
transition: none;
|
|
1164
1465
|
}
|
|
1165
1466
|
.retro-btn:hover {
|
|
1166
1467
|
background: var(--retro-white);
|
|
1167
|
-
box-shadow: inset -0.5px -0.5px 0
|
|
1468
|
+
box-shadow: inset -0.5px -0.5px 0 var(--retro-border-light), inset 0.5px 0.5px 0 var(--retro-border-medium);
|
|
1168
1469
|
}
|
|
1169
1470
|
.retro-btn:active {
|
|
1170
1471
|
background: var(--retro-border-medium);
|
|
1171
|
-
color: var(--retro-
|
|
1172
|
-
box-shadow: inset -1px -1px 0
|
|
1472
|
+
color: var(--retro-text-inverse);
|
|
1473
|
+
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
1474
|
}
|
|
1174
1475
|
.retro-btn:focus {
|
|
1175
|
-
outline: 1px dotted var(--retro-
|
|
1476
|
+
outline: 1px dotted var(--retro-text);
|
|
1477
|
+
outline-offset: -4px;
|
|
1478
|
+
}
|
|
1479
|
+
.retro-btn:focus:not(:focus-visible) {
|
|
1480
|
+
outline: none;
|
|
1481
|
+
}
|
|
1482
|
+
.retro-btn:focus-visible {
|
|
1483
|
+
outline: 1px dotted var(--retro-text);
|
|
1176
1484
|
outline-offset: -4px;
|
|
1177
1485
|
}
|
|
1178
1486
|
|
|
1179
1487
|
.retro-btn-primary {
|
|
1180
|
-
background:
|
|
1181
|
-
color:
|
|
1488
|
+
background: var(--retro-primary);
|
|
1489
|
+
color: var(--retro-primary-fg);
|
|
1182
1490
|
}
|
|
1183
1491
|
.retro-btn-primary:hover {
|
|
1184
|
-
background:
|
|
1492
|
+
background: var(--retro-primary-hover);
|
|
1185
1493
|
}
|
|
1186
1494
|
.retro-btn-primary:active {
|
|
1187
|
-
background:
|
|
1495
|
+
background: var(--retro-primary-active);
|
|
1188
1496
|
}
|
|
1189
1497
|
|
|
1190
1498
|
.retro-btn-success {
|
|
1191
|
-
background:
|
|
1192
|
-
color:
|
|
1499
|
+
background: var(--retro-success);
|
|
1500
|
+
color: var(--retro-success-fg);
|
|
1193
1501
|
}
|
|
1194
1502
|
.retro-btn-success:hover {
|
|
1195
|
-
background:
|
|
1503
|
+
background: var(--retro-success-hover);
|
|
1196
1504
|
}
|
|
1197
1505
|
.retro-btn-success:active {
|
|
1198
|
-
background:
|
|
1506
|
+
background: var(--retro-success-active);
|
|
1199
1507
|
}
|
|
1200
1508
|
|
|
1201
1509
|
.retro-btn-danger {
|
|
1202
|
-
background:
|
|
1203
|
-
color:
|
|
1510
|
+
background: var(--retro-danger);
|
|
1511
|
+
color: var(--retro-danger-fg);
|
|
1204
1512
|
}
|
|
1205
1513
|
.retro-btn-danger:hover {
|
|
1206
|
-
background:
|
|
1514
|
+
background: var(--retro-danger-hover);
|
|
1207
1515
|
}
|
|
1208
1516
|
.retro-btn-danger:active {
|
|
1209
|
-
background:
|
|
1517
|
+
background: var(--retro-danger-active);
|
|
1210
1518
|
}
|
|
1211
1519
|
|
|
1212
1520
|
.retro-btn-warning {
|
|
1213
|
-
background:
|
|
1214
|
-
color:
|
|
1521
|
+
background: var(--retro-warning);
|
|
1522
|
+
color: var(--retro-warning-fg);
|
|
1215
1523
|
}
|
|
1216
1524
|
.retro-btn-warning:hover {
|
|
1217
|
-
background:
|
|
1525
|
+
background: var(--retro-warning-hover);
|
|
1218
1526
|
}
|
|
1219
1527
|
.retro-btn-warning:active {
|
|
1220
|
-
background:
|
|
1528
|
+
background: var(--retro-warning-active);
|
|
1529
|
+
}
|
|
1530
|
+
|
|
1531
|
+
.retro-btn-info {
|
|
1532
|
+
background: var(--retro-info);
|
|
1533
|
+
color: var(--retro-info-fg);
|
|
1534
|
+
}
|
|
1535
|
+
.retro-btn-info:hover {
|
|
1536
|
+
background: var(--retro-info-hover);
|
|
1537
|
+
}
|
|
1538
|
+
.retro-btn-info:active {
|
|
1539
|
+
background: var(--retro-info-active);
|
|
1540
|
+
}
|
|
1541
|
+
|
|
1542
|
+
.retro-btn-teal {
|
|
1543
|
+
background: var(--retro-teal);
|
|
1544
|
+
color: var(--retro-teal-fg);
|
|
1545
|
+
}
|
|
1546
|
+
.retro-btn-teal:hover {
|
|
1547
|
+
background: var(--retro-teal-hover);
|
|
1548
|
+
}
|
|
1549
|
+
.retro-btn-teal:active {
|
|
1550
|
+
background: var(--retro-teal-active);
|
|
1221
1551
|
}
|
|
1222
1552
|
|
|
1223
1553
|
.retro-btn-xs {
|
|
1224
|
-
font-size:
|
|
1554
|
+
font-size: var(--retro-font-size-xs);
|
|
1225
1555
|
padding: 2px 8px;
|
|
1226
|
-
line-height: 1.2;
|
|
1227
1556
|
}
|
|
1228
1557
|
|
|
1229
1558
|
.retro-btn-sm {
|
|
1230
|
-
font-size:
|
|
1559
|
+
font-size: var(--retro-font-size-sm);
|
|
1231
1560
|
padding: 3px 10px;
|
|
1232
|
-
line-height: 1.3;
|
|
1233
1561
|
}
|
|
1234
1562
|
|
|
1235
1563
|
.retro-btn-md {
|
|
1236
|
-
font-size:
|
|
1564
|
+
font-size: var(--retro-font-size);
|
|
1237
1565
|
padding: 4px 12px;
|
|
1238
|
-
line-height: 1.4;
|
|
1239
1566
|
}
|
|
1240
1567
|
|
|
1241
1568
|
.retro-btn-lg {
|
|
1242
|
-
font-size:
|
|
1569
|
+
font-size: var(--retro-font-size-lg);
|
|
1243
1570
|
padding: 6px 16px;
|
|
1244
|
-
line-height: 1.5;
|
|
1245
1571
|
}
|
|
1246
1572
|
|
|
1247
1573
|
.retro-btn-xl {
|
|
1248
|
-
font-size:
|
|
1574
|
+
font-size: var(--retro-font-size-xl);
|
|
1249
1575
|
padding: 8px 20px;
|
|
1250
|
-
line-height: 1.6;
|
|
1251
1576
|
}
|
|
1252
1577
|
|
|
1253
1578
|
.retro-btn-xxl {
|
|
1254
|
-
font-size:
|
|
1579
|
+
font-size: var(--retro-font-size-2xl);
|
|
1255
1580
|
padding: 10px 24px;
|
|
1256
|
-
|
|
1581
|
+
}
|
|
1582
|
+
|
|
1583
|
+
.retro-btn-secondary {
|
|
1584
|
+
background: var(--retro-gray);
|
|
1585
|
+
color: var(--retro-gray-fg);
|
|
1586
|
+
}
|
|
1587
|
+
.retro-btn-secondary:hover {
|
|
1588
|
+
background: var(--retro-gray-hover);
|
|
1589
|
+
}
|
|
1590
|
+
.retro-btn-secondary:active {
|
|
1591
|
+
background: var(--retro-gray-active);
|
|
1592
|
+
}
|
|
1593
|
+
|
|
1594
|
+
.retro-btn-block {
|
|
1595
|
+
display: block;
|
|
1596
|
+
width: 100%;
|
|
1597
|
+
}
|
|
1598
|
+
|
|
1599
|
+
/**
|
|
1600
|
+
* @name Retro Avatar
|
|
1601
|
+
* @group components
|
|
1602
|
+
* @description
|
|
1603
|
+
* Square bevelled tile for a user glyph, emoji or initial. The demo pages were
|
|
1604
|
+
* hand-rolling this with inline width/height/flex styles on every instance.
|
|
1605
|
+
* @example html
|
|
1606
|
+
* <div class="retro-avatar retro-bg-primary">🧑💻</div>
|
|
1607
|
+
* <div class="retro-avatar retro-avatar-lg retro-bg-success">AB</div>
|
|
1608
|
+
*/
|
|
1609
|
+
.retro-avatar {
|
|
1610
|
+
display: inline-flex;
|
|
1611
|
+
align-items: center;
|
|
1612
|
+
justify-content: center;
|
|
1613
|
+
flex-shrink: 0;
|
|
1614
|
+
width: 40px;
|
|
1615
|
+
height: 40px;
|
|
1616
|
+
font-size: var(--retro-font-size-lg);
|
|
1617
|
+
line-height: 1;
|
|
1618
|
+
font-weight: var(--retro-font-weight-bold);
|
|
1619
|
+
background: var(--retro-light);
|
|
1620
|
+
color: var(--retro-text);
|
|
1621
|
+
border: var(--retro-border-width-thick) solid var(--retro-border-dark);
|
|
1622
|
+
box-shadow: var(--retro-border-raised);
|
|
1623
|
+
overflow: hidden;
|
|
1624
|
+
user-select: none;
|
|
1625
|
+
}
|
|
1626
|
+
.retro-avatar img {
|
|
1627
|
+
width: 100%;
|
|
1628
|
+
height: 100%;
|
|
1629
|
+
object-fit: cover;
|
|
1630
|
+
}
|
|
1631
|
+
.retro-avatar-sm {
|
|
1632
|
+
width: 28px;
|
|
1633
|
+
height: 28px;
|
|
1634
|
+
font-size: var(--retro-font-size-sm);
|
|
1635
|
+
}
|
|
1636
|
+
.retro-avatar-lg {
|
|
1637
|
+
width: 56px;
|
|
1638
|
+
height: 56px;
|
|
1639
|
+
font-size: var(--retro-font-size-2xl);
|
|
1640
|
+
}
|
|
1641
|
+
.retro-avatar-xl {
|
|
1642
|
+
width: 72px;
|
|
1643
|
+
height: 72px;
|
|
1644
|
+
font-size: var(--retro-font-size-3xl);
|
|
1257
1645
|
}
|
|
1258
1646
|
|
|
1259
1647
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
1260
1648
|
/* Main SCSS file that imports all components */
|
|
1261
1649
|
/* Core */
|
|
1262
|
-
/*
|
|
1650
|
+
/* Base Styles */
|
|
1263
1651
|
/**
|
|
1264
1652
|
* @name Retro Card
|
|
1265
1653
|
* @group components
|
|
@@ -1278,7 +1666,7 @@ h4, h5, h6 {
|
|
|
1278
1666
|
border-left: 2px solid var(--retro-border-medium);
|
|
1279
1667
|
border-right: 2px solid var(--retro-border-light);
|
|
1280
1668
|
border-bottom: 2px solid var(--retro-border-light);
|
|
1281
|
-
font-family:
|
|
1669
|
+
font-family: var(--retro-font);
|
|
1282
1670
|
margin-bottom: 24px;
|
|
1283
1671
|
position: relative;
|
|
1284
1672
|
}
|
|
@@ -1290,7 +1678,7 @@ h4, h5, h6 {
|
|
|
1290
1678
|
text-shadow: none;
|
|
1291
1679
|
padding: 8px 16px;
|
|
1292
1680
|
font-weight: bold;
|
|
1293
|
-
font-size:
|
|
1681
|
+
font-size: 0.875rem;
|
|
1294
1682
|
user-select: none;
|
|
1295
1683
|
display: block;
|
|
1296
1684
|
text-align: left;
|
|
@@ -1300,7 +1688,7 @@ h4, h5, h6 {
|
|
|
1300
1688
|
padding: 16px 16px;
|
|
1301
1689
|
background: var(--retro-card-content-bg);
|
|
1302
1690
|
border-top: 2px solid var(--retro-card-content-bg);
|
|
1303
|
-
font-size:
|
|
1691
|
+
font-size: 0.875rem;
|
|
1304
1692
|
color: var(--retro-card-content-text);
|
|
1305
1693
|
min-height: 2em;
|
|
1306
1694
|
text-align: left;
|
|
@@ -1311,27 +1699,27 @@ h4, h5, h6 {
|
|
|
1311
1699
|
border-top: 2px solid var(--retro-card-footer-bg);
|
|
1312
1700
|
color: var(--retro-card-footer-text);
|
|
1313
1701
|
padding: 8px 16px;
|
|
1314
|
-
font-size:
|
|
1702
|
+
font-size: 0.75rem;
|
|
1315
1703
|
text-align: left;
|
|
1316
1704
|
}
|
|
1317
1705
|
|
|
1318
1706
|
.retro-card-image {
|
|
1319
1707
|
width: 100%;
|
|
1320
1708
|
display: block;
|
|
1321
|
-
border-bottom: 2px solid
|
|
1709
|
+
border-bottom: 2px solid var(--retro-border-medium);
|
|
1322
1710
|
max-height: 140px;
|
|
1323
1711
|
object-fit: cover;
|
|
1324
1712
|
}
|
|
1325
1713
|
|
|
1326
1714
|
.retro-card-compact .retro-card-content {
|
|
1327
1715
|
padding: 4px 8px;
|
|
1328
|
-
font-size:
|
|
1716
|
+
font-size: 0.75rem;
|
|
1329
1717
|
}
|
|
1330
1718
|
|
|
1331
1719
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
1332
1720
|
/* Main SCSS file that imports all components */
|
|
1333
1721
|
/* Core */
|
|
1334
|
-
/*
|
|
1722
|
+
/* Base Styles */
|
|
1335
1723
|
/* Retro Form - Win9x Style Only */
|
|
1336
1724
|
/**
|
|
1337
1725
|
* @name Retro Form
|
|
@@ -1365,19 +1753,34 @@ h4, h5, h6 {
|
|
|
1365
1753
|
border: 2px solid var(--retro-border-dark);
|
|
1366
1754
|
box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-medium);
|
|
1367
1755
|
color: var(--retro-input-text);
|
|
1368
|
-
font-family:
|
|
1369
|
-
font-size:
|
|
1370
|
-
border-radius: 0;
|
|
1756
|
+
font-family: var(--retro-font);
|
|
1757
|
+
font-size: var(--retro-font-size);
|
|
1758
|
+
border-radius: 0 !important;
|
|
1371
1759
|
transition: none;
|
|
1372
1760
|
}
|
|
1373
1761
|
.retro-input:focus,
|
|
1374
1762
|
.retro-textarea:focus,
|
|
1375
1763
|
.retro-select:focus {
|
|
1376
|
-
outline: 1px dotted var(--retro-input-text);
|
|
1377
|
-
outline-offset: -4px;
|
|
1378
1764
|
border-color: var(--retro-primary);
|
|
1379
1765
|
box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-medium);
|
|
1380
1766
|
}
|
|
1767
|
+
.retro-input:focus,
|
|
1768
|
+
.retro-textarea:focus,
|
|
1769
|
+
.retro-select:focus {
|
|
1770
|
+
outline: 1px dotted var(--retro-text);
|
|
1771
|
+
outline-offset: -4px;
|
|
1772
|
+
}
|
|
1773
|
+
.retro-input:focus:not(:focus-visible),
|
|
1774
|
+
.retro-textarea:focus:not(:focus-visible),
|
|
1775
|
+
.retro-select:focus:not(:focus-visible) {
|
|
1776
|
+
outline: none;
|
|
1777
|
+
}
|
|
1778
|
+
.retro-input:focus-visible,
|
|
1779
|
+
.retro-textarea:focus-visible,
|
|
1780
|
+
.retro-select:focus-visible {
|
|
1781
|
+
outline: 1px dotted var(--retro-text);
|
|
1782
|
+
outline-offset: -4px;
|
|
1783
|
+
}
|
|
1381
1784
|
|
|
1382
1785
|
.retro-textarea {
|
|
1383
1786
|
min-height: 100px;
|
|
@@ -1447,33 +1850,10 @@ h4, h5, h6 {
|
|
|
1447
1850
|
color: var(--retro-color-danger);
|
|
1448
1851
|
}
|
|
1449
1852
|
|
|
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
1853
|
.retro-input,
|
|
1472
1854
|
.retro-select,
|
|
1473
1855
|
textarea {
|
|
1474
1856
|
padding: 0.5em 0.75em;
|
|
1475
|
-
border-radius: 4px;
|
|
1476
|
-
border: 1px solid #b0b0b0;
|
|
1477
1857
|
}
|
|
1478
1858
|
|
|
1479
1859
|
input[type=color].retro-input {
|
|
@@ -1482,7 +1862,7 @@ input[type=color].retro-input {
|
|
|
1482
1862
|
padding: 2px;
|
|
1483
1863
|
border-radius: 4px;
|
|
1484
1864
|
border: 2px solid var(--retro-border-dark);
|
|
1485
|
-
background: var(--retro-
|
|
1865
|
+
background: var(--retro-input-bg);
|
|
1486
1866
|
box-shadow: 1px 1px 0 var(--retro-border-light);
|
|
1487
1867
|
}
|
|
1488
1868
|
|
|
@@ -1531,30 +1911,30 @@ input[type=range].retro-input::-ms-thumb {
|
|
|
1531
1911
|
|
|
1532
1912
|
input[type=range].retro-input::-webkit-slider-runnable-track {
|
|
1533
1913
|
height: 6px;
|
|
1534
|
-
background: var(--retro-
|
|
1914
|
+
background: var(--retro-input-bg);
|
|
1535
1915
|
border-radius: 4px;
|
|
1536
1916
|
}
|
|
1537
1917
|
|
|
1538
1918
|
input[type=range].retro-input::-ms-fill-lower,
|
|
1539
1919
|
input[type=range].retro-input::-ms-fill-upper {
|
|
1540
|
-
background: var(--retro-
|
|
1920
|
+
background: var(--retro-input-bg);
|
|
1541
1921
|
}
|
|
1542
1922
|
|
|
1543
1923
|
input[type=file].retro-input {
|
|
1544
1924
|
padding: 4px;
|
|
1545
|
-
background: var(--retro-
|
|
1925
|
+
background: var(--retro-input-bg);
|
|
1546
1926
|
border: 2px solid var(--retro-border-dark);
|
|
1547
1927
|
box-shadow: 1px 1px 0 var(--retro-border-light);
|
|
1548
|
-
color: var(--retro-
|
|
1549
|
-
font-family:
|
|
1550
|
-
font-size:
|
|
1928
|
+
color: var(--retro-input-text);
|
|
1929
|
+
font-family: var(--retro-font);
|
|
1930
|
+
font-size: var(--retro-font-size);
|
|
1551
1931
|
}
|
|
1552
1932
|
|
|
1553
1933
|
.retro-input:disabled,
|
|
1554
1934
|
.retro-select:disabled,
|
|
1555
1935
|
.retro-textarea:disabled {
|
|
1556
|
-
background:
|
|
1557
|
-
color:
|
|
1936
|
+
background: var(--retro-light);
|
|
1937
|
+
color: var(--retro-text-muted);
|
|
1558
1938
|
border-color: var(--retro-border-medium);
|
|
1559
1939
|
cursor: not-allowed;
|
|
1560
1940
|
opacity: 1;
|
|
@@ -1572,8 +1952,8 @@ input[type=checkbox].retro-input,
|
|
|
1572
1952
|
input[type=radio].retro-input {
|
|
1573
1953
|
appearance: none;
|
|
1574
1954
|
-webkit-appearance: none;
|
|
1575
|
-
background:
|
|
1576
|
-
border: 2px solid
|
|
1955
|
+
background: var(--retro-input-bg);
|
|
1956
|
+
border: 2px solid var(--retro-border-medium);
|
|
1577
1957
|
width: 16px;
|
|
1578
1958
|
height: 16px;
|
|
1579
1959
|
margin: 0 8px 0 0;
|
|
@@ -1596,7 +1976,7 @@ input[type=checkbox].retro-input:checked::after {
|
|
|
1596
1976
|
top: 0px;
|
|
1597
1977
|
width: 5px;
|
|
1598
1978
|
height: 10px;
|
|
1599
|
-
border: solid
|
|
1979
|
+
border: solid var(--retro-primary);
|
|
1600
1980
|
border-width: 0 2px 2px 0;
|
|
1601
1981
|
transform: rotate(45deg);
|
|
1602
1982
|
background: none;
|
|
@@ -1614,31 +1994,103 @@ input[type=radio].retro-input:checked::after {
|
|
|
1614
1994
|
top: 4px;
|
|
1615
1995
|
width: 6px;
|
|
1616
1996
|
height: 6px;
|
|
1617
|
-
background:
|
|
1997
|
+
background: var(--retro-primary);
|
|
1618
1998
|
border-radius: 50%;
|
|
1619
1999
|
display: block;
|
|
1620
2000
|
}
|
|
1621
2001
|
|
|
1622
2002
|
input[type=checkbox].retro-input:focus,
|
|
1623
2003
|
input[type=radio].retro-input:focus {
|
|
1624
|
-
outline: 2px solid
|
|
2004
|
+
outline: 2px solid var(--retro-primary);
|
|
2005
|
+
outline-offset: 2px;
|
|
2006
|
+
}
|
|
2007
|
+
input[type=checkbox].retro-input:focus:not(:focus-visible),
|
|
2008
|
+
input[type=radio].retro-input:focus:not(:focus-visible) {
|
|
2009
|
+
outline: none;
|
|
2010
|
+
}
|
|
2011
|
+
input[type=checkbox].retro-input:focus-visible,
|
|
2012
|
+
input[type=radio].retro-input:focus-visible {
|
|
2013
|
+
outline: 2px solid var(--retro-primary);
|
|
1625
2014
|
outline-offset: 2px;
|
|
1626
2015
|
}
|
|
1627
2016
|
|
|
1628
2017
|
.retro-label {
|
|
1629
|
-
font-family:
|
|
1630
|
-
font-size:
|
|
1631
|
-
color: var(--retro-
|
|
2018
|
+
font-family: var(--retro-font);
|
|
2019
|
+
font-size: var(--retro-font-size);
|
|
2020
|
+
color: var(--retro-text);
|
|
1632
2021
|
display: inline-flex;
|
|
1633
2022
|
align-items: center;
|
|
1634
2023
|
cursor: pointer;
|
|
1635
2024
|
margin-right: 16px;
|
|
1636
2025
|
}
|
|
1637
2026
|
|
|
2027
|
+
/**
|
|
2028
|
+
* @name Form Shell
|
|
2029
|
+
* @group components
|
|
2030
|
+
* @description
|
|
2031
|
+
* Wrapper and a few pieces the demo pages referenced but the framework never
|
|
2032
|
+
* shipped: .retro-form, .retro-input-icon, .retro-file-input, .retro-listbox.
|
|
2033
|
+
*/
|
|
2034
|
+
.retro-form {
|
|
2035
|
+
display: flex;
|
|
2036
|
+
flex-direction: column;
|
|
2037
|
+
gap: var(--retro-spacing-md);
|
|
2038
|
+
width: 100%;
|
|
2039
|
+
}
|
|
2040
|
+
|
|
2041
|
+
.retro-input-icon {
|
|
2042
|
+
position: relative;
|
|
2043
|
+
display: flex;
|
|
2044
|
+
align-items: center;
|
|
2045
|
+
width: 100%;
|
|
2046
|
+
}
|
|
2047
|
+
.retro-input-icon > .retro-input,
|
|
2048
|
+
.retro-input-icon > input {
|
|
2049
|
+
width: 100%;
|
|
2050
|
+
padding-left: 2.2em;
|
|
2051
|
+
}
|
|
2052
|
+
.retro-input-icon > :first-child:not(input):not(.retro-input) {
|
|
2053
|
+
position: absolute;
|
|
2054
|
+
left: 0.6em;
|
|
2055
|
+
pointer-events: none;
|
|
2056
|
+
color: var(--retro-text-muted);
|
|
2057
|
+
line-height: 1;
|
|
2058
|
+
}
|
|
2059
|
+
|
|
2060
|
+
.retro-file-input {
|
|
2061
|
+
display: block;
|
|
2062
|
+
width: 100%;
|
|
2063
|
+
padding: var(--retro-spacing-xs);
|
|
2064
|
+
background: var(--retro-input-bg);
|
|
2065
|
+
color: var(--retro-input-text);
|
|
2066
|
+
border: var(--retro-border-width-thick) solid var(--retro-border-dark);
|
|
2067
|
+
box-shadow: var(--retro-border-sunken);
|
|
2068
|
+
font-family: var(--retro-font);
|
|
2069
|
+
font-size: var(--retro-font-size);
|
|
2070
|
+
}
|
|
2071
|
+
|
|
2072
|
+
.retro-listbox {
|
|
2073
|
+
width: 100%;
|
|
2074
|
+
padding: 0;
|
|
2075
|
+
background: var(--retro-input-bg);
|
|
2076
|
+
color: var(--retro-input-text);
|
|
2077
|
+
border: var(--retro-border-width-thick) solid var(--retro-border-dark);
|
|
2078
|
+
box-shadow: var(--retro-border-sunken);
|
|
2079
|
+
font-family: var(--retro-font);
|
|
2080
|
+
font-size: var(--retro-font-size);
|
|
2081
|
+
}
|
|
2082
|
+
.retro-listbox option {
|
|
2083
|
+
padding: var(--retro-spacing-xs) var(--retro-spacing-sm);
|
|
2084
|
+
}
|
|
2085
|
+
.retro-listbox option:checked {
|
|
2086
|
+
background: var(--retro-primary);
|
|
2087
|
+
color: var(--retro-primary-fg);
|
|
2088
|
+
}
|
|
2089
|
+
|
|
1638
2090
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
1639
2091
|
/* Main SCSS file that imports all components */
|
|
1640
2092
|
/* Core */
|
|
1641
|
-
/*
|
|
2093
|
+
/* Base Styles */
|
|
1642
2094
|
/* Retro Checkbox and Radio Styles */
|
|
1643
2095
|
/**
|
|
1644
2096
|
* @name Retro Checkbox & Radio
|
|
@@ -1662,7 +2114,7 @@ input[type=radio].retro-input:focus {
|
|
|
1662
2114
|
box-shadow: inset -1px -1px 0 var(--retro-border-light), inset 1px 1px 0 var(--retro-border-medium);
|
|
1663
2115
|
outline: none;
|
|
1664
2116
|
display: inline-block;
|
|
1665
|
-
transition:
|
|
2117
|
+
transition: background-color 0.1s, border-color 0.1s, box-shadow 0.1s;
|
|
1666
2118
|
color: var(--retro-input-text);
|
|
1667
2119
|
}
|
|
1668
2120
|
.retro-checkbox:hover,
|
|
@@ -1671,12 +2123,21 @@ input[type=radio].retro-input:focus {
|
|
|
1671
2123
|
}
|
|
1672
2124
|
.retro-checkbox:focus,
|
|
1673
2125
|
.retro-radio:focus {
|
|
1674
|
-
outline: 1px dotted var(--retro-
|
|
2126
|
+
outline: 1px dotted var(--retro-text);
|
|
2127
|
+
outline-offset: 2px;
|
|
2128
|
+
}
|
|
2129
|
+
.retro-checkbox:focus:not(:focus-visible),
|
|
2130
|
+
.retro-radio:focus:not(:focus-visible) {
|
|
2131
|
+
outline: none;
|
|
2132
|
+
}
|
|
2133
|
+
.retro-checkbox:focus-visible,
|
|
2134
|
+
.retro-radio:focus-visible {
|
|
2135
|
+
outline: 1px dotted var(--retro-text);
|
|
1675
2136
|
outline-offset: 2px;
|
|
1676
2137
|
}
|
|
1677
2138
|
.retro-checkbox:disabled,
|
|
1678
2139
|
.retro-radio:disabled {
|
|
1679
|
-
background:
|
|
2140
|
+
background: var(--retro-body-bg);
|
|
1680
2141
|
border-color: var(--retro-border-medium);
|
|
1681
2142
|
cursor: not-allowed;
|
|
1682
2143
|
opacity: 0.7;
|
|
@@ -1779,7 +2240,7 @@ input[type=radio].retro-input:focus {
|
|
|
1779
2240
|
left: 0;
|
|
1780
2241
|
right: 0;
|
|
1781
2242
|
bottom: 0;
|
|
1782
|
-
background:
|
|
2243
|
+
background: var(--retro-body-bg);
|
|
1783
2244
|
border: 2px solid var(--retro-border-dark);
|
|
1784
2245
|
box-shadow: inset -1px -1px 0 var(--retro-border-light), inset 1px 1px 0 var(--retro-border-medium);
|
|
1785
2246
|
transition: 0.1s;
|
|
@@ -1802,11 +2263,11 @@ input[type=radio].retro-input:focus {
|
|
|
1802
2263
|
.retro-switch input:checked + .retro-switch-slider:before {
|
|
1803
2264
|
transform: translateX(16px);
|
|
1804
2265
|
}
|
|
1805
|
-
.retro-switch input:focus + .retro-switch-slider {
|
|
1806
|
-
outline: 1px dotted var(--retro-
|
|
2266
|
+
.retro-switch input:focus-visible + .retro-switch-slider {
|
|
2267
|
+
outline: 1px dotted var(--retro-text);
|
|
1807
2268
|
}
|
|
1808
2269
|
.retro-switch input:disabled + .retro-switch-slider {
|
|
1809
|
-
background:
|
|
2270
|
+
background: var(--retro-body-bg);
|
|
1810
2271
|
opacity: 0.7;
|
|
1811
2272
|
cursor: not-allowed;
|
|
1812
2273
|
}
|
|
@@ -1849,7 +2310,7 @@ input[type=radio].retro-input:focus {
|
|
|
1849
2310
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
1850
2311
|
/* Main SCSS file that imports all components */
|
|
1851
2312
|
/* Core */
|
|
1852
|
-
/*
|
|
2313
|
+
/* Base Styles */
|
|
1853
2314
|
/**
|
|
1854
2315
|
* @name Retro Alert
|
|
1855
2316
|
* @group components
|
|
@@ -1890,7 +2351,7 @@ input[type=radio].retro-input:focus {
|
|
|
1890
2351
|
border-left: 2px solid var(--retro-border-medium);
|
|
1891
2352
|
border-top: 2px solid var(--retro-border-medium);
|
|
1892
2353
|
border-radius: 0 !important;
|
|
1893
|
-
font-family:
|
|
2354
|
+
font-family: var(--retro-font-heading);
|
|
1894
2355
|
box-shadow: none;
|
|
1895
2356
|
margin-bottom: 1.2em;
|
|
1896
2357
|
padding: 0.7em 1.2em;
|
|
@@ -1899,6 +2360,15 @@ input[type=radio].retro-input:focus {
|
|
|
1899
2360
|
display: block;
|
|
1900
2361
|
}
|
|
1901
2362
|
|
|
2363
|
+
.retro-alert-header {
|
|
2364
|
+
width: 100%;
|
|
2365
|
+
margin: 0 0 var(--retro-spacing-xs);
|
|
2366
|
+
font-weight: var(--retro-font-weight-bold);
|
|
2367
|
+
font-size: var(--retro-font-size-lg);
|
|
2368
|
+
color: inherit;
|
|
2369
|
+
text-align: left;
|
|
2370
|
+
}
|
|
2371
|
+
|
|
1902
2372
|
.retro-alert-body, .retro-toast-body {
|
|
1903
2373
|
padding: 0;
|
|
1904
2374
|
margin: 0;
|
|
@@ -1911,44 +2381,44 @@ input[type=radio].retro-input:focus {
|
|
|
1911
2381
|
width: 100%;
|
|
1912
2382
|
margin: 0;
|
|
1913
2383
|
padding: 0.3em 1em 0.2em 1em;
|
|
1914
|
-
font-size:
|
|
2384
|
+
font-size: var(--retro-font-size-sm);
|
|
1915
2385
|
font-family: inherit;
|
|
1916
2386
|
border-radius: 0;
|
|
1917
2387
|
box-shadow: none;
|
|
1918
|
-
border-top: 2px solid rgba(
|
|
1919
|
-
background:
|
|
1920
|
-
color:
|
|
2388
|
+
border-top: 2px solid rgba(var(--retro-black-rgb), 0.12);
|
|
2389
|
+
background: var(--retro-light);
|
|
2390
|
+
color: var(--retro-text);
|
|
1921
2391
|
text-align: left;
|
|
1922
2392
|
}
|
|
1923
2393
|
|
|
1924
2394
|
.retro-alert-primary .retro-alert-footer {
|
|
1925
|
-
background:
|
|
1926
|
-
color:
|
|
1927
|
-
border-top: 2px solid
|
|
2395
|
+
background: var(--retro-primary-active);
|
|
2396
|
+
color: var(--retro-primary-fg);
|
|
2397
|
+
border-top: 2px solid var(--retro-primary-active);
|
|
1928
2398
|
}
|
|
1929
2399
|
|
|
1930
2400
|
.retro-alert-success .retro-alert-footer {
|
|
1931
|
-
background:
|
|
1932
|
-
color:
|
|
1933
|
-
border-top: 2px solid
|
|
2401
|
+
background: var(--retro-success-active);
|
|
2402
|
+
color: var(--retro-success-fg);
|
|
2403
|
+
border-top: 2px solid var(--retro-success-active);
|
|
1934
2404
|
}
|
|
1935
2405
|
|
|
1936
2406
|
.retro-alert-danger .retro-alert-footer {
|
|
1937
|
-
background:
|
|
1938
|
-
color:
|
|
1939
|
-
border-top: 2px solid
|
|
2407
|
+
background: var(--retro-danger-active);
|
|
2408
|
+
color: var(--retro-danger-fg);
|
|
2409
|
+
border-top: 2px solid var(--retro-danger-active);
|
|
1940
2410
|
}
|
|
1941
2411
|
|
|
1942
2412
|
.retro-alert-warning .retro-alert-footer {
|
|
1943
|
-
background:
|
|
1944
|
-
color:
|
|
1945
|
-
border-top: 2px solid
|
|
2413
|
+
background: var(--retro-warning-active);
|
|
2414
|
+
color: var(--retro-warning-fg);
|
|
2415
|
+
border-top: 2px solid var(--retro-warning-active);
|
|
1946
2416
|
}
|
|
1947
2417
|
|
|
1948
2418
|
.retro-alert-info .retro-alert-footer {
|
|
1949
|
-
background:
|
|
1950
|
-
color:
|
|
1951
|
-
border-top: 2px solid
|
|
2419
|
+
background: var(--retro-info-active);
|
|
2420
|
+
color: var(--retro-info-fg);
|
|
2421
|
+
border-top: 2px solid var(--retro-info-active);
|
|
1952
2422
|
}
|
|
1953
2423
|
|
|
1954
2424
|
.retro-alert-icon, .retro-toast-icon, .retro-alert-close, .retro-toast-close {
|
|
@@ -1956,40 +2426,40 @@ input[type=radio].retro-input:focus {
|
|
|
1956
2426
|
}
|
|
1957
2427
|
|
|
1958
2428
|
.retro-toast-primary, .retro-toast.retro-alert-primary {
|
|
1959
|
-
background:
|
|
1960
|
-
color:
|
|
1961
|
-
border-left: 6px solid
|
|
2429
|
+
background: var(--retro-primary);
|
|
2430
|
+
color: var(--retro-primary-fg);
|
|
2431
|
+
border-left: 6px solid var(--retro-primary-active);
|
|
1962
2432
|
}
|
|
1963
2433
|
|
|
1964
2434
|
.retro-toast-success, .retro-toast.retro-alert-success {
|
|
1965
|
-
background:
|
|
1966
|
-
color:
|
|
1967
|
-
border-left: 6px solid
|
|
2435
|
+
background: var(--retro-success);
|
|
2436
|
+
color: var(--retro-success-fg);
|
|
2437
|
+
border-left: 6px solid var(--retro-success-active);
|
|
1968
2438
|
}
|
|
1969
2439
|
|
|
1970
2440
|
.retro-toast-danger, .retro-toast.retro-alert-danger {
|
|
1971
|
-
background:
|
|
1972
|
-
color:
|
|
1973
|
-
border-left: 6px solid
|
|
2441
|
+
background: var(--retro-danger);
|
|
2442
|
+
color: var(--retro-danger-fg);
|
|
2443
|
+
border-left: 6px solid var(--retro-danger-active);
|
|
1974
2444
|
}
|
|
1975
2445
|
|
|
1976
2446
|
.retro-toast-warning, .retro-toast.retro-alert-warning {
|
|
1977
|
-
background:
|
|
1978
|
-
color:
|
|
1979
|
-
border-left: 6px solid
|
|
2447
|
+
background: var(--retro-warning);
|
|
2448
|
+
color: var(--retro-warning-fg);
|
|
2449
|
+
border-left: 6px solid var(--retro-warning-active);
|
|
1980
2450
|
}
|
|
1981
2451
|
|
|
1982
2452
|
.retro-toast-info, .retro-toast.retro-alert-info {
|
|
1983
|
-
background:
|
|
1984
|
-
color:
|
|
1985
|
-
border-left: 6px solid
|
|
2453
|
+
background: var(--retro-info);
|
|
2454
|
+
color: var(--retro-info-fg);
|
|
2455
|
+
border-left: 6px solid var(--retro-info-active);
|
|
1986
2456
|
}
|
|
1987
2457
|
|
|
1988
2458
|
.retro-toast-close {
|
|
1989
2459
|
background: none;
|
|
1990
2460
|
border: none;
|
|
1991
2461
|
color: inherit;
|
|
1992
|
-
font-size:
|
|
2462
|
+
font-size: var(--retro-font-size-xl);
|
|
1993
2463
|
font-weight: bold;
|
|
1994
2464
|
margin-left: auto;
|
|
1995
2465
|
cursor: pointer;
|
|
@@ -2002,42 +2472,45 @@ input[type=radio].retro-input:focus {
|
|
|
2002
2472
|
}
|
|
2003
2473
|
|
|
2004
2474
|
.retro-alert-primary {
|
|
2005
|
-
background:
|
|
2006
|
-
color:
|
|
2007
|
-
border-left: 6px solid
|
|
2475
|
+
background: var(--retro-primary);
|
|
2476
|
+
color: var(--retro-primary-fg);
|
|
2477
|
+
border-left: 6px solid var(--retro-primary-active);
|
|
2008
2478
|
}
|
|
2009
2479
|
|
|
2010
2480
|
.retro-alert-success {
|
|
2011
|
-
background:
|
|
2012
|
-
color:
|
|
2013
|
-
border-left: 6px solid
|
|
2481
|
+
background: var(--retro-success);
|
|
2482
|
+
color: var(--retro-success-fg);
|
|
2483
|
+
border-left: 6px solid var(--retro-success-active);
|
|
2014
2484
|
}
|
|
2015
2485
|
|
|
2016
2486
|
.retro-alert-danger {
|
|
2017
|
-
background:
|
|
2018
|
-
color:
|
|
2019
|
-
border-left: 6px solid
|
|
2487
|
+
background: var(--retro-danger);
|
|
2488
|
+
color: var(--retro-danger-fg);
|
|
2489
|
+
border-left: 6px solid var(--retro-danger-active);
|
|
2020
2490
|
}
|
|
2021
2491
|
|
|
2022
2492
|
.retro-alert-warning {
|
|
2023
|
-
background:
|
|
2024
|
-
color:
|
|
2025
|
-
border-left: 6px solid
|
|
2493
|
+
background: var(--retro-warning);
|
|
2494
|
+
color: var(--retro-warning-fg);
|
|
2495
|
+
border-left: 6px solid var(--retro-warning-active);
|
|
2026
2496
|
}
|
|
2027
2497
|
|
|
2028
2498
|
.retro-alert-info {
|
|
2029
|
-
background:
|
|
2030
|
-
color:
|
|
2031
|
-
border-left: 6px solid
|
|
2499
|
+
background: var(--retro-info);
|
|
2500
|
+
color: var(--retro-info-fg);
|
|
2501
|
+
border-left: 6px solid var(--retro-info-active);
|
|
2032
2502
|
}
|
|
2033
2503
|
|
|
2034
2504
|
.retro-toast {
|
|
2035
|
-
box-shadow: 2px 4px 16px rgba(
|
|
2505
|
+
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
2506
|
border-width: 1.5px;
|
|
2037
2507
|
margin-bottom: 0.75em;
|
|
2038
2508
|
animation: retro-toast-fadein 0.3s;
|
|
2039
2509
|
min-width: 240px;
|
|
2040
2510
|
max-width: 400px;
|
|
2511
|
+
position: relative;
|
|
2512
|
+
z-index: var(--retro-z-index-tooltip);
|
|
2513
|
+
pointer-events: auto;
|
|
2041
2514
|
}
|
|
2042
2515
|
|
|
2043
2516
|
@keyframes retro-toast-fadein {
|
|
@@ -2050,34 +2523,6 @@ input[type=radio].retro-input:focus {
|
|
|
2050
2523
|
transform: translateY(0);
|
|
2051
2524
|
}
|
|
2052
2525
|
}
|
|
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
2526
|
.retro-alert-main, .retro-toast-main {
|
|
2082
2527
|
display: flex;
|
|
2083
2528
|
flex-direction: row;
|
|
@@ -2096,40 +2541,10 @@ input[type=radio].retro-input:focus {
|
|
|
2096
2541
|
display: flex;
|
|
2097
2542
|
align-items: center;
|
|
2098
2543
|
justify-content: center;
|
|
2099
|
-
font-size:
|
|
2544
|
+
font-size: var(--retro-font-size-lg);
|
|
2100
2545
|
flex-shrink: 0;
|
|
2101
2546
|
}
|
|
2102
2547
|
|
|
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
2548
|
.retro-alert-primary .retro-alert-icon::before, .retro-toast-primary .retro-toast-icon::before {
|
|
2134
2549
|
content: "ℹ"; /* ℹ */
|
|
2135
2550
|
}
|
|
@@ -2162,11 +2577,9 @@ input[type=radio].retro-input:focus {
|
|
|
2162
2577
|
|
|
2163
2578
|
.retro-alert {
|
|
2164
2579
|
margin-bottom: 1.25rem;
|
|
2165
|
-
border-radius: 6px;
|
|
2166
|
-
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
2167
2580
|
}
|
|
2168
2581
|
|
|
2169
|
-
/*
|
|
2582
|
+
/* Base Styles */
|
|
2170
2583
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
2171
2584
|
/* Main SCSS file that imports all components */
|
|
2172
2585
|
/* Core */
|
|
@@ -2197,8 +2610,8 @@ input[type=radio].retro-input:focus {
|
|
|
2197
2610
|
border: 1px solid var(--retro-border-dark);
|
|
2198
2611
|
background-color: var(--retro-table-bg);
|
|
2199
2612
|
color: var(--retro-table-header-text);
|
|
2200
|
-
font-family:
|
|
2201
|
-
font-size:
|
|
2613
|
+
font-family: var(--retro-font);
|
|
2614
|
+
font-size: 0.875rem;
|
|
2202
2615
|
box-shadow: var(--retro-box-shadow-outset-button);
|
|
2203
2616
|
overflow-x: auto;
|
|
2204
2617
|
margin-bottom: var(--retro-spacing-md);
|
|
@@ -2274,7 +2687,7 @@ input[type=radio].retro-input:focus {
|
|
|
2274
2687
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
2275
2688
|
/* Main SCSS file that imports all components */
|
|
2276
2689
|
/* Core */
|
|
2277
|
-
/*
|
|
2690
|
+
/* Base Styles */
|
|
2278
2691
|
/**
|
|
2279
2692
|
* @name Retro Modal
|
|
2280
2693
|
* @group components
|
|
@@ -2303,7 +2716,7 @@ input[type=radio].retro-input:focus {
|
|
|
2303
2716
|
display: none;
|
|
2304
2717
|
overflow: auto;
|
|
2305
2718
|
outline: 0;
|
|
2306
|
-
background: rgba(
|
|
2719
|
+
background: rgba(var(--retro-black-rgb), 0.6);
|
|
2307
2720
|
padding: 1rem;
|
|
2308
2721
|
box-sizing: border-box;
|
|
2309
2722
|
text-align: center;
|
|
@@ -2325,11 +2738,11 @@ input[type=radio].retro-input:focus {
|
|
|
2325
2738
|
width: 100%;
|
|
2326
2739
|
max-width: 500px;
|
|
2327
2740
|
margin: 1.75rem auto;
|
|
2328
|
-
background: var(--retro-bg);
|
|
2741
|
+
background: var(--retro-modal-bg);
|
|
2329
2742
|
border: 2px solid var(--retro-border-dark);
|
|
2330
|
-
box-shadow: 4px 4px 8px rgba(
|
|
2743
|
+
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
2744
|
border-radius: 4px !important;
|
|
2332
|
-
font-family:
|
|
2745
|
+
font-family: var(--retro-font-heading);
|
|
2333
2746
|
transition: none;
|
|
2334
2747
|
text-align: left;
|
|
2335
2748
|
vertical-align: middle;
|
|
@@ -2339,34 +2752,34 @@ input[type=radio].retro-input:focus {
|
|
|
2339
2752
|
align-items: center;
|
|
2340
2753
|
justify-content: space-between;
|
|
2341
2754
|
padding: 8px 24px;
|
|
2342
|
-
background: var(--retro-
|
|
2343
|
-
color:
|
|
2755
|
+
background: var(--retro-modal-header-bg);
|
|
2756
|
+
color: var(--retro-modal-header-text);
|
|
2344
2757
|
border-top: 2px solid var(--retro-border-light);
|
|
2345
2758
|
border-bottom: 2px solid var(--retro-border-dark);
|
|
2346
|
-
border-left: 8px solid var(--retro-
|
|
2759
|
+
border-left: 8px solid var(--retro-modal-header-bg);
|
|
2347
2760
|
border-radius: 4px 4px 0 0 !important;
|
|
2348
|
-
font-family:
|
|
2349
|
-
font-size:
|
|
2761
|
+
font-family: var(--retro-font-heading);
|
|
2762
|
+
font-size: var(--retro-font-size-lg);
|
|
2350
2763
|
font-weight: bold;
|
|
2351
2764
|
line-height: 1.5;
|
|
2352
2765
|
user-select: none;
|
|
2353
2766
|
letter-spacing: 0.5px;
|
|
2354
|
-
text-shadow: 1px 1px 0
|
|
2767
|
+
text-shadow: 1px 1px 0 rgba(var(--retro-black-rgb), 0.8), 0 1px 0 rgba(var(--retro-black-rgb), 0.8);
|
|
2355
2768
|
}
|
|
2356
2769
|
.retro-modal-close {
|
|
2357
2770
|
display: flex;
|
|
2358
2771
|
align-items: center;
|
|
2359
2772
|
justify-content: center;
|
|
2360
2773
|
margin-left: var(--retro-spacing-sm);
|
|
2361
|
-
background:
|
|
2362
|
-
border: 2px outset
|
|
2774
|
+
background: var(--retro-light);
|
|
2775
|
+
border: 2px outset var(--retro-border-light);
|
|
2363
2776
|
box-shadow: none;
|
|
2364
2777
|
width: 22px;
|
|
2365
2778
|
height: 22px;
|
|
2366
2779
|
padding: 0;
|
|
2367
|
-
font-size:
|
|
2780
|
+
font-size: var(--retro-font-size-xl);
|
|
2368
2781
|
line-height: 1;
|
|
2369
|
-
color:
|
|
2782
|
+
color: var(--retro-text);
|
|
2370
2783
|
text-shadow: none;
|
|
2371
2784
|
cursor: pointer;
|
|
2372
2785
|
border-radius: 2px;
|
|
@@ -2374,12 +2787,12 @@ input[type=radio].retro-input:focus {
|
|
|
2374
2787
|
transition: background 0.1s, border 0.1s;
|
|
2375
2788
|
}
|
|
2376
2789
|
.retro-modal-close:hover {
|
|
2377
|
-
background:
|
|
2378
|
-
border: 2px inset
|
|
2790
|
+
background: var(--retro-gray-100);
|
|
2791
|
+
border: 2px inset var(--retro-border-light);
|
|
2379
2792
|
}
|
|
2380
2793
|
.retro-modal-close:active {
|
|
2381
|
-
background:
|
|
2382
|
-
border: 2px inset
|
|
2794
|
+
background: var(--retro-border-medium);
|
|
2795
|
+
border: 2px inset var(--retro-border-dark);
|
|
2383
2796
|
}
|
|
2384
2797
|
.retro-modal-body {
|
|
2385
2798
|
position: relative;
|
|
@@ -2418,7 +2831,7 @@ input[type=radio].retro-input:focus {
|
|
|
2418
2831
|
left: 0;
|
|
2419
2832
|
right: 0;
|
|
2420
2833
|
bottom: 0;
|
|
2421
|
-
background: rgba(
|
|
2834
|
+
background: rgba(var(--retro-black-rgb), 0.5);
|
|
2422
2835
|
z-index: 1040;
|
|
2423
2836
|
}
|
|
2424
2837
|
.retro-modal-scroll {
|
|
@@ -2443,18 +2856,18 @@ input[type=radio].retro-input:focus {
|
|
|
2443
2856
|
.retro-modal-header h4,
|
|
2444
2857
|
.retro-modal-header h5,
|
|
2445
2858
|
.retro-modal-header h6 {
|
|
2446
|
-
color:
|
|
2447
|
-
font-size:
|
|
2859
|
+
color: var(--retro-modal-header-text);
|
|
2860
|
+
font-size: var(--retro-font-size-xl);
|
|
2448
2861
|
font-weight: bold;
|
|
2449
2862
|
margin: 0;
|
|
2450
2863
|
font-family: inherit;
|
|
2451
|
-
text-shadow: 1px 1px 0
|
|
2864
|
+
text-shadow: 1px 1px 0 rgba(var(--retro-black-rgb), 0.8), 0 1px 0 rgba(var(--retro-black-rgb), 0.8);
|
|
2452
2865
|
}
|
|
2453
2866
|
|
|
2454
2867
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
2455
2868
|
/* Main SCSS file that imports all components */
|
|
2456
2869
|
/* Core */
|
|
2457
|
-
/*
|
|
2870
|
+
/* Base Styles */
|
|
2458
2871
|
/* Retro Nav - Win9x Style Only */
|
|
2459
2872
|
/**
|
|
2460
2873
|
* @name Retro Navigation
|
|
@@ -2478,7 +2891,7 @@ input[type=radio].retro-input:focus {
|
|
|
2478
2891
|
border: 2px solid var(--retro-border-dark);
|
|
2479
2892
|
border-radius: 0;
|
|
2480
2893
|
box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-medium);
|
|
2481
|
-
font-family:
|
|
2894
|
+
font-family: var(--retro-font);
|
|
2482
2895
|
transition: none;
|
|
2483
2896
|
}
|
|
2484
2897
|
|
|
@@ -2490,7 +2903,7 @@ input[type=radio].retro-input:focus {
|
|
|
2490
2903
|
border-radius: 0;
|
|
2491
2904
|
background: var(--retro-light);
|
|
2492
2905
|
border-right: 1px solid var(--retro-border-medium);
|
|
2493
|
-
font-family:
|
|
2906
|
+
font-family: var(--retro-font);
|
|
2494
2907
|
transition: none;
|
|
2495
2908
|
}
|
|
2496
2909
|
.retro-nav-item:hover, .retro-tab:hover {
|
|
@@ -2504,10 +2917,19 @@ input[type=radio].retro-input:focus {
|
|
|
2504
2917
|
outline: 2px solid var(--retro-border-light);
|
|
2505
2918
|
outline-offset: -2px;
|
|
2506
2919
|
}
|
|
2920
|
+
.retro-nav-item:focus-visible, .retro-tab:focus-visible {
|
|
2921
|
+
z-index: 2;
|
|
2922
|
+
}
|
|
2507
2923
|
.retro-nav-item:focus, .retro-tab:focus {
|
|
2508
|
-
outline: 2px
|
|
2924
|
+
outline: 2px solid var(--retro-primary);
|
|
2925
|
+
outline-offset: 2px;
|
|
2926
|
+
}
|
|
2927
|
+
.retro-nav-item:focus:not(:focus-visible), .retro-tab:focus:not(:focus-visible) {
|
|
2928
|
+
outline: none;
|
|
2929
|
+
}
|
|
2930
|
+
.retro-nav-item:focus-visible, .retro-tab:focus-visible {
|
|
2931
|
+
outline: 2px solid var(--retro-primary);
|
|
2509
2932
|
outline-offset: 2px;
|
|
2510
|
-
z-index: 2;
|
|
2511
2933
|
}
|
|
2512
2934
|
|
|
2513
2935
|
.retro-tab {
|
|
@@ -2522,8 +2944,8 @@ input[type=radio].retro-input:focus {
|
|
|
2522
2944
|
min-width: 80px;
|
|
2523
2945
|
height: 32px;
|
|
2524
2946
|
box-shadow: none;
|
|
2525
|
-
font-family:
|
|
2526
|
-
font-size:
|
|
2947
|
+
font-family: var(--retro-font);
|
|
2948
|
+
font-size: var(--retro-font-size-lg);
|
|
2527
2949
|
font-weight: normal;
|
|
2528
2950
|
color: var(--retro-black);
|
|
2529
2951
|
transition: background 0.2s, color 0.2s;
|
|
@@ -2635,7 +3057,7 @@ input[type=radio].retro-input:focus {
|
|
|
2635
3057
|
border: 2px solid var(--retro-border-dark);
|
|
2636
3058
|
border-radius: 0;
|
|
2637
3059
|
box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-medium);
|
|
2638
|
-
font-family:
|
|
3060
|
+
font-family: var(--retro-font);
|
|
2639
3061
|
}
|
|
2640
3062
|
.retro-nav-toolbar .retro-nav-item, .retro-nav-toolbar .retro-tab {
|
|
2641
3063
|
display: flex;
|
|
@@ -2671,7 +3093,7 @@ input[type=radio].retro-input:focus {
|
|
|
2671
3093
|
font-weight: normal;
|
|
2672
3094
|
}
|
|
2673
3095
|
.retro-nav-toolbar .retro-nav-item .retro-nav-icon, .retro-nav-toolbar .retro-tab .retro-nav-icon {
|
|
2674
|
-
font-size:
|
|
3096
|
+
font-size: var(--retro-font-size-xl);
|
|
2675
3097
|
margin-right: 4px;
|
|
2676
3098
|
}
|
|
2677
3099
|
.retro-nav-toolbar.retro-nav-icons .retro-nav-item, .retro-nav-toolbar.retro-nav-icons .retro-tab {
|
|
@@ -2804,6 +3226,33 @@ input[type=radio].retro-input:focus {
|
|
|
2804
3226
|
z-index: 2;
|
|
2805
3227
|
}
|
|
2806
3228
|
|
|
3229
|
+
/**
|
|
3230
|
+
* @name Tab Panes
|
|
3231
|
+
* @group components
|
|
3232
|
+
* @description
|
|
3233
|
+
* Panel bodies for the tabbed / underlined / button nav variants. Referenced by
|
|
3234
|
+
* the demos but never defined, so tab content rendered unstyled and every pane
|
|
3235
|
+
* stayed visible at once.
|
|
3236
|
+
*/
|
|
3237
|
+
.retro-tab-pane {
|
|
3238
|
+
display: none;
|
|
3239
|
+
padding: var(--retro-spacing-md);
|
|
3240
|
+
background: var(--retro-bg);
|
|
3241
|
+
color: var(--retro-text);
|
|
3242
|
+
border: var(--retro-border-width-thick) solid var(--retro-border-dark);
|
|
3243
|
+
border-top: none;
|
|
3244
|
+
}
|
|
3245
|
+
.retro-tab-pane.active {
|
|
3246
|
+
display: block;
|
|
3247
|
+
}
|
|
3248
|
+
|
|
3249
|
+
.retro-tab-pane-underlined,
|
|
3250
|
+
.retro-tab-pane-buttons {
|
|
3251
|
+
border: none;
|
|
3252
|
+
padding: var(--retro-spacing-md) 0;
|
|
3253
|
+
background: transparent;
|
|
3254
|
+
}
|
|
3255
|
+
|
|
2807
3256
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
2808
3257
|
/* Main SCSS file that imports all components */
|
|
2809
3258
|
/* Core */
|
|
@@ -2841,12 +3290,12 @@ input[type=radio].retro-input:focus {
|
|
|
2841
3290
|
left: 50%;
|
|
2842
3291
|
top: 50%;
|
|
2843
3292
|
transform: translate(-50%, -50%);
|
|
2844
|
-
font-size:
|
|
2845
|
-
color: var(--retro-
|
|
2846
|
-
font-family:
|
|
3293
|
+
font-size: var(--retro-font-size-sm);
|
|
3294
|
+
color: var(--retro-text);
|
|
3295
|
+
font-family: var(--retro-font);
|
|
2847
3296
|
pointer-events: none;
|
|
2848
3297
|
user-select: none;
|
|
2849
|
-
text-shadow:
|
|
3298
|
+
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
3299
|
}
|
|
2851
3300
|
|
|
2852
3301
|
.retro-progress-bar-striped {
|
|
@@ -2862,6 +3311,22 @@ input[type=radio].retro-input:focus {
|
|
|
2862
3311
|
background-position: 18px 0;
|
|
2863
3312
|
}
|
|
2864
3313
|
}
|
|
3314
|
+
.retro-progress-bar-success {
|
|
3315
|
+
background: var(--retro-success);
|
|
3316
|
+
}
|
|
3317
|
+
|
|
3318
|
+
.retro-progress-bar-danger {
|
|
3319
|
+
background: var(--retro-danger);
|
|
3320
|
+
}
|
|
3321
|
+
|
|
3322
|
+
.retro-progress-bar-warning {
|
|
3323
|
+
background: var(--retro-warning);
|
|
3324
|
+
}
|
|
3325
|
+
|
|
3326
|
+
.retro-progress-bar-info {
|
|
3327
|
+
background: var(--retro-info);
|
|
3328
|
+
}
|
|
3329
|
+
|
|
2865
3330
|
.retro-badge {
|
|
2866
3331
|
display: inline-flex;
|
|
2867
3332
|
align-items: center;
|
|
@@ -2869,19 +3334,19 @@ input[type=radio].retro-input:focus {
|
|
|
2869
3334
|
min-width: 26px;
|
|
2870
3335
|
min-height: 18px;
|
|
2871
3336
|
padding: 2px 10px;
|
|
2872
|
-
font-size:
|
|
2873
|
-
font-family:
|
|
2874
|
-
font-weight:
|
|
3337
|
+
font-size: var(--retro-font-size-sm);
|
|
3338
|
+
font-family: var(--retro-font-heading);
|
|
3339
|
+
font-weight: var(--retro-font-weight-bold);
|
|
2875
3340
|
letter-spacing: 0.3px;
|
|
2876
3341
|
text-transform: uppercase;
|
|
2877
3342
|
color: var(--retro-badge-text);
|
|
2878
3343
|
background: var(--retro-badge-bg);
|
|
2879
|
-
border: 1px solid
|
|
3344
|
+
border: 1px solid var(--retro-border-dark);
|
|
2880
3345
|
border-radius: 0;
|
|
2881
|
-
box-shadow: 0 0 0 2px rgba(
|
|
2882
|
-
text-shadow:
|
|
3346
|
+
box-shadow: 0 0 0 2px rgba(var(--retro-white-rgb), 0.1), inset 0 0 6px rgba(var(--retro-black-rgb), 0.8);
|
|
3347
|
+
text-shadow: none;
|
|
2883
3348
|
margin: 0.2em 0.4em 0.2em 0;
|
|
2884
|
-
transition:
|
|
3349
|
+
transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, filter 0.15s ease;
|
|
2885
3350
|
position: relative;
|
|
2886
3351
|
overflow: hidden;
|
|
2887
3352
|
}
|
|
@@ -2892,130 +3357,130 @@ input[type=radio].retro-input:focus {
|
|
|
2892
3357
|
left: 0;
|
|
2893
3358
|
right: 0;
|
|
2894
3359
|
height: 40%;
|
|
2895
|
-
background: linear-gradient(to bottom, rgba(
|
|
3360
|
+
background: linear-gradient(to bottom, rgba(var(--retro-white-rgb), 0.15), rgba(var(--retro-white-rgb), 0));
|
|
2896
3361
|
pointer-events: none;
|
|
2897
3362
|
}
|
|
2898
|
-
.retro-badge:hover, .retro-badge:focus {
|
|
3363
|
+
.retro-badge:hover, .retro-badge:focus-visible {
|
|
2899
3364
|
transform: translateY(-1px) scale(1.05);
|
|
2900
|
-
box-shadow: 0 0 0 2px rgba(
|
|
3365
|
+
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
3366
|
filter: brightness(1.1);
|
|
2902
3367
|
}
|
|
2903
3368
|
.retro-badge:active {
|
|
2904
3369
|
transform: translateY(1px) scale(0.98);
|
|
2905
|
-
box-shadow: 0 0 0 2px rgba(
|
|
3370
|
+
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
3371
|
filter: brightness(0.9);
|
|
2907
3372
|
}
|
|
2908
3373
|
|
|
2909
3374
|
.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
|
|
3375
|
+
background: var(--retro-primary);
|
|
3376
|
+
color: var(--retro-primary-fg);
|
|
3377
|
+
border: 2px solid var(--retro-primary-active);
|
|
3378
|
+
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);
|
|
3379
|
+
text-shadow: none;
|
|
3380
|
+
}
|
|
3381
|
+
.retro-badge-primary:hover, .retro-badge-primary:focus-visible {
|
|
3382
|
+
background: var(--retro-primary-hover);
|
|
3383
|
+
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
3384
|
filter: brightness(1.08);
|
|
2920
3385
|
}
|
|
2921
3386
|
.retro-badge-primary:active {
|
|
2922
|
-
background:
|
|
2923
|
-
box-shadow: inset 1px 1px 0
|
|
3387
|
+
background: var(--retro-primary-active);
|
|
3388
|
+
box-shadow: inset 1px 1px 0 var(--retro-primary-active), inset -1px -1px 0 var(--retro-border-light);
|
|
2924
3389
|
filter: brightness(0.95);
|
|
2925
3390
|
}
|
|
2926
3391
|
|
|
2927
3392
|
.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
|
|
3393
|
+
background: var(--retro-success);
|
|
3394
|
+
color: var(--retro-success-fg);
|
|
3395
|
+
border: 2px solid var(--retro-success-active);
|
|
3396
|
+
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);
|
|
3397
|
+
text-shadow: none;
|
|
3398
|
+
}
|
|
3399
|
+
.retro-badge-success:hover, .retro-badge-success:focus-visible {
|
|
3400
|
+
background: var(--retro-success-hover);
|
|
3401
|
+
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
3402
|
filter: brightness(1.08);
|
|
2938
3403
|
}
|
|
2939
3404
|
.retro-badge-success:active {
|
|
2940
|
-
background:
|
|
2941
|
-
box-shadow: inset 1px 1px 0
|
|
3405
|
+
background: var(--retro-success-active);
|
|
3406
|
+
box-shadow: inset 1px 1px 0 var(--retro-success-active), inset -1px -1px 0 var(--retro-border-light);
|
|
2942
3407
|
filter: brightness(0.95);
|
|
2943
3408
|
}
|
|
2944
3409
|
|
|
2945
3410
|
.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
|
|
3411
|
+
background: var(--retro-danger);
|
|
3412
|
+
color: var(--retro-danger-fg);
|
|
3413
|
+
border: 2px solid var(--retro-danger-active);
|
|
3414
|
+
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);
|
|
3415
|
+
text-shadow: none;
|
|
3416
|
+
}
|
|
3417
|
+
.retro-badge-danger:hover, .retro-badge-danger:focus-visible {
|
|
3418
|
+
background: var(--retro-danger-hover);
|
|
3419
|
+
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
3420
|
filter: brightness(1.08);
|
|
2956
3421
|
}
|
|
2957
3422
|
.retro-badge-danger:active {
|
|
2958
|
-
background:
|
|
2959
|
-
box-shadow: inset 1px 1px 0
|
|
3423
|
+
background: var(--retro-danger-active);
|
|
3424
|
+
box-shadow: inset 1px 1px 0 var(--retro-danger-active), inset -1px -1px 0 var(--retro-border-light);
|
|
2960
3425
|
filter: brightness(0.95);
|
|
2961
3426
|
}
|
|
2962
3427
|
|
|
2963
3428
|
.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
|
|
3429
|
+
background: var(--retro-warning);
|
|
3430
|
+
color: var(--retro-warning-fg);
|
|
3431
|
+
border: 2px solid var(--retro-warning-active);
|
|
3432
|
+
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);
|
|
3433
|
+
text-shadow: none;
|
|
3434
|
+
}
|
|
3435
|
+
.retro-badge-warning:hover, .retro-badge-warning:focus-visible {
|
|
3436
|
+
background: var(--retro-warning-hover);
|
|
3437
|
+
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
3438
|
filter: brightness(1.08);
|
|
2974
3439
|
}
|
|
2975
3440
|
.retro-badge-warning:active {
|
|
2976
|
-
background:
|
|
2977
|
-
box-shadow: inset 1px 1px 0
|
|
3441
|
+
background: var(--retro-warning-active);
|
|
3442
|
+
box-shadow: inset 1px 1px 0 var(--retro-warning-active), inset -1px -1px 0 var(--retro-border-light);
|
|
2978
3443
|
filter: brightness(0.95);
|
|
2979
3444
|
}
|
|
2980
3445
|
|
|
2981
3446
|
.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
|
|
3447
|
+
background: var(--retro-info);
|
|
3448
|
+
color: var(--retro-info-fg);
|
|
3449
|
+
border: 2px solid var(--retro-info-active);
|
|
3450
|
+
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);
|
|
3451
|
+
text-shadow: none;
|
|
3452
|
+
}
|
|
3453
|
+
.retro-badge-info:hover, .retro-badge-info:focus-visible {
|
|
3454
|
+
background: var(--retro-info-hover);
|
|
3455
|
+
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
3456
|
filter: brightness(1.08);
|
|
2992
3457
|
}
|
|
2993
3458
|
.retro-badge-info:active {
|
|
2994
|
-
background:
|
|
2995
|
-
box-shadow: inset 1px 1px 0
|
|
3459
|
+
background: var(--retro-info-active);
|
|
3460
|
+
box-shadow: inset 1px 1px 0 var(--retro-info-active), inset -1px -1px 0 var(--retro-border-light);
|
|
2996
3461
|
filter: brightness(0.95);
|
|
2997
3462
|
}
|
|
2998
3463
|
|
|
2999
3464
|
.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
|
|
3465
|
+
background: var(--retro-gray);
|
|
3466
|
+
color: var(--retro-gray-fg);
|
|
3467
|
+
border: 2px solid var(--retro-gray-active);
|
|
3468
|
+
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);
|
|
3469
|
+
text-shadow: none;
|
|
3470
|
+
}
|
|
3471
|
+
.retro-badge-secondary:hover, .retro-badge-secondary:focus-visible {
|
|
3472
|
+
background: var(--retro-gray-hover);
|
|
3473
|
+
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
3474
|
filter: brightness(1.08);
|
|
3010
3475
|
}
|
|
3011
3476
|
.retro-badge-secondary:active {
|
|
3012
|
-
background:
|
|
3013
|
-
box-shadow: inset 1px 1px 0
|
|
3477
|
+
background: var(--retro-gray-active);
|
|
3478
|
+
box-shadow: inset 1px 1px 0 var(--retro-gray-active), inset -1px -1px 0 var(--retro-border-light);
|
|
3014
3479
|
filter: brightness(0.95);
|
|
3015
3480
|
}
|
|
3016
3481
|
|
|
3017
3482
|
.retro-badge.retro-badge-xs {
|
|
3018
|
-
font-size:
|
|
3483
|
+
font-size: var(--retro-font-size-xs) !important;
|
|
3019
3484
|
min-width: 16px !important;
|
|
3020
3485
|
min-height: 12px !important;
|
|
3021
3486
|
padding: 1px 4px !important;
|
|
@@ -3023,7 +3488,7 @@ input[type=radio].retro-input:focus {
|
|
|
3023
3488
|
}
|
|
3024
3489
|
|
|
3025
3490
|
.retro-badge.retro-badge-sm {
|
|
3026
|
-
font-size:
|
|
3491
|
+
font-size: var(--retro-font-size-xs) !important;
|
|
3027
3492
|
min-width: 20px !important;
|
|
3028
3493
|
min-height: 14px !important;
|
|
3029
3494
|
padding: 1px 6px !important;
|
|
@@ -3031,7 +3496,7 @@ input[type=radio].retro-input:focus {
|
|
|
3031
3496
|
}
|
|
3032
3497
|
|
|
3033
3498
|
.retro-badge.retro-badge-md {
|
|
3034
|
-
font-size:
|
|
3499
|
+
font-size: var(--retro-font-size-sm) !important;
|
|
3035
3500
|
min-width: 26px !important;
|
|
3036
3501
|
min-height: 18px !important;
|
|
3037
3502
|
padding: 2px 10px !important;
|
|
@@ -3039,7 +3504,7 @@ input[type=radio].retro-input:focus {
|
|
|
3039
3504
|
}
|
|
3040
3505
|
|
|
3041
3506
|
.retro-badge.retro-badge-lg {
|
|
3042
|
-
font-size:
|
|
3507
|
+
font-size: var(--retro-font-size) !important;
|
|
3043
3508
|
min-width: 36px !important;
|
|
3044
3509
|
min-height: 22px !important;
|
|
3045
3510
|
padding: 3px 14px !important;
|
|
@@ -3047,7 +3512,7 @@ input[type=radio].retro-input:focus {
|
|
|
3047
3512
|
}
|
|
3048
3513
|
|
|
3049
3514
|
.retro-badge.retro-badge-xl {
|
|
3050
|
-
font-size:
|
|
3515
|
+
font-size: var(--retro-font-size-lg) !important;
|
|
3051
3516
|
min-width: 46px !important;
|
|
3052
3517
|
min-height: 28px !important;
|
|
3053
3518
|
padding: 4px 18px !important;
|
|
@@ -3055,7 +3520,7 @@ input[type=radio].retro-input:focus {
|
|
|
3055
3520
|
}
|
|
3056
3521
|
|
|
3057
3522
|
.retro-badge.retro-badge-xxl {
|
|
3058
|
-
font-size:
|
|
3523
|
+
font-size: var(--retro-font-size-xl) !important;
|
|
3059
3524
|
min-width: 60px !important;
|
|
3060
3525
|
min-height: 36px !important;
|
|
3061
3526
|
padding: 6px 24px !important;
|
|
@@ -3085,21 +3550,21 @@ input[type=radio].retro-input:focus {
|
|
|
3085
3550
|
}
|
|
3086
3551
|
|
|
3087
3552
|
.retro-badge-pixel {
|
|
3088
|
-
font-family:
|
|
3089
|
-
font-weight:
|
|
3553
|
+
font-family: var(--retro-font-heading);
|
|
3554
|
+
font-weight: var(--retro-font-weight-bold);
|
|
3090
3555
|
image-rendering: pixelated;
|
|
3091
|
-
border: 2px solid
|
|
3556
|
+
border: 2px solid var(--retro-border-dark);
|
|
3092
3557
|
border-radius: 0;
|
|
3093
|
-
box-shadow: 4px 4px 0
|
|
3558
|
+
box-shadow: 4px 4px 0 var(--retro-border-dark);
|
|
3094
3559
|
transform-origin: center;
|
|
3095
3560
|
}
|
|
3096
|
-
.retro-badge-pixel:hover, .retro-badge-pixel:focus {
|
|
3561
|
+
.retro-badge-pixel:hover, .retro-badge-pixel:focus-visible {
|
|
3097
3562
|
transform: translateY(-2px) translateX(-2px);
|
|
3098
|
-
box-shadow: 6px 6px 0
|
|
3563
|
+
box-shadow: 6px 6px 0 var(--retro-border-dark);
|
|
3099
3564
|
}
|
|
3100
3565
|
.retro-badge-pixel:active {
|
|
3101
3566
|
transform: translateY(0) translateX(0);
|
|
3102
|
-
box-shadow: 0 0 0
|
|
3567
|
+
box-shadow: 0 0 0 var(--retro-border-dark);
|
|
3103
3568
|
}
|
|
3104
3569
|
|
|
3105
3570
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
@@ -3154,7 +3619,7 @@ input[type=radio].retro-input:focus {
|
|
|
3154
3619
|
top: 50%;
|
|
3155
3620
|
transform: translateY(-50%);
|
|
3156
3621
|
font-weight: bold;
|
|
3157
|
-
font-size:
|
|
3622
|
+
font-size: var(--retro-font-size-lg);
|
|
3158
3623
|
}
|
|
3159
3624
|
|
|
3160
3625
|
.retro-accordion-content {
|
|
@@ -3183,21 +3648,21 @@ input[type=radio].retro-input:focus {
|
|
|
3183
3648
|
.retro-pagination .retro-btn {
|
|
3184
3649
|
min-width: 36px;
|
|
3185
3650
|
padding: 4px 12px;
|
|
3186
|
-
font-size:
|
|
3651
|
+
font-size: var(--retro-font-size-lg);
|
|
3187
3652
|
border-radius: 2px;
|
|
3188
|
-
border: 2px solid
|
|
3189
|
-
background:
|
|
3190
|
-
color:
|
|
3191
|
-
box-shadow: 1px 1px 0
|
|
3653
|
+
border: 2px solid var(--retro-border-dark);
|
|
3654
|
+
background: var(--retro-light);
|
|
3655
|
+
color: var(--retro-black);
|
|
3656
|
+
box-shadow: 1px 1px 0 var(--retro-border-light);
|
|
3192
3657
|
transition: background 0.2s, color 0.2s;
|
|
3193
3658
|
}
|
|
3194
3659
|
|
|
3195
3660
|
.retro-pagination .retro-btn.active,
|
|
3196
3661
|
.retro-pagination .retro-btn:active {
|
|
3197
|
-
background:
|
|
3198
|
-
color:
|
|
3662
|
+
background: var(--retro-primary);
|
|
3663
|
+
color: var(--retro-white);
|
|
3199
3664
|
font-weight: bold;
|
|
3200
|
-
border-color:
|
|
3665
|
+
border-color: var(--retro-primary);
|
|
3201
3666
|
}
|
|
3202
3667
|
|
|
3203
3668
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
@@ -3206,8 +3671,8 @@ input[type=radio].retro-input:focus {
|
|
|
3206
3671
|
.retro-breadcrumbs {
|
|
3207
3672
|
display: flex;
|
|
3208
3673
|
align-items: center;
|
|
3209
|
-
font-family:
|
|
3210
|
-
font-size:
|
|
3674
|
+
font-family: var(--retro-font);
|
|
3675
|
+
font-size: var(--retro-font-size-lg);
|
|
3211
3676
|
background: var(--retro-card-bg);
|
|
3212
3677
|
padding: 6px 12px;
|
|
3213
3678
|
border-radius: 2px;
|
|
@@ -3237,12 +3702,12 @@ input[type=radio].retro-input:focus {
|
|
|
3237
3702
|
}
|
|
3238
3703
|
|
|
3239
3704
|
.retro-breadcrumb-icon {
|
|
3240
|
-
font-size:
|
|
3705
|
+
font-size: var(--retro-font-size-lg);
|
|
3241
3706
|
margin-right: 2px;
|
|
3242
3707
|
}
|
|
3243
3708
|
|
|
3244
3709
|
.retro-breadcrumb-sep {
|
|
3245
|
-
color:
|
|
3710
|
+
color: var(--retro-text-muted);
|
|
3246
3711
|
margin: 0 2px;
|
|
3247
3712
|
font-weight: bold;
|
|
3248
3713
|
}
|
|
@@ -3270,10 +3735,10 @@ input[type=radio].retro-input:focus {
|
|
|
3270
3735
|
border-radius: 2px;
|
|
3271
3736
|
padding: 6px 16px;
|
|
3272
3737
|
font-family: var(--retro-font);
|
|
3273
|
-
font-size:
|
|
3738
|
+
font-size: var(--retro-font-size-lg);
|
|
3274
3739
|
color: var(--retro-dropdown-text);
|
|
3275
3740
|
box-shadow: 1px 1px 0 var(--retro-border-light);
|
|
3276
|
-
transition:
|
|
3741
|
+
transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
|
|
3277
3742
|
min-width: 120px;
|
|
3278
3743
|
}
|
|
3279
3744
|
.retro-dropdown-toggle:hover {
|
|
@@ -3286,7 +3751,7 @@ input[type=radio].retro-input:focus {
|
|
|
3286
3751
|
|
|
3287
3752
|
.retro-dropdown-arrow {
|
|
3288
3753
|
margin-left: 8px;
|
|
3289
|
-
font-size:
|
|
3754
|
+
font-size: var(--retro-font-size);
|
|
3290
3755
|
transition: transform 0.2s ease;
|
|
3291
3756
|
}
|
|
3292
3757
|
.open .retro-dropdown-arrow {
|
|
@@ -3306,7 +3771,7 @@ input[type=radio].retro-input:focus {
|
|
|
3306
3771
|
opacity: 0;
|
|
3307
3772
|
visibility: hidden;
|
|
3308
3773
|
transform: translateY(-10px);
|
|
3309
|
-
transition:
|
|
3774
|
+
transition: opacity 0.2s ease, transform 0.2s ease;
|
|
3310
3775
|
}
|
|
3311
3776
|
.retro-dropdown.open > .retro-dropdown-menu {
|
|
3312
3777
|
opacity: 1;
|
|
@@ -3320,10 +3785,10 @@ input[type=radio].retro-input:focus {
|
|
|
3320
3785
|
color: var(--retro-dropdown-text);
|
|
3321
3786
|
text-decoration: none;
|
|
3322
3787
|
font-family: var(--retro-font);
|
|
3323
|
-
font-size:
|
|
3788
|
+
font-size: var(--retro-font-size-lg);
|
|
3324
3789
|
background: var(--retro-dropdown-bg);
|
|
3325
3790
|
border-bottom: 1px solid var(--retro-border-light);
|
|
3326
|
-
transition:
|
|
3791
|
+
transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
|
|
3327
3792
|
white-space: nowrap;
|
|
3328
3793
|
cursor: pointer;
|
|
3329
3794
|
}
|
|
@@ -3360,7 +3825,7 @@ input[type=radio].retro-input:focus {
|
|
|
3360
3825
|
}
|
|
3361
3826
|
|
|
3362
3827
|
.retro-file-filename {
|
|
3363
|
-
font-size:
|
|
3828
|
+
font-size: var(--retro-font-size);
|
|
3364
3829
|
color: var(--retro-input-text);
|
|
3365
3830
|
margin-left: 8px;
|
|
3366
3831
|
}
|
|
@@ -3372,16 +3837,16 @@ input[type=radio].retro-input:focus {
|
|
|
3372
3837
|
background: var(--retro-input-bg);
|
|
3373
3838
|
border: 1px solid var(--retro-border-medium);
|
|
3374
3839
|
border-radius: 4px;
|
|
3375
|
-
color: var(--retro-
|
|
3376
|
-
font-size:
|
|
3840
|
+
color: var(--retro-text-muted);
|
|
3841
|
+
font-size: var(--retro-font-size-lg);
|
|
3377
3842
|
margin-top: 8px;
|
|
3378
3843
|
transition: background 0.2s, border 0.2s;
|
|
3379
3844
|
}
|
|
3380
3845
|
|
|
3381
3846
|
.retro-file-drop.dragover {
|
|
3382
|
-
background:
|
|
3383
|
-
color:
|
|
3384
|
-
border-color:
|
|
3847
|
+
background: var(--retro-primary);
|
|
3848
|
+
color: var(--retro-primary-fg);
|
|
3849
|
+
border-color: var(--retro-primary);
|
|
3385
3850
|
}
|
|
3386
3851
|
|
|
3387
3852
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
@@ -3413,7 +3878,7 @@ input[type=radio].retro-input:focus {
|
|
|
3413
3878
|
border: 1px solid var(--retro-border-medium);
|
|
3414
3879
|
border-radius: 12px;
|
|
3415
3880
|
padding: 3px 12px 3px 10px;
|
|
3416
|
-
font-size:
|
|
3881
|
+
font-size: var(--retro-font-size);
|
|
3417
3882
|
margin-right: 4px;
|
|
3418
3883
|
margin-bottom: 4px;
|
|
3419
3884
|
box-shadow: 1px 1px 0 var(--retro-border-light);
|
|
@@ -3421,21 +3886,21 @@ input[type=radio].retro-input:focus {
|
|
|
3421
3886
|
|
|
3422
3887
|
.retro-tag-remove {
|
|
3423
3888
|
margin-left: 8px;
|
|
3424
|
-
color:
|
|
3889
|
+
color: var(--retro-danger-text);
|
|
3425
3890
|
cursor: pointer;
|
|
3426
3891
|
font-weight: bold;
|
|
3427
|
-
font-size:
|
|
3892
|
+
font-size: var(--retro-font-size-lg);
|
|
3428
3893
|
transition: color 0.2s;
|
|
3429
3894
|
}
|
|
3430
3895
|
.retro-tag-remove:hover {
|
|
3431
|
-
color:
|
|
3896
|
+
color: var(--retro-primary-text);
|
|
3432
3897
|
}
|
|
3433
3898
|
|
|
3434
3899
|
.retro-tag-text {
|
|
3435
3900
|
border: none;
|
|
3436
3901
|
outline: none;
|
|
3437
3902
|
background: transparent;
|
|
3438
|
-
font-size:
|
|
3903
|
+
font-size: var(--retro-font-size);
|
|
3439
3904
|
min-width: 80px;
|
|
3440
3905
|
margin-left: 4px;
|
|
3441
3906
|
padding: 2px 0;
|
|
@@ -3456,8 +3921,8 @@ input[type=radio].retro-input:focus {
|
|
|
3456
3921
|
}
|
|
3457
3922
|
|
|
3458
3923
|
.retro-search-icon {
|
|
3459
|
-
font-size:
|
|
3460
|
-
color:
|
|
3924
|
+
font-size: var(--retro-font-size-xl);
|
|
3925
|
+
color: var(--retro-text);
|
|
3461
3926
|
margin-right: 8px;
|
|
3462
3927
|
}
|
|
3463
3928
|
|
|
@@ -3465,7 +3930,7 @@ input[type=radio].retro-input:focus {
|
|
|
3465
3930
|
border: none;
|
|
3466
3931
|
outline: none;
|
|
3467
3932
|
background: transparent;
|
|
3468
|
-
font-size:
|
|
3933
|
+
font-size: var(--retro-font-size-lg);
|
|
3469
3934
|
flex: 1;
|
|
3470
3935
|
padding: 4px 0;
|
|
3471
3936
|
color: var(--retro-input-text);
|
|
@@ -3490,7 +3955,7 @@ input[type=radio].retro-input:focus {
|
|
|
3490
3955
|
|
|
3491
3956
|
.retro-search-suggestion {
|
|
3492
3957
|
padding: 8px 12px;
|
|
3493
|
-
font-size:
|
|
3958
|
+
font-size: var(--retro-font-size-lg);
|
|
3494
3959
|
color: var(--retro-input-text);
|
|
3495
3960
|
cursor: pointer;
|
|
3496
3961
|
border-bottom: 1px solid var(--retro-border-light);
|
|
@@ -3514,15 +3979,15 @@ input[type=radio].retro-input:focus {
|
|
|
3514
3979
|
}
|
|
3515
3980
|
|
|
3516
3981
|
.retro-rating-star {
|
|
3517
|
-
font-size:
|
|
3518
|
-
color:
|
|
3982
|
+
font-size: var(--retro-font-size-3xl);
|
|
3983
|
+
color: var(--retro-border-dark);
|
|
3519
3984
|
cursor: pointer;
|
|
3520
3985
|
transition: color 0.2s, text-shadow 0.2s, border 0.2s;
|
|
3521
|
-
text-shadow: 1px 1px 0
|
|
3986
|
+
text-shadow: 1px 1px 0 var(--retro-border-light);
|
|
3522
3987
|
user-select: none;
|
|
3523
|
-
border: 2px solid
|
|
3988
|
+
border: 2px solid var(--retro-border-dark);
|
|
3524
3989
|
border-radius: 6px;
|
|
3525
|
-
background:
|
|
3990
|
+
background: var(--retro-bg);
|
|
3526
3991
|
padding: 2px 2px 0 2px;
|
|
3527
3992
|
margin-right: 2px;
|
|
3528
3993
|
box-sizing: border-box;
|
|
@@ -3534,17 +3999,17 @@ input[type=radio].retro-input:focus {
|
|
|
3534
3999
|
|
|
3535
4000
|
.retro-rating-star.selected,
|
|
3536
4001
|
.retro-rating-star.active {
|
|
3537
|
-
color:
|
|
3538
|
-
background:
|
|
3539
|
-
border-color:
|
|
3540
|
-
text-shadow: 0 2px 8px
|
|
4002
|
+
color: var(--retro-warning-text);
|
|
4003
|
+
background: rgba(var(--retro-warning-rgb), 0.2);
|
|
4004
|
+
border-color: var(--retro-warning);
|
|
4005
|
+
text-shadow: 0 2px 8px var(--retro-border-light);
|
|
3541
4006
|
}
|
|
3542
4007
|
|
|
3543
4008
|
.retro-rating-star:hover,
|
|
3544
4009
|
.retro-rating-star:hover ~ .retro-rating-star {
|
|
3545
|
-
color:
|
|
3546
|
-
background:
|
|
3547
|
-
border-color:
|
|
4010
|
+
color: var(--retro-warning-text);
|
|
4011
|
+
background: rgba(var(--retro-warning-rgb), 0.2);
|
|
4012
|
+
border-color: var(--retro-warning);
|
|
3548
4013
|
}
|
|
3549
4014
|
|
|
3550
4015
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
@@ -3644,16 +4109,16 @@ input[type=radio].retro-input:focus {
|
|
|
3644
4109
|
padding: 6px 10px;
|
|
3645
4110
|
background: var(--retro-black);
|
|
3646
4111
|
color: var(--retro-white);
|
|
3647
|
-
font-size:
|
|
4112
|
+
font-size: var(--retro-font-size-sm);
|
|
3648
4113
|
border-radius: 4px;
|
|
3649
4114
|
white-space: nowrap;
|
|
3650
|
-
box-shadow: 3px 3px 0 rgba(
|
|
4115
|
+
box-shadow: 3px 3px 0 rgba(var(--retro-black-rgb), 0.2);
|
|
3651
4116
|
z-index: 1050;
|
|
3652
4117
|
pointer-events: none;
|
|
3653
4118
|
opacity: 0;
|
|
3654
4119
|
visibility: hidden;
|
|
3655
4120
|
transition: opacity 0.2s, visibility 0.2s;
|
|
3656
|
-
font-family:
|
|
4121
|
+
font-family: var(--retro-font);
|
|
3657
4122
|
max-width: 200px;
|
|
3658
4123
|
line-height: 1.4;
|
|
3659
4124
|
/* Arrow */
|
|
@@ -3814,11 +4279,11 @@ input[type=radio].retro-input:focus {
|
|
|
3814
4279
|
list-style: none;
|
|
3815
4280
|
padding: 0;
|
|
3816
4281
|
margin: 0 0 var(--retro-spacing-lg) 0;
|
|
3817
|
-
font-size:
|
|
4282
|
+
font-size: var(--retro-font-size);
|
|
3818
4283
|
background: var(--retro-list-bg);
|
|
3819
4284
|
color: var(--retro-list-text);
|
|
3820
4285
|
border-radius: 6px;
|
|
3821
|
-
box-shadow: 0 1px 4px rgba(
|
|
4286
|
+
box-shadow: 0 1px 4px rgba(var(--retro-black-rgb), 0.04);
|
|
3822
4287
|
}
|
|
3823
4288
|
.retro-list li {
|
|
3824
4289
|
padding: var(--retro-spacing-sm) var(--retro-spacing-md);
|
|
@@ -3854,7 +4319,7 @@ input[type=radio].retro-input:focus {
|
|
|
3854
4319
|
.retro-list-bordered {
|
|
3855
4320
|
border: 1px solid var(--retro-border-medium);
|
|
3856
4321
|
background: var(--retro-white);
|
|
3857
|
-
box-shadow: 0 2px 8px rgba(
|
|
4322
|
+
box-shadow: 0 2px 8px rgba(var(--retro-black-rgb), 0.03);
|
|
3858
4323
|
}
|
|
3859
4324
|
.retro-list-bordered li {
|
|
3860
4325
|
border-bottom: 1px solid var(--retro-border-light);
|
|
@@ -3871,10 +4336,10 @@ input[type=radio].retro-input:focus {
|
|
|
3871
4336
|
.retro-list-hover li {
|
|
3872
4337
|
cursor: pointer;
|
|
3873
4338
|
}
|
|
3874
|
-
.retro-list-hover li:hover, .retro-list-hover li:focus {
|
|
4339
|
+
.retro-list-hover li:hover, .retro-list-hover li:focus-visible {
|
|
3875
4340
|
background-color: var(--retro-primary);
|
|
3876
4341
|
color: var(--retro-white);
|
|
3877
|
-
box-shadow: 0 2px 8px rgba(
|
|
4342
|
+
box-shadow: 0 2px 8px rgba(var(--retro-black-rgb), 0.06);
|
|
3878
4343
|
outline: none;
|
|
3879
4344
|
}
|
|
3880
4345
|
|
|
@@ -3911,7 +4376,7 @@ ol.retro-list li::before {
|
|
|
3911
4376
|
display: flex;
|
|
3912
4377
|
align-items: center;
|
|
3913
4378
|
justify-content: center;
|
|
3914
|
-
box-shadow: 0 1px 2px rgba(
|
|
4379
|
+
box-shadow: 0 1px 2px rgba(var(--retro-black-rgb), 0.08);
|
|
3915
4380
|
border: 2px solid var(--retro-border-dark);
|
|
3916
4381
|
}
|
|
3917
4382
|
ol.retro-list li ol.retro-list {
|
|
@@ -3958,7 +4423,7 @@ dl.retro-list dd {
|
|
|
3958
4423
|
background: var(--retro-bg);
|
|
3959
4424
|
border: 2px solid var(--retro-border-dark);
|
|
3960
4425
|
box-shadow: inset 2px 2px 0 var(--retro-border-light), inset -2px -2px 0 var(--retro-border-dark);
|
|
3961
|
-
font-family:
|
|
4426
|
+
font-family: var(--retro-font-mono);
|
|
3962
4427
|
margin-bottom: 1.5rem;
|
|
3963
4428
|
}
|
|
3964
4429
|
|
|
@@ -3998,12 +4463,12 @@ dl.retro-list dd {
|
|
|
3998
4463
|
height: 32px;
|
|
3999
4464
|
cursor: pointer;
|
|
4000
4465
|
z-index: 2;
|
|
4001
|
-
font-size:
|
|
4466
|
+
font-size: var(--retro-font-size-2xl);
|
|
4002
4467
|
display: flex;
|
|
4003
4468
|
align-items: center;
|
|
4004
4469
|
justify-content: center;
|
|
4005
4470
|
opacity: 1;
|
|
4006
|
-
font-family:
|
|
4471
|
+
font-family: var(--retro-font-mono);
|
|
4007
4472
|
padding: 0;
|
|
4008
4473
|
/* Add pressed state */
|
|
4009
4474
|
}
|
|
@@ -4045,6 +4510,7 @@ dl.retro-list dd {
|
|
|
4045
4510
|
box-shadow: inset 1px 1px 0 var(--retro-border-dark), inset -1px -1px 0 var(--retro-border-light);
|
|
4046
4511
|
}
|
|
4047
4512
|
|
|
4513
|
+
/* Base Styles */
|
|
4048
4514
|
/**
|
|
4049
4515
|
* @name Date/Time Input
|
|
4050
4516
|
* @group components
|
|
@@ -4090,11 +4556,17 @@ input[type=datetime-local].retro-input:focus {
|
|
|
4090
4556
|
border: 2px solid var(--retro-primary);
|
|
4091
4557
|
box-shadow: 0 0 0 2px rgba(var(--retro-primary-rgb), 0.2);
|
|
4092
4558
|
}
|
|
4559
|
+
input[type=date].retro-input:focus-visible,
|
|
4560
|
+
input[type=time].retro-input:focus-visible,
|
|
4561
|
+
input[type=datetime-local].retro-input:focus-visible {
|
|
4562
|
+
outline: 2px solid var(--retro-primary);
|
|
4563
|
+
outline-offset: 2px;
|
|
4564
|
+
}
|
|
4093
4565
|
input[type=date].retro-input:disabled,
|
|
4094
4566
|
input[type=time].retro-input:disabled,
|
|
4095
4567
|
input[type=datetime-local].retro-input:disabled {
|
|
4096
4568
|
background-color: var(--retro-light);
|
|
4097
|
-
color: var(--retro-
|
|
4569
|
+
color: var(--retro-text-muted);
|
|
4098
4570
|
cursor: not-allowed;
|
|
4099
4571
|
}
|
|
4100
4572
|
input[type=date].retro-input.retro-input-lg,
|
|
@@ -4220,7 +4692,7 @@ input[type=datetime-local].retro-input.retro-input-sm {
|
|
|
4220
4692
|
letter-spacing: 2px;
|
|
4221
4693
|
background: var(--retro-bg);
|
|
4222
4694
|
border: 2px solid var(--retro-border-dark);
|
|
4223
|
-
box-shadow: 2px 2px 8px rgba(
|
|
4695
|
+
box-shadow: 2px 2px 8px rgba(var(--retro-black-rgb), 0.12), 1px 1px 0 var(--retro-border-light);
|
|
4224
4696
|
padding: 4px 16px;
|
|
4225
4697
|
border-radius: 4px;
|
|
4226
4698
|
filter: blur(0.2px);
|
|
@@ -4261,7 +4733,7 @@ input[type=datetime-local].retro-input.retro-input-sm {
|
|
|
4261
4733
|
height: auto;
|
|
4262
4734
|
position: static;
|
|
4263
4735
|
overflow-y: auto;
|
|
4264
|
-
transition:
|
|
4736
|
+
transition: transform 0.3s ease, left 0.3s ease, width 0.3s ease;
|
|
4265
4737
|
color: var(--retro-sidebar-text);
|
|
4266
4738
|
}
|
|
4267
4739
|
.retro-sidebar-header {
|
|
@@ -4276,8 +4748,8 @@ input[type=datetime-local].retro-input.retro-input-sm {
|
|
|
4276
4748
|
.retro-sidebar-section-title {
|
|
4277
4749
|
font-weight: bold;
|
|
4278
4750
|
margin-bottom: var(--retro-spacing-xs, 4px);
|
|
4279
|
-
font-size:
|
|
4280
|
-
color: var(--retro-text-muted
|
|
4751
|
+
font-size: var(--retro-font-size-sm);
|
|
4752
|
+
color: var(--retro-text-muted);
|
|
4281
4753
|
}
|
|
4282
4754
|
.retro-sidebar .active {
|
|
4283
4755
|
font-weight: bold;
|
|
@@ -4306,7 +4778,7 @@ input[type=datetime-local].retro-input.retro-input-sm {
|
|
|
4306
4778
|
margin: 16px;
|
|
4307
4779
|
margin-right: 0;
|
|
4308
4780
|
border-right: 2px solid var(--retro-border-medium);
|
|
4309
|
-
box-shadow: 2px 0 5px rgba(
|
|
4781
|
+
box-shadow: 2px 0 5px rgba(var(--retro-black-rgb), 0.05);
|
|
4310
4782
|
}
|
|
4311
4783
|
}
|
|
4312
4784
|
|
|
@@ -4335,7 +4807,7 @@ input[type=datetime-local].retro-input.retro-input-sm {
|
|
|
4335
4807
|
background: var(--retro-text);
|
|
4336
4808
|
position: absolute;
|
|
4337
4809
|
left: 0;
|
|
4338
|
-
transition:
|
|
4810
|
+
transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
|
|
4339
4811
|
}
|
|
4340
4812
|
.retro-sidebar-toggle-icon:before {
|
|
4341
4813
|
top: 6px;
|
|
@@ -4359,7 +4831,7 @@ input[type=datetime-local].retro-input.retro-input-sm {
|
|
|
4359
4831
|
left: 0;
|
|
4360
4832
|
right: 0;
|
|
4361
4833
|
bottom: 0;
|
|
4362
|
-
background: rgba(
|
|
4834
|
+
background: rgba(var(--retro-black-rgb), 0.5);
|
|
4363
4835
|
z-index: 999;
|
|
4364
4836
|
}
|
|
4365
4837
|
.retro-sidebar-overlay.active {
|
|
@@ -4372,316 +4844,1805 @@ input[type=datetime-local].retro-input.retro-input-sm {
|
|
|
4372
4844
|
}
|
|
4373
4845
|
|
|
4374
4846
|
/* Utilities */
|
|
4375
|
-
|
|
4376
|
-
|
|
4377
|
-
|
|
4378
|
-
|
|
4379
|
-
|
|
4380
|
-
|
|
4381
|
-
|
|
4382
|
-
|
|
4383
|
-
|
|
4847
|
+
/**
|
|
4848
|
+
* @name Accessibility Utilities
|
|
4849
|
+
* @group utilities
|
|
4850
|
+
* @description
|
|
4851
|
+
* Helpers for content that must reach assistive technology without being
|
|
4852
|
+
* visible, and for the keyboard affordances that go with them.
|
|
4853
|
+
*/
|
|
4854
|
+
.retro-sr-only {
|
|
4855
|
+
position: absolute;
|
|
4856
|
+
width: 1px;
|
|
4857
|
+
height: 1px;
|
|
4858
|
+
padding: 0;
|
|
4859
|
+
margin: -1px;
|
|
4860
|
+
overflow: hidden;
|
|
4861
|
+
clip: rect(0, 0, 0, 0);
|
|
4862
|
+
clip-path: inset(50%);
|
|
4863
|
+
white-space: nowrap;
|
|
4864
|
+
border: 0;
|
|
4865
|
+
}
|
|
4866
|
+
|
|
4867
|
+
.retro-sr-only-focusable:not(:focus):not(:focus-within) {
|
|
4868
|
+
position: absolute;
|
|
4869
|
+
width: 1px;
|
|
4870
|
+
height: 1px;
|
|
4871
|
+
padding: 0;
|
|
4872
|
+
margin: -1px;
|
|
4873
|
+
overflow: hidden;
|
|
4874
|
+
clip: rect(0, 0, 0, 0);
|
|
4875
|
+
clip-path: inset(50%);
|
|
4876
|
+
white-space: nowrap;
|
|
4877
|
+
border: 0;
|
|
4878
|
+
}
|
|
4879
|
+
.retro-sr-only-focusable:focus {
|
|
4880
|
+
position: static;
|
|
4881
|
+
z-index: var(--retro-z-index-fixed);
|
|
4882
|
+
padding: var(--retro-spacing-sm) var(--retro-spacing-md);
|
|
4883
|
+
background: var(--retro-bg);
|
|
4884
|
+
color: var(--retro-text);
|
|
4885
|
+
border: var(--retro-border-width-thick) solid var(--retro-border-dark);
|
|
4886
|
+
box-shadow: var(--retro-box-shadow-outset-button);
|
|
4887
|
+
}
|
|
4888
|
+
|
|
4889
|
+
/**
|
|
4890
|
+
* @name Spacing Utilities
|
|
4891
|
+
* @group utilities
|
|
4892
|
+
* @description
|
|
4893
|
+
* Margin and padding on a numeric scale. Every page in this repo already used
|
|
4894
|
+
* the `retro-` prefixed names (retro-mt-5, retro-p-4); only the unprefixed
|
|
4895
|
+
* ones existed, so none of them did anything.
|
|
4896
|
+
*
|
|
4897
|
+
* Scale: 0=0 1=4px 2=8px 3=12px 4=16px 5=24px 6=32px 7=40px 8=48px
|
|
4898
|
+
* @example html
|
|
4899
|
+
* <div class="retro-mt-4 retro-px-5">…</div>
|
|
4900
|
+
*/
|
|
4901
|
+
.retro-m-0 {
|
|
4902
|
+
margin: 0 !important;
|
|
4903
|
+
}
|
|
4904
|
+
|
|
4905
|
+
.retro-mt-0 {
|
|
4906
|
+
margin-top: 0 !important;
|
|
4907
|
+
}
|
|
4908
|
+
|
|
4909
|
+
.retro-mb-0 {
|
|
4910
|
+
margin-bottom: 0 !important;
|
|
4911
|
+
}
|
|
4912
|
+
|
|
4913
|
+
.retro-ml-0 {
|
|
4914
|
+
margin-left: 0 !important;
|
|
4915
|
+
}
|
|
4916
|
+
|
|
4917
|
+
.retro-mr-0 {
|
|
4918
|
+
margin-right: 0 !important;
|
|
4919
|
+
}
|
|
4920
|
+
|
|
4921
|
+
.retro-mx-0 {
|
|
4922
|
+
margin-left: 0 !important;
|
|
4923
|
+
margin-right: 0 !important;
|
|
4924
|
+
}
|
|
4925
|
+
|
|
4926
|
+
.retro-my-0 {
|
|
4927
|
+
margin-top: 0 !important;
|
|
4928
|
+
margin-bottom: 0 !important;
|
|
4929
|
+
}
|
|
4930
|
+
|
|
4931
|
+
.retro-p-0 {
|
|
4932
|
+
padding: 0 !important;
|
|
4933
|
+
}
|
|
4934
|
+
|
|
4935
|
+
.retro-pt-0 {
|
|
4936
|
+
padding-top: 0 !important;
|
|
4937
|
+
}
|
|
4938
|
+
|
|
4939
|
+
.retro-pb-0 {
|
|
4940
|
+
padding-bottom: 0 !important;
|
|
4941
|
+
}
|
|
4942
|
+
|
|
4943
|
+
.retro-pl-0 {
|
|
4944
|
+
padding-left: 0 !important;
|
|
4945
|
+
}
|
|
4946
|
+
|
|
4947
|
+
.retro-pr-0 {
|
|
4948
|
+
padding-right: 0 !important;
|
|
4949
|
+
}
|
|
4950
|
+
|
|
4951
|
+
.retro-px-0 {
|
|
4952
|
+
padding-left: 0 !important;
|
|
4953
|
+
padding-right: 0 !important;
|
|
4954
|
+
}
|
|
4955
|
+
|
|
4956
|
+
.retro-py-0 {
|
|
4957
|
+
padding-top: 0 !important;
|
|
4958
|
+
padding-bottom: 0 !important;
|
|
4959
|
+
}
|
|
4960
|
+
|
|
4961
|
+
.retro-gap-0 {
|
|
4962
|
+
gap: 0 !important;
|
|
4963
|
+
}
|
|
4964
|
+
|
|
4965
|
+
.retro-m-1 {
|
|
4966
|
+
margin: 4px !important;
|
|
4967
|
+
}
|
|
4968
|
+
|
|
4969
|
+
.retro-mt-1 {
|
|
4970
|
+
margin-top: 4px !important;
|
|
4971
|
+
}
|
|
4972
|
+
|
|
4973
|
+
.retro-mb-1 {
|
|
4974
|
+
margin-bottom: 4px !important;
|
|
4975
|
+
}
|
|
4976
|
+
|
|
4977
|
+
.retro-ml-1 {
|
|
4978
|
+
margin-left: 4px !important;
|
|
4979
|
+
}
|
|
4980
|
+
|
|
4981
|
+
.retro-mr-1 {
|
|
4982
|
+
margin-right: 4px !important;
|
|
4983
|
+
}
|
|
4984
|
+
|
|
4985
|
+
.retro-mx-1 {
|
|
4986
|
+
margin-left: 4px !important;
|
|
4987
|
+
margin-right: 4px !important;
|
|
4988
|
+
}
|
|
4989
|
+
|
|
4990
|
+
.retro-my-1 {
|
|
4991
|
+
margin-top: 4px !important;
|
|
4992
|
+
margin-bottom: 4px !important;
|
|
4993
|
+
}
|
|
4994
|
+
|
|
4995
|
+
.retro-p-1 {
|
|
4996
|
+
padding: 4px !important;
|
|
4997
|
+
}
|
|
4998
|
+
|
|
4999
|
+
.retro-pt-1 {
|
|
5000
|
+
padding-top: 4px !important;
|
|
5001
|
+
}
|
|
5002
|
+
|
|
5003
|
+
.retro-pb-1 {
|
|
5004
|
+
padding-bottom: 4px !important;
|
|
5005
|
+
}
|
|
5006
|
+
|
|
5007
|
+
.retro-pl-1 {
|
|
5008
|
+
padding-left: 4px !important;
|
|
5009
|
+
}
|
|
5010
|
+
|
|
5011
|
+
.retro-pr-1 {
|
|
5012
|
+
padding-right: 4px !important;
|
|
5013
|
+
}
|
|
5014
|
+
|
|
5015
|
+
.retro-px-1 {
|
|
5016
|
+
padding-left: 4px !important;
|
|
5017
|
+
padding-right: 4px !important;
|
|
5018
|
+
}
|
|
5019
|
+
|
|
5020
|
+
.retro-py-1 {
|
|
5021
|
+
padding-top: 4px !important;
|
|
5022
|
+
padding-bottom: 4px !important;
|
|
5023
|
+
}
|
|
5024
|
+
|
|
5025
|
+
.retro-gap-1 {
|
|
5026
|
+
gap: 4px !important;
|
|
5027
|
+
}
|
|
5028
|
+
|
|
5029
|
+
.retro-m-2 {
|
|
5030
|
+
margin: 8px !important;
|
|
5031
|
+
}
|
|
5032
|
+
|
|
5033
|
+
.retro-mt-2 {
|
|
5034
|
+
margin-top: 8px !important;
|
|
5035
|
+
}
|
|
5036
|
+
|
|
5037
|
+
.retro-mb-2 {
|
|
5038
|
+
margin-bottom: 8px !important;
|
|
5039
|
+
}
|
|
5040
|
+
|
|
5041
|
+
.retro-ml-2 {
|
|
5042
|
+
margin-left: 8px !important;
|
|
5043
|
+
}
|
|
5044
|
+
|
|
5045
|
+
.retro-mr-2 {
|
|
5046
|
+
margin-right: 8px !important;
|
|
5047
|
+
}
|
|
5048
|
+
|
|
5049
|
+
.retro-mx-2 {
|
|
5050
|
+
margin-left: 8px !important;
|
|
5051
|
+
margin-right: 8px !important;
|
|
5052
|
+
}
|
|
5053
|
+
|
|
5054
|
+
.retro-my-2 {
|
|
5055
|
+
margin-top: 8px !important;
|
|
5056
|
+
margin-bottom: 8px !important;
|
|
5057
|
+
}
|
|
5058
|
+
|
|
5059
|
+
.retro-p-2 {
|
|
5060
|
+
padding: 8px !important;
|
|
5061
|
+
}
|
|
5062
|
+
|
|
5063
|
+
.retro-pt-2 {
|
|
5064
|
+
padding-top: 8px !important;
|
|
5065
|
+
}
|
|
5066
|
+
|
|
5067
|
+
.retro-pb-2 {
|
|
5068
|
+
padding-bottom: 8px !important;
|
|
5069
|
+
}
|
|
5070
|
+
|
|
5071
|
+
.retro-pl-2 {
|
|
5072
|
+
padding-left: 8px !important;
|
|
5073
|
+
}
|
|
5074
|
+
|
|
5075
|
+
.retro-pr-2 {
|
|
5076
|
+
padding-right: 8px !important;
|
|
5077
|
+
}
|
|
5078
|
+
|
|
5079
|
+
.retro-px-2 {
|
|
5080
|
+
padding-left: 8px !important;
|
|
5081
|
+
padding-right: 8px !important;
|
|
5082
|
+
}
|
|
5083
|
+
|
|
5084
|
+
.retro-py-2 {
|
|
5085
|
+
padding-top: 8px !important;
|
|
5086
|
+
padding-bottom: 8px !important;
|
|
5087
|
+
}
|
|
5088
|
+
|
|
5089
|
+
.retro-gap-2 {
|
|
5090
|
+
gap: 8px !important;
|
|
5091
|
+
}
|
|
5092
|
+
|
|
5093
|
+
.retro-m-3 {
|
|
5094
|
+
margin: 12px !important;
|
|
5095
|
+
}
|
|
5096
|
+
|
|
5097
|
+
.retro-mt-3 {
|
|
5098
|
+
margin-top: 12px !important;
|
|
5099
|
+
}
|
|
5100
|
+
|
|
5101
|
+
.retro-mb-3 {
|
|
5102
|
+
margin-bottom: 12px !important;
|
|
5103
|
+
}
|
|
5104
|
+
|
|
5105
|
+
.retro-ml-3 {
|
|
5106
|
+
margin-left: 12px !important;
|
|
5107
|
+
}
|
|
5108
|
+
|
|
5109
|
+
.retro-mr-3 {
|
|
5110
|
+
margin-right: 12px !important;
|
|
5111
|
+
}
|
|
5112
|
+
|
|
5113
|
+
.retro-mx-3 {
|
|
5114
|
+
margin-left: 12px !important;
|
|
5115
|
+
margin-right: 12px !important;
|
|
5116
|
+
}
|
|
5117
|
+
|
|
5118
|
+
.retro-my-3 {
|
|
5119
|
+
margin-top: 12px !important;
|
|
5120
|
+
margin-bottom: 12px !important;
|
|
5121
|
+
}
|
|
5122
|
+
|
|
5123
|
+
.retro-p-3 {
|
|
5124
|
+
padding: 12px !important;
|
|
5125
|
+
}
|
|
5126
|
+
|
|
5127
|
+
.retro-pt-3 {
|
|
5128
|
+
padding-top: 12px !important;
|
|
5129
|
+
}
|
|
5130
|
+
|
|
5131
|
+
.retro-pb-3 {
|
|
5132
|
+
padding-bottom: 12px !important;
|
|
5133
|
+
}
|
|
5134
|
+
|
|
5135
|
+
.retro-pl-3 {
|
|
5136
|
+
padding-left: 12px !important;
|
|
5137
|
+
}
|
|
5138
|
+
|
|
5139
|
+
.retro-pr-3 {
|
|
5140
|
+
padding-right: 12px !important;
|
|
5141
|
+
}
|
|
5142
|
+
|
|
5143
|
+
.retro-px-3 {
|
|
5144
|
+
padding-left: 12px !important;
|
|
5145
|
+
padding-right: 12px !important;
|
|
5146
|
+
}
|
|
5147
|
+
|
|
5148
|
+
.retro-py-3 {
|
|
5149
|
+
padding-top: 12px !important;
|
|
5150
|
+
padding-bottom: 12px !important;
|
|
5151
|
+
}
|
|
5152
|
+
|
|
5153
|
+
.retro-gap-3 {
|
|
5154
|
+
gap: 12px !important;
|
|
5155
|
+
}
|
|
5156
|
+
|
|
5157
|
+
.retro-m-4 {
|
|
5158
|
+
margin: 16px !important;
|
|
5159
|
+
}
|
|
5160
|
+
|
|
5161
|
+
.retro-mt-4 {
|
|
5162
|
+
margin-top: 16px !important;
|
|
5163
|
+
}
|
|
5164
|
+
|
|
5165
|
+
.retro-mb-4 {
|
|
5166
|
+
margin-bottom: 16px !important;
|
|
5167
|
+
}
|
|
5168
|
+
|
|
5169
|
+
.retro-ml-4 {
|
|
5170
|
+
margin-left: 16px !important;
|
|
5171
|
+
}
|
|
5172
|
+
|
|
5173
|
+
.retro-mr-4 {
|
|
5174
|
+
margin-right: 16px !important;
|
|
5175
|
+
}
|
|
5176
|
+
|
|
5177
|
+
.retro-mx-4 {
|
|
5178
|
+
margin-left: 16px !important;
|
|
5179
|
+
margin-right: 16px !important;
|
|
5180
|
+
}
|
|
5181
|
+
|
|
5182
|
+
.retro-my-4 {
|
|
5183
|
+
margin-top: 16px !important;
|
|
5184
|
+
margin-bottom: 16px !important;
|
|
5185
|
+
}
|
|
5186
|
+
|
|
5187
|
+
.retro-p-4 {
|
|
5188
|
+
padding: 16px !important;
|
|
5189
|
+
}
|
|
5190
|
+
|
|
5191
|
+
.retro-pt-4 {
|
|
5192
|
+
padding-top: 16px !important;
|
|
5193
|
+
}
|
|
5194
|
+
|
|
5195
|
+
.retro-pb-4 {
|
|
5196
|
+
padding-bottom: 16px !important;
|
|
5197
|
+
}
|
|
5198
|
+
|
|
5199
|
+
.retro-pl-4 {
|
|
5200
|
+
padding-left: 16px !important;
|
|
5201
|
+
}
|
|
5202
|
+
|
|
5203
|
+
.retro-pr-4 {
|
|
5204
|
+
padding-right: 16px !important;
|
|
5205
|
+
}
|
|
5206
|
+
|
|
5207
|
+
.retro-px-4 {
|
|
5208
|
+
padding-left: 16px !important;
|
|
5209
|
+
padding-right: 16px !important;
|
|
5210
|
+
}
|
|
5211
|
+
|
|
5212
|
+
.retro-py-4 {
|
|
5213
|
+
padding-top: 16px !important;
|
|
5214
|
+
padding-bottom: 16px !important;
|
|
5215
|
+
}
|
|
5216
|
+
|
|
5217
|
+
.retro-gap-4 {
|
|
5218
|
+
gap: 16px !important;
|
|
5219
|
+
}
|
|
5220
|
+
|
|
5221
|
+
.retro-m-5 {
|
|
5222
|
+
margin: 24px !important;
|
|
5223
|
+
}
|
|
5224
|
+
|
|
5225
|
+
.retro-mt-5 {
|
|
5226
|
+
margin-top: 24px !important;
|
|
5227
|
+
}
|
|
5228
|
+
|
|
5229
|
+
.retro-mb-5 {
|
|
5230
|
+
margin-bottom: 24px !important;
|
|
5231
|
+
}
|
|
5232
|
+
|
|
5233
|
+
.retro-ml-5 {
|
|
5234
|
+
margin-left: 24px !important;
|
|
5235
|
+
}
|
|
5236
|
+
|
|
5237
|
+
.retro-mr-5 {
|
|
5238
|
+
margin-right: 24px !important;
|
|
5239
|
+
}
|
|
5240
|
+
|
|
5241
|
+
.retro-mx-5 {
|
|
5242
|
+
margin-left: 24px !important;
|
|
5243
|
+
margin-right: 24px !important;
|
|
5244
|
+
}
|
|
5245
|
+
|
|
5246
|
+
.retro-my-5 {
|
|
5247
|
+
margin-top: 24px !important;
|
|
5248
|
+
margin-bottom: 24px !important;
|
|
5249
|
+
}
|
|
5250
|
+
|
|
5251
|
+
.retro-p-5 {
|
|
5252
|
+
padding: 24px !important;
|
|
5253
|
+
}
|
|
5254
|
+
|
|
5255
|
+
.retro-pt-5 {
|
|
5256
|
+
padding-top: 24px !important;
|
|
5257
|
+
}
|
|
5258
|
+
|
|
5259
|
+
.retro-pb-5 {
|
|
5260
|
+
padding-bottom: 24px !important;
|
|
5261
|
+
}
|
|
5262
|
+
|
|
5263
|
+
.retro-pl-5 {
|
|
5264
|
+
padding-left: 24px !important;
|
|
5265
|
+
}
|
|
5266
|
+
|
|
5267
|
+
.retro-pr-5 {
|
|
5268
|
+
padding-right: 24px !important;
|
|
5269
|
+
}
|
|
5270
|
+
|
|
5271
|
+
.retro-px-5 {
|
|
5272
|
+
padding-left: 24px !important;
|
|
5273
|
+
padding-right: 24px !important;
|
|
5274
|
+
}
|
|
5275
|
+
|
|
5276
|
+
.retro-py-5 {
|
|
5277
|
+
padding-top: 24px !important;
|
|
5278
|
+
padding-bottom: 24px !important;
|
|
5279
|
+
}
|
|
5280
|
+
|
|
5281
|
+
.retro-gap-5 {
|
|
5282
|
+
gap: 24px !important;
|
|
5283
|
+
}
|
|
5284
|
+
|
|
5285
|
+
.retro-m-6 {
|
|
5286
|
+
margin: 32px !important;
|
|
5287
|
+
}
|
|
5288
|
+
|
|
5289
|
+
.retro-mt-6 {
|
|
5290
|
+
margin-top: 32px !important;
|
|
5291
|
+
}
|
|
5292
|
+
|
|
5293
|
+
.retro-mb-6 {
|
|
5294
|
+
margin-bottom: 32px !important;
|
|
5295
|
+
}
|
|
5296
|
+
|
|
5297
|
+
.retro-ml-6 {
|
|
5298
|
+
margin-left: 32px !important;
|
|
5299
|
+
}
|
|
5300
|
+
|
|
5301
|
+
.retro-mr-6 {
|
|
5302
|
+
margin-right: 32px !important;
|
|
5303
|
+
}
|
|
5304
|
+
|
|
5305
|
+
.retro-mx-6 {
|
|
5306
|
+
margin-left: 32px !important;
|
|
5307
|
+
margin-right: 32px !important;
|
|
5308
|
+
}
|
|
5309
|
+
|
|
5310
|
+
.retro-my-6 {
|
|
5311
|
+
margin-top: 32px !important;
|
|
5312
|
+
margin-bottom: 32px !important;
|
|
5313
|
+
}
|
|
5314
|
+
|
|
5315
|
+
.retro-p-6 {
|
|
5316
|
+
padding: 32px !important;
|
|
5317
|
+
}
|
|
5318
|
+
|
|
5319
|
+
.retro-pt-6 {
|
|
5320
|
+
padding-top: 32px !important;
|
|
5321
|
+
}
|
|
5322
|
+
|
|
5323
|
+
.retro-pb-6 {
|
|
5324
|
+
padding-bottom: 32px !important;
|
|
5325
|
+
}
|
|
5326
|
+
|
|
5327
|
+
.retro-pl-6 {
|
|
5328
|
+
padding-left: 32px !important;
|
|
5329
|
+
}
|
|
5330
|
+
|
|
5331
|
+
.retro-pr-6 {
|
|
5332
|
+
padding-right: 32px !important;
|
|
5333
|
+
}
|
|
5334
|
+
|
|
5335
|
+
.retro-px-6 {
|
|
5336
|
+
padding-left: 32px !important;
|
|
5337
|
+
padding-right: 32px !important;
|
|
5338
|
+
}
|
|
5339
|
+
|
|
5340
|
+
.retro-py-6 {
|
|
5341
|
+
padding-top: 32px !important;
|
|
5342
|
+
padding-bottom: 32px !important;
|
|
5343
|
+
}
|
|
5344
|
+
|
|
5345
|
+
.retro-gap-6 {
|
|
5346
|
+
gap: 32px !important;
|
|
5347
|
+
}
|
|
5348
|
+
|
|
5349
|
+
.retro-m-7 {
|
|
5350
|
+
margin: 40px !important;
|
|
5351
|
+
}
|
|
5352
|
+
|
|
5353
|
+
.retro-mt-7 {
|
|
5354
|
+
margin-top: 40px !important;
|
|
5355
|
+
}
|
|
5356
|
+
|
|
5357
|
+
.retro-mb-7 {
|
|
5358
|
+
margin-bottom: 40px !important;
|
|
5359
|
+
}
|
|
5360
|
+
|
|
5361
|
+
.retro-ml-7 {
|
|
5362
|
+
margin-left: 40px !important;
|
|
5363
|
+
}
|
|
5364
|
+
|
|
5365
|
+
.retro-mr-7 {
|
|
5366
|
+
margin-right: 40px !important;
|
|
5367
|
+
}
|
|
5368
|
+
|
|
5369
|
+
.retro-mx-7 {
|
|
5370
|
+
margin-left: 40px !important;
|
|
5371
|
+
margin-right: 40px !important;
|
|
5372
|
+
}
|
|
5373
|
+
|
|
5374
|
+
.retro-my-7 {
|
|
5375
|
+
margin-top: 40px !important;
|
|
5376
|
+
margin-bottom: 40px !important;
|
|
5377
|
+
}
|
|
5378
|
+
|
|
5379
|
+
.retro-p-7 {
|
|
5380
|
+
padding: 40px !important;
|
|
5381
|
+
}
|
|
5382
|
+
|
|
5383
|
+
.retro-pt-7 {
|
|
5384
|
+
padding-top: 40px !important;
|
|
5385
|
+
}
|
|
5386
|
+
|
|
5387
|
+
.retro-pb-7 {
|
|
5388
|
+
padding-bottom: 40px !important;
|
|
5389
|
+
}
|
|
5390
|
+
|
|
5391
|
+
.retro-pl-7 {
|
|
5392
|
+
padding-left: 40px !important;
|
|
5393
|
+
}
|
|
5394
|
+
|
|
5395
|
+
.retro-pr-7 {
|
|
5396
|
+
padding-right: 40px !important;
|
|
5397
|
+
}
|
|
5398
|
+
|
|
5399
|
+
.retro-px-7 {
|
|
5400
|
+
padding-left: 40px !important;
|
|
5401
|
+
padding-right: 40px !important;
|
|
5402
|
+
}
|
|
5403
|
+
|
|
5404
|
+
.retro-py-7 {
|
|
5405
|
+
padding-top: 40px !important;
|
|
5406
|
+
padding-bottom: 40px !important;
|
|
5407
|
+
}
|
|
5408
|
+
|
|
5409
|
+
.retro-gap-7 {
|
|
5410
|
+
gap: 40px !important;
|
|
5411
|
+
}
|
|
5412
|
+
|
|
5413
|
+
.retro-m-8 {
|
|
5414
|
+
margin: 48px !important;
|
|
5415
|
+
}
|
|
5416
|
+
|
|
5417
|
+
.retro-mt-8 {
|
|
5418
|
+
margin-top: 48px !important;
|
|
5419
|
+
}
|
|
5420
|
+
|
|
5421
|
+
.retro-mb-8 {
|
|
5422
|
+
margin-bottom: 48px !important;
|
|
5423
|
+
}
|
|
5424
|
+
|
|
5425
|
+
.retro-ml-8 {
|
|
5426
|
+
margin-left: 48px !important;
|
|
5427
|
+
}
|
|
5428
|
+
|
|
5429
|
+
.retro-mr-8 {
|
|
5430
|
+
margin-right: 48px !important;
|
|
5431
|
+
}
|
|
5432
|
+
|
|
5433
|
+
.retro-mx-8 {
|
|
5434
|
+
margin-left: 48px !important;
|
|
5435
|
+
margin-right: 48px !important;
|
|
5436
|
+
}
|
|
5437
|
+
|
|
5438
|
+
.retro-my-8 {
|
|
5439
|
+
margin-top: 48px !important;
|
|
5440
|
+
margin-bottom: 48px !important;
|
|
5441
|
+
}
|
|
5442
|
+
|
|
5443
|
+
.retro-p-8 {
|
|
5444
|
+
padding: 48px !important;
|
|
5445
|
+
}
|
|
5446
|
+
|
|
5447
|
+
.retro-pt-8 {
|
|
5448
|
+
padding-top: 48px !important;
|
|
5449
|
+
}
|
|
5450
|
+
|
|
5451
|
+
.retro-pb-8 {
|
|
5452
|
+
padding-bottom: 48px !important;
|
|
5453
|
+
}
|
|
5454
|
+
|
|
5455
|
+
.retro-pl-8 {
|
|
5456
|
+
padding-left: 48px !important;
|
|
5457
|
+
}
|
|
5458
|
+
|
|
5459
|
+
.retro-pr-8 {
|
|
5460
|
+
padding-right: 48px !important;
|
|
5461
|
+
}
|
|
5462
|
+
|
|
5463
|
+
.retro-px-8 {
|
|
5464
|
+
padding-left: 48px !important;
|
|
5465
|
+
padding-right: 48px !important;
|
|
5466
|
+
}
|
|
5467
|
+
|
|
5468
|
+
.retro-py-8 {
|
|
5469
|
+
padding-top: 48px !important;
|
|
5470
|
+
padding-bottom: 48px !important;
|
|
5471
|
+
}
|
|
5472
|
+
|
|
5473
|
+
.retro-gap-8 {
|
|
5474
|
+
gap: 48px !important;
|
|
5475
|
+
}
|
|
5476
|
+
|
|
5477
|
+
.retro-mx-auto {
|
|
5478
|
+
margin-left: auto !important;
|
|
5479
|
+
margin-right: auto !important;
|
|
5480
|
+
}
|
|
5481
|
+
|
|
5482
|
+
.retro-ml-auto {
|
|
5483
|
+
margin-left: auto !important;
|
|
5484
|
+
}
|
|
5485
|
+
|
|
5486
|
+
.retro-mr-auto {
|
|
5487
|
+
margin-right: auto !important;
|
|
5488
|
+
}
|
|
5489
|
+
|
|
5490
|
+
.mt-0 {
|
|
5491
|
+
margin-top: 0px !important;
|
|
5492
|
+
}
|
|
5493
|
+
|
|
5494
|
+
.mb-0 {
|
|
5495
|
+
margin-bottom: 0px !important;
|
|
5496
|
+
}
|
|
5497
|
+
|
|
5498
|
+
.ml-0 {
|
|
5499
|
+
margin-left: 0px !important;
|
|
5500
|
+
}
|
|
5501
|
+
|
|
5502
|
+
.mr-0 {
|
|
5503
|
+
margin-right: 0px !important;
|
|
5504
|
+
}
|
|
5505
|
+
|
|
5506
|
+
.mx-0 {
|
|
4384
5507
|
margin-left: 0px !important;
|
|
5508
|
+
margin-right: 0px !important;
|
|
5509
|
+
}
|
|
5510
|
+
|
|
5511
|
+
.my-0 {
|
|
5512
|
+
margin-top: 0px !important;
|
|
5513
|
+
margin-bottom: 0px !important;
|
|
5514
|
+
}
|
|
5515
|
+
|
|
5516
|
+
.pt-0 {
|
|
5517
|
+
padding-top: 0px !important;
|
|
5518
|
+
}
|
|
5519
|
+
|
|
5520
|
+
.pb-0 {
|
|
5521
|
+
padding-bottom: 0px !important;
|
|
5522
|
+
}
|
|
5523
|
+
|
|
5524
|
+
.pl-0 {
|
|
5525
|
+
padding-left: 0px !important;
|
|
5526
|
+
}
|
|
5527
|
+
|
|
5528
|
+
.pr-0 {
|
|
5529
|
+
padding-right: 0px !important;
|
|
5530
|
+
}
|
|
5531
|
+
|
|
5532
|
+
.px-0 {
|
|
5533
|
+
padding-left: 0px !important;
|
|
5534
|
+
padding-right: 0px !important;
|
|
5535
|
+
}
|
|
5536
|
+
|
|
5537
|
+
.py-0 {
|
|
5538
|
+
padding-top: 0px !important;
|
|
5539
|
+
padding-bottom: 0px !important;
|
|
5540
|
+
}
|
|
5541
|
+
|
|
5542
|
+
.mt-1 {
|
|
5543
|
+
margin-top: 4px !important;
|
|
5544
|
+
}
|
|
5545
|
+
|
|
5546
|
+
.mb-1 {
|
|
5547
|
+
margin-bottom: 4px !important;
|
|
5548
|
+
}
|
|
5549
|
+
|
|
5550
|
+
.ml-1 {
|
|
5551
|
+
margin-left: 4px !important;
|
|
5552
|
+
}
|
|
5553
|
+
|
|
5554
|
+
.mr-1 {
|
|
5555
|
+
margin-right: 4px !important;
|
|
5556
|
+
}
|
|
5557
|
+
|
|
5558
|
+
.mx-1 {
|
|
5559
|
+
margin-left: 4px !important;
|
|
5560
|
+
margin-right: 4px !important;
|
|
5561
|
+
}
|
|
5562
|
+
|
|
5563
|
+
.my-1 {
|
|
5564
|
+
margin-top: 4px !important;
|
|
5565
|
+
margin-bottom: 4px !important;
|
|
5566
|
+
}
|
|
5567
|
+
|
|
5568
|
+
.pt-1 {
|
|
5569
|
+
padding-top: 4px !important;
|
|
5570
|
+
}
|
|
5571
|
+
|
|
5572
|
+
.pb-1 {
|
|
5573
|
+
padding-bottom: 4px !important;
|
|
5574
|
+
}
|
|
5575
|
+
|
|
5576
|
+
.pl-1 {
|
|
5577
|
+
padding-left: 4px !important;
|
|
5578
|
+
}
|
|
5579
|
+
|
|
5580
|
+
.pr-1 {
|
|
5581
|
+
padding-right: 4px !important;
|
|
5582
|
+
}
|
|
5583
|
+
|
|
5584
|
+
.px-1 {
|
|
5585
|
+
padding-left: 4px !important;
|
|
5586
|
+
padding-right: 4px !important;
|
|
5587
|
+
}
|
|
5588
|
+
|
|
5589
|
+
.py-1 {
|
|
5590
|
+
padding-top: 4px !important;
|
|
5591
|
+
padding-bottom: 4px !important;
|
|
5592
|
+
}
|
|
5593
|
+
|
|
5594
|
+
.mt-2 {
|
|
5595
|
+
margin-top: 8px !important;
|
|
5596
|
+
}
|
|
5597
|
+
|
|
5598
|
+
.mb-2 {
|
|
5599
|
+
margin-bottom: 8px !important;
|
|
5600
|
+
}
|
|
5601
|
+
|
|
5602
|
+
.ml-2 {
|
|
5603
|
+
margin-left: 8px !important;
|
|
5604
|
+
}
|
|
5605
|
+
|
|
5606
|
+
.mr-2 {
|
|
5607
|
+
margin-right: 8px !important;
|
|
5608
|
+
}
|
|
5609
|
+
|
|
5610
|
+
.mx-2 {
|
|
5611
|
+
margin-left: 8px !important;
|
|
5612
|
+
margin-right: 8px !important;
|
|
5613
|
+
}
|
|
5614
|
+
|
|
5615
|
+
.my-2 {
|
|
5616
|
+
margin-top: 8px !important;
|
|
5617
|
+
margin-bottom: 8px !important;
|
|
5618
|
+
}
|
|
5619
|
+
|
|
5620
|
+
.pt-2 {
|
|
5621
|
+
padding-top: 8px !important;
|
|
5622
|
+
}
|
|
5623
|
+
|
|
5624
|
+
.pb-2 {
|
|
5625
|
+
padding-bottom: 8px !important;
|
|
5626
|
+
}
|
|
5627
|
+
|
|
5628
|
+
.pl-2 {
|
|
5629
|
+
padding-left: 8px !important;
|
|
5630
|
+
}
|
|
5631
|
+
|
|
5632
|
+
.pr-2 {
|
|
5633
|
+
padding-right: 8px !important;
|
|
5634
|
+
}
|
|
5635
|
+
|
|
5636
|
+
.px-2 {
|
|
5637
|
+
padding-left: 8px !important;
|
|
5638
|
+
padding-right: 8px !important;
|
|
5639
|
+
}
|
|
5640
|
+
|
|
5641
|
+
.py-2 {
|
|
5642
|
+
padding-top: 8px !important;
|
|
5643
|
+
padding-bottom: 8px !important;
|
|
5644
|
+
}
|
|
5645
|
+
|
|
5646
|
+
.mt-3 {
|
|
5647
|
+
margin-top: 12px !important;
|
|
5648
|
+
}
|
|
5649
|
+
|
|
5650
|
+
.mb-3 {
|
|
5651
|
+
margin-bottom: 12px !important;
|
|
5652
|
+
}
|
|
5653
|
+
|
|
5654
|
+
.ml-3 {
|
|
5655
|
+
margin-left: 12px !important;
|
|
5656
|
+
}
|
|
5657
|
+
|
|
5658
|
+
.mr-3 {
|
|
5659
|
+
margin-right: 12px !important;
|
|
5660
|
+
}
|
|
5661
|
+
|
|
5662
|
+
.mx-3 {
|
|
5663
|
+
margin-left: 12px !important;
|
|
5664
|
+
margin-right: 12px !important;
|
|
5665
|
+
}
|
|
5666
|
+
|
|
5667
|
+
.my-3 {
|
|
5668
|
+
margin-top: 12px !important;
|
|
5669
|
+
margin-bottom: 12px !important;
|
|
5670
|
+
}
|
|
5671
|
+
|
|
5672
|
+
.pt-3 {
|
|
5673
|
+
padding-top: 12px !important;
|
|
5674
|
+
}
|
|
5675
|
+
|
|
5676
|
+
.pb-3 {
|
|
5677
|
+
padding-bottom: 12px !important;
|
|
5678
|
+
}
|
|
5679
|
+
|
|
5680
|
+
.pl-3 {
|
|
5681
|
+
padding-left: 12px !important;
|
|
5682
|
+
}
|
|
5683
|
+
|
|
5684
|
+
.pr-3 {
|
|
5685
|
+
padding-right: 12px !important;
|
|
5686
|
+
}
|
|
5687
|
+
|
|
5688
|
+
.px-3 {
|
|
5689
|
+
padding-left: 12px !important;
|
|
5690
|
+
padding-right: 12px !important;
|
|
5691
|
+
}
|
|
5692
|
+
|
|
5693
|
+
.py-3 {
|
|
5694
|
+
padding-top: 12px !important;
|
|
5695
|
+
padding-bottom: 12px !important;
|
|
5696
|
+
}
|
|
5697
|
+
|
|
5698
|
+
.mt-4 {
|
|
5699
|
+
margin-top: 16px !important;
|
|
5700
|
+
}
|
|
5701
|
+
|
|
5702
|
+
.mb-4 {
|
|
5703
|
+
margin-bottom: 16px !important;
|
|
5704
|
+
}
|
|
5705
|
+
|
|
5706
|
+
.ml-4 {
|
|
5707
|
+
margin-left: 16px !important;
|
|
5708
|
+
}
|
|
5709
|
+
|
|
5710
|
+
.mr-4 {
|
|
5711
|
+
margin-right: 16px !important;
|
|
5712
|
+
}
|
|
5713
|
+
|
|
5714
|
+
.mx-4 {
|
|
5715
|
+
margin-left: 16px !important;
|
|
5716
|
+
margin-right: 16px !important;
|
|
5717
|
+
}
|
|
5718
|
+
|
|
5719
|
+
.my-4 {
|
|
5720
|
+
margin-top: 16px !important;
|
|
5721
|
+
margin-bottom: 16px !important;
|
|
5722
|
+
}
|
|
5723
|
+
|
|
5724
|
+
.pt-4 {
|
|
5725
|
+
padding-top: 16px !important;
|
|
5726
|
+
}
|
|
5727
|
+
|
|
5728
|
+
.pb-4 {
|
|
5729
|
+
padding-bottom: 16px !important;
|
|
5730
|
+
}
|
|
5731
|
+
|
|
5732
|
+
.pl-4 {
|
|
5733
|
+
padding-left: 16px !important;
|
|
5734
|
+
}
|
|
5735
|
+
|
|
5736
|
+
.pr-4 {
|
|
5737
|
+
padding-right: 16px !important;
|
|
5738
|
+
}
|
|
5739
|
+
|
|
5740
|
+
.px-4 {
|
|
5741
|
+
padding-left: 16px !important;
|
|
5742
|
+
padding-right: 16px !important;
|
|
5743
|
+
}
|
|
5744
|
+
|
|
5745
|
+
.py-4 {
|
|
5746
|
+
padding-top: 16px !important;
|
|
5747
|
+
padding-bottom: 16px !important;
|
|
5748
|
+
}
|
|
5749
|
+
|
|
5750
|
+
.mt-5 {
|
|
5751
|
+
margin-top: 20px !important;
|
|
5752
|
+
}
|
|
5753
|
+
|
|
5754
|
+
.mb-5 {
|
|
5755
|
+
margin-bottom: 20px !important;
|
|
5756
|
+
}
|
|
5757
|
+
|
|
5758
|
+
.ml-5 {
|
|
5759
|
+
margin-left: 20px !important;
|
|
5760
|
+
}
|
|
5761
|
+
|
|
5762
|
+
.mr-5 {
|
|
5763
|
+
margin-right: 20px !important;
|
|
5764
|
+
}
|
|
5765
|
+
|
|
5766
|
+
.mx-5 {
|
|
5767
|
+
margin-left: 20px !important;
|
|
5768
|
+
margin-right: 20px !important;
|
|
5769
|
+
}
|
|
5770
|
+
|
|
5771
|
+
.my-5 {
|
|
5772
|
+
margin-top: 20px !important;
|
|
5773
|
+
margin-bottom: 20px !important;
|
|
5774
|
+
}
|
|
5775
|
+
|
|
5776
|
+
.pt-5 {
|
|
5777
|
+
padding-top: 20px !important;
|
|
5778
|
+
}
|
|
5779
|
+
|
|
5780
|
+
.pb-5 {
|
|
5781
|
+
padding-bottom: 20px !important;
|
|
5782
|
+
}
|
|
5783
|
+
|
|
5784
|
+
.pl-5 {
|
|
5785
|
+
padding-left: 20px !important;
|
|
5786
|
+
}
|
|
5787
|
+
|
|
5788
|
+
.pr-5 {
|
|
5789
|
+
padding-right: 20px !important;
|
|
5790
|
+
}
|
|
5791
|
+
|
|
5792
|
+
.px-5 {
|
|
5793
|
+
padding-left: 20px !important;
|
|
5794
|
+
padding-right: 20px !important;
|
|
5795
|
+
}
|
|
5796
|
+
|
|
5797
|
+
.py-5 {
|
|
5798
|
+
padding-top: 20px !important;
|
|
5799
|
+
padding-bottom: 20px !important;
|
|
5800
|
+
}
|
|
5801
|
+
|
|
5802
|
+
/**
|
|
5803
|
+
* @name Flexbox & Display Utilities
|
|
5804
|
+
* @group utilities
|
|
5805
|
+
* @description
|
|
5806
|
+
* The grid utilities shipped gap/justify/align, but the flex primitives the
|
|
5807
|
+
* demo pages leaned on (retro-flex, retro-items-center, retro-flex-1) did not
|
|
5808
|
+
* exist, so those layouts fell back to plain block flow.
|
|
5809
|
+
*/
|
|
5810
|
+
.retro-block {
|
|
5811
|
+
display: block !important;
|
|
5812
|
+
}
|
|
5813
|
+
|
|
5814
|
+
.retro-inline-block {
|
|
5815
|
+
display: inline-block !important;
|
|
5816
|
+
}
|
|
5817
|
+
|
|
5818
|
+
.retro-inline {
|
|
5819
|
+
display: inline !important;
|
|
5820
|
+
}
|
|
5821
|
+
|
|
5822
|
+
.retro-hidden {
|
|
5823
|
+
display: none !important;
|
|
5824
|
+
}
|
|
5825
|
+
|
|
5826
|
+
.retro-flex {
|
|
5827
|
+
display: flex !important;
|
|
5828
|
+
}
|
|
5829
|
+
|
|
5830
|
+
.retro-inline-flex {
|
|
5831
|
+
display: inline-flex !important;
|
|
5832
|
+
}
|
|
5833
|
+
|
|
5834
|
+
.retro-flex-row {
|
|
5835
|
+
flex-direction: row !important;
|
|
5836
|
+
}
|
|
5837
|
+
|
|
5838
|
+
.retro-flex-col {
|
|
5839
|
+
flex-direction: column !important;
|
|
5840
|
+
}
|
|
5841
|
+
|
|
5842
|
+
.retro-flex-wrap {
|
|
5843
|
+
flex-wrap: wrap !important;
|
|
5844
|
+
}
|
|
5845
|
+
|
|
5846
|
+
.retro-flex-nowrap {
|
|
5847
|
+
flex-wrap: nowrap !important;
|
|
5848
|
+
}
|
|
5849
|
+
|
|
5850
|
+
.retro-flex-1 {
|
|
5851
|
+
flex: 1 1 0% !important;
|
|
5852
|
+
min-width: 0;
|
|
5853
|
+
}
|
|
5854
|
+
|
|
5855
|
+
.retro-flex-auto {
|
|
5856
|
+
flex: 1 1 auto !important;
|
|
5857
|
+
min-width: 0;
|
|
5858
|
+
}
|
|
5859
|
+
|
|
5860
|
+
.retro-flex-none {
|
|
5861
|
+
flex: none !important;
|
|
5862
|
+
}
|
|
5863
|
+
|
|
5864
|
+
.retro-grow {
|
|
5865
|
+
flex-grow: 1 !important;
|
|
5866
|
+
}
|
|
5867
|
+
|
|
5868
|
+
.retro-shrink-0 {
|
|
5869
|
+
flex-shrink: 0 !important;
|
|
5870
|
+
}
|
|
5871
|
+
|
|
5872
|
+
.retro-items-start {
|
|
5873
|
+
align-items: flex-start !important;
|
|
5874
|
+
}
|
|
5875
|
+
|
|
5876
|
+
.retro-items-center {
|
|
5877
|
+
align-items: center !important;
|
|
5878
|
+
}
|
|
5879
|
+
|
|
5880
|
+
.retro-items-end {
|
|
5881
|
+
align-items: flex-end !important;
|
|
5882
|
+
}
|
|
5883
|
+
|
|
5884
|
+
.retro-items-stretch {
|
|
5885
|
+
align-items: stretch !important;
|
|
5886
|
+
}
|
|
5887
|
+
|
|
5888
|
+
.retro-items-baseline {
|
|
5889
|
+
align-items: baseline !important;
|
|
5890
|
+
}
|
|
5891
|
+
|
|
5892
|
+
.retro-justify-between {
|
|
5893
|
+
justify-content: space-between !important;
|
|
5894
|
+
}
|
|
5895
|
+
|
|
5896
|
+
.retro-justify-around {
|
|
5897
|
+
justify-content: space-around !important;
|
|
5898
|
+
}
|
|
5899
|
+
|
|
5900
|
+
.retro-justify-evenly {
|
|
5901
|
+
justify-content: space-evenly !important;
|
|
5902
|
+
}
|
|
5903
|
+
|
|
5904
|
+
.retro-self-start {
|
|
5905
|
+
align-self: flex-start !important;
|
|
5906
|
+
}
|
|
5907
|
+
|
|
5908
|
+
.retro-self-center {
|
|
5909
|
+
align-self: center !important;
|
|
5910
|
+
}
|
|
5911
|
+
|
|
5912
|
+
.retro-self-end {
|
|
5913
|
+
align-self: flex-end !important;
|
|
5914
|
+
}
|
|
5915
|
+
|
|
5916
|
+
.retro-relative {
|
|
5917
|
+
position: relative !important;
|
|
5918
|
+
}
|
|
5919
|
+
|
|
5920
|
+
.retro-absolute {
|
|
5921
|
+
position: absolute !important;
|
|
5922
|
+
}
|
|
5923
|
+
|
|
5924
|
+
.retro-sticky {
|
|
5925
|
+
position: sticky !important;
|
|
5926
|
+
}
|
|
5927
|
+
|
|
5928
|
+
/**
|
|
5929
|
+
* @name Sizing Utilities
|
|
5930
|
+
* @group utilities
|
|
5931
|
+
*/
|
|
5932
|
+
.retro-w-full {
|
|
5933
|
+
width: 100% !important;
|
|
5934
|
+
}
|
|
5935
|
+
|
|
5936
|
+
.retro-w-auto {
|
|
5937
|
+
width: auto !important;
|
|
5938
|
+
}
|
|
5939
|
+
|
|
5940
|
+
.retro-h-full {
|
|
5941
|
+
height: 100% !important;
|
|
5942
|
+
}
|
|
5943
|
+
|
|
5944
|
+
.retro-max-w-full {
|
|
5945
|
+
max-width: 100% !important;
|
|
5946
|
+
}
|
|
5947
|
+
|
|
5948
|
+
.retro-min-w-0 {
|
|
5949
|
+
min-width: 0 !important;
|
|
5950
|
+
}
|
|
5951
|
+
|
|
5952
|
+
.retro-box-border {
|
|
5953
|
+
box-sizing: border-box !important;
|
|
5954
|
+
}
|
|
5955
|
+
|
|
5956
|
+
.retro-max-w-40 {
|
|
5957
|
+
max-width: 160px !important;
|
|
5958
|
+
}
|
|
5959
|
+
|
|
5960
|
+
.retro-min-w-40 {
|
|
5961
|
+
min-width: 160px !important;
|
|
5962
|
+
}
|
|
5963
|
+
|
|
5964
|
+
.retro-max-w-56 {
|
|
5965
|
+
max-width: 224px !important;
|
|
5966
|
+
}
|
|
5967
|
+
|
|
5968
|
+
.retro-min-w-56 {
|
|
5969
|
+
min-width: 224px !important;
|
|
5970
|
+
}
|
|
5971
|
+
|
|
5972
|
+
.retro-max-w-72 {
|
|
5973
|
+
max-width: 288px !important;
|
|
5974
|
+
}
|
|
5975
|
+
|
|
5976
|
+
.retro-min-w-72 {
|
|
5977
|
+
min-width: 288px !important;
|
|
5978
|
+
}
|
|
5979
|
+
|
|
5980
|
+
.retro-max-w-80 {
|
|
5981
|
+
max-width: 320px !important;
|
|
5982
|
+
}
|
|
5983
|
+
|
|
5984
|
+
.retro-min-w-80 {
|
|
5985
|
+
min-width: 320px !important;
|
|
5986
|
+
}
|
|
5987
|
+
|
|
5988
|
+
.retro-max-w-96 {
|
|
5989
|
+
max-width: 384px !important;
|
|
5990
|
+
}
|
|
5991
|
+
|
|
5992
|
+
.retro-min-w-96 {
|
|
5993
|
+
min-width: 384px !important;
|
|
5994
|
+
}
|
|
5995
|
+
|
|
5996
|
+
.retro-max-w-120 {
|
|
5997
|
+
max-width: 480px !important;
|
|
5998
|
+
}
|
|
5999
|
+
|
|
6000
|
+
.retro-min-w-120 {
|
|
6001
|
+
min-width: 480px !important;
|
|
6002
|
+
}
|
|
6003
|
+
|
|
6004
|
+
.retro-max-w-prose {
|
|
6005
|
+
max-width: var(--retro-measure) !important;
|
|
6006
|
+
}
|
|
6007
|
+
|
|
6008
|
+
.retro-max-w-sm {
|
|
6009
|
+
max-width: var(--retro-container-sm) !important;
|
|
6010
|
+
}
|
|
6011
|
+
|
|
6012
|
+
.retro-max-w-md {
|
|
6013
|
+
max-width: var(--retro-container-md) !important;
|
|
6014
|
+
}
|
|
6015
|
+
|
|
6016
|
+
.retro-max-w-lg {
|
|
6017
|
+
max-width: var(--retro-container-lg) !important;
|
|
6018
|
+
}
|
|
6019
|
+
|
|
6020
|
+
.retro-max-w-xl {
|
|
6021
|
+
max-width: var(--retro-container-xl) !important;
|
|
6022
|
+
}
|
|
6023
|
+
|
|
6024
|
+
.retro-max-w-xxl {
|
|
6025
|
+
max-width: var(--retro-container-xxl) !important;
|
|
6026
|
+
}
|
|
6027
|
+
|
|
6028
|
+
/**
|
|
6029
|
+
* @name Colour Utilities
|
|
6030
|
+
* @group utilities
|
|
6031
|
+
* @description
|
|
6032
|
+
* Background, text and border helpers built on the 2.0 token tiers.
|
|
6033
|
+
*
|
|
6034
|
+
* `retro-bg-<hue>` sets the fill **and** its matching on-fill text colour, so a
|
|
6035
|
+
* filled surface is legible in both themes without a second class. That pairing
|
|
6036
|
+
* is what the accessibility gate verifies, so these are AA by construction.
|
|
6037
|
+
*
|
|
6038
|
+
* `retro-bg-<hue>-subtle` is a low-alpha tint of the same hue for callout
|
|
6039
|
+
* panels; it keeps the normal body text colour on top.
|
|
6040
|
+
* @example html
|
|
6041
|
+
* <div class="retro-bg-primary retro-p-4">Readable in both themes</div>
|
|
6042
|
+
* <div class="retro-bg-success-subtle retro-p-4">Tinted callout</div>
|
|
6043
|
+
*/
|
|
6044
|
+
.retro-bg-primary {
|
|
6045
|
+
background-color: var(--retro-primary) !important;
|
|
6046
|
+
color: var(--retro-primary-fg) !important;
|
|
6047
|
+
}
|
|
6048
|
+
.retro-bg-primary h1, .retro-bg-primary h2, .retro-bg-primary h3, .retro-bg-primary h4, .retro-bg-primary h5, .retro-bg-primary h6 {
|
|
6049
|
+
color: inherit;
|
|
6050
|
+
}
|
|
6051
|
+
|
|
6052
|
+
.retro-bg-primary-subtle {
|
|
6053
|
+
background-color: rgba(var(--retro-primary-rgb), 0.14) !important;
|
|
6054
|
+
color: var(--retro-text) !important;
|
|
6055
|
+
}
|
|
6056
|
+
|
|
6057
|
+
.retro-bg-primary-lightest {
|
|
6058
|
+
background-color: rgba(var(--retro-primary-rgb), 0.14) !important;
|
|
6059
|
+
color: var(--retro-text) !important;
|
|
6060
|
+
}
|
|
6061
|
+
|
|
6062
|
+
.retro-border-primary {
|
|
6063
|
+
border-color: var(--retro-primary) !important;
|
|
6064
|
+
}
|
|
6065
|
+
|
|
6066
|
+
.retro-bg-success {
|
|
6067
|
+
background-color: var(--retro-success) !important;
|
|
6068
|
+
color: var(--retro-success-fg) !important;
|
|
6069
|
+
}
|
|
6070
|
+
.retro-bg-success h1, .retro-bg-success h2, .retro-bg-success h3, .retro-bg-success h4, .retro-bg-success h5, .retro-bg-success h6 {
|
|
6071
|
+
color: inherit;
|
|
6072
|
+
}
|
|
6073
|
+
|
|
6074
|
+
.retro-bg-success-subtle {
|
|
6075
|
+
background-color: rgba(var(--retro-success-rgb), 0.14) !important;
|
|
6076
|
+
color: var(--retro-text) !important;
|
|
6077
|
+
}
|
|
6078
|
+
|
|
6079
|
+
.retro-bg-success-lightest {
|
|
6080
|
+
background-color: rgba(var(--retro-success-rgb), 0.14) !important;
|
|
6081
|
+
color: var(--retro-text) !important;
|
|
6082
|
+
}
|
|
6083
|
+
|
|
6084
|
+
.retro-border-success {
|
|
6085
|
+
border-color: var(--retro-success) !important;
|
|
6086
|
+
}
|
|
6087
|
+
|
|
6088
|
+
.retro-bg-danger {
|
|
6089
|
+
background-color: var(--retro-danger) !important;
|
|
6090
|
+
color: var(--retro-danger-fg) !important;
|
|
6091
|
+
}
|
|
6092
|
+
.retro-bg-danger h1, .retro-bg-danger h2, .retro-bg-danger h3, .retro-bg-danger h4, .retro-bg-danger h5, .retro-bg-danger h6 {
|
|
6093
|
+
color: inherit;
|
|
6094
|
+
}
|
|
6095
|
+
|
|
6096
|
+
.retro-bg-danger-subtle {
|
|
6097
|
+
background-color: rgba(var(--retro-danger-rgb), 0.14) !important;
|
|
6098
|
+
color: var(--retro-text) !important;
|
|
6099
|
+
}
|
|
6100
|
+
|
|
6101
|
+
.retro-bg-danger-lightest {
|
|
6102
|
+
background-color: rgba(var(--retro-danger-rgb), 0.14) !important;
|
|
6103
|
+
color: var(--retro-text) !important;
|
|
6104
|
+
}
|
|
6105
|
+
|
|
6106
|
+
.retro-border-danger {
|
|
6107
|
+
border-color: var(--retro-danger) !important;
|
|
6108
|
+
}
|
|
6109
|
+
|
|
6110
|
+
.retro-bg-warning {
|
|
6111
|
+
background-color: var(--retro-warning) !important;
|
|
6112
|
+
color: var(--retro-warning-fg) !important;
|
|
6113
|
+
}
|
|
6114
|
+
.retro-bg-warning h1, .retro-bg-warning h2, .retro-bg-warning h3, .retro-bg-warning h4, .retro-bg-warning h5, .retro-bg-warning h6 {
|
|
6115
|
+
color: inherit;
|
|
6116
|
+
}
|
|
6117
|
+
|
|
6118
|
+
.retro-bg-warning-subtle {
|
|
6119
|
+
background-color: rgba(var(--retro-warning-rgb), 0.14) !important;
|
|
6120
|
+
color: var(--retro-text) !important;
|
|
6121
|
+
}
|
|
6122
|
+
|
|
6123
|
+
.retro-bg-warning-lightest {
|
|
6124
|
+
background-color: rgba(var(--retro-warning-rgb), 0.14) !important;
|
|
6125
|
+
color: var(--retro-text) !important;
|
|
6126
|
+
}
|
|
6127
|
+
|
|
6128
|
+
.retro-border-warning {
|
|
6129
|
+
border-color: var(--retro-warning) !important;
|
|
6130
|
+
}
|
|
6131
|
+
|
|
6132
|
+
.retro-bg-info {
|
|
6133
|
+
background-color: var(--retro-info) !important;
|
|
6134
|
+
color: var(--retro-info-fg) !important;
|
|
6135
|
+
}
|
|
6136
|
+
.retro-bg-info h1, .retro-bg-info h2, .retro-bg-info h3, .retro-bg-info h4, .retro-bg-info h5, .retro-bg-info h6 {
|
|
6137
|
+
color: inherit;
|
|
6138
|
+
}
|
|
6139
|
+
|
|
6140
|
+
.retro-bg-info-subtle {
|
|
6141
|
+
background-color: rgba(var(--retro-info-rgb), 0.14) !important;
|
|
6142
|
+
color: var(--retro-text) !important;
|
|
6143
|
+
}
|
|
6144
|
+
|
|
6145
|
+
.retro-bg-info-lightest {
|
|
6146
|
+
background-color: rgba(var(--retro-info-rgb), 0.14) !important;
|
|
6147
|
+
color: var(--retro-text) !important;
|
|
6148
|
+
}
|
|
6149
|
+
|
|
6150
|
+
.retro-border-info {
|
|
6151
|
+
border-color: var(--retro-info) !important;
|
|
6152
|
+
}
|
|
6153
|
+
|
|
6154
|
+
.retro-bg-teal {
|
|
6155
|
+
background-color: var(--retro-teal) !important;
|
|
6156
|
+
color: var(--retro-teal-fg) !important;
|
|
6157
|
+
}
|
|
6158
|
+
.retro-bg-teal h1, .retro-bg-teal h2, .retro-bg-teal h3, .retro-bg-teal h4, .retro-bg-teal h5, .retro-bg-teal h6 {
|
|
6159
|
+
color: inherit;
|
|
6160
|
+
}
|
|
6161
|
+
|
|
6162
|
+
.retro-bg-teal-subtle {
|
|
6163
|
+
background-color: rgba(var(--retro-teal-rgb), 0.14) !important;
|
|
6164
|
+
color: var(--retro-text) !important;
|
|
6165
|
+
}
|
|
6166
|
+
|
|
6167
|
+
.retro-bg-teal-lightest {
|
|
6168
|
+
background-color: rgba(var(--retro-teal-rgb), 0.14) !important;
|
|
6169
|
+
color: var(--retro-text) !important;
|
|
6170
|
+
}
|
|
6171
|
+
|
|
6172
|
+
.retro-border-teal {
|
|
6173
|
+
border-color: var(--retro-teal) !important;
|
|
6174
|
+
}
|
|
6175
|
+
|
|
6176
|
+
.retro-bg-tan {
|
|
6177
|
+
background-color: var(--retro-tan) !important;
|
|
6178
|
+
color: var(--retro-tan-fg) !important;
|
|
6179
|
+
}
|
|
6180
|
+
.retro-bg-tan h1, .retro-bg-tan h2, .retro-bg-tan h3, .retro-bg-tan h4, .retro-bg-tan h5, .retro-bg-tan h6 {
|
|
6181
|
+
color: inherit;
|
|
6182
|
+
}
|
|
6183
|
+
|
|
6184
|
+
.retro-bg-tan-subtle {
|
|
6185
|
+
background-color: rgba(var(--retro-tan-rgb), 0.14) !important;
|
|
6186
|
+
color: var(--retro-text) !important;
|
|
6187
|
+
}
|
|
6188
|
+
|
|
6189
|
+
.retro-bg-tan-lightest {
|
|
6190
|
+
background-color: rgba(var(--retro-tan-rgb), 0.14) !important;
|
|
6191
|
+
color: var(--retro-text) !important;
|
|
6192
|
+
}
|
|
6193
|
+
|
|
6194
|
+
.retro-border-tan {
|
|
6195
|
+
border-color: var(--retro-tan) !important;
|
|
6196
|
+
}
|
|
6197
|
+
|
|
6198
|
+
.retro-bg-pink {
|
|
6199
|
+
background-color: var(--retro-pink) !important;
|
|
6200
|
+
color: var(--retro-pink-fg) !important;
|
|
6201
|
+
}
|
|
6202
|
+
.retro-bg-pink h1, .retro-bg-pink h2, .retro-bg-pink h3, .retro-bg-pink h4, .retro-bg-pink h5, .retro-bg-pink h6 {
|
|
6203
|
+
color: inherit;
|
|
4385
6204
|
}
|
|
4386
6205
|
|
|
4387
|
-
.
|
|
4388
|
-
|
|
6206
|
+
.retro-bg-pink-subtle {
|
|
6207
|
+
background-color: rgba(var(--retro-pink-rgb), 0.14) !important;
|
|
6208
|
+
color: var(--retro-text) !important;
|
|
4389
6209
|
}
|
|
4390
6210
|
|
|
4391
|
-
.
|
|
4392
|
-
|
|
4393
|
-
|
|
6211
|
+
.retro-bg-pink-lightest {
|
|
6212
|
+
background-color: rgba(var(--retro-pink-rgb), 0.14) !important;
|
|
6213
|
+
color: var(--retro-text) !important;
|
|
4394
6214
|
}
|
|
4395
6215
|
|
|
4396
|
-
.
|
|
4397
|
-
|
|
4398
|
-
margin-bottom: 0px !important;
|
|
6216
|
+
.retro-border-pink {
|
|
6217
|
+
border-color: var(--retro-pink) !important;
|
|
4399
6218
|
}
|
|
4400
6219
|
|
|
4401
|
-
.
|
|
4402
|
-
|
|
6220
|
+
.retro-bg-lime {
|
|
6221
|
+
background-color: var(--retro-lime) !important;
|
|
6222
|
+
color: var(--retro-lime-fg) !important;
|
|
6223
|
+
}
|
|
6224
|
+
.retro-bg-lime h1, .retro-bg-lime h2, .retro-bg-lime h3, .retro-bg-lime h4, .retro-bg-lime h5, .retro-bg-lime h6 {
|
|
6225
|
+
color: inherit;
|
|
4403
6226
|
}
|
|
4404
6227
|
|
|
4405
|
-
.
|
|
4406
|
-
|
|
6228
|
+
.retro-bg-lime-subtle {
|
|
6229
|
+
background-color: rgba(var(--retro-lime-rgb), 0.14) !important;
|
|
6230
|
+
color: var(--retro-text) !important;
|
|
4407
6231
|
}
|
|
4408
6232
|
|
|
4409
|
-
.
|
|
4410
|
-
|
|
6233
|
+
.retro-bg-lime-lightest {
|
|
6234
|
+
background-color: rgba(var(--retro-lime-rgb), 0.14) !important;
|
|
6235
|
+
color: var(--retro-text) !important;
|
|
4411
6236
|
}
|
|
4412
6237
|
|
|
4413
|
-
.
|
|
4414
|
-
|
|
6238
|
+
.retro-border-lime {
|
|
6239
|
+
border-color: var(--retro-lime) !important;
|
|
4415
6240
|
}
|
|
4416
6241
|
|
|
4417
|
-
.
|
|
4418
|
-
|
|
4419
|
-
|
|
6242
|
+
.retro-bg-cyan {
|
|
6243
|
+
background-color: var(--retro-cyan) !important;
|
|
6244
|
+
color: var(--retro-cyan-fg) !important;
|
|
6245
|
+
}
|
|
6246
|
+
.retro-bg-cyan h1, .retro-bg-cyan h2, .retro-bg-cyan h3, .retro-bg-cyan h4, .retro-bg-cyan h5, .retro-bg-cyan h6 {
|
|
6247
|
+
color: inherit;
|
|
4420
6248
|
}
|
|
4421
6249
|
|
|
4422
|
-
.
|
|
4423
|
-
|
|
4424
|
-
|
|
6250
|
+
.retro-bg-cyan-subtle {
|
|
6251
|
+
background-color: rgba(var(--retro-cyan-rgb), 0.14) !important;
|
|
6252
|
+
color: var(--retro-text) !important;
|
|
4425
6253
|
}
|
|
4426
6254
|
|
|
4427
|
-
.
|
|
4428
|
-
|
|
6255
|
+
.retro-bg-cyan-lightest {
|
|
6256
|
+
background-color: rgba(var(--retro-cyan-rgb), 0.14) !important;
|
|
6257
|
+
color: var(--retro-text) !important;
|
|
4429
6258
|
}
|
|
4430
6259
|
|
|
4431
|
-
.
|
|
4432
|
-
|
|
6260
|
+
.retro-border-cyan {
|
|
6261
|
+
border-color: var(--retro-cyan) !important;
|
|
4433
6262
|
}
|
|
4434
6263
|
|
|
4435
|
-
.
|
|
4436
|
-
|
|
6264
|
+
.retro-bg-orange {
|
|
6265
|
+
background-color: var(--retro-orange) !important;
|
|
6266
|
+
color: var(--retro-orange-fg) !important;
|
|
6267
|
+
}
|
|
6268
|
+
.retro-bg-orange h1, .retro-bg-orange h2, .retro-bg-orange h3, .retro-bg-orange h4, .retro-bg-orange h5, .retro-bg-orange h6 {
|
|
6269
|
+
color: inherit;
|
|
4437
6270
|
}
|
|
4438
6271
|
|
|
4439
|
-
.
|
|
4440
|
-
|
|
6272
|
+
.retro-bg-orange-subtle {
|
|
6273
|
+
background-color: rgba(var(--retro-orange-rgb), 0.14) !important;
|
|
6274
|
+
color: var(--retro-text) !important;
|
|
4441
6275
|
}
|
|
4442
6276
|
|
|
4443
|
-
.
|
|
4444
|
-
|
|
4445
|
-
|
|
6277
|
+
.retro-bg-orange-lightest {
|
|
6278
|
+
background-color: rgba(var(--retro-orange-rgb), 0.14) !important;
|
|
6279
|
+
color: var(--retro-text) !important;
|
|
4446
6280
|
}
|
|
4447
6281
|
|
|
4448
|
-
.
|
|
4449
|
-
|
|
4450
|
-
margin-bottom: 4px !important;
|
|
6282
|
+
.retro-border-orange {
|
|
6283
|
+
border-color: var(--retro-orange) !important;
|
|
4451
6284
|
}
|
|
4452
6285
|
|
|
4453
|
-
.
|
|
4454
|
-
|
|
6286
|
+
.retro-bg-brown {
|
|
6287
|
+
background-color: var(--retro-brown) !important;
|
|
6288
|
+
color: var(--retro-brown-fg) !important;
|
|
6289
|
+
}
|
|
6290
|
+
.retro-bg-brown h1, .retro-bg-brown h2, .retro-bg-brown h3, .retro-bg-brown h4, .retro-bg-brown h5, .retro-bg-brown h6 {
|
|
6291
|
+
color: inherit;
|
|
4455
6292
|
}
|
|
4456
6293
|
|
|
4457
|
-
.
|
|
4458
|
-
|
|
6294
|
+
.retro-bg-brown-subtle {
|
|
6295
|
+
background-color: rgba(var(--retro-brown-rgb), 0.14) !important;
|
|
6296
|
+
color: var(--retro-text) !important;
|
|
4459
6297
|
}
|
|
4460
6298
|
|
|
4461
|
-
.
|
|
4462
|
-
|
|
6299
|
+
.retro-bg-brown-lightest {
|
|
6300
|
+
background-color: rgba(var(--retro-brown-rgb), 0.14) !important;
|
|
6301
|
+
color: var(--retro-text) !important;
|
|
4463
6302
|
}
|
|
4464
6303
|
|
|
4465
|
-
.
|
|
4466
|
-
|
|
6304
|
+
.retro-border-brown {
|
|
6305
|
+
border-color: var(--retro-brown) !important;
|
|
4467
6306
|
}
|
|
4468
6307
|
|
|
4469
|
-
.
|
|
4470
|
-
|
|
4471
|
-
|
|
6308
|
+
.retro-bg-violet {
|
|
6309
|
+
background-color: var(--retro-violet) !important;
|
|
6310
|
+
color: var(--retro-violet-fg) !important;
|
|
6311
|
+
}
|
|
6312
|
+
.retro-bg-violet h1, .retro-bg-violet h2, .retro-bg-violet h3, .retro-bg-violet h4, .retro-bg-violet h5, .retro-bg-violet h6 {
|
|
6313
|
+
color: inherit;
|
|
4472
6314
|
}
|
|
4473
6315
|
|
|
4474
|
-
.
|
|
4475
|
-
|
|
4476
|
-
|
|
6316
|
+
.retro-bg-violet-subtle {
|
|
6317
|
+
background-color: rgba(var(--retro-violet-rgb), 0.14) !important;
|
|
6318
|
+
color: var(--retro-text) !important;
|
|
4477
6319
|
}
|
|
4478
6320
|
|
|
4479
|
-
.
|
|
4480
|
-
|
|
6321
|
+
.retro-bg-violet-lightest {
|
|
6322
|
+
background-color: rgba(var(--retro-violet-rgb), 0.14) !important;
|
|
6323
|
+
color: var(--retro-text) !important;
|
|
4481
6324
|
}
|
|
4482
6325
|
|
|
4483
|
-
.
|
|
4484
|
-
|
|
6326
|
+
.retro-border-violet {
|
|
6327
|
+
border-color: var(--retro-violet) !important;
|
|
4485
6328
|
}
|
|
4486
6329
|
|
|
4487
|
-
.
|
|
4488
|
-
|
|
6330
|
+
.retro-bg-gray {
|
|
6331
|
+
background-color: var(--retro-gray) !important;
|
|
6332
|
+
color: var(--retro-gray-fg) !important;
|
|
6333
|
+
}
|
|
6334
|
+
.retro-bg-gray h1, .retro-bg-gray h2, .retro-bg-gray h3, .retro-bg-gray h4, .retro-bg-gray h5, .retro-bg-gray h6 {
|
|
6335
|
+
color: inherit;
|
|
4489
6336
|
}
|
|
4490
6337
|
|
|
4491
|
-
.
|
|
4492
|
-
|
|
6338
|
+
.retro-bg-gray-subtle {
|
|
6339
|
+
background-color: rgba(var(--retro-gray-rgb), 0.14) !important;
|
|
6340
|
+
color: var(--retro-text) !important;
|
|
4493
6341
|
}
|
|
4494
6342
|
|
|
4495
|
-
.
|
|
4496
|
-
|
|
4497
|
-
|
|
6343
|
+
.retro-bg-gray-lightest {
|
|
6344
|
+
background-color: rgba(var(--retro-gray-rgb), 0.14) !important;
|
|
6345
|
+
color: var(--retro-text) !important;
|
|
4498
6346
|
}
|
|
4499
6347
|
|
|
4500
|
-
.
|
|
4501
|
-
|
|
4502
|
-
margin-bottom: 8px !important;
|
|
6348
|
+
.retro-border-gray {
|
|
6349
|
+
border-color: var(--retro-gray) !important;
|
|
4503
6350
|
}
|
|
4504
6351
|
|
|
4505
|
-
.
|
|
4506
|
-
|
|
6352
|
+
.retro-bg-maroon {
|
|
6353
|
+
background-color: var(--retro-maroon) !important;
|
|
6354
|
+
color: var(--retro-maroon-fg) !important;
|
|
6355
|
+
}
|
|
6356
|
+
.retro-bg-maroon h1, .retro-bg-maroon h2, .retro-bg-maroon h3, .retro-bg-maroon h4, .retro-bg-maroon h5, .retro-bg-maroon h6 {
|
|
6357
|
+
color: inherit;
|
|
4507
6358
|
}
|
|
4508
6359
|
|
|
4509
|
-
.
|
|
4510
|
-
|
|
6360
|
+
.retro-bg-maroon-subtle {
|
|
6361
|
+
background-color: rgba(var(--retro-maroon-rgb), 0.14) !important;
|
|
6362
|
+
color: var(--retro-text) !important;
|
|
4511
6363
|
}
|
|
4512
6364
|
|
|
4513
|
-
.
|
|
4514
|
-
|
|
6365
|
+
.retro-bg-maroon-lightest {
|
|
6366
|
+
background-color: rgba(var(--retro-maroon-rgb), 0.14) !important;
|
|
6367
|
+
color: var(--retro-text) !important;
|
|
4515
6368
|
}
|
|
4516
6369
|
|
|
4517
|
-
.
|
|
4518
|
-
|
|
6370
|
+
.retro-border-maroon {
|
|
6371
|
+
border-color: var(--retro-maroon) !important;
|
|
4519
6372
|
}
|
|
4520
6373
|
|
|
4521
|
-
.
|
|
4522
|
-
|
|
4523
|
-
|
|
6374
|
+
.retro-bg-gold {
|
|
6375
|
+
background-color: var(--retro-gold) !important;
|
|
6376
|
+
color: var(--retro-gold-fg) !important;
|
|
6377
|
+
}
|
|
6378
|
+
.retro-bg-gold h1, .retro-bg-gold h2, .retro-bg-gold h3, .retro-bg-gold h4, .retro-bg-gold h5, .retro-bg-gold h6 {
|
|
6379
|
+
color: inherit;
|
|
4524
6380
|
}
|
|
4525
6381
|
|
|
4526
|
-
.
|
|
4527
|
-
|
|
4528
|
-
|
|
6382
|
+
.retro-bg-gold-subtle {
|
|
6383
|
+
background-color: rgba(var(--retro-gold-rgb), 0.14) !important;
|
|
6384
|
+
color: var(--retro-text) !important;
|
|
4529
6385
|
}
|
|
4530
6386
|
|
|
4531
|
-
.
|
|
4532
|
-
|
|
6387
|
+
.retro-bg-gold-lightest {
|
|
6388
|
+
background-color: rgba(var(--retro-gold-rgb), 0.14) !important;
|
|
6389
|
+
color: var(--retro-text) !important;
|
|
4533
6390
|
}
|
|
4534
6391
|
|
|
4535
|
-
.
|
|
4536
|
-
|
|
6392
|
+
.retro-border-gold {
|
|
6393
|
+
border-color: var(--retro-gold) !important;
|
|
4537
6394
|
}
|
|
4538
6395
|
|
|
4539
|
-
.
|
|
4540
|
-
|
|
6396
|
+
.retro-bg-navy {
|
|
6397
|
+
background-color: var(--retro-navy) !important;
|
|
6398
|
+
color: var(--retro-navy-fg) !important;
|
|
6399
|
+
}
|
|
6400
|
+
.retro-bg-navy h1, .retro-bg-navy h2, .retro-bg-navy h3, .retro-bg-navy h4, .retro-bg-navy h5, .retro-bg-navy h6 {
|
|
6401
|
+
color: inherit;
|
|
4541
6402
|
}
|
|
4542
6403
|
|
|
4543
|
-
.
|
|
4544
|
-
|
|
6404
|
+
.retro-bg-navy-subtle {
|
|
6405
|
+
background-color: rgba(var(--retro-navy-rgb), 0.14) !important;
|
|
6406
|
+
color: var(--retro-text) !important;
|
|
4545
6407
|
}
|
|
4546
6408
|
|
|
4547
|
-
.
|
|
4548
|
-
|
|
4549
|
-
|
|
6409
|
+
.retro-bg-navy-lightest {
|
|
6410
|
+
background-color: rgba(var(--retro-navy-rgb), 0.14) !important;
|
|
6411
|
+
color: var(--retro-text) !important;
|
|
4550
6412
|
}
|
|
4551
6413
|
|
|
4552
|
-
.
|
|
4553
|
-
|
|
4554
|
-
margin-bottom: 12px !important;
|
|
6414
|
+
.retro-border-navy {
|
|
6415
|
+
border-color: var(--retro-navy) !important;
|
|
4555
6416
|
}
|
|
4556
6417
|
|
|
4557
|
-
.
|
|
4558
|
-
|
|
6418
|
+
.retro-bg-olive {
|
|
6419
|
+
background-color: var(--retro-olive) !important;
|
|
6420
|
+
color: var(--retro-olive-fg) !important;
|
|
6421
|
+
}
|
|
6422
|
+
.retro-bg-olive h1, .retro-bg-olive h2, .retro-bg-olive h3, .retro-bg-olive h4, .retro-bg-olive h5, .retro-bg-olive h6 {
|
|
6423
|
+
color: inherit;
|
|
4559
6424
|
}
|
|
4560
6425
|
|
|
4561
|
-
.
|
|
4562
|
-
|
|
6426
|
+
.retro-bg-olive-subtle {
|
|
6427
|
+
background-color: rgba(var(--retro-olive-rgb), 0.14) !important;
|
|
6428
|
+
color: var(--retro-text) !important;
|
|
4563
6429
|
}
|
|
4564
6430
|
|
|
4565
|
-
.
|
|
4566
|
-
|
|
6431
|
+
.retro-bg-olive-lightest {
|
|
6432
|
+
background-color: rgba(var(--retro-olive-rgb), 0.14) !important;
|
|
6433
|
+
color: var(--retro-text) !important;
|
|
4567
6434
|
}
|
|
4568
6435
|
|
|
4569
|
-
.
|
|
4570
|
-
|
|
6436
|
+
.retro-border-olive {
|
|
6437
|
+
border-color: var(--retro-olive) !important;
|
|
4571
6438
|
}
|
|
4572
6439
|
|
|
4573
|
-
.
|
|
4574
|
-
|
|
4575
|
-
|
|
6440
|
+
.retro-bg-silver {
|
|
6441
|
+
background-color: var(--retro-silver) !important;
|
|
6442
|
+
color: var(--retro-silver-fg) !important;
|
|
6443
|
+
}
|
|
6444
|
+
.retro-bg-silver h1, .retro-bg-silver h2, .retro-bg-silver h3, .retro-bg-silver h4, .retro-bg-silver h5, .retro-bg-silver h6 {
|
|
6445
|
+
color: inherit;
|
|
4576
6446
|
}
|
|
4577
6447
|
|
|
4578
|
-
.
|
|
4579
|
-
|
|
4580
|
-
|
|
6448
|
+
.retro-bg-silver-subtle {
|
|
6449
|
+
background-color: rgba(var(--retro-silver-rgb), 0.14) !important;
|
|
6450
|
+
color: var(--retro-text) !important;
|
|
4581
6451
|
}
|
|
4582
6452
|
|
|
4583
|
-
.
|
|
4584
|
-
|
|
6453
|
+
.retro-bg-silver-lightest {
|
|
6454
|
+
background-color: rgba(var(--retro-silver-rgb), 0.14) !important;
|
|
6455
|
+
color: var(--retro-text) !important;
|
|
4585
6456
|
}
|
|
4586
6457
|
|
|
4587
|
-
.
|
|
4588
|
-
|
|
6458
|
+
.retro-border-silver {
|
|
6459
|
+
border-color: var(--retro-silver) !important;
|
|
4589
6460
|
}
|
|
4590
6461
|
|
|
4591
|
-
|
|
4592
|
-
|
|
6462
|
+
/* Surfaces */
|
|
6463
|
+
.retro-bg-body {
|
|
6464
|
+
background-color: var(--retro-body-bg) !important;
|
|
6465
|
+
color: var(--retro-text) !important;
|
|
4593
6466
|
}
|
|
4594
6467
|
|
|
4595
|
-
.
|
|
4596
|
-
|
|
6468
|
+
.retro-body-bg {
|
|
6469
|
+
background-color: var(--retro-body-bg) !important;
|
|
4597
6470
|
}
|
|
4598
6471
|
|
|
4599
|
-
.
|
|
4600
|
-
|
|
4601
|
-
|
|
6472
|
+
.retro-bg-surface,
|
|
6473
|
+
.retro-bg-white {
|
|
6474
|
+
background-color: var(--retro-bg) !important;
|
|
6475
|
+
color: var(--retro-text) !important;
|
|
4602
6476
|
}
|
|
4603
6477
|
|
|
4604
|
-
.
|
|
4605
|
-
|
|
4606
|
-
|
|
6478
|
+
.retro-bg-light,
|
|
6479
|
+
.retro-bg-lightest {
|
|
6480
|
+
background-color: var(--retro-light) !important;
|
|
6481
|
+
color: var(--retro-text) !important;
|
|
4607
6482
|
}
|
|
4608
6483
|
|
|
4609
|
-
.
|
|
4610
|
-
|
|
6484
|
+
.retro-bg-dark {
|
|
6485
|
+
background-color: var(--retro-body-bg-dark) !important;
|
|
6486
|
+
color: #fff !important;
|
|
6487
|
+
}
|
|
6488
|
+
.retro-bg-dark h1, .retro-bg-dark h2, .retro-bg-dark h3, .retro-bg-dark h4, .retro-bg-dark h5, .retro-bg-dark h6 {
|
|
6489
|
+
color: inherit;
|
|
4611
6490
|
}
|
|
4612
6491
|
|
|
4613
|
-
.
|
|
4614
|
-
|
|
6492
|
+
.retro-bg-transparent {
|
|
6493
|
+
background-color: transparent !important;
|
|
4615
6494
|
}
|
|
4616
6495
|
|
|
4617
|
-
|
|
4618
|
-
|
|
6496
|
+
/* Text */
|
|
6497
|
+
.retro-text-body {
|
|
6498
|
+
color: var(--retro-text) !important;
|
|
4619
6499
|
}
|
|
4620
6500
|
|
|
4621
|
-
.
|
|
4622
|
-
|
|
6501
|
+
.retro-text-muted,
|
|
6502
|
+
.retro-text-secondary {
|
|
6503
|
+
color: var(--retro-text-muted) !important;
|
|
4623
6504
|
}
|
|
4624
6505
|
|
|
4625
|
-
.
|
|
4626
|
-
|
|
4627
|
-
|
|
6506
|
+
.retro-text-white,
|
|
6507
|
+
.retro-text-inverse {
|
|
6508
|
+
color: var(--retro-text-inverse) !important;
|
|
4628
6509
|
}
|
|
4629
6510
|
|
|
4630
|
-
.
|
|
4631
|
-
|
|
4632
|
-
padding-bottom: 16px !important;
|
|
6511
|
+
.retro-text-left {
|
|
6512
|
+
text-align: left !important;
|
|
4633
6513
|
}
|
|
4634
6514
|
|
|
4635
|
-
.
|
|
4636
|
-
|
|
6515
|
+
.retro-text-center {
|
|
6516
|
+
text-align: center !important;
|
|
4637
6517
|
}
|
|
4638
6518
|
|
|
4639
|
-
.
|
|
4640
|
-
|
|
6519
|
+
.retro-text-right {
|
|
6520
|
+
text-align: right !important;
|
|
4641
6521
|
}
|
|
4642
6522
|
|
|
4643
|
-
.
|
|
4644
|
-
|
|
6523
|
+
.retro-font-normal {
|
|
6524
|
+
font-weight: var(--retro-font-weight-normal) !important;
|
|
4645
6525
|
}
|
|
4646
6526
|
|
|
4647
|
-
.
|
|
4648
|
-
|
|
6527
|
+
.retro-font-bold {
|
|
6528
|
+
font-weight: var(--retro-font-weight-bold) !important;
|
|
4649
6529
|
}
|
|
4650
6530
|
|
|
4651
|
-
.
|
|
4652
|
-
|
|
4653
|
-
margin-right: 20px !important;
|
|
6531
|
+
.retro-text-2xl {
|
|
6532
|
+
font-size: var(--retro-font-size-2xl) !important;
|
|
4654
6533
|
}
|
|
4655
6534
|
|
|
4656
|
-
.
|
|
4657
|
-
|
|
4658
|
-
margin-bottom: 20px !important;
|
|
6535
|
+
.retro-text-3xl {
|
|
6536
|
+
font-size: var(--retro-font-size-3xl) !important;
|
|
4659
6537
|
}
|
|
4660
6538
|
|
|
4661
|
-
|
|
4662
|
-
|
|
6539
|
+
/* Borders */
|
|
6540
|
+
.retro-border {
|
|
6541
|
+
border: var(--retro-border-width) solid var(--retro-border-dark) !important;
|
|
4663
6542
|
}
|
|
4664
6543
|
|
|
4665
|
-
.
|
|
4666
|
-
|
|
6544
|
+
.retro-border-2 {
|
|
6545
|
+
border: var(--retro-border-width-thick) solid var(--retro-border-dark) !important;
|
|
4667
6546
|
}
|
|
4668
6547
|
|
|
4669
|
-
.
|
|
4670
|
-
|
|
6548
|
+
.retro-border-0 {
|
|
6549
|
+
border: 0 !important;
|
|
4671
6550
|
}
|
|
4672
6551
|
|
|
4673
|
-
.
|
|
4674
|
-
|
|
6552
|
+
.retro-border-t-0 {
|
|
6553
|
+
border-top: 0 !important;
|
|
4675
6554
|
}
|
|
4676
6555
|
|
|
4677
|
-
.
|
|
4678
|
-
|
|
4679
|
-
padding-right: 20px !important;
|
|
6556
|
+
.retro-border-b-0 {
|
|
6557
|
+
border-bottom: 0 !important;
|
|
4680
6558
|
}
|
|
4681
6559
|
|
|
4682
|
-
.
|
|
4683
|
-
|
|
4684
|
-
|
|
6560
|
+
.retro-border-top {
|
|
6561
|
+
border-top: var(--retro-border-width-thick) solid var(--retro-border-dark) !important;
|
|
6562
|
+
}
|
|
6563
|
+
|
|
6564
|
+
.retro-border-bottom {
|
|
6565
|
+
border-bottom: var(--retro-border-width-thick) solid var(--retro-border-dark) !important;
|
|
6566
|
+
}
|
|
6567
|
+
|
|
6568
|
+
.retro-border-left {
|
|
6569
|
+
border-left: var(--retro-border-width-thick) solid var(--retro-border-dark) !important;
|
|
6570
|
+
}
|
|
6571
|
+
|
|
6572
|
+
.retro-border-right {
|
|
6573
|
+
border-right: var(--retro-border-width-thick) solid var(--retro-border-dark) !important;
|
|
6574
|
+
}
|
|
6575
|
+
|
|
6576
|
+
.retro-border-black {
|
|
6577
|
+
border-color: var(--retro-border-dark) !important;
|
|
6578
|
+
}
|
|
6579
|
+
|
|
6580
|
+
.retro-border-gray {
|
|
6581
|
+
border-color: var(--retro-border-medium) !important;
|
|
6582
|
+
}
|
|
6583
|
+
|
|
6584
|
+
.retro-border-light {
|
|
6585
|
+
border-color: var(--retro-border-light) !important;
|
|
6586
|
+
}
|
|
6587
|
+
|
|
6588
|
+
/**
|
|
6589
|
+
* @name Effect Utilities
|
|
6590
|
+
* @group utilities
|
|
6591
|
+
* @description
|
|
6592
|
+
* Bevels and shadows. The Win9x look is built from hard-edged insets rather
|
|
6593
|
+
* than soft blur, so `retro-raised` / `retro-sunken` are usually what you want;
|
|
6594
|
+
* the `retro-shadow-*` scale is there for depth on floating surfaces.
|
|
6595
|
+
*/
|
|
6596
|
+
.retro-raised {
|
|
6597
|
+
box-shadow: var(--retro-border-raised) !important;
|
|
6598
|
+
}
|
|
6599
|
+
|
|
6600
|
+
.retro-sunken {
|
|
6601
|
+
box-shadow: var(--retro-border-sunken) !important;
|
|
6602
|
+
}
|
|
6603
|
+
|
|
6604
|
+
.retro-shadow-none {
|
|
6605
|
+
box-shadow: none !important;
|
|
6606
|
+
}
|
|
6607
|
+
|
|
6608
|
+
.retro-shadow-sm {
|
|
6609
|
+
box-shadow: var(--retro-box-shadow-subtle) !important;
|
|
6610
|
+
}
|
|
6611
|
+
|
|
6612
|
+
.retro-shadow-md {
|
|
6613
|
+
box-shadow: var(--retro-box-shadow-medium) !important;
|
|
6614
|
+
}
|
|
6615
|
+
|
|
6616
|
+
.retro-shadow-lg {
|
|
6617
|
+
box-shadow: 3px 3px 0 var(--retro-border-medium), 0 4px 12px rgba(var(--retro-black-rgb), 0.18) !important;
|
|
6618
|
+
}
|
|
6619
|
+
|
|
6620
|
+
.retro-rounded {
|
|
6621
|
+
border-radius: 4px !important;
|
|
6622
|
+
}
|
|
6623
|
+
|
|
6624
|
+
.retro-rounded-lg {
|
|
6625
|
+
border-radius: 8px !important;
|
|
6626
|
+
}
|
|
6627
|
+
|
|
6628
|
+
.retro-rounded-full {
|
|
6629
|
+
border-radius: 9999px !important;
|
|
6630
|
+
}
|
|
6631
|
+
|
|
6632
|
+
.retro-rounded-none {
|
|
6633
|
+
border-radius: 0 !important;
|
|
6634
|
+
}
|
|
6635
|
+
|
|
6636
|
+
.retro-overflow-hidden {
|
|
6637
|
+
overflow: hidden !important;
|
|
6638
|
+
}
|
|
6639
|
+
|
|
6640
|
+
.retro-overflow-auto {
|
|
6641
|
+
overflow: auto !important;
|
|
6642
|
+
}
|
|
6643
|
+
|
|
6644
|
+
.retro-overflow-x-auto {
|
|
6645
|
+
overflow-x: auto !important;
|
|
4685
6646
|
}
|
|
4686
6647
|
|
|
4687
6648
|
/* RetroCSS - A Retro-Inspired CSS Framework */
|
|
@@ -4813,15 +6774,15 @@ input[type=datetime-local].retro-input.retro-input-sm {
|
|
|
4813
6774
|
}
|
|
4814
6775
|
|
|
4815
6776
|
.retro-grid-areas {
|
|
4816
|
-
grid-template-areas: var(--retro-grid-areas);
|
|
6777
|
+
grid-template-areas: var(--retro-grid-areas, none);
|
|
4817
6778
|
}
|
|
4818
6779
|
|
|
4819
6780
|
.retro-col-span {
|
|
4820
|
-
grid-column: var(--retro-col-span);
|
|
6781
|
+
grid-column: var(--retro-col-span, auto);
|
|
4821
6782
|
}
|
|
4822
6783
|
|
|
4823
6784
|
.retro-row-span {
|
|
4824
|
-
grid-row: var(--retro-row-span);
|
|
6785
|
+
grid-row: var(--retro-row-span, auto);
|
|
4825
6786
|
}
|
|
4826
6787
|
|
|
4827
6788
|
@media (min-width: 0) {
|
|
@@ -5556,24 +7517,53 @@ input[type=datetime-local].retro-input.retro-input-sm {
|
|
|
5556
7517
|
grid-template-columns: repeat(3, 1fr);
|
|
5557
7518
|
}
|
|
5558
7519
|
}
|
|
5559
|
-
|
|
5560
|
-
|
|
7520
|
+
/**
|
|
7521
|
+
* @name Layout
|
|
7522
|
+
* @group utilities
|
|
7523
|
+
* @description
|
|
7524
|
+
* Page shell: an optional sidebar beside a main content column.
|
|
7525
|
+
*
|
|
7526
|
+
* This lived in index.html's inline <style> while every page in the repo used
|
|
7527
|
+
* the class, so the five example pages — which carry no <style> block — got no
|
|
7528
|
+
* layout at all. The sidebar and the content stacked as plain blocks, leaving a
|
|
7529
|
+
* tall empty gap and pushing the content far below the fold.
|
|
7530
|
+
*
|
|
7531
|
+
* @example html
|
|
7532
|
+
* <div class="retro-main-layout">
|
|
7533
|
+
* <aside class="retro-sidebar">...</aside>
|
|
7534
|
+
* <div class="main-content">...</div>
|
|
7535
|
+
* </div>
|
|
7536
|
+
*/
|
|
7537
|
+
.retro-main-layout {
|
|
7538
|
+
display: flex;
|
|
7539
|
+
flex-direction: column;
|
|
7540
|
+
gap: var(--retro-spacing-md);
|
|
7541
|
+
width: 100%;
|
|
7542
|
+
max-width: var(--retro-container-xxl);
|
|
7543
|
+
margin: 0 auto;
|
|
7544
|
+
padding: 0 var(--retro-spacing-md);
|
|
7545
|
+
box-sizing: border-box;
|
|
5561
7546
|
}
|
|
5562
|
-
|
|
5563
|
-
|
|
5564
|
-
|
|
5565
|
-
|
|
5566
|
-
width: 100vw !important;
|
|
5567
|
-
max-width: 100vw !important;
|
|
5568
|
-
box-sizing: border-box;
|
|
5569
|
-
}
|
|
5570
|
-
.retro-container, .demo-section {
|
|
5571
|
-
width: 100vw !important;
|
|
5572
|
-
max-width: 100vw !important;
|
|
5573
|
-
box-sizing: border-box;
|
|
5574
|
-
margin-left: 0 !important;
|
|
5575
|
-
padding: 0 var(--retro-spacing-md) !important;
|
|
7547
|
+
@media (min-width: 768px) {
|
|
7548
|
+
.retro-main-layout {
|
|
7549
|
+
flex-direction: row;
|
|
7550
|
+
align-items: flex-start;
|
|
5576
7551
|
}
|
|
5577
7552
|
}
|
|
7553
|
+
.retro-main-layout > .retro-sidebar {
|
|
7554
|
+
flex: 0 0 auto;
|
|
7555
|
+
}
|
|
7556
|
+
.retro-main-layout > .main-content,
|
|
7557
|
+
.retro-main-layout > main {
|
|
7558
|
+
flex: 1 1 auto;
|
|
7559
|
+
min-width: 0;
|
|
7560
|
+
width: 100%;
|
|
7561
|
+
}
|
|
7562
|
+
|
|
7563
|
+
.main-content {
|
|
7564
|
+
width: 100%;
|
|
7565
|
+
min-width: 0;
|
|
7566
|
+
box-sizing: border-box;
|
|
7567
|
+
}
|
|
5578
7568
|
|
|
5579
7569
|
/*# sourceMappingURL=retro.css.map */
|