@charset "utf-8"; /* ═══ ГРАФИКИ — ОФОРМЛЕНИЕ ОТМЕТОК chart.js (визуальный слой, волна Р0) ═══════════════════════════════ ⛔ ЦВЕТ — КЛАССОМ, А НЕ ЗНАЧЕНИЕМ. Прежний рендер читал токен getComputedStyle и ЗАПЕКАЛ готовый hex в атрибут `fill` (разведка графиков 05.10.2026, §3: chart.js:174): после смены темы график оставался в старой, печать из тёмной темы давала светло-голубые столбики. Под флагом «графики» chart.js пишет отметке КЛАСС, а краску даёт правило ниже через var(--…): тема и печатная палитра (ui-tokens.css, @media print) доходят до уже нарисованного графика без перерисовки. ⛔ ВСЕ ПРАВИЛА — ПОД ФЛАГОМ ВИДА `:root[data-вкл~="графики"]`. Флаг ставит СЛУЖБА настройкой WebUi:Views (Shared.WebAuth/ВключённыеВиды.cs); у Заказчика он выключен, и тогда этот файл не действует ни на один узел — без флага chart.js рисует прежним способом, байт в байт. Откат — правкой настройки. Форму файла держит ГрафикиПодФлагомTests (Planner.Core.Tests): каждый селектор начинается с приставки флага, цветов-литералов нет (О-1), каждая var(--…) объявлена. ⛔ ЦВЕТОВ ЗДЕСЬ НЕТ — ТОЛЬКО РОЛИ. Новые роли (шкала загрузки, стадии, контекст, шапка, тона дня) объявлены в ui-tokens.css в трёх темах и печати; пары держит tools/contrast/check.py. ⛔ БЕЗ ДВИЖЕНИЯ, БЕЗ :has(), БЕЗ ЛИПКОСТИ: сторожа БезДвиженияИШрифтов и НеизмеренныеВозможности. Подсказка позиционируется пользовательскими свойствами --подсказка-x/-y, которые ставит График.оживить через CSSOM (строгая CSP финконтура это пропускает). */ /* ── 1. СТОЛБЦЫ (прежние формы chart.js: столбцы, столбцыРяды) — те же роли, что прежде значением. */ :root[data-вкл~="графики"] .ряд-тон-1.заливка { fill: var(--цвет-акцент); stroke: var(--цвет-акцент); } :root[data-вкл~="графики"] .ряд-тон-2.заливка { fill: var(--цвет-граница-сильная); stroke: var(--цвет-граница-сильная); } :root[data-вкл~="графики"] .ряд-тон-1.контур { fill: none; stroke: var(--цвет-акцент); } :root[data-вкл~="графики"] .ряд-тон-2.контур { fill: none; stroke: var(--цвет-граница-сильная); } :root[data-вкл~="графики"] .ряд-тон-1.штрих { stroke: var(--цвет-акцент); } :root[data-вкл~="графики"] .ряд-тон-2.штрих { stroke: var(--цвет-граница-сильная); } :root[data-вкл~="графики"] .штрих-ось { stroke: var(--цвет-граница); } :root[data-вкл~="графики"] .штрих-тон-1 { stroke: var(--цвет-акцент); } :root[data-вкл~="графики"] .штрих-тон-2 { stroke: var(--цвет-граница-сильная); } :root[data-вкл~="графики"] .chart-ось { stroke: var(--цвет-граница); stroke-width: 1; } :root[data-вкл~="графики"] .chart-подпись { fill: var(--цвет-текст-3); font-family: var(--шрифт); } /* ── 2. ОБЩЕЕ НОВЫХ ФОРМ: подпись, прокрутка широкого рисунка (масштаб 1 — подписи 12 px), «нет данных». */ :root[data-вкл~="графики"] .график { max-width: 100%; } :root[data-вкл~="графики"] .график-прокрутка { overflow-x: auto; max-width: 100%; } :root[data-вкл~="графики"] .график-прокрутка .chart { width: auto; max-width: none; } :root[data-вкл~="графики"] .график-подпись { fill: var(--цвет-текст-2); font-family: var(--шрифт); } :root[data-вкл~="графики"] .график-штрих-фон { fill: var(--цвет-поверхность-утопленная); } :root[data-вкл~="графики"] .график-штрих-линия { stroke: var(--цвет-граница-сильная); } /* Заливку «нет данных» (узор) несёт САМА отметка атрибутом fill="url(#график-штрих-N)": узор у каждого рисунка свой. Ссылка из правила на общий id брала первый узел документа — и в скрытом экране не красила вовсе (ревью круга 1). */ :root[data-вкл~="графики"] .сост-нет-данных { stroke: var(--цвет-граница); stroke-width: 1; } :root[data-вкл~="графики"] .график-цель { fill: transparent; } /* Рисунки новых форм — блоком в своём размере (ширина — атрибутом, масштаб 1). Строка план/факта и сегмент полосы — сведения, а не орган, пока у них нет ключа; с ключом (data-график-ключ) — цель действия: курсор руки, Tab и Enter. */ :root[data-вкл~="графики"] .chart.теплокарта, :root[data-вкл~="графики"] .chart.план-факт, :root[data-вкл~="графики"] .chart.линия { display: block; } :root[data-вкл~="графики"] .chart.сегменты { display: block; width: 100%; height: auto; } :root[data-вкл~="графики"] .пф-строка { cursor: default; } :root[data-вкл~="графики"] .пф-строка[data-график-ключ], :root[data-вкл~="графики"] .сег[data-график-ключ] { cursor: pointer; } /* ── 3. ИСКРА (К2): линия — серый контекст 2 px, текущая точка — акцент с кольцом цвета карточки. */ :root[data-вкл~="графики"] .chart.искра { width: auto; max-width: none; display: inline-block; vertical-align: middle; } :root[data-вкл~="графики"] .искра-линия { fill: none; stroke: var(--цвет-контекст); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } :root[data-вкл~="графики"] .искра-одиночка { fill: var(--цвет-контекст); } :root[data-вкл~="графики"] .искра-точка { fill: var(--цвет-акцент); stroke: var(--цвет-поверхность); stroke-width: 2; } :root[data-вкл~="графики"] .искра-пусто { color: var(--цвет-текст-3); font-size: var(--кегль-подпись); } /* ── 4. ПЛАН/ФАКТ (К3): план — контур со светлой заливкой, факт — заливка, сверх плана — «внимание» и ▲, норма — риска; «вычислено» — ПУНКТИРНЫЙ контур (пунктир значит «вычислено» и больше ничего). */ :root[data-вкл~="графики"] .пф-план { fill: var(--цвет-запись-план); stroke: var(--цвет-граница-сильная); stroke-width: 1; } :root[data-вкл~="графики"] .пф-план.вычислено { stroke-dasharray: 4 3; } :root[data-вкл~="графики"] .пф-факт { fill: var(--цвет-запись-факт); } :root[data-вкл~="графики"] .пф-сверх { fill: var(--цвет-внимание); } :root[data-вкл~="графики"] .пф-знак { fill: var(--цвет-внимание); font-family: var(--шрифт); } :root[data-вкл~="графики"] .пф-норма { stroke: var(--цвет-текст); stroke-width: 2; } :root[data-вкл~="графики"] .пф-число { fill: var(--цвет-текст); font-variant-numeric: tabular-nums; } :root[data-вкл~="графики"] .пф-слово { fill: var(--цвет-текст-3); } /* ── 5. ТЕПЛОВАЯ КАРТА (К4): ступени одной синей шкалы, перегруз — «тревога» и ▲ в углу; нерабочая — фон страницы со словом (не тон ступени 0: их ΔE 1,8); текущая неделя — обводка акцентом 2 px. */ :root[data-вкл~="графики"] .шкала-0 { fill: var(--шкала-0); } :root[data-вкл~="графики"] .шкала-1 { fill: var(--шкала-1); } :root[data-вкл~="графики"] .шкала-2 { fill: var(--шкала-2); } :root[data-вкл~="графики"] .шкала-3 { fill: var(--шкала-3); } :root[data-вкл~="графики"] .сост-перегруз { fill: var(--цвет-тревога); } :root[data-вкл~="графики"] .сост-нерабочая { fill: var(--цвет-фон-страницы); stroke: var(--цвет-граница); stroke-width: 1; } :root[data-вкл~="графики"] .тк-число { font-family: var(--шрифт); font-variant-numeric: tabular-nums; pointer-events: none; } :root[data-вкл~="графики"] .текст-на-шкале-0 { fill: var(--текст-на-шкале-0); } :root[data-вкл~="графики"] .текст-на-шкале-1 { fill: var(--текст-на-шкале-1); } :root[data-вкл~="графики"] .текст-на-шкале-2 { fill: var(--текст-на-шкале-2); } :root[data-вкл~="графики"] .текст-на-шкале-3 { fill: var(--текст-на-шкале-3); } :root[data-вкл~="графики"] .на-тревоге { fill: var(--цвет-текст-на-тревоге); } :root[data-вкл~="графики"] .тк-слово { fill: var(--цвет-текст-3); } :root[data-вкл~="графики"] .тк-знак-перегруза { fill: var(--цвет-текст-на-тревоге); pointer-events: none; } :root[data-вкл~="графики"] .тк-текущая { fill: none; stroke: var(--цвет-акцент); stroke-width: 2; pointer-events: none; } :root[data-вкл~="графики"] .тк-шапка { fill: var(--цвет-текст-2); } :root[data-вкл~="графики"] .тк-имя { fill: var(--цвет-текст); } :root[data-вкл~="графики"] .тк-ячейка { cursor: pointer; } :root[data-вкл~="графики"] .тк-фокус { fill: none; stroke: none; pointer-events: none; } /* Обводка фокуса браузера НЕ гасится (сторож ФокусНеПодчёркивание): кольцо внутри клетки — второй признак, видимый и там, где обводку SVG-узла браузер рисует по рамке группы. */ :root[data-вкл~="графики"] .тк-ячейка:focus .тк-фокус { stroke: var(--цвет-фокус); stroke-width: 3; } :root[data-вкл~="графики"] .тк-клетка { stroke: none; } /* ── 6. ЛИНИЯ (К15): выделенный ряд — акцент 2 px, прочие — серый контекст; точка ≥ 8 px с кольцом. */ :root[data-вкл~="графики"] .линия-главная { fill: none; stroke: var(--цвет-акцент); stroke-width: 2; stroke-linejoin: round; } :root[data-вкл~="графики"] .линия-контекст { fill: none; stroke: var(--цвет-контекст); stroke-width: 2; stroke-linejoin: round; } :root[data-вкл~="графики"] .линия-главная-точка { fill: var(--цвет-акцент); stroke: var(--цвет-поверхность); stroke-width: 2; } :root[data-вкл~="графики"] .линия-контекст-точка { fill: var(--цвет-контекст); stroke: var(--цвет-поверхность); stroke-width: 2; } /* ── 7. ПОЛОСА-СЕГМЕНТЫ (К16): порядковая шкала стадий либо выделение против серого. */ :root[data-вкл~="графики"] .сег { stroke: none; } :root[data-вкл~="графики"] .стадия-1 { fill: var(--стадия-1); } :root[data-вкл~="графики"] .стадия-2 { fill: var(--стадия-2); } :root[data-вкл~="графики"] .стадия-3 { fill: var(--стадия-3); } :root[data-вкл~="графики"] .стадия-4 { fill: var(--стадия-4); } :root[data-вкл~="графики"] .сег-акцент { fill: var(--цвет-акцент); } :root[data-вкл~="графики"] .сег-контекст { fill: var(--цвет-контекст); } /* ── 8. ПОДСКАЗКА — одна на страницу (График.оживить): значение крупно, подписи ниже. Не единственный путь к числу: всё, что в ней, есть в отметке или в «Числах таблицей». */ :root[data-вкл~="графики"] .график-подсказка { position: fixed; left: var(--подсказка-x); top: var(--подсказка-y); z-index: 1000; max-width: 320px; padding: var(--отступ-микро) var(--отступ-малый); background: var(--цвет-поверхность); color: var(--цвет-текст); border: 1px solid var(--цвет-граница-сильная); border-radius: var(--скругление); box-shadow: var(--тень-парения); font-family: var(--шрифт); font-size: var(--кегль-служебный); line-height: var(--интерлиньяж-плотный); pointer-events: none; } :root[data-вкл~="графики"] .график-подсказка[hidden] { display: none; } :root[data-вкл~="графики"] .график-подсказка-число { font-size: var(--кегль-таблица); font-weight: var(--начертание-выделенное); font-variant-numeric: tabular-nums; } :root[data-вкл~="графики"] .график-подсказка-подпись { color: var(--цвет-текст-2); } /* ── 9. ПЕЧАТЬ: роли уже переложены ui-tokens.css (светлые шкалы и из тёмной темы); подсказки на листе нет. Широкий рисунок (карта за год, длинная линия) на лист УМЕЩАЕТСЯ: шире листа — сжимается по viewBox, уже — остаётся в масштабе 1 (прежде width:auto выводил недели после ~18-й за край листа; ревью круга 1). Числа — в двойнике ниже. «Числа графика / таблицей» на листе ОТКРЫТЫ: чёрно-белый лист — ради них. Свёрнутый
Chromium 131+ прячет через ::details-content (content-visibility: hidden), и прежнее правило display:block его не открывало (замер Chromium 151, круг 1). Браузер без ::details-content правило отбросит целиком — двойник останется свёрнутым, как до волны Р0; поэтому правило отдельное и ни с чем не сгруппировано. */ @media print { :root[data-вкл~="графики"] .график-подсказка { display: none; } :root[data-вкл~="графики"] .график-прокрутка { overflow: visible; } :root[data-вкл~="графики"] .график-прокрутка .chart { max-width: 100%; height: auto; } } @media print { :root[data-вкл~="графики"] details.chart-data::details-content { content-visibility: visible; display: block; } }