this repo has no description
attoshi.com
1/* ==========================================================================
2 @toshi - Brutalist Terminal Aesthetic
3 ========================================================================== */
4
5/* CSS Custom Properties */
6:root {
7 /* Colors */
8 --color-bg: #f7f7f8;
9 --color-fg: #111;
10 --color-muted: #666;
11 --color-border: #ccc;
12 --color-input-bg: #fff;
13 --color-input-focus: #fffef0;
14
15 /* Status Colors */
16 --color-success: #0a0;
17 --color-success-bg: #efe;
18 --color-error: #a00;
19 --color-error-bg: #fee;
20 --color-warning: #a80;
21 --color-warning-bg: #ffc;
22
23 /* Spacing Scale */
24 --space-xs: 0.25rem;
25 --space-sm: 0.5rem;
26 --space-md: 1rem;
27 --space-lg: 1.5rem;
28 --space-xl: 2rem;
29
30 /* Typography */
31 --font-mono: 'IBM Plex Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', monospace;
32 --font-size-base: 13px;
33 --font-size-sm: 12px;
34 --line-height: 1.6;
35
36 /* Layout */
37 --max-width: 72ch;
38 --border-width: 2px;
39}
40
41/* Reset & Base */
42*, *::before, *::after {
43 box-sizing: border-box;
44}
45
46body {
47 background-color: var(--color-bg);
48 color: var(--color-fg);
49 font-family: var(--font-mono);
50 font-size: var(--font-size-base);
51 line-height: var(--line-height);
52 padding: var(--space-xl);
53 margin: 0;
54 min-height: 100vh;
55}
56
57/* Typography */
58h1, h2, h3, h4, h5, h6 {
59 margin: 0;
60 font-size: inherit;
61 font-weight: normal;
62 text-transform: uppercase;
63 letter-spacing: 0.05em;
64}
65
66p { margin: 0; }
67
68a {
69 color: var(--color-fg);
70 text-decoration: underline;
71 text-underline-offset: 2px;
72}
73
74a:hover {
75 background-color: var(--color-fg);
76 color: var(--color-bg);
77 text-decoration: none;
78}
79
80/* Terminal Container */
81.terminal {
82 max-width: var(--max-width);
83 margin: 0 auto;
84}
85
86.terminal-header {
87 display: flex;
88 align-items: center;
89 gap: var(--space-md);
90}
91
92.terminal-title {
93 font-size: var(--font-size-base);
94}
95
96.back-link {
97 color: var(--color-muted);
98 text-decoration: none;
99 font-weight: bold;
100}
101
102.back-link:hover {
103 color: var(--color-fg);
104 background: transparent;
105}
106
107
108/* Divider */
109.divider {
110 color: var(--color-muted);
111 user-select: none;
112 margin: var(--space-md) 0;
113}
114
115/* Sections */
116.terminal-section {
117 padding: var(--space-md) 0;
118}
119
120.section-title {
121 color: var(--color-muted);
122 margin-bottom: var(--space-sm);
123 font-size: var(--font-size-sm);
124}
125
126/* Label-Value Pairs */
127.label-value {
128 display: flex;
129 gap: var(--space-sm);
130}
131
132.label {
133 color: var(--color-muted);
134 flex-shrink: 0;
135}
136
137.value {
138 color: var(--color-fg);
139}
140
141.value.status-success { color: var(--color-success); }
142.value.status-error { color: var(--color-error); }
143.value.status-warning { color: var(--color-warning); }
144
145/* Data Table */
146.data-table {
147 width: 100%;
148}
149
150.data-row {
151 display: flex;
152 gap: var(--space-md);
153 padding: var(--space-xs) 0;
154 align-items: baseline;
155}
156
157.data-header {
158 border-bottom: 1px solid var(--color-border);
159 padding-bottom: var(--space-sm);
160 margin-bottom: var(--space-xs);
161}
162
163.data-header .data-cell {
164 color: var(--color-muted);
165 font-size: var(--font-size-sm);
166}
167
168.data-cell {
169 overflow: hidden;
170 text-overflow: ellipsis;
171 white-space: nowrap;
172}
173
174.data-row-link {
175 display: block;
176 text-decoration: none;
177}
178
179.data-row-link:hover {
180 background: var(--color-fg);
181 color: var(--color-bg);
182}
183
184.data-row-link:hover .data-cell {
185 color: inherit;
186}
187
188.data-empty {
189 color: var(--color-muted);
190 padding: var(--space-md) 0;
191 font-style: italic;
192}
193
194.data-body {
195 display: flex;
196 flex-direction: column;
197}
198
199/* Action Bar */
200.action-bar {
201 display: flex;
202 flex-wrap: wrap;
203 gap: var(--space-sm);
204 padding: var(--space-md) 0;
205}
206
207/* Status Badge */
208.status-badge {
209 text-transform: uppercase;
210 letter-spacing: 0.05em;
211}
212
213.status-online { color: var(--color-success); }
214.status-offline { color: var(--color-error); }
215.status-loading { color: var(--color-warning); }
216
217/* Buttons */
218button, .btn {
219 font-family: var(--font-mono);
220 font-size: var(--font-size-base);
221 background: var(--color-fg);
222 color: var(--color-bg);
223 border: var(--border-width) solid var(--color-fg);
224 padding: var(--space-sm) var(--space-md);
225 cursor: pointer;
226 transition: all 0.1s ease;
227 text-transform: uppercase;
228 letter-spacing: 0.05em;
229}
230
231button:hover, .btn:hover {
232 background: var(--color-bg);
233 color: var(--color-fg);
234}
235
236button:disabled {
237 opacity: 0.4;
238 cursor: not-allowed;
239}
240
241button.secondary, .btn.secondary {
242 background: var(--color-bg);
243 color: var(--color-fg);
244}
245
246button.secondary:hover, .btn.secondary:hover {
247 background: var(--color-fg);
248 color: var(--color-bg);
249}
250
251/* Input Fields */
252.input-field {
253 display: flex;
254 align-items: center;
255 gap: var(--space-sm);
256 flex-wrap: wrap;
257}
258
259.input-label {
260 color: var(--color-muted);
261 flex-shrink: 0;
262}
263
264input, textarea, select {
265 font-family: var(--font-mono);
266 font-size: var(--font-size-base);
267 background: var(--color-input-bg);
268 color: var(--color-fg);
269 border: var(--border-width) solid var(--color-fg);
270 padding: var(--space-sm) var(--space-md);
271 outline: none;
272}
273
274input:focus, textarea:focus, select:focus {
275 background: var(--color-input-focus);
276}
277
278input::placeholder {
279 color: var(--color-muted);
280}
281
282/* Messages */
283.message {
284 padding: var(--space-sm) var(--space-md);
285 border: var(--border-width) solid;
286}
287
288.message-success {
289 color: var(--color-success);
290 background: var(--color-success-bg);
291 border-color: var(--color-success);
292}
293
294.message-error {
295 color: var(--color-error);
296 background: var(--color-error-bg);
297 border-color: var(--color-error);
298}
299
300.message-info {
301 color: var(--color-fg);
302 background: var(--color-bg);
303 border-color: var(--color-border);
304}
305
306/* Legacy support */
307.error {
308 color: var(--color-error);
309}
310
311.success {
312 color: var(--color-success);
313}
314
315/* Form Layout */
316.form-group {
317 display: flex;
318 flex-direction: column;
319 gap: var(--space-sm);
320}
321
322.form-row {
323 display: flex;
324 align-items: center;
325 gap: var(--space-md);
326 flex-wrap: wrap;
327}
328
329/* Mobile Adjustments */
330@media (max-width: 600px) {
331 body {
332 padding: var(--space-md);
333 font-size: var(--font-size-sm);
334 }
335
336 .data-row {
337 flex-wrap: wrap;
338 }
339
340 .data-cell {
341 white-space: normal;
342 }
343
344 .input-field {
345 flex-direction: column;
346 align-items: flex-start;
347 }
348
349 input, textarea, select {
350 width: 100%;
351 }
352}
353
354/* Utility Classes */
355.text-muted { color: var(--color-muted); }
356.text-success { color: var(--color-success); }
357.text-error { color: var(--color-error); }
358.text-warning { color: var(--color-warning); }
359
360.visually-hidden {
361 position: absolute;
362 width: 1px;
363 height: 1px;
364 padding: 0;
365 margin: -1px;
366 overflow: hidden;
367 clip: rect(0, 0, 0, 0);
368 white-space: nowrap;
369 border: 0;
370}