:root { color-scheme: dark; --bg-dark: #1b2028; --bg-panel: #232936; --bg-panel-2: #2a3140; --bg-input: #1a1f29; --bg-hover: #34405a; --bg-map: #0e1116; --toolbar-bg: linear-gradient(180deg, #232936, #1e2430); --titlebar-bg: linear-gradient(180deg, #2d3546, #262c3a); --hover-overlay: rgba(255, 255, 255, 0.08); --swatch-border: rgba(255, 255, 255, 0.25); --accent: #4f8cff; --accent-2: #ff6b4a; --text-main: #e8ebf0; --text-dim: #9aa4b5; --warn: #ffd166; --danger-text: #ff8a80; --ok: #2ecc71; --border: #384258; --radius: 8px; --shadow: 0 8px 24px rgba(0, 0, 0, 0.35); } /* Дневная тема (вкладка "Общие" окна "Настройки"): атрибут data-theme на ставит applyTheme из settings/appSettings.js, а до загрузки стилей - инлайн-скрипт в index.html. Ночная тема - :root без атрибута. color-scheme перекрашивает и нативные (он не умеет показывать SVG). Лежит в document.body с position:fixed, поэтому не обрезается ни скроллом таблицы, ни окном. */ .wpt-sym-picker { position: fixed; z-index: 6000; width: 268px; max-height: 320px; overflow-y: auto; padding: 4px 6px 8px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); } .wpt-sym-picker-title { color: var(--text-dim); font-size: 10px; font-weight: 600; margin: 8px 2px 4px; } .wpt-sym-picker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .wpt-sym-picker-item { display: flex; align-items: center; justify-content: center; height: 30px; padding: 0; background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: pointer; } .wpt-sym-picker-item:hover { background: var(--bg-panel-2); } .wpt-sym-picker-item.is-current { border-color: var(--accent); background: rgba(79, 140, 255, 0.18); } .track-table { display: flex; flex-direction: column; font-size: 12px; } .track-table-row { display: grid; grid-template-columns: 28px 1fr 56px 76px; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 6px; cursor: pointer; user-select: none; /* иначе Shift+клик выделяет текст строк как обычный текст браузера */ } .track-table-header { color: var(--text-dim); font-size: 11px; font-weight: 600; border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 4px; cursor: default; } .track-table-row:not(.track-table-header):hover { background: var(--bg-panel-2); } .track-table-row.selected { background: rgba(79, 140, 255, 0.18); } /* ---------- Окно "Объединение треков" ---------- */ .merge-dialog { display: flex; flex-direction: column; gap: 8px; height: 100%; } .merge-hint { color: var(--text-dim); font-size: 11px; } .merge-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding-right: 2px; } .merge-row { display: grid; grid-template-columns: 14px 18px 12px 1fr auto; align-items: center; gap: 6px; padding: 5px 6px; border: 1px solid transparent; border-radius: 6px; background: var(--bg-panel-2); font-size: 12px; cursor: grab; user-select: none; } /* строка окна "Объединение коллекций": у коллекции точек нет своего цвета, поэтому колонка цветного квадрата в ней отсутствует */ .merge-row.no-swatch { grid-template-columns: 14px 18px 1fr auto; } .merge-row.dragging { opacity: 0.5; } .merge-row.drop-target { border-color: var(--accent); } .merge-grip { color: var(--text-dim); } .merge-num { color: var(--text-dim); text-align: right; } .merge-row .swatch { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--swatch-border); } .merge-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .merge-count { color: var(--text-dim); } .merge-dialog .form-actions { display: flex; gap: 6px; } .merge-dialog .form-actions button { flex: 1; background: var(--accent); border: none; color: #fff; padding: 6px; border-radius: 6px; cursor: pointer; font-size: 12px; } .merge-dialog .form-actions button.danger { background: #c0392b; } /* ---------- Окно "Фильтрация трека" (tracks/trackFilterDialog.js) ---------- */ .filter-dialog { display: flex; flex-direction: column; gap: 8px; font-size: 12px; } .filter-track { color: var(--text-main); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .filter-method { display: flex; align-items: center; gap: 8px; } .filter-method span { color: var(--text-dim); } .filter-method select { flex: 1; min-width: 0; background: var(--bg-input); border: 1px solid var(--border); border-radius: 5px; padding: 4px 6px; color: var(--text-main); font: inherit; } .filter-slider { display: flex; align-items: center; gap: 8px; } .filter-slider input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); } /* ширина под двузначный уровень фиксирована - иначе ползунок дёргался бы при переходе с 9 на 10 */ .filter-level { width: 18px; text-align: right; color: var(--text-main); } .filter-scale { display: flex; justify-content: space-between; gap: 6px; color: var(--text-dim); font-size: 11px; margin-top: -4px; } .filter-stats { color: var(--text-main); } .filter-legend { display: flex; gap: 12px; color: var(--text-dim); font-size: 11px; } .filter-legend span { display: flex; align-items: center; gap: 5px; } .filter-legend i { width: 14px; height: 3px; border-radius: 2px; } .filter-dialog .form-actions { display: flex; gap: 6px; } .filter-dialog .form-actions button { flex: 1; background: var(--accent); border: none; color: #fff; padding: 6px; border-radius: 6px; cursor: pointer; font-size: 12px; } .filter-dialog .form-actions button.danger { background: #c0392b; } /* "Сохранить" на нулевом уровне ползунка - фильтр ничего бы не изменил */ .filter-dialog .form-actions button:disabled { background: var(--bg-panel-2); color: var(--text-dim); cursor: default; } /* ---------- Окно "Сохранить как..." (core/exportDialog.js) ---------- Кнопки повторяют оформление окна объединения, поэтому .form-actions описан для обоих окон одинаково. Высоту окна под содержимое подгоняет fitHeight() в exportDialog.js, поэтому здесь height:100% не нужен - блок задаёт высоту сам. */ .export-dialog { display: flex; flex-direction: column; gap: 10px; font-size: 12px; } /* обычная часть окна и содержимое мастера (options.wizard) - показывается одно из двух по переключателю форматов */ .export-standard { display: flex; flex-direction: column; gap: 10px; } .export-standard[hidden], .export-wizard[hidden] { display: none; } .export-count { color: var(--text-dim); font-size: 11px; } /* Выбор формата - сегментированный переключатель в одну строку: сами радиокнопки скрыты, кликается подпись, выбранная подсвечена акцентом. Скрывать input через display:none нельзя - он выпадет из обхода табуляцией и перестанет отвечать на стрелки, поэтому он остаётся в потоке, но нулевого размера. */ .export-formats { display: flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } .export-format { flex: 1; display: block; cursor: pointer; } .export-format input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .export-format span { display: block; padding: 6px 4px; text-align: center; background: var(--bg-input); color: var(--text-main); white-space: nowrap; transition: background 0.12s ease, color 0.12s ease; } .export-format + .export-format span { border-left: 1px solid var(--border); } .export-format:hover span { background: var(--bg-panel-2); } .export-format input:checked + span { background: var(--accent); color: #fff; } /* фокус с клавиатуры должен быть виден - подсветка выбранного его не заменяет */ .export-format:focus-within span { outline: 2px solid var(--accent); outline-offset: -2px; } /* .props-check задаёт display:flex, а он сильнее браузерного правила для [hidden] - без явного правила спрятать чекбокс склейки не получится */ .export-merge { margin: 0; } .export-merge[hidden] { display: none; } .export-hint { color: var(--text-dim); font-size: 11px; line-height: 1.4; } .export-name { display: flex; align-items: center; gap: 6px; } .export-name input { flex: 1; min-width: 0; background: var(--bg-input); border: 1px solid var(--border); border-radius: 5px; padding: 4px 6px; color: var(--text-main); font: inherit; } .export-ext { color: var(--text-dim); } .export-dialog .form-actions { display: flex; gap: 6px; } .export-dialog .form-actions button { flex: 1; background: var(--accent); border: none; color: #fff; padding: 6px; border-radius: 6px; cursor: pointer; font-size: 12px; } .export-dialog .form-actions button.danger { background: #c0392b; } /* строка скрытого с карты элемента - бледнее остальных (так же, как строка скрытой точки в окне "Список точек") */ .track-table-row.is-hidden, .waypoint-table-row.is-hidden, .polygon-table-row.is-hidden { opacity: 0.55; } /* ---------- Иконка "скрыт" перед номером строки в таблицах менеджеров ---------- */ .track-table .col-num, .waypoint-table .col-num, .polygon-table .col-num { display: flex; align-items: center; justify-content: flex-end; gap: 2px; } .visibility-hidden-icon { position: relative; display: inline-block; font-size: 9px; line-height: 1; color: var(--text-dim); } .visibility-hidden-icon::after { content: ""; position: absolute; left: -1px; right: -1px; top: 50%; height: 1px; background: var(--text-dim); transform: rotate(-45deg); } .track-table .col-name { display: flex; align-items: center; gap: 6px; overflow: hidden; } .track-table .col-name .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .track-table .col-name .swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; border: 1px solid var(--swatch-border); } .track-table .col-points, .track-table .col-dist { color: var(--text-dim); text-align: right; } /* ---------- Менеджер точек: своя таблица (3 колонки, без "расстояния") ---------- */ .waypoint-table { display: flex; flex-direction: column; font-size: 12px; } .waypoint-table-row { display: grid; grid-template-columns: 28px 1fr 90px; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 6px; cursor: pointer; user-select: none; } .waypoint-table-header { color: var(--text-dim); font-size: 11px; font-weight: 600; border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 4px; cursor: default; } .waypoint-table-row:not(.waypoint-table-header):hover { background: var(--bg-panel-2); } .waypoint-table-row.selected { background: rgba(79, 140, 255, 0.18); } .waypoint-table .col-num { color: var(--text-dim); text-align: right; } .waypoint-table .col-name { display: flex; align-items: center; overflow: hidden; } .waypoint-table .col-name .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .waypoint-table .col-points { color: var(--text-dim); text-align: right; padding-right: 4px; } /* поле inline-переименования коллекции - занимает место названия в строке */ .waypoint-table .col-name .rename-input { width: 100%; background: var(--bg-input); border: 1px solid var(--accent); color: var(--text-main); border-radius: 4px; padding: 2px 5px; font-size: 12px; font-family: inherit; } /* кнопка "Добавить коллекцию" - выделена зелёным на фоне остальных icon-btn */ .icon-btn-add { color: var(--ok); border-color: var(--ok); } .icon-btn-add:hover { background: rgba(46, 204, 113, 0.18); } /* ---------- Менеджер полигонов: таблица ---------- */ .polygon-table { display: flex; flex-direction: column; font-size: 12px; } .polygon-table-row { display: grid; grid-template-columns: 28px 1fr 56px 90px; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 6px; cursor: pointer; user-select: none; /* иначе Shift+клик выделяет текст строк как обычный текст браузера */ } .polygon-table-header { color: var(--text-dim); font-size: 11px; font-weight: 600; border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 4px; cursor: default; } .polygon-table-row:not(.polygon-table-header):hover { background: var(--bg-panel-2); } .polygon-table-row.selected { background: rgba(79, 140, 255, 0.18); } .polygon-table .col-num { color: var(--text-dim); text-align: right; } .polygon-table .col-name { display: flex; align-items: center; gap: 6px; overflow: hidden; } .polygon-table .col-name .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .polygon-table .col-name .swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; border: 1px solid var(--swatch-border); } .polygon-table .col-verts, .polygon-table .col-area { color: var(--text-dim); text-align: right; } /* ---------- Окна "Свойства трека" и "Свойства полигона": вкладки, форма, информация ---------- */ .props-window { display: flex; flex-direction: column; height: 100%; gap: 8px; } .props-tabs { display: flex; gap: 2px; flex: none; border-bottom: 1px solid var(--border); } .props-tab { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--text-dim); padding: 6px 12px; font-size: 12px; font-family: inherit; cursor: pointer; } .props-tab:hover { color: var(--text-main); } .props-tab.active { color: var(--text-main); border-bottom-color: var(--accent); } .props-tab-body { flex: 1; overflow: auto; } .props-actions { flex: none; display: flex; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border); } .props-actions button { flex: 1; background: var(--accent); border: none; color: #fff; padding: 6px; border-radius: 6px; font-size: 12px; font-family: inherit; cursor: pointer; } .props-actions button.secondary { background: var(--bg-panel-2); border: 1px solid var(--border); color: var(--text-main); } .props-form { display: grid; grid-template-columns: 96px 1fr; gap: 8px 10px; align-items: center; padding: 4px 2px; } .props-form > label { color: var(--text-dim); font-size: 12px; } .props-form input[type="text"], .props-form select, .props-form textarea { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-main); border-radius: 5px; padding: 4px 6px; font-size: 12px; width: 100%; font-family: inherit; } .props-form textarea { resize: vertical; line-height: 1.35; } /* Введено значение, которое не разбирается (координаты, высота, дата) - правка на карту не уходит, поле подсвечено до исправления или потери фокуса (по blur значение откатывается к последнему корректному). */ .props-form .is-invalid { border-color: var(--accent-2); } /* Окно свойств, открытое на нескольких выделенных треках: пояснение над формой и поля, значения которых у этих треков разошлись ("разные") */ .props-note { grid-column: 1 / -1; color: var(--text-dim); font-size: 11px; line-height: 1.4; padding-bottom: 2px; border-bottom: 1px solid var(--border); } .props-mixed { color: var(--text-dim); font-style: italic; } /* образец цвета, когда цвет у выделенных треков разный - "мозаика" вместо сплошного цвета: показывать один из цветов было бы неправдой */ .props-color-box-mixed { background: linear-gradient(135deg, #ff3300 0 25%, #ffd400 25% 50%, #35c759 50% 75%, #4f8cff 75% 100%); } .props-line-mixed { flex: 1; text-align: left; font-size: 12px; } /* Поле "Символ" - иконка и подпись в одну строку; коллекция символов (.wpt-sym-picker) открывается по клику, как в окне "Список точек" */ .props-sym-select { display: flex; align-items: center; gap: 8px; width: 100%; background: var(--bg-input); border: 1px solid var(--border); border-radius: 5px; padding: 3px 6px; color: var(--text-main); font-family: inherit; cursor: pointer; } .props-sym-select:hover { border-color: var(--accent); } .props-sym-box { flex: none; display: inline-flex; align-items: center; line-height: 0; } .props-sym-label { flex: 1; text-align: left; font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .props-sym-select .caret { color: var(--text-dim); font-size: 10px; } /* Поле "Цвет" - образец и HEX в одну строку; палитра открывается по клику */ .props-color-select { display: flex; align-items: center; gap: 8px; width: 100%; background: var(--bg-input); border: 1px solid var(--border); border-radius: 5px; padding: 3px 6px; color: var(--text-main); font-family: inherit; cursor: pointer; } .props-color-select:hover { border-color: var(--accent); } .props-color-box { width: 18px; height: 18px; flex: none; border-radius: 3px; border: 1px solid var(--swatch-border); } .props-color-value { flex: 1; text-align: left; color: var(--text-dim); font-size: 11px; letter-spacing: 0.5px; } .props-color-select .caret { color: var(--text-dim); font-size: 10px; } /* Палитра цвета: готовые цвета + свои (localStorage). Лежит в document.body с position:fixed - как список стилей линии и палитра символов точек. */ .color-picker { position: fixed; z-index: 6000; width: 196px; padding: 2px 6px 8px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); } .color-picker-title { color: var(--text-dim); font-size: 10px; font-weight: 600; margin: 8px 2px 4px; } .color-picker-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; } .color-swatch { position: relative; width: 100%; height: 24px; padding: 0; border: 1px solid var(--swatch-border); border-radius: 4px; cursor: pointer; } .color-swatch:hover { border-color: var(--text-main); } .color-swatch.is-current { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); } /* уголок-метка: цвет добавлен пользователем, его можно удалить (ПКМ) */ .color-swatch.is-custom::after { content: ""; position: absolute; right: -1px; bottom: -1px; border: 4px solid transparent; border-right-color: var(--accent); border-bottom-color: var(--accent); border-bottom-right-radius: 3px; } /* плитка своего цвета на время "Изменить цвет..." - нативный выбор цвета ровно на месте кнопки-плитки */ .color-swatch-editing { padding: 0; background: transparent; } .color-swatch-editing::-webkit-color-swatch-wrapper { padding: 0; } .color-swatch-editing::-webkit-color-swatch { border: none; border-radius: 3px; } .color-picker-add { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); color: var(--text-main); font-size: 11px; cursor: pointer; } .color-picker-add input[type="color"] { width: 24px; height: 24px; padding: 0; flex: none; cursor: pointer; background: var(--bg-input); border: 1px dashed var(--text-dim); border-radius: 4px; } .color-picker-add input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; } .color-picker-add input[type="color"]::-webkit-color-swatch { border: none; border-radius: 2px; } .props-check { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; color: var(--text-main); font-size: 12px; cursor: pointer; } /* Палитра автоцвета в окне "Настройки": те же плитки, что и в палитре цвета, но во всю ширину формы - два ряда по шесть цветов. */ .settings-palette { grid-column: 1 / -1; } /* Окно "Настройки" у суперадмина: переключатель режимов над вкладками - "Мои настройки" / "Дефолты для всех" (settings/settingsDialog.js). */ .settings-mode { display: flex; gap: 4px; flex: none; } .settings-mode-btn { flex: 1; background: var(--bg-panel-2); border: 1px solid var(--border); color: var(--text-dim); padding: 4px 8px; border-radius: 6px; font-size: 11.5px; font-family: inherit; cursor: pointer; } .settings-mode-btn:hover { color: var(--text-main); } .settings-mode-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; } /* пояснение над формой: чьи умолчания действуют и что сделает "Сохранить" */ .settings-layer-note { border-bottom: none; padding-bottom: 6px; } /* заголовок группы внутри формы настроек («Модули» на вкладке «Общие») */ .settings-group-title { grid-column: 1 / -1; margin-top: 6px; padding-bottom: 4px; color: var(--text-dim); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); } /* группа «Кэш карт» (map/tileCache.js): значение ползунка шире, чем у процентов («1024 МБ»); строка «занято» - цифры и кнопка «Очистить» */ .props-range-value.settings-cache-value { width: 54px; white-space: nowrap; } .settings-cache-used { display: flex; align-items: center; gap: 8px; font-size: 12px; } .settings-cache-used span { flex: 1; min-width: 0; } .settings-cache-used .settings-mode-btn { flex: none; } /* ссылка на регистрацию в пояснении гостю (props-readonly-note и пояснение над вкладкой "Общие") */ .props-readonly-note a, .settings-layer-note a { color: var(--accent); text-decoration: underline; } /* Выбор стиля линии: