/* ========================================================= HUD THEME — CLEAN BUILD (Single file) - layout + HUD skin - centered narrow map hudbar (single source of truth) - Geoman toolbar as HUD dock (RIGHT) + scroll ========================================================= */ /* ------------------------- Vars / Safe area / Sizes -------------------------- */ :root{ /* palette */ --hud-bg0:#040815; --hud-bg1:#061022; --neon:#00f2ff; --neon2:#00b6ff; --green:#38ff9c; --amber:#ffcf3c; --red:#ff3c3c; --violet:#8a5bff; /* glass */ --glassA: rgba(7,14,28,.72); --glassB: rgba(7,14,28,.52); /* lines */ --lineA: rgba(0,242,255,0.16); --lineB: rgba(0,242,255,0.24); /* text */ --txt: rgba(255,255,255,0.92); --txt-dim: rgba(255,255,255,0.64); /* shadows */ --shadowA: 0 12px 32px rgba(0,0,0,.45); --shadowB: 0 22px 70px rgba(0,0,0,.60); --glowA: 0 0 0 1px rgba(0,242,255,.18), 0 0 40px rgba(0,242,255,.12); --glowB: 0 0 0 1px rgba(0,242,255,.24), 0 0 70px rgba(0,242,255,.16); /* radius */ --r12: 12px; --r14: 14px; --r999: 999px; /* layout */ /* было: --topbar-h:56px; --topbar-h2:48px; */ --topbar-h: 46px; /* ↓ уже */ --topbar-h2: 40px; /* ↓ уже */ --side-w-left: 340px; --side-w-right: 360px; --gap: 12px; /* safe-area */ --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); /* typography */ --font-ui: 'Rajdhani', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font-title: 'Orbitron', var(--font-ui); /* focus */ --focus: 0 0 0 3px rgba(0,242,255,0.14), 0 0 40px rgba(0,242,255,0.10); /* --- MAP HUDBAR (single truth) --- */ --hudbar-top: 10px; --hudbar-w: min(620px, calc(100% - 24px)); /* ширина */ --hudbar-pad-y: 6px; --hudbar-pad-x: 10px; /* --- GEOMAN TOOLBAR (right dock + scroll) --- */ --pm-top: 72px; /* поднять выше: 60..90 */ --pm-right: 14px; --pm-btn: 42px; --pm-gap: 10px; --pm-pad: 8px; /* чтобы не упиралось в timeline/низ */ --pm-maxh: calc(100dvh - 190px); } /* ------------------------- Base -------------------------- */ html, body{ height: 100%; } body{ padding-left: var(--sal); padding-right: var(--sar); padding-top: var(--sat); padding-bottom: var(--sab); overflow: hidden; background: var(--hud-bg0); color: var(--txt); font-family: var(--font-ui); } body.theme-hud{ background: radial-gradient(1200px 800px at 60% 10%, rgba(0,242,255,.10), transparent 62%), radial-gradient(900px 600px at 20% 90%, rgba(56,255,156,.06), transparent 55%), linear-gradient(180deg, #02040c, #050a16 60%, #040815); } body, button, input, select, textarea{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* visibility helpers */ .d-only{ display: flex; } .m-only{ display: none; } @media (max-width: 980px){ .d-only{ display: none !important; } .m-only{ display: flex !important; } } /* app full height */ .app{ height: calc(100dvh - var(--sat) - var(--sab)); display: flex; flex-direction: column; min-height: 0; } /* ========================================================= TOPBAR — layout + skin ========================================================= */ .topbar{ flex: 0 0 auto; position: sticky; top: 0; z-index: 5000; padding-top: var(--sat); contain: layout paint; border-bottom: 1px solid var(--lineA); background: linear-gradient(180deg, rgba(6,12,26,.86), rgba(6,12,26,.48)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 12px 40px rgba(0,0,0,.45); } .topbar__row{ gap: 10px; /* было: padding: 8px 10px; */ padding: 6px 10px; /* ↓ уже */ min-height: var(--topbar-h); box-sizing: border-box; } .topbar__row--1{ display: grid; align-items: center; grid-template-columns: max-content 1fr max-content; } .topbar__left{ justify-self: start; display:flex; align-items:center; min-width: 0; } .topbar__center{ justify-self: center; display:flex; align-items:center; gap: 8px; min-width: 0; max-width: min(720px, 100%); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .topbar__center::-webkit-scrollbar{ display:none; } .topbar__right{ justify-self: end; display:flex; align-items:center; justify-content:flex-end; gap: 10px; min-width: 0; white-space: nowrap; } .topbar__row--2{ display: flex; align-items: center; gap: 10px; min-height: var(--topbar-h2); padding-top: 0; /* было: padding-bottom: 8px; */ padding-bottom: 6px; /* ↓ уже */ } /* Шрифты/пилюли в topbar чуть компактнее */ body.theme-hud .brand__subtitle{ font-family: var(--font-title); /* было 11px */ font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: rgba(0,242,255,0.92); white-space: nowrap; text-shadow: 0 0 18px rgba(0,242,255,.18); } body.theme-hud .status-indicator, body.theme-hud .hud-meta{ display: inline-flex; align-items: center; gap: 8px; /* было: padding 6px 10px */ padding: 5px 9px; /* ↓ */ border-radius: var(--r999); border: 1px solid rgba(0,242,255,0.16); background: rgba(0,242,255,0.04); } body.theme-hud .status-indicator__dot{ width: 8px; height: 8px; border-radius: 50%; background: rgba(56,255,156,0.95); box-shadow: 0 0 18px rgba(56,255,156,0.35); } body.theme-hud .status-indicator__text{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; /* было 11px */ font-size: 10px; /* ↓ */ letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,0.84); } body.theme-hud .hud-dot{ width: 7px; height: 7px; border-radius: 50%; background: rgba(0,242,255,0.95); box-shadow: 0 0 18px rgba(0,242,255,0.35); } body.theme-hud #hud-clock, body.theme-hud .hud-mode{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; /* было 11px */ font-size: 10px; /* ↓ */ letter-spacing: .14em; text-transform: uppercase; } body.theme-hud .hud-mode{ color: rgba(0,242,255,0.82); } /* ========================================================= Layout grid ========================================================= */ .layout{ flex: 1 1 auto; min-height: 0; display: grid; gap: var(--gap); grid-template-columns: minmax(0, var(--side-w-left)) minmax(0, 1fr) minmax(0, var(--side-w-right)); grid-template-rows: 1fr; padding: var(--gap); box-sizing: border-box; } .sidebar{ min-height: 0; min-width: 0; overflow: hidden; } .sidebar__scroll{ height: 100%; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; } .map-wrapper{ min-width: 0; min-height: 0; position: relative; overflow: hidden; border-radius: var(--r14); border: 1px solid rgba(0,242,255,0.16); box-shadow: 0 24px 80px rgba(0,0,0,.55); } #map{ width: 100%; height: 100%; min-height: 0; } /* tablet */ @media (max-width: 1200px){ :root{ --side-w-left: 300px; --side-w-right: 320px; --gap: 10px; --hudbar-w: min(560px, calc(100% - 20px)); } .layout{ padding: 10px; gap: 10px; } .topbar__center{ max-width: min(560px, 100%); } } /* ========================================================= Mobile bottom-sheet ========================================================= */ @media (max-width: 980px){ :root{ --gap: 8px; /* map hudbar */ --hudbar-w: min(520px, calc(100% - 18px)); /* geoman dock */ --pm-top: 110px; --pm-right: 10px; --pm-btn: 40px; --pm-maxh: calc(100dvh - 230px); } .topbar__row--1{ display: flex; align-items: center; justify-content: space-between; } .layout{ grid-template-columns: 1fr; grid-template-rows: 1fr; padding: 8px; } .sidebar{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 6000; transform: translateY(calc(100% - 64px)); transition: transform .22s ease; max-height: calc(100dvh - (var(--topbar-h) + var(--topbar-h2) + var(--sat) + 8px)); border-top-left-radius: 16px; border-top-right-radius: 16px; overflow: hidden; touch-action: pan-y; } .sidebar.is-open{ transform: translateY(0); } .sidebar--left, .sidebar--right{ margin-bottom: var(--sab); } .map-wrapper{ border-radius: var(--r14); height: calc(100dvh - (var(--topbar-h) + var(--topbar-h2) + var(--sat) + var(--sab) + 16px)); } } /* ========================================================= Buttons / inputs / chips ========================================================= */ body.theme-hud .btn, body.theme-hud .chip, body.theme-hud .mode-btn{ border-radius: var(--r999); border: 1px solid rgba(0,242,255,0.18); background: rgba(0,242,255,0.05); color: rgba(255,255,255,0.86); letter-spacing: .10em; text-transform: uppercase; transition: transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; outline: none; } body.theme-hud .btn:hover, body.theme-hud .chip:hover, body.theme-hud .mode-btn:hover{ border-color: rgba(0,242,255,0.34); background: rgba(0,242,255,0.08); box-shadow: 0 0 0 1px rgba(0,242,255,.14), 0 0 26px rgba(0,242,255,.10); transform: translateY(-1px); } body.theme-hud .btn:focus-visible, body.theme-hud .chip:focus-visible, body.theme-hud .mode-btn:focus-visible{ box-shadow: var(--focus); border-color: rgba(0,242,255,0.45); } body.theme-hud .chip--active, body.theme-hud .mode-btn--active{ border-color: rgba(0,242,255,0.55); background: linear-gradient(90deg, rgba(0,242,255,.95), rgba(0,182,255,.70)); color: rgba(0,0,0,.92); box-shadow: var(--glowA); } body.theme-hud .btn-primary{ border-color: rgba(0,242,255,0.55); background: linear-gradient(90deg, rgba(0,242,255,.95), rgba(0,182,255,.70)); color: rgba(0,0,0,.92); box-shadow: var(--glowA); } body.theme-hud .btn-primary:hover{ box-shadow: var(--glowB); } body.theme-hud .neon-btn{ border-color: rgba(56,255,156,.40); background: linear-gradient(90deg, rgba(56,255,156,.22), rgba(0,242,255,.08)); } body.theme-hud .neon-btn:hover{ border-color: rgba(56,255,156,.58); box-shadow: 0 0 0 1px rgba(56,255,156,.18), 0 0 34px rgba(56,255,156,.14); } body.theme-hud .input, body.theme-hud .select{ border-radius: 12px; background: rgba(0,242,255,0.04); border: 1px solid rgba(0,242,255,0.18); color: rgba(255,255,255,0.90); outline: none; } body.theme-hud .input:focus, body.theme-hud .select:focus{ border-color: rgba(0,242,255,0.45); box-shadow: var(--focus); } /* ========================================================= Panels ========================================================= */ body.theme-hud .panel{ background: linear-gradient(180deg, var(--glassA), var(--glassB)); border: 1px solid var(--lineB); border-radius: var(--r14); box-shadow: var(--shadowB); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); position: relative; overflow: hidden; } body.theme-hud .panel > *{ position: relative; z-index: 1; } body.theme-hud .panel__head{ display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; min-height: 52px; padding: 10px 12px; border-bottom: 1px solid rgba(0,242,255,0.14); background: linear-gradient(90deg, rgba(0,242,255,.10), transparent 70%); } body.theme-hud .panel__title{ grid-column: 2; justify-self: center; margin: 0; font-family: var(--font-title); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(0,242,255,0.92); line-height: 1; } body.theme-hud .panel__titleText{ display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-align: center; } body.theme-hud .panel__headRight{ grid-column: 3; justify-self: end; display: inline-flex; align-items: center; gap: 10px; } body.theme-hud .panel__toggle{ width: 30px; height: 30px; border-radius: 12px; border: 1px solid rgba(0,242,255,0.22); background: rgba(0,242,255,0.06); color: rgba(0,242,255,0.92); display: grid; place-items: center; } body.theme-hud .panel__body{ padding: 14px; } body.theme-hud .panel__label{ font-family: var(--font-title); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(0,242,255,0.92); } body.theme-hud .panel__group{ background: rgba(0,242,255,0.03); border: 1px solid rgba(0,242,255,0.14); border-left: 3px solid var(--neon); border-radius: var(--r12); padding: 14px; } /* filters grids */ body.theme-hud #filters-panel .chip-group{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } body.theme-hud #filters-panel .day-filter{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: center; } body.theme-hud #filters-panel #day-select{ grid-column: 1 / -1; } body.theme-hud #filters-panel #day-clear{ grid-column: 1 / -1; } @media (max-width: 980px){ body.theme-hud #filters-panel .chip-group, body.theme-hud #filters-panel .day-filter{ grid-template-columns: 1fr; } } /* ========================================================= Sidebars scrollbars ========================================================= */ body.theme-hud .sidebar--left{ overflow: hidden; } body.theme-hud .sidebar--left #filters-panel{ height: 100%; display: flex; flex-direction: column; overflow: hidden; } body.theme-hud .sidebar--left #filters-body{ flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; padding-right: 4px; } body.theme-hud .sidebar--right{ overflow: hidden; } body.theme-hud .sidebar--right .sidebar__scroll{ min-height: 0; height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; padding-right: 4px; } body.theme-hud .sidebar--left #filters-body::-webkit-scrollbar, body.theme-hud .sidebar--right .sidebar__scroll::-webkit-scrollbar{ width: 8px; } body.theme-hud .sidebar--left #filters-body::-webkit-scrollbar-track, body.theme-hud .sidebar--right .sidebar__scroll::-webkit-scrollbar-track{ background: rgba(0,242,255,0.04); border-left: 1px solid rgba(0,242,255,0.10); } body.theme-hud .sidebar--left #filters-body::-webkit-scrollbar-thumb, body.theme-hud .sidebar--right .sidebar__scroll::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, rgba(0,242,255,0.22), rgba(0,242,255,0.08)); border: 1px solid rgba(0,242,255,0.22); border-radius: var(--r999); box-shadow: 0 0 22px rgba(0,242,255,0.10); } /* ========================================================= MAP HUD BAR (single source of truth) ========================================================= */ body.theme-hud .map-hudbar{ position: absolute; top: var(--hudbar-top); left: 50%; transform: translateX(-50%); width: var(--hudbar-w); z-index: 1004; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: var(--hudbar-pad-y) var(--hudbar-pad-x); border-radius: var(--r14); background: rgba(7,14,28,.55); border: 1px solid rgba(0,242,255,0.16); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 18px 60px rgba(0,0,0,.40); } body.theme-hud .map-hudbar__left, body.theme-hud .map-hudbar__right{ display: inline-flex; gap: 8px; align-items: center; } body.theme-hud .map-hudbar__center{ justify-self: center; text-align: center; } body.theme-hud .map-hudbar__title{ font-family: var(--font-title); font-size: 10px; letter-spacing: .20em; text-transform: uppercase; color: rgba(0,242,255,0.86); opacity: .95; } body.theme-hud .hud-pill{ display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: var(--r999); border: 1px solid rgba(0,242,255,0.16); background: rgba(0,242,255,0.04); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: .10em; text-transform: uppercase; color: rgba(255,255,255,0.82); white-space: nowrap; } body.theme-hud .hud-pill--ok{ border-color: rgba(56,255,156,0.30); background: rgba(56,255,156,0.10); color: rgba(56,255,156,0.92); } /* tight layout when narrow */ @media (max-width: 1100px){ body.theme-hud .map-hudbar{ grid-template-columns: 1fr; row-gap: 8px; text-align: center; } body.theme-hud .map-hudbar__left, body.theme-hud .map-hudbar__right{ justify-content: center; flex-wrap: wrap; } body.theme-hud .map-hudbar__center{ order: -1; } } /* ========================================================= TIMELINE ========================================================= */ body.theme-hud .timeline{ border: 1px solid rgba(0,242,255,0.18); background: rgba(7,14,28,.62); border-radius: var(--r14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 18px 60px rgba(0,0,0,.45); } /* ========================================================= Leaflet zoom polish ========================================================= */ body.theme-hud .leaflet-control-zoom{ border: 0 !important; box-shadow: none !important; background: transparent !important; } body.theme-hud .leaflet-control-zoom a{ width: 38px !important; height: 38px !important; line-height: 38px !important; background: rgba(7,14,28,.78) !important; color: rgba(255,255,255,0.90) !important; border: 1px solid rgba(0,242,255,0.22) !important; box-shadow: 0 0 0 1px rgba(0,242,255,0.10), 0 10px 30px rgba(0,0,0,0.45) !important; text-decoration: none !important; display: flex !important; align-items: center; justify-content: center; } /* ========================================================= GEOMAN TOOLBAR -> HUD DOCK (RIGHT) + SCROLL ========================================================= */ /* in case old toolbar exists */ #hud-maptools{ display:none !important; } /* remove Leaflet-control positioning effects */ body.theme-hud .leaflet-control.leaflet-pm-toolbar{ margin: 0 !important; } /* dock */ body.theme-hud .leaflet-pm-toolbar{ position: absolute !important; top: var(--pm-top) !important; right: var(--pm-right) !important; left: auto !important; bottom: auto !important; display: flex !important; flex-direction: column !important; gap: var(--pm-gap) !important; padding: var(--pm-pad) !important; border-radius: var(--r999) !important; background: rgba(7,14,28,.62) !important; border: 1px solid rgba(0,242,255,0.18) !important; box-shadow: 0 16px 60px rgba(0,0,0,.45) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 1005 !important; /* scroll */ max-height: var(--pm-maxh) !important; overflow-y: auto !important; overflow-x: hidden !important; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; } /* reset corner transforms/margins */ body.theme-hud .leaflet-top.leaflet-left .leaflet-pm-toolbar, body.theme-hud .leaflet-top.leaflet-right .leaflet-pm-toolbar, body.theme-hud .leaflet-bottom.leaflet-left .leaflet-pm-toolbar, body.theme-hud .leaflet-bottom.leaflet-right .leaflet-pm-toolbar{ margin: 0 !important; transform: none !important; } /* prevent container layout shift */ /* buttons */ body.theme-hud .leaflet-pm-toolbar .button-container a{ width: var(--pm-btn) !important; height: var(--pm-btn) !important; min-width: var(--pm-btn) !important; min-height: var(--pm-btn) !important; border-radius: var(--r999) !important; border: 1px solid rgba(0,242,255,0.16) !important; background: rgba(0,242,255,0.04) !important; display: grid !important; place-items: center !important; padding: 0 !important; margin: 0 !important; transition: transform .12s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease !important; } body.theme-hud .leaflet-pm-toolbar .button-container a:hover{ border-color: rgba(0,242,255,0.34) !important; background: rgba(0,242,255,0.07) !important; transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(0,242,255,.14), 0 0 22px rgba(0,242,255,.10) !important; } body.theme-hud .leaflet-pm-toolbar .button-container a.active{ border-color: rgba(0,242,255,0.55) !important; background: linear-gradient(90deg, rgba(0,242,255,.95), rgba(0,182,255,.70)) !important; box-shadow: var(--glowA) !important; } /* icons */ body.theme-hud .leaflet-pm-toolbar .button-container a .control-icon{ width: 18px !important; height: 18px !important; display: block !important; margin: 0 !important; opacity: .92; filter: brightness(0) invert(1); } body.theme-hud .leaflet-pm-toolbar .button-container a.active .control-icon{ filter: none !important; opacity: .95; } /* HUD scrollbar for toolbar */ body.theme-hud .leaflet-pm-toolbar::-webkit-scrollbar{ width: 8px; } body.theme-hud .leaflet-pm-toolbar::-webkit-scrollbar-track{ background: rgba(0,242,255,0.04); border-left: 1px solid rgba(0,242,255,0.10); border-radius: 999px; } body.theme-hud .leaflet-pm-toolbar::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, rgba(0,242,255,0.22), rgba(0,242,255,0.08)); border: 1px solid rgba(0,242,255,0.22); border-radius: 999px; box-shadow: 0 0 22px rgba(0,242,255,0.10); } /* actions (finish/cancel) */ body.theme-hud .leaflet-pm-actions-container{ background: rgba(7,14,28,.72) !important; border: 1px solid rgba(0,242,255,0.18) !important; border-radius: 12px !important; box-shadow: 0 16px 60px rgba(0,0,0,.45) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 8px !important; } body.theme-hud .leaflet-pm-actions-container a{ border-radius: 999px !important; border: 1px solid rgba(0,242,255,0.16) !important; background: rgba(0,242,255,0.04) !important; color: rgba(255,255,255,0.90) !important; font-family: var(--font-title) !important; font-size: 11px !important; letter-spacing: .12em !important; text-transform: uppercase !important; padding: 8px 10px !important; margin: 6px 0 !important; white-space: nowrap !important; min-width: 160px !important; text-align: center !important; } body.theme-hud .leaflet-pm-actions-container a:first-child{ border-color: rgba(56,255,156,.40) !important; } body.theme-hud .leaflet-pm-actions-container a:last-child{ border-color: rgba(255,60,60,.35) !important; } /* ========================================================= Reduced motion ========================================================= */ @media (prefers-reduced-motion: reduce){ body.theme-hud *{ transition: none !important; } } /* MAP HUD BAR (LIVE / Тактическая карта) — компактнее */ :root{ --hudbar-w: min(520px, calc(100% - 24px)); /* было 620 */ --hudbar-pad-y: 4px; /* было 6 */ --hudbar-pad-x: 8px; /* было 10 */ } body.theme-hud .map-hudbar__title{ font-size: 9px; } body.theme-hud .hud-pill{ font-size: 9px; padding: 3px 7px; } /* ========================================================= MAP LAYERS / ATTR / CLUSTERS / BASEPARAMS — HUD STYLE (append to the end of your CSS) ========================================================= */ /* ---------- Custom attribution (РАЗВЕДКА | v1.0) ---------- */ body.theme-hud .custom-attribution{ font-family: var(--font-title); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,0.82); padding: 6px 10px; border-radius: var(--r999); background: rgba(7,14,28,.62); border: 1px solid rgba(0,242,255,0.18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 14px 50px rgba(0,0,0,.45); user-select: none; pointer-events: auto; } body.theme-hud .custom-attribution::before{ content:""; display:inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; vertical-align: middle; background: rgba(0,242,255,0.95); box-shadow: 0 0 18px rgba(0,242,255,0.35); } /* если конфликтует с дефолтной атрибуцией leaflet */ body.theme-hud .leaflet-control-attribution{ background: transparent !important; border: 0 !important; box-shadow: none !important; color: rgba(255,255,255,0.55) !important; } /* ---------- Cluster markers (Leaflet.markercluster) ---------- */ /* контейнер divIcon */ body.theme-hud .cluster-icon{ background: transparent !important; border: 0 !important; } /* внешний контейнер, который ты рендеришь в html */ body.theme-hud .custom-marker.cluster-marker{ width: 100%; height: 100%; display: grid; place-items: center; } /* круг “броня” */ body.theme-hud .cluster-marker .marker-outer{ --marker-color: var(--red); position: relative; width: 100%; height: 100%; border-radius: 999px; background: radial-gradient(closest-side, rgba(255,255,255,0.06), transparent 62%), radial-gradient(closest-side, rgba(0,242,255,0.10), transparent 72%), rgba(7,14,28,.70); border: 1px solid rgba(0,242,255,0.18); box-shadow: 0 16px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(0,242,255,0.08) inset; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: grid; place-items: center; } /* неоновое “кольцо” по базовому цвету категории */ body.theme-hud .cluster-marker .marker-outer::after{ content:""; position:absolute; inset: 3px; border-radius: 999px; border: 2px solid color-mix(in srgb, var(--marker-color) 70%, rgba(0,242,255,0.35)); box-shadow: 0 0 22px color-mix(in srgb, var(--marker-color) 45%, transparent); opacity: .95; pointer-events: none; } /* внутренняя кнопка-ядро с иконкой */ body.theme-hud .cluster-marker .marker-inner{ width: calc(100% - 14px); height: calc(100% - 14px); border-radius: 999px; display: grid; place-items: center; background: rgba(0,242,255,0.05); border: 1px solid rgba(0,242,255,0.16); box-shadow: 0 0 0 1px rgba(0,242,255,0.08) inset; } /* fontawesome внутри */ body.theme-hud .cluster-marker .marker-inner i{ font-size: 15px; color: rgba(255,255,255,0.88); text-shadow: 0 0 18px rgba(0,242,255,0.14); } /* три точки категорий */ body.theme-hud .cluster-marker .cluster-dots{ position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); display: inline-flex; gap: 6px; padding: 4px 8px; background: rgba(7,14,28,.78); border: 1px solid rgba(0,242,255,0.16); border-radius: 999px; box-shadow: 0 12px 36px rgba(0,0,0,.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } body.theme-hud .cluster-marker .cluster-dot{ width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 14px rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,0.18); } /* бейдж с количеством */ body.theme-hud .cluster-marker .cluster-badge{ position: absolute; top: -8px; right: -8px; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: .08em; color: rgba(0,0,0,.92); background: linear-gradient(90deg, rgba(0,242,255,.95), rgba(0,182,255,.75)); border: 1px solid rgba(0,242,255,0.55); box-shadow: 0 0 0 1px rgba(0,242,255,0.14), 0 0 26px rgba(0,242,255,0.14); } /* чуть разный размер для s/m/l (у тебя class cluster-icon--s/m/l) */ body.theme-hud .cluster-icon--s .marker-inner i{ font-size: 14px; } body.theme-hud .cluster-icon--m .marker-inner i{ font-size: 15px; } body.theme-hud .cluster-icon--l .marker-inner i{ font-size: 16px; } /* ---------- BaseParamsControl “Параметры” ---------- */ body.theme-hud .layers-modern.leaflet-control-layers{ border: 0 !important; background: transparent !important; box-shadow: none !important; } /* кнопка-тоггл (иконка layers) */ body.theme-hud .layers-modern .leaflet-control-layers-toggle{ width: 40px; height: 40px; border-radius: 999px; background: rgba(7,14,28,.70); border: 1px solid rgba(0,242,255,0.18); box-shadow: 0 16px 60px rgba(0,0,0,.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: grid; place-items: center; /* прячем дефолтную картинку leaflet и рисуем свою */ background-image: none !important; position: relative; } body.theme-hud .layers-modern .leaflet-control-layers-toggle::before{ content:""; width: 16px; height: 16px; display:block; /* простая “иконка слоёв” через градиенты */ background: linear-gradient(rgba(0,242,255,.92), rgba(0,242,255,.92)) 0 2px / 100% 2px no-repeat, linear-gradient(rgba(0,242,255,.70), rgba(0,242,255,.70)) 0 7px / 100% 2px no-repeat, linear-gradient(rgba(0,242,255,.48), rgba(0,242,255,.48)) 0 12px / 100% 2px no-repeat; filter: drop-shadow(0 0 10px rgba(0,242,255,0.22)); opacity: .95; } /* сама панель */ body.theme-hud .layers-modern .bp-panel{ margin-top: 10px; min-width: 240px; max-width: 280px; border-radius: var(--r14); background: linear-gradient(180deg, rgba(7,14,28,.78), rgba(7,14,28,.56)); border: 1px solid rgba(0,242,255,0.18); box-shadow: 0 22px 70px rgba(0,0,0,.60); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow: hidden; } /* Leaflet layers control uses display toggling via .leaflet-control-layers-expanded. У тебя div сначала collapsed — это ок. */ body.theme-hud .layers-modern:not(.leaflet-control-layers-expanded) .bp-panel{ display: none; } /* head */ body.theme-hud .layers-modern .bp-head{ padding: 12px 12px 10px; border-bottom: 1px solid rgba(0,242,255,0.14); background: linear-gradient(90deg, rgba(0,242,255,.10), transparent 70%); } body.theme-hud .layers-modern .bp-title{ font-family: var(--font-title); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(0,242,255,0.92); line-height: 1.1; } body.theme-hud .layers-modern .bp-subtitle{ margin-top: 4px; font-size: 11px; color: rgba(255,255,255,0.62); letter-spacing: .06em; } /* section */ body.theme-hud .layers-modern .bp-section{ padding: 12px; display: grid; gap: 10px; } body.theme-hud .layers-modern .bp-divider{ height: 1px; background: rgba(0,242,255,0.12); margin: 0 12px; } body.theme-hud .layers-modern .bp-row{ display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.82); font-size: 12px; user-select: none; } /* чекбоксы: аккуратный HUD-вид */ body.theme-hud .layers-modern .bp-row input[type="checkbox"]{ width: 16px; height: 16px; accent-color: rgba(0,242,255,0.92); cursor: pointer; } /* label "Время" */ body.theme-hud .layers-modern .bp-label{ font-family: var(--font-title); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(0,242,255,0.90); } /* кнопки времени */ body.theme-hud .layers-modern .bp-btns{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } body.theme-hud .layers-modern .bp-btn{ border-radius: 999px; border: 1px solid rgba(0,242,255,0.18); background: rgba(0,242,255,0.05); color: rgba(255,255,255,0.86); font-family: var(--font-title); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 8px 8px; cursor: pointer; transition: transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease; } body.theme-hud .layers-modern .bp-btn:hover{ border-color: rgba(0,242,255,0.34); background: rgba(0,242,255,0.08); box-shadow: 0 0 0 1px rgba(0,242,255,.14), 0 0 26px rgba(0,242,255,.10); transform: translateY(-1px); } /* активная кнопка */ body.theme-hud .layers-modern .bp-btn.active{ border-color: rgba(0,242,255,0.55); background: linear-gradient(90deg, rgba(0,242,255,.95), rgba(0,182,255,.70)); color: rgba(0,0,0,.92); box-shadow: var(--glowA); } /* Geoman toolbar слева только в fullscreen (перебиваем RIGHT-DOCK правила) */ body.theme-hud .leaflet-pm-toolbar.pm--fs-left{ left: 12px !important; right: auto !important; /* <- перебиваем right */ } /* на всякий случай: если тулбар оказался в leaflet-right контейнере */ body.theme-hud .leaflet-right .leaflet-pm-toolbar.pm--fs-left{ left: 12px !important; right: auto !important; } body.theme-hud .leaflet-pm-toolbar.pm--fs-left{ left: 12px !important; right: auto !important; } /* custom attribution -> bottom center */ body.theme-hud .leaflet-bottom.leaflet-left .custom-attribution, body.theme-hud .leaflet-bottom.leaflet-right .custom-attribution{ position: fixed; /* или absolute, но fixed стабильнее в fullscreen */ left: 50%; bottom: 12px; /* отступ от низа */ transform: translateX(-50%); z-index: 1100; } /* убираем стандартные отступы Leaflet у контейнеров снизу */ body.theme-hud .leaflet-bottom.leaflet-left, body.theme-hud .leaflet-bottom.leaflet-right{ left: 0 !important; right: 0 !important; bottom: 0 !important; } /* ========================================================= LEAFLET POPUP -> HUD STYLE (for buildPopup markup) ========================================================= */ /* контейнер leaflet popup */ body.theme-hud .leaflet-popup-content-wrapper{ background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } body.theme-hud .leaflet-popup-content{ margin: 0 !important; width: auto !important; min-width: 300px; max-width: 420px; } body.theme-hud .leaflet-popup-tip{ background: rgba(7,14,28,.72) !important; border: 1px solid rgba(0,242,255,0.18) !important; box-shadow: 0 16px 60px rgba(0,0,0,.55) !important; } /* крестик закрытия */ body.theme-hud .leaflet-popup-close-button{ color: rgba(0,242,255,0.9) !important; font-size: 18px !important; padding: 8px 10px !important; text-shadow: 0 0 18px rgba(0,242,255,0.18); } body.theme-hud .leaflet-popup-close-button:hover{ color: rgba(255,255,255,0.95) !important; } /* карточка попапа */ body.theme-hud .popup-card.popup-card--clean{ background: linear-gradient(180deg, rgba(7,14,28,.78), rgba(7,14,28,.56)); border: 1px solid rgba(0,242,255,0.18); border-radius: var(--r14); box-shadow: 0 22px 70px rgba(0,0,0,.60); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow: hidden; color: rgba(255,255,255,0.88); } /* header */ body.theme-hud .popup-header{ display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: start; padding: 12px 12px 10px; border-bottom: 1px solid rgba(0,242,255,0.14); background: linear-gradient(90deg, rgba(0,242,255,.12), transparent 70%); } body.theme-hud .popup-title{ font-family: var(--font-title); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(0,242,255,0.92); line-height: 1.1; } body.theme-hud .popup-datetime{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,0.70); white-space: nowrap; padding-top: 2px; } /* body */ body.theme-hud .popup-body{ padding: 12px; display: grid; gap: 10px; } /* секции */ body.theme-hud .popup-section{ background: rgba(0,242,255,0.03); border: 1px solid rgba(0,242,255,0.14); border-left: 3px solid rgba(0,242,255,0.85); border-radius: var(--r12); padding: 10px 10px; } body.theme-hud .popup-label{ font-family: var(--font-title); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(0,242,255,0.92); margin-bottom: 8px; } /* текст */ body.theme-hud .popup-text{ font-size: 12px; color: rgba(255,255,255,0.84); line-height: 1.35; margin: 6px 0; } body.theme-hud .popup-text b{ color: rgba(255,255,255,0.92); font-weight: 700; } /* описание чуть “воздушнее” */ body.theme-hud .popup-text--desc{ white-space: pre-wrap; word-break: break-word; } /* координаты */ body.theme-hud .popup-coords--grid{ display: grid; gap: 6px; } body.theme-hud .popup-coord-row{ display: grid; grid-template-columns: 72px 1fr; /* ключ / значение */ gap: 10px; align-items: baseline; } body.theme-hud .popup-coord-k{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: .10em; text-transform: uppercase; color: rgba(255,255,255,0.62); } body.theme-hud .popup-coord-v{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: rgba(255,255,255,0.88); } /* footer */ body.theme-hud .popup-footer{ padding: 10px 12px 12px; border-top: 1px solid rgba(0,242,255,0.14); background: linear-gradient(90deg, rgba(0,242,255,.08), transparent 70%); } body.theme-hud .popup-meta{ display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; } body.theme-hud .popup-id, body.theme-hud .popup-source{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: .10em; text-transform: uppercase; color: rgba(255,255,255,0.68); white-space: nowrap; } /* чуть лучше на маленькой ширине */ @media (max-width: 420px){ body.theme-hud .leaflet-popup-content{ min-width: 260px; } body.theme-hud .popup-coord-row{ grid-template-columns: 64px 1fr; } } /* ========================================================= HUD MARKERS — keep existing HTML, only new skin Works with: .custom-marker, .marker-outer, .marker-inner, .marker-svg, .marker-new ========================================================= */ body.theme-hud .custom-marker{ background: transparent !important; border: 0 !important; } /* внешний круг */ body.theme-hud .custom-marker .marker-outer{ --marker-color: var(--neon); width: 32px; height: 32px; border-radius: 999px; position: relative; display: grid; place-items: center; background: radial-gradient(closest-side, rgba(255,255,255,0.06), transparent 60%), radial-gradient(closest-side, rgba(0,242,255,0.10), transparent 75%), rgba(7,14,28,.72); border: 1px solid rgba(0,242,255,0.18); box-shadow: 0 14px 46px rgba(0,0,0,.55), 0 0 0 1px rgba(0,242,255,0.08) inset; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* кольцо по цвету категории (через --marker-color из inline style) */ body.theme-hud .custom-marker .marker-outer::after{ content:""; position: absolute; inset: 3px; border-radius: 999px; border: 2px solid color-mix(in srgb, var(--marker-color) 75%, rgba(0,242,255,0.30)); box-shadow: 0 0 18px color-mix(in srgb, var(--marker-color) 45%, transparent); opacity: .95; pointer-events: none; } /* внутреннее “ядро” */ body.theme-hud .custom-marker .marker-inner{ width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; background: rgba(0,242,255,0.05); border: 1px solid rgba(0,242,255,0.14); box-shadow: 0 0 0 1px rgba(0,242,255,0.06) inset; } /* иконки FontAwesome */ body.theme-hud .custom-marker .marker-inner i{ font-size: 12px; color: rgba(255,255,255,0.90); text-shadow: 0 0 14px rgba(0,242,255,0.12); } /* чуть больше “ядро” для квадрокоптера (чтобы 32x32 svg не теснился) */ body.theme-hud .custom-marker.marker-quad .marker-inner{ width: 24px; height: 24px; } /* NEW: лёгкая подсветка, без изменения формы/иконок */ body.theme-hud .custom-marker.marker-new .marker-outer{ border-color: rgba(56,255,156,0.28); box-shadow: 0 14px 46px rgba(0,0,0,.55), 0 0 0 1px rgba(56,255,156,0.14) inset, 0 0 26px rgba(56,255,156,0.10); } /* NEW: маленькая точка-индикатор (без бейджа, чтобы не перегружать) */ body.theme-hud .custom-marker.marker-new .marker-outer::before{ content:""; position:absolute; top:-5px; right:-5px; width: 9px; height: 9px; border-radius: 50%; background: rgba(56,255,156,0.95); border: 1px solid rgba(0,0,0,0.35); box-shadow: 0 0 18px rgba(56,255,156,0.30); } /* ========================================================= TRACKS HUD STYLE (SVG polylines) ========================================================= */ /* мягкое свечение: работает для SVG через filter */ body.theme-hud .hud-tracks-pane path{ filter: drop-shadow(0 0 10px rgba(0,242,255,0.10)); } /* glow слой будет толще и полупрозрачнее — дополнительное свечение */ body.theme-hud .hud-tracks-pane path{ stroke-linecap: round; stroke-linejoin: round; } /* если хочется, чтобы активный трек визуально "всплывал" — делаем чуть ярче (в JS мы уже подняли opacity/weight, этого обычно достаточно) */ /* HUD glow for SVG lines */ body.theme-hud .leaflet-overlay-pane path{ filter: drop-shadow(0 0 10px rgba(0,242,255,0.10)); } /* ========================================================= HUD TRACKS GLOW (SVG) ========================================================= */ body.theme-hud .leaflet-overlay-pane path{ filter: drop-shadow(0 0 10px rgba(0,242,255,0.10)); } /* чтобы линии выглядели аккуратно */ body.theme-hud .leaflet-overlay-pane path{ stroke-linecap: round; stroke-linejoin: round; } /* scrollbars visible */ body.theme-hud .leaflet-pm-toolbar .button-container{ padding-right: 6px !important; /* место под ползунок */ scrollbar-width: thin; /* Firefox */ scrollbar-color: rgba(0,242,255,0.35) rgba(0,242,255,0.06); } /* WebKit (Chrome/Edge/Safari) */ body.theme-hud .leaflet-pm-toolbar .button-container::-webkit-scrollbar{ width: 8px; } body.theme-hud .leaflet-pm-toolbar .button-container::-webkit-scrollbar-track{ background: rgba(0,242,255,0.06); border-radius: 999px; } body.theme-hud .leaflet-pm-toolbar .button-container::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, rgba(0,242,255,0.28), rgba(0,242,255,0.10)); border: 1px solid rgba(0,242,255,0.26); border-radius: 999px; } #sound-toggle-btn[aria-pressed="false"]{ opacity: .55; filter: grayscale(0.2); } /* ========================================================= MODERN MINIMAL GLASS UI (PANELS/CONTROLS) + LIGHT THEME - map visuals untouched; only UI chrome changes - switch with: body[data-ui-theme="light"] ========================================================= */ /* ---------- 1) UI Tokens (default = dark UI) ---------- */ body.theme-hud{ /* UI surfaces */ --ui-surface: rgba(10, 16, 30, .68); --ui-surface-2: rgba(10, 16, 30, .52); --ui-surface-solid: rgba(10, 16, 30, .86); /* borders */ --ui-border: rgba(0, 242, 255, 0.14); --ui-border-strong: rgba(0, 242, 255, 0.22); /* text */ --ui-text: rgba(255,255,255,.90); --ui-text-2: rgba(255,255,255,.72); --ui-text-dim: rgba(255,255,255,.56); /* accent */ --ui-accent: rgba(0,242,255,.92); --ui-accent-2: rgba(0,182,255,.70); /* shadows */ --ui-shadow: 0 18px 60px rgba(0,0,0,.45); --ui-shadow-soft: 0 10px 26px rgba(0,0,0,.30); /* radius */ --ui-r: 14px; --ui-r2: 12px; --ui-pill: 999px; /* blur */ --ui-blur: blur(16px); /* focus */ --ui-focus: 0 0 0 3px rgba(0,242,255,0.18), 0 0 0 1px rgba(0,242,255,0.26) inset; /* sizing */ --ui-btn-h: 36px; --ui-btn-pad-x: 12px; --ui-chip-h: 32px; /* reduce neon “noise” */ --ui-glow: 0 0 0 1px rgba(0,242,255,.10), 0 0 28px rgba(0,242,255,.08); /* keep your existing typography */ color: var(--ui-text); } /* ---------- 2) Light UI theme (panels/controls only) ---------- */ body.theme-hud[data-ui-theme="light"]{ /* NOTE: map is not changed; only UI chrome uses these vars */ --ui-surface: rgba(255,255,255,.72); --ui-surface-2: rgba(255,255,255,.56); --ui-surface-solid: rgba(255,255,255,.86); --ui-border: rgba(3, 35, 60, 0.14); --ui-border-strong: rgba(3, 35, 60, 0.22); --ui-text: rgba(10,14,20,.92); --ui-text-2: rgba(10,14,20,.70); --ui-text-dim: rgba(10,14,20,.52); /* accent stays cyan but a bit calmer in light */ --ui-accent: rgba(0, 150, 190, .92); --ui-accent-2: rgba(0, 180, 220, .70); --ui-shadow: 0 18px 60px rgba(0,0,0,.18); --ui-shadow-soft: 0 10px 26px rgba(0,0,0,.12); --ui-glow: 0 0 0 1px rgba(0,150,190,.10), 0 0 24px rgba(0,150,190,.08); } /* Small helper: selection adapts */ body.theme-hud::selection, body.theme-hud *::selection{ background: color-mix(in srgb, var(--ui-accent) 25%, transparent); } /* ========================================================= Apply tokens to UI components ========================================================= */ /* ---------- Topbar ---------- */ body.theme-hud .topbar{ border-bottom: 1px solid var(--ui-border); background: linear-gradient(180deg, color-mix(in srgb, var(--ui-surface-solid) 92%, transparent), color-mix(in srgb, var(--ui-surface) 70%, transparent) ); backdrop-filter: var(--ui-blur); -webkit-backdrop-filter: var(--ui-blur); box-shadow: var(--ui-shadow-soft); } body.theme-hud .brand__subtitle{ color: color-mix(in srgb, var(--ui-accent) 90%, transparent); text-shadow: none; /* minimal */ } body.theme-hud .status-indicator, body.theme-hud .hud-meta{ background: color-mix(in srgb, var(--ui-surface) 85%, transparent); border: 1px solid var(--ui-border); color: var(--ui-text-2); } /* ---------- Panels ---------- */ body.theme-hud .panel{ background: linear-gradient(180deg, var(--ui-surface), var(--ui-surface-2)); border: 1px solid var(--ui-border); border-radius: var(--ui-r); box-shadow: var(--ui-shadow); backdrop-filter: var(--ui-blur); -webkit-backdrop-filter: var(--ui-blur); } body.theme-hud .panel__head{ border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 80%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--ui-accent) 10%, transparent), transparent 72% ); } body.theme-hud .panel__title{ color: color-mix(in srgb, var(--ui-accent) 88%, transparent); } body.theme-hud .panel__label{ color: color-mix(in srgb, var(--ui-accent) 88%, transparent); } body.theme-hud .panel__group{ background: color-mix(in srgb, var(--ui-surface) 65%, transparent); border: 1px solid var(--ui-border); border-left: 2px solid color-mix(in srgb, var(--ui-accent) 85%, transparent); } /* ---------- Inputs ---------- */ body.theme-hud .input, body.theme-hud .select{ background: color-mix(in srgb, var(--ui-surface) 85%, transparent); border: 1px solid var(--ui-border); color: var(--ui-text); } body.theme-hud .input:focus, body.theme-hud .select:focus{ border-color: var(--ui-border-strong); box-shadow: var(--ui-focus); } /* ---------- Buttons / chips (functional, minimal) ---------- */ body.theme-hud .btn, body.theme-hud .chip, body.theme-hud .mode-btn{ height: var(--ui-btn-h); padding: 0 var(--ui-btn-pad-x); border-radius: var(--ui-pill); border: 1px solid var(--ui-border); background: color-mix(in srgb, var(--ui-surface) 78%, transparent); color: var(--ui-text-2); letter-spacing: .10em; text-transform: uppercase; transition: transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease; } body.theme-hud .chip{ height: var(--ui-chip-h); } body.theme-hud .btn:hover, body.theme-hud .chip:hover, body.theme-hud .mode-btn:hover{ color: var(--ui-text); background: color-mix(in srgb, var(--ui-accent) 8%, var(--ui-surface)); border-color: var(--ui-border-strong); box-shadow: var(--ui-shadow-soft); transform: translateY(-1px); } body.theme-hud .btn:active, body.theme-hud .chip:active, body.theme-hud .mode-btn:active{ transform: translateY(0) scale(0.98); } body.theme-hud .btn:focus-visible, body.theme-hud .chip:focus-visible, body.theme-hud .mode-btn:focus-visible{ outline: none; box-shadow: var(--ui-focus); border-color: var(--ui-border-strong); } /* Active states: readable, not overglowy */ body.theme-hud .chip--active, body.theme-hud .mode-btn--active, body.theme-hud .btn-primary{ background: linear-gradient(90deg, var(--ui-accent), var(--ui-accent-2)); border-color: color-mix(in srgb, var(--ui-accent) 55%, transparent); color: rgba(0,0,0,.92); box-shadow: var(--ui-glow); } /* ---------- Map HUD bar (UI chrome only) ---------- */ body.theme-hud .map-hudbar{ background: color-mix(in srgb, var(--ui-surface) 85%, transparent); border: 1px solid var(--ui-border); box-shadow: var(--ui-shadow-soft); backdrop-filter: var(--ui-blur); -webkit-backdrop-filter: var(--ui-blur); } body.theme-hud .map-hudbar__title{ color: color-mix(in srgb, var(--ui-accent) 82%, transparent); text-shadow: none; } body.theme-hud .hud-pill{ background: color-mix(in srgb, var(--ui-surface) 80%, transparent); border: 1px solid var(--ui-border); color: var(--ui-text-2); } body.theme-hud .hud-pill--ok{ /* keep semantics but minimal */ border-color: color-mix(in srgb, var(--green) 35%, var(--ui-border)); background: color-mix(in srgb, var(--green) 10%, var(--ui-surface)); color: color-mix(in srgb, var(--green) 55%, var(--ui-text)); } /* ---------- Leaflet zoom & BaseParams toggle ---------- */ body.theme-hud .leaflet-control-zoom a, body.theme-hud .layers-modern .leaflet-control-layers-toggle{ background: color-mix(in srgb, var(--ui-surface) 88%, transparent) !important; border: 1px solid var(--ui-border) !important; box-shadow: var(--ui-shadow-soft) !important; backdrop-filter: var(--ui-blur); -webkit-backdrop-filter: var(--ui-blur); } body.theme-hud .leaflet-control-zoom a:hover, body.theme-hud .layers-modern .leaflet-control-layers-toggle:hover{ border-color: var(--ui-border-strong) !important; } /* BaseParams panel */ body.theme-hud .layers-modern .bp-panel{ background: linear-gradient(180deg, var(--ui-surface), var(--ui-surface-2)); border: 1px solid var(--ui-border); box-shadow: var(--ui-shadow); } /* time buttons inside BaseParams */ body.theme-hud .layers-modern .bp-btn{ background: color-mix(in srgb, var(--ui-surface) 82%, transparent); border: 1px solid var(--ui-border); color: var(--ui-text-2); } body.theme-hud .layers-modern .bp-btn:hover{ background: color-mix(in srgb, var(--ui-accent) 8%, var(--ui-surface)); border-color: var(--ui-border-strong); color: var(--ui-text); } body.theme-hud .layers-modern .bp-btn.active{ background: linear-gradient(90deg, var(--ui-accent), var(--ui-accent-2)); color: rgba(0,0,0,.92); border-color: color-mix(in srgb, var(--ui-accent) 55%, transparent); box-shadow: var(--ui-glow); } /* ---------- Leaflet-PM (Geoman) toolbar: more functional dock ---------- */ body.theme-hud .leaflet-pm-toolbar{ background: color-mix(in srgb, var(--ui-surface) 86%, transparent) !important; border: 1px solid var(--ui-border) !important; box-shadow: var(--ui-shadow) !important; backdrop-filter: var(--ui-blur); -webkit-backdrop-filter: var(--ui-blur); } /* Improve spacing + scroll feel */ body.theme-hud .leaflet-pm-toolbar{ gap: 10px !important; padding: 9px !important; } /* Buttons: clearer icon contrast for light theme */ body.theme-hud .leaflet-pm-toolbar .button-container a{ background: color-mix(in srgb, var(--ui-surface) 82%, transparent) !important; border: 1px solid var(--ui-border) !important; box-shadow: none !important; } body.theme-hud .leaflet-pm-toolbar .button-container a:hover{ background: color-mix(in srgb, var(--ui-accent) 8%, var(--ui-surface)) !important; border-color: var(--ui-border-strong) !important; box-shadow: var(--ui-shadow-soft) !important; } /* Active tool: clean, readable */ body.theme-hud .leaflet-pm-toolbar .button-container a.active{ background: linear-gradient(180deg, var(--ui-accent), var(--ui-accent-2)) !important; border-color: color-mix(in srgb, var(--ui-accent) 55%, transparent) !important; box-shadow: var(--ui-glow) !important; } /* Icons: make them adapt between dark/light without hacks */ body.theme-hud .leaflet-pm-toolbar .button-container a .control-icon{ filter: none !important; opacity: .92; } /* When NOT active, icon should follow text color */ body.theme-hud .leaflet-pm-toolbar .button-container a:not(.active) .control-icon{ /* Many PM icons are images; if they are SVG/IMG, color may not apply. This tries to keep them readable across themes */ filter: saturate(0) brightness(1.2); } /* Active: keep crisp */ body.theme-hud .leaflet-pm-toolbar .button-container a.active .control-icon{ filter: none !important; opacity: .98; } /* Toolbar scrollbar minimal */ body.theme-hud .leaflet-pm-toolbar::-webkit-scrollbar{ width: 8px; } body.theme-hud .leaflet-pm-toolbar::-webkit-scrollbar-track{ background: color-mix(in srgb, var(--ui-surface) 70%, transparent); border-left: 1px solid color-mix(in srgb, var(--ui-border) 85%, transparent); border-radius: 999px; } body.theme-hud .leaflet-pm-toolbar::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--ui-accent) 22%, rgba(0,0,0,0.10)); border: 1px solid color-mix(in srgb, var(--ui-border) 90%, transparent); border-radius: 999px; } /* Actions container (finish/cancel) */ body.theme-hud .leaflet-pm-actions-container{ background: linear-gradient(180deg, var(--ui-surface), var(--ui-surface-2)) !important; border: 1px solid var(--ui-border) !important; box-shadow: var(--ui-shadow) !important; backdrop-filter: var(--ui-blur); -webkit-backdrop-filter: var(--ui-blur); } body.theme-hud .leaflet-pm-actions-container a{ background: color-mix(in srgb, var(--ui-surface) 82%, transparent) !important; border: 1px solid var(--ui-border) !important; color: var(--ui-text) !important; } body.theme-hud .leaflet-pm-actions-container a:hover{ border-color: var(--ui-border-strong) !important; box-shadow: var(--ui-shadow-soft) !important; } /* ---------- Popup: minimal glass, better readability for light UI ---------- */ body.theme-hud .leaflet-popup-tip{ background: var(--ui-surface) !important; border: 1px solid var(--ui-border) !important; box-shadow: var(--ui-shadow-soft) !important; } body.theme-hud .popup-card.popup-card--clean{ background: linear-gradient(180deg, var(--ui-surface), var(--ui-surface-2)); border: 1px solid var(--ui-border); box-shadow: var(--ui-shadow); color: var(--ui-text); } body.theme-hud .popup-title{ color: color-mix(in srgb, var(--ui-accent) 86%, transparent); } body.theme-hud .popup-datetime, body.theme-hud .popup-id, body.theme-hud .popup-source{ color: var(--ui-text-dim); } body.theme-hud .popup-text{ color: var(--ui-text-2); } body.theme-hud .popup-text b{ color: var(--ui-text); } /* ---------- Optional: make scrollbars in sidebars more minimal ---------- */ body.theme-hud .sidebar--left #filters-body::-webkit-scrollbar-thumb, body.theme-hud .sidebar--right .sidebar__scroll::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--ui-accent) 18%, transparent); border: 1px solid color-mix(in srgb, var(--ui-border) 90%, transparent); } /* ---------- Optional: reduce motion slightly (still functional) ---------- */ @media (prefers-reduced-motion: reduce){ body.theme-hud .btn, body.theme-hud .chip, body.theme-hud .mode-btn{ transition: none !important; } } #ui-theme-btn[aria-pressed="true"]{ box-shadow: 0 0 0 1px rgba(0,242,255,0.14), 0 0 26px rgba(0,242,255,0.10); } #ui-theme-btn[data-ui-theme="light"]{ border-color: rgba(0,150,190,.35); } #ui-theme-btn[data-ui-theme="dark"]{ border-color: rgba(0,242,255,.28); } #ui-theme-btn[data-ui-theme="auto"]{ opacity: .92; } /* Fix Leaflet-PM icons in LIGHT UI theme */ body.theme-hud[data-ui-theme="light"] .leaflet-pm-toolbar .button-container a .control-icon{ filter: saturate(0) brightness(0.35) !important; /* darker icon */ } @media (prefers-color-scheme: light){ body.theme-hud:not([data-ui-theme="dark"]) .leaflet-pm-toolbar .button-container a .control-icon{ filter: saturate(0) brightness(0.35) !important; } } /* ========================================================= ANALYTICS — modern minimal glass skin (dark/light via --ui-*) Append at end of CSS ========================================================= */ /* общий контейнер аналитики: сетка и ритм */ body.theme-hud .panel .analytics{ display: grid; gap: 12px; } /* строка */ body.theme-hud .analytics__row{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } body.theme-hud .analytics__row--full{ grid-template-columns: 1fr; } /* карточка метрики */ body.theme-hud .analytics__metric{ border-radius: var(--ui-r, 14px); background: color-mix(in srgb, var(--ui-surface) 78%, transparent); border: 1px solid var(--ui-border); box-shadow: none; padding: 12px 12px; display: grid; gap: 6px; color: var(--ui-text); } /* “alert” метрика (новые цели) — без жёсткого красного, аккуратно */ body.theme-hud .analytics__metric--alert{ border-color: color-mix(in srgb, var(--amber) 25%, var(--ui-border)); background: color-mix(in srgb, var(--amber) 8%, var(--ui-surface)); } /* подпись */ body.theme-hud .analytics__metric-label{ font-family: var(--font-title); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--ui-accent) 70%, var(--ui-text)); opacity: .92; } /* значение */ body.theme-hud .analytics__metric-value{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 22px; letter-spacing: .06em; color: var(--ui-text); line-height: 1.1; } /* саб-текст */ body.theme-hud .analytics__metric-sub{ font-size: 12px; color: var(--ui-text-dim); } /* TOP categories block */ body.theme-hud .analytics__top{ border-radius: var(--ui-r, 14px); background: color-mix(in srgb, var(--ui-surface) 78%, transparent); border: 1px solid var(--ui-border); padding: 12px 12px; } body.theme-hud .analytics__top-header{ display:flex; align-items:baseline; justify-content:space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 75%, transparent); margin-bottom: 10px; } body.theme-hud .analytics__top-title{ font-family: var(--font-title); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--ui-accent) 78%, transparent); } body.theme-hud .analytics__top-sub{ font-size: 12px; color: var(--ui-text-dim); } /* список */ body.theme-hud .analytics__top-list{ display: grid; gap: 8px; } /* адаптив */ @media (max-width: 980px){ body.theme-hud .analytics__row{ grid-template-columns: 1fr; } } /* ========================================================= LIGHT UI: make topbar text dark (override hard-coded HUD colors) Put at VERY END of CSS ========================================================= */ /* 1) Forced light (когда кликнул LIGHT) */ body.theme-hud[data-ui-theme="light"] .topbar{ color: var(--ui-text) !important; } body.theme-hud[data-ui-theme="light"] .brand__subtitle, body.theme-hud[data-ui-theme="light"] .status-indicator__text, body.theme-hud[data-ui-theme="light"] .hud-meta, body.theme-hud[data-ui-theme="light"] #hud-clock, body.theme-hud[data-ui-theme="light"] .hud-mode{ color: var(--ui-text) !important; text-shadow: none !important; } /* цифры/служебный текст чуть спокойнее */ body.theme-hud[data-ui-theme="light"] .hud-meta, body.theme-hud[data-ui-theme="light"] .status-indicator{ color: var(--ui-text-2) !important; } /* 2) AUTO + системная светлая тема (если не форснули DARK) */ @media (prefers-color-scheme: light){ body.theme-hud:not([data-ui-theme="dark"]) .topbar{ color: var(--ui-text) !important; } body.theme-hud:not([data-ui-theme="dark"]) .brand__subtitle, body.theme-hud:not([data-ui-theme="dark"]) .status-indicator__text, body.theme-hud:not([data-ui-theme="dark"]) .hud-meta, body.theme-hud:not([data-ui-theme="dark"]) #hud-clock, body.theme-hud:not([data-ui-theme="dark"]) .hud-mode{ color: var(--ui-text) !important; text-shadow: none !important; } body.theme-hud:not([data-ui-theme="dark"]) .hud-meta, body.theme-hud:not([data-ui-theme="dark"]) .status-indicator{ color: var(--ui-text-2) !important; } } body.theme-hud[data-ui-theme="light"] .brand__subtitle{ color: color-mix(in srgb, var(--ui-accent) 65%, var(--ui-text)) !important; } @media (prefers-color-scheme: light){ body.theme-hud:not([data-ui-theme="dark"]) .brand__subtitle{ color: color-mix(in srgb, var(--ui-accent) 65%, var(--ui-text)) !important; } } /* ========================================================= POPUP text colors in LIGHT UI (force dark readable text) Put at VERY END of CSS ========================================================= */ /* 1) Forced LIGHT */ body.theme-hud[data-ui-theme="light"] .popup-card.popup-card--clean{ color: var(--ui-text) !important; } body.theme-hud[data-ui-theme="light"] .popup-title{ color: color-mix(in srgb, var(--ui-accent) 70%, var(--ui-text)) !important; } body.theme-hud[data-ui-theme="light"] .popup-datetime, body.theme-hud[data-ui-theme="light"] .popup-id, body.theme-hud[data-ui-theme="light"] .popup-source{ color: var(--ui-text-dim) !important; } body.theme-hud[data-ui-theme="light"] .popup-label{ color: color-mix(in srgb, var(--ui-accent) 65%, var(--ui-text)) !important; } body.theme-hud[data-ui-theme="light"] .popup-text{ color: var(--ui-text-2) !important; } body.theme-hud[data-ui-theme="light"] .popup-text b{ color: var(--ui-text) !important; } body.theme-hud[data-ui-theme="light"] .popup-coord-k{ color: var(--ui-text-dim) !important; } body.theme-hud[data-ui-theme="light"] .popup-coord-v{ color: var(--ui-text) !important; } /* 2) AUTO + system LIGHT (unless forced dark) */ @media (prefers-color-scheme: light){ body.theme-hud:not([data-ui-theme="dark"]) .popup-card.popup-card--clean{ color: var(--ui-text) !important; } body.theme-hud:not([data-ui-theme="dark"]) .popup-title{ color: color-mix(in srgb, var(--ui-accent) 70%, var(--ui-text)) !important; } body.theme-hud:not([data-ui-theme="dark"]) .popup-datetime, body.theme-hud:not([data-ui-theme="dark"]) .popup-id, body.theme-hud:not([data-ui-theme="dark"]) .popup-source{ color: var(--ui-text-dim) !important; } body.theme-hud:not([data-ui-theme="dark"]) .popup-label{ color: color-mix(in srgb, var(--ui-accent) 65%, var(--ui-text)) !important; } body.theme-hud:not([data-ui-theme="dark"]) .popup-text{ color: var(--ui-text-2) !important; } body.theme-hud:not([data-ui-theme="dark"]) .popup-text b{ color: var(--ui-text) !important; } body.theme-hud:not([data-ui-theme="dark"]) .popup-coord-k{ color: var(--ui-text-dim) !important; } body.theme-hud:not([data-ui-theme="dark"]) .popup-coord-v{ color: var(--ui-text) !important; } } body.theme-hud[data-ui-theme="light"] .popup-card.popup-card--clean{ background: linear-gradient(180deg, var(--ui-surface), var(--ui-surface-2)) !important; border-color: var(--ui-border) !important; box-shadow: var(--ui-shadow) !important; } @media (prefers-color-scheme: light){ body.theme-hud:not([data-ui-theme="dark"]) .popup-card.popup-card--clean{ background: linear-gradient(180deg, var(--ui-surface), var(--ui-surface-2)) !important; border-color: var(--ui-border) !important; box-shadow: var(--ui-shadow) !important; } } /* На время скрыть инструменты) */ body.theme-hud .leaflet-pm-toolbar, body.theme-hud .leaflet-control.leaflet-pm-toolbar, body.theme-hud .leaflet-pm-actions-container, body.theme-hud .leaflet-pm-action, body.theme-hud .leaflet-pm-toolbar-container, body.theme-hud .leaflet-pm-toolbar .button-container{ display: none !important; visibility: hidden !important; pointer-events: none !important; } /* ========================================================= CHAT — HUD skin (matches your --ui-* tokens) Put at END of CSS ========================================================= */ /* safety: if old pin UI still exists in DOM */ #chat-pin-btn, #chat-pin-hint{ display: none !important; } /* panel body as column */ body.theme-hud #chat-panel .panel__body.chat{ padding: 12px; /* чуть компактнее, чем дефолт */ display: flex; flex-direction: column; gap: 10px; min-height: 0; } /* messages area */ body.theme-hud #chat-panel .chat__messages{ flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 10px; border-radius: var(--ui-r2, 12px); background: color-mix(in srgb, var(--ui-surface) 70%, transparent); border: 1px solid color-mix(in srgb, var(--ui-border) 90%, transparent); box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); } /* nice scrollbar in chat */ body.theme-hud #chat-panel .chat__messages{ scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ui-accent) 22%, transparent) color-mix(in srgb, var(--ui-surface) 70%, transparent); } body.theme-hud #chat-panel .chat__messages::-webkit-scrollbar{ width: 8px; } body.theme-hud #chat-panel .chat__messages::-webkit-scrollbar-track{ background: color-mix(in srgb, var(--ui-surface) 65%, transparent); border-radius: 999px; } body.theme-hud #chat-panel .chat__messages::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--ui-accent) 22%, transparent); border: 1px solid color-mix(in srgb, var(--ui-border) 90%, transparent); border-radius: 999px; } /* controls bar */ body.theme-hud #chat-panel .chat__controls{ display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 10px; border-radius: var(--ui-r2, 12px); background: color-mix(in srgb, var(--ui-surface) 78%, transparent); border: 1px solid var(--ui-border); backdrop-filter: var(--ui-blur, blur(16px)); -webkit-backdrop-filter: var(--ui-blur, blur(16px)); } /* input look */ body.theme-hud #chat-panel .chat__input{ height: 38px; border-radius: var(--ui-pill, 999px); padding: 0 12px; background: color-mix(in srgb, var(--ui-surface) 86%, transparent); border: 1px solid var(--ui-border); color: var(--ui-text); } body.theme-hud #chat-panel .chat__input::placeholder{ color: var(--ui-text-dim); } body.theme-hud #chat-panel .chat__input:focus{ border-color: var(--ui-border-strong); box-shadow: var(--ui-focus); } /* send button size tune to match input */ body.theme-hud #chat-panel #chat-send-btn{ height: 38px; padding: 0 14px; border-radius: var(--ui-pill, 999px); } /* --------------------------------------------------------- Optional: message bubbles styles If your JS renders messages like
...
you can map them to these classes. ---------------------------------------------------------- */ body.theme-hud .chatMsg{ max-width: 78%; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--ui-border); background: color-mix(in srgb, var(--ui-surface) 78%, transparent); color: var(--ui-text); line-height: 1.35; word-break: break-word; } body.theme-hud .chatMsg--me{ margin-left: auto; border-color: color-mix(in srgb, var(--ui-accent) 35%, var(--ui-border)); background: color-mix(in srgb, var(--ui-accent) 10%, var(--ui-surface)); } body.theme-hud .chatMsg__meta{ margin-top: 6px; font-size: 11px; color: var(--ui-text-dim); letter-spacing: .04em; } body.theme-hud .sidebar--right .sidebar__scroll{ scrollbar-gutter: auto; padding-right: 0; } /* ===== FINAL LAYOUT OVERRIDES (must be last) ===== */ :root{ --side-w-left: clamp(260px, 24vw, 340px); --side-w-right: clamp(280px, 26vw, 360px); } *, *::before, *::after{ box-sizing: border-box; } .layout{ grid-template-columns: minmax(0, var(--side-w-left)) minmax(0, 1fr) minmax(0, var(--side-w-right)); } /* если правая панель “разъезжается” из-за gutter/scrollbar */ body.theme-hud .sidebar--right .sidebar__scroll{ scrollbar-gutter: auto; padding-right: 0; } body.theme-hud .sidebar--right, body.theme-hud .sidebar--right *{ min-width: 0; } body.theme-hud .analytics__metric-value{ overflow-wrap: anywhere; } /* ========================================================= CHAT ACTION BUTTONS (Edit / Delete) — HUD style ========================================================= */ body.theme-hud .chat__actions{ gap: 8px !important; align-items: center; } /* base */ body.theme-hud .chat__btn-edit, body.theme-hud .chat__btn-del{ height: 28px; padding: 0 10px; border-radius: var(--ui-pill, 999px); border: 1px solid var(--ui-border); background: color-mix(in srgb, var(--ui-surface) 82%, transparent); color: var(--ui-text-2); font-family: var(--font-title); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; user-select: none; transition: transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease; } /* add icons via CSS (so you don't touch JS) */ body.theme-hud .chat__btn-edit::before{ content: "✎"; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin-right: 6px; opacity: .9; } body.theme-hud .chat__btn-del::before{ content: "×"; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin-right: 6px; font-size: 14px; line-height: 1; opacity: .9; } /* hover */ body.theme-hud .chat__btn-edit:hover{ color: var(--ui-text); border-color: color-mix(in srgb, var(--ui-accent) 45%, var(--ui-border)); background: color-mix(in srgb, var(--ui-accent) 10%, var(--ui-surface)); box-shadow: 0 10px 24px rgba(0,0,0,.18); transform: translateY(-1px); } body.theme-hud .chat__btn-del:hover{ color: var(--ui-text); border-color: color-mix(in srgb, var(--red) 55%, var(--ui-border)); background: color-mix(in srgb, var(--red) 10%, var(--ui-surface)); box-shadow: 0 10px 24px rgba(0,0,0,.18); transform: translateY(-1px); } /* active press */ body.theme-hud .chat__btn-edit:active, body.theme-hud .chat__btn-del:active{ transform: translateY(0) scale(0.98); } /* focus (keyboard) */ body.theme-hud .chat__btn-edit:focus-visible, body.theme-hud .chat__btn-del:focus-visible{ outline: none; box-shadow: var(--ui-focus); } /* optional: make delete more "danger" even in idle state */ body.theme-hud .chat__btn-del{ border-color: color-mix(in srgb, var(--red) 22%, var(--ui-border)); } /* disabled state (just in case) */ body.theme-hud .chat__btn-edit:disabled, body.theme-hud .chat__btn-del:disabled{ opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; } /* ========================================================= ADD POINT FORM — HUD skin (panel-like) ========================================================= */ body.theme-hud .panel--addPoint{ /* можно ограничить ширину если это попап */ max-width: 520px; } body.theme-hud .addPoint__body{ display: grid; gap: 12px; } body.theme-hud .addPoint__coords{ display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; /* hud-pill уже стилизован, но немного под форму */ padding: 8px 10px; } body.theme-hud .addPoint__coordsLabel{ font-family: var(--font-title); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--ui-accent) 70%, var(--ui-text)); opacity: .9; } body.theme-hud .addPoint__coordsValue{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; letter-spacing: .08em; color: var(--ui-text); white-space: nowrap; } body.theme-hud .addPoint__field{ display: grid; gap: 6px; } body.theme-hud .addPoint__label{ margin: 0; } /* textarea sizing + look */ body.theme-hud .addPoint__textarea{ min-height: 86px; padding: 10px 12px; border-radius: var(--ui-r2, 12px); resize: vertical; } /* datetime/select consistent height */ body.theme-hud .addPoint__input, body.theme-hud .addPoint__select{ height: 38px; padding: 0 12px; border-radius: var(--ui-pill, 999px); } /* actions */ body.theme-hud .addPoint__actions{ display: flex; justify-content: flex-end; gap: 10px; padding-top: 2px; } /* mobile */ @media (max-width: 420px){ body.theme-hud .panel--addPoint{ max-width: 100%; } body.theme-hud .addPoint__coordsValue{ white-space: normal; overflow-wrap: anywhere; } body.theme-hud .addPoint__actions{ flex-direction: column; align-items: stretch; } } /* AddPoint inside Leaflet popup must be clickable */ body.theme-hud .leaflet-popup, body.theme-hud .leaflet-popup *{ pointer-events: auto; } /* на всякий случай поверх “стекла” */ body.theme-hud .panel--addPoint{ position: relative; z-index: 2; } /* Callsign in right panel: MOBILE ONLY */ #hud-callsign-mobile { display: none !important; } @media (max-width: 980px){ #hud-callsign-mobile { display: block !important; } } /* === FIX: светлая иконка календаря/времени в левых фильтрах (datetime-local) === */ /* 1) просим браузер рисовать контрол в светлой схеме (обычно этого достаточно) */ body.theme-hud .sidebar--left input[type="datetime-local"]{ color-scheme: light; } /* 2) если в Chrome/Edge/Safari всё ещё темно — принудительно осветляем индикатор */ body.theme-hud .sidebar--left input[type="datetime-local"]::-webkit-calendar-picker-indicator{ filter: invert(1) brightness(1.15); opacity: 1; } /* 3) чтобы в LIGHT UI теме не было “инверсии” (если включаете data-ui-theme="light") */ body.theme-hud[data-ui-theme="light"] .sidebar--left input[type="datetime-local"]{ color-scheme: light; } body.theme-hud[data-ui-theme="light"] .sidebar--left input[type="datetime-local"]::-webkit-calendar-picker-indicator{ filter: none; } /* ========================= MOBILE SEGMENT (Фильтры/Чат/Аналитика) — HUD style ========================= */ @media (max-width: 980px){ body.theme-hud .m-seg{ width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 6px; border-radius: 999px; background: color-mix(in srgb, var(--ui-surface) 85%, transparent); border: 1px solid var(--ui-border); box-shadow: var(--ui-shadow-soft); backdrop-filter: var(--ui-blur); -webkit-backdrop-filter: var(--ui-blur); } body.theme-hud .m-seg__btn{ height: 34px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--ui-text-2); font-family: var(--font-title); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 0 10px; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; } body.theme-hud .m-seg__btn.is-active{ background: linear-gradient(90deg, var(--ui-accent), var(--ui-accent-2)); color: rgba(0,0,0,.92); border-color: color-mix(in srgb, var(--ui-accent) 55%, transparent); box-shadow: var(--ui-glow); } body.theme-hud .m-seg__btn:focus-visible{ outline: none; box-shadow: var(--ui-focus); } } /* ========================================================= MOBILE TOPBAR — clean layout (brand separate row + scroll seg) + remove fullscreen on mobile + keep date icon fix + remove filters collapse arrow Put at VERY END of hud-theme.css ========================================================= */ /* --------------------------------------------------------- A) Light calendar/time icon for datetime-local in LEFT sidebar --------------------------------------------------------- */ body.theme-hud .sidebar--left input[type="datetime-local"]{ color-scheme: light; } body.theme-hud .sidebar--left input[type="datetime-local"]::-webkit-calendar-picker-indicator{ filter: invert(1) brightness(1.15); opacity: 1; } body.theme-hud[data-ui-theme="light"] .sidebar--left input[type="datetime-local"]::-webkit-calendar-picker-indicator{ filter: none; } /* --------------------------------------------------------- B) Remove collapse arrow in Filters panel --------------------------------------------------------- */ body.theme-hud #filters-panel #filters-toggle{ display: none !important; } /* --------------------------------------------------------- C) MOBILE: rebuild header layout красиво и без наложений --------------------------------------------------------- */ @media (max-width: 980px){ /* 1) Убираем fullscreen на мобиле */ body.theme-hud #map-fullscreen-btn{ display: none !important; } /* 2) Ряд 1: только кнопки справа, без бренда (он будет отдельной строкой ниже) */ body.theme-hud .topbar__row--1{ display: grid !important; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding-top: 6px; padding-bottom: 4px; } /* левую часть делаем "пустой" — бренд переедет вниз */ body.theme-hud .topbar__left{ min-width: 0; } body.theme-hud .topbar__left .brand{ display: none !important; } /* справа: компактные кнопки, чтобы ничего не налезало */ body.theme-hud .topbar__right{ gap: 8px !important; align-items: center; } /* компактнее кнопки на мобиле (звук/тема) */ body.theme-hud .topbar__right .btn{ height: 36px; min-width: 40px; padding: 0 10px; } /* мета (часы/режим) на мобиле можно скрыть — иначе тесно */ body.theme-hud .topbar__right .hud-meta.d-only, body.theme-hud .topbar__right #hud-callsign.d-only{ display: none !important; } /* 3) Добавляем "бренд-строку" между row--1 и row--2 (через псевдо-элемент topbar) */ body.theme-hud .topbar{ position: sticky; } body.theme-hud .topbar::after{ content: "ОПЕРАТИВНАЯ КАРТА"; display: block; text-align: center; margin: 2px 10px 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--ui-border); background: color-mix(in srgb, var(--ui-surface) 72%, transparent); box-shadow: var(--ui-shadow-soft); font-family: var(--font-title); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: color-mix(in srgb, var(--ui-accent) 72%, var(--ui-text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; backdrop-filter: var(--ui-blur); -webkit-backdrop-filter: var(--ui-blur); } /* 4) Ряд 2: сегмент (Фильтры/Чат/Аналитика) — пилюля + горизонтальный скролл */ body.theme-hud .topbar__row--2{ padding-top: 0; padding-bottom: 8px; } body.theme-hud .m-seg{ width: 100%; display: flex; gap: 8px; padding: 6px; border-radius: 999px; background: color-mix(in srgb, var(--ui-surface) 85%, transparent); border: 1px solid var(--ui-border); box-shadow: var(--ui-shadow-soft); backdrop-filter: var(--ui-blur); -webkit-backdrop-filter: var(--ui-blur); overflow-x: auto; /* <-- скролл */ -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ } body.theme-hud .m-seg::-webkit-scrollbar{ display:none; } /* Chrome/Safari */ body.theme-hud .m-seg__btn{ flex: 0 0 auto; /* чтобы не сжимались, а скроллились */ height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--ui-text-2); font-family: var(--font-title); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; } body.theme-hud .m-seg__btn.is-active{ background: linear-gradient(90deg, var(--ui-accent), var(--ui-accent-2)); color: rgba(0,0,0,.92); border-color: color-mix(in srgb, var(--ui-accent) 55%, transparent); box-shadow: var(--ui-glow); } body.theme-hud .m-seg__btn:focus-visible{ outline: none; box-shadow: var(--ui-focus); } } /* ========================================================= PERSONAL LAYERS (pl-*) — HUD STYLE Works with your markup: #pl-panel, #pl-refresh, #pl-file, #pl-upload, #pl-hint, #pl-list ========================================================= */ body.theme-hud #pl-panel.panel__group{ /* уже есть panel__group, но чуть доводим под HUD */ padding: 14px; border-radius: var(--ui-r2); background: color-mix(in srgb, var(--ui-surface) 65%, transparent); border: 1px solid var(--ui-border); border-left: 2px solid color-mix(in srgb, var(--ui-accent) 85%, transparent); } body.theme-hud #pl-panel .panel__label{ display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-bottom: 10px; font-family: var(--font-title); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--ui-accent) 88%, transparent); } body.theme-hud #pl-refresh.chip{ height: var(--ui-chip-h); padding: 0 12px; border-radius: var(--ui-pill); } /* upload row */ body.theme-hud #pl-panel #pl-file.input{ height: var(--ui-btn-h); padding: 0 12px; border-radius: 12px; } /* file input button (webkit) */ body.theme-hud #pl-panel #pl-file::-webkit-file-upload-button{ height: calc(var(--ui-btn-h) - 8px); margin: 4px 10px 4px 4px; padding: 0 12px; border-radius: var(--ui-pill); border: 1px solid var(--ui-border); background: color-mix(in srgb, var(--ui-surface) 78%, transparent); color: var(--ui-text-2); font-family: var(--font-title); font-size: 10px; letter-spacing: .10em; text-transform: uppercase; cursor: pointer; } body.theme-hud #pl-panel #pl-file::-webkit-file-upload-button:hover{ background: color-mix(in srgb, var(--ui-accent) 8%, var(--ui-surface)); border-color: var(--ui-border-strong); color: var(--ui-text); } /* hint text */ body.theme-hud #pl-hint{ margin-top: 8px; color: var(--ui-text-dim); font-size: 12px; line-height: 1.35; } body.theme-hud #pl-hint b{ color: var(--ui-text); font-weight: 700; } /* list container */ body.theme-hud #pl-list{ margin-top: 10px; display:flex; flex-direction:column; gap: 8px; } /* ---- optional: item card styles (на будущее, если будешь рендерить элементы списка) ---- Ожидаем структуру примерно:
...
status: ...
*/ body.theme-hud #pl-list .pl-item{ padding: 10px 10px; border-radius: var(--ui-r2); background: color-mix(in srgb, var(--ui-surface) 70%, transparent); border: 1px solid var(--ui-border); box-shadow: var(--ui-shadow-soft); } body.theme-hud #pl-list .pl-item__row{ display:flex; align-items:center; justify-content:space-between; gap: 10px; min-width: 0; } body.theme-hud #pl-list .pl-item__name{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ui-text); font-size: 13px; } body.theme-hud #pl-list .pl-item__meta{ margin-top: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: .10em; text-transform: uppercase; color: var(--ui-text-dim); } /* status chips (если будешь делать) */ body.theme-hud #pl-list .pl-status{ display:inline-flex; align-items:center; gap: 6px; padding: 4px 8px; border-radius: var(--ui-pill); border: 1px solid var(--ui-border); background: color-mix(in srgb, var(--ui-surface) 80%, transparent); color: var(--ui-text-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; letter-spacing: .10em; text-transform: uppercase; white-space: nowrap; } body.theme-hud #pl-list .pl-status--processing{ border-color: color-mix(in srgb, var(--amber) 35%, var(--ui-border)); background: color-mix(in srgb, var(--amber) 10%, var(--ui-surface)); color: color-mix(in srgb, var(--amber) 55%, var(--ui-text)); } body.theme-hud #pl-list .pl-status--ready{ border-color: color-mix(in srgb, var(--green) 35%, var(--ui-border)); background: color-mix(in srgb, var(--green) 10%, var(--ui-surface)); color: color-mix(in srgb, var(--green) 55%, var(--ui-text)); } body.theme-hud #pl-list .pl-status--error{ border-color: color-mix(in srgb, var(--red) 35%, var(--ui-border)); background: color-mix(in srgb, var(--red) 10%, var(--ui-surface)); color: color-mix(in srgb, var(--red) 55%, var(--ui-text)); } /* mobile: tighten row */ @media (max-width: 980px){ body.theme-hud #pl-panel #pl-file.input{ width: 100%; } body.theme-hud #pl-panel #pl-upload.btn{ width: 100%; justify-content: center; } } /* ========================================================= LOADER VIDEO (ATLAS intro) Requires HTML:
Body class to hide: body.hud-loaded ========================================================= */ #hud-loader{ position: fixed; inset: 0; z-index: 99999; background: #000; /* fallback пока видео грузится */ display: block; transition: opacity .6s ease, visibility .6s ease; } body.hud-loaded #hud-loader{ opacity: 0; visibility: hidden; pointer-events: none; } .hud-loader-video{ width: 100%; height: 100%; display: block; object-fit: cover; /* если нужно “без обрезки”, замени на contain */ background: #000; } /* На случай prefers-reduced-motion — просто без плавного скрытия */ @media (prefers-reduced-motion: reduce){ #hud-loader{ transition: none !important; } } /* ========================================================= CATEGORY MULTISELECT (.msel) — tuned for your exact HTML ... ...checkbox items... ========================================================= */ body.theme-hud details.msel{ position: relative; width: 100%; } /* ---- summary as select ---- */ body.theme-hud details.msel > summary.select{ list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.theme-hud details.msel > summary.select::-webkit-details-marker{ display:none; } /* caret */ body.theme-hud details.msel > summary.select::after{ content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-right: 2px solid color-mix(in srgb, var(--ui-text-2) 80%, transparent); border-bottom: 2px solid color-mix(in srgb, var(--ui-text-2) 80%, transparent); transform: rotate(45deg); transition: transform .16s ease, border-color .16s ease, opacity .16s ease; opacity: .9; } body.theme-hud details.msel[open] > summary.select{ border-color: var(--ui-border-strong); box-shadow: var(--ui-focus); } body.theme-hud details.msel[open] > summary.select::after{ transform: rotate(-135deg); border-color: color-mix(in srgb, var(--ui-text) 86%, transparent); opacity: 1; } /* optional: small glow separator under summary when open */ body.theme-hud details.msel[open] > summary.select{ position: relative; } body.theme-hud details.msel[open] > summary.select::before{ content:""; position: absolute; left: 12px; right: 12px; bottom: -6px; height: 1px; background: color-mix(in srgb, var(--ui-accent) 18%, transparent); opacity: .9; } /* ---- dropdown panel ---- */ body.theme-hud .msel__list{ position: absolute; z-index: 6500; top: calc(100% + 8px); left: 0; right: 0; max-height: min(320px, 46vh); overflow: auto; padding: 10px; border-radius: var(--ui-r, 14px); border: 1px solid var(--ui-border-strong); background: color-mix(in srgb, var(--ui-surface-solid) 92%, transparent); box-shadow: var(--ui-shadow); backdrop-filter: var(--ui-blur); -webkit-backdrop-filter: var(--ui-blur); transform-origin: top; animation: mselIn .14s ease-out; } @keyframes mselIn{ from{ opacity: 0; transform: translateY(-4px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ---- items (works for label/div) ---- */ body.theme-hud .msel__list .msel__item{ display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; cursor: pointer; user-select: none; color: var(--ui-text-2); border: 1px solid transparent; transition: background .14s ease, border-color .14s ease, color .14s ease, transform .06s ease; } /* if items are labels — make whole row clickable nicely */ body.theme-hud .msel__list label.msel__item{ margin: 0; } /* hover */ body.theme-hud .msel__list .msel__item:hover{ background: color-mix(in srgb, var(--ui-accent) 10%, transparent); border-color: color-mix(in srgb, var(--ui-accent) 16%, transparent); color: var(--ui-text); } /* active press */ body.theme-hud .msel__list .msel__item:active{ transform: scale(.99); } /* checkbox */ body.theme-hud .msel__list .msel__item input[type="checkbox"]{ width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--ui-accent); } /* keyboard focus: highlight whole row when checkbox focused */ body.theme-hud .msel__list .msel__item:has(input:focus-visible){ border-color: var(--ui-border-strong); box-shadow: var(--ui-focus); color: var(--ui-text); } /* optional: subtle divider between rows, but not too noisy */ body.theme-hud .msel__list .msel__item + .msel__item{ margin-top: 4px; } /* ---- dropdown scrollbar ---- */ body.theme-hud .msel__list{ scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ui-accent) 22%, transparent) color-mix(in srgb, var(--ui-surface) 75%, transparent); } body.theme-hud .msel__list::-webkit-scrollbar{ width: 8px; } body.theme-hud .msel__list::-webkit-scrollbar-track{ background: color-mix(in srgb, var(--ui-surface) 70%, transparent); border-radius: 999px; } body.theme-hud .msel__list::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--ui-accent) 22%, transparent); border: 1px solid color-mix(in srgb, var(--ui-border) 90%, transparent); border-radius: 999px; } /* mobile: a bit taller */ @media (max-width: 980px){ body.theme-hud .msel__list{ max-height: min(380px, 52vh); } } /* ===== Multi-select (dropdown with checkboxes) — polished for your markup ===== */ body.theme-hud details.msel{ position: relative; width: 100%; } /* summary looks like select */ body.theme-hud details.msel > summary.select{ list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; padding: 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.theme-hud details.msel > summary.select::-webkit-details-marker{ display:none; } /* caret */ body.theme-hud details.msel > summary.select::after{ content: ""; width: 10px; height: 10px; flex: 0 0 auto; border-right: 2px solid color-mix(in srgb, var(--ui-text-2) 80%, transparent); border-bottom: 2px solid color-mix(in srgb, var(--ui-text-2) 80%, transparent); transform: rotate(45deg); transition: transform .16s ease, border-color .16s ease, opacity .16s ease; opacity: .9; } body.theme-hud details.msel[open] > summary.select{ border-color: var(--ui-border-strong); box-shadow: var(--ui-focus); } body.theme-hud details.msel[open] > summary.select::after{ transform: rotate(-135deg); border-color: color-mix(in srgb, var(--ui-text) 86%, transparent); opacity: 1; } /* dropdown */ body.theme-hud .msel__list{ position: absolute; z-index: 6500; top: calc(100% + 8px); left: 0; right: 0; max-height: min(320px, 46vh); overflow: auto; padding: 10px; border-radius: var(--ui-r, 14px); border: 1px solid var(--ui-border-strong); background: color-mix(in srgb, var(--ui-surface-solid) 92%, transparent); box-shadow: var(--ui-shadow); backdrop-filter: var(--ui-blur); -webkit-backdrop-filter: var(--ui-blur); transform-origin: top; animation: mselIn .14s ease-out; } @keyframes mselIn{ from{ opacity: 0; transform: translateY(-4px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } } /* items (your labels) */ body.theme-hud .msel__list .msel__item{ display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; cursor: pointer; user-select: none; color: var(--ui-text-2); border: 1px solid transparent; transition: background .14s ease, border-color .14s ease, color .14s ease, transform .06s ease; } /* little separator rhythm */ body.theme-hud .msel__list .msel__item + .msel__item{ margin-top: 4px; } body.theme-hud .msel__list .msel__item:hover{ background: color-mix(in srgb, var(--ui-accent) 10%, transparent); border-color: color-mix(in srgb, var(--ui-accent) 16%, transparent); color: var(--ui-text); } body.theme-hud .msel__list .msel__item:active{ transform: scale(.99); } /* checkbox + label text */ body.theme-hud .msel__list .msel__item input[type="checkbox"]{ width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--ui-accent); } body.theme-hud .msel__list .msel__item span{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* focus highlight row when checkbox focused */ body.theme-hud .msel__list .msel__item:has(input:focus-visible){ border-color: var(--ui-border-strong); box-shadow: var(--ui-focus); color: var(--ui-text); } /* checked state: subtle “selected” background */ body.theme-hud .msel__list .msel__item:has(input:checked){ background: color-mix(in srgb, var(--ui-accent) 8%, transparent); border-color: color-mix(in srgb, var(--ui-accent) 18%, transparent); } /* make "Все" visually special (optional) */ body.theme-hud .msel__list .msel__item--all{ border-color: color-mix(in srgb, var(--ui-border) 90%, transparent); } body.theme-hud .msel__list .msel__item--all:has(input:checked){ background: linear-gradient(90deg, color-mix(in srgb, var(--ui-accent) 18%, transparent), transparent); } /* scrollbar */ body.theme-hud .msel__list{ scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ui-accent) 22%, transparent) color-mix(in srgb, var(--ui-surface) 75%, transparent); } body.theme-hud .msel__list::-webkit-scrollbar{ width: 8px; } body.theme-hud .msel__list::-webkit-scrollbar-track{ background: color-mix(in srgb, var(--ui-surface) 70%, transparent); border-radius: 999px; } body.theme-hud .msel__list::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--ui-accent) 22%, transparent); border: 1px solid color-mix(in srgb, var(--ui-border) 90%, transparent); border-radius: 999px; } @media (max-width: 980px){ body.theme-hud .msel__list{ max-height: min(380px, 52vh); } } /* ========================================================= TG PHOTO — Popup preview + HUD Modal ========================================================= */ /* --- Popup photo preview --- */ body.theme-hud .popup-photo{ width: 100%; max-width: 420px; max-height: 210px; object-fit: cover; /* превью можно с обрезкой */ border-radius: var(--ui-r2, 12px); background: color-mix(in srgb, var(--ui-surface) 75%, transparent); border: 1px solid var(--ui-border); box-shadow: var(--ui-shadow-soft); cursor: pointer; } body.theme-hud .popup-photo:hover{ border-color: var(--ui-border-strong); box-shadow: var(--ui-glow); } body.theme-hud .popup-hint{ margin-top: 8px; font-size: 11px; letter-spacing: .06em; color: var(--ui-text-dim); } /* --- Modal overlay --- */ body.theme-hud .img-modal[hidden]{ display:none; } body.theme-hud .img-modal{ position: fixed; inset: 0; z-index: 120000; /* выше loader/leaflet */ } body.theme-hud .img-modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* --- Modal content as HUD panel --- */ body.theme-hud .img-modal__content{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(1120px, 94vw); max-height: 92vh; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--ui-r, 14px); background: linear-gradient(180deg, var(--ui-surface), var(--ui-surface-2)); border: 1px solid var(--ui-border); box-shadow: var(--ui-shadow); backdrop-filter: var(--ui-blur); -webkit-backdrop-filter: var(--ui-blur); overflow: hidden; } body.theme-hud .img-modal__top{ display:flex; align-items:center; justify-content:space-between; gap: 10px; padding: 10px 10px; border-radius: var(--ui-r2, 12px); border: 1px solid color-mix(in srgb, var(--ui-border) 80%, transparent); background: color-mix(in srgb, var(--ui-surface) 75%, transparent); } body.theme-hud .img-modal__title{ font-family: var(--font-title); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--ui-accent) 78%, var(--ui-text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.theme-hud .img-modal__close{ height: 34px; min-width: 44px; padding: 0 10px; border-radius: var(--ui-pill, 999px); } /* Image itself */ body.theme-hud .img-modal__img{ width: 100%; max-height: 74vh; object-fit: contain; /* в модалке без обрезки */ border-radius: var(--ui-r2, 12px); background: rgba(0,0,0,.25); border: 1px solid var(--ui-border); } body.theme-hud .img-modal__cap{ font-size: 12px; color: var(--ui-text-2); line-height: 1.35; white-space: pre-wrap; padding: 10px 10px; border-radius: var(--ui-r2, 12px); border: 1px solid color-mix(in srgb, var(--ui-border) 80%, transparent); background: color-mix(in srgb, var(--ui-surface) 70%, transparent); overflow: auto; max-height: 22vh; } /* small screens */ @media (max-width: 520px){ body.theme-hud .img-modal__content{ width: 96vw; max-height: 94vh; padding: 10px; } body.theme-hud .img-modal__img{ max-height: 66vh; } } /* ========================================================= POPUP: CK-42 collapsible block (
/) ========================================================= */ body.theme-hud .popup-section details{ margin: 0; } body.theme-hud .popup-section details > summary{ list-style: none; cursor: pointer; user-select: none; /* делаем summary как ваш .popup-label */ font-family: var(--font-title); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(0,242,255,0.92); display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 0; } body.theme-hud .popup-section details > summary::-webkit-details-marker{ display: none; } /* caret */ body.theme-hud .popup-section details > summary::after{ content: ""; width: 10px; height: 10px; flex: 0 0 auto; border-right: 2px solid rgba(255,255,255,0.55); border-bottom: 2px solid rgba(255,255,255,0.55); transform: rotate(45deg); transition: transform .16s ease, border-color .16s ease, opacity .16s ease; opacity: .9; } body.theme-hud .popup-section details[open] > summary::after{ transform: rotate(-135deg); border-color: rgba(255,255,255,0.72); opacity: 1; } /* отступ между summary и контентом */ body.theme-hud .popup-section details > .popup-coords{ margin-top: 8px; } /* cluster popup must not propagate events to map */ body.theme-hud .cluster-popup, body.theme-hud .cluster-popup *{ pointer-events: auto; } /* IMPORTANT: prevent Leaflet map drag/click handlers from stealing it */ body.theme-hud .leaflet-popup-content-wrapper, body.theme-hud .leaflet-popup-content{ pointer-events: auto !important; } /* ========================================================= PERSONAL LAYERS (rendered by JS: .pl-row / .pl-iconbtn / .pl-toggle) Force HUD tokens + match your UI ========================================================= */ body.theme-hud #pl-panel{ /* твой panel__group уже ок, но чуть выравниваем */ border-left: 2px solid color-mix(in srgb, var(--ui-accent) 85%, transparent); } /* строка слоя (это то, что реально рисует JS) */ body.theme-hud #pl-list .pl-row.hud-pill{ background: color-mix(in srgb, var(--ui-surface) 78%, transparent) !important; border: 1px solid var(--ui-border) !important; box-shadow: var(--ui-shadow-soft) !important; border-radius: var(--ui-r2, 12px) !important; padding: 10px 10px !important; gap: 12px !important; } /* левая часть */ body.theme-hud #pl-list .pl-left{ gap: 6px !important; } /* имя слоя */ body.theme-hud #pl-list .pl-title{ font-family: var(--font-title) !important; font-size: 11px !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--ui-text) !important; opacity: .95; } /* статус */ body.theme-hud #pl-list [data-pl-status]{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; font-size: 10px !important; letter-spacing: .10em !important; text-transform: uppercase !important; color: var(--ui-text-dim) !important; } /* error */ body.theme-hud #pl-list .pl-error{ color: color-mix(in srgb, var(--red) 70%, var(--ui-text)) !important; font-size: 12px !important; } /* полоса загрузки */ body.theme-hud #pl-list .pl-bar{ height: 2px !important; border-radius: 999px !important; background: linear-gradient(90deg, rgba(0,242,255,0.0), color-mix(in srgb, var(--ui-accent) 80%, transparent), rgba(0,242,255,0.0) ) !important; } /* кнопки справа (иконки) */ body.theme-hud #pl-list .pl-iconbtn{ width: 36px !important; height: 36px !important; border-radius: var(--ui-pill) !important; background: color-mix(in srgb, var(--ui-surface) 82%, transparent) !important; border: 1px solid var(--ui-border) !important; color: var(--ui-text) !important; box-shadow: none !important; } body.theme-hud #pl-list .pl-iconbtn:hover{ border-color: var(--ui-border-strong) !important; box-shadow: var(--ui-shadow-soft) !important; transform: translateY(-1px); } /* если добавишь кнопку удаления */ body.theme-hud #pl-list .pl-iconbtn--danger{ border-color: color-mix(in srgb, var(--red) 30%, var(--ui-border)) !important; background: color-mix(in srgb, var(--red) 10%, var(--ui-surface)) !important; } body.theme-hud #pl-list .pl-iconbtn--danger:hover{ border-color: color-mix(in srgb, var(--red) 55%, var(--ui-border)) !important; } /* тумблер */ body.theme-hud #pl-list .pl-toggle{ max-width: none !important; } body.theme-hud #pl-list .pl-toggle .toggle__label{ font-family: var(--font-title) !important; font-size: 10px !important; letter-spacing: .10em !important; text-transform: uppercase !important; color: var(--ui-text-2) !important; } body.theme-hud #pl-list .pl-toggle input:disabled + .toggle__track{ opacity: .5; } body.theme-hud #pl-list .pl-row{ flex-wrap: wrap !important; align-items: flex-start !important; } body.theme-hud #pl-list .pl-left{ flex: 1 1 100% !important; /* занимает всю ширину */ min-width: 0 !important; } body.theme-hud #pl-list .pl-right{ flex: 0 0 100% !important; /* уходит на новую строку */ justify-content: flex-end !important; } /* ========================================================= PERSONAL LAYERS — COLLAPSIBLE like CHAT (details/summary) Put at VERY END of CSS ========================================================= */ /* делаем group
таким же "panel__group" визуально */ body.theme-hud details#pl-panel.panel__group{ padding: 14px; } /* summary выглядит как заголовок группы (panel__label) */ body.theme-hud details#pl-panel.panel__group > summary.panel__label{ margin: 0; list-style: none; user-select: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; } /* убрать стандартный маркер details */ body.theme-hud details#pl-panel.panel__group > summary.panel__label::-webkit-details-marker{ display: none; } /* caret справа (как у dropdown) */ body.theme-hud details#pl-panel.panel__group > summary.panel__label::after{ content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-right: 2px solid color-mix(in srgb, var(--ui-text-2) 80%, transparent); border-bottom: 2px solid color-mix(in srgb, var(--ui-text-2) 80%, transparent); transform: rotate(45deg); transition: transform .16s ease, border-color .16s ease, opacity .16s ease; opacity: .9; } body.theme-hud details#pl-panel[open].panel__group > summary.panel__label::after{ transform: rotate(-135deg); border-color: color-mix(in srgb, var(--ui-text) 86%, transparent); opacity: 1; } /* при открытии — лёгкий фокус как у инпутов */ body.theme-hud details#pl-panel[open].panel__group > summary.panel__label{ border-radius: 10px; } /* контент */ body.theme-hud #pl-panel-body{ margin-top: 10px; } /* чтобы клики по кнопкам/инпутам не были "как по summary" визуально */ body.theme-hud details#pl-panel.panel__group > summary.panel__label button, body.theme-hud details#pl-panel.panel__group > summary.panel__label .chip{ cursor: pointer; } /* ========================================================= DESKTOP: Right sidebar anti-jitter + nicer details open Put this block at the VERY END of your CSS ========================================================= */ @media (min-width: 981px){ /* 1) Убираем дерганье ширины из-за появления/исчезновения scrollbar */ body.theme-hud .sidebar--right .sidebar__scroll{ /* самый надёжный вариант: scrollbar всегда присутствует => ширина не прыгает */ overflow-y: scroll; /* современный способ резервировать место под scrollbar (пусть тоже будет) */ scrollbar-gutter: stable; /* небольшой отступ, чтобы контент не прилипал к ползунку */ padding-right: 6px; /* на всякий случай (у тебя есть overrides с padding-right:0) */ box-sizing: border-box; } /* 2) Мягкое появление содержимого details (без рывка “в лоб”) */ details.panel.is-collapsible[open] > :not(summary){ animation: detailsIn .16s ease-out; transform-origin: top; } @keyframes detailsIn{ from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } } /* ============================== FIX: Category dropdown clipping ============================== */ /* 3) Контейнер details как anchor */ #category-filter{ position: relative; overflow: visible !important; } /* 4) На всякий случай — dropdown выше соседей */ #categoryFilterBox.msel__list{ z-index: 9999; } /* FIX: allow category dropdown inside "Управление" panel */ section[aria-label="Управление"].panel{ overflow: visible !important; } section[aria-label="Управление"] .panel__body{ overflow: visible !important; } #category-filter{ position: relative; overflow: visible !important; } #categoryFilterBox.msel__list{ z-index: 9999; } /* dropdown hidden when details closed */ details.msel:not([open]) > .msel__list{ display: none; } details.msel:not([open]) > .msel__list { display: none; } /* ===== FINAL: Category dropdown should be ABSOLUTE inside right panel (no JS, no fixed) ===== */ /* allow dropdown to overflow inside management panel */ body.theme-hud section[aria-label="Управление"].panel, body.theme-hud section[aria-label="Управление"] .panel__body{ overflow: visible !important; } /* details is the anchor */ body.theme-hud #category-filter{ position: relative !important; display: block !important; width: 100% !important; overflow: visible !important; } /* dropdown: overlay, does NOT push layout down */ body.theme-hud #categoryFilterBox.msel__list{ position: absolute !important; left: 0 !important; right: 0 !important; top: calc(100% + 8px) !important; z-index: 9999 !important; max-height: min(380px, 52vh); overflow: auto; margin: 0 !important; } /* strict hide when closed */ body.theme-hud #category-filter:not([open]) > #categoryFilterBox{ display: none !important; } /* FIX: don't auto-scroll panel when clicking label/checkbox in category dropdown */ body.theme-hud #categoryFilterBox input[type="checkbox"]{ scroll-margin: 0 !important; /* чтобы фокус не пытался "подтаскивать" элемент */ } /* optional: keep dropdown stable on tap/click */ body.theme-hud #categoryFilterBox{ overscroll-behavior: contain; } /* FIX: category dropdown should be above next panel (stacking context issue) */ body.theme-hud section[aria-label="Управление"].panel{ position: relative; z-index: 50; } /* when dropdown opened, lift it even more */ body.theme-hud #category-filter[open]{ position: relative; z-index: 200; } /* dropdown itself */ body.theme-hud #categoryFilterBox.msel__list, body.theme-hud #categoryFilterBox{ z-index: 9999 !important; } .img-modal__content{ position: relative; } .img-modal__nav{ position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 14px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.45); color: #fff; font-size: 34px; line-height: 40px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; z-index: 5; } .img-modal__nav--prev{ left: 10px; } .img-modal__nav--next{ right: 10px; } .img-modal__nav[disabled]{ opacity: .35; cursor: not-allowed; } /* ========================================================= SIDEBAR HANDLES — ULTRA HUD + ALWAYS CLICKABLE (DESKTOP) Put at VERY END of CSS ========================================================= */ @media (min-width: 981px){ :root{ --sb-handle-w: 56px; --sb-handle-h: 104px; /* сколько ручки видно на экране (важно для клика!) */ --sb-handle-visible: 34px; /* отступ по вертикали: строго центр */ --sb-handle-y: 50%; } /* базовая кнопка */ .sb-toggle{ position: fixed; top: var(--sb-handle-y); z-index: 20000; /* выше карты/leaflet */ width: var(--sb-handle-w); height: var(--sb-handle-h); border-radius: var(--r999); display: grid; grid-template-rows: 1fr auto 1fr; align-items: center; justify-items: center; cursor: pointer; user-select: none; pointer-events: auto; /* HUD glass */ background: radial-gradient(120% 70% at 50% 18%, rgba(255,255,255,.10), transparent 55%), linear-gradient(180deg, color-mix(in srgb, var(--ui-surface-solid) 92%, transparent), color-mix(in srgb, var(--ui-surface) 78%, transparent) ); border: 1px solid var(--ui-border-strong); box-shadow: var(--ui-shadow, 0 18px 60px rgba(0,0,0,.45)), 0 0 0 1px rgba(0,0,0,.18) inset; backdrop-filter: var(--ui-blur); -webkit-backdrop-filter: var(--ui-blur); color: var(--ui-text); transition: transform .18s ease, box-shadow .20s ease, border-color .20s ease, background .20s ease, opacity .20s ease, filter .20s ease; opacity: .94; } /* LEFT/RIGHT: прячем часть кнопки за край через left/right (а не translateX) */ .sb-toggle--left{ left: calc(-1 * (var(--sb-handle-w) - var(--sb-handle-visible))); transform: translateY(-50%); } .sb-toggle--right{ right: calc(-1 * (var(--sb-handle-w) - var(--sb-handle-visible))); transform: translateY(-50%); } /* неоновая “рамка” внутри */ .sb-toggle::after{ content:""; position: absolute; inset: 4px; border-radius: var(--r999); border: 1px solid color-mix(in srgb, var(--ui-accent) 28%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-accent) 10%, transparent), 0 0 26px color-mix(in srgb, var(--ui-accent) 14%, transparent); pointer-events: none; opacity: .9; transition: opacity .2s ease, box-shadow .2s ease, border-color .2s ease; } /* “грип” (точки) */ .sb-toggle::before{ content:""; width: 16px; height: 44px; border-radius: 12px; background: radial-gradient(circle, color-mix(in srgb, var(--ui-accent) 60%, transparent) 1.6px, transparent 2.4px) 0 0 / 8px 8px; opacity: .55; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--ui-accent) 20%, transparent)); transition: opacity .2s ease, filter .2s ease; } .sb-toggle i{ font-size: 17px; opacity: .92; transition: transform .22s ease, opacity .2s ease; } /* Hover: выезжает чуть внутрь + glow */ .sb-toggle:hover{ opacity: 1; border-color: color-mix(in srgb, var(--ui-accent) 42%, var(--ui-border-strong)); box-shadow: var(--ui-shadow, 0 18px 60px rgba(0,0,0,.45)), var(--ui-glow, 0 0 0 1px rgba(0,242,255,.10), 0 0 28px rgba(0,242,255,.08)); filter: saturate(1.06); } .sb-toggle--left:hover{ transform: translateY(-50%) translateX(10px) scale(1.02); } .sb-toggle--right:hover{ transform: translateY(-50%) translateX(-10px) scale(1.02); } .sb-toggle:hover::after{ border-color: color-mix(in srgb, var(--ui-accent) 48%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-accent) 18%, transparent), 0 0 38px color-mix(in srgb, var(--ui-accent) 18%, transparent); opacity: 1; } .sb-toggle:hover::before{ opacity: .78; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--ui-accent) 26%, transparent)); } /* Active press */ .sb-toggle:active{ transform: translateY(-50%) scale(.985); } /* keyboard focus */ .sb-toggle:focus-visible{ outline: none; box-shadow: var(--ui-shadow), var(--ui-focus); } /* стрелка меняется при свернутой панели */ body.sb-left-collapsed .sb-toggle--left i{ transform: rotate(180deg); opacity: 1; } body.sb-right-collapsed .sb-toggle--right i{ transform: rotate(180deg); opacity: 1; } /* визуальный “акцент”, когда панель свернута */ body.sb-left-collapsed .sb-toggle--left::after, body.sb-right-collapsed .sb-toggle--right::after{ border-color: color-mix(in srgb, var(--ui-accent) 64%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-accent) 22%, transparent), 0 0 44px color-mix(in srgb, var(--ui-accent) 20%, transparent); } } /* Mobile: скрываем (у вас bottom-sheet логика) */ @media (max-width: 980px){ .sb-toggle{ display: none !important; } } /* ===== FIX: collapse must win over FINAL layout overrides ===== */ @media (min-width: 981px){ body.sb-left-collapsed .layout{ grid-template-columns: 0px minmax(0, 1fr) minmax(0, var(--side-w-right)) !important; } body.sb-right-collapsed .layout{ grid-template-columns: minmax(0, var(--side-w-left)) minmax(0, 1fr) 0px !important; } body.sb-left-collapsed.sb-right-collapsed .layout{ grid-template-columns: 0px minmax(0, 1fr) 0px !important; } body.sb-left-collapsed .sidebar--left, body.sb-right-collapsed .sidebar--right{ opacity: 0; pointer-events: none; } }