ui-style-kit-css 1.2.1 → 2.0.1
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/CHANGELOG.md +38 -119
- package/CONTRIBUTING.md +25 -0
- package/README.md +206 -150
- package/SECURITY.md +18 -0
- package/STYLE-MAP.md +60 -0
- package/demo/index.html +1124 -0
- package/dist/ui-style-kit.css +3077 -8115
- package/dist/ui-style-kit.min.css +1 -7
- package/dist/ui-style-kit.with-bridge.css +5861 -0
- package/dist/ui-style-kit.with-bridge.min.css +1 -0
- package/docs/PUBLISHING.md +28 -0
- package/docs/STYLE-GUIDE.md +30 -0
- package/docs/TOKENS.md +276 -0
- package/package.json +90 -128
- package/styles/bauhaus.css +145 -702
- package/styles/bento.css +145 -701
- package/styles/brutalism.css +156 -640
- package/styles/cyberpunk.css +149 -639
- package/styles/interactive-surface-bridge.css +147 -311
- package/styles/maximalist.css +146 -702
- package/styles/minimal-saas.css +141 -701
- package/styles/native-elements.css +374 -0
- package/styles/neumorphism.css +147 -702
- package/styles/retro-glass.css +152 -642
- package/styles/retrofuturism.css +147 -702
- package/styles/tactile.css +145 -701
- package/styles/theme-colors.css +787 -0
- package/styles/y2k.css +143 -636
- package/CODE_OF_CONDUCT.md +0 -64
- package/index.html +0 -234
package/styles/retrofuturism.css
CHANGED
|
@@ -10,9 +10,18 @@
|
|
|
10
10
|
<body data-ui="retrofuturism" data-theme="cyber-lime" data-mode="contrast">
|
|
11
11
|
========================================================= */
|
|
12
12
|
|
|
13
|
+
|
|
14
|
+
@import url("./theme-colors.css");
|
|
15
|
+
@import url("./native-elements.css");
|
|
16
|
+
|
|
17
|
+
@layer ui-style-kit.retrofuturism {
|
|
13
18
|
:root {
|
|
14
19
|
--retro-font-sans: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
15
20
|
--retro-font-display: Orbitron, Eurostile, "Bank Gothic", Rajdhani, Inter, ui-sans-serif, system-ui, sans-serif;
|
|
21
|
+
--retro-font-body: var(--retro-font-sans);
|
|
22
|
+
--retro-font-heading: var(--retro-font-display);
|
|
23
|
+
--retro-font-control: var(--retro-font-display);
|
|
24
|
+
--retro-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
|
16
25
|
--retro-radius-xs: .25rem;
|
|
17
26
|
--retro-radius-sm: .5rem;
|
|
18
27
|
--retro-radius-md: 0.75rem;
|
|
@@ -58,19 +67,84 @@
|
|
|
58
67
|
}
|
|
59
68
|
|
|
60
69
|
[data-ui="retrofuturism"][data-theme][data-mode] {
|
|
70
|
+
/* Shared scheme aliases preserve the existing prefixed token API. */
|
|
71
|
+
--retro-bg-rgb: var(--usk-bg-rgb);
|
|
72
|
+
--retro-surface-rgb: var(--usk-surface-rgb);
|
|
73
|
+
--retro-surface-strong-rgb: var(--usk-surface-strong-rgb);
|
|
74
|
+
--retro-surface-soft-rgb: var(--usk-surface-soft-rgb);
|
|
75
|
+
--retro-text-rgb: var(--usk-text-rgb);
|
|
76
|
+
--retro-text-muted-rgb: var(--usk-text-muted-rgb);
|
|
77
|
+
--retro-border-rgb: var(--usk-border-rgb);
|
|
78
|
+
--retro-primary-rgb: var(--usk-primary-rgb);
|
|
79
|
+
--retro-primary-hover-rgb: var(--usk-primary-hover-rgb);
|
|
80
|
+
--retro-primary-text-rgb: var(--usk-primary-text-rgb);
|
|
81
|
+
--retro-secondary-rgb: var(--usk-secondary-rgb);
|
|
82
|
+
--retro-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
|
|
83
|
+
--retro-secondary-text-rgb: var(--usk-secondary-text-rgb);
|
|
84
|
+
--retro-accent-rgb: var(--usk-accent-rgb);
|
|
85
|
+
--retro-success-rgb: var(--usk-success-rgb);
|
|
86
|
+
--retro-warning-rgb: var(--usk-warning-rgb);
|
|
87
|
+
--retro-danger-rgb: var(--usk-danger-rgb);
|
|
88
|
+
--retro-link-rgb: var(--usk-link-rgb);
|
|
89
|
+
--retro-accent-text-rgb: var(--usk-accent-text-rgb);
|
|
90
|
+
--retro-success-text-rgb: var(--usk-success-text-rgb);
|
|
91
|
+
--retro-warning-text-rgb: var(--usk-warning-text-rgb);
|
|
92
|
+
--retro-danger-text-rgb: var(--usk-danger-text-rgb);
|
|
93
|
+
--retro-focus-rgb: var(--usk-focus-rgb);
|
|
94
|
+
/* Native fallback selectors inherit visual identity through shared tokens. */
|
|
95
|
+
--usk-native-surface: var(--retro-surface);
|
|
96
|
+
--usk-native-surface-strong: var(--retro-surface-strong);
|
|
97
|
+
--usk-native-surface-soft: var(--retro-surface-soft);
|
|
98
|
+
--usk-native-card-bg: var(--retro-card-bg);
|
|
99
|
+
--usk-native-control-bg: var(--retro-control-bg);
|
|
100
|
+
--usk-native-text: var(--retro-text);
|
|
101
|
+
--usk-native-text-muted: var(--retro-text-muted);
|
|
102
|
+
--usk-native-border: var(--retro-border);
|
|
103
|
+
--usk-native-primary: var(--retro-primary);
|
|
104
|
+
--usk-native-primary-hover: var(--retro-primary-hover);
|
|
105
|
+
--usk-native-on-primary: var(--retro-on-primary);
|
|
106
|
+
--usk-native-focus: var(--retro-focus);
|
|
107
|
+
--usk-native-success: var(--retro-success);
|
|
108
|
+
--usk-native-warning: var(--retro-warning);
|
|
109
|
+
--usk-native-danger: var(--retro-danger);
|
|
110
|
+
--usk-native-link: var(--retro-link);
|
|
111
|
+
--usk-native-font-body: var(--retro-font-body);
|
|
112
|
+
--usk-native-font-heading: var(--retro-font-heading);
|
|
113
|
+
--usk-native-font-control: var(--retro-font-control);
|
|
114
|
+
--usk-native-font-mono: var(--retro-font-mono);
|
|
115
|
+
--usk-native-radius-sm: var(--retro-radius-sm);
|
|
116
|
+
--usk-native-radius: var(--retro-radius-md);
|
|
117
|
+
--usk-native-radius-lg: var(--retro-radius-lg);
|
|
118
|
+
--usk-native-shadow: var(--retro-shadow-sm, none);
|
|
119
|
+
--usk-native-shadow-md: var(--retro-shadow-md, var(--usk-native-shadow));
|
|
120
|
+
--usk-native-focus-ring: var(--retro-focus-ring, 0 0 0 3px rgb(var(--retro-focus-rgb) / .28));
|
|
121
|
+
--usk-native-border-width: 1px;
|
|
122
|
+
--usk-native-field-gap: .5rem;
|
|
123
|
+
--usk-native-panel-padding: var(--retro-space-5);
|
|
124
|
+
--usk-native-shadow: 0 10px 30px rgb(0 0 0 / calc(var(--retro-shadow-alpha) * .72));
|
|
61
125
|
--retro-bg: rgb(var(--retro-bg-rgb));
|
|
62
126
|
--retro-surface: rgb(var(--retro-surface-rgb) / var(--retro-panel-alpha));
|
|
63
127
|
--retro-surface-strong: rgb(var(--retro-surface-strong-rgb) / var(--retro-panel-alpha));
|
|
64
128
|
--retro-surface-soft: rgb(var(--retro-surface-soft-rgb) / var(--retro-panel-soft-alpha));
|
|
65
129
|
--retro-text: rgb(var(--retro-text-rgb));
|
|
66
130
|
--retro-text-muted: rgb(var(--retro-text-muted-rgb));
|
|
131
|
+
--retro-fg: var(--retro-text);
|
|
132
|
+
--retro-surface-fg: var(--retro-text);
|
|
133
|
+
--retro-muted: var(--retro-text-muted);
|
|
67
134
|
--retro-border: rgb(var(--retro-border-rgb) / var(--retro-border-alpha));
|
|
135
|
+
--retro-control-fg: var(--retro-text);
|
|
68
136
|
--retro-primary: rgb(var(--retro-primary-rgb));
|
|
69
137
|
--retro-primary-hover: rgb(var(--retro-primary-hover-rgb));
|
|
70
138
|
--retro-primary-text: rgb(var(--retro-primary-text-rgb));
|
|
71
139
|
--retro-secondary: rgb(var(--retro-secondary-rgb));
|
|
72
140
|
--retro-secondary-hover: rgb(var(--retro-secondary-hover-rgb));
|
|
73
141
|
--retro-secondary-text: rgb(var(--retro-secondary-text-rgb));
|
|
142
|
+
--retro-on-primary: var(--retro-primary-text);
|
|
143
|
+
--retro-on-secondary: var(--retro-secondary-text);
|
|
144
|
+
--retro-on-accent: rgb(var(--retro-accent-text-rgb));
|
|
145
|
+
--retro-on-success: rgb(var(--retro-success-text-rgb));
|
|
146
|
+
--retro-on-warning: rgb(var(--retro-warning-text-rgb));
|
|
147
|
+
--retro-on-danger: rgb(var(--retro-danger-text-rgb));
|
|
74
148
|
--retro-accent: rgb(var(--retro-accent-rgb));
|
|
75
149
|
--retro-success: rgb(var(--retro-success-rgb));
|
|
76
150
|
--retro-warning: rgb(var(--retro-warning-rgb));
|
|
@@ -78,667 +152,44 @@
|
|
|
78
152
|
--retro-link: rgb(var(--retro-link-rgb));
|
|
79
153
|
--retro-focus: rgb(var(--retro-focus-rgb));
|
|
80
154
|
--retro-focus-ring: 0 0 0 3px rgb(var(--retro-focus-rgb) / var(--retro-focus-alpha));
|
|
155
|
+
--retro-theme-bg-size: auto;
|
|
156
|
+
--retro-theme-bg: radial-gradient(circle at 0% 0%, rgb(var(--retro-primary-rgb) / .16), transparent 32rem), radial-gradient(circle at 100% 0%, rgb(var(--retro-accent-rgb) / .12), transparent 30rem), radial-gradient(circle at 50% 100%, rgb(var(--retro-secondary-rgb) / .10), transparent 34rem), var(--retro-bg);
|
|
157
|
+
--retro-card-bg: linear-gradient(135deg, rgb(var(--retro-primary-rgb) / .10), rgb(var(--retro-accent-rgb) / .055) 42%, rgb(var(--retro-surface-strong-rgb) / var(--retro-panel-alpha)) 100%), var(--retro-surface);
|
|
158
|
+
--retro-control-bg: linear-gradient(180deg, rgb(var(--retro-surface-strong-rgb) / var(--retro-panel-alpha)), rgb(var(--retro-surface-soft-rgb) / var(--retro-panel-soft-alpha)));
|
|
159
|
+
--retro-spinner-track: rgb(var(--retro-border-rgb) / max(.28, calc(var(--retro-border-alpha) * .7)));
|
|
160
|
+
--retro-spinner-stroke: var(--retro-primary);
|
|
161
|
+
--retro-spinner-accent: var(--retro-accent);
|
|
81
162
|
}
|
|
82
163
|
|
|
83
|
-
[data-ui="retrofuturism"][data-theme="midnight-gold"][data-mode="light"] {
|
|
84
|
-
--retro-bg-rgb: 246 243 234;
|
|
85
|
-
--retro-surface-rgb: 255 250 240;
|
|
86
|
-
--retro-surface-strong-rgb: 255 255 255;
|
|
87
|
-
--retro-surface-soft-rgb: 237 230 211;
|
|
88
|
-
--retro-text-rgb: 23 32 51;
|
|
89
|
-
--retro-text-muted-rgb: 95 104 121;
|
|
90
|
-
--retro-border-rgb: 214 200 165;
|
|
91
|
-
--retro-primary-rgb: 184 135 47;
|
|
92
|
-
--retro-primary-hover-rgb: 148 104 31;
|
|
93
|
-
--retro-primary-text-rgb: 255 255 255;
|
|
94
|
-
--retro-secondary-rgb: 34 49 79;
|
|
95
|
-
--retro-secondary-hover-rgb: 23 36 60;
|
|
96
|
-
--retro-secondary-text-rgb: 255 255 255;
|
|
97
|
-
--retro-accent-rgb: 217 164 65;
|
|
98
|
-
--retro-success-rgb: 47 125 84;
|
|
99
|
-
--retro-warning-rgb: 167 106 0;
|
|
100
|
-
--retro-danger-rgb: 185 63 63;
|
|
101
|
-
--retro-link-rgb: 138 100 31;
|
|
102
|
-
--retro-focus-rgb: 217 164 65;
|
|
103
|
-
}
|
|
104
164
|
|
|
105
|
-
[data-ui="retrofuturism"][data-theme="midnight-gold"][data-mode="dark"] {
|
|
106
|
-
--retro-bg-rgb: 7 17 31;
|
|
107
|
-
--retro-surface-rgb: 16 27 45;
|
|
108
|
-
--retro-surface-strong-rgb: 23 36 58;
|
|
109
|
-
--retro-surface-soft-rgb: 12 22 39;
|
|
110
|
-
--retro-text-rgb: 247 237 215;
|
|
111
|
-
--retro-text-muted-rgb: 185 192 204;
|
|
112
|
-
--retro-border-rgb: 57 72 97;
|
|
113
|
-
--retro-primary-rgb: 214 168 79;
|
|
114
|
-
--retro-primary-hover-rgb: 240 200 109;
|
|
115
|
-
--retro-primary-text-rgb: 16 16 16;
|
|
116
|
-
--retro-secondary-rgb: 111 134 184;
|
|
117
|
-
--retro-secondary-hover-rgb: 146 167 209;
|
|
118
|
-
--retro-secondary-text-rgb: 8 16 29;
|
|
119
|
-
--retro-accent-rgb: 243 210 122;
|
|
120
|
-
--retro-success-rgb: 107 214 156;
|
|
121
|
-
--retro-warning-rgb: 255 203 91;
|
|
122
|
-
--retro-danger-rgb: 255 123 123;
|
|
123
|
-
--retro-link-rgb: 243 210 122;
|
|
124
|
-
--retro-focus-rgb: 255 214 107;
|
|
125
|
-
}
|
|
126
165
|
|
|
127
|
-
[data-ui="retrofuturism"][data-theme="midnight-gold"][data-mode="contrast"] {
|
|
128
|
-
--retro-bg-rgb: 0 0 0;
|
|
129
|
-
--retro-surface-rgb: 8 8 8;
|
|
130
|
-
--retro-surface-strong-rgb: 17 17 17;
|
|
131
|
-
--retro-surface-soft-rgb: 5 5 5;
|
|
132
|
-
--retro-text-rgb: 255 255 255;
|
|
133
|
-
--retro-text-muted-rgb: 245 245 245;
|
|
134
|
-
--retro-border-rgb: 255 255 255;
|
|
135
|
-
--retro-primary-rgb: 255 212 0;
|
|
136
|
-
--retro-primary-hover-rgb: 255 255 255;
|
|
137
|
-
--retro-primary-text-rgb: 0 0 0;
|
|
138
|
-
--retro-secondary-rgb: 0 217 255;
|
|
139
|
-
--retro-secondary-hover-rgb: 255 255 255;
|
|
140
|
-
--retro-secondary-text-rgb: 0 0 0;
|
|
141
|
-
--retro-accent-rgb: 255 234 0;
|
|
142
|
-
--retro-success-rgb: 0 255 117;
|
|
143
|
-
--retro-warning-rgb: 255 191 0;
|
|
144
|
-
--retro-danger-rgb: 255 77 77;
|
|
145
|
-
--retro-link-rgb: 0 217 255;
|
|
146
|
-
--retro-focus-rgb: 255 255 255;
|
|
147
|
-
}
|
|
148
166
|
|
|
149
|
-
[data-ui="retrofuturism"][data-theme="ocean-steel"][data-mode="light"] {
|
|
150
|
-
--retro-bg-rgb: 238 248 251;
|
|
151
|
-
--retro-surface-rgb: 255 255 255;
|
|
152
|
-
--retro-surface-strong-rgb: 248 253 255;
|
|
153
|
-
--retro-surface-soft-rgb: 220 236 242;
|
|
154
|
-
--retro-text-rgb: 16 36 46;
|
|
155
|
-
--retro-text-muted-rgb: 78 101 112;
|
|
156
|
-
--retro-border-rgb: 184 211 221;
|
|
157
|
-
--retro-primary-rgb: 8 125 157;
|
|
158
|
-
--retro-primary-hover-rgb: 6 100 126;
|
|
159
|
-
--retro-primary-text-rgb: 255 255 255;
|
|
160
|
-
--retro-secondary-rgb: 57 86 107;
|
|
161
|
-
--retro-secondary-hover-rgb: 44 67 84;
|
|
162
|
-
--retro-secondary-text-rgb: 255 255 255;
|
|
163
|
-
--retro-accent-rgb: 21 184 200;
|
|
164
|
-
--retro-success-rgb: 38 122 92;
|
|
165
|
-
--retro-warning-rgb: 167 101 0;
|
|
166
|
-
--retro-danger-rgb: 182 70 70;
|
|
167
|
-
--retro-link-rgb: 6 100 126;
|
|
168
|
-
--retro-focus-rgb: 21 184 200;
|
|
169
|
-
}
|
|
170
167
|
|
|
171
|
-
[data-ui="retrofuturism"][data-theme="ocean-steel"][data-mode="dark"] {
|
|
172
|
-
--retro-bg-rgb: 6 22 29;
|
|
173
|
-
--retro-surface-rgb: 13 37 48;
|
|
174
|
-
--retro-surface-strong-rgb: 20 52 66;
|
|
175
|
-
--retro-surface-soft-rgb: 8 29 38;
|
|
176
|
-
--retro-text-rgb: 233 251 255;
|
|
177
|
-
--retro-text-muted-rgb: 167 192 201;
|
|
178
|
-
--retro-border-rgb: 49 86 102;
|
|
179
|
-
--retro-primary-rgb: 54 196 221;
|
|
180
|
-
--retro-primary-hover-rgb: 115 227 244;
|
|
181
|
-
--retro-primary-text-rgb: 4 18 22;
|
|
182
|
-
--retro-secondary-rgb: 140 183 201;
|
|
183
|
-
--retro-secondary-hover-rgb: 178 213 226;
|
|
184
|
-
--retro-secondary-text-rgb: 6 22 29;
|
|
185
|
-
--retro-accent-rgb: 83 240 255;
|
|
186
|
-
--retro-success-rgb: 103 216 166;
|
|
187
|
-
--retro-warning-rgb: 255 192 97;
|
|
188
|
-
--retro-danger-rgb: 255 123 123;
|
|
189
|
-
--retro-link-rgb: 115 227 244;
|
|
190
|
-
--retro-focus-rgb: 83 240 255;
|
|
191
|
-
}
|
|
192
168
|
|
|
193
|
-
[data-ui="retrofuturism"][data-theme="ocean-steel"][data-mode="contrast"] {
|
|
194
|
-
--retro-bg-rgb: 0 8 10;
|
|
195
|
-
--retro-surface-rgb: 0 16 20;
|
|
196
|
-
--retro-surface-strong-rgb: 0 26 32;
|
|
197
|
-
--retro-surface-soft-rgb: 0 0 0;
|
|
198
|
-
--retro-text-rgb: 255 255 255;
|
|
199
|
-
--retro-text-muted-rgb: 234 255 255;
|
|
200
|
-
--retro-border-rgb: 255 255 255;
|
|
201
|
-
--retro-primary-rgb: 0 229 255;
|
|
202
|
-
--retro-primary-hover-rgb: 255 255 255;
|
|
203
|
-
--retro-primary-text-rgb: 0 0 0;
|
|
204
|
-
--retro-secondary-rgb: 255 255 0;
|
|
205
|
-
--retro-secondary-hover-rgb: 255 255 255;
|
|
206
|
-
--retro-secondary-text-rgb: 0 0 0;
|
|
207
|
-
--retro-accent-rgb: 0 255 255;
|
|
208
|
-
--retro-success-rgb: 0 255 144;
|
|
209
|
-
--retro-warning-rgb: 255 208 0;
|
|
210
|
-
--retro-danger-rgb: 255 59 59;
|
|
211
|
-
--retro-link-rgb: 0 229 255;
|
|
212
|
-
--retro-focus-rgb: 255 255 255;
|
|
213
|
-
}
|
|
214
169
|
|
|
215
|
-
[data-ui="retrofuturism"][data-theme="forest-moss"][data-mode="light"] {
|
|
216
|
-
--retro-bg-rgb: 242 247 239;
|
|
217
|
-
--retro-surface-rgb: 255 255 255;
|
|
218
|
-
--retro-surface-strong-rgb: 251 255 248;
|
|
219
|
-
--retro-surface-soft-rgb: 226 234 219;
|
|
220
|
-
--retro-text-rgb: 24 36 23;
|
|
221
|
-
--retro-text-muted-rgb: 88 104 82;
|
|
222
|
-
--retro-border-rgb: 197 211 186;
|
|
223
|
-
--retro-primary-rgb: 63 125 58;
|
|
224
|
-
--retro-primary-hover-rgb: 47 97 43;
|
|
225
|
-
--retro-primary-text-rgb: 255 255 255;
|
|
226
|
-
--retro-secondary-rgb: 106 95 56;
|
|
227
|
-
--retro-secondary-hover-rgb: 81 73 43;
|
|
228
|
-
--retro-secondary-text-rgb: 255 255 255;
|
|
229
|
-
--retro-accent-rgb: 156 186 82;
|
|
230
|
-
--retro-success-rgb: 47 125 84;
|
|
231
|
-
--retro-warning-rgb: 154 106 0;
|
|
232
|
-
--retro-danger-rgb: 173 69 69;
|
|
233
|
-
--retro-link-rgb: 47 97 43;
|
|
234
|
-
--retro-focus-rgb: 156 186 82;
|
|
235
|
-
}
|
|
236
170
|
|
|
237
|
-
[data-ui="retrofuturism"][data-theme="forest-moss"][data-mode="dark"] {
|
|
238
|
-
--retro-bg-rgb: 7 16 6;
|
|
239
|
-
--retro-surface-rgb: 16 28 15;
|
|
240
|
-
--retro-surface-strong-rgb: 26 42 24;
|
|
241
|
-
--retro-surface-soft-rgb: 11 22 10;
|
|
242
|
-
--retro-text-rgb: 237 247 232;
|
|
243
|
-
--retro-text-muted-rgb: 180 197 173;
|
|
244
|
-
--retro-border-rgb: 61 83 56;
|
|
245
|
-
--retro-primary-rgb: 130 210 122;
|
|
246
|
-
--retro-primary-hover-rgb: 162 237 153;
|
|
247
|
-
--retro-primary-text-rgb: 7 16 6;
|
|
248
|
-
--retro-secondary-rgb: 210 189 114;
|
|
249
|
-
--retro-secondary-hover-rgb: 239 217 139;
|
|
250
|
-
--retro-secondary-text-rgb: 20 16 6;
|
|
251
|
-
--retro-accent-rgb: 185 239 107;
|
|
252
|
-
--retro-success-rgb: 117 223 167;
|
|
253
|
-
--retro-warning-rgb: 255 210 99;
|
|
254
|
-
--retro-danger-rgb: 255 133 133;
|
|
255
|
-
--retro-link-rgb: 162 237 153;
|
|
256
|
-
--retro-focus-rgb: 185 239 107;
|
|
257
|
-
}
|
|
258
171
|
|
|
259
|
-
[data-ui="retrofuturism"][data-theme="forest-moss"][data-mode="contrast"] {
|
|
260
|
-
--retro-bg-rgb: 0 0 0;
|
|
261
|
-
--retro-surface-rgb: 7 16 7;
|
|
262
|
-
--retro-surface-strong-rgb: 11 25 11;
|
|
263
|
-
--retro-surface-soft-rgb: 0 0 0;
|
|
264
|
-
--retro-text-rgb: 255 255 255;
|
|
265
|
-
--retro-text-muted-rgb: 240 255 240;
|
|
266
|
-
--retro-border-rgb: 255 255 255;
|
|
267
|
-
--retro-primary-rgb: 108 255 95;
|
|
268
|
-
--retro-primary-hover-rgb: 255 255 255;
|
|
269
|
-
--retro-primary-text-rgb: 0 0 0;
|
|
270
|
-
--retro-secondary-rgb: 255 223 0;
|
|
271
|
-
--retro-secondary-hover-rgb: 255 255 255;
|
|
272
|
-
--retro-secondary-text-rgb: 0 0 0;
|
|
273
|
-
--retro-accent-rgb: 182 255 0;
|
|
274
|
-
--retro-success-rgb: 0 255 117;
|
|
275
|
-
--retro-warning-rgb: 255 208 0;
|
|
276
|
-
--retro-danger-rgb: 255 64 64;
|
|
277
|
-
--retro-link-rgb: 108 255 95;
|
|
278
|
-
--retro-focus-rgb: 255 255 255;
|
|
279
|
-
}
|
|
280
172
|
|
|
281
|
-
[data-ui="retrofuturism"][data-theme="sunset-ember"][data-mode="light"] {
|
|
282
|
-
--retro-bg-rgb: 255 244 236;
|
|
283
|
-
--retro-surface-rgb: 255 255 255;
|
|
284
|
-
--retro-surface-strong-rgb: 255 250 246;
|
|
285
|
-
--retro-surface-soft-rgb: 244 222 210;
|
|
286
|
-
--retro-text-rgb: 42 23 17;
|
|
287
|
-
--retro-text-muted-rgb: 118 88 77;
|
|
288
|
-
--retro-border-rgb: 227 189 170;
|
|
289
|
-
--retro-primary-rgb: 196 81 43;
|
|
290
|
-
--retro-primary-hover-rgb: 159 63 32;
|
|
291
|
-
--retro-primary-text-rgb: 255 255 255;
|
|
292
|
-
--retro-secondary-rgb: 124 63 92;
|
|
293
|
-
--retro-secondary-hover-rgb: 97 48 71;
|
|
294
|
-
--retro-secondary-text-rgb: 255 255 255;
|
|
295
|
-
--retro-accent-rgb: 230 154 58;
|
|
296
|
-
--retro-success-rgb: 49 122 87;
|
|
297
|
-
--retro-warning-rgb: 184 111 0;
|
|
298
|
-
--retro-danger-rgb: 189 61 61;
|
|
299
|
-
--retro-link-rgb: 159 63 32;
|
|
300
|
-
--retro-focus-rgb: 230 154 58;
|
|
301
|
-
}
|
|
302
173
|
|
|
303
|
-
[data-ui="retrofuturism"][data-theme="sunset-ember"][data-mode="dark"] {
|
|
304
|
-
--retro-bg-rgb: 23 9 5;
|
|
305
|
-
--retro-surface-rgb: 38 17 11;
|
|
306
|
-
--retro-surface-strong-rgb: 53 25 18;
|
|
307
|
-
--retro-surface-soft-rgb: 30 12 7;
|
|
308
|
-
--retro-text-rgb: 255 240 232;
|
|
309
|
-
--retro-text-muted-rgb: 208 177 165;
|
|
310
|
-
--retro-border-rgb: 106 59 45;
|
|
311
|
-
--retro-primary-rgb: 255 138 91;
|
|
312
|
-
--retro-primary-hover-rgb: 255 173 138;
|
|
313
|
-
--retro-primary-text-rgb: 26 8 3;
|
|
314
|
-
--retro-secondary-rgb: 227 138 181;
|
|
315
|
-
--retro-secondary-hover-rgb: 255 175 208;
|
|
316
|
-
--retro-secondary-text-rgb: 26 7 18;
|
|
317
|
-
--retro-accent-rgb: 255 193 102;
|
|
318
|
-
--retro-success-rgb: 112 215 163;
|
|
319
|
-
--retro-warning-rgb: 255 209 102;
|
|
320
|
-
--retro-danger-rgb: 255 119 119;
|
|
321
|
-
--retro-link-rgb: 255 173 138;
|
|
322
|
-
--retro-focus-rgb: 255 193 102;
|
|
323
|
-
}
|
|
324
174
|
|
|
325
|
-
[data-ui="retrofuturism"][data-theme="sunset-ember"][data-mode="contrast"] {
|
|
326
|
-
--retro-bg-rgb: 0 0 0;
|
|
327
|
-
--retro-surface-rgb: 18 4 0;
|
|
328
|
-
--retro-surface-strong-rgb: 29 7 0;
|
|
329
|
-
--retro-surface-soft-rgb: 0 0 0;
|
|
330
|
-
--retro-text-rgb: 255 255 255;
|
|
331
|
-
--retro-text-muted-rgb: 255 245 239;
|
|
332
|
-
--retro-border-rgb: 255 255 255;
|
|
333
|
-
--retro-primary-rgb: 255 106 0;
|
|
334
|
-
--retro-primary-hover-rgb: 255 255 255;
|
|
335
|
-
--retro-primary-text-rgb: 0 0 0;
|
|
336
|
-
--retro-secondary-rgb: 255 79 184;
|
|
337
|
-
--retro-secondary-hover-rgb: 255 255 255;
|
|
338
|
-
--retro-secondary-text-rgb: 0 0 0;
|
|
339
|
-
--retro-accent-rgb: 255 208 0;
|
|
340
|
-
--retro-success-rgb: 0 255 144;
|
|
341
|
-
--retro-warning-rgb: 255 191 0;
|
|
342
|
-
--retro-danger-rgb: 255 48 48;
|
|
343
|
-
--retro-link-rgb: 255 157 0;
|
|
344
|
-
--retro-focus-rgb: 255 255 255;
|
|
345
|
-
}
|
|
346
175
|
|
|
347
|
-
[data-ui="retrofuturism"][data-theme="royal-plum"][data-mode="light"] {
|
|
348
|
-
--retro-bg-rgb: 248 241 251;
|
|
349
|
-
--retro-surface-rgb: 255 255 255;
|
|
350
|
-
--retro-surface-strong-rgb: 253 248 255;
|
|
351
|
-
--retro-surface-soft-rgb: 234 220 240;
|
|
352
|
-
--retro-text-rgb: 36 21 45;
|
|
353
|
-
--retro-text-muted-rgb: 105 86 113;
|
|
354
|
-
--retro-border-rgb: 213 187 221;
|
|
355
|
-
--retro-primary-rgb: 123 63 160;
|
|
356
|
-
--retro-primary-hover-rgb: 99 49 127;
|
|
357
|
-
--retro-primary-text-rgb: 255 255 255;
|
|
358
|
-
--retro-secondary-rgb: 63 76 154;
|
|
359
|
-
--retro-secondary-hover-rgb: 48 58 119;
|
|
360
|
-
--retro-secondary-text-rgb: 255 255 255;
|
|
361
|
-
--retro-accent-rgb: 192 90 198;
|
|
362
|
-
--retro-success-rgb: 49 124 92;
|
|
363
|
-
--retro-warning-rgb: 166 106 0;
|
|
364
|
-
--retro-danger-rgb: 183 65 95;
|
|
365
|
-
--retro-link-rgb: 99 49 127;
|
|
366
|
-
--retro-focus-rgb: 192 90 198;
|
|
367
|
-
}
|
|
368
176
|
|
|
369
|
-
[data-ui="retrofuturism"][data-theme="royal-plum"][data-mode="dark"] {
|
|
370
|
-
--retro-bg-rgb: 16 6 20;
|
|
371
|
-
--retro-surface-rgb: 29 16 36;
|
|
372
|
-
--retro-surface-strong-rgb: 42 23 52;
|
|
373
|
-
--retro-surface-soft-rgb: 22 11 27;
|
|
374
|
-
--retro-text-rgb: 250 236 255;
|
|
375
|
-
--retro-text-muted-rgb: 200 176 209;
|
|
376
|
-
--retro-border-rgb: 85 57 100;
|
|
377
|
-
--retro-primary-rgb: 216 145 242;
|
|
378
|
-
--retro-primary-hover-rgb: 235 184 255;
|
|
379
|
-
--retro-primary-text-rgb: 19 6 23;
|
|
380
|
-
--retro-secondary-rgb: 157 168 255;
|
|
381
|
-
--retro-secondary-hover-rgb: 195 202 255;
|
|
382
|
-
--retro-secondary-text-rgb: 8 11 31;
|
|
383
|
-
--retro-accent-rgb: 255 156 246;
|
|
384
|
-
--retro-success-rgb: 118 220 169;
|
|
385
|
-
--retro-warning-rgb: 255 209 102;
|
|
386
|
-
--retro-danger-rgb: 255 122 156;
|
|
387
|
-
--retro-link-rgb: 235 184 255;
|
|
388
|
-
--retro-focus-rgb: 255 156 246;
|
|
389
|
-
}
|
|
390
177
|
|
|
391
|
-
[data-ui="retrofuturism"][data-theme="royal-plum"][data-mode="contrast"] {
|
|
392
|
-
--retro-bg-rgb: 0 0 0;
|
|
393
|
-
--retro-surface-rgb: 16 0 20;
|
|
394
|
-
--retro-surface-strong-rgb: 26 0 34;
|
|
395
|
-
--retro-surface-soft-rgb: 0 0 0;
|
|
396
|
-
--retro-text-rgb: 255 255 255;
|
|
397
|
-
--retro-text-muted-rgb: 255 240 255;
|
|
398
|
-
--retro-border-rgb: 255 255 255;
|
|
399
|
-
--retro-primary-rgb: 228 92 255;
|
|
400
|
-
--retro-primary-hover-rgb: 255 255 255;
|
|
401
|
-
--retro-primary-text-rgb: 0 0 0;
|
|
402
|
-
--retro-secondary-rgb: 0 217 255;
|
|
403
|
-
--retro-secondary-hover-rgb: 255 255 255;
|
|
404
|
-
--retro-secondary-text-rgb: 0 0 0;
|
|
405
|
-
--retro-accent-rgb: 255 0 245;
|
|
406
|
-
--retro-success-rgb: 0 255 144;
|
|
407
|
-
--retro-warning-rgb: 255 225 0;
|
|
408
|
-
--retro-danger-rgb: 255 63 110;
|
|
409
|
-
--retro-link-rgb: 228 92 255;
|
|
410
|
-
--retro-focus-rgb: 255 255 255;
|
|
411
|
-
}
|
|
412
178
|
|
|
413
|
-
[data-ui="retrofuturism"][data-theme="graphite-cyan"][data-mode="light"] {
|
|
414
|
-
--retro-bg-rgb: 242 245 246;
|
|
415
|
-
--retro-surface-rgb: 255 255 255;
|
|
416
|
-
--retro-surface-strong-rgb: 249 251 252;
|
|
417
|
-
--retro-surface-soft-rgb: 225 231 234;
|
|
418
|
-
--retro-text-rgb: 23 29 33;
|
|
419
|
-
--retro-text-muted-rgb: 93 104 112;
|
|
420
|
-
--retro-border-rgb: 197 206 212;
|
|
421
|
-
--retro-primary-rgb: 0 124 137;
|
|
422
|
-
--retro-primary-hover-rgb: 0 99 110;
|
|
423
|
-
--retro-primary-text-rgb: 255 255 255;
|
|
424
|
-
--retro-secondary-rgb: 63 72 80;
|
|
425
|
-
--retro-secondary-hover-rgb: 47 54 60;
|
|
426
|
-
--retro-secondary-text-rgb: 255 255 255;
|
|
427
|
-
--retro-accent-rgb: 34 184 199;
|
|
428
|
-
--retro-success-rgb: 40 122 91;
|
|
429
|
-
--retro-warning-rgb: 167 103 0;
|
|
430
|
-
--retro-danger-rgb: 182 64 64;
|
|
431
|
-
--retro-link-rgb: 0 99 110;
|
|
432
|
-
--retro-focus-rgb: 34 184 199;
|
|
433
|
-
}
|
|
434
179
|
|
|
435
|
-
[data-ui="retrofuturism"][data-theme="graphite-cyan"][data-mode="dark"] {
|
|
436
|
-
--retro-bg-rgb: 8 11 13;
|
|
437
|
-
--retro-surface-rgb: 18 24 28;
|
|
438
|
-
--retro-surface-strong-rgb: 28 37 43;
|
|
439
|
-
--retro-surface-soft-rgb: 13 17 20;
|
|
440
|
-
--retro-text-rgb: 237 246 248;
|
|
441
|
-
--retro-text-muted-rgb: 174 187 193;
|
|
442
|
-
--retro-border-rgb: 59 72 79;
|
|
443
|
-
--retro-primary-rgb: 62 217 232;
|
|
444
|
-
--retro-primary-hover-rgb: 123 243 255;
|
|
445
|
-
--retro-primary-text-rgb: 6 16 18;
|
|
446
|
-
--retro-secondary-rgb: 170 181 188;
|
|
447
|
-
--retro-secondary-hover-rgb: 210 219 224;
|
|
448
|
-
--retro-secondary-text-rgb: 8 11 13;
|
|
449
|
-
--retro-accent-rgb: 123 243 255;
|
|
450
|
-
--retro-success-rgb: 110 218 165;
|
|
451
|
-
--retro-warning-rgb: 255 200 97;
|
|
452
|
-
--retro-danger-rgb: 255 125 125;
|
|
453
|
-
--retro-link-rgb: 123 243 255;
|
|
454
|
-
--retro-focus-rgb: 62 217 232;
|
|
455
|
-
}
|
|
456
180
|
|
|
457
|
-
[data-ui="retrofuturism"][data-theme="graphite-cyan"][data-mode="contrast"] {
|
|
458
|
-
--retro-bg-rgb: 0 0 0;
|
|
459
|
-
--retro-surface-rgb: 7 7 7;
|
|
460
|
-
--retro-surface-strong-rgb: 17 17 17;
|
|
461
|
-
--retro-surface-soft-rgb: 0 0 0;
|
|
462
|
-
--retro-text-rgb: 255 255 255;
|
|
463
|
-
--retro-text-muted-rgb: 245 245 245;
|
|
464
|
-
--retro-border-rgb: 255 255 255;
|
|
465
|
-
--retro-primary-rgb: 0 240 255;
|
|
466
|
-
--retro-primary-hover-rgb: 255 255 255;
|
|
467
|
-
--retro-primary-text-rgb: 0 0 0;
|
|
468
|
-
--retro-secondary-rgb: 242 242 242;
|
|
469
|
-
--retro-secondary-hover-rgb: 255 255 255;
|
|
470
|
-
--retro-secondary-text-rgb: 0 0 0;
|
|
471
|
-
--retro-accent-rgb: 0 240 255;
|
|
472
|
-
--retro-success-rgb: 0 255 117;
|
|
473
|
-
--retro-warning-rgb: 255 208 0;
|
|
474
|
-
--retro-danger-rgb: 255 64 64;
|
|
475
|
-
--retro-link-rgb: 0 240 255;
|
|
476
|
-
--retro-focus-rgb: 255 255 255;
|
|
477
|
-
}
|
|
478
181
|
|
|
479
|
-
[data-ui="retrofuturism"][data-theme="desert-sage"][data-mode="light"] {
|
|
480
|
-
--retro-bg-rgb: 248 242 231;
|
|
481
|
-
--retro-surface-rgb: 255 255 255;
|
|
482
|
-
--retro-surface-strong-rgb: 255 250 241;
|
|
483
|
-
--retro-surface-soft-rgb: 234 223 205;
|
|
484
|
-
--retro-text-rgb: 43 36 25;
|
|
485
|
-
--retro-text-muted-rgb: 113 103 84;
|
|
486
|
-
--retro-border-rgb: 215 198 167;
|
|
487
|
-
--retro-primary-rgb: 140 106 61;
|
|
488
|
-
--retro-primary-hover-rgb: 112 83 47;
|
|
489
|
-
--retro-primary-text-rgb: 255 255 255;
|
|
490
|
-
--retro-secondary-rgb: 95 118 85;
|
|
491
|
-
--retro-secondary-hover-rgb: 72 92 64;
|
|
492
|
-
--retro-secondary-text-rgb: 255 255 255;
|
|
493
|
-
--retro-accent-rgb: 201 151 74;
|
|
494
|
-
--retro-success-rgb: 81 125 72;
|
|
495
|
-
--retro-warning-rgb: 166 107 0;
|
|
496
|
-
--retro-danger-rgb: 174 74 63;
|
|
497
|
-
--retro-link-rgb: 112 83 47;
|
|
498
|
-
--retro-focus-rgb: 201 151 74;
|
|
499
|
-
}
|
|
500
182
|
|
|
501
|
-
[data-ui="retrofuturism"][data-theme="desert-sage"][data-mode="dark"] {
|
|
502
|
-
--retro-bg-rgb: 18 15 9;
|
|
503
|
-
--retro-surface-rgb: 33 27 18;
|
|
504
|
-
--retro-surface-strong-rgb: 47 40 27;
|
|
505
|
-
--retro-surface-soft-rgb: 25 20 13;
|
|
506
|
-
--retro-text-rgb: 248 239 223;
|
|
507
|
-
--retro-text-muted-rgb: 199 186 163;
|
|
508
|
-
--retro-border-rgb: 91 78 56;
|
|
509
|
-
--retro-primary-rgb: 217 184 120;
|
|
510
|
-
--retro-primary-hover-rgb: 240 211 154;
|
|
511
|
-
--retro-primary-text-rgb: 21 16 6;
|
|
512
|
-
--retro-secondary-rgb: 168 206 153;
|
|
513
|
-
--retro-secondary-hover-rgb: 200 233 187;
|
|
514
|
-
--retro-secondary-text-rgb: 9 20 7;
|
|
515
|
-
--retro-accent-rgb: 241 196 110;
|
|
516
|
-
--retro-success-rgb: 141 219 125;
|
|
517
|
-
--retro-warning-rgb: 255 209 102;
|
|
518
|
-
--retro-danger-rgb: 255 136 122;
|
|
519
|
-
--retro-link-rgb: 240 211 154;
|
|
520
|
-
--retro-focus-rgb: 241 196 110;
|
|
521
|
-
}
|
|
522
183
|
|
|
523
|
-
[data-ui="retrofuturism"][data-theme="desert-sage"][data-mode="contrast"] {
|
|
524
|
-
--retro-bg-rgb: 0 0 0;
|
|
525
|
-
--retro-surface-rgb: 15 11 3;
|
|
526
|
-
--retro-surface-strong-rgb: 26 18 5;
|
|
527
|
-
--retro-surface-soft-rgb: 0 0 0;
|
|
528
|
-
--retro-text-rgb: 255 255 255;
|
|
529
|
-
--retro-text-muted-rgb: 255 248 232;
|
|
530
|
-
--retro-border-rgb: 255 255 255;
|
|
531
|
-
--retro-primary-rgb: 255 209 102;
|
|
532
|
-
--retro-primary-hover-rgb: 255 255 255;
|
|
533
|
-
--retro-primary-text-rgb: 0 0 0;
|
|
534
|
-
--retro-secondary-rgb: 157 255 107;
|
|
535
|
-
--retro-secondary-hover-rgb: 255 255 255;
|
|
536
|
-
--retro-secondary-text-rgb: 0 0 0;
|
|
537
|
-
--retro-accent-rgb: 255 176 0;
|
|
538
|
-
--retro-success-rgb: 0 255 117;
|
|
539
|
-
--retro-warning-rgb: 255 225 0;
|
|
540
|
-
--retro-danger-rgb: 255 77 77;
|
|
541
|
-
--retro-link-rgb: 255 209 102;
|
|
542
|
-
--retro-focus-rgb: 255 255 255;
|
|
543
|
-
}
|
|
544
184
|
|
|
545
|
-
[data-ui="retrofuturism"][data-theme="rose-quartz"][data-mode="light"] {
|
|
546
|
-
--retro-bg-rgb: 255 242 245;
|
|
547
|
-
--retro-surface-rgb: 255 255 255;
|
|
548
|
-
--retro-surface-strong-rgb: 255 248 250;
|
|
549
|
-
--retro-surface-soft-rgb: 242 220 227;
|
|
550
|
-
--retro-text-rgb: 43 21 29;
|
|
551
|
-
--retro-text-muted-rgb: 118 90 99;
|
|
552
|
-
--retro-border-rgb: 223 184 198;
|
|
553
|
-
--retro-primary-rgb: 184 71 109;
|
|
554
|
-
--retro-primary-hover-rgb: 150 55 87;
|
|
555
|
-
--retro-primary-text-rgb: 255 255 255;
|
|
556
|
-
--retro-secondary-rgb: 122 85 126;
|
|
557
|
-
--retro-secondary-hover-rgb: 96 65 99;
|
|
558
|
-
--retro-secondary-text-rgb: 255 255 255;
|
|
559
|
-
--retro-accent-rgb: 223 125 157;
|
|
560
|
-
--retro-success-rgb: 49 122 92;
|
|
561
|
-
--retro-warning-rgb: 166 106 0;
|
|
562
|
-
--retro-danger-rgb: 189 63 85;
|
|
563
|
-
--retro-link-rgb: 150 55 87;
|
|
564
|
-
--retro-focus-rgb: 223 125 157;
|
|
565
|
-
}
|
|
566
185
|
|
|
567
|
-
[data-ui="retrofuturism"][data-theme="rose-quartz"][data-mode="dark"] {
|
|
568
|
-
--retro-bg-rgb: 22 7 12;
|
|
569
|
-
--retro-surface-rgb: 37 16 24;
|
|
570
|
-
--retro-surface-strong-rgb: 53 24 36;
|
|
571
|
-
--retro-surface-soft-rgb: 28 11 17;
|
|
572
|
-
--retro-text-rgb: 255 240 244;
|
|
573
|
-
--retro-text-muted-rgb: 210 174 185;
|
|
574
|
-
--retro-border-rgb: 101 55 71;
|
|
575
|
-
--retro-primary-rgb: 255 143 179;
|
|
576
|
-
--retro-primary-hover-rgb: 255 182 205;
|
|
577
|
-
--retro-primary-text-rgb: 24 6 13;
|
|
578
|
-
--retro-secondary-rgb: 217 160 223;
|
|
579
|
-
--retro-secondary-hover-rgb: 239 194 244;
|
|
580
|
-
--retro-secondary-text-rgb: 22 6 24;
|
|
581
|
-
--retro-accent-rgb: 255 173 197;
|
|
582
|
-
--retro-success-rgb: 119 219 169;
|
|
583
|
-
--retro-warning-rgb: 255 209 102;
|
|
584
|
-
--retro-danger-rgb: 255 120 144;
|
|
585
|
-
--retro-link-rgb: 255 182 205;
|
|
586
|
-
--retro-focus-rgb: 255 173 197;
|
|
587
|
-
}
|
|
588
186
|
|
|
589
|
-
[data-ui="retrofuturism"][data-theme="rose-quartz"][data-mode="contrast"] {
|
|
590
|
-
--retro-bg-rgb: 0 0 0;
|
|
591
|
-
--retro-surface-rgb: 18 0 6;
|
|
592
|
-
--retro-surface-strong-rgb: 32 0 13;
|
|
593
|
-
--retro-surface-soft-rgb: 0 0 0;
|
|
594
|
-
--retro-text-rgb: 255 255 255;
|
|
595
|
-
--retro-text-muted-rgb: 255 240 245;
|
|
596
|
-
--retro-border-rgb: 255 255 255;
|
|
597
|
-
--retro-primary-rgb: 255 79 147;
|
|
598
|
-
--retro-primary-hover-rgb: 255 255 255;
|
|
599
|
-
--retro-primary-text-rgb: 0 0 0;
|
|
600
|
-
--retro-secondary-rgb: 240 0 255;
|
|
601
|
-
--retro-secondary-hover-rgb: 255 255 255;
|
|
602
|
-
--retro-secondary-text-rgb: 0 0 0;
|
|
603
|
-
--retro-accent-rgb: 255 138 179;
|
|
604
|
-
--retro-success-rgb: 0 255 144;
|
|
605
|
-
--retro-warning-rgb: 255 225 0;
|
|
606
|
-
--retro-danger-rgb: 255 48 48;
|
|
607
|
-
--retro-link-rgb: 255 138 179;
|
|
608
|
-
--retro-focus-rgb: 255 255 255;
|
|
609
|
-
}
|
|
610
187
|
|
|
611
|
-
[data-ui="retrofuturism"][data-theme="cyber-lime"][data-mode="light"] {
|
|
612
|
-
--retro-bg-rgb: 244 250 237;
|
|
613
|
-
--retro-surface-rgb: 255 255 255;
|
|
614
|
-
--retro-surface-strong-rgb: 251 255 246;
|
|
615
|
-
--retro-surface-soft-rgb: 226 239 211;
|
|
616
|
-
--retro-text-rgb: 23 34 20;
|
|
617
|
-
--retro-text-muted-rgb: 89 105 82;
|
|
618
|
-
--retro-border-rgb: 198 216 179;
|
|
619
|
-
--retro-primary-rgb: 95 159 31;
|
|
620
|
-
--retro-primary-hover-rgb: 73 125 23;
|
|
621
|
-
--retro-primary-text-rgb: 255 255 255;
|
|
622
|
-
--retro-secondary-rgb: 20 127 134;
|
|
623
|
-
--retro-secondary-hover-rgb: 14 98 104;
|
|
624
|
-
--retro-secondary-text-rgb: 255 255 255;
|
|
625
|
-
--retro-accent-rgb: 164 215 46;
|
|
626
|
-
--retro-success-rgb: 47 125 84;
|
|
627
|
-
--retro-warning-rgb: 156 104 0;
|
|
628
|
-
--retro-danger-rgb: 179 65 65;
|
|
629
|
-
--retro-link-rgb: 73 125 23;
|
|
630
|
-
--retro-focus-rgb: 164 215 46;
|
|
631
|
-
}
|
|
632
188
|
|
|
633
|
-
[data-ui="retrofuturism"][data-theme="cyber-lime"][data-mode="dark"] {
|
|
634
|
-
--retro-bg-rgb: 5 11 5;
|
|
635
|
-
--retro-surface-rgb: 13 24 12;
|
|
636
|
-
--retro-surface-strong-rgb: 22 37 21;
|
|
637
|
-
--retro-surface-soft-rgb: 8 17 8;
|
|
638
|
-
--retro-text-rgb: 239 255 233;
|
|
639
|
-
--retro-text-muted-rgb: 180 199 173;
|
|
640
|
-
--retro-border-rgb: 57 82 54;
|
|
641
|
-
--retro-primary-rgb: 168 255 61;
|
|
642
|
-
--retro-primary-hover-rgb: 202 255 127;
|
|
643
|
-
--retro-primary-text-rgb: 6 16 5;
|
|
644
|
-
--retro-secondary-rgb: 61 235 242;
|
|
645
|
-
--retro-secondary-hover-rgb: 134 248 255;
|
|
646
|
-
--retro-secondary-text-rgb: 3 16 18;
|
|
647
|
-
--retro-accent-rgb: 198 255 77;
|
|
648
|
-
--retro-success-rgb: 111 240 168;
|
|
649
|
-
--retro-warning-rgb: 255 218 98;
|
|
650
|
-
--retro-danger-rgb: 255 119 119;
|
|
651
|
-
--retro-link-rgb: 202 255 127;
|
|
652
|
-
--retro-focus-rgb: 168 255 61;
|
|
653
|
-
}
|
|
654
189
|
|
|
655
|
-
[data-ui="retrofuturism"][data-theme="cyber-lime"][data-mode="contrast"] {
|
|
656
|
-
--retro-bg-rgb: 0 0 0;
|
|
657
|
-
--retro-surface-rgb: 5 11 0;
|
|
658
|
-
--retro-surface-strong-rgb: 11 22 0;
|
|
659
|
-
--retro-surface-soft-rgb: 0 0 0;
|
|
660
|
-
--retro-text-rgb: 255 255 255;
|
|
661
|
-
--retro-text-muted-rgb: 244 255 232;
|
|
662
|
-
--retro-border-rgb: 255 255 255;
|
|
663
|
-
--retro-primary-rgb: 170 255 0;
|
|
664
|
-
--retro-primary-hover-rgb: 255 255 255;
|
|
665
|
-
--retro-primary-text-rgb: 0 0 0;
|
|
666
|
-
--retro-secondary-rgb: 0 240 255;
|
|
667
|
-
--retro-secondary-hover-rgb: 255 255 255;
|
|
668
|
-
--retro-secondary-text-rgb: 0 0 0;
|
|
669
|
-
--retro-accent-rgb: 204 255 0;
|
|
670
|
-
--retro-success-rgb: 0 255 117;
|
|
671
|
-
--retro-warning-rgb: 255 225 0;
|
|
672
|
-
--retro-danger-rgb: 255 48 48;
|
|
673
|
-
--retro-link-rgb: 170 255 0;
|
|
674
|
-
--retro-focus-rgb: 255 255 255;
|
|
675
|
-
}
|
|
676
190
|
|
|
677
|
-
[data-ui="retrofuturism"][data-theme="arctic-indigo"][data-mode="light"] {
|
|
678
|
-
--retro-bg-rgb: 241 245 255;
|
|
679
|
-
--retro-surface-rgb: 255 255 255;
|
|
680
|
-
--retro-surface-strong-rgb: 248 251 255;
|
|
681
|
-
--retro-surface-soft-rgb: 223 231 246;
|
|
682
|
-
--retro-text-rgb: 20 27 46;
|
|
683
|
-
--retro-text-muted-rgb: 88 100 122;
|
|
684
|
-
--retro-border-rgb: 190 203 227;
|
|
685
|
-
--retro-primary-rgb: 64 94 184;
|
|
686
|
-
--retro-primary-hover-rgb: 49 72 148;
|
|
687
|
-
--retro-primary-text-rgb: 255 255 255;
|
|
688
|
-
--retro-secondary-rgb: 46 125 157;
|
|
689
|
-
--retro-secondary-hover-rgb: 35 97 122;
|
|
690
|
-
--retro-secondary-text-rgb: 255 255 255;
|
|
691
|
-
--retro-accent-rgb: 123 147 232;
|
|
692
|
-
--retro-success-rgb: 47 125 84;
|
|
693
|
-
--retro-warning-rgb: 166 106 0;
|
|
694
|
-
--retro-danger-rgb: 182 64 82;
|
|
695
|
-
--retro-link-rgb: 49 72 148;
|
|
696
|
-
--retro-focus-rgb: 123 147 232;
|
|
697
|
-
}
|
|
698
191
|
|
|
699
|
-
[data-ui="retrofuturism"][data-theme="arctic-indigo"][data-mode="dark"] {
|
|
700
|
-
--retro-bg-rgb: 6 10 22;
|
|
701
|
-
--retro-surface-rgb: 16 24 43;
|
|
702
|
-
--retro-surface-strong-rgb: 24 35 66;
|
|
703
|
-
--retro-surface-soft-rgb: 10 16 32;
|
|
704
|
-
--retro-text-rgb: 237 243 255;
|
|
705
|
-
--retro-text-muted-rgb: 178 191 217;
|
|
706
|
-
--retro-border-rgb: 58 75 120;
|
|
707
|
-
--retro-primary-rgb: 145 168 255;
|
|
708
|
-
--retro-primary-hover-rgb: 183 197 255;
|
|
709
|
-
--retro-primary-text-rgb: 5 8 22;
|
|
710
|
-
--retro-secondary-rgb: 118 216 243;
|
|
711
|
-
--retro-secondary-hover-rgb: 165 234 255;
|
|
712
|
-
--retro-secondary-text-rgb: 4 17 22;
|
|
713
|
-
--retro-accent-rgb: 194 206 255;
|
|
714
|
-
--retro-success-rgb: 114 219 166;
|
|
715
|
-
--retro-warning-rgb: 255 209 102;
|
|
716
|
-
--retro-danger-rgb: 255 125 145;
|
|
717
|
-
--retro-link-rgb: 183 197 255;
|
|
718
|
-
--retro-focus-rgb: 145 168 255;
|
|
719
|
-
}
|
|
720
192
|
|
|
721
|
-
[data-ui="retrofuturism"][data-theme="arctic-indigo"][data-mode="contrast"] {
|
|
722
|
-
--retro-bg-rgb: 0 0 0;
|
|
723
|
-
--retro-surface-rgb: 3 8 22;
|
|
724
|
-
--retro-surface-strong-rgb: 8 18 42;
|
|
725
|
-
--retro-surface-soft-rgb: 0 0 0;
|
|
726
|
-
--retro-text-rgb: 255 255 255;
|
|
727
|
-
--retro-text-muted-rgb: 238 244 255;
|
|
728
|
-
--retro-border-rgb: 255 255 255;
|
|
729
|
-
--retro-primary-rgb: 111 140 255;
|
|
730
|
-
--retro-primary-hover-rgb: 255 255 255;
|
|
731
|
-
--retro-primary-text-rgb: 0 0 0;
|
|
732
|
-
--retro-secondary-rgb: 0 217 255;
|
|
733
|
-
--retro-secondary-hover-rgb: 255 255 255;
|
|
734
|
-
--retro-secondary-text-rgb: 0 0 0;
|
|
735
|
-
--retro-accent-rgb: 184 196 255;
|
|
736
|
-
--retro-success-rgb: 0 255 144;
|
|
737
|
-
--retro-warning-rgb: 255 225 0;
|
|
738
|
-
--retro-danger-rgb: 255 63 95;
|
|
739
|
-
--retro-link-rgb: 159 178 255;
|
|
740
|
-
--retro-focus-rgb: 255 255 255;
|
|
741
|
-
}
|
|
742
193
|
|
|
743
194
|
/* =========================================================
|
|
744
195
|
Base Page + Layout
|
|
@@ -748,16 +199,19 @@
|
|
|
748
199
|
min-height: 100vh;
|
|
749
200
|
background: radial-gradient(circle at 20% 5%, rgb(var(--retro-accent-rgb) / .18), transparent 26rem), radial-gradient(circle at 85% 0%, rgb(var(--retro-secondary-rgb) / .12), transparent 24rem), var(--retro-bg);
|
|
750
201
|
color: var(--retro-text);
|
|
751
|
-
font-family: var(--retro-font-
|
|
202
|
+
font-family: var(--retro-font-body);
|
|
752
203
|
line-height: 1.5;
|
|
753
204
|
text-rendering: optimizeLegibility;
|
|
754
205
|
-webkit-font-smoothing: antialiased;
|
|
206
|
+
-moz-osx-font-smoothing: grayscale;
|
|
755
207
|
}
|
|
756
208
|
|
|
757
209
|
[data-ui="retrofuturism"] *,
|
|
758
210
|
[data-ui="retrofuturism"] *::before,
|
|
759
211
|
[data-ui="retrofuturism"] *::after { box-sizing: border-box; }
|
|
760
212
|
|
|
213
|
+
[data-ui="retrofuturism"][data-theme][data-mode] { background: var(--retro-theme-bg); background-size: var(--retro-theme-bg-size); }
|
|
214
|
+
|
|
761
215
|
.retro-page { min-height: 100vh; padding: clamp(1rem, 4vw, 3rem); }
|
|
762
216
|
.retro-container { width: min(100% - 2rem, 1200px); margin-inline: auto; }
|
|
763
217
|
.retro-section { display: grid; gap: var(--retro-space-5); padding: clamp(1rem, 3vw, 2rem); }
|
|
@@ -770,7 +224,7 @@
|
|
|
770
224
|
Typography
|
|
771
225
|
========================================================= */
|
|
772
226
|
|
|
773
|
-
.retro-title, .retro-heading, .retro-kicker, .retro-button, .retro-badge, .retro-nav-link { font-family: var(--retro-font-
|
|
227
|
+
.retro-title, .retro-heading, .retro-kicker, .retro-button, .retro-badge, .retro-nav-link { font-family: var(--retro-font-heading); }
|
|
774
228
|
.retro-title { margin: 0; color: var(--retro-text); font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1.02; letter-spacing: -0.055em; }
|
|
775
229
|
.retro-heading { margin: 0; color: var(--retro-text); font-size: clamp(1.2rem, 2.5vw, 2rem); line-height: 1.15; letter-spacing: -0.03em; }
|
|
776
230
|
.retro-kicker { margin: 0; color: var(--retro-primary); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
|
|
@@ -806,20 +260,27 @@
|
|
|
806
260
|
appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--retro-space-2);
|
|
807
261
|
min-height: 2.75rem; padding: .75rem 1.1rem; background: var(--retro-surface); color: var(--retro-text);
|
|
808
262
|
border: 1px solid var(--retro-border); border-radius: var(--retro-radius-md); box-shadow: 0 6px 18px rgb(0 0 0 / var(--retro-shadow-alpha));
|
|
809
|
-
font: inherit; font-weight: 800; line-height: 1; text-decoration: none; cursor: pointer; user-select: none;
|
|
263
|
+
font: inherit; font-weight: 800; line-height: 1; text-decoration: none; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none;
|
|
810
264
|
transition: color var(--retro-transition-fast), background var(--retro-transition-fast), border-color var(--retro-transition-fast), box-shadow var(--retro-transition-fast), transform var(--retro-transition-fast);
|
|
811
265
|
}
|
|
812
266
|
.retro-button:hover, .retro-icon-button:hover { transform: translateY(-1px); border-color: var(--retro-primary); }
|
|
813
267
|
.retro-button:active, .retro-icon-button:active, .retro-button[aria-pressed="true"], .retro-icon-button[aria-pressed="true"], .retro-button.is-active, .retro-icon-button.is-active { transform: translateY(1px); box-shadow: inset 0 3px 10px rgb(0 0 0 / .18); }
|
|
814
|
-
.retro-button-primary { background: var(--retro-primary); color: var(--retro-primary
|
|
268
|
+
.retro-button-primary { background: var(--retro-primary); color: var(--retro-on-primary); border-color: var(--retro-primary); }
|
|
815
269
|
.retro-button-primary:hover { background: var(--retro-primary-hover); border-color: var(--retro-primary-hover); }
|
|
816
|
-
.retro-button-secondary { background: var(--retro-secondary); color: var(--retro-secondary
|
|
270
|
+
.retro-button-secondary { background: var(--retro-secondary); color: var(--retro-on-secondary); border-color: var(--retro-secondary); }
|
|
817
271
|
.retro-button-secondary:hover { background: var(--retro-secondary-hover); border-color: var(--retro-secondary-hover); }
|
|
818
|
-
.retro-button-danger { background: var(--retro-danger); color:
|
|
272
|
+
.retro-button-danger { background: var(--retro-danger); color: var(--retro-on-danger); border-color: var(--retro-danger); }
|
|
819
273
|
.retro-button-ghost { background: transparent; color: var(--retro-text); box-shadow: none; }
|
|
820
274
|
.retro-icon-button { width: 2.75rem; padding: 0; border-radius: var(--retro-radius-pill); }
|
|
821
275
|
.retro-button:disabled, .retro-icon-button:disabled, .retro-disabled { opacity: .55; cursor: not-allowed; transform: none; }
|
|
822
276
|
|
|
277
|
+
/* Theme-responsive component defaults */
|
|
278
|
+
.retro-card, .retro-panel { background: var(--retro-card-bg); }
|
|
279
|
+
.retro-toolbar, .retro-table-wrap { background: var(--retro-control-bg); }
|
|
280
|
+
.retro-button:not(.retro-button-primary):not(.retro-button-secondary):not(.retro-button-danger):not(.retro-button-ghost), .retro-icon-button { background: var(--retro-control-bg); }
|
|
281
|
+
.retro-button, .retro-icon-button, .retro-badge, .retro-nav-link { font-family: var(--retro-font-control); }
|
|
282
|
+
|
|
283
|
+
|
|
823
284
|
/* =========================================================
|
|
824
285
|
Forms
|
|
825
286
|
========================================================= */
|
|
@@ -844,8 +305,8 @@
|
|
|
844
305
|
.retro-check-control { border-radius: var(--retro-radius-xs); }
|
|
845
306
|
.retro-radio-control { border-radius: 50%; }
|
|
846
307
|
.retro-check input:checked + .retro-check-control, .retro-radio input:checked + .retro-radio-control { background: var(--retro-primary); border-color: var(--retro-primary); box-shadow: var(--retro-focus-ring); }
|
|
847
|
-
.retro-check input:checked + .retro-check-control::after { content: "✓"; color: var(--retro-primary
|
|
848
|
-
.retro-radio input:checked + .retro-radio-control::after { content: ""; width: .55rem; height: .55rem; background: var(--retro-primary
|
|
308
|
+
.retro-check input:checked + .retro-check-control::after { content: "✓"; color: var(--retro-on-primary); font-size: .9rem; font-weight: 900; }
|
|
309
|
+
.retro-radio input:checked + .retro-radio-control::after { content: ""; width: .55rem; height: .55rem; background: var(--retro-on-primary); border-radius: 50%; }
|
|
849
310
|
|
|
850
311
|
/* Switch */
|
|
851
312
|
.retro-switch { display: inline-flex; align-items: center; gap: var(--retro-space-3); color: var(--retro-text); cursor: pointer; }
|
|
@@ -853,23 +314,33 @@
|
|
|
853
314
|
.retro-switch-track { position: relative; width: 3.5rem; height: 1.9rem; background: var(--retro-surface-soft); border: 1px solid var(--retro-border); border-radius: var(--retro-radius-pill); transition: background var(--retro-transition-fast), box-shadow var(--retro-transition-fast); }
|
|
854
315
|
.retro-switch-thumb { position: absolute; top: .22rem; left: .22rem; width: 1.34rem; height: 1.34rem; background: var(--retro-surface-strong); border: 1px solid var(--retro-border); border-radius: 50%; box-shadow: 0 4px 12px rgb(0 0 0 / var(--retro-shadow-alpha)); transition: left var(--retro-transition-fast), background var(--retro-transition-fast); }
|
|
855
316
|
.retro-switch input:checked + .retro-switch-track { background: var(--retro-primary); border-color: var(--retro-primary); }
|
|
856
|
-
.retro-switch input:checked + .retro-switch-track .retro-switch-thumb { left: calc(100% - 1.34rem - .22rem); background: var(--retro-primary
|
|
317
|
+
.retro-switch input:checked + .retro-switch-track .retro-switch-thumb { left: calc(100% - 1.34rem - .22rem); background: var(--retro-on-primary); }
|
|
857
318
|
|
|
858
319
|
/* =========================================================
|
|
859
320
|
Badges / Nav / Progress / Alerts / Tables
|
|
860
321
|
========================================================= */
|
|
861
322
|
|
|
862
323
|
.retro-badge { display: inline-flex; align-items: center; gap: var(--retro-space-1); min-height: 1.75rem; padding: .35rem .7rem; background: var(--retro-surface-soft); color: var(--retro-text); border: 1px solid var(--retro-border); border-radius: var(--retro-radius-pill); font-size: .8125rem; font-weight: 850; line-height: 1; }
|
|
863
|
-
.retro-badge-primary { background: var(--retro-primary); color: var(--retro-primary
|
|
864
|
-
.retro-badge-secondary { background: var(--retro-secondary); color: var(--retro-secondary
|
|
865
|
-
.retro-badge-success { background: var(--retro-success); color:
|
|
866
|
-
.retro-badge-warning { background: var(--retro-warning); color:
|
|
867
|
-
.retro-badge-danger { background: var(--retro-danger); color:
|
|
324
|
+
.retro-badge-primary { background: var(--retro-primary); color: var(--retro-on-primary); border-color: var(--retro-primary); }
|
|
325
|
+
.retro-badge-secondary { background: var(--retro-secondary); color: var(--retro-on-secondary); border-color: var(--retro-secondary); }
|
|
326
|
+
.retro-badge-success { background: var(--retro-success); color: var(--retro-on-success); border-color: var(--retro-success); }
|
|
327
|
+
.retro-badge-warning { background: var(--retro-warning); color: var(--retro-on-warning); border-color: var(--retro-warning); }
|
|
328
|
+
.retro-badge-danger { background: var(--retro-danger); color: var(--retro-on-danger); border-color: var(--retro-danger); }
|
|
868
329
|
|
|
869
330
|
.retro-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--retro-space-2); padding: var(--retro-space-2); background: var(--retro-surface); border: 1px solid var(--retro-border); border-radius: var(--retro-radius-xl); box-shadow: 0 10px 30px rgb(0 0 0 / var(--retro-shadow-alpha)); }
|
|
870
331
|
.retro-nav-link { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: .65rem 1rem; color: var(--retro-text-muted); border-radius: var(--retro-radius-pill); text-decoration: none; font-weight: 850; transition: color var(--retro-transition-fast), background var(--retro-transition-fast), box-shadow var(--retro-transition-fast); }
|
|
871
332
|
.retro-nav-link:hover { color: var(--retro-text); background: var(--retro-surface-soft); }
|
|
872
|
-
.retro-nav-link[aria-current="page"], .retro-nav-link.is-active { color: var(--retro-primary
|
|
333
|
+
.retro-nav-link[aria-current="page"], .retro-nav-link.is-active { color: var(--retro-on-primary); background: var(--retro-primary); }
|
|
334
|
+
|
|
335
|
+
/* Tooltips use compact contrast surfaces that stay readable across theme modes. */
|
|
336
|
+
.retro-tooltip, [data-ui="retrofuturism"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
|
|
337
|
+
display: inline-flex; align-items: center; gap: .45rem; max-inline-size: 16rem; padding: .6rem .82rem;
|
|
338
|
+
background: radial-gradient(circle at 20% 20%, rgb(var(--retro-accent-rgb) / .18), transparent 35%), var(--retro-surface-strong);
|
|
339
|
+
color: var(--retro-text); border: 1px solid rgb(var(--retro-primary-rgb) / .62); border-radius: var(--retro-radius-pill);
|
|
340
|
+
box-shadow: 0 0 1.2rem rgb(var(--retro-accent-rgb) / var(--retro-glow-alpha)); font-size: .82rem; font-weight: 900; line-height: 1.25;
|
|
341
|
+
text-transform: uppercase; letter-spacing: .06em;
|
|
342
|
+
}
|
|
343
|
+
.retro-tooltip-arrow { inline-size: .58rem; block-size: .58rem; flex: 0 0 auto; background: var(--retro-accent); border-radius: 50%; box-shadow: 0 0 .8rem rgb(var(--retro-accent-rgb) / var(--retro-glow-alpha)); }
|
|
873
344
|
|
|
874
345
|
.retro-progress { width: 100%; height: .9rem; overflow: hidden; background: var(--retro-surface-soft); border: 1px solid var(--retro-border); border-radius: var(--retro-radius-pill); }
|
|
875
346
|
.retro-progress-bar { height: 100%; width: var(--retro-progress-value, 50%); background: linear-gradient(90deg, var(--retro-primary), var(--retro-accent)); border-radius: inherit; }
|
|
@@ -893,10 +364,10 @@
|
|
|
893
364
|
========================================================= */
|
|
894
365
|
|
|
895
366
|
.retro-text-primary { color: var(--retro-primary); } .retro-text-secondary { color: var(--retro-secondary); } .retro-text-accent { color: var(--retro-accent); } .retro-text-success { color: var(--retro-success); } .retro-text-warning { color: var(--retro-warning); } .retro-text-danger { color: var(--retro-danger); }
|
|
896
|
-
.retro-bg-primary { background: var(--retro-primary); color: var(--retro-primary
|
|
367
|
+
.retro-bg-primary { background: var(--retro-primary); color: var(--retro-on-primary); } .retro-bg-secondary { background: var(--retro-secondary); color: var(--retro-on-secondary); }
|
|
897
368
|
.retro-border { border: 1px solid var(--retro-border); } .retro-rounded { border-radius: var(--retro-radius-md); } .retro-rounded-lg { border-radius: var(--retro-radius-lg); } .retro-rounded-xl { border-radius: var(--retro-radius-xl); } .retro-pill { border-radius: var(--retro-radius-pill); }
|
|
898
369
|
.retro-sr-only, .retro-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
|
|
899
|
-
.retro-skip-link { position: absolute; left: 1rem; top: 1rem; z-index: 9999; transform: translateY(-150%); padding: .75rem 1rem; background: var(--retro-primary); color: var(--retro-primary
|
|
370
|
+
.retro-skip-link { position: absolute; left: 1rem; top: 1rem; z-index: 9999; transform: translateY(-150%); padding: .75rem 1rem; background: var(--retro-primary); color: var(--retro-on-primary); border-radius: var(--retro-radius-md); font-weight: 900; }
|
|
900
371
|
.retro-skip-link:focus { transform: translateY(0); }
|
|
901
372
|
|
|
902
373
|
|
|
@@ -941,62 +412,35 @@
|
|
|
941
412
|
box-shadow: 0 0 0 1px rgb(var(--retro-primary-rgb) / .34), 0 0 22px rgb(var(--retro-primary-rgb) / .22);
|
|
942
413
|
}
|
|
943
414
|
|
|
415
|
+
/* Spinner geometry follows the retrofuturism preset's radar-style motion. */
|
|
416
|
+
.retro-spinner, .retro-loading-spinner, [data-ui="retrofuturism"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
|
|
417
|
+
display: inline-block;
|
|
418
|
+
inline-size: 2rem;
|
|
419
|
+
block-size: 2rem;
|
|
420
|
+
border: .12rem solid var(--retro-border);
|
|
421
|
+
border-block-start-color: var(--retro-spinner-stroke);
|
|
422
|
+
border-inline-end-color: var(--retro-spinner-accent);
|
|
423
|
+
border-radius: 50%;
|
|
424
|
+
background: radial-gradient(circle at center, var(--retro-accent) 0 .16rem, transparent .18rem), conic-gradient(from -45deg, var(--retro-spinner-stroke), transparent 42%, var(--retro-spinner-accent), var(--retro-spinner-track));
|
|
425
|
+
box-shadow: 0 0 0 .2rem rgb(var(--retro-primary-rgb) / .16), 0 0 1.35rem rgb(var(--retro-accent-rgb) / var(--retro-glow-alpha));
|
|
426
|
+
vertical-align: -.2em;
|
|
427
|
+
animation: retro-spin 1.05s linear infinite;
|
|
428
|
+
}
|
|
429
|
+
.retro-spinner-sm { inline-size: 1rem; block-size: 1rem; border-width: .08rem; }
|
|
430
|
+
.retro-spinner-lg { inline-size: 3rem; block-size: 3rem; border-width: .18rem; }
|
|
431
|
+
.retro-button[aria-busy="true"], .retro-icon-button[aria-busy="true"], [data-ui="retrofuturism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) { gap: .55rem; cursor: progress; }
|
|
432
|
+
.retro-button[aria-busy="true"]::after, .retro-icon-button[aria-busy="true"]::after, [data-ui="retrofuturism"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
|
|
433
|
+
content: "";
|
|
434
|
+
display: inline-block;
|
|
435
|
+
inline-size: 1em;
|
|
436
|
+
block-size: 1em;
|
|
437
|
+
border: .16em solid rgb(var(--retro-primary-text-rgb) / .42);
|
|
438
|
+
border-block-start-color: currentColor;
|
|
439
|
+
border-radius: 50%;
|
|
440
|
+
animation: retro-spin .75s linear infinite;
|
|
441
|
+
}
|
|
442
|
+
@keyframes retro-spin { to { transform: rotate(360deg); } }
|
|
944
443
|
|
|
945
|
-
/* =========================================================
|
|
946
|
-
Native HTML Coverage + CSS Accessibility Layer
|
|
947
|
-
========================================================= */
|
|
948
|
-
|
|
949
|
-
[data-ui="retrofuturism"] :where(h1, h2, h3, h4, h5, h6) { color: var(--retro-text); font-family: var(--retro-font-display); line-height: 1.15; margin: 0 0 .65em; text-wrap: balance; }
|
|
950
|
-
[data-ui="retrofuturism"] :where(h1) { font-size: clamp(2rem, 5vw, 3.5rem); }
|
|
951
|
-
[data-ui="retrofuturism"] :where(h2) { font-size: clamp(1.55rem, 3vw, 2.35rem); }
|
|
952
|
-
[data-ui="retrofuturism"] :where(h3) { font-size: clamp(1.25rem, 2vw, 1.65rem); }
|
|
953
|
-
[data-ui="retrofuturism"] :where(p) { margin: 0 0 1rem; color: var(--retro-text-muted); line-height: 1.7; }
|
|
954
|
-
[data-ui="retrofuturism"] :where(a) { color: var(--retro-link); text-decoration-thickness: .08em; text-underline-offset: .18em; }
|
|
955
|
-
[data-ui="retrofuturism"] :where(a:hover) { color: var(--retro-primary-hover); }
|
|
956
|
-
[data-ui="retrofuturism"] :where(ul, ol) { margin: 0 0 1rem; padding-left: 1.35rem; color: var(--retro-text-muted); }
|
|
957
|
-
[data-ui="retrofuturism"] :where(li) { margin-block: .25rem; }
|
|
958
|
-
[data-ui="retrofuturism"] :where(blockquote) { margin: 1.25rem 0; padding: 1rem 1.25rem; color: var(--retro-text); background: var(--retro-surface-soft); border-left: .35rem solid var(--retro-primary); border-radius: var(--retro-radius-md); }
|
|
959
|
-
[data-ui="retrofuturism"] :where(code, kbd, samp) { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: .92em; background: var(--retro-surface-soft); color: var(--retro-text); border: 1px solid rgb(var(--retro-border-rgb) / .45); border-radius: var(--retro-radius-xs); padding: .15em .35em; }
|
|
960
|
-
[data-ui="retrofuturism"] :where(pre) { overflow: auto; margin: 1rem 0; padding: 1rem; background: var(--retro-surface-soft); color: var(--retro-text); border: 1px solid var(--retro-border); border-radius: var(--retro-radius-md); }
|
|
961
|
-
[data-ui="retrofuturism"] :where(pre code) { display: block; padding: 0; border: 0; background: transparent; }
|
|
962
|
-
[data-ui="retrofuturism"] :where(hr) { height: 1px; border: 0; margin: 2rem 0; background: var(--retro-border); }
|
|
963
|
-
[data-ui="retrofuturism"] :where(mark) { background: rgb(var(--retro-warning-rgb) / .32); color: var(--retro-text); border-radius: .2em; padding-inline: .15em; }
|
|
964
|
-
[data-ui="retrofuturism"] :where(small) { color: var(--retro-text-muted); }
|
|
965
|
-
[data-ui="retrofuturism"] :where(abbr[title]) { text-decoration: underline dotted var(--retro-primary); text-underline-offset: .18em; cursor: help; }
|
|
966
|
-
[data-ui="retrofuturism"] :where(img, video, canvas, svg, iframe) { max-width: 100%; height: auto; }
|
|
967
|
-
[data-ui="retrofuturism"] :where(figure) { margin: 1.25rem 0; }
|
|
968
|
-
[data-ui="retrofuturism"] :where(figcaption) { margin-top: .5rem; color: var(--retro-text-muted); font-size: .9rem; }
|
|
969
|
-
[data-ui="retrofuturism"] :where(fieldset) { min-inline-size: 0; margin: 0 0 1rem; padding: 1rem; border: 1px solid var(--retro-border); border-radius: var(--retro-radius-md); }
|
|
970
|
-
[data-ui="retrofuturism"] :where(legend) { padding-inline: .35rem; color: var(--retro-text); font-weight: 900; }
|
|
971
|
-
[data-ui="retrofuturism"] :where(label) { color: var(--retro-text); font-weight: 750; }
|
|
972
|
-
[data-ui="retrofuturism"] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select) { width: 100%; min-height: 2.75rem; padding: .72rem .95rem; background: var(--retro-surface-soft); color: var(--retro-text); border: 1px solid var(--retro-border); border-radius: var(--retro-radius-md); font: inherit; }
|
|
973
|
-
[data-ui="retrofuturism"] :where(textarea) { resize: vertical; min-height: 7rem; }
|
|
974
|
-
[data-ui="retrofuturism"] :where(input, textarea, select, button) { font: inherit; }
|
|
975
|
-
[data-ui="retrofuturism"] :where(button, input[type="button"], input[type="submit"], input[type="reset"]) { min-height: 2.75rem; padding: .7rem 1rem; background: var(--retro-primary); color: var(--retro-primary-text); border: 1px solid var(--retro-primary); border-radius: var(--retro-radius-md); font-weight: 850; cursor: pointer; }
|
|
976
|
-
[data-ui="retrofuturism"] :where(button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover) { background: var(--retro-primary-hover); border-color: var(--retro-primary-hover); }
|
|
977
|
-
[data-ui="retrofuturism"] :where(input[type="checkbox"], input[type="radio"]) { inline-size: 1.1rem; block-size: 1.1rem; accent-color: var(--retro-primary); }
|
|
978
|
-
[data-ui="retrofuturism"] :where(input[type="range"]) { width: 100%; accent-color: var(--retro-primary); }
|
|
979
|
-
[data-ui="retrofuturism"] :where(input[type="color"]) { inline-size: 3rem; block-size: 2.4rem; padding: .2rem; background: var(--retro-surface-soft); border: 1px solid var(--retro-border); border-radius: var(--retro-radius-sm); }
|
|
980
|
-
[data-ui="retrofuturism"] :where(input[type="file"]) { color: var(--retro-text-muted); }
|
|
981
|
-
[data-ui="retrofuturism"] :where(input[type="file"]::file-selector-button) { margin-inline-end: .75rem; padding: .55rem .8rem; border: 1px solid var(--retro-primary); border-radius: var(--retro-radius-sm); background: var(--retro-primary); color: var(--retro-primary-text); font-weight: 800; cursor: pointer; }
|
|
982
|
-
[data-ui="retrofuturism"] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) { opacity: .55; cursor: not-allowed; }
|
|
983
|
-
[data-ui="retrofuturism"] :where(input:invalid, textarea:invalid, select:invalid) { border-color: var(--retro-danger); }
|
|
984
|
-
[data-ui="retrofuturism"] :where(table) { width: 100%; border-collapse: collapse; margin: 1rem 0; background: var(--retro-surface); border: 1px solid var(--retro-border); border-radius: var(--retro-radius-md); overflow: hidden; }
|
|
985
|
-
[data-ui="retrofuturism"] :where(caption) { caption-side: bottom; padding: .75rem; color: var(--retro-text-muted); font-size: .9rem; }
|
|
986
|
-
[data-ui="retrofuturism"] :where(th, td) { padding: .8rem .9rem; text-align: left; border-bottom: 1px solid var(--retro-border); }
|
|
987
|
-
[data-ui="retrofuturism"] :where(th) { color: var(--retro-text); background: rgb(var(--retro-primary-rgb) / .08); }
|
|
988
|
-
[data-ui="retrofuturism"] :where(td) { color: var(--retro-text-muted); }
|
|
989
|
-
[data-ui="retrofuturism"] :where(details) { margin: 1rem 0; padding: .9rem 1rem; background: var(--retro-surface); border: 1px solid var(--retro-border); border-radius: var(--retro-radius-md); }
|
|
990
|
-
[data-ui="retrofuturism"] :where(summary) { color: var(--retro-text); font-weight: 900; cursor: pointer; }
|
|
991
|
-
[data-ui="retrofuturism"] :where(dialog) { max-width: min(92vw, 42rem); padding: 0; background: var(--retro-surface-strong); color: var(--retro-text); border: 1px solid var(--retro-border); border-radius: var(--retro-radius-lg); box-shadow: 0 30px 80px rgb(0 0 0 / .42); }
|
|
992
|
-
[data-ui="retrofuturism"] :where(dialog::backdrop) { background: rgb(0 0 0 / .62); }
|
|
993
|
-
[data-ui="retrofuturism"] :where(progress, meter) { width: 100%; min-height: .9rem; accent-color: var(--retro-primary); }
|
|
994
|
-
[data-ui="retrofuturism"] :where(:focus-visible) { outline: 3px solid var(--retro-focus); outline-offset: 3px; box-shadow: var(--retro-focus-ring); }
|
|
995
|
-
[data-ui="retrofuturism"] :where(:target) { scroll-margin-top: 6rem; outline: 3px solid var(--retro-focus); outline-offset: .35rem; }
|
|
996
|
-
[data-ui="retrofuturism"] :where([aria-current="page"]) { font-weight: 900; }
|
|
997
|
-
[data-ui="retrofuturism"] :where([aria-busy="true"]) { cursor: progress; }
|
|
998
|
-
[data-ui="retrofuturism"] :where([hidden]) { display: none !important; }
|
|
999
|
-
[data-ui="retrofuturism"] ::selection { background: var(--retro-primary); color: var(--retro-primary-text); }
|
|
1000
444
|
|
|
1001
445
|
@media (prefers-reduced-motion: reduce) {
|
|
1002
446
|
[data-ui="retrofuturism"] *, [data-ui="retrofuturism"] *::before, [data-ui="retrofuturism"] *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
|
|
@@ -1013,3 +457,4 @@
|
|
|
1013
457
|
[data-ui="retrofuturism"] * { box-shadow: none !important; text-shadow: none !important; }
|
|
1014
458
|
[data-ui="retrofuturism"] a { color: #000 !important; text-decoration: underline; }
|
|
1015
459
|
}
|
|
460
|
+
}
|