WIP! A BB-style forum, on the ATmosphere!
We're still working... we'll be back soon when we have something to show off!
node
typescript
hono
htmx
atproto
fix: add missing CSS for settings page and theme swatch preview
Swatch spans were invisible because <span> collapses to zero size without
explicit dimensions. Also adds layout styles for settings-page, banners,
and form that were never written.
+88
+88
apps/web/public/static/css/theme.css
+88
apps/web/public/static/css/theme.css
···
1180
1180
font-size: var(--font-size-sm);
1181
1181
padding: var(--space-xs) var(--space-sm);
1182
1182
}
1183
+
1184
+
/* ─── Settings Page ──────────────────────────────────────────────────────── */
1185
+
1186
+
.settings-page {
1187
+
max-width: 40rem;
1188
+
margin: 0 auto;
1189
+
padding: var(--space-xl) var(--space-md);
1190
+
}
1191
+
1192
+
.settings-page h1 {
1193
+
margin-bottom: var(--space-lg);
1194
+
}
1195
+
1196
+
.settings-page section {
1197
+
margin-bottom: var(--space-xl);
1198
+
}
1199
+
1200
+
.settings-page h2 {
1201
+
margin-bottom: var(--space-md);
1202
+
}
1203
+
1204
+
.settings-banner {
1205
+
padding: var(--space-sm) var(--space-md);
1206
+
border-radius: var(--radius);
1207
+
border: var(--border-width) solid var(--color-border);
1208
+
margin-bottom: var(--space-md);
1209
+
background: var(--color-surface);
1210
+
}
1211
+
1212
+
.settings-banner--success {
1213
+
border-color: var(--color-success);
1214
+
color: var(--color-success);
1215
+
}
1216
+
1217
+
.settings-banner--error {
1218
+
border-color: var(--color-danger);
1219
+
color: var(--color-danger);
1220
+
}
1221
+
1222
+
.settings-form {
1223
+
display: flex;
1224
+
flex-direction: column;
1225
+
gap: var(--space-md);
1226
+
}
1227
+
1228
+
.settings-form__field {
1229
+
display: flex;
1230
+
flex-direction: column;
1231
+
gap: var(--space-xs);
1232
+
}
1233
+
1234
+
.settings-form__field label {
1235
+
font-weight: var(--font-weight-bold);
1236
+
font-size: var(--font-size-sm);
1237
+
}
1238
+
1239
+
.settings-form__submit {
1240
+
align-self: flex-start;
1241
+
}
1242
+
1243
+
/* ─── Theme Swatch Preview ───────────────────────────────────────────────── */
1244
+
1245
+
.theme-preview {
1246
+
display: flex;
1247
+
align-items: center;
1248
+
gap: var(--space-sm);
1249
+
padding: var(--space-xs) 0;
1250
+
min-height: 2rem;
1251
+
}
1252
+
1253
+
.theme-preview__name {
1254
+
font-size: var(--font-size-sm);
1255
+
color: var(--color-text-muted);
1256
+
}
1257
+
1258
+
.theme-preview__swatches {
1259
+
display: flex;
1260
+
gap: 4px;
1261
+
}
1262
+
1263
+
.theme-preview__swatch {
1264
+
display: inline-block;
1265
+
width: 1.25rem;
1266
+
height: 1.25rem;
1267
+
border-radius: var(--radius);
1268
+
border: 1px solid rgba(0, 0, 0, 0.15);
1269
+
flex-shrink: 0;
1270
+
}