|
45 | 45 | } |
46 | 46 |
|
47 | 47 | .status { |
| 48 | + --status-accent: var(--text-subtle); |
| 49 | + --status-bg: var(--surface-chip); |
| 50 | + --status-fg: var(--text-subtle); |
48 | 51 | font-size: 0.9rem; |
| 52 | + font-weight: 600; |
| 53 | + line-height: 1.2; |
| 54 | + display: inline-flex; |
| 55 | + align-items: center; |
| 56 | + gap: 8px; |
49 | 57 | padding: 8px 12px; |
50 | | - border-radius: 999px; |
51 | | - background: var(--surface-chip); |
52 | | - color: var(--text-subtle); |
| 58 | + border-radius: 10px; |
| 59 | + border: 1px solid color-mix(in srgb, var(--status-accent) 40%, var(--border-subtle)); |
| 60 | + background: var(--status-bg); |
| 61 | + color: var(--status-fg); |
| 62 | +} |
| 63 | + |
| 64 | +.status::before { |
| 65 | + content: ''; |
| 66 | + width: 8px; |
| 67 | + height: 8px; |
| 68 | + border-radius: 2px; |
| 69 | + background: var(--status-accent); |
| 70 | + flex: none; |
53 | 71 | } |
54 | 72 |
|
55 | 73 | .status--neutral { |
56 | | - background: var(--surface-chip); |
57 | | - color: var(--text-subtle); |
| 74 | + --status-accent: var(--text-subtle); |
| 75 | + --status-bg: var(--surface-chip); |
| 76 | + --status-fg: var(--text-subtle); |
| 77 | + border-color: color-mix(in srgb, var(--border-subtle) 72%, transparent); |
58 | 78 | } |
59 | 79 |
|
60 | 80 | .status--pending { |
61 | | - background: color-mix(in srgb, var(--accent) 18%, transparent); |
62 | | - color: color-mix(in srgb, var(--panel-text) 72%, var(--accent)); |
| 81 | + --status-accent: color-mix(in srgb, var(--accent) 88%, var(--panel-text)); |
| 82 | + --status-bg: color-mix(in srgb, var(--accent) 18%, transparent); |
| 83 | + --status-fg: color-mix(in srgb, var(--panel-text) 72%, var(--accent)); |
63 | 84 | } |
64 | 85 |
|
65 | 86 | .status--error { |
66 | | - background: color-mix(in srgb, rgb(var(--danger-rgb)) 20%, transparent); |
67 | | - color: color-mix(in srgb, rgb(var(--danger-rgb)) 85%, var(--panel-text)); |
| 87 | + --status-accent: color-mix(in srgb, rgb(var(--danger-rgb)) 88%, var(--panel-text)); |
| 88 | + --status-bg: color-mix(in srgb, rgb(var(--danger-rgb)) 20%, transparent); |
| 89 | + --status-fg: color-mix(in srgb, rgb(var(--danger-rgb)) 85%, var(--panel-text)); |
68 | 90 | } |
69 | 91 |
|
70 | 92 | .app-grid { |
|
333 | 355 | } |
334 | 356 | } |
335 | 357 |
|
| 358 | +@media (max-width: 640px) { |
| 359 | + .app-header { |
| 360 | + flex-direction: column; |
| 361 | + align-items: flex-start; |
| 362 | + justify-content: flex-start; |
| 363 | + gap: 10px; |
| 364 | + } |
| 365 | + |
| 366 | + .app-header p { |
| 367 | + max-width: 32ch; |
| 368 | + } |
| 369 | + |
| 370 | + .app-header .status { |
| 371 | + align-self: flex-start; |
| 372 | + } |
| 373 | +} |
| 374 | + |
336 | 375 | .layout-toggle { |
337 | 376 | display: inline-grid; |
338 | 377 | place-content: center; |
|
441 | 480 | } |
442 | 481 |
|
443 | 482 | .app-grid { |
| 483 | + --mobile-editor-max-height: clamp(280px, 42dvh, 520px); |
| 484 | + --mobile-preview-max-height: clamp(320px, 52dvh, 680px); |
444 | 485 | grid-template-columns: minmax(0, 1fr); |
445 | 486 | grid-template-rows: auto auto auto; |
446 | 487 | height: auto; |
|
450 | 491 | 'preview'; |
451 | 492 | } |
452 | 493 |
|
453 | | - .component-panel, |
454 | | - .styles-panel, |
455 | | - .preview-panel, |
456 | | - .app-grid--preview-right .component-panel, |
457 | | - .app-grid--preview-right .styles-panel, |
458 | | - .app-grid--preview-right .preview-panel, |
459 | | - .app-grid--preview-left .component-panel, |
460 | | - .app-grid--preview-left .styles-panel, |
461 | | - .app-grid--preview-left .preview-panel { |
| 494 | + .app-grid :is(.component-panel, .styles-panel, .preview-panel) { |
462 | 495 | height: auto; |
463 | | - min-height: var(--expanded-panel-min-height); |
464 | 496 | } |
465 | 497 |
|
466 | | - .component-panel.panel--collapsed-horizontal, |
467 | | - .component-panel.panel--collapsed-vertical, |
468 | | - .styles-panel.panel--collapsed-horizontal, |
469 | | - .styles-panel.panel--collapsed-vertical, |
470 | | - .preview-panel.panel--collapsed-horizontal, |
471 | | - .preview-panel.panel--collapsed-vertical { |
| 498 | + .app-grid :is(.component-panel, .styles-panel) { |
| 499 | + min-height: min(var(--expanded-panel-min-height), var(--mobile-editor-max-height)); |
| 500 | + max-height: var(--mobile-editor-max-height); |
| 501 | + } |
| 502 | + |
| 503 | + .app-grid .preview-panel { |
| 504 | + min-height: min(var(--expanded-panel-min-height), var(--mobile-preview-max-height)); |
| 505 | + max-height: var(--mobile-preview-max-height); |
| 506 | + } |
| 507 | + |
| 508 | + .app-grid :is(.component-panel, .styles-panel) .panel-content { |
| 509 | + min-height: 0; |
| 510 | + overflow: auto; |
| 511 | + } |
| 512 | + |
| 513 | + .app-grid .preview-panel .panel-content { |
| 514 | + min-height: 0; |
| 515 | + overflow: auto; |
| 516 | + } |
| 517 | + |
| 518 | + .app-grid |
| 519 | + :is(.component-panel, .styles-panel, .preview-panel):is( |
| 520 | + .panel--collapsed-horizontal, |
| 521 | + .panel--collapsed-vertical |
| 522 | + ) { |
472 | 523 | min-height: 0; |
473 | 524 | } |
474 | 525 |
|
|
0 commit comments