и на
обёртку .te-scroll. Высоты: 22 / 32 / 44 px = sane defaults для
desktop tables (CHARTER T4: desktop-first, 22"/24" мониторы).
============================================================ */
.te-table.te-mode-compact tbody td { padding: 2px 8px; line-height: 18px; font-size: 12px; }
.te-table.te-mode-compact thead th { padding: 4px 6px; font-size: 11px; }
.te-table.te-mode-compact tbody tr { height: 22px; }
.te-table.te-mode-regular tbody td { padding: 6px 10px; line-height: 20px; font-size: 13px; }
.te-table.te-mode-regular thead th { padding: 8px 8px; font-size: 12px; }
.te-table.te-mode-regular tbody tr { height: 32px; }
.te-table.te-mode-expanded tbody td { padding: 12px 12px; line-height: 20px; font-size: 13px; }
.te-table.te-mode-expanded thead th { padding: 12px 10px; font-size: 12px; }
.te-table.te-mode-expanded tbody tr { height: 44px; }
/* Картинки в expanded — крупнее (помогают визуальному скану) */
.te-table.te-mode-expanded tbody td img { width: 60px; height: 60px; }
.te-table.te-mode-compact tbody td img { width: 32px; height: 32px; }
/* === Этап 2 Wave 5 (2026-05-06): auto-toolbar anchor для «⚙ Колонки» ===
Универсальное правило для всех страниц с .toolbar (analytics, pricing, и т.д.):
кнопка «⚙ Колонки» (как обёрнутая `.col-settings-wrap`, так и одиночная
`#btn-col-settings`/`#te-btn-col-settings`) ВСЕГДА прижимается к правому краю
тулбара через `margin-left: auto`. На широких экранах (1920×1080) свободное
пространство съедается auto-margin'ом и кнопка остаётся в одной строке с
остальными feature-кнопками (Знаки ±, Σ Итого, Округление до ₽).
На узких экранах flex-wrap всё ещё работает, но «⚙ Колонки» по-прежнему якорь
правого края своей строки. Не ломает существующие callers: правило применяется
только к .toolbar (НЕ к произвольным контейнерам), а селекторы #btn-col-settings/
#te-btn-col-settings/.col-settings-wrap уникальны для feature column-settings.
Было до фикса: ⚙ Колонки переносилась на 2-ю строку при добавлении кнопки
«Округление до ₽» (Wave 2 Extract) — суммарная ширина превышала container.
Failure-taxonomy: NEW (2026-05-06) — auto-toolbar wrap без anchor.
*/
.toolbar #btn-col-settings,
.toolbar #te-btn-col-settings,
.toolbar .col-settings-wrap { margin-left: auto; }
/* === W1.1 DELTA #9 (2026-05-19, PL-specified — Александр): право-
якорная группа 💾 Excel + ⚙ Настройки ===
Engine-managed Wave 5 toolbar рендерит пару mandatory-right внутри
.te-toolbar-right-group. margin-left:auto съедает свободное место
и прижимает пару к ПРАВОМУ краю строки тулбара независимо от числа
предшествующих optional-кнопок (раньше право-якорился только legacy
#te-btn-col-settings — Wave 5 right-cluster шёл «встык» после
optional без якоря). Порядок внутри группы = порядок DOM
(WAVE5_MANDATORY_RIGHT: 💾 Excel → ⚙ Настройки, т.е. Настройки
самая правая). Применяется на всех TableEngine-таблицах (ADR-0027
Layer 3, CLAUDE.md §22). На узких экранах flex-wrap сохраняется,
группа остаётся якорем правого края своей строки. Не ломает
non-Wave5/inline тулбары — селектор уникален для engine-группы.
Gap наследует .toolbar (между группой и кнопкой внутри). */
.te-toolbar-right-group {
display: flex;
align-items: center;
gap: var(--space-2);
margin-left: auto;
}
/* === Wave 5 (2026-05-08): Configurable Toolbar — Settings Popup ===
По spec docs/specs/configurable-toolbar-wave5-spec-2026-05-08.md §7.
Modal-окно для настройки видимости optional кнопок тулбара.
Все цвета через theme.css tokens — light/dark автоматически.
Stripe double-shadow elevation, NO bouncy easing, NO transition:all,
NO pure #000000 — anti-patterns CLAUDE.md GLOBAL_DESIGN.
============================================================ */
/* Overlay (полупрозрачный фон) */
.te-toolbar-settings-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 9000;
display: flex;
align-items: center;
justify-content: center;
animation: te-tbs-fade-in 180ms cubic-bezier(0, 0, 0.2, 1);
}
/* Modal box */
.te-toolbar-settings-box {
width: 480px;
max-width: calc(100vw - 32px);
/* запас 160px (chrome + taskbar + воздух сверху/снизу) — popup всегда с margin */
max-height: min(760px, calc(100vh - 160px));
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md, 8px);
box-shadow:
0 8px 24px rgba(50, 50, 93, 0.12),
0 4px 8px rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
animation: te-tbs-scale-in 180ms cubic-bezier(0, 0, 0.2, 1);
}
@keyframes te-tbs-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes te-tbs-scale-in {
from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: scale(1); }
}
/* Header */
.te-toolbar-settings-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
background: var(--surface);
}
.te-toolbar-settings-header h3 {
margin: 0;
font-size: 15px;
font-weight: 600;
color: var(--text);
}
.te-toolbar-settings-close {
background: none;
border: none;
font-size: 22px;
line-height: 1;
color: var(--text2);
cursor: pointer;
padding: 4px 8px;
border-radius: var(--radius-sm, 4px);
transition: background-color 150ms cubic-bezier(0, 0, 0.2, 1),
color 150ms cubic-bezier(0, 0, 0.2, 1);
}
.te-toolbar-settings-close:hover {
background: var(--surface2);
color: var(--text);
}
.te-toolbar-settings-close:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--accent);
}
/* Body (scroll) */
.te-toolbar-settings-body {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 12px 0;
}
.te-toolbar-settings-subtitle {
padding: 4px 20px 12px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text2);
}
/* Item row */
.te-toolbar-settings-row {
display: grid;
grid-template-columns: 24px auto 1fr;
gap: 12px;
align-items: start;
padding: 12px 20px;
cursor: pointer;
border-bottom: 1px solid var(--border);
transition: background-color 150ms cubic-bezier(0, 0, 0.2, 1);
}
.te-toolbar-settings-row:last-child {
border-bottom: none;
}
.te-toolbar-settings-row:hover {
background: var(--surface2);
}
.te-toolbar-settings-row .te-tbs-check {
margin-top: 2px;
width: 16px;
height: 16px;
cursor: pointer;
accent-color: var(--accent);
}
.te-tbs-icon-only {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
font-size: 14px;
color: var(--text2);
}
.te-tbs-text {
min-width: 0;
}
.te-tbs-label {
font-size: 13px;
font-weight: 600;
color: var(--text);
margin-bottom: 2px;
}
.te-tbs-desc {
font-size: 12px;
color: var(--text2);
line-height: 1.5;
max-width: 380px;
}
/* Если row не имеет icon (3-я колонка только text) — auto-fill grid */
.te-toolbar-settings-row:not(:has(.te-tbs-icon-only)) {
grid-template-columns: 24px 1fr;
}
.te-toolbar-settings-row:not(:has(.te-tbs-icon-only)) .te-tbs-text {
grid-column: 2;
}
/* Footer */
.te-toolbar-settings-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
border-top: 1px solid var(--border);
flex-shrink: 0;
background: var(--surface);
position: sticky;
bottom: 0;
}
.te-toolbar-settings-reset,
.te-toolbar-settings-done {
padding: 7px 14px;
font-size: 12px;
font-family: inherit;
border: 1px solid var(--border);
border-radius: var(--radius-md, 8px);
background: var(--surface);
color: var(--text);
cursor: pointer;
transition: background-color 150ms cubic-bezier(0, 0, 0.2, 1),
border-color 150ms cubic-bezier(0, 0, 0.2, 1);
}
.te-toolbar-settings-reset:hover {
background: var(--surface2);
}
.te-toolbar-settings-done {
background: var(--accent);
color: #fff;
border-color: var(--accent);
font-weight: 600;
}
.te-toolbar-settings-done:hover {
filter: brightness(1.05);
}
.te-toolbar-settings-reset:focus-visible,
.te-toolbar-settings-done:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--accent);
}
/* Toolbar single-row preference (Wave 5) — поверх существующего .toolbar
правила (line ~29 в page-level CSS-копиях). Не задаёт !important чтобы
не ломать legacy /pricing/ /analytics/ HTML, использующие inline-toolbar
до миграции на Wave 5. .te-toolbar-managed — маркер автоматически добавляется
_initToolbarV5() и сигнализирует «engine управляет, можно безопасно
no-wrap». Мы не делаем nowrap: на 1366×768 spec §3.4 явно допускает wrap. */
.te-toolbar-managed { /* placeholder для будущих стилей */ }
/* === Wave 5b (2026-05-08): tb-btn-disabled — visual disabled для Excel-кнопки
когда страница не передала excelHandler (см. spec §5.3). */
.tb-btn.tb-btn-disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.tb-btn.tb-btn-disabled:hover {
background: var(--surface);
}
/* === Wave 5b (2026-05-08): ⚙ Настройки — двухколоночный popup ===
Spec docs/specs/configurable-toolbar-wave5b-spec-2026-05-09.md §3.
Расширяет существующий te-toolbar-settings-* (Wave 5a) через модификатор
--v5b. Wave 5a styles остаются (могут переиспользоваться будущими
single-column popup'ами). NO bounce easing, NO transition:all,
focus-visible через box-shadow. Width 540 + max-height min(760, 100vh-160).
============================================================ */
/* Wave 5b.7 box — wider (900px responsive), inline column-settings внутри.
Раньше 540px (Wave 5b spec) — слишком узко на 1920×1080, плюс «Колонки»
tab делегировал в отдельный popup (двойной popup UX). Теперь tab
«Колонки» рендерит drag-and-drop list inline → нужен полноценный width.
На 1366×768: sidebar 240 + popup 900 + margin 32 = 1172px → fits. */
/* ADR-0029-v2 W1 §8 (item 8, D1) — ФИКСИРОВАННЫЙ размер модала G.
Раньше: max-height + content-driven sizing → переключение секций
Колонки↔Пользовательские↔Кнопки меняло габариты («прыжок»,
замечание Александра на живом B001). Теперь: ЖЁСТКО заданная
height/width (НЕ max-height, НЕ fit-content, НЕ auto), рассчитана
под крупнейшую секцию «Колонки». Контент скроллится ВНУТРИ
.te-tbs-panel (per-section overflow-y:auto, min-height:0).
Resize при смене секции физически невозможен — width/height не
зависят от контента секции (заданы фикс. CSS, не fit-content).
1920×1080: 900×720 (1080−96=984, cap 720). 1366×768: 900×672
(calc(100vh−96px)=672). min() = помещается на обеих, не растёт. */
.te-toolbar-settings-box--v5b {
width: min(900px, calc(100vw - 240px));
max-width: calc(100vw - 32px);
height: min(720px, calc(100vh - 96px));
max-height: min(720px, calc(100vh - 96px));
}
/* Body — flex row (nav + content). Заменяет single-column body Wave 5a. */
.te-toolbar-settings-box--v5b .te-tbs-body-row {
display: flex;
flex-direction: row;
flex: 1;
min-height: 0;
min-width: 0;
}
/* Left nav (200px wide, vertical tablist) */
.te-toolbar-settings-box--v5b .te-tbs-nav {
width: 200px;
flex-shrink: 0;
border-right: 1px solid var(--border);
padding: 12px 0;
display: flex;
flex-direction: column;
gap: 2px;
background: var(--surface);
overflow-y: auto;
}
.te-toolbar-settings-box--v5b .te-tbs-nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: transparent;
border: none;
border-left: 3px solid transparent;
color: var(--text);
font-size: 14px;
font-weight: 500;
font-family: inherit;
text-align: left;
cursor: pointer;
transition: background-color 150ms cubic-bezier(0, 0, 0.2, 1),
border-color 150ms cubic-bezier(0, 0, 0.2, 1);
min-height: 44px;
box-sizing: border-box;
}
.te-toolbar-settings-box--v5b .te-tbs-nav-item:hover {
background: var(--surface2);
}
.te-toolbar-settings-box--v5b .te-tbs-nav-item.active {
background: var(--surface2);
border-left-color: var(--accent);
font-weight: 600;
}
.te-toolbar-settings-box--v5b .te-tbs-nav-item:focus-visible {
outline: none;
box-shadow: inset 0 0 0 2px var(--accent);
}
.te-toolbar-settings-box--v5b .te-tbs-nav-icon {
font-size: 16px;
width: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.te-toolbar-settings-box--v5b .te-tbs-nav-label {
font-size: 14px;
}
/* Right content — scrollable */
.te-toolbar-settings-box--v5b .te-tbs-content {
flex: 1;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
}
.te-toolbar-settings-box--v5b .te-tbs-panel {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 16px 20px;
}
.te-toolbar-settings-box--v5b .te-tbs-panel[hidden] {
display: none;
}
/* Panel header (для обоих табов) */
.te-toolbar-settings-box--v5b .te-tbs-panel-header {
margin-bottom: 16px;
}
.te-toolbar-settings-box--v5b .te-tbs-panel-title {
font-size: 14px;
font-weight: 600;
color: var(--text);
margin-bottom: 6px;
}
.te-toolbar-settings-box--v5b .te-tbs-panel-helper {
font-size: 12px;
color: var(--text2);
line-height: 1.5;
}
/* Tab «Колонки» — launcher CTA */
.te-toolbar-settings-box--v5b .te-tbs-columns-launcher {
padding: 16px 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.te-toolbar-settings-box--v5b .te-tbs-cta {
padding: 9px 16px;
font-size: 13px;
font-weight: 600;
font-family: inherit;
border: 1px solid var(--accent);
border-radius: var(--radius-md, 8px);
background: var(--accent);
color: #fff;
cursor: pointer;
transition: filter 150ms cubic-bezier(0, 0, 0.2, 1);
}
.te-toolbar-settings-box--v5b .te-tbs-cta:hover {
filter: brightness(1.05);
}
.te-toolbar-settings-box--v5b .te-tbs-cta:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--accent);
}
.te-toolbar-settings-box--v5b .te-tbs-helper-note {
font-size: 12px;
color: var(--text2);
line-height: 1.5;
}
.te-toolbar-settings-box--v5b .te-tbs-helper-note--warn {
color: var(--text2);
padding: 8px 12px;
background: var(--surface2);
border-radius: var(--radius-sm, 4px);
/* NB: убран `border-left: 3px solid var(--accent)` — анти-AI-tell (ma-design §2).
Выноску определяют фон surface2 + рамка-радиус. */
border: 1px solid var(--border);
}
.te-toolbar-settings-box--v5b .te-tbs-helper-note code {
background: var(--surface2);
padding: 1px 5px;
border-radius: 3px;
font-family: ui-monospace, Menlo, monospace;
font-size: 11px;
color: var(--text);
}
/* Tab «Кнопки» — список (использует ту же te-toolbar-settings-row сетку,
но без лишнего grid-column 24px (icon-only оставлен для Wave 5a совместимости) */
.te-toolbar-settings-box--v5b .te-tbs-buttons-list {
display: flex;
flex-direction: column;
}
.te-toolbar-settings-box--v5b .te-tbs-buttons-list .te-toolbar-settings-row {
padding: 12px 0;
border-bottom: 1px solid var(--border);
grid-template-columns: 24px 1fr;
}
.te-toolbar-settings-box--v5b .te-tbs-buttons-list .te-toolbar-settings-row:hover {
background: transparent; /* в плотном списке не подсвечиваем — иначе шум */
}
.te-toolbar-settings-box--v5b .te-tbs-buttons-list .te-toolbar-settings-row:last-child {
border-bottom: none;
}
/* === Wave 5b.7: inline column-settings host (tab «Колонки») ===
MA_ColumnSettings.renderInline() кладёт свой
внутрь .te-tbs-cs-inline-host. Класс cs-modal у inline-обёртки нужен,
чтобы переиспользовать delegate-селекторы (event handlers ищут
.cs-modal__columns / .cs-create-group через closest()). Но визуальные
modal-стили (фиксированный размер, shadow, animation) переопределяем
на «обычный flex-блок».
============================================================ */
.te-tbs-cs-inline-host {
display: flex;
flex-direction: column;
min-height: 0;
flex: 1;
}
/* Inline-обёртка cs-modal — отменяем все modal-визуальные правила. */
.te-tbs-cs-inline-host .cs-modal.cs-inline {
position: static;
width: auto;
height: auto;
max-width: none;
max-height: none;
background: transparent;
border-radius: 0;
box-shadow: none;
animation: none;
display: flex;
flex-direction: column;
overflow: visible;
}
/* Inline список — без border-right (нет preview-pane справа), занимаем
всю ширину панели. Скролл — уже на .te-tbs-panel. */
.te-tbs-cs-inline-host .cs-modal__columns {
border-right: none;
background: transparent;
padding: 0;
overflow-y: visible;
}
/* Cs-warn (calc deps warning) — компактнее в inline-режиме. */
.te-tbs-cs-inline-host .cs-warn {
margin: 0 0 8px;
}
/* Create-group кнопка — растянуть на всю ширину контейнера. */
.te-tbs-cs-inline-host .cs-create-group {
width: 100%;
margin: 12px 0 0;
}
/* === 5.C.11: prefers-reduced-motion fallback (Этап 5.C.1) ===
Уважаем системную настройку «уменьшить анимации» — отключаем все
transitions/animations внутри TableEngine, поведение остаётся.
Скоуп: только .te-table и его потомки + .te-scroll (pin/scroll handles). */
@media (prefers-reduced-motion: reduce) {
.te-table,
.te-table *,
.te-scroll,
.te-scroll *,
.te-toolbar-settings-overlay,
.te-toolbar-settings-overlay * {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
/* ============================================================
ADR-0029-v2 E6 + W1.1 DELTA §7 (item 7, D8) — ГОРЧИЧНЫЙ маркер
шапки пользовательской (вычисляемой) колонки.
CHARTER T1: селлер не должен спутать свою производную с истиной
Ozon. Маркер ТОЛЬКО на
(НЕ на | — heatmap/zebra/знак± в
теле работают как у системных колонок). Отстройка дальтоник-safe:
ƒ-глиф + курсив + текстовый бейдж + tooltip + горчичный цвет
(цвет = УСИЛИТЕЛЬ, не единственный носитель — frozen base §3.3).
Горчичный токен --te-usercol-accent НЕ зелёный (heatmap --green)
и НЕ синий (--accent expand/zebra). Tooltip = нативный title= на
| (ставится движком, R6 _escAttr). Только токены theme.css.
============================================================ */
.te-calc-fmark {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-style: italic;
color: var(--te-usercol-accent);
margin-right: var(--space-1);
font-weight: 600;
}
/* Маркер ТОЛЬКО на th: горчичная inset-полоса снизу + очень тонкая
заливка шапки. НЕ применять к td (см. шапку блока). */
.te-calc-th {
box-shadow: inset 0 -2px 0 0 var(--te-usercol-accent);
background: var(--te-usercol-bg);
}
.te-calc-th .th-label {
font-style: italic;
color: var(--te-usercol-accent);
}
|