feat(tgu-ops-ui): add pass selector styles and update architecture docs

tgu-editor.css: add .map-pass-selector styles — floating panel with semi-transparent background, range slider track, fill, tick marks, draggable thumbs, and per-handle labels showing orbit number + UTC time. docs: update PCP_ARCHITECTURE.md to reflect pcp-tgu-ops-ui is now a real SPA (not a placeholder); add PCP_TGU_OPS_UI_CAPABILITY_MAP.md describing feature areas and data sources for the TGU ops frontend. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-31 16:08:30 +03:00
parent 6d1b8e7cde
commit d7dda1e2f5
3 changed files with 654 additions and 1 deletions
@@ -236,6 +236,166 @@
  background: #0b0d0e;
 }

+.map-pass-selector {
+  position: absolute;
+  top: 0.55rem;
+  left: 0.55rem;
+  z-index: 20;
+  width: 28rem;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: rgba(23, 26, 28, 0.93);
+  backdrop-filter: blur(6px);
+  font-size: 0.78rem;
+  user-select: none;
+}
+
+.map-pass-selector__header {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  padding: 0.4rem 0.65rem;
+}
+
+.map-pass-selector__title {
+  font-weight: 600;
+  color: var(--text);
+  flex-shrink: 0;
+}
+
+.map-pass-selector__nums {
+  color: var(--accent);
+  font-family: var(--mono);
+  font-size: 0.72rem;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.map-pass-selector__times {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: 0.66rem;
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.map-pass-selector__reset {
+  flex-shrink: 0;
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  padding: 0.06rem 0.4rem;
+  background: transparent;
+  color: var(--text-muted);
+  font-size: 0.66rem;
+  line-height: 1.4;
+}
+
+.map-pass-selector__reset:hover {
+  background: var(--bg-elevated);
+  color: var(--text);
+}
+
+.map-pass-selector__body {
+  padding: 0.1rem 1rem 0.55rem;
+  cursor: pointer;
+}
+
+/* Track line */
+.map-pass-selector__track {
+  position: relative;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--line);
+  margin: 0.85rem 0 0;
+}
+
+.map-pass-selector__fill {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  background: var(--accent);
+  border-radius: 2px;
+  pointer-events: none;
+}
+
+/* Orbit tick marks */
+.map-pass-selector__tick {
+  position: absolute;
+  top: -3px;
+  width: 2px;
+  height: 10px;
+  margin-left: -1px;
+  border-radius: 1px;
+  background: var(--line-soft);
+  pointer-events: none;
+  transition: background 0.1s;
+}
+
+.map-pass-selector__tick.is-active {
+  background: rgba(104, 195, 189, 0.4);
+}
+
+/* Draggable handles */
+.map-pass-selector__thumb {
+  position: absolute;
+  top: 50%;
+  width: 14px;
+  height: 14px;
+  margin-left: -7px;
+  margin-top: -7px;
+  border-radius: 50%;
+  background: var(--accent);
+  border: 2px solid var(--bg-panel);
+  box-shadow: 0 0 0 1px var(--accent);
+  cursor: grab;
+  z-index: 2;
+  transition: transform 0.08s;
+}
+
+.map-pass-selector__thumb:active {
+  cursor: grabbing;
+  transform: scale(1.18);
+}
+
+/* Handle labels */
+.map-pass-selector__labels {
+  position: relative;
+  height: 2.2rem;
+  margin-top: 0.25rem;
+  pointer-events: none;
+}
+
+.map-pass-selector__label {
+  position: absolute;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.05rem;
+}
+
+.map-pass-selector__label--right {
+  transform: translateX(-50%);
+}
+
+.map-pass-selector__label-num {
+  font-weight: 700;
+  font-size: 0.72rem;
+  color: var(--accent);
+  line-height: 1;
+}
+
+.map-pass-selector__label-time {
+  font-family: var(--mono);
+  font-size: 0.6rem;
+  color: var(--text-dim);
+  white-space: nowrap;
+  line-height: 1;
+}
+
 .tgu-editor-map-stage .tgu-2d-map {
  min-height: 6rem;
 }