this repo has no description
lewis.moe
1@import "./tokens.css";
2
3@property --accent {
4 syntax: "<color>";
5 inherits: true;
6 initial-value: #1a1d1d;
7}
8
9@property --secondary {
10 syntax: "<color>";
11 inherits: true;
12 initial-value: #1a1d1d;
13}
14
15*,
16*::before,
17*::after {
18 box-sizing: border-box;
19}
20
21body {
22 margin: 0;
23 font-family:
24 "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
25 font-size: var(--text-base);
26 line-height: var(--leading-normal);
27 color: var(--text-primary);
28 background: var(--bg-primary);
29 -webkit-font-smoothing: antialiased;
30 -moz-osx-font-smoothing: grayscale;
31 transition: background-color 0.3s ease;
32}
33
34h1, h2, h3, h4, h5, h6 {
35 margin: 0;
36 line-height: var(--leading-tight);
37}
38
39h1 {
40 font-size: var(--text-2xl);
41}
42h2 {
43 font-size: var(--text-xl);
44}
45h3 {
46 font-size: var(--text-lg);
47}
48h4 {
49 font-size: var(--text-base);
50}
51
52p {
53 margin: 0;
54}
55
56a {
57 color: var(--secondary);
58 text-decoration: none;
59 transition: color 0.3s ease;
60}
61
62a:hover {
63 color: var(--secondary-hover);
64 text-decoration: none;
65}
66
67::selection {
68 background: var(--secondary-muted);
69}
70
71input,
72select,
73textarea {
74 font-family: inherit;
75 font-size: var(--text-base);
76 line-height: var(--leading-normal);
77 padding: var(--space-4);
78 border: 1px solid var(--border-dark);
79 border-radius: var(--radius-md);
80 background: var(--bg-input);
81 color: var(--text-primary);
82 transition:
83 border-color var(--transition-normal),
84 box-shadow var(--transition-normal);
85 width: 100%;
86}
87
88input:focus,
89select:focus,
90textarea:focus {
91 outline: none;
92 border-color: var(--accent);
93 box-shadow: var(--shadow-focus);
94}
95
96input:disabled,
97select:disabled,
98textarea:disabled {
99 background: var(--bg-input-disabled);
100 color: var(--text-muted);
101 cursor: not-allowed;
102}
103
104input::placeholder,
105textarea::placeholder {
106 color: var(--text-muted);
107}
108
109select {
110 cursor: pointer;
111 appearance: none;
112 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
113 background-repeat: no-repeat;
114 background-position: right var(--space-4) center;
115 padding-right: var(--space-7);
116}
117
118button {
119 font-family: inherit;
120 font-size: var(--text-base);
121 font-weight: var(--font-medium);
122 line-height: var(--leading-normal);
123 padding: var(--space-4) var(--space-6);
124 border: none;
125 border-radius: var(--radius-md);
126 cursor: pointer;
127 transition:
128 background var(--transition-normal),
129 border-color var(--transition-normal),
130 opacity var(--transition-normal);
131 background: var(--accent);
132 color: var(--text-inverse);
133}
134
135button:hover:not(:disabled) {
136 background: var(--accent-hover);
137}
138
139button:disabled {
140 opacity: 0.6;
141 cursor: not-allowed;
142}
143
144button.secondary {
145 background: transparent;
146 color: var(--accent);
147 border: 1px solid var(--accent);
148}
149
150button.secondary:hover:not(:disabled) {
151 background: var(--accent);
152 color: var(--text-inverse);
153}
154
155button.tertiary {
156 background: transparent;
157 color: var(--text-secondary);
158 padding: var(--space-3) var(--space-4);
159}
160
161button.tertiary:hover:not(:disabled) {
162 color: var(--text-primary);
163 background: var(--bg-tertiary);
164}
165
166button.danger {
167 background: var(--error-text);
168}
169
170button.danger:hover:not(:disabled) {
171 background: #900;
172}
173
174button.ghost {
175 background: transparent;
176 color: var(--text-secondary);
177 border: 1px solid var(--border-dark);
178}
179
180button.ghost:hover:not(:disabled) {
181 background: var(--bg-secondary);
182 color: var(--text-primary);
183}
184
185label {
186 display: block;
187 font-size: var(--text-sm);
188 font-weight: var(--font-medium);
189 color: var(--text-primary);
190 margin-bottom: var(--space-2);
191}
192
193fieldset {
194 border: none;
195 border-left: 3px solid var(--accent);
196 border-radius: var(--radius-lg);
197 padding: var(--space-5);
198 padding-left: var(--space-6);
199 margin: 0;
200 background: var(--bg-secondary);
201}
202
203fieldset legend {
204 font-size: var(--text-xs);
205 font-weight: var(--font-semibold);
206 text-transform: uppercase;
207 letter-spacing: 0.05em;
208 padding: 0;
209 margin-left: calc(-1 * var(--space-1));
210 margin-bottom: var(--space-3);
211 color: var(--text-secondary);
212 float: left;
213 width: 100%;
214}
215
216fieldset legend + * {
217 clear: both;
218}
219
220code {
221 font-family: ui-monospace, "SF Mono", Menlo, Monaco, monospace;
222 font-size: 0.9em;
223 background: var(--bg-tertiary);
224 padding: var(--space-1) var(--space-2);
225 border-radius: var(--radius-sm);
226}
227
228pre {
229 font-family: ui-monospace, "SF Mono", Menlo, Monaco, monospace;
230 font-size: var(--text-sm);
231 background: var(--bg-tertiary);
232 padding: var(--space-4);
233 border-radius: var(--radius-md);
234 overflow-x: auto;
235 margin: 0;
236}
237
238hr {
239 border: none;
240 border-top: 1px solid var(--border-color);
241 margin: var(--space-6) 0;
242}
243
244.field {
245 display: flex;
246 flex-direction: column;
247 gap: var(--space-2);
248}
249
250.field + .field {
251 margin-top: var(--space-5);
252}
253
254.form-row .field + .field {
255 margin-top: 0;
256}
257
258.hint {
259 font-size: var(--text-xs);
260 color: var(--text-secondary);
261 margin-top: var(--space-1);
262}
263
264.hint.warning {
265 color: var(--warning-text);
266}
267
268.hint.error {
269 color: var(--error-text);
270}
271
272.message {
273 padding: var(--space-4);
274 border-radius: var(--radius-md);
275 font-size: var(--text-sm);
276}
277
278.message.success {
279 background: var(--success-bg);
280 border: 1px solid var(--success-border);
281 color: var(--success-text);
282}
283
284.message.error {
285 background: var(--error-bg);
286 border: 1px solid var(--error-border);
287 color: var(--error-text);
288}
289
290.message.warning {
291 background: var(--warning-bg);
292 border: 1px solid var(--warning-border);
293 color: var(--warning-text);
294}
295
296.badge {
297 display: inline-block;
298 padding: var(--space-1) var(--space-3);
299 border-radius: var(--radius-md);
300 font-size: var(--text-xs);
301 font-weight: var(--font-medium);
302}
303
304.badge.success {
305 background: var(--success-bg);
306 color: var(--success-text);
307}
308
309.badge.warning {
310 background: var(--warning-bg);
311 color: var(--warning-text);
312}
313
314.badge.error {
315 background: var(--error-bg);
316 color: var(--error-text);
317}
318
319.badge.accent {
320 background: var(--accent);
321 color: var(--text-inverse);
322}
323
324.card {
325 background: var(--bg-card);
326 border: 1px solid var(--border-color);
327 border-radius: var(--radius-xl);
328 padding: var(--space-6);
329}
330
331.section {
332 background: var(--bg-secondary);
333 border-radius: var(--radius-xl);
334 padding: var(--space-6);
335}
336
337.section + .section {
338 margin-top: var(--space-6);
339}
340
341.page {
342 max-width: var(--width-lg);
343 margin: 0 auto;
344 padding: var(--space-7);
345}
346
347.page-sm {
348 max-width: var(--width-md);
349 margin: 0 auto;
350 padding: var(--space-7);
351}
352
353.page-lg {
354 max-width: var(--width-xl);
355 margin: 0 auto;
356 padding: var(--space-7);
357}
358
359.back-link {
360 display: inline-block;
361 color: var(--text-secondary);
362 font-size: var(--text-sm);
363 margin-bottom: var(--space-3);
364}
365
366.back-link:hover {
367 color: var(--accent);
368 text-decoration: none;
369}
370
371.text-muted {
372 color: var(--text-muted);
373}
374
375.text-secondary {
376 color: var(--text-secondary);
377}
378
379.text-sm {
380 font-size: var(--text-sm);
381}
382
383.text-xs {
384 font-size: var(--text-xs);
385}
386
387.text-center {
388 text-align: center;
389}
390
391.mono {
392 font-family: ui-monospace, "SF Mono", Menlo, Monaco, monospace;
393}
394
395.mt-4 {
396 margin-top: var(--space-4);
397}
398.mt-5 {
399 margin-top: var(--space-5);
400}
401.mt-6 {
402 margin-top: var(--space-6);
403}
404.mb-4 {
405 margin-bottom: var(--space-4);
406}
407.mb-5 {
408 margin-bottom: var(--space-5);
409}
410.mb-6 {
411 margin-bottom: var(--space-6);
412}
413
414.split-layout {
415 display: grid;
416 grid-template-columns: 1fr;
417 gap: var(--space-6);
418}
419
420@media (min-width: 800px) {
421 .split-layout {
422 grid-template-columns: 1fr 1fr;
423 }
424 .split-layout.sidebar-right {
425 grid-template-columns: 1.5fr 1fr;
426 }
427 .split-layout.sidebar-left {
428 grid-template-columns: 1fr 1.5fr;
429 }
430}
431
432.form-row {
433 display: grid;
434 grid-template-columns: 1fr;
435 gap: var(--space-4);
436}
437
438@media (min-width: 600px) {
439 .form-row {
440 grid-template-columns: repeat(2, 1fr);
441 }
442 .form-row.thirds {
443 grid-template-columns: repeat(3, 1fr);
444 }
445}
446
447.full-width {
448 grid-column: 1 / -1;
449}
450
451.info-panel {
452 background: var(--bg-secondary);
453 border-radius: var(--radius-xl);
454 padding: var(--space-6);
455 height: fit-content;
456}
457
458.info-panel h3 {
459 margin: 0 0 var(--space-3) 0;
460 font-size: var(--text-base);
461 font-weight: var(--font-semibold);
462}
463
464.info-panel p {
465 margin: 0 0 var(--space-4) 0;
466 font-size: var(--text-sm);
467 color: var(--text-secondary);
468}
469
470.info-panel p:last-child {
471 margin-bottom: 0;
472}