/* Акцент панели — цвет действия: кнопки, ссылки, активный пункт меню, фокус. ЭТОТ ФАЙЛ ПОДКЛЮЧАЕТСЯ ПОСЛЕ токенов в base.html и перекрывает их: порядок важен, иначе акцент не применится. Палитры ниже — дословно из гайдбука (docs/guidebook/panel-theme.css, раздел «Акцент», редакция V7). Не править здесь: правится в гайдбуке и переносится. Значение ставится атрибутом data-accent на рядом с data-theme. По умолчанию violet-full — тот самый фиолетовый, с которым панель жила до сих пор: человек, который ничего не трогал, изменений не заметит. Осторожно с правилом на ссылки: `[data-accent] a { color: … }` красит и надпись на заливной кнопке — белый текст становится цветом акцента (1,28:1). Дефект проверен на fulsystem.ru 14.08.2026; цвет ссылки берём переменной. */ /* ── Акцент ──────────────────────────────────────────────────────────── Атрибут data-accent на том же элементе, что и data-theme. Меняет только цвет действия: кнопки, ссылки, активный пункт меню, фокус, сетку канваса. Статусные цвета и палитра данных не меняются. Без атрибута — синий #0078D4. */ [data-accent="blue"]{ --acc:#0078D4; --acc-hover:#0069BE; --acc-rgb:0,120,212; --acc-btn:#0078D4; --acc-btn-hover:#0069BE; --acc-on-light:#005A9E; --acc-on-dim:#95CDFF; --acc-on-dark:#4DAAFC; --acc-on-dark-hover:#7FC2FF; } [data-accent="duo"]{ --acc:#4B5FD0; --acc-hover:#3D4FB8; --acc-rgb:75,95,208; --acc-btn:#0078D4; --acc-btn-hover:#0069BE; --acc-on-light:#3D4FB8; --acc-on-dim:#AAB7FF; --acc-on-dark:#8395F5; --acc-on-dark-hover:#AAB7FF; } [data-accent="indigo"]{ --acc:#4B5FD0; --acc-hover:#3D4FB8; --acc-rgb:75,95,208; --acc-btn:#0078D4; --acc-btn-hover:#0069BE; --acc-on-light:#3D4FB8; --acc-on-dim:#AAB7FF; --acc-on-dark:#8395F5; --acc-on-dark-hover:#AAB7FF; } [data-accent="indigo-light"]{ --acc:#6C7FE8; --acc-hover:#5A6DDB; --acc-rgb:131,149,245; --acc-btn:#0078D4; --acc-btn-hover:#0069BE; --acc-on-light:#4757C4; --acc-on-dim:#BFC8FF; --acc-on-dark:#A9B6FF; --acc-on-dark-hover:#C9D1FF; } /* violet — старое имя, оставлено псевдонимом: фиолетовый теперь один */ [data-accent="violet"], [data-accent="violet-full"]{ --acc:#6152C9; --acc-hover:#5344AF; --acc-rgb:97,82,201; --acc-btn:#6152C9; --acc-btn-hover:#5344AF; --acc-on-light:#5344AF; --acc-on-dim:#BDB4FF; --acc-on-dark:#A79CF5; --acc-on-dark-hover:#C4BCFF; } [data-accent="teal"]{ --acc:#0E8A8A; --acc-hover:#0B7373; --acc-rgb:14,138,138; --acc-btn:#0078D4; --acc-btn-hover:#0069BE; --acc-on-light:#0B6E6E; --acc-on-dim:#5FE0E0; --acc-on-dark:#2CC4C4; --acc-on-dark-hover:#5FE0E0; } /* Палитра TecMachinery: бирюза #00E5FF на графите */ [data-accent="cyan"]{ --acc:#00B8D4; --acc-hover:#0098B0; --acc-rgb:0,184,212; --acc-btn:#0078D4; --acc-btn-hover:#0069BE; --acc-on-light:#046B7C; --acc-on-dim:#5FE7F7; --acc-on-dark:#2ED4EC; --acc-on-dark-hover:#6FEBFA; } [data-accent="cyan-full"]{ --acc:#00B8D4; --acc-hover:#0098B0; --acc-rgb:0,184,212; --acc-btn:#008296; --acc-btn-hover:#006F80; --acc-on-light:#046B7C; --acc-on-dim:#5FE7F7; --acc-on-dark:#2ED4EC; --acc-on-dark-hover:#6FEBFA; } /* Тёплые: рядом со статусами — статус подписываем словом */ [data-accent="orange"]{ --acc:#E2681C; --acc-hover:#C25612; --acc-rgb:226,104,28; --acc-btn:#0078D4; --acc-btn-hover:#0069BE; --acc-on-light:#A9500F; --acc-on-dim:#FFB574; --acc-on-dark:#F79A50; --acc-on-dark-hover:#FFC08A; } [data-accent="red"]{ --acc:#C90A15; --acc-hover:#AC0811; --acc-rgb:201,10,21; --acc-btn:#0078D4; --acc-btn-hover:#0069BE; --acc-on-light:#AC0811; --acc-on-dim:#FF9099; --acc-on-dark:#FF858E; --acc-on-dark-hover:#FFAAB1; } [data-accent="red-full"]{ --acc:#C90A15; --acc-hover:#AC0811; --acc-rgb:201,10,21; --acc-btn:#C90A15; --acc-btn-hover:#AC0811; --acc-on-light:#AC0811; --acc-on-dim:#FF9099; --acc-on-dark:#FF858E; --acc-on-dark-hover:#FFAAB1; } [data-accent="orange-full"]{ --acc:#E2681C; --acc-hover:#C25612; --acc-rgb:226,104,28; --acc-btn:#C15714; --acc-btn-hover:#A64A0F; --acc-on-light:#A9500F; --acc-on-dim:#FFB574; --acc-on-dark:#F79A50; --acc-on-dark-hover:#FFC08A; } [data-accent="green-full"]{ --acc:#2E9E5B; --acc-hover:#26834B; --acc-rgb:46,158,91; --acc-btn:#28874D; --acc-btn-hover:#216F40; --acc-on-light:#1F7A45; --acc-on-dim:#7BE49B; --acc-on-dark:#4CC276; --acc-on-dark-hover:#7BE49B; } [data-accent="teal-full"]{ --acc:#0E8A8A; --acc-hover:#0B7373; --acc-rgb:14,138,138; --acc-btn:#0D8383; --acc-btn-hover:#0A6E6E; --acc-on-light:#0B6E6E; --acc-on-dim:#5FE0E0; --acc-on-dark:#2CC4C4; --acc-on-dark-hover:#5FE0E0; } [data-accent="green"]{ --acc:#2E9E5B; --acc-hover:#26834B; --acc-rgb:46,158,91; --acc-btn:#0078D4; --acc-btn-hover:#0069BE; --acc-on-light:#005A9E; --acc-on-dim:#95CDFF; --acc-on-dark:#4DAAFC; --acc-on-dark-hover:#7FC2FF; } [data-accent="green-indigo"]{ --acc:#2E9E5B; --acc-hover:#26834B; --acc-rgb:46,158,91; --acc-btn:#0078D4; --acc-btn-hover:#0069BE; --acc-on-light:#3D4FB8; --acc-on-dim:#AAB7FF; --acc-on-dark:#8395F5; --acc-on-dark-hover:#AAB7FF; } /* Полные режимы: меняют и заливку кнопок, и логотип */ [data-accent="indigo-full"]{ --acc:#4B5FD0; --acc-hover:#3D4FB8; --acc-rgb:75,95,208; --acc-btn:#4B5FD0; --acc-btn-hover:#3D4FB8; --acc-on-light:#3D4FB8; --acc-on-dim:#AAB7FF; --acc-on-dark:#8395F5; --acc-on-dark-hover:#AAB7FF; } [data-accent]{ --blue:var(--acc-btn); --blue-hover:var(--acc-btn-hover); --accent:var(--acc); --accent-soft:rgba(var(--acc-rgb),.16); --accent-line:rgba(var(--acc-rgb),.36); --blue-text:var(--acc-on-dark); --blue-soft:rgba(var(--acc-rgb),.16); --link:var(--acc-on-dark); --link-hover:var(--acc-on-dark-hover); --grid-line:rgba(var(--acc-rgb),.10); } [data-theme="dim"][data-accent]{ --blue-text:var(--acc-on-dim); --blue-soft:rgba(var(--acc-rgb),.26); --link:var(--acc-on-dim); --link-hover:var(--acc-on-dark-hover); --grid-line:rgba(var(--acc-rgb),.16); } [data-theme="light"][data-accent]{ --blue-text:var(--acc-on-light); --blue-soft:rgba(var(--acc-rgb),.10); --accent-soft:rgba(var(--acc-rgb),.12); --accent-line:rgba(var(--acc-rgb),.30); --link:var(--acc-on-light); --link-hover:var(--acc); --grid-line:rgba(var(--acc-rgb),.08); } /* Плитки и капсовые метки читают акцент */ [data-tile]{ background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent); } [data-tile]:hover{border-color:var(--accent);} /* Логотип меняется только в полных режимах — он и так стоит на var(--blue) */ /* Палитра данных: графики, схемы, дашборды, иллюстрации блога. В панелях применяется к рядам, узлам карты, меткам, тегам и легендам. Кнопки, ссылки, активный пункт меню и фокус остаются синими, статусы — только статусными цветами. */ :root{ --data-1:#3FA0F0; --data-2:#4CC276; --data-3:#2CC4C4; --data-4:#E5A32E; --data-5:#E58063; --data-6:#8395F5; --data-0:#7C8794; --data-7:#2ED4EC; --data-8:#F79A50; --data-9:#C4A6FF; } [data-theme="light"]{ --data-1:#0078D4; --data-2:#2E9E5B; --data-3:#0E8A8A; --data-4:#9A6E00; --data-5:#BC5539; --data-6:#4B5FD0; --data-0:#8A96A3; --data-7:#00B8D4; --data-8:#E2681C; --data-9:#6152C9; } /* Плотность таблиц: обычная 44 px, компактная 32 px */ [data-density="compact"] [data-row] > div{padding-top:5px;padding-bottom:5px;} [data-density="compact"] [data-row] [data-sub]{display:none;} [data-density="compact"] [data-head] > div{padding-top:6px;padding-bottom:6px;} /* ── Дополнено локально: два фирменных тона TecMachinery ──────────────────── В гайдбуке они ОПИСАНЫ словами (13 упоминаний в тексте, значения в таблице ТЗ «Переключатель акцента»), но готовых определений в panel-theme.css нет. Решение владельца 18.08.2026: цвета добавить, гайдбук не трогать — поэтому правила лежат здесь, отдельно от скопированного блока, а не подмешаны к нему. Значения взяты из таблицы ТЗ дословно, ни один тон не подобран на глаз. «Синий 2» держит контраст сам (5,21 на белом), поэтому в кнопку идёт сам фирменный цвет. У «Бирюзы 2» фирменный #1697C4 даёт белому лишь 3,36 — он остаётся в графике, а заливка кнопки притемнена до #117395 (5,37). Проверено расчётом перед выкаткой: надпись на кнопке 5,21 и 5,37; текст на светлой 5,94 и 5,49; на тёмной 6,36 и 8,16 — все выше порога 4,5. --acc-on-dim нужен только средней теме, которой в рабочей панели пока нет (она включается переменной PANEL_THEME=fulsystem); ставим светлый тон той же пары, чтобы значение не пустовало. */ [data-accent="tec-blue-full"]{ --acc:#1E70B4; --acc-hover:#1A639E; --acc-rgb:30,112,180; --acc-btn:#1E70B4; --acc-btn-hover:#1A639E; --acc-on-light:#1A639E; --acc-on-dim:#7FC2FF; --acc-on-dark:#469AE0; --acc-on-dark-hover:#7FC2FF; } [data-accent="tec-full"]{ --acc:#1697C4; --acc-hover:#148BB4; --acc-rgb:22,151,196; --acc-btn:#117395; --acc-btn-hover:#0F6785; --acc-on-light:#106D8D; --acc-on-dim:#6FEBFA; --acc-on-dark:#29B6E7; --acc-on-dark-hover:#6FEBFA; } /* Частичные варианты тех же тонов гайдбук называет псевдонимами полных: если где-то сохранилось старое значение, пусть работает, а не падает в синий. */ [data-accent="tec-blue"]{ --acc:#1E70B4; --acc-hover:#1A639E; --acc-rgb:30,112,180; --acc-btn:#1E70B4; --acc-btn-hover:#1A639E; --acc-on-light:#1E70B4; --acc-on-dim:#7FC2FF; --acc-on-dark:#469AE0; --acc-on-dark-hover:#7FC2FF; } [data-accent="tec"]{ --acc:#1697C4; --acc-hover:#148BB4; --acc-rgb:22,151,196; --acc-btn:#117395; --acc-btn-hover:#0F6785; --acc-on-light:#106D8D; --acc-on-dim:#6FEBFA; --acc-on-dark:#29B6E7; --acc-on-dark-hover:#6FEBFA; } /* ── Мост: токены панели читают акцент ───────────────────────────────────── Панель написана на своих именах (--dp-accent…), гайдбук — на своих (--acc…). Переименовывать всю панель ради этого незачем: здесь одно место, где одни имена читают другие. Селекторы повторяют те же, что в base.html, — иначе правило темы (специфичнее :root) перебьёт акцент обратно. */ :root{ /* тёмная тема — база панели */ --dp-accent:var(--acc-btn); --dp-accent-hover:var(--acc-btn-hover); --dp-accent-text:var(--acc-on-dark); --dp-accent-soft:var(--acc); --dp-accent-050:rgba(var(--acc-rgb),.14); --dp-ring:rgba(var(--acc-rgb),.42); /* меню тёмное в обеих темах — активный пункт красится акцентом всегда */ --sb-active-bg:rgba(var(--acc-rgb),.15); --sb-active-text:var(--acc-on-dark); --sb-hover-line:rgba(var(--acc-rgb),.45); } html[data-theme="dim"]{ --dp-accent-text:var(--acc-on-dim); --dp-accent-050:rgba(var(--acc-rgb),.16); --dp-ring:rgba(var(--acc-rgb),.38); } html[data-theme="light"]{ --dp-accent:var(--acc-btn); --dp-accent-hover:var(--acc-btn-hover); --dp-accent-text:var(--acc-on-light); --dp-accent-soft:var(--acc); --dp-accent-050:rgba(var(--acc-rgb),.10); --dp-ring:rgba(var(--acc-rgb),.28); } /* Значок в шапке меню — тоже цвет действия (гайдбук: акцент меняет логотип). */ .brand .logo{background:linear-gradient(135deg,var(--acc-btn), color-mix(in srgb,var(--acc-btn) 55%,#ffffff))} /* ── Переключатель цвета кнопок ──────────────────────────────────────────── Восемь кружков — по одному на акцент, который действительно меняет кнопку. Частичные акценты гайдбука (кнопка остаётся синей) в переключатель не идут: человек нажимает «оранжевый», а кнопка синяя — это выглядит как поломка. */ .accentpick{position:relative;display:inline-block} .accentpick > summary{list-style:none;cursor:pointer;width:28px;height:28px; border-radius:999px;border:1px solid var(--line);background:var(--acc-btn); display:inline-flex;align-items:center;justify-content:center} .accentpick > summary::-webkit-details-marker{display:none} .accentpick > summary:hover{border-color:var(--dp-border-strong)} .accentmenu{position:absolute;right:0;top:34px;z-index:60;padding:10px; background:var(--panel);border:1px solid var(--line);border-radius:12px; box-shadow:var(--dp-shadow-pop);width:196px} .accentmenu .row{display:flex;flex-wrap:wrap;gap:8px} /* Заливка кружка — из ЕГО ЖЕ палитры: атрибут data-accent стоит на самой кнопке, поэтому var(--acc-btn) здесь даёт цвет именно этого варианта. Без этой строки кружки выходили одинаково серыми — «не вижу, что за цвета» (владелец, 18.08.2026). */ .accentmenu button.sw{width:28px;height:28px;border-radius:999px;cursor:pointer; border:2px solid transparent;padding:0;background:var(--acc-btn); box-shadow:0 0 0 1px var(--line) inset} .accentmenu button.sw:hover{transform:scale(1.08)} /* Выбранный — белое кольцо внутри и рамка цветом текста снаружи: на тёмном и на светлом фоне видно одинаково. */ .accentmenu button.sw[aria-pressed="true"]{border-color:var(--text); box-shadow:0 0 0 2px var(--panel) inset} .accentmenu button.sw[aria-pressed="true"]{border-color:var(--text)} .accentmenu .reset{margin-top:10px;width:100%;background:transparent; border:1px solid var(--line);color:var(--muted);border-radius:8px; padding:6px 8px;cursor:pointer;font:inherit;font-size:12px} .accentmenu .reset:hover{color:var(--text);border-color:var(--dp-border-strong)} @media (prefers-reduced-motion: reduce){.accentpick *{transition:none}}