/** * ╔══════════════════════════════════════════════════════════════╗ * ║ STRATWATCH — SHARED TOPBAR sw-topbar.css v136 ║ * ║ Exact Theatre-v2 visual standard for all secondary pages ║ * ╚══════════════════════════════════════════════════════════════╝ * * This file uses the same CSS custom property names as Theatre-v2. * swTopbar.applyTheme() writes all required variables to :root. */ /* ── Host body layout ─────────────────────────────────────────────── */ body.sw-topbar-host { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; } /* ── Topbar container ─────────────────────────────────────────────── */ #sw-topbar { height: 44px; min-height: 44px; display: flex; align-items: center; gap: 6px; padding: 0 10px; background: var(--bg2); border-bottom: 1px solid var(--border); position: relative; z-index: 200; /* low — dropdown uses portal at z-index:999990 */ flex-shrink: 0; overflow-x: auto; scrollbar-width: none; } #sw-topbar::-webkit-scrollbar { display: none; } /* ── Logo ─────────────────────────────────────────────────────────── */ .t2-logo { display:flex; align-items:center; gap:8px; flex-shrink:0; } .t2-logo-ico { width:30px; height:30px; border-radius:6px; background:var(--acc-dim); border:1px solid var(--border-hi); display:flex; align-items:center; justify-content:center; color:var(--acc); font-size:14px; } .t2-logo-title { font-family:var(--fd); font-size:13px; font-weight:700; color:var(--text-hi); letter-spacing:2px; } .t2-logo-badge { font-family:var(--fm); font-size:7px; letter-spacing:2px; color:var(--acc); background:var(--acc-dim); border:1px solid var(--border-hi); border-radius:3px; padding:2px 6px; } .t2-logo-sub { font-family:var(--fm); font-size:8px; color:var(--text-lo); letter-spacing:1px; margin-top:1px; } /* ── Separator ────────────────────────────────────────────────────── */ .t2-sep { width:1px; height:20px; background:var(--border); flex-shrink:0; } /* ════════════════════════════════════════════════════════════════════ PLATFORM DROPDOWN Menu is portal-ed to by sw-topbar.js on first open. position:fixed means it is never clipped by topbar overflow or trapped behind panel stacking contexts. z-index:999990 beats all page panels (typical max is ~99999). ════════════════════════════════════════════════════════════════════ */ .t2-plat-dd { position:relative; display:inline-flex; align-items:center; flex-shrink:0; } .t2-plat-btn { font-family:var(--fd); font-size:11px; letter-spacing:2px; padding:4px 10px; border-radius:3px; cursor:pointer; border:1px solid var(--border-hi); background:var(--acc-dim); color:var(--acc); display:flex; align-items:center; gap:5px; white-space:nowrap; transition:border-color .15s,background .15s; user-select:none; } .t2-plat-btn:hover { background:rgba(0,210,255,0.18); border-color:var(--acc); color:var(--acc); } /* Menu: position:fixed, top/left set by JS _positionMenu() each open */ .t2-plat-menu { display:none; position:fixed; top:0; left:0; background:var(--panel2); border:1px solid var(--border-hi); border-radius:5px; min-width:170px; z-index:999990; overflow:hidden; box-shadow:0 8px 32px var(--shadow); } .t2-plat-menu.open { display:block; animation:swTbFadeIn .15s ease; } @keyframes swTbFadeIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } } .t2-plat-item { display:flex; align-items:center; gap:9px; padding:8px 13px; font-family:var(--fd); font-size:10px; letter-spacing:1.5px; color:var(--text-lo); text-decoration:none; border-bottom:1px solid var(--border); transition:background .12s,color .12s; } .t2-plat-item:last-child { border-bottom:none; } .t2-plat-item:hover { background:var(--acc-dim); color:var(--text-hi); } .t2-plat-item.current { background:var(--acc-dim); color:var(--acc); cursor:default; } .t2-plat-dot { margin-left:auto; width:5px; height:5px; background:var(--grn); border-radius:50%; flex-shrink:0; animation:swTbPulse 2s infinite; } @keyframes swTbPulse { 0%,100%{opacity:1} 50%{opacity:0.4} } /* ── Pizza nav button ─────────────────────────────────────────────── */ .t2-nav-btn { font-family:var(--fm); font-size:9px; letter-spacing:1.5px; color:var(--text); background:none; border:1px solid var(--border); border-radius:4px; padding:4px 10px; flex-shrink:0; cursor:pointer; transition:border-color .15s,color .15s; } .t2-nav-btn:hover { border-color:var(--border-hi); color:var(--acc); } .t2-pizza-ind { font-family:var(--fd); font-size:9px; font-weight:700; color:#ff9800; margin-left:2px; } /* ── SRE wrap ─────────────────────────────────────────────────────── */ .t2-defcon-wrap { display:flex; align-items:center; gap:4px; background:rgba(255,183,0,0.12); border:1px solid rgba(255,183,0,0.3); border-radius:10px; padding:3px 9px; cursor:pointer; flex-shrink:0; transition:border-color .2s; } .t2-defcon-wrap:hover { border-color:rgba(255,183,0,0.6); } .t2-defcon-lbl { font-family:var(--fm); font-size:9px; color:var(--warn); } /* ── Clock ────────────────────────────────────────────────────────── */ .t2-clock-wrap { display:flex; flex-direction:column; align-items:flex-end; flex-shrink:0; } .t2-clock { font-family:var(--fm); font-size:11px; color:var(--text); white-space:nowrap; } /* ── Region select ────────────────────────────────────────────────── */ .t2-region-sel { font-family:var(--fm); font-size:9px; letter-spacing:1px; background:var(--bg3); color:var(--text); border:1px solid var(--border); border-radius:4px; padding:4px 7px; cursor:pointer; flex-shrink:0; } .t2-region-sel:focus { outline:none; border-color:var(--acc); } /* ── Theme buttons ────────────────────────────────────────────────── */ .t2-theme-btns { display:flex; gap:4px; flex-shrink:0; } .t2-theme-btn { font-family:var(--fd); font-size:10px; letter-spacing:1.5px; color:var(--text-lo); background:none; border:1px solid var(--border); border-radius:12px; padding:4px 10px; cursor:pointer; transition:all .15s; } .t2-theme-btn:hover, .t2-theme-btn.active { border-color:var(--border-hi); color:var(--text-hi); } .t2-theme-btn.active { background:var(--acc-dim); color:var(--acc); } /* ── Generic topbar button (icon buttons + SHOW/HIDE text buttons) ── */ .t2-tbtn { min-width:28px; height:28px; border-radius:4px; display:flex; align-items:center; justify-content:center; background:none; border:1px solid var(--border); color:var(--text); font-size:11px; flex-shrink:0; cursor:pointer; transition:border-color .15s,color .15s; /* Text panel buttons need padding */ padding:0 9px; font-family:var(--fm); letter-spacing:1.5px; font-size:9px; white-space:nowrap; } .t2-tbtn:hover { border-color:var(--border-hi); color:var(--text-hi); } .t2-tbtn.on { border-color:var(--acc); color:var(--acc); } /* ── No-data metric state ─────────────────────────────────────────── */ .sw-no-data { color:var(--text-lo) !important; } /* ── Mobile hamburger (hidden on desktop) ─────────────────────────── */ #sw-tb-mob-menu { display:none !important; } /* ════════════════════════════════════════════════════════════════════ PIZZA + SRE MODAL CSS Injected into by sw-topbar.js. Same class names as Theatre-v2 so they render identically across all pages. ════════════════════════════════════════════════════════════════════ */ .t2-modal-backdrop { position:fixed; inset:0; z-index:9100; display:flex; align-items:flex-start; justify-content:center; padding:20px 12px; overflow-y:auto; background:rgba(0,0,0,0.72); backdrop-filter:blur(8px); } .t2-modal-card { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg,8px); color:var(--text); font-family:var(--fb); max-width:90vw; max-height:88vh; max-height:88dvh; overflow-y:auto; box-shadow:0 8px 48px var(--shadow); animation:swTbFadeIn 0.2s ease; margin:auto; flex-shrink:0; } .t2-pizza-content { padding:20px; } .t2-pizza-ring-wrap { display:flex; flex-direction:column; align-items:center; gap:6px; margin-bottom:16px; } .t2-defcon-content { padding:20px; } .t2-defcon-lvl { display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:6px; margin-bottom:6px; border:1px solid rgba(255,255,255,0.06); transition:all .3s; } .t2-defcon-num { font-family:var(--fd); font-size:22px; font-weight:900; width:36px; flex-shrink:0; text-align:center; } .t2-defcon-name { font-family:var(--fd); font-size:11px; font-weight:700; letter-spacing:1px; } .t2-defcon-desc { font-family:var(--fb); font-size:11px; color:var(--text-lo); } .t2-sre-disclaimer { font-family:var(--fb); font-size:10px; color:var(--text-lo); background:rgba(255,183,0,0.06); border:1px solid rgba(255,183,0,0.15); border-radius:4px; padding:7px 10px; margin-bottom:12px; line-height:1.5; } .t2-sre-disclaimer strong { color:var(--warn); } /* ── Responsive ───────────────────────────────────────────────────── */ @media (max-width:900px) { .t2-logo-sub, .t2-sep { display:none !important; } .t2-clock { font-size:9px; } #sw-tb-mob-menu { display:flex !important; } } @media (max-width:600px) { #sw-topbar { padding:0 8px; gap:4px; } .t2-nav-btn, .t2-defcon-wrap, .t2-region-sel, .t2-theme-btns { display:none !important; } } @media (max-width:767px) { .t2-modal-card { max-width:95vw !important; } } /* ── Small laptop readability (900–1199px) ────────────────────────── */ @media (min-width:900px) and (max-width:1199px) { /* Logo: keep identity visible */ .t2-logo-title { font-size:12px; letter-spacing:2px; } .t2-logo-badge { font-size:8px; } /* Platform dropdown button: readable */ .t2-plat-btn { font-size:10px !important; letter-spacing:1.5px !important; padding:5px 11px !important; } /* Platform menu items: comfortable tap/click */ .t2-plat-item { font-size:10px !important; padding:9px 14px !important; min-height:36px; } /* Topbar icon buttons: slightly larger */ .t2-tbtn { min-width:30px !important; height:30px !important; font-size:11px !important; } /* Clock: clearly readable */ .t2-clock { font-size:10px !important; } /* DEFCON/SRE wrap: visible label */ .t2-defcon-lbl { font-size:9.5px !important; letter-spacing:0.5px !important; } /* Pizza nav button: visible */ .t2-nav-btn { font-size:9.5px !important; padding:5px 11px !important; } /* Theme buttons: usable */ .t2-theme-btn { font-size:9.5px !important; padding:4px 10px !important; } /* Panel SHOW/HIDE buttons */ .t2-tbtn[style*="letter-spacing"] { font-size:9.5px !important; } } /* ── Light theme adjustments ──────────────────────────────────────── */ [data-theme="light"] .t2-plat-menu { box-shadow:0 8px 32px var(--shadow); } [data-theme="light"] .t2-plat-btn { border-color:var(--border-hi); background:var(--acc-dim); }