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