summaryrefslogtreecommitdiffstats
path: root/static/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'static/style.css')
-rw-r--r--static/style.css492
1 files changed, 261 insertions, 231 deletions
diff --git a/static/style.css b/static/style.css
index 61046b2..583b9fb 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,424 +1,454 @@
1*, 1*,
2*::before, 2*::before,
3*::after { 3*::after {
4 box-sizing: border-box; 4 box-sizing: border-box;
5 margin: 0; 5 margin: 0;
6 padding: 0; 6 padding: 0;
7} 7}
8 8
9:root { 9:root {
10 --bg: #1a1b1e; 10 --bg: #1a1b1e;
11 --bg-card: #25262b; 11 --bg-card: #25262b;
12 --bg-input: #2c2e33; 12 --bg-input: #2c2e33;
13 --fg: #c1c2c5; 13 --fg: #c1c2c5;
14 --fg-muted: #909296; 14 --fg-muted: #909296;
15 --accent: #4c9aff; 15 --accent: #4c9aff;
16 --ok: #51cf66; 16 --ok: #51cf66;
17 --warn: #fcc419; 17 --warn: #fcc419;
18 --err: #ff6b6b; 18 --err: #ff6b6b;
19 --border: #373a40; 19 --border: #373a40;
20 --radius: 8px; 20 --radius: 8px;
21} 21}
22 22
23body { 23body {
24 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 24 font-family:
25 background: var(--bg); 25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
26 color: var(--fg); 26 background: var(--bg);
27 line-height: 1.5; 27 color: var(--fg);
28 min-height: 100vh; 28 line-height: 1.5;
29 min-height: 100vh;
29} 30}
30 31
31/* Navigation */ 32/* Navigation */
32nav { 33nav {
33 display: flex; 34 display: flex;
34 align-items: center; 35 align-items: center;
35 justify-content: space-between; 36 justify-content: space-between;
36 padding: 0.75rem 1.5rem; 37 padding: 0.75rem 1.5rem;
37 background: var(--bg-card); 38 background: var(--bg-card);
38 border-bottom: 1px solid var(--border); 39 border-bottom: 1px solid var(--border);
39 flex-wrap: wrap; 40 flex-wrap: wrap;
40 gap: 0.5rem; 41 gap: 0.5rem;
41} 42}
42 43
43nav .brand { 44nav .brand {
44 font-weight: 700; 45 font-weight: 700;
45 font-size: 1.1rem; 46 font-size: 1.1rem;
46 color: var(--accent); 47 color: var(--accent);
47} 48}
48 49
49nav .nav-links { 50nav .nav-links {
50 display: flex; 51 display: flex;
51 align-items: center; 52 align-items: center;
52 gap: 1rem; 53 gap: 1rem;
53 flex-wrap: wrap; 54 flex-wrap: wrap;
54} 55}
55 56
56nav a { 57nav a {
57 color: var(--fg); 58 color: var(--fg);
58 text-decoration: none; 59 text-decoration: none;
59 font-size: 0.9rem; 60 font-size: 0.9rem;
60} 61}
61 62
62nav a:hover { 63nav a:hover {
63 color: var(--accent); 64 color: var(--accent);
64} 65}
65 66
66nav .nav-user { 67nav .nav-user {
67 color: var(--fg-muted); 68 color: var(--fg-muted);
68 font-size: 0.85rem; 69 font-size: 0.85rem;
69} 70}
70 71
71/* Buttons */ 72/* Buttons */
72.btn, button { 73.btn,
73 display: inline-block; 74button {
74 padding: 0.5rem 1rem; 75 display: inline-block;
75 border: 1px solid var(--border); 76 padding: 0.5rem 1rem;
76 border-radius: var(--radius); 77 border: 1px solid var(--border);
77 background: var(--bg-input); 78 border-radius: var(--radius);
78 color: var(--fg); 79 background: var(--bg-input);
79 cursor: pointer; 80 color: var(--fg);
80 font-size: 0.9rem; 81 cursor: pointer;
81 text-decoration: none; 82 font-size: 0.9rem;
82 transition: background 0.15s; 83 text-decoration: none;
84 transition: background 0.15s;
83} 85}
84 86
85.btn:hover, button:hover { 87.btn:hover,
86 background: var(--border); 88button:hover {
89 background: var(--border);
87} 90}
88 91
89.btn-ok, button.btn-ok { 92.btn-ok,
90 background: var(--ok); 93button.btn-ok {
91 color: #000; 94 background: var(--ok);
92 border-color: var(--ok); 95 color: #000;
96 border-color: var(--ok);
93} 97}
94 98
95.btn-ok:hover { 99.btn-ok:hover {
96 opacity: 0.85; 100 opacity: 0.85;
97} 101}
98 102
99.btn-danger, button.btn-danger { 103.btn-danger,
100 background: var(--err); 104button.btn-danger {
101 color: #000; 105 background: var(--err);
102 border-color: var(--err); 106 color: #000;
107 border-color: var(--err);
103} 108}
104 109
105.btn-danger:hover { 110.btn-danger:hover {
106 opacity: 0.85; 111 opacity: 0.85;
107} 112}
108 113
109.btn-sm { 114.btn-sm {
110 padding: 0.25rem 0.6rem; 115 padding: 0.25rem 0.6rem;
111 font-size: 0.8rem; 116 font-size: 0.8rem;
112} 117}
113 118
114.btn-link { 119.btn-link {
115 background: none; 120 background: none;
116 border: none; 121 border: none;
117 color: var(--fg-muted); 122 color: var(--fg-muted);
118 cursor: pointer; 123 cursor: pointer;
119 padding: 0; 124 padding: 0;
120} 125}
121 126
122.btn-link:hover { 127.btn-link:hover {
123 color: var(--err); 128 color: var(--err);
124} 129}
125 130
126/* Cards */ 131/* Cards */
127.card { 132.card {
128 background: var(--bg-card); 133 background: var(--bg-card);
129 border: 1px solid var(--border); 134 border: 1px solid var(--border);
130 border-radius: var(--radius); 135 border-radius: var(--radius);
131 padding: 1.25rem; 136 padding: 1.25rem;
132} 137}
133 138
134.card-ok { 139.card-ok {
135 border-color: var(--ok); 140 border-color: var(--ok);
136} 141}
137 142
138.card-err { 143.card-err {
139 border-color: var(--err); 144 border-color: var(--err);
140} 145}
141 146
142.card-muted { 147.card-muted {
143 opacity: 0.7; 148 opacity: 0.7;
144} 149}
145 150
146.card-active { 151.card-active {
147 border-color: var(--accent); 152 border-color: var(--accent);
148 position: relative; 153 position: relative;
149} 154}
150 155
151.active-badge { 156.active-badge {
152 position: absolute; 157 position: absolute;
153 top: -8px; 158 top: -8px;
154 right: -8px; 159 right: -8px;
155 background: var(--accent); 160 background: var(--accent);
156 color: #000; 161 color: #000;
157 font-size: 0.7rem; 162 font-size: 0.7rem;
158 font-weight: 700; 163 font-weight: 700;
159 padding: 0.15rem 0.5rem; 164 padding: 0.15rem 0.5rem;
160 border-radius: 100px; 165 border-radius: 100px;
161} 166}
162 167
163/* Forms */ 168/* Forms */
164form.form-col { 169form.form-col {
165 display: flex; 170 display: flex;
166 flex-direction: column; 171 flex-direction: column;
167 gap: 1rem; 172 gap: 1rem;
168} 173}
169 174
170form.form-col:not(.form-wide) { 175form.form-col:not(.form-wide) {
171 max-width: 600px; 176 max-width: 600px;
172} 177}
173 178
174form.form-row { 179form.form-row {
175 display: flex; 180 display: flex;
176 align-items: center; 181 align-items: center;
177 gap: 0.5rem; 182 gap: 0.5rem;
178} 183}
179 184
180label { 185label {
181 display: flex; 186 display: flex;
182 flex-direction: column; 187 flex-direction: column;
183 gap: 0.25rem; 188 gap: 0.25rem;
184 font-size: 0.9rem; 189 font-size: 0.9rem;
185 color: var(--fg-muted); 190 color: var(--fg-muted);
186} 191}
187 192
188label:has(input[type="radio"]), 193label:has(input[type="radio"]),
189label:has(input[type="checkbox"]) { 194label:has(input[type="checkbox"]) {
190 flex-direction: row; 195 flex-direction: row;
191 align-items: center; 196 align-items: center;
192 gap: 0.5rem; 197 gap: 0.5rem;
193 color: var(--fg); 198 color: var(--fg);
194} 199}
195 200
196input, select, textarea { 201input,
197 padding: 0.5rem 0.75rem; 202select,
198 border: 1px solid var(--border); 203textarea {
199 border-radius: var(--radius); 204 padding: 0.5rem 0.75rem;
200 background: var(--bg-input); 205 border: 1px solid var(--border);
201 color: var(--fg); 206 border-radius: var(--radius);
202 font-size: 0.9rem; 207 background: var(--bg-input);
208 color: var(--fg);
209 font-size: 0.9rem;
203} 210}
204 211
205input:focus, select:focus { 212input:focus,
206 outline: none; 213select:focus {
207 border-color: var(--accent); 214 outline: none;
215 border-color: var(--accent);
208} 216}
209 217
210fieldset { 218fieldset {
211 border: 1px solid var(--border); 219 border: 1px solid var(--border);
212 border-radius: var(--radius); 220 border-radius: var(--radius);
213 padding: 1rem; 221 padding: 1rem;
214} 222}
215 223
216legend { 224legend {
217 font-weight: 600; 225 font-weight: 600;
218 padding: 0 0.5rem; 226 padding: 0 0.5rem;
219 color: var(--fg-muted); 227 color: var(--fg-muted);
220 font-size: 0.85rem; 228 font-size: 0.85rem;
221} 229}
222 230
223small { 231small {
224 color: var(--fg-muted); 232 color: var(--fg-muted);
225 font-size: 0.8rem; 233 font-size: 0.8rem;
226} 234}
227 235
228/* Layout */ 236/* Layout */
229main { 237main {
230 max-width: 1000px; 238 max-width: 1000px;
231 margin: 0 auto; 239 margin: 0 auto;
232 padding: 1.5rem; 240 padding: 1.5rem;
233} 241}
234 242
235h1, h2, h3 { 243h1,
236 color: var(--fg); 244h2,
237 margin-bottom: 0.75rem; 245h3 {
246 color: var(--fg);
247 margin-bottom: 0.75rem;
238} 248}
239 249
240.page-header { 250.page-header {
241 display: flex; 251 display: flex;
242 align-items: center; 252 align-items: center;
243 justify-content: space-between; 253 justify-content: space-between;
244 margin-bottom: 1.5rem; 254 margin-bottom: 1.5rem;
245 flex-wrap: wrap; 255 flex-wrap: wrap;
246 gap: 1rem; 256 gap: 1rem;
247} 257}
248 258
249.instance-grid { 259.instance-grid {
250 display: grid; 260 display: grid;
251 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 261 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
252 gap: 1rem; 262 gap: 1rem;
253} 263}
254 264
255.tab-row { 265.tab-row {
256 display: grid; 266 display: grid;
257 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 267 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
258 gap: 1rem; 268 gap: 1rem;
259} 269}
260 270
261/* Status badges */ 271/* Status badges */
262.status-badge { 272.status-badge {
263 display: inline-block; 273 display: inline-block;
264 padding: 0.25rem 0.75rem; 274 padding: 0.25rem 0.75rem;
265 border-radius: 100px; 275 border-radius: 100px;
266 font-size: 0.85rem; 276 font-size: 0.85rem;
267 font-weight: 600; 277 font-weight: 600;
268} 278}
269 279
270.status-running { 280.status-running {
271 background: var(--ok); 281 background: var(--ok);
272 color: #000; 282 color: #000;
273} 283}
274 284
275.status-starting, .status-booting, .status-pulling { 285.status-starting,
276 background: var(--warn); 286.status-booting,
277 color: #000; 287.status-pulling {
288 background: var(--warn);
289 color: #000;
278} 290}
279 291
280.status-stopped { 292.status-stopped {
281 background: var(--fg-muted); 293 background: var(--fg-muted);
282 color: #000; 294 color: #000;
283} 295}
284 296
285.status-error, .status-not_found { 297.status-warning {
286 background: var(--err); 298 background: var(--warn);
287 color: #000; 299 color: #000;
300}
301
302.status-error,
303.status-not_found {
304 background: var(--err);
305 color: #000;
288} 306}
289 307
290.status-row { 308.status-row {
291 display: flex; 309 display: flex;
292 align-items: center; 310 align-items: center;
293 gap: 1rem; 311 gap: 1rem;
294 margin: 0.75rem 0; 312 margin: 0.75rem 0;
295} 313}
296 314
297/* Tags */ 315/* Tags */
298.tag { 316.tag {
299 display: inline-block; 317 display: inline-block;
300 padding: 0.1rem 0.5rem; 318 padding: 0.1rem 0.5rem;
301 border-radius: 100px; 319 border-radius: 100px;
302 font-size: 0.75rem; 320 font-size: 0.75rem;
303 background: var(--border); 321 background: var(--border);
304 color: var(--fg-muted); 322 color: var(--fg-muted);
305} 323}
306 324
307.tag-admin { 325.tag-admin {
308 background: var(--warn); 326 background: var(--warn);
309 color: #000; 327 color: #000;
328}
329
330.tag-ok {
331 background: var(--ok);
332 color: #000;
333}
334
335.tag-err {
336 background: var(--err);
337 color: #000;
310} 338}
311 339
312/* Instance meta */ 340/* Instance meta */
313.instance-meta, .meta { 341.instance-meta,
314 display: flex; 342.meta {
315 gap: 0.75rem; 343 display: flex;
316 flex-wrap: wrap; 344 gap: 0.75rem;
317 font-size: 0.85rem; 345 flex-wrap: wrap;
318 color: var(--fg-muted); 346 font-size: 0.85rem;
319 margin-bottom: 0.5rem; 347 color: var(--fg-muted);
348 margin-bottom: 0.5rem;
320} 349}
321 350
322.actions { 351.actions {
323 display: flex; 352 display: flex;
324 gap: 0.5rem; 353 gap: 0.5rem;
325 flex-wrap: wrap; 354 flex-wrap: wrap;
326 margin-top: 0.75rem; 355 margin-top: 0.75rem;
327} 356}
328 357
329.players { 358.players {
330 font-size: 0.9rem; 359 font-size: 0.9rem;
331 color: var(--accent); 360 color: var(--accent);
332} 361}
333 362
334/* Player list */ 363/* Player list */
335.player-list { 364.player-list {
336 list-style: none; 365 list-style: none;
337 margin-top: 0.5rem; 366 margin-top: 0.5rem;
338} 367}
339 368
340.player-list li { 369.player-list li {
341 display: flex; 370 display: flex;
342 align-items: center; 371 align-items: center;
343 justify-content: space-between; 372 justify-content: space-between;
344 padding: 0.4rem 0; 373 padding: 0.4rem 0;
345 border-bottom: 1px solid var(--border); 374 border-bottom: 1px solid var(--border);
346 font-size: 0.9rem; 375 font-size: 0.9rem;
347} 376}
348 377
349/* Table */ 378/* Table */
350.table { 379.table {
351 width: 100%; 380 width: 100%;
352 border-collapse: collapse; 381 border-collapse: collapse;
353 font-size: 0.9rem; 382 font-size: 0.9rem;
354} 383}
355 384
356.table th, .table td { 385.table th,
357 text-align: left; 386.table td {
358 padding: 0.5rem; 387 text-align: left;
359 border-bottom: 1px solid var(--border); 388 padding: 0.5rem;
389 border-bottom: 1px solid var(--border);
360} 390}
361 391
362.table th { 392.table th {
363 color: var(--fg-muted); 393 color: var(--fg-muted);
364 font-weight: 600; 394 font-weight: 600;
365} 395}
366 396
367/* Flash messages */ 397/* Flash messages */
368.flash { 398.flash {
369 padding: 0.75rem 1rem; 399 padding: 0.75rem 1rem;
370 border-radius: var(--radius); 400 border-radius: var(--radius);
371 margin-bottom: 1rem; 401 margin-bottom: 1rem;
372 font-size: 0.9rem; 402 font-size: 0.9rem;
373} 403}
374 404
375.flash-err { 405.flash-err {
376 background: color-mix(in srgb, var(--err) 15%, transparent); 406 background: color-mix(in srgb, var(--err) 15%, transparent);
377 border: 1px solid var(--err); 407 border: 1px solid var(--err);
378 color: var(--err); 408 color: var(--err);
379} 409}
380 410
381.flash-ok { 411.flash-ok {
382 background: color-mix(in srgb, var(--ok) 15%, transparent); 412 background: color-mix(in srgb, var(--ok) 15%, transparent);
383 border: 1px solid var(--ok); 413 border: 1px solid var(--ok);
384 color: var(--ok); 414 color: var(--ok);
385} 415}
386 416
387.flash-warn { 417.flash-warn {
388 background: color-mix(in srgb, var(--warn) 15%, transparent); 418 background: color-mix(in srgb, var(--warn) 15%, transparent);
389 border: 1px solid var(--warn); 419 border: 1px solid var(--warn);
390 color: var(--warn); 420 color: var(--warn);
391} 421}
392 422
393/* Login page */ 423/* Login page */
394.login-page { 424.login-page {
395 display: flex; 425 display: flex;
396 flex-direction: column; 426 flex-direction: column;
397 align-items: center; 427 align-items: center;
398 justify-content: center; 428 justify-content: center;
399 min-height: 100vh; 429 min-height: 100vh;
400 max-width: 380px; 430 max-width: 380px;
401} 431}
402 432
403.login-form { 433.login-form {
404 width: 100%; 434 width: 100%;
405 display: flex; 435 display: flex;
406 flex-direction: column; 436 flex-direction: column;
407 gap: 1rem; 437 gap: 1rem;
408} 438}
409 439
410.login-form button { 440.login-form button {
411 margin-top: 0.5rem; 441 margin-top: 0.5rem;
412} 442}
413 443
414/* Responsive */ 444/* Responsive */
415@media (max-width: 600px) { 445@media (max-width: 600px) {
416 nav { 446 nav {
417 flex-direction: column; 447 flex-direction: column;
418 align-items: flex-start; 448 align-items: flex-start;
419 } 449 }
420 450
421 .instance-grid { 451 .instance-grid {
422 grid-template-columns: 1fr; 452 grid-template-columns: 1fr;
423 } 453 }
424} 454}
generated by cgit v1.2.3 (git 2.46.0) at 2026-11-08 05:57:53 +0000