A system for building static webapps
chore: update styles
+232
-66
+232
-66
packages/hono/static/styles.css
+232
-66
packages/hono/static/styles.css
···
1
+
:root {
2
+
--bg: #f1f5f9;
3
+
--surface: #ffffff;
4
+
--border: #e5e7eb;
5
+
--text: #111827;
6
+
--text-muted: #6b7280;
7
+
--text-subtle: #9ca3af;
8
+
--primary: #2563eb;
9
+
--primary-dark: #1d4ed8;
10
+
--danger: #dc2626;
11
+
--success: #16a34a;
12
+
--radius: 4px;
13
+
}
14
+
1
15
* {
2
16
box-sizing: border-box;
3
17
margin: 0;
4
18
padding: 0;
5
19
}
20
+
6
21
body {
7
-
font-family:
8
-
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
9
-
background: #f5f5f5;
10
-
color: #333;
11
-
line-height: 1.6;
22
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
23
+
background: var(--bg);
24
+
color: var(--text);
25
+
line-height: 1.5;
26
+
font-size: 0.9375rem;
27
+
}
28
+
29
+
a {
30
+
color: var(--primary);
31
+
text-decoration: none;
32
+
}
33
+
34
+
a:hover {
35
+
text-decoration: underline;
12
36
}
37
+
13
38
.container {
14
39
max-width: 800px;
15
40
margin: 0 auto;
16
-
padding: 2rem;
41
+
padding: 1.5rem 2rem;
17
42
}
43
+
18
44
header {
19
-
background: #fff;
20
-
border-bottom: 1px solid #e0e0e0;
21
-
padding: 1rem 2rem;
45
+
background: var(--surface);
46
+
padding: 0.5rem 1.5rem;
22
47
display: flex;
23
48
justify-content: space-between;
24
49
align-items: center;
50
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
25
51
}
52
+
26
53
header h1 {
27
-
font-size: 1.25rem;
28
-
font-weight: 600;
54
+
font-size: 0.9375rem;
55
+
font-weight: 700;
56
+
letter-spacing: -0.01em;
29
57
}
58
+
30
59
nav a {
31
-
margin-left: 1.5rem;
32
-
color: #666;
60
+
margin-left: 1.25rem;
61
+
color: var(--text-muted);
33
62
text-decoration: none;
63
+
font-size: 0.875rem;
34
64
}
65
+
35
66
nav a:hover {
36
-
color: #333;
67
+
color: var(--text);
68
+
text-decoration: none;
37
69
}
70
+
38
71
.card {
39
-
background: #fff;
40
-
border-radius: 8px;
41
-
padding: 1.5rem;
72
+
background: var(--surface);
73
+
border-radius: var(--radius);
74
+
padding: 1.25rem;
42
75
margin-bottom: 1rem;
43
-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
44
76
}
77
+
45
78
h2 {
46
-
font-size: 1.25rem;
79
+
font-size: 0.75rem;
80
+
font-weight: 600;
81
+
text-transform: uppercase;
82
+
letter-spacing: 0.06em;
83
+
color: var(--text-muted);
47
84
margin-bottom: 1rem;
48
85
}
86
+
49
87
.form-group {
50
-
margin-bottom: 1rem;
88
+
margin-bottom: 0.875rem;
51
89
}
90
+
52
91
label {
53
92
display: block;
54
-
margin-bottom: 0.5rem;
93
+
margin-bottom: 0.375rem;
55
94
font-weight: 500;
95
+
font-size: 0.875rem;
56
96
}
97
+
57
98
input, select, textarea {
58
99
width: 100%;
59
-
padding: 0.75rem;
60
-
border: 1px solid #ddd;
61
-
border-radius: 4px;
62
-
font-size: 1rem;
100
+
padding: 0.5rem 0.625rem;
101
+
border: 1px solid var(--border);
102
+
border-radius: var(--radius);
103
+
font-size: 0.875rem;
63
104
font-family: inherit;
105
+
background: var(--surface);
106
+
color: var(--text);
107
+
transition: border-color 0.15s, box-shadow 0.15s;
64
108
}
109
+
110
+
input:focus, select:focus, textarea:focus {
111
+
outline: none;
112
+
border-color: var(--primary);
113
+
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
114
+
}
115
+
65
116
button {
66
-
background: #2563eb;
117
+
display: inline-flex;
118
+
align-items: center;
119
+
justify-content: center;
120
+
gap: 0.375rem;
121
+
padding: 0.4375rem 0.875rem;
122
+
border: 1px solid var(--primary-dark);
123
+
border-radius: var(--radius);
124
+
background: var(--primary);
67
125
color: #fff;
68
-
border: none;
69
-
padding: 0.75rem 1.5rem;
70
-
border-radius: 4px;
71
-
font-size: 1rem;
126
+
font-size: 0.875rem;
127
+
font-family: inherit;
128
+
font-weight: 500;
72
129
cursor: pointer;
130
+
box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.15), 0 1px 0 0 rgba(0, 0, 0, 0.05);
131
+
transition: background 0.1s, box-shadow 0.1s;
73
132
}
133
+
74
134
button:hover {
75
-
background: #1d4ed8;
135
+
background: var(--primary-dark);
136
+
box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.2), 0 2px 1px 0 rgba(0, 0, 0, 0.06);
137
+
}
138
+
139
+
button:active {
140
+
box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.1);
76
141
}
142
+
77
143
button.danger {
78
-
background: #dc2626;
144
+
background: var(--surface);
145
+
border-color: var(--border);
146
+
color: var(--danger);
147
+
box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.06), 0 1px 0 0 rgba(0, 0, 0, 0.03);
79
148
}
149
+
80
150
button.danger:hover {
81
-
background: #b91c1c;
151
+
background: #fef2f2;
152
+
border-color: #fca5a5;
153
+
color: #b91c1c;
154
+
box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.08), 0 2px 1px 0 rgba(0, 0, 0, 0.04);
82
155
}
156
+
83
157
button.secondary {
84
-
background: #6b7280;
158
+
background: var(--surface);
159
+
border-color: var(--border);
160
+
color: var(--text-muted);
161
+
box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.06), 0 1px 0 0 rgba(0, 0, 0, 0.03);
85
162
}
163
+
86
164
button.secondary:hover {
87
-
background: #4b5563;
165
+
background: #f9fafb;
166
+
color: var(--text);
167
+
box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.1), 0 2px 1px 0 rgba(0, 0, 0, 0.04);
88
168
}
169
+
89
170
.error {
90
-
color: #dc2626;
171
+
color: var(--danger);
172
+
font-size: 0.875rem;
91
173
margin-bottom: 1rem;
174
+
padding: 0.625rem 0.75rem;
175
+
background: #fef2f2;
176
+
border: 1px solid #fca5a5;
177
+
border-radius: var(--radius);
92
178
}
179
+
93
180
.success {
94
-
color: #16a34a;
181
+
color: var(--success);
182
+
font-size: 0.875rem;
95
183
margin-bottom: 1rem;
184
+
padding: 0.625rem 0.75rem;
185
+
background: #f0fdf4;
186
+
border: 1px solid #86efac;
187
+
border-radius: var(--radius);
96
188
}
189
+
97
190
table {
98
191
width: 100%;
99
192
border-collapse: collapse;
193
+
font-size: 0.875rem;
100
194
}
195
+
101
196
th, td {
102
-
padding: 0.75rem;
197
+
padding: 0.625rem 0.75rem;
103
198
text-align: left;
104
-
border-bottom: 1px solid #e0e0e0;
199
+
border-bottom: 1px solid var(--border);
105
200
}
201
+
106
202
th {
203
+
font-size: 0.75rem;
107
204
font-weight: 600;
108
-
color: #666;
205
+
text-transform: uppercase;
206
+
letter-spacing: 0.05em;
207
+
color: var(--text-muted);
109
208
}
209
+
110
210
.actions {
111
211
display: flex;
112
-
gap: 0.5rem;
212
+
gap: 0.375rem;
113
213
}
214
+
114
215
.actions button {
115
-
padding: 0.5rem 1rem;
116
-
font-size: 0.875rem;
216
+
padding: 0.25rem 0.625rem;
217
+
font-size: 0.8125rem;
117
218
}
219
+
118
220
.empty {
119
-
color: #999;
221
+
color: var(--text-subtle);
222
+
font-size: 0.875rem;
120
223
font-style: italic;
224
+
padding: 0.5rem 0;
121
225
}
226
+
122
227
.app-name {
123
-
font-weight: 600;
228
+
font-weight: 500;
124
229
}
230
+
125
231
.app-meta {
126
-
color: #666;
127
-
font-size: 0.875rem;
232
+
color: var(--text-muted);
233
+
font-size: 0.8125rem;
128
234
}
235
+
129
236
code {
130
237
background: #f3f4f6;
131
-
padding: 0.25rem 0.5rem;
132
-
border-radius: 4px;
133
-
font-size: 0.875rem;
238
+
padding: 0.15rem 0.4rem;
239
+
border-radius: 3px;
240
+
font-size: 0.8125rem;
241
+
font-family: IBMPlexMono, ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;
242
+
color: #374151;
134
243
}
244
+
135
245
.token-item {
136
246
display: flex;
137
247
align-items: center;
138
-
padding: 0.75rem 0;
139
-
border-bottom: 1px solid #e0e0e0;
248
+
padding: 0.625rem 0;
249
+
border-bottom: 1px solid var(--border);
140
250
}
251
+
141
252
.token-item:last-of-type {
142
253
border-bottom: none;
143
254
}
255
+
144
256
.token-info {
145
257
flex: 1;
146
258
}
259
+
147
260
.token-name {
148
261
font-weight: 500;
262
+
font-size: 0.875rem;
149
263
}
264
+
150
265
.token-meta {
151
266
display: block;
152
-
font-size: 0.8rem;
153
-
color: #666;
154
-
margin-top: 0.125rem;
267
+
font-size: 0.75rem;
268
+
color: var(--text-muted);
269
+
margin-top: 0.1rem;
155
270
}
271
+
156
272
button.small {
157
-
padding: 0.375rem 0.75rem;
158
-
font-size: 0.875rem;
273
+
padding: 0.25rem 0.5rem;
274
+
font-size: 0.8125rem;
275
+
min-height: 26px;
159
276
}
277
+
160
278
dialog {
161
-
border: none;
162
-
border-radius: 8px;
279
+
border: 1px solid var(--border);
280
+
border-radius: 6px;
163
281
padding: 1.5rem;
164
282
max-width: 460px;
165
283
width: 90vw;
166
-
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
284
+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
167
285
}
286
+
168
287
dialog::backdrop {
169
-
background: rgba(0, 0, 0, 0.45);
288
+
background: rgba(0, 0, 0, 0.3);
170
289
}
290
+
171
291
dialog h3 {
172
-
font-size: 1.1rem;
292
+
font-size: 0.9375rem;
293
+
font-weight: 600;
173
294
margin-bottom: 1.25rem;
174
295
}
296
+
175
297
dialog hr {
176
298
border: none;
177
-
border-top: 1px solid #e5e7eb;
299
+
border-top: 1px solid var(--border);
178
300
margin: 1.25rem 0;
179
301
}
302
+
180
303
dl {
181
304
display: grid;
182
305
grid-template-columns: auto 1fr;
183
306
gap: 0.375rem 1rem;
184
307
}
308
+
185
309
dt {
186
310
font-weight: 600;
187
-
color: #666;
188
-
font-size: 0.85rem;
311
+
color: var(--text-muted);
312
+
font-size: 0.8125rem;
189
313
}
314
+
190
315
dd {
191
-
font-size: 0.85rem;
316
+
font-size: 0.8125rem;
192
317
word-break: break-all;
318
+
color: var(--text);
193
319
}
320
+
194
321
.dialog-header {
195
322
display: flex;
196
323
justify-content: space-between;
197
324
align-items: center;
198
325
margin-bottom: 1.25rem;
199
326
}
327
+
200
328
.dialog-footer {
201
329
display: flex;
202
330
justify-content: space-between;
203
331
align-items: center;
204
332
margin-top: 1.25rem;
205
333
}
334
+
335
+
@media (prefers-color-scheme: dark) {
336
+
:root {
337
+
--bg: #111827;
338
+
--surface: #1f2937;
339
+
--border: #374151;
340
+
--text: #f9fafb;
341
+
--text-muted: #9ca3af;
342
+
--text-subtle: #6b7280;
343
+
}
344
+
345
+
code {
346
+
background: #374151;
347
+
color: #e5e7eb;
348
+
}
349
+
350
+
button.secondary:hover {
351
+
background: #374151;
352
+
}
353
+
354
+
button.danger:hover {
355
+
background: #1c0505;
356
+
border-color: #7f1d1d;
357
+
color: #fca5a5;
358
+
}
359
+
360
+
.error {
361
+
background: #1c0505;
362
+
border-color: #7f1d1d;
363
+
color: #fca5a5;
364
+
}
365
+
366
+
.success {
367
+
background: #052e16;
368
+
border-color: #166534;
369
+
color: #86efac;
370
+
}
371
+
}