| @@ -57,9 +57,11 @@ | ||
| 57 | 57 | |
| 58 | 58 | /* ── Left sidebar nav ────────────────────────────────────────────────── */ |
| 59 | 59 | |
| 60 | 60 | .metasync-layout-nav { |
| 61 | + position: -webkit-sticky; | |
| 61 | 62 | position: sticky; |
| 63 | + align-self: start; | |
| 62 | 64 | top: 52px; /* WP admin bar (32px) + breathing room */ |
| 63 | 65 | max-height: calc(100vh - 72px); |
| 64 | 66 | overflow-y: auto; |
| 65 | 67 | overflow-x: hidden; |
| @@ -193,9 +195,11 @@ | ||
| 193 | 195 | |
| 194 | 196 | /* ── Right promotional sidebar ──────────────────────────────────────── */ |
| 195 | 197 | |
| 196 | 198 | .metasync-layout-promo { |
| 199 | + position: -webkit-sticky; | |
| 197 | 200 | position: sticky; |
| 201 | + align-self: start; | |
| 198 | 202 | top: 52px; |
| 199 | 203 | display: flex; |
| 200 | 204 | min-width: 0; /* allow sticky column to shrink within its grid cell */ |
| 201 | 205 | flex-direction: column; |
| @@ -492,8 +496,40 @@ | ||
| 492 | 496 | } |
| 493 | 497 | |
| 494 | 498 | .metasync-header-compact .metasync-status.warning .status-text { |
| 495 | 499 | color: var(--dashboard-warning, #ffb900); |
| 500 | +} | |
| 501 | + | |
| 502 | +/* ── Static header connection status (render_static_header) ─────────── */ | |
| 503 | +/* the static-header badge previously had no styling; mirror the | |
| 504 | + compact-header rules so connected / disconnected / warning render. */ | |
| 505 | + | |
| 506 | +.metasync-header .metasync-status { | |
| 507 | + display: flex; | |
| 508 | + align-items: center; | |
| 509 | + gap: 6px; | |
| 510 | + font-size: 12px; | |
| 511 | + color: var(--dashboard-text-secondary); | |
| 512 | +} | |
| 513 | + | |
| 514 | +.metasync-header .metasync-status .status-dot { | |
| 515 | + width: 7px; | |
| 516 | + height: 7px; | |
| 517 | + border-radius: 50%; | |
| 518 | + flex-shrink: 0; | |
| 519 | + background: var(--dashboard-error); | |
| 520 | +} | |
| 521 | + | |
| 522 | +.metasync-header .metasync-status.connected .status-dot { | |
| 523 | + background: var(--dashboard-success); | |
| 524 | +} | |
| 525 | + | |
| 526 | +.metasync-header .metasync-status.connected .status-text { | |
| 527 | + color: var(--dashboard-success); | |
| 528 | +} | |
| 529 | + | |
| 530 | +.metasync-header .metasync-status.disconnected .status-text { | |
| 531 | + color: var(--dashboard-error); | |
| 496 | 532 | } |
| 497 | 533 | |
| 498 | 534 | /* ── Theme toggle icon sizing ────────────────────────────────────────── */ |
| 499 | 535 | |
