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.danger-outline {
175 background: transparent;
176 border: 1px solid var(--error-border);
177 color: var(--error-text);
178}
179
180button.danger-outline:hover:not(:disabled) {
181 background: var(--error-bg);
182 border-color: var(--error-text);
183}
184
185button.ghost {
186 background: transparent;
187 color: var(--text-secondary);
188 border: 1px solid var(--border-dark);
189}
190
191button.ghost:hover:not(:disabled) {
192 background: var(--bg-secondary);
193 color: var(--text-primary);
194}
195
196label {
197 display: block;
198 font-size: var(--text-sm);
199 font-weight: var(--font-medium);
200 color: var(--text-primary);
201 margin-bottom: var(--space-2);
202}
203
204fieldset {
205 border: none;
206 border-left: 3px solid var(--accent);
207 border-radius: var(--radius-lg);
208 padding: var(--space-5);
209 padding-left: var(--space-6);
210 margin: 0;
211 background: var(--bg-secondary);
212}
213
214fieldset legend {
215 font-size: var(--text-xs);
216 font-weight: var(--font-semibold);
217 text-transform: uppercase;
218 letter-spacing: 0.05em;
219 padding: 0;
220 margin-left: calc(-1 * var(--space-1));
221 margin-bottom: var(--space-3);
222 color: var(--text-secondary);
223 float: left;
224 width: 100%;
225}
226
227fieldset legend + * {
228 clear: both;
229}
230
231code {
232 font-family: ui-monospace, "SF Mono", Menlo, Monaco, monospace;
233 font-size: 0.9em;
234 background: var(--bg-tertiary);
235 padding: var(--space-1) var(--space-2);
236 border-radius: var(--radius-sm);
237}
238
239pre {
240 font-family: ui-monospace, "SF Mono", Menlo, Monaco, monospace;
241 font-size: var(--text-sm);
242 background: var(--bg-tertiary);
243 padding: var(--space-4);
244 border-radius: var(--radius-md);
245 overflow-x: auto;
246 margin: 0;
247}
248
249hr {
250 border: none;
251 border-top: 1px solid var(--border-color);
252 margin: var(--space-6) 0;
253}
254
255.field {
256 display: flex;
257 flex-direction: column;
258 gap: var(--space-2);
259}
260
261.field + .field {
262 margin-top: var(--space-5);
263}
264
265.form-row .field + .field {
266 margin-top: 0;
267}
268
269.hint {
270 font-size: var(--text-xs);
271 color: var(--text-secondary);
272 margin-top: var(--space-1);
273}
274
275.hint.warning {
276 color: var(--warning-text);
277}
278
279.hint.error {
280 color: var(--error-text);
281}
282
283.message {
284 padding: var(--space-4);
285 border-radius: var(--radius-md);
286 font-size: var(--text-sm);
287}
288
289.message.success {
290 background: var(--success-bg);
291 border: 1px solid var(--success-border);
292 color: var(--success-text);
293}
294
295.message.error {
296 background: var(--error-bg);
297 border: 1px solid var(--error-border);
298 color: var(--error-text);
299}
300
301.message.warning {
302 background: var(--warning-bg);
303 border: 1px solid var(--warning-border);
304 color: var(--warning-text);
305}
306
307.badge {
308 display: inline-block;
309 padding: var(--space-1) var(--space-3);
310 border-radius: var(--radius-md);
311 font-size: var(--text-xs);
312 font-weight: var(--font-medium);
313}
314
315.badge.success {
316 background: var(--success-bg);
317 color: var(--success-text);
318}
319
320.badge.warning {
321 background: var(--warning-bg);
322 color: var(--warning-text);
323}
324
325.badge.error {
326 background: var(--error-bg);
327 color: var(--error-text);
328}
329
330.badge.accent {
331 background: var(--accent);
332 color: var(--text-inverse);
333}
334
335.card {
336 background: var(--bg-card);
337 border: 1px solid var(--border-color);
338 border-radius: var(--radius-xl);
339 padding: var(--space-6);
340}
341
342.section {
343 background: var(--bg-secondary);
344 border-radius: var(--radius-xl);
345 padding: var(--space-6);
346}
347
348.section + .section {
349 margin-top: var(--space-6);
350}
351
352.page {
353 max-width: var(--width-lg);
354 margin: 0 auto;
355 padding: var(--space-7);
356}
357
358.page-sm {
359 max-width: var(--width-md);
360 margin: 0 auto;
361 padding: var(--space-7);
362}
363
364.page-lg {
365 max-width: var(--width-xl);
366 margin: 0 auto;
367 padding: var(--space-7);
368}
369
370.back-link {
371 display: inline-block;
372 color: var(--text-secondary);
373 font-size: var(--text-sm);
374 margin-bottom: var(--space-3);
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: ui-monospace, "SF Mono", Menlo, Monaco, monospace;
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}