/* ms-dock.css — 3-column operations layout (PanelDock.razor) * * LEFT sidebar │ resizer │ CENTER (map) │ resizer │ RIGHT sidebar * * Pure flexbox: the sidebars are fixed-basis flex items whose width is driven * by the --ms-dock-left-w / --ms-dock-right-w custom properties (set inline on * .ms-dock by Blazor, overridden live by the JS resizer). The center grows. * * RTL: the whole thing is a flex row, so `dir="rtl"` on mirrors the * visual order automatically — the logical "left" sidebar simply renders on * the right. No direction-specific rules needed here; the resize math that * does care about the physical edge lives in ms-panels.js. */ /* The Lagebild shell defaults to the legacy 3-column grid; the docked variant switches it to a plain block so the single PanelDock child fills it (the dock does its own 3-column flex split internally). Mirrors how .ms-lagebild--floating neutralised the grid for the old HUD. */ .ms-lagebild--docked { display: block; position: relative; overflow: hidden; } .ms-dock { display: flex; flex-direction: row; align-items: stretch; width: 100%; height: 100%; position: relative; overflow: hidden; background: var(--ms-bg2); } /* ---- sidebars ---- */ /* Command-center backdrop: a faint tactical plotting grid behind the panels. color-mix keeps it tied to --ms-grid so it re-tints per theme and stays subtle (shows only in the gaps between the solid panels). */ .ms-dock-side { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; padding: 8px; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; min-height: 0; background-color: var(--ms-bg); background-image: linear-gradient(color-mix(in srgb, var(--ms-grid) 28%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--ms-grid) 28%, transparent) 1px, transparent 1px); background-size: 38px 38px, 38px 38px; } /* The left sidebar carries a hairline accent on its inner edge so the console reads as a framed instrument bank rather than a floating list. */ .ms-dock-side-left { flex-basis: var(--ms-dock-left-w, 300px); border-inline-end: 1px solid var(--ms-panel-border); } .ms-dock-side-right { flex-basis: var(--ms-dock-right-w, 320px); border-inline-start: 1px solid var(--ms-panel-border); } .ms-dock-side::-webkit-scrollbar { width: 6px; } .ms-dock-side::-webkit-scrollbar-thumb { background: var(--ms-panel-border); } .ms-dock-side::-webkit-scrollbar-track { background: transparent; } /* ---- center (map) ---- */ .ms-dock-center { flex: 1 1 0; position: relative; min-width: 0; min-height: 0; } /* The map view fills the center column. */ .ms-dock-center .ms-lagebild-map { position: absolute; inset: 0; } /* ---- resizer ---- */ .ms-dock-resizer { flex: 0 0 6px; align-self: stretch; cursor: col-resize; background: var(--ms-panel-border); opacity: 0.5; transition: opacity 120ms ease, background 120ms ease; touch-action: none; /* let pointer events drive the drag, not scrolling */ } .ms-dock-resizer:hover, .ms-dock-resizer.is-resizing { opacity: 1; background: var(--ms-accent); } /* ---- panel chrome ---- */ /* Instrument-bezel look: solid panel body, a thin accent rule along the top edge, and a soft drop shadow so each panel reads as a discrete console module sitting above the plotting-grid backdrop. */ .ms-dock-panel { flex: 0 0 auto; display: flex; flex-direction: column; border: 1px solid var(--ms-panel-border); border-radius: 3px; background: var(--ms-panel); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), inset 0 1px 0 color-mix(in srgb, var(--ms-text) 6%, transparent); transition: opacity 120ms ease, box-shadow 120ms ease; } .ms-dock-panel.is-dragging { opacity: 0.45; } /* Header bar: gradient instrument label strip with a "power-on" accent rule along the top edge. */ .ms-dock-panel-bar { display: flex; align-items: center; gap: 6px; padding: 5px 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--ms-panel-header) 100%, transparent), color-mix(in srgb, var(--ms-panel-header) 78%, var(--ms-panel))); border-top: 2px solid color-mix(in srgb, var(--ms-accent) 70%, transparent); border-bottom: 1px solid var(--ms-panel-border); border-top-left-radius: 3px; border-top-right-radius: 3px; cursor: grab; user-select: none; } .ms-dock-panel-bar:active { cursor: grabbing; } .ms-dock-panel.is-collapsed .ms-dock-panel-bar { border-bottom-width: 0; } .ms-dock-panel-grip { color: var(--ms-text-mute); font-size: 12px; line-height: 1; cursor: grab; } /* Status-LED glyph — a small accent marker that reads as an "armed" indicator on each module header. */ .ms-dock-panel-glyph { color: var(--ms-accent); font-size: 12px; line-height: 1; text-shadow: 0 0 6px color-mix(in srgb, var(--ms-accent) 55%, transparent); } .ms-dock-panel-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--ms-font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ms-text); } .ms-dock-panel-btn { flex: 0 0 auto; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: var(--ms-text-dim); font-size: 12px; line-height: 1; cursor: pointer; border-radius: 2px; } .ms-dock-panel-btn:hover { background: var(--ms-bg2); color: var(--ms-text); } .ms-dock-panel-close:hover { color: var(--ms-alert); } /* The panel body hosts the existing self-contained
. Reset its outer border — the dock chrome already frames it. */ .ms-dock-panel-body > .ms-panel { border: 0; } /* ---- drag affordance — pure CSS, toggled by one root class ---- */ .ms-dock.is-dragging-active .ms-dock-side { outline: 1px dashed var(--ms-accent); outline-offset: -3px; } /* ---- reopen / reset menu ---- */ .ms-dock-reopen { position: absolute; inset-block-end: 12px; inset-inline-end: 12px; z-index: 30; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 6px; } .ms-dock-reopen-btn { width: 34px; height: 34px; border: 1px solid var(--ms-panel-border); background: var(--ms-panel-header); color: var(--ms-text); font-size: 18px; line-height: 1; cursor: pointer; border-radius: 50%; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); } .ms-dock-reopen-btn:hover { border-color: var(--ms-accent); color: var(--ms-accent); } .ms-dock-reopen.open .ms-dock-reopen-btn { background: var(--ms-accent); color: var(--ms-bg2); } .ms-dock-reopen-list { display: flex; flex-direction: column; min-width: 180px; padding: 4px; border: 1px solid var(--ms-panel-border); background: var(--ms-panel); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } .ms-dock-reopen-item, .ms-dock-reset { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; background: transparent; color: var(--ms-text); font-size: 12px; text-align: start; cursor: pointer; } .ms-dock-reopen-item:hover, .ms-dock-reset:hover { background: var(--ms-panel-header); } .ms-dock-reopen-glyph { color: var(--ms-accent); } .ms-dock-reopen-add { margin-inline-start: auto; color: var(--ms-text-mute); } .ms-dock-reset { margin-top: 4px; border-top: 1px solid var(--ms-panel-border); color: var(--ms-text-dim); justify-content: center; } .ms-dock-reopen-empty { padding: 6px 8px; color: var(--ms-text-mute); font-size: 12px; } /* ---- fullscreen map (F) — hide the dock chrome, let the map fill ---- */ .ms-map-fullscreen .ms-dock-side, .ms-map-fullscreen .ms-dock-resizer { display: none; } /* ---- narrow viewports — keep it usable without a mobile redesign ---- */ @media (max-width: 1024px) { .ms-dock-side-left { flex-basis: min(var(--ms-dock-left-w, 300px), 240px); } .ms-dock-side-right { flex-basis: min(var(--ms-dock-right-w, 320px), 240px); } } /* ---- MissionsPanel list (new panel) ---- */ .ms-mission-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .ms-mission-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--ms-panel-border); } .ms-mission-row:last-child { border-bottom: 0; } .ms-mission-l { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; } .ms-mission-prio { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; } .ms-mission-unit { font-weight: 600; color: var(--ms-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ms-mission-type { color: var(--ms-text-dim); font-size: 11px; white-space: nowrap; } .ms-mission-r { flex: 0 0 auto; } .ms-mission-status { font-family: var(--ms-font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ms-accent); }