@phantompixeldev/retrocss 3.0.0 → 3.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/MIGRATION.md +90 -0
- package/README.md +46 -5
- package/dist/retro.css +74 -54
- package/dist/retro.css.map +1 -1
- package/dist/retro.js +200 -44
- package/dist/retro.min.css +1 -1
- package/dist/retro.min.css.map +1 -1
- package/dist/retro.min.js +1 -1
- package/package.json +3 -1
package/MIGRATION.md
CHANGED
|
@@ -1,9 +1,53 @@
|
|
|
1
|
+
# Migrating to RetroCSS 3.x
|
|
2
|
+
|
|
3
|
+
## 3.1 — keyboard access, OS dark mode, and the rest of the radius token
|
|
4
|
+
|
|
5
|
+
Additive. Nothing was renamed and no class removed; existing markup keeps
|
|
6
|
+
working, because the fixes are applied by the JavaScript at init time rather
|
|
7
|
+
than by requiring new HTML. Three things are worth knowing:
|
|
8
|
+
|
|
9
|
+
**Dark mode now follows the operating system.** Previously the default was a
|
|
10
|
+
hardcoded `light`, so a visitor whose system was set to dark got a light page
|
|
11
|
+
until they found the toggle — on a framework that ships a full dark theme. Now
|
|
12
|
+
an explicit choice (anything stored under `retro-theme`) still wins; only when
|
|
13
|
+
there is none does `prefers-color-scheme` decide. To keep the old behaviour,
|
|
14
|
+
store a theme yourself before `RetroCSS.init()`:
|
|
15
|
+
|
|
16
|
+
```js
|
|
17
|
+
localStorage.setItem('retro-theme', 'light');
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
Note that the theme is applied by script, so a dark-OS visitor may see a brief
|
|
21
|
+
light flash before it runs. If that matters, set `data-theme` on `<html>` from
|
|
22
|
+
an inline script in your `<head>`.
|
|
23
|
+
|
|
24
|
+
**`--retro-border-radius` now reaches the whole framework.** 3.0.1 wired 31
|
|
25
|
+
components to the token; the core chrome — card, button, badge, nav, progress,
|
|
26
|
+
alert, input, checkbox, accordion — still hardcoded `0`, so setting the token
|
|
27
|
+
rounded dropdowns but left buttons square. All of it follows the token now. The
|
|
28
|
+
default is unchanged (the token is `0`); but if you had already set
|
|
29
|
+
`--retro-border-radius`, more of the framework will round than before.
|
|
30
|
+
|
|
31
|
+
**Interactive components gained roles and keyboard handling.** Rating stars are
|
|
32
|
+
a `radiogroup` of `radio`s, carousel dots are `button`s with `aria-current`,
|
|
33
|
+
tooltips appear on focus and carry `aria-describedby`, tag removes are
|
|
34
|
+
`button`s, and tabs use a roving tabindex. If you styled any of these by tag
|
|
35
|
+
name (`span.retro-tag-remove`, `div.retro-carousel-dot`), switch to the class —
|
|
36
|
+
newly generated ones are `<button>`. If you hid a file input with
|
|
37
|
+
`.retro-hidden`, switch to `.retro-sr-only`: `display: none` removes it from the
|
|
38
|
+
tab order, leaving no keyboard route to the file picker.
|
|
39
|
+
|
|
40
|
+
---
|
|
41
|
+
|
|
1
42
|
# Migrating to RetroCSS 3.0
|
|
2
43
|
|
|
3
44
|
3.0 is a visual release. Nothing was renamed and no class was removed, but two
|
|
4
45
|
changes are visible on every page that consumes the framework, so they are
|
|
5
46
|
called out first.
|
|
6
47
|
|
|
48
|
+
> **If you are on 3.0.0, upgrade to 3.0.1.** 3.0.0 shipped a regression that
|
|
49
|
+
> rounded eleven components. See [section 2](#2-border-radius-is-no-longer-important).
|
|
50
|
+
|
|
7
51
|
## 1. Body text is 16px
|
|
8
52
|
|
|
9
53
|
`--retro-font-size` moves from `0.875rem` (14px) to `1rem` (16px). The rest of
|
|
@@ -35,6 +79,52 @@ get 4px back. The default is still square:
|
|
|
35
79
|
If you were relying on the reset to flatten a third-party widget's corners,
|
|
36
80
|
that widget's own radius now wins, and you will need to zero it yourself.
|
|
37
81
|
|
|
82
|
+
### The 3.0.0 regression, fixed in 3.0.1
|
|
83
|
+
|
|
84
|
+
Dropping the `!important` had a consequence nobody caught: the reset had been
|
|
85
|
+
suppressing 31 hardcoded `border-radius` declarations scattered through the
|
|
86
|
+
components, written over the years by people who never saw them take effect.
|
|
87
|
+
All of them came alive at once. **3.0.0 renders these rounded**, and 3.0.1
|
|
88
|
+
returns them to square:
|
|
89
|
+
|
|
90
|
+
| Component | 3.0.0 | 3.0.1 |
|
|
91
|
+
| --- | --- | --- |
|
|
92
|
+
| `.retro-nav-pills .retro-nav-item` | 999px | 999px *(kept, see below)* |
|
|
93
|
+
| `.retro-tag` | 12px | 12px *(kept, see below)* |
|
|
94
|
+
| `.retro-list` / `.retro-list li` | 6px / 4px | 0 |
|
|
95
|
+
| `.retro-rating-star` | 6px | 0 |
|
|
96
|
+
| `.retro-tag-input`, `.retro-search-bar`, `.retro-file-upload`, `.retro-tooltip`, `.retro-sidebar`, `.retro-tab` | 4px | 0 |
|
|
97
|
+
| `.retro-breadcrumbs`, `.retro-dropdown-menu`, `.retro-pagination .retro-btn`, `.retro-divider-vertical` | 2px | 0 |
|
|
98
|
+
|
|
99
|
+
Those declarations now read `var(--retro-border-radius)`, which is `0` by
|
|
100
|
+
default. So the fix is not a second reversal — it is the radius system finally
|
|
101
|
+
being wired up. **You can round all of them at once:**
|
|
102
|
+
|
|
103
|
+
```css
|
|
104
|
+
:root { --retro-border-radius: 4px; }
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
`.retro-nav-pills` and `.retro-tag` keep their shapes deliberately: a pill and
|
|
108
|
+
a chip are the shapes those components are named for, and they are the one
|
|
109
|
+
place the framework spends a modern idiom on purpose.
|
|
110
|
+
|
|
111
|
+
Note that the core Win9x chrome — card, button, badge, table, input, modal,
|
|
112
|
+
alert, progress, carousel — sets `border-radius: 0` directly and does **not**
|
|
113
|
+
follow the token. Rounding those too is a change under consideration; if you
|
|
114
|
+
need it today, override them yourself.
|
|
115
|
+
|
|
116
|
+
`scripts/check-radius.mjs` now runs in CI and fails the build on any new
|
|
117
|
+
hardcoded radius, so this cannot recur.
|
|
118
|
+
|
|
119
|
+
### Radio buttons and the spinner are round again
|
|
120
|
+
|
|
121
|
+
The same reset had been squaring six declarations that were never chrome:
|
|
122
|
+
`.retro-radio` and its checked dot, `input[type="radio"].retro-input` and its
|
|
123
|
+
dot, `.retro-spinner`, and the `.retro-list` bullet. A Windows 95 radio button
|
|
124
|
+
is a circle, so squaring them was a long-standing bug. They are circular from
|
|
125
|
+
3.0.0 onward and stay that way. If you were relying on square radios, set
|
|
126
|
+
`border-radius: 0` on them yourself.
|
|
127
|
+
|
|
38
128
|
## 3. On-fill text follows the theme
|
|
39
129
|
|
|
40
130
|
If you built a component that pairs a RetroCSS hue fill with white text:
|
package/README.md
CHANGED
|
@@ -175,10 +175,29 @@ Typography is tokenised the same way: `--retro-font`, `--retro-font-heading`,
|
|
|
175
175
|
default; for a modern heading font, set
|
|
176
176
|
`--retro-font-heading: 'Segoe UI', Tahoma, sans-serif;`.
|
|
177
177
|
|
|
178
|
+
Corners are square, because Windows 95 was. One token softens the components
|
|
179
|
+
that opt in — lists, dropdowns, breadcrumbs, tooltips, the search bar, the
|
|
180
|
+
sidebar, tabs, pagination and the file uploader:
|
|
181
|
+
|
|
182
|
+
```css
|
|
183
|
+
:root { --retro-border-radius: 4px; }
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
`.retro-rounded` / `-lg` / `-full` still round one element at a time. Two
|
|
187
|
+
components keep their shape on purpose: `.retro-nav-pills` and `.retro-tag`.
|
|
188
|
+
Tables stay square because `border-collapse: collapse` — what merges their cell
|
|
189
|
+
borders into a single hairline — makes every engine ignore `border-radius`.
|
|
190
|
+
|
|
191
|
+
Dark mode follows the operating system when the visitor has expressed no
|
|
192
|
+
preference of their own. The moment they use a `.retro-theme-toggle`, that
|
|
193
|
+
choice is stored and outranks the OS from then on.
|
|
194
|
+
|
|
178
195
|
> **Upgrading?** See [MIGRATION.md](MIGRATION.md). No class has ever been
|
|
179
196
|
> renamed, but 3.0 raises the body text to 16px and drops the `!important` from
|
|
180
197
|
> the `border-radius` reset, both of which are visible on every page — each with
|
|
181
|
-
> a one-line override.
|
|
198
|
+
> a one-line override. **On 3.0.0, upgrade to 3.0.1**: dropping that
|
|
199
|
+
> `!important` woke 31 dormant radius declarations and rounded eleven
|
|
200
|
+
> components. 2.0 restyled a few things to meet WCAG AA.
|
|
182
201
|
|
|
183
202
|
## Utilities
|
|
184
203
|
|
|
@@ -215,8 +234,13 @@ That proves the *tokens* are sound. `npm run check:pages` proves the *pages*
|
|
|
215
234
|
are: it renders every page in the repo in real Chromium, in both themes, at
|
|
216
235
|
1200/980/760/420/360px, and fails on a console error, horizontal overflow, a
|
|
217
236
|
missing or duplicated `<h1>`, any rendered text below AA against the surface
|
|
218
|
-
actually painted behind it, or an input glyph off its field's centre line.
|
|
219
|
-
|
|
237
|
+
actually painted behind it, or an input glyph off its field's centre line.
|
|
238
|
+
|
|
239
|
+
Neither can see whether a control can be *reached*, so `npm run check:keyboard`
|
|
240
|
+
asserts that too: every control the framework drives from script is in the tab
|
|
241
|
+
order and carries an accessible name, roving-tabindex groups expose exactly one
|
|
242
|
+
tab stop, and every tooltip appears on focus and not only on hover. All four
|
|
243
|
+
gates run in CI on every push.
|
|
220
244
|
|
|
221
245
|
Beyond colour:
|
|
222
246
|
|
|
@@ -234,8 +258,19 @@ Beyond colour:
|
|
|
234
258
|
neutralised, with the looping text effects switched off outright.
|
|
235
259
|
- **Sortable tables are operable.** `.retro-table-sortable` headers are
|
|
236
260
|
focusable, sort on Enter and Space as well as click, and carry `aria-sort`.
|
|
261
|
+
Add `data-sort="none"` to a column that should not sort.
|
|
262
|
+
- **Rating stars are a radiogroup.** Tab reaches the group, Arrow keys move and
|
|
263
|
+
set the value, Home/End jump to the ends, and each star reports `aria-checked`.
|
|
264
|
+
- **Carousels are keyboard-driven.** Dots are real buttons with labels and
|
|
265
|
+
`aria-current`; Left/Right arrows move between slides once focus is inside.
|
|
266
|
+
- **Tooltips appear on focus,** not only on hover, are dismissible with Escape,
|
|
267
|
+
and are wired to their trigger with `aria-describedby` (WCAG 1.4.13).
|
|
268
|
+
- **Tabs use a roving tabindex.** Tab steps over the tablist into the panel;
|
|
269
|
+
Arrow keys, Home and End move between tabs.
|
|
237
270
|
- **`.retro-sr-only`** labels icon-only controls; `.retro-sr-only-focusable`
|
|
238
|
-
gives you a skip link.
|
|
271
|
+
gives you a skip link. Use it — not `.retro-hidden` — to hide a real form
|
|
272
|
+
control you still want reachable, such as a styled `<input type="file">`:
|
|
273
|
+
`display: none` takes it out of the tab order entirely.
|
|
239
274
|
|
|
240
275
|
```html
|
|
241
276
|
<button class="retro-btn">💾<span class="retro-sr-only">Save</span></button>
|
|
@@ -275,9 +310,15 @@ npm run watch
|
|
|
275
310
|
Run the gates:
|
|
276
311
|
|
|
277
312
|
```bash
|
|
278
|
-
npm run check:a11y && npm run check:pages
|
|
313
|
+
npm run check:a11y && npm run check:radius && npm run check:pages && npm run check:keyboard
|
|
279
314
|
```
|
|
280
315
|
|
|
316
|
+
`check:a11y` gates the tokens (every `var(--retro-*)` resolves, every
|
|
317
|
+
text/surface pair clears WCAG AA), `check:radius` gates the shape (nothing
|
|
318
|
+
hardcodes a corner behind `--retro-border-radius`), `check:pages` gates the
|
|
319
|
+
rendered result across 8 pages × 2 themes × 5 widths, and `check:keyboard`
|
|
320
|
+
gates operability — that every control can actually be reached and used.
|
|
321
|
+
|
|
281
322
|
`check:pages` needs a browser once: `npx playwright install chromium`.
|
|
282
323
|
|
|
283
324
|
Render the SassDoc API reference to `docs/api/`:
|
package/dist/retro.css
CHANGED
|
@@ -922,7 +922,7 @@ h1, h2, h3, h4, h5, h6 {
|
|
|
922
922
|
font-weight: var(--retro-font-weight-bold);
|
|
923
923
|
text-align: left;
|
|
924
924
|
margin: var(--retro-spacing-lg) 0 var(--retro-spacing-sm);
|
|
925
|
-
border-radius:
|
|
925
|
+
border-radius: var(--retro-border-radius);
|
|
926
926
|
box-shadow: none;
|
|
927
927
|
letter-spacing: 0;
|
|
928
928
|
background: none;
|
|
@@ -1559,7 +1559,7 @@ h5, h6 {
|
|
|
1559
1559
|
user-select: none;
|
|
1560
1560
|
padding: var(--retro-spacing-xs) var(--retro-spacing-md);
|
|
1561
1561
|
border: var(--retro-border-width-thick) solid var(--retro-border-dark);
|
|
1562
|
-
border-radius:
|
|
1562
|
+
border-radius: var(--retro-border-radius);
|
|
1563
1563
|
background: var(--retro-light);
|
|
1564
1564
|
color: var(--retro-text);
|
|
1565
1565
|
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);
|
|
@@ -1769,9 +1769,11 @@ h5, h6 {
|
|
|
1769
1769
|
box-shadow: inset 1px 1px 0 var(--retro-bg), inset -1px -1px 0 var(--retro-border-medium);
|
|
1770
1770
|
font-family: var(--retro-font);
|
|
1771
1771
|
margin-bottom: 24px;
|
|
1772
|
+
border-radius: var(--retro-border-radius);
|
|
1772
1773
|
position: relative;
|
|
1773
1774
|
}
|
|
1774
1775
|
.retro-card-header {
|
|
1776
|
+
border-radius: var(--retro-border-radius) var(--retro-border-radius) 0 0;
|
|
1775
1777
|
background: var(--retro-card-header-bg);
|
|
1776
1778
|
color: var(--retro-card-header-text);
|
|
1777
1779
|
}
|
|
@@ -1797,6 +1799,11 @@ h5, h6 {
|
|
|
1797
1799
|
}
|
|
1798
1800
|
.retro-card-content {
|
|
1799
1801
|
padding: 16px 16px;
|
|
1802
|
+
}
|
|
1803
|
+
.retro-card-content:last-child {
|
|
1804
|
+
border-radius: 0 0 var(--retro-border-radius) var(--retro-border-radius);
|
|
1805
|
+
}
|
|
1806
|
+
.retro-card-content {
|
|
1800
1807
|
background: var(--retro-card-content-bg);
|
|
1801
1808
|
border-top: 2px solid var(--retro-card-content-bg);
|
|
1802
1809
|
font-size: 1rem;
|
|
@@ -1811,6 +1818,7 @@ h5, h6 {
|
|
|
1811
1818
|
color: var(--retro-card-footer-text);
|
|
1812
1819
|
padding: 8px 16px;
|
|
1813
1820
|
font-size: 0.875rem;
|
|
1821
|
+
border-radius: 0 0 var(--retro-border-radius) var(--retro-border-radius);
|
|
1814
1822
|
text-align: left;
|
|
1815
1823
|
}
|
|
1816
1824
|
|
|
@@ -1866,7 +1874,7 @@ h5, h6 {
|
|
|
1866
1874
|
color: var(--retro-input-text);
|
|
1867
1875
|
font-family: var(--retro-font);
|
|
1868
1876
|
font-size: var(--retro-font-size);
|
|
1869
|
-
border-radius:
|
|
1877
|
+
border-radius: var(--retro-border-radius);
|
|
1870
1878
|
transition: none;
|
|
1871
1879
|
}
|
|
1872
1880
|
.retro-input:focus,
|
|
@@ -1971,7 +1979,7 @@ input[type=color].retro-input {
|
|
|
1971
1979
|
width: 48px;
|
|
1972
1980
|
height: 36px;
|
|
1973
1981
|
padding: 2px;
|
|
1974
|
-
border-radius:
|
|
1982
|
+
border-radius: var(--retro-border-radius);
|
|
1975
1983
|
border: 2px solid var(--retro-border-dark);
|
|
1976
1984
|
background: var(--retro-input-bg);
|
|
1977
1985
|
box-shadow: 1px 1px 0 var(--retro-border-light);
|
|
@@ -1983,7 +1991,7 @@ input[type=range].retro-input {
|
|
|
1983
1991
|
background: transparent;
|
|
1984
1992
|
appearance: none;
|
|
1985
1993
|
height: 6px;
|
|
1986
|
-
border-radius:
|
|
1994
|
+
border-radius: var(--retro-border-radius);
|
|
1987
1995
|
outline: none;
|
|
1988
1996
|
border: 2px solid var(--retro-border-dark);
|
|
1989
1997
|
box-shadow: 1px 1px 0 var(--retro-border-light);
|
|
@@ -1993,7 +2001,7 @@ input[type=range].retro-input::-webkit-slider-thumb {
|
|
|
1993
2001
|
appearance: none;
|
|
1994
2002
|
width: 18px;
|
|
1995
2003
|
height: 18px;
|
|
1996
|
-
border-radius:
|
|
2004
|
+
border-radius: var(--retro-border-radius);
|
|
1997
2005
|
background: var(--retro-primary);
|
|
1998
2006
|
border: 2px solid var(--retro-border-dark);
|
|
1999
2007
|
box-shadow: 1px 1px 0 var(--retro-border-light);
|
|
@@ -2003,7 +2011,7 @@ input[type=range].retro-input::-webkit-slider-thumb {
|
|
|
2003
2011
|
input[type=range].retro-input::-moz-range-thumb {
|
|
2004
2012
|
width: 18px;
|
|
2005
2013
|
height: 18px;
|
|
2006
|
-
border-radius:
|
|
2014
|
+
border-radius: var(--retro-border-radius);
|
|
2007
2015
|
background: var(--retro-primary);
|
|
2008
2016
|
border: 2px solid var(--retro-border-dark);
|
|
2009
2017
|
box-shadow: 1px 1px 0 var(--retro-border-light);
|
|
@@ -2013,7 +2021,7 @@ input[type=range].retro-input::-moz-range-thumb {
|
|
|
2013
2021
|
input[type=range].retro-input::-ms-thumb {
|
|
2014
2022
|
width: 18px;
|
|
2015
2023
|
height: 18px;
|
|
2016
|
-
border-radius:
|
|
2024
|
+
border-radius: var(--retro-border-radius);
|
|
2017
2025
|
background: var(--retro-primary);
|
|
2018
2026
|
border: 2px solid var(--retro-border-dark);
|
|
2019
2027
|
box-shadow: 1px 1px 0 var(--retro-border-light);
|
|
@@ -2023,7 +2031,7 @@ input[type=range].retro-input::-ms-thumb {
|
|
|
2023
2031
|
input[type=range].retro-input::-webkit-slider-runnable-track {
|
|
2024
2032
|
height: 6px;
|
|
2025
2033
|
background: var(--retro-input-bg);
|
|
2026
|
-
border-radius:
|
|
2034
|
+
border-radius: var(--retro-border-radius);
|
|
2027
2035
|
}
|
|
2028
2036
|
|
|
2029
2037
|
input[type=range].retro-input::-ms-fill-lower,
|
|
@@ -2077,7 +2085,7 @@ input[type=radio].retro-input {
|
|
|
2077
2085
|
}
|
|
2078
2086
|
|
|
2079
2087
|
input[type=checkbox].retro-input {
|
|
2080
|
-
border-radius:
|
|
2088
|
+
border-radius: var(--retro-border-radius);
|
|
2081
2089
|
}
|
|
2082
2090
|
|
|
2083
2091
|
input[type=checkbox].retro-input:checked::after {
|
|
@@ -2271,7 +2279,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
2271
2279
|
|
|
2272
2280
|
/* Checkbox specific styles */
|
|
2273
2281
|
.retro-checkbox {
|
|
2274
|
-
border-radius:
|
|
2282
|
+
border-radius: var(--retro-border-radius);
|
|
2275
2283
|
}
|
|
2276
2284
|
.retro-checkbox:checked {
|
|
2277
2285
|
background: var(--retro-white);
|
|
@@ -2476,7 +2484,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
2476
2484
|
border-bottom: 2px solid var(--retro-border-light);
|
|
2477
2485
|
border-left: 2px solid var(--retro-border-medium);
|
|
2478
2486
|
border-top: 2px solid var(--retro-border-medium);
|
|
2479
|
-
border-radius:
|
|
2487
|
+
border-radius: var(--retro-border-radius);
|
|
2480
2488
|
font-family: var(--retro-font-heading);
|
|
2481
2489
|
box-shadow: none;
|
|
2482
2490
|
margin-bottom: 1.2em;
|
|
@@ -2509,7 +2517,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
2509
2517
|
padding: 0.3em 1em 0.2em 1em;
|
|
2510
2518
|
font-size: var(--retro-font-size-sm);
|
|
2511
2519
|
font-family: inherit;
|
|
2512
|
-
border-radius:
|
|
2520
|
+
border-radius: var(--retro-border-radius);
|
|
2513
2521
|
box-shadow: none;
|
|
2514
2522
|
border-top: 2px solid rgba(var(--retro-black-rgb), 0.12);
|
|
2515
2523
|
background: var(--retro-light);
|
|
@@ -2934,12 +2942,14 @@ input[type=radio].retro-input:focus-visible {
|
|
|
2934
2942
|
transition: none;
|
|
2935
2943
|
text-align: left;
|
|
2936
2944
|
vertical-align: middle;
|
|
2945
|
+
border-radius: var(--retro-border-radius);
|
|
2937
2946
|
}
|
|
2938
2947
|
.retro-modal-header {
|
|
2939
2948
|
display: flex;
|
|
2940
2949
|
align-items: center;
|
|
2941
2950
|
justify-content: space-between;
|
|
2942
2951
|
padding: 8px 24px;
|
|
2952
|
+
border-radius: var(--retro-border-radius) var(--retro-border-radius) 0 0;
|
|
2943
2953
|
background: var(--retro-modal-header-bg);
|
|
2944
2954
|
color: var(--retro-modal-header-text);
|
|
2945
2955
|
}
|
|
@@ -3092,7 +3102,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
3092
3102
|
list-style: none;
|
|
3093
3103
|
background: var(--retro-light);
|
|
3094
3104
|
border: 2px solid var(--retro-border-dark);
|
|
3095
|
-
border-radius:
|
|
3105
|
+
border-radius: var(--retro-border-radius);
|
|
3096
3106
|
box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-medium);
|
|
3097
3107
|
font-family: var(--retro-font);
|
|
3098
3108
|
transition: none;
|
|
@@ -3103,7 +3113,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
3103
3113
|
padding: 8px 16px;
|
|
3104
3114
|
color: var(--retro-black);
|
|
3105
3115
|
text-decoration: none;
|
|
3106
|
-
border-radius:
|
|
3116
|
+
border-radius: var(--retro-border-radius);
|
|
3107
3117
|
background: var(--retro-light);
|
|
3108
3118
|
border-right: 1px solid var(--retro-border-medium);
|
|
3109
3119
|
font-family: var(--retro-font);
|
|
@@ -3136,7 +3146,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
3136
3146
|
}
|
|
3137
3147
|
|
|
3138
3148
|
.retro-tab {
|
|
3139
|
-
border-radius:
|
|
3149
|
+
border-radius: var(--retro-border-radius) var(--retro-border-radius) 0 0;
|
|
3140
3150
|
margin-right: -1px;
|
|
3141
3151
|
margin-bottom: 0;
|
|
3142
3152
|
background: var(--retro-light);
|
|
@@ -3203,7 +3213,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
3203
3213
|
display: block;
|
|
3204
3214
|
border-right: none;
|
|
3205
3215
|
border-bottom: 1px solid var(--retro-border-medium);
|
|
3206
|
-
border-radius:
|
|
3216
|
+
border-radius: var(--retro-border-radius);
|
|
3207
3217
|
width: 100%;
|
|
3208
3218
|
}
|
|
3209
3219
|
.retro-nav-vertical .retro-nav-item:last-child, .retro-nav-vertical .retro-tab:last-child {
|
|
@@ -3259,7 +3269,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
3259
3269
|
margin: 0;
|
|
3260
3270
|
background: var(--retro-light);
|
|
3261
3271
|
border: 2px solid var(--retro-border-dark);
|
|
3262
|
-
border-radius:
|
|
3272
|
+
border-radius: var(--retro-border-radius);
|
|
3263
3273
|
box-shadow: inset 1px 1px 0 var(--retro-border-light), inset -1px -1px 0 var(--retro-border-medium);
|
|
3264
3274
|
font-family: var(--retro-font);
|
|
3265
3275
|
}
|
|
@@ -3275,7 +3285,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
3275
3285
|
text-decoration: none;
|
|
3276
3286
|
background: var(--retro-light);
|
|
3277
3287
|
border: 2px solid transparent;
|
|
3278
|
-
border-radius:
|
|
3288
|
+
border-radius: var(--retro-border-radius);
|
|
3279
3289
|
text-align: center;
|
|
3280
3290
|
}
|
|
3281
3291
|
.retro-nav-toolbar .retro-nav-item:hover, .retro-nav-toolbar .retro-tab:hover {
|
|
@@ -3414,13 +3424,13 @@ input[type=radio].retro-input:focus-visible {
|
|
|
3414
3424
|
}
|
|
3415
3425
|
.retro-nav-buttons .retro-nav-item:first-child, .retro-nav-buttons .retro-tab:first-child {
|
|
3416
3426
|
border-left: 2px solid var(--retro-border-dark);
|
|
3417
|
-
border-top-left-radius:
|
|
3418
|
-
border-bottom-left-radius:
|
|
3427
|
+
border-top-left-radius: var(--retro-border-radius);
|
|
3428
|
+
border-bottom-left-radius: var(--retro-border-radius);
|
|
3419
3429
|
}
|
|
3420
3430
|
.retro-nav-buttons .retro-nav-item:last-child, .retro-nav-buttons .retro-tab:last-child {
|
|
3421
3431
|
border-right: 2px solid var(--retro-border-dark);
|
|
3422
|
-
border-top-right-radius:
|
|
3423
|
-
border-bottom-right-radius:
|
|
3432
|
+
border-top-right-radius: var(--retro-border-radius);
|
|
3433
|
+
border-bottom-right-radius: var(--retro-border-radius);
|
|
3424
3434
|
}
|
|
3425
3435
|
.retro-nav-buttons .retro-nav-item:hover, .retro-nav-buttons .retro-tab:hover {
|
|
3426
3436
|
background: var(--retro-white);
|
|
@@ -3471,7 +3481,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
3471
3481
|
border-bottom: 2px solid var(--retro-border-light);
|
|
3472
3482
|
border-left: 2px solid var(--retro-border-medium);
|
|
3473
3483
|
border-top: 2px solid var(--retro-border-medium);
|
|
3474
|
-
border-radius:
|
|
3484
|
+
border-radius: var(--retro-border-radius);
|
|
3475
3485
|
height: 22px;
|
|
3476
3486
|
position: relative;
|
|
3477
3487
|
margin: 1em 0;
|
|
@@ -3485,7 +3495,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
3485
3495
|
width: 0%;
|
|
3486
3496
|
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
3487
3497
|
border-right: 2px solid var(--retro-border-light);
|
|
3488
|
-
border-radius:
|
|
3498
|
+
border-radius: var(--retro-border-radius);
|
|
3489
3499
|
box-shadow: none;
|
|
3490
3500
|
position: absolute;
|
|
3491
3501
|
left: 0;
|
|
@@ -3547,7 +3557,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
3547
3557
|
color: var(--retro-badge-text);
|
|
3548
3558
|
background: var(--retro-badge-bg);
|
|
3549
3559
|
border: 1px solid var(--retro-border-dark);
|
|
3550
|
-
border-radius:
|
|
3560
|
+
border-radius: var(--retro-border-radius);
|
|
3551
3561
|
box-shadow: 0 0 0 2px rgba(var(--retro-white-rgb), 0.1), inset 0 0 6px rgba(var(--retro-black-rgb), 0.8);
|
|
3552
3562
|
text-shadow: none;
|
|
3553
3563
|
margin: 0.2em 0.4em 0.2em 0;
|
|
@@ -3785,6 +3795,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
3785
3795
|
}
|
|
3786
3796
|
|
|
3787
3797
|
.retro-accordion-item {
|
|
3798
|
+
border-radius: var(--retro-border-radius);
|
|
3788
3799
|
border: 2px solid var(--retro-border-dark);
|
|
3789
3800
|
margin-bottom: 0.5rem;
|
|
3790
3801
|
background-color: var(--retro-bg);
|
|
@@ -3854,7 +3865,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
3854
3865
|
min-width: 36px;
|
|
3855
3866
|
padding: 4px 12px;
|
|
3856
3867
|
font-size: var(--retro-font-size-lg);
|
|
3857
|
-
border-radius:
|
|
3868
|
+
border-radius: var(--retro-border-radius);
|
|
3858
3869
|
border: 2px solid var(--retro-border-dark);
|
|
3859
3870
|
background: var(--retro-light);
|
|
3860
3871
|
color: var(--retro-black);
|
|
@@ -3881,7 +3892,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
3881
3892
|
font-size: var(--retro-font-size-lg);
|
|
3882
3893
|
background: var(--retro-card-bg);
|
|
3883
3894
|
padding: 6px 12px;
|
|
3884
|
-
border-radius:
|
|
3895
|
+
border-radius: var(--retro-border-radius);
|
|
3885
3896
|
border: 1px solid var(--retro-border-dark);
|
|
3886
3897
|
box-shadow: 1px 1px 0 var(--retro-border-light);
|
|
3887
3898
|
gap: 4px;
|
|
@@ -3894,7 +3905,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
3894
3905
|
align-items: center;
|
|
3895
3906
|
gap: 2px;
|
|
3896
3907
|
padding: 4px 10px;
|
|
3897
|
-
border-radius:
|
|
3908
|
+
border-radius: var(--retro-border-radius);
|
|
3898
3909
|
transition: background 0.2s;
|
|
3899
3910
|
}
|
|
3900
3911
|
.retro-breadcrumb.active {
|
|
@@ -3938,7 +3949,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
3938
3949
|
justify-content: space-between;
|
|
3939
3950
|
background: var(--retro-dropdown-bg);
|
|
3940
3951
|
border: 2px solid var(--retro-border-dark);
|
|
3941
|
-
border-radius:
|
|
3952
|
+
border-radius: var(--retro-border-radius);
|
|
3942
3953
|
padding: 6px 16px;
|
|
3943
3954
|
font-family: var(--retro-font);
|
|
3944
3955
|
font-size: var(--retro-font-size-lg);
|
|
@@ -3970,7 +3981,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
3970
3981
|
min-width: 100%;
|
|
3971
3982
|
background: var(--retro-dropdown-bg);
|
|
3972
3983
|
border: 2px solid var(--retro-border-dark);
|
|
3973
|
-
border-radius:
|
|
3984
|
+
border-radius: var(--retro-border-radius);
|
|
3974
3985
|
box-shadow: 2px 2px 0 var(--retro-border-light);
|
|
3975
3986
|
z-index: 1000;
|
|
3976
3987
|
margin-top: 2px;
|
|
@@ -4019,7 +4030,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
4019
4030
|
align-items: flex-start;
|
|
4020
4031
|
background: var(--retro-input-bg);
|
|
4021
4032
|
border: 2px dashed var(--retro-border-dark);
|
|
4022
|
-
border-radius:
|
|
4033
|
+
border-radius: var(--retro-border-radius);
|
|
4023
4034
|
padding: 16px;
|
|
4024
4035
|
box-shadow: 1px 1px 0 var(--retro-border-light);
|
|
4025
4036
|
min-width: 260px;
|
|
@@ -4030,6 +4041,11 @@ input[type=radio].retro-input:focus-visible {
|
|
|
4030
4041
|
margin-bottom: 0;
|
|
4031
4042
|
}
|
|
4032
4043
|
|
|
4044
|
+
.retro-file-input:focus-visible + .retro-file-label {
|
|
4045
|
+
outline: 2px solid var(--retro-primary);
|
|
4046
|
+
outline-offset: 2px;
|
|
4047
|
+
}
|
|
4048
|
+
|
|
4033
4049
|
.retro-file-filename {
|
|
4034
4050
|
font-size: var(--retro-font-size);
|
|
4035
4051
|
color: var(--retro-input-text);
|
|
@@ -4042,7 +4058,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
4042
4058
|
text-align: center;
|
|
4043
4059
|
background: var(--retro-input-bg);
|
|
4044
4060
|
border: 1px solid var(--retro-border-medium);
|
|
4045
|
-
border-radius:
|
|
4061
|
+
border-radius: var(--retro-border-radius);
|
|
4046
4062
|
color: var(--retro-text-muted);
|
|
4047
4063
|
font-size: var(--retro-font-size-lg);
|
|
4048
4064
|
margin-top: 8px;
|
|
@@ -4065,7 +4081,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
4065
4081
|
gap: 6px;
|
|
4066
4082
|
background: var(--retro-input-bg);
|
|
4067
4083
|
border: 2px solid var(--retro-border-dark);
|
|
4068
|
-
border-radius:
|
|
4084
|
+
border-radius: var(--retro-border-radius);
|
|
4069
4085
|
padding: 8px 12px;
|
|
4070
4086
|
min-width: 220px;
|
|
4071
4087
|
}
|
|
@@ -4121,7 +4137,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
4121
4137
|
position: relative;
|
|
4122
4138
|
background: var(--retro-input-bg);
|
|
4123
4139
|
border: 2px solid var(--retro-border-dark);
|
|
4124
|
-
border-radius:
|
|
4140
|
+
border-radius: var(--retro-border-radius);
|
|
4125
4141
|
padding: 4px 12px;
|
|
4126
4142
|
min-width: 220px;
|
|
4127
4143
|
}
|
|
@@ -4150,7 +4166,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
4150
4166
|
width: 100%;
|
|
4151
4167
|
background: var(--retro-input-bg);
|
|
4152
4168
|
border: 2px solid var(--retro-border-dark);
|
|
4153
|
-
border-radius: 0 0
|
|
4169
|
+
border-radius: 0 0 var(--retro-border-radius) var(--retro-border-radius);
|
|
4154
4170
|
box-shadow: 2px 2px 0 var(--retro-border-light);
|
|
4155
4171
|
z-index: 10;
|
|
4156
4172
|
}
|
|
@@ -4192,7 +4208,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
4192
4208
|
text-shadow: 1px 1px 0 var(--retro-border-light);
|
|
4193
4209
|
user-select: none;
|
|
4194
4210
|
border: 2px solid var(--retro-border-dark);
|
|
4195
|
-
border-radius:
|
|
4211
|
+
border-radius: var(--retro-border-radius);
|
|
4196
4212
|
background: var(--retro-bg);
|
|
4197
4213
|
padding: 2px 2px 0 2px;
|
|
4198
4214
|
margin-right: 2px;
|
|
@@ -4240,7 +4256,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
4240
4256
|
display: inline-block;
|
|
4241
4257
|
vertical-align: middle;
|
|
4242
4258
|
box-sizing: border-box;
|
|
4243
|
-
border-radius:
|
|
4259
|
+
border-radius: var(--retro-border-radius);
|
|
4244
4260
|
}
|
|
4245
4261
|
|
|
4246
4262
|
.retro-divider-dashed {
|
|
@@ -4316,7 +4332,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
4316
4332
|
background: var(--retro-black);
|
|
4317
4333
|
color: var(--retro-white);
|
|
4318
4334
|
font-size: var(--retro-font-size-sm);
|
|
4319
|
-
border-radius:
|
|
4335
|
+
border-radius: var(--retro-border-radius);
|
|
4320
4336
|
white-space: nowrap;
|
|
4321
4337
|
box-shadow: 3px 3px 0 rgba(var(--retro-shadow-rgb), 0.2);
|
|
4322
4338
|
z-index: 1050;
|
|
@@ -4485,13 +4501,13 @@ input[type=radio].retro-input:focus-visible {
|
|
|
4485
4501
|
font-size: var(--retro-font-size);
|
|
4486
4502
|
background: var(--retro-list-bg);
|
|
4487
4503
|
color: var(--retro-list-text);
|
|
4488
|
-
border-radius:
|
|
4504
|
+
border-radius: var(--retro-border-radius);
|
|
4489
4505
|
box-shadow: 0 1px 4px rgba(var(--retro-shadow-rgb), 0.04);
|
|
4490
4506
|
}
|
|
4491
4507
|
.retro-list li {
|
|
4492
4508
|
padding: var(--retro-spacing-sm) var(--retro-spacing-md);
|
|
4493
4509
|
transition: background 0.2s, box-shadow 0.2s;
|
|
4494
|
-
border-radius:
|
|
4510
|
+
border-radius: var(--retro-border-radius);
|
|
4495
4511
|
position: relative;
|
|
4496
4512
|
margin-bottom: 2px;
|
|
4497
4513
|
}
|
|
@@ -4517,7 +4533,7 @@ input[type=radio].retro-input:focus-visible {
|
|
|
4517
4533
|
margin-left: var(--retro-spacing-lg);
|
|
4518
4534
|
background: none;
|
|
4519
4535
|
box-shadow: none;
|
|
4520
|
-
border-radius:
|
|
4536
|
+
border-radius: var(--retro-border-radius);
|
|
4521
4537
|
}
|
|
4522
4538
|
.retro-list-bordered {
|
|
4523
4539
|
border: 1px solid var(--retro-border-medium);
|
|
@@ -4575,7 +4591,7 @@ ol.retro-list li::before {
|
|
|
4575
4591
|
font-weight: bold;
|
|
4576
4592
|
font-family: inherit;
|
|
4577
4593
|
font-size: 1.1em;
|
|
4578
|
-
border-radius:
|
|
4594
|
+
border-radius: var(--retro-border-radius);
|
|
4579
4595
|
display: flex;
|
|
4580
4596
|
align-items: center;
|
|
4581
4597
|
justify-content: center;
|
|
@@ -4600,7 +4616,7 @@ ol.retro-list li ol.retro-list li::before {
|
|
|
4600
4616
|
font-size: 0.95em;
|
|
4601
4617
|
background: var(--retro-success);
|
|
4602
4618
|
color: var(--retro-success-fg);
|
|
4603
|
-
border-radius:
|
|
4619
|
+
border-radius: var(--retro-border-radius);
|
|
4604
4620
|
border: 2px solid var(--retro-border-medium);
|
|
4605
4621
|
top: 0.1em;
|
|
4606
4622
|
}
|
|
@@ -4661,7 +4677,7 @@ dl.retro-list dd {
|
|
|
4661
4677
|
color: var(--retro-black);
|
|
4662
4678
|
border: 2px solid var(--retro-border-dark);
|
|
4663
4679
|
box-shadow: 2px 2px 0 var(--retro-border-light), -2px -2px 0 var(--retro-border-dark);
|
|
4664
|
-
border-radius:
|
|
4680
|
+
border-radius: var(--retro-border-radius);
|
|
4665
4681
|
width: 32px;
|
|
4666
4682
|
height: 32px;
|
|
4667
4683
|
cursor: pointer;
|
|
@@ -4700,7 +4716,7 @@ dl.retro-list dd {
|
|
|
4700
4716
|
.retro-carousel-dot {
|
|
4701
4717
|
width: 12px;
|
|
4702
4718
|
height: 12px;
|
|
4703
|
-
border-radius:
|
|
4719
|
+
border-radius: var(--retro-border-radius);
|
|
4704
4720
|
background: var(--retro-border-medium);
|
|
4705
4721
|
border: 2px solid var(--retro-border-dark);
|
|
4706
4722
|
box-shadow: 1px 1px 0 var(--retro-border-light);
|
|
@@ -4897,7 +4913,7 @@ input[type=datetime-local].retro-input.retro-input-sm {
|
|
|
4897
4913
|
border: 2px solid var(--retro-border-dark);
|
|
4898
4914
|
box-shadow: 2px 2px 8px rgba(var(--retro-shadow-rgb), 0.12), 1px 1px 0 var(--retro-border-light);
|
|
4899
4915
|
padding: 4px 16px;
|
|
4900
|
-
border-radius:
|
|
4916
|
+
border-radius: var(--retro-border-radius);
|
|
4901
4917
|
filter: blur(0.2px);
|
|
4902
4918
|
font-weight: bold;
|
|
4903
4919
|
}
|
|
@@ -4930,7 +4946,7 @@ input[type=datetime-local].retro-input.retro-input-sm {
|
|
|
4930
4946
|
.retro-sidebar {
|
|
4931
4947
|
background: var(--retro-sidebar-bg);
|
|
4932
4948
|
border: 1px solid var(--retro-border-medium);
|
|
4933
|
-
border-radius:
|
|
4949
|
+
border-radius: var(--retro-border-radius);
|
|
4934
4950
|
padding: var(--retro-spacing-md, 16px);
|
|
4935
4951
|
width: 100%;
|
|
4936
4952
|
height: auto;
|
|
@@ -4992,7 +5008,7 @@ input[type=datetime-local].retro-input.retro-input-sm {
|
|
|
4992
5008
|
background: var(--retro-bg);
|
|
4993
5009
|
border: 1px solid var(--retro-border-medium);
|
|
4994
5010
|
padding: 6px 10px;
|
|
4995
|
-
border-radius:
|
|
5011
|
+
border-radius: var(--retro-border-radius);
|
|
4996
5012
|
cursor: pointer;
|
|
4997
5013
|
margin-bottom: var(--retro-spacing-sm, 8px);
|
|
4998
5014
|
}
|
|
@@ -5053,18 +5069,22 @@ input[type=datetime-local].retro-input.retro-input-sm {
|
|
|
5053
5069
|
}
|
|
5054
5070
|
|
|
5055
5071
|
.retro-sidebar-group {
|
|
5056
|
-
margin:
|
|
5072
|
+
margin: 0;
|
|
5073
|
+
padding: var(--retro-spacing-xs) var(--retro-spacing-md);
|
|
5057
5074
|
font-size: var(--retro-font-size-xs);
|
|
5058
5075
|
font-weight: var(--retro-font-weight-bold);
|
|
5059
5076
|
text-transform: uppercase;
|
|
5060
|
-
letter-spacing: 0.08em;
|
|
5061
5077
|
color: var(--retro-text-muted);
|
|
5078
|
+
background: var(--retro-bg);
|
|
5062
5079
|
border-bottom: 1px solid var(--retro-border-medium);
|
|
5063
|
-
padding-bottom: 2px;
|
|
5064
5080
|
}
|
|
5065
5081
|
|
|
5066
|
-
.retro-
|
|
5067
|
-
margin-
|
|
5082
|
+
.retro-nav-vertical .retro-sidebar-section {
|
|
5083
|
+
margin-bottom: 0;
|
|
5084
|
+
}
|
|
5085
|
+
|
|
5086
|
+
.retro-nav-vertical .retro-sidebar-section + .retro-sidebar-section .retro-sidebar-group {
|
|
5087
|
+
border-top: 1px solid var(--retro-border-medium);
|
|
5068
5088
|
}
|
|
5069
5089
|
|
|
5070
5090
|
/* Utilities */
|