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