this repo has no description
lewis.moe
1@import './tokens.css';
2
3*,
4*::before,
5*::after {
6 box-sizing: border-box;
7}
8
9body {
10 margin: 0;
11 font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Monaco, monospace;
12 font-size: var(--text-base);
13 line-height: var(--leading-normal);
14 color: var(--text-primary);
15 background: var(--bg-primary);
16 -webkit-font-smoothing: antialiased;
17 -moz-osx-font-smoothing: grayscale;
18}
19
20h1, h2, h3, h4, h5, h6 {
21 margin: 0;
22 line-height: var(--leading-tight);
23}
24
25h1 { font-size: var(--text-2xl); }
26h2 { font-size: var(--text-xl); }
27h3 { font-size: var(--text-lg); }
28h4 { font-size: var(--text-base); }
29
30p {
31 margin: 0;
32}
33
34a {
35 color: var(--secondary);
36 text-decoration: none;
37}
38
39a:hover {
40 color: var(--secondary-hover);
41 text-decoration: none;
42}
43
44::selection {
45 background: var(--secondary-muted);
46}
47
48input,
49select,
50textarea {
51 font-family: inherit;
52 font-size: var(--text-base);
53 line-height: var(--leading-normal);
54 padding: var(--space-4);
55 border: 1px solid var(--border-dark);
56 border-radius: var(--radius-md);
57 background: var(--bg-input);
58 color: var(--text-primary);
59 transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
60 width: 100%;
61}
62
63input:focus,
64select:focus,
65textarea:focus {
66 outline: none;
67 border-color: var(--accent);
68 box-shadow: var(--shadow-focus);
69}
70
71input:disabled,
72select:disabled,
73textarea:disabled {
74 background: var(--bg-input-disabled);
75 color: var(--text-muted);
76 cursor: not-allowed;
77}
78
79input::placeholder,
80textarea::placeholder {
81 color: var(--text-muted);
82}
83
84select {
85 cursor: pointer;
86 appearance: none;
87 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");
88 background-repeat: no-repeat;
89 background-position: right var(--space-4) center;
90 padding-right: var(--space-7);
91}
92
93button {
94 font-family: inherit;
95 font-size: var(--text-base);
96 font-weight: var(--font-medium);
97 line-height: var(--leading-normal);
98 padding: var(--space-4) var(--space-6);
99 border: none;
100 border-radius: var(--radius-md);
101 cursor: pointer;
102 transition: background var(--transition-normal), border-color var(--transition-normal), opacity var(--transition-normal);
103 background: var(--accent);
104 color: var(--text-inverse);
105}
106
107button:hover:not(:disabled) {
108 background: var(--accent-hover);
109}
110
111button:disabled {
112 opacity: 0.6;
113 cursor: not-allowed;
114}
115
116button.secondary {
117 background: transparent;
118 color: var(--accent);
119 border: 1px solid var(--accent);
120}
121
122button.secondary:hover:not(:disabled) {
123 background: var(--accent);
124 color: var(--text-inverse);
125}
126
127button.tertiary {
128 background: transparent;
129 color: var(--text-secondary);
130 padding: var(--space-3) var(--space-4);
131}
132
133button.tertiary:hover:not(:disabled) {
134 color: var(--text-primary);
135 background: var(--bg-tertiary);
136}
137
138button.danger {
139 background: var(--error-text);
140}
141
142button.danger:hover:not(:disabled) {
143 background: #900;
144}
145
146button.ghost {
147 background: transparent;
148 color: var(--text-secondary);
149 border: 1px solid var(--border-dark);
150}
151
152button.ghost:hover:not(:disabled) {
153 background: var(--bg-secondary);
154 color: var(--text-primary);
155}
156
157label {
158 display: block;
159 font-size: var(--text-sm);
160 font-weight: var(--font-medium);
161 color: var(--text-primary);
162 margin-bottom: var(--space-2);
163}
164
165fieldset {
166 border: 1px solid var(--border-dark);
167 border-radius: var(--radius-lg);
168 padding: var(--space-5);
169 margin: 0;
170}
171
172fieldset legend {
173 font-weight: var(--font-semibold);
174 padding: 0 var(--space-3);
175 color: var(--text-primary);
176}
177
178code {
179 font-family: inherit;
180 font-size: 0.9em;
181 background: var(--bg-tertiary);
182 padding: var(--space-1) var(--space-2);
183 border-radius: var(--radius-sm);
184}
185
186pre {
187 font-family: inherit;
188 font-size: var(--text-sm);
189 background: var(--bg-tertiary);
190 padding: var(--space-4);
191 border-radius: var(--radius-md);
192 overflow-x: auto;
193 margin: 0;
194}
195
196hr {
197 border: none;
198 border-top: 1px solid var(--border-color);
199 margin: var(--space-6) 0;
200}
201
202.field {
203 display: flex;
204 flex-direction: column;
205 gap: var(--space-2);
206}
207
208.field + .field {
209 margin-top: var(--space-5);
210}
211
212.hint {
213 font-size: var(--text-xs);
214 color: var(--text-secondary);
215 margin-top: var(--space-1);
216}
217
218.hint.warning {
219 color: var(--warning-text);
220}
221
222.hint.error {
223 color: var(--error-text);
224}
225
226.message {
227 padding: var(--space-4);
228 border-radius: var(--radius-md);
229 font-size: var(--text-sm);
230}
231
232.message.success {
233 background: var(--success-bg);
234 border: 1px solid var(--success-border);
235 color: var(--success-text);
236}
237
238.message.error {
239 background: var(--error-bg);
240 border: 1px solid var(--error-border);
241 color: var(--error-text);
242}
243
244.message.warning {
245 background: var(--warning-bg);
246 border: 1px solid var(--warning-border);
247 color: var(--warning-text);
248}
249
250.badge {
251 display: inline-block;
252 padding: var(--space-1) var(--space-3);
253 border-radius: var(--radius-md);
254 font-size: var(--text-xs);
255 font-weight: var(--font-medium);
256}
257
258.badge.success {
259 background: var(--success-bg);
260 color: var(--success-text);
261}
262
263.badge.warning {
264 background: var(--warning-bg);
265 color: var(--warning-text);
266}
267
268.badge.error {
269 background: var(--error-bg);
270 color: var(--error-text);
271}
272
273.badge.accent {
274 background: var(--accent);
275 color: var(--text-inverse);
276}
277
278.card {
279 background: var(--bg-card);
280 border: 1px solid var(--border-color);
281 border-radius: var(--radius-xl);
282 padding: var(--space-6);
283}
284
285.section {
286 background: var(--bg-secondary);
287 border-radius: var(--radius-xl);
288 padding: var(--space-6);
289}
290
291.section + .section {
292 margin-top: var(--space-6);
293}
294
295.page {
296 max-width: var(--width-md);
297 margin: 0 auto;
298 padding: var(--space-7);
299}
300
301.page-sm {
302 max-width: var(--width-sm);
303 margin: 0 auto;
304 padding: var(--space-7);
305}
306
307.page-lg {
308 max-width: var(--width-lg);
309 margin: 0 auto;
310 padding: var(--space-7);
311}
312
313.back-link {
314 display: inline-block;
315 color: var(--text-secondary);
316 font-size: var(--text-sm);
317 margin-bottom: var(--space-3);
318}
319
320.back-link:hover {
321 color: var(--accent);
322 text-decoration: none;
323}
324
325.text-muted {
326 color: var(--text-muted);
327}
328
329.text-secondary {
330 color: var(--text-secondary);
331}
332
333.text-sm {
334 font-size: var(--text-sm);
335}
336
337.text-xs {
338 font-size: var(--text-xs);
339}
340
341.text-center {
342 text-align: center;
343}
344
345.mono {
346 font-family: inherit;
347}
348
349.mt-4 { margin-top: var(--space-4); }
350.mt-5 { margin-top: var(--space-5); }
351.mt-6 { margin-top: var(--space-6); }
352.mb-4 { margin-bottom: var(--space-4); }
353.mb-5 { margin-bottom: var(--space-5); }
354.mb-6 { margin-bottom: var(--space-6); }