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