/* * ═══════════════════════════════════════════════════════════════════ * ridemap-patch.css — spatial edition * * Manages the three resize handles and three panel-edge toggle tabs * that ridemap-patch.js injects at runtime. * * All toggle buttons are appended to and use * position:fixed so they float independently of the glass panels. * Panel positions track CSS custom properties: * --sbw sidebar width (set by patch.js) * --stw stats width (set by patch.js) * --chh chart height (set by patch.js) * --panel-gap (14px, from style.css) * ═══════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════ 1. PANEL BASE — override any conflicting declarations ══════════════════════════════════════════════════════════════════ */ /* Panels are already position:fixed in style.css. Patch only adds overflow:hidden and the resize cursor. */ #sidebar, #sp, #cs { overflow: hidden !important; } /* Side-panel transitions (also carries "bottom" so panels smoothly expand when the chart strip is toggled). */ #sidebar { transition: width 220ms cubic-bezier(.4,0,.2,1), bottom 200ms cubic-bezier(.4,0,.2,1) !important; } #sp { transition: width 220ms cubic-bezier(.4,0,.2,1), bottom 200ms cubic-bezier(.4,0,.2,1) !important; } #cs { transition: height 200ms cubic-bezier(.4,0,.2,1), left 220ms cubic-bezier(.4,0,.2,1), right 220ms cubic-bezier(.4,0,.2,1) !important; } /* Disable transition while user is actively dragging */ #sidebar.rm-drag-active, #sp.rm-drag-active, #cs.rm-drag-active { transition: none !important; } /* Collapsed states */ #sp.rm-col { width: 0 !important; min-width: 0 !important; border-color: transparent !important; box-shadow: none !important; overflow: hidden !important; } #cs.rm-col { height: 0 !important; min-height: 0 !important; border-color: transparent !important; box-shadow: none !important; overflow: hidden !important; } /* ══════════════════════════════════════════════════════════════════ 2. RESIZE HANDLES ══════════════════════════════════════════════════════════════════ */ .rm-rh { position: absolute; z-index: 10; background: transparent; transition: background 160ms ease; flex-shrink: 0; } /* Vertical handle (sidebar / stats panel) */ .rm-rh.rm-v { top: 0; bottom: 0; width: 5px; cursor: col-resize; } /* Horizontal handle (chart strip) */ .rm-rh.rm-h { left: 0; right: 0; height: 6px; cursor: row-resize; } /* Active / hover highlight */ .rm-rh:hover, .rm-rh.rm-drag { background: var(--acc); opacity: 0.35; } /* Sidebar handle — right edge */ #rm-sb-rh { right: 0; top: 0; } /* Stats handle — left edge */ #rm-sp-rh { left: 0; top: 0; } /* Chart handle — top edge with drag pill affordance */ #rm-cs-rh { top: 0; left: 0; } #rm-cs-rh::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 36px; height: 3px; border-radius: 2px; background: var(--bg5); pointer-events: none; transition: background 160ms; } #rm-cs-rh:hover::after, #rm-cs-rh.rm-drag::after { background: var(--acc); } /* ══════════════════════════════════════════════════════════════════ 3. PANEL-EDGE TOGGLE TABS ══════════════════════════════════════════════════════════════════ */ /* ── Common base for all three tabs ───────────────────────────── */ .rm-toggle { /* Appended to by patch.js — must be fixed */ position: fixed !important; z-index: 510; display: flex; align-items: center; justify-content: center; /* Glass — matches the floating panels */ background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); color: var(--mu); font-size: 11px; font-family: var(--fui); font-weight: 700; line-height: 1; cursor: pointer; user-select: none; transition: background 150ms ease, color 150ms ease, border-color 150ms ease, left 220ms cubic-bezier(.4,0,.2,1), right 220ms cubic-bezier(.4,0,.2,1), bottom 220ms cubic-bezier(.4,0,.2,1); } .rm-toggle:hover { background: var(--acc); color: #000; border-color: var(--acc); box-shadow: 0 2px 16px rgba(0,0,0,0.22); } /* ── Left panel tab ──────────────────────────────────────────── */ /* Attaches to the right edge of #sidebar. left = panel-gap(14px) + panel-width(--sbw) + small-gap(2px) */ #rm-sb-tog { left: calc(var(--panel-gap, 14px) + var(--sbw, 268px) + 2px); top: 50%; transform: translateY(-50%); width: 18px; height: 52px; border-left: none; border-radius: 0 10px 10px 0; } /* ── Right panel tab ─────────────────────────────────────────── */ /* Attaches to the left edge of #sp. */ #rm-sp-tog { right: calc(var(--panel-gap, 14px) + var(--stw, 284px) + 2px); top: 50%; transform: translateY(-50%); width: 18px; height: 52px; border-right: none; border-radius: 10px 0 0 10px; } /* ── Bottom chart tab ────────────────────────────────────────── */ /* Sits on top of the chart strip, horizontally centred. bottom = panel-gap(14px) + chart-height(--chh) + small-gap(2px) */ #rm-cs-tog { bottom: calc(var(--panel-gap, 14px) + var(--chh, 150px) + 2px); left: 50%; transform: translateX(-50%); width: 56px; height: 18px; border-bottom: none; border-radius: 10px 10px 0 0; font-size: 9px; letter-spacing: 0.04em; } /* ── Light theme adjustments ─────────────────────────────────── */ [data-theme="light"] .rm-toggle, :root:not([data-theme="dark"]) .rm-toggle { background: rgba(252,253,250,0.88); border-color: rgba(255,255,255,0.62); }