Skip to content

Commit 8745cb9

Browse files
hubyrodclaude
hubyrod
and
claude
committed
Redesign /config page with dark utilitarian theme
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 8382241 commit 8745cb9

3 files changed

Lines changed: 371 additions & 160 deletions

File tree

‎app/config/config.css‎

Lines changed: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
:root {
2+
--cfg-bg: #0c0c0e;
3+
--cfg-surface: #141418;
4+
--cfg-surface-hover: #1a1a20;
5+
--cfg-border: #27272e;
6+
--cfg-border-subtle: #1e1e24;
7+
--cfg-text: #e4e4e7;
8+
--cfg-text-muted: #71717a;
9+
--cfg-text-dim: #52525b;
10+
--cfg-accent: #a78bfa;
11+
--cfg-accent-dim: rgba(167, 139, 250, 0.12);
12+
--cfg-green: #34d399;
13+
--cfg-green-dim: rgba(52, 211, 153, 0.12);
14+
--cfg-amber: #fbbf24;
15+
--cfg-amber-dim: rgba(251, 191, 36, 0.1);
16+
--cfg-mono: "SF Mono", "Cascadia Code", "JetBrains Mono", "Fira Code", Menlo,
17+
monospace;
18+
--cfg-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
19+
sans-serif;
20+
}
21+
22+
.cfg-page {
23+
background: var(--cfg-bg);
24+
min-height: 100vh;
25+
color: var(--cfg-text);
26+
font-family: var(--cfg-sans);
27+
-webkit-font-smoothing: antialiased;
28+
}
29+
30+
.cfg-container {
31+
max-width: 72rem;
32+
margin: 0 auto;
33+
padding: 2rem 1.5rem 4rem;
34+
}
35+
36+
.cfg-header {
37+
display: flex;
38+
align-items: baseline;
39+
gap: 0.75rem;
40+
margin-bottom: 2.5rem;
41+
padding-bottom: 1.5rem;
42+
border-bottom: 1px solid var(--cfg-border);
43+
}
44+
45+
.cfg-title {
46+
font-family: var(--cfg-mono);
47+
font-size: 0.8125rem;
48+
font-weight: 500;
49+
color: var(--cfg-text);
50+
letter-spacing: 0.04em;
51+
}
52+
53+
.cfg-title span {
54+
color: var(--cfg-text-dim);
55+
}
56+
57+
.cfg-subtitle {
58+
font-size: 0.75rem;
59+
color: var(--cfg-text-dim);
60+
font-family: var(--cfg-mono);
61+
}
62+
63+
/* Grid layout for sections */
64+
.cfg-grid {
65+
display: grid;
66+
grid-template-columns: 1fr 1fr;
67+
gap: 1.25rem;
68+
}
69+
70+
@media (max-width: 768px) {
71+
.cfg-grid {
72+
grid-template-columns: 1fr;
73+
}
74+
}
75+
76+
.cfg-section {
77+
background: var(--cfg-surface);
78+
border: 1px solid var(--cfg-border);
79+
border-radius: 6px;
80+
overflow: hidden;
81+
}
82+
83+
.cfg-section--wide {
84+
grid-column: 1 / -1;
85+
}
86+
87+
.cfg-section-header {
88+
display: flex;
89+
align-items: center;
90+
justify-content: space-between;
91+
padding: 0.625rem 0.875rem;
92+
border-bottom: 1px solid var(--cfg-border);
93+
}
94+
95+
.cfg-section-title {
96+
font-family: var(--cfg-mono);
97+
font-size: 0.6875rem;
98+
font-weight: 500;
99+
text-transform: uppercase;
100+
letter-spacing: 0.08em;
101+
color: var(--cfg-text-muted);
102+
}
103+
104+
.cfg-count {
105+
font-family: var(--cfg-mono);
106+
font-size: 0.625rem;
107+
color: var(--cfg-text-dim);
108+
background: var(--cfg-bg);
109+
padding: 0.125rem 0.4rem;
110+
border-radius: 3px;
111+
}
112+
113+
/* Table styles */
114+
.cfg-table {
115+
width: 100%;
116+
border-collapse: collapse;
117+
font-size: 0.8125rem;
118+
}
119+
120+
.cfg-table thead th {
121+
text-align: left;
122+
padding: 0.4375rem 0.875rem;
123+
font-family: var(--cfg-mono);
124+
font-size: 0.6875rem;
125+
font-weight: 400;
126+
color: var(--cfg-text-dim);
127+
text-transform: uppercase;
128+
letter-spacing: 0.06em;
129+
background: var(--cfg-bg);
130+
border-bottom: 1px solid var(--cfg-border-subtle);
131+
}
132+
133+
.cfg-table tbody tr {
134+
transition: background 0.1s ease;
135+
}
136+
137+
.cfg-table tbody tr:hover {
138+
background: var(--cfg-surface-hover);
139+
}
140+
141+
.cfg-table tbody td {
142+
padding: 0.5rem 0.875rem;
143+
border-bottom: 1px solid var(--cfg-border-subtle);
144+
color: var(--cfg-text);
145+
white-space: nowrap;
146+
}
147+
148+
.cfg-table tbody tr:last-child td {
149+
border-bottom: none;
150+
}
151+
152+
/* Mono text for IDs, tokens, paths */
153+
.cfg-mono {
154+
font-family: var(--cfg-mono);
155+
font-size: 0.75rem;
156+
}
157+
158+
.cfg-token {
159+
font-family: var(--cfg-mono);
160+
font-size: 0.75rem;
161+
color: var(--cfg-text-muted);
162+
}
163+
164+
.cfg-path {
165+
font-family: var(--cfg-mono);
166+
font-size: 0.75rem;
167+
color: var(--cfg-accent);
168+
}
169+
170+
.cfg-muted {
171+
color: var(--cfg-text-dim);
172+
font-style: italic;
173+
font-size: 0.75rem;
174+
}
175+
176+
/* Badges */
177+
.cfg-badge {
178+
display: inline-block;
179+
font-family: var(--cfg-mono);
180+
font-size: 0.625rem;
181+
font-weight: 500;
182+
text-transform: uppercase;
183+
letter-spacing: 0.06em;
184+
padding: 0.125rem 0.375rem;
185+
border-radius: 3px;
186+
}
187+
188+
.cfg-badge--group {
189+
background: var(--cfg-accent-dim);
190+
color: var(--cfg-accent);
191+
}
192+
193+
.cfg-badge--stream {
194+
background: var(--cfg-amber-dim);
195+
color: var(--cfg-amber);
196+
}
197+
198+
/* Empty state */
199+
.cfg-empty {
200+
padding: 1.5rem 0.875rem;
201+
text-align: center;
202+
color: var(--cfg-text-dim);
203+
font-size: 0.75rem;
204+
font-family: var(--cfg-mono);
205+
}

0 commit comments

Comments
 (0)