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