/* ============================================================ ЮЗОВКА — ПАЛИТРЫ (пресеты цветовой схемы) ------------------------------------------------------------ Здесь живут АЛЬТЕРНАТИВНЫЕ палитры. «Устоявшаяся» (classic) палитра остаётся в game.css :root и НЕ дублируется здесь — поэтому её нельзя случайно сломать, экспериментируя тут. Как работает переключение: - palettes.js ставит на атрибут data-palette="КЛЮЧ". - Ниже каждый пресет — это блок :root[data-palette="КЛЮЧ"] { ... } который ПЕРЕОПРЕДЕЛЯЕТ только цветовые токены. - Пресет "classic" не задан здесь специально: при нём атрибут снимается и берутся значения из game.css :root. Как добавить новый пресет (3 шага): 1) Скопируйте блок-шаблон ниже, поменяйте КЛЮЧ и значения. 2) Добавьте { key: "КЛЮЧ", label: "Название" } в PALETTES в palettes.js. 3) Готово — пресет появится в переключателе меню «Палитра». Обычно переопределяются только цветовые переменные (поверхности, линии, текст, акценты, фильтры иконок). Если в game.css остался старый цвет, прописанный напрямую в фоне плашки, допустим точечный override цвета фона без изменения размеров, шрифтов, геометрии и текстур. ============================================================ */ /* ------------------------------------------------------------ ПРЕСЕТ: graphite — «Графитовая» Чёрно-серая основа без синевы; текст и рамки остаются в слабом золоте классики. ------------------------------------------------------------ */ :root[data-palette="graphite"] { /* Поверхности */ --bg: #070707; --bg-glow: transparent; --panel: #0b0b0b; --panel-2: #0e0e0e; --panel-3: #141414; --panel-raised: #181818; --overlay: rgba(4, 4, 4, 0.82); /* Линии — классическое слабое золото */ --line: rgba(214, 196, 150, 0.16); --line-strong: rgba(214, 196, 150, 0.32); --line-soft: rgba(214, 196, 150, 0.09); /* Текст — классическая слоновая кость */ --text: #d6cdb2; --text-strong: #efe6cb; --muted: #a3987e; --muted-2: #81775f; /* Акценты — почти классика, без ухода в синеву */ --accent: #c9a86a; --accent-soft: rgba(201, 168, 106, 0.1); --gold: #d3b878; --gold-soft: rgba(211, 184, 120, 0.1); --good: #93b06e; --good-soft: rgba(147, 176, 110, 0.1); --bad: #b5533d; --bad-soft: rgba(181, 83, 61, 0.11); --warn: #c99f56; --warn-soft: rgba(201, 159, 86, 0.1); /* Перекраска чёрных PNG-иконок */ --icon-slate: brightness(0) saturate(100%) invert(76%) sepia(8%) saturate(160%) brightness(94%) contrast(86%); --icon-good: brightness(0) saturate(100%) invert(66%) sepia(22%) saturate(480%) hue-rotate(55deg) brightness(89%) contrast(85%); --icon-bad: brightness(0) saturate(100%) invert(45%) sepia(32%) saturate(850%) hue-rotate(340deg) brightness(88%) contrast(86%); --icon-gold: brightness(0) saturate(100%) invert(74%) sepia(22%) saturate(420%) brightness(96%) contrast(86%); --icon-muted: brightness(0) saturate(100%) invert(54%) sepia(6%) saturate(170%) brightness(88%) contrast(84%); --active-gold: var(--gold); --active-good: var(--good); --active-bad: var(--bad); --active-muted: var(--muted); } :root[data-palette="graphite"] .masthead, :root[data-palette="graphite"] .strategy-hud, :root[data-palette="graphite"] .forecast-bar, :root[data-palette="graphite"] .game-menu-bar, :root[data-palette="graphite"] .panel-title, :root[data-palette="graphite"] .map-marker, :root[data-palette="graphite"] .menu-toggle, :root[data-palette="graphite"] .notice-head, :root[data-palette="graphite"] .notice.intro-briefing .notice-head, :root[data-palette="graphite"] .notice.milestone-briefing .notice-head, :root[data-palette="graphite"] .notice.history-briefing .notice-head, :root[data-palette="graphite"] .internal-confirm-dialog h2, :root[data-palette="graphite"] .map-marker.upgrade-marker.locked { background: var(--heading-texture) center / var(--heading-texture-size) no-repeat, linear-gradient(180deg, rgba(214, 196, 150, 0.06), rgba(214, 196, 150, 0.015)), var(--panel-2); background-blend-mode: normal, normal, normal; } :root[data-palette="graphite"] .notice { background: linear-gradient(175deg, rgba(28, 28, 28, 0.98), #121212 34%, #0d0d0d 92%); } :root[data-palette="graphite"] .page::after { mix-blend-mode: luminosity; } :root[data-palette="graphite"] .panel-title::before, :root[data-palette="graphite"] .panel-title::after, :root[data-palette="graphite"] .notice-head small::before, :root[data-palette="graphite"] .notice-head small::after { background: rgba(214, 196, 150, 0.24); } :root[data-palette="graphite"] .masthead .brand-text::before, :root[data-palette="graphite"] .masthead .brand-text::after { background: linear-gradient(90deg, transparent, rgba(214, 196, 150, 0.28), transparent); } :root[data-palette="graphite"] .choice-risk-badge { color: #090a0b; } /* ------------------------------------------------------------ ШАБЛОН нового пресета — скопируйте, переименуйте КЛЮЧ и правьте: :root[data-palette="mykey"] { --bg: #...; --panel: #...; --panel-2: #...; --panel-3: #...; --panel-raised: #...; --overlay: rgba(...); --line: ...; --line-strong: ...; --line-soft: ...; --text: #...; --text-strong: #...; --muted: #...; --muted-2: #...; --accent: #...; --accent-soft: ...; --gold: #...; --gold-soft: ...; --good: #...; --good-soft: ...; --bad: #...; --bad-soft: ...; --warn: #...; --warn-soft: ...; --icon-slate: ...; --icon-good: ...; --icon-bad: ...; --icon-gold: ...; --icon-muted: ...; } ------------------------------------------------------------ */