burncloud_client_shared/
styles.rs1pub const FLUENT_CSS: &str = r#"
2/* Fluent Design System Variables */
3:root {
4 /* Colors */
5 --accent-color: #0078d4;
6 --accent-light1: #106ebe;
7 --accent-light2: #2b88d8;
8 --accent-light3: #71afe5;
9 --accent-dark1: #005a9e;
10 --accent-dark2: #004578;
11 --accent-dark3: #002f52;
12
13 /* Neutrals */
14 --neutral-primary: #ffffff;
15 --neutral-secondary: #f3f2f1;
16 --neutral-tertiary: #edebe9;
17 --neutral-quaternary: #e1dfdd;
18 --neutral-quaternary-alt: #d2d0ce;
19 --neutral-quinary: #c8c6c4;
20 --neutral-senary: #a19f9d;
21
22 /* Text colors */
23 --text-primary: #323130;
24 --text-secondary: #605e5c;
25 --text-tertiary: #a19f9d;
26 --text-disabled: #c8c6c4;
27 --text-on-accent: #ffffff;
28
29 /* Background colors */
30 --bg-canvas: #faf9f8;
31 --bg-card: #ffffff;
32 --bg-card-hover: #f3f2f1;
33 --bg-card-selected: #edebe9;
34 --bg-layer: rgba(255, 255, 255, 0.7);
35 --bg-smoke: rgba(0, 0, 0, 0.4);
36
37 /* Elevations */
38 --elevation-card: 0 2px 4px rgba(0, 0, 0, 0.14), 0 0px 2px rgba(0, 0, 0, 0.12);
39 --elevation-flyout: 0 8px 16px rgba(0, 0, 0, 0.14), 0 0px 2px rgba(0, 0, 0, 0.12);
40 --elevation-dialog: 0 32px 64px rgba(0, 0, 0, 0.14), 0 0px 2px rgba(0, 0, 0, 0.12);
41
42 /* Border radius */
43 --radius-small: 2px;
44 --radius-medium: 4px;
45 --radius-large: 8px;
46 --radius-xlarge: 12px;
47
48 /* Spacing */
49 --spacing-xs: 4px;
50 --spacing-sm: 8px;
51 --spacing-md: 12px;
52 --spacing-lg: 16px;
53 --spacing-xl: 20px;
54 --spacing-xxl: 24px;
55 --spacing-xxxl: 32px;
56
57 /* Typography */
58 --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Segoe UI Variable', system-ui, ui-sans-serif, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
59 --font-size-caption: 12px;
60 --font-size-body: 14px;
61 --font-size-subtitle: 16px;
62 --font-size-title: 20px;
63 --font-size-large-title: 28px;
64 --font-size-display: 40px;
65
66 /* Animation */
67 --animation-fast: 100ms;
68 --animation-normal: 200ms;
69 --animation-slow: 300ms;
70 --animation-curve: cubic-bezier(0.33, 0, 0.67, 1);
71}
72
73/* Base styles */
74* {
75 box-sizing: border-box;
76}
77
78html, body {
79 margin: 0;
80 padding: 0;
81 font-family: var(--font-family);
82 font-size: var(--font-size-body);
83 color: var(--text-primary);
84 background-color: var(--bg-canvas);
85 -webkit-font-smoothing: antialiased;
86 -moz-osx-font-smoothing: grayscale;
87 overscroll-behavior: none;
88 -ms-scroll-chaining: none;
89}
90
91/* Acrylic backdrop effect */
92.acrylic {
93 background: rgba(255, 255, 255, 0.8);
94 backdrop-filter: blur(20px);
95 -webkit-backdrop-filter: blur(20px);
96 border: 1px solid rgba(255, 255, 255, 0.2);
97}
98
99.acrylic-dark {
100 background: rgba(32, 32, 32, 0.8);
101 backdrop-filter: blur(20px);
102 -webkit-backdrop-filter: blur(20px);
103 border: 1px solid rgba(255, 255, 255, 0.1);
104}
105
106/* Card styles */
107.card {
108 background: var(--bg-card);
109 border-radius: var(--radius-large);
110 box-shadow: var(--elevation-card);
111 border: 1px solid var(--neutral-quaternary);
112 transition: all var(--animation-normal) var(--animation-curve);
113}
114
115.card:hover {
116 background: var(--bg-card-hover);
117 box-shadow: var(--elevation-flyout);
118}
119
120.card-interactive {
121 cursor: pointer;
122}
123
124.card-interactive:hover {
125 transform: translateY(-1px);
126}
127
128.card-interactive:active {
129 transform: translateY(0);
130}
131
132/* Button styles */
133.btn {
134 display: inline-flex;
135 align-items: center;
136 justify-content: center;
137 gap: var(--spacing-sm);
138 padding: var(--spacing-sm) var(--spacing-lg);
139 border: 1px solid transparent;
140 border-radius: var(--radius-medium);
141 font-family: var(--font-family);
142 font-size: var(--font-size-body);
143 font-weight: 600;
144 cursor: pointer;
145 transition: all var(--animation-fast) var(--animation-curve);
146 text-decoration: none;
147 white-space: nowrap;
148 min-height: 32px;
149}
150
151.btn:focus-visible {
152 outline: 2px solid var(--accent-color);
153 outline-offset: 2px;
154}
155
156.btn-primary {
157 background: var(--accent-color);
158 color: var(--text-on-accent);
159}
160
161.btn-primary:hover {
162 background: var(--accent-dark1);
163}
164
165.btn-primary:active {
166 background: var(--accent-dark2);
167}
168
169.btn-secondary {
170 background: transparent;
171 color: var(--text-primary);
172 border-color: var(--neutral-quaternary);
173}
174
175.btn-secondary:hover {
176 background: var(--bg-card-hover);
177 border-color: var(--neutral-quinary);
178}
179
180.btn-secondary:active {
181 background: var(--bg-card-selected);
182}
183
184.btn-subtle {
185 background: transparent;
186 color: var(--text-secondary);
187}
188
189.btn-subtle:hover {
190 background: var(--bg-card-hover);
191 color: var(--text-primary);
192}
193
194.btn-subtle:active {
195 background: var(--bg-card-selected);
196}
197
198/* Input styles */
199.input {
200 display: block;
201 width: 100%;
202 padding: var(--spacing-sm) var(--spacing-md);
203 border: 1px solid var(--neutral-quaternary);
204 border-radius: var(--radius-medium);
205 font-family: var(--font-family);
206 font-size: var(--font-size-body);
207 color: var(--text-primary);
208 background: var(--bg-card);
209 transition: all var(--animation-fast) var(--animation-curve);
210}
211
212.input:hover {
213 border-color: var(--neutral-quinary);
214}
215
216.input:focus {
217 outline: none;
218 border-color: var(--accent-color);
219 box-shadow: 0 0 0 1px var(--accent-color);
220}
221
222.input:disabled {
223 color: var(--text-disabled);
224 background: var(--neutral-secondary);
225 cursor: not-allowed;
226}
227
228/* Progress bar styles */
229.progress {
230 width: 100%;
231 height: 4px;
232 background: var(--neutral-quaternary);
233 border-radius: var(--radius-small);
234 overflow: hidden;
235}
236
237.progress-fill {
238 height: 100%;
239 background: var(--accent-color);
240 border-radius: var(--radius-small);
241 transition: width var(--animation-normal) var(--animation-curve);
242}
243
244/* Status indicators */
245.status-indicator {
246 display: inline-flex;
247 align-items: center;
248 gap: var(--spacing-xs);
249 font-size: var(--font-size-caption);
250 font-weight: 600;
251}
252
253.status-dot {
254 width: 8px;
255 height: 8px;
256 border-radius: 50%;
257}
258
259.status-running .status-dot {
260 background: #107c10;
261 animation: pulse 2s infinite;
262}
263
264.status-stopped .status-dot {
265 background: #d13438;
266}
267
268.status-pending .status-dot {
269 background: #ff8c00;
270}
271
272@keyframes pulse {
273 0%, 100% { opacity: 1; }
274 50% { opacity: 0.5; }
275}
276
277/* Layout helpers */
278.flex {
279 display: flex;
280}
281
282.flex-col {
283 flex-direction: column;
284}
285
286.flex-1 {
287 flex: 1;
288}
289
290.w-full {
291 width: 100%;
292}
293
294.h-full {
295 height: 100%;
296}
297
298.grid {
299 display: grid;
300}
301
302.overflow-hidden {
303 overflow: hidden;
304}
305
306.overflow-x-auto {
307 overflow-x: auto;
308}
309
310.overflow-y-auto {
311 overflow-y: auto;
312}
313
314.border-t {
315 border-top: 1px solid var(--neutral-quaternary);
316}
317
318.border-b {
319 border-bottom: 1px solid var(--neutral-quaternary);
320}
321
322.text-left {
323 text-align: left;
324}
325
326.text-center {
327 text-align: center;
328}
329
330.text-right {
331 text-align: right;
332}
333
334.cursor-pointer {
335 cursor: pointer;
336}
337
338.min-height-200 {
339 min-height: 200px;
340}
341
342.items-center {
343 align-items: center;
344}
345
346.justify-between {
347 justify-content: space-between;
348}
349
350.justify-center {
351 justify-content: center;
352}
353
354.gap-xs { gap: var(--spacing-xs); }
355.gap-sm { gap: var(--spacing-sm); }
356.gap-md { gap: var(--spacing-md); }
357.gap-lg { gap: var(--spacing-lg); }
358.gap-xl { gap: var(--spacing-xl); }
359
360.p-xs { padding: var(--spacing-xs); }
361.p-sm { padding: var(--spacing-sm); }
362.p-md { padding: var(--spacing-md); }
363.p-lg { padding: var(--spacing-lg); }
364.p-xl { padding: var(--spacing-xl); }
365
366.m-xs { margin: var(--spacing-xs); }
367.m-sm { margin: var(--spacing-sm); }
368.m-md { margin: var(--spacing-md); }
369.m-lg { margin: var(--spacing-lg); }
370.m-xl { margin: var(--spacing-xl); }
371.m-0 { margin: 0; }
372
373.mb-xs { margin-bottom: var(--spacing-xs); }
374.mb-sm { margin-bottom: var(--spacing-sm); }
375.mb-md { margin-bottom: var(--spacing-md); }
376.mb-lg { margin-bottom: var(--spacing-lg); }
377.mb-xl { margin-bottom: var(--spacing-xl); }
378.mb-xxl { margin-bottom: var(--spacing-xxl); }
379.mb-xxxl { margin-bottom: var(--spacing-xxxl); }
380
381.mt-xs { margin-top: var(--spacing-xs); }
382.mt-sm { margin-top: var(--spacing-sm); }
383.mt-md { margin-top: var(--spacing-md); }
384.mt-lg { margin-top: var(--spacing-lg); }
385.mt-xl { margin-top: var(--spacing-xl); }
386.mt-xxl { margin-top: var(--spacing-xxl); }
387.mt-xxxl { margin-top: var(--spacing-xxxl); }
388.mt-auto { margin-top: auto; }
389
390/* Typography */
391.text-caption { font-size: var(--font-size-caption); }
392.text-body { font-size: var(--font-size-body); }
393.text-subtitle { font-size: var(--font-size-subtitle); }
394.text-title { font-size: var(--font-size-title); }
395.text-large-title { font-size: var(--font-size-large-title); }
396.text-display { font-size: var(--font-size-display); }
397
398.text-xxxl { font-size: 48px; }
399
400.text-primary { color: var(--text-primary); }
401.text-secondary { color: var(--text-secondary); }
402.text-tertiary { color: var(--text-tertiary); }
403.text-disabled { color: var(--text-disabled); }
404
405.font-normal { font-weight: 400; }
406.font-medium { font-weight: 500; }
407.font-semibold { font-weight: 600; }
408.font-bold { font-weight: 700; }
409
410/* App-specific styles */
411.app-container {
412 display: flex;
413 flex-direction: column;
414 height: 100vh;
415 background: var(--bg-canvas);
416 overflow: hidden;
417 overscroll-behavior: none;
418}
419
420.app-body {
421 display: flex;
422 flex: 1;
423 overflow: hidden;
424}
425
426.sidebar {
427 width: 250px;
428 background: var(--bg-card);
429 border-right: 1px solid var(--neutral-quaternary);
430 display: flex;
431 flex-direction: column;
432 flex-shrink: 0;
433}
434
435.main-content {
436 flex: 1;
437 display: flex;
438 flex-direction: column;
439 overflow: hidden;
440}
441
442.title-bar {
443 height: 48px;
444 background: var(--bg-card);
445 border-bottom: 1px solid var(--neutral-quaternary);
446 display: flex;
447 align-items: center;
448 justify-content: space-between;
449 padding: 0 var(--spacing-lg);
450 flex-shrink: 0;
451 -webkit-app-region: drag;
452}
453
454.title-bar button {
455 -webkit-app-region: no-drag;
456}
457
458.page-header {
459 padding: var(--spacing-xl) var(--spacing-xxl);
460 background: var(--bg-card);
461 border-bottom: 1px solid var(--neutral-quaternary);
462 flex-shrink: 0;
463}
464
465.page-content {
466 flex: 1;
467 padding: var(--spacing-xxl);
468 overflow-y: auto;
469}
470
471.nav-item {
472 display: flex;
473 align-items: center;
474 gap: var(--spacing-md);
475 padding: var(--spacing-md) var(--spacing-lg);
476 color: var(--text-secondary);
477 text-decoration: none;
478 border-radius: var(--radius-medium);
479 margin: 0 var(--spacing-sm);
480 transition: all var(--animation-fast) var(--animation-curve);
481 user-select: none;
482}
483
484.nav-item:hover {
485 background: var(--bg-card-hover);
486 color: var(--text-primary);
487 transform: translateX(4px);
488}
489
490.nav-item:active {
491 background: var(--bg-card-selected);
492 transform: translateX(2px) scale(0.98);
493}
494
495.nav-item.active {
496 background: var(--accent-color);
497 color: var(--text-on-accent);
498 box-shadow: var(--elevation-card);
499}
500
501.nav-item .icon {
502 font-size: 16px;
503 width: 16px;
504 text-align: center;
505}
506
507/* Model card styles */
508.model-card {
509 padding: var(--spacing-lg);
510}
511
512.model-header {
513 display: flex;
514 align-items: center;
515 justify-content: space-between;
516 margin-bottom: var(--spacing-md);
517}
518
519.model-title {
520 display: flex;
521 align-items: center;
522 gap: var(--spacing-md);
523 font-size: var(--font-size-subtitle);
524 font-weight: 600;
525}
526
527.model-actions {
528 display: flex;
529 gap: var(--spacing-sm);
530}
531
532.model-details {
533 display: grid;
534 grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
535 gap: var(--spacing-md);
536 color: var(--text-secondary);
537 font-size: var(--font-size-caption);
538}
539
540/* System monitor styles */
541.metric-card {
542 padding: var(--spacing-lg);
543 background: var(--bg-card);
544 border-radius: var(--radius-large);
545 border: 1px solid var(--neutral-quaternary);
546}
547
548.metric-header {
549 display: flex;
550 align-items: center;
551 justify-content: space-between;
552 margin-bottom: var(--spacing-md);
553}
554
555.metric-value {
556 font-size: var(--font-size-title);
557 font-weight: 600;
558 color: var(--text-primary);
559}
560
561.metric-label {
562 font-size: var(--font-size-caption);
563 color: var(--text-secondary);
564}
565
566/* Log viewer styles */
567.log-viewer {
568 background: #1e1e1e;
569 color: #d4d4d4;
570 font-family: 'Cascadia Code', 'Fira Code', 'Monaco', 'Consolas', monospace;
571 padding: var(--spacing-lg);
572 border-radius: var(--radius-medium);
573 height: 300px;
574 overflow-y: auto;
575 font-size: 13px;
576 line-height: 1.4;
577}
578
579.log-entry {
580 margin-bottom: 2px;
581}
582
583.log-timestamp {
584 color: #808080;
585}
586
587.log-level-info {
588 color: #4fc1ff;
589}
590
591.log-level-warn {
592 color: #ffcc02;
593}
594
595.log-level-error {
596 color: #f85149;
597}
598
599.log-level-debug {
600 color: #a5a5a5;
601}
602
603/* Scrollbar styles */
604::-webkit-scrollbar {
605 width: 8px;
606 height: 8px;
607}
608
609::-webkit-scrollbar-track {
610 background: var(--neutral-secondary);
611}
612
613::-webkit-scrollbar-thumb {
614 background: var(--neutral-quinary);
615 border-radius: var(--radius-medium);
616}
617
618::-webkit-scrollbar-thumb:hover {
619 background: var(--neutral-senary);
620}
621
622/* Dark theme support */
623@media (prefers-color-scheme: dark) {
624 :root {
625 --neutral-primary: #2d2d30;
626 --neutral-secondary: #3c3c3c;
627 --neutral-tertiary: #484848;
628 --neutral-quaternary: #5a5a5a;
629 --neutral-quaternary-alt: #6d6d6d;
630 --neutral-quinary: #808080;
631 --neutral-senary: #a6a6a6;
632
633 --text-primary: #ffffff;
634 --text-secondary: #cccccc;
635 --text-tertiary: #a6a6a6;
636 --text-disabled: #6d6d6d;
637
638 --bg-canvas: #1e1e1e;
639 --bg-card: #2d2d30;
640 --bg-card-hover: #3c3c3c;
641 --bg-card-selected: #484848;
642 --bg-layer: rgba(45, 45, 48, 0.7);
643 --bg-smoke: rgba(0, 0, 0, 0.6);
644 }
645}
646"#;