/* PM utility classes extracted from inline `style=` attributes (audit 60). * Runtime values still arrive via CSS custom properties (the sanctioned * pattern) — only the static styling lives here, not in markup. */ /* Progress / load / position bars — width (and optionally left) come from a * `--pct` / `--x` / `--w` custom property set inline on the element. */ .u-fill-pct { width: var(--pct, 0%); } .u-bar-pos { left: var(--x, 0%); width: var(--w, 0%); } /* iOS/Android safe-area insets (notch / home indicator). */ .u-safe-pb { padding-bottom: env(safe-area-inset-bottom, 0px); } .u-safe-pt { padding-top: env(safe-area-inset-top, 0px); } .u-safe-mb { margin-bottom: env(safe-area-inset-bottom, 0px); } /* Модуль рисует нижний таб-бар (h-14 = 56px + safe-area) → объявляем занятую полосу, чтобы плавающие элементы (--float-slot-*, см. _design_tokens.css) встали НАД навигацией, а не на неё. Ставится на в layouts/pm. Брейкпоинт совпадает с `md:hidden` у самого таб-бара. */ @media (max-width: 767px) { .app-has-bottom-nav { --app-bottom-obstruction: calc(56px + var(--safe-bottom)); } } /* Слот лестницы для пилюли таймера (Tailwind не умеет calc-цепочку токенов). */ .u-float-slot-3 { bottom: var(--float-slot-3); } /* Пользовательский текст — заголовки задач, имена проектов и досок, метки. * Может содержать длинный токен без пробелов (URL, идентификатор, слипшееся * слово). Такой токен не сжимается и молча уезжает за край контейнера: замер * на 390px показал, что часть заголовка карточки просто исчезает — ни * переноса, ни многоточия. `anywhere`, а не `break-word`: последний не * разрывает слово, если строка уже начата. */ .pm-user-text, .kanban-card__title { overflow-wrap: anywhere; } /* Task slide-over enter/leave transitions (concept `.tov` pop curve). */ .task-slideover-backdrop { transition: opacity 180ms linear; } .task-slideover-panel { transition: opacity 200ms cubic-bezier(.2, 0, 0, 1), transform 200ms cubic-bezier(.2, 0, 0, 1); transform-origin: center; } /* Reminder rows in the task sidebar footer — borderless, tight. */ .pf--bare { border: none; padding: 2px 0; } /* Dependency-graph SVG canvas height. */ .u-h-graph { height: 300px; } /* Public board horizontal scroller height (viewport minus chrome). */ .u-h-board-scroll { height: calc(100dvh - 10rem); } /* Priority badge p0..p3 — design tokens (soft bg + AA-contrast text). */ .pm-prio-badge { } .pm-prio-badge--p0 { background: var(--color-danger-soft); color: var(--color-danger-text); } /* p1 брал --color-warning (#B17A23) вместо AA-варианта: на warning-soft это контраст 3.05 при норме 4.5 (замер axe на /pm/tasks). Соседи p0/p2/p3 уже используют *-text-токены — приводим к ним. */ .pm-prio-badge--p1 { background: var(--color-warning-soft); color: var(--color-warning-text); } .pm-prio-badge--p2 { background: var(--color-bg-muted); color: var(--color-fg-muted); } .pm-prio-badge--p3 { background: var(--color-bg-muted); color: var(--color-fg-subtle); } /* ==== Task tables + «Мои задачи · все пространства» (S-B-101) ============= */ /* Табличная вёрстка задач: бейджи статуса/приоритета не переносятся на вторую * строку, узкие колонки жмутся к контенту (width:1% — классический трюк * table-layout: колонка получает ширину содержимого), длинные текстовые * (проект/доска/колонка) обрезаются truncate-спаном с title-подсказкой. * Таблица живёт в обёртке с overflow-x-auto — 13 колонок не обязаны влезать * в вьюпорт. Селекторы едут по data-display-field-маркерам ячеек (они же — * хуки панели «Отображение»). */ .pm-tasks-table .status-badge, .pm-tasks-table .pm-prio-badge { white-space: nowrap; } .pm-tasks-table :is(th, td)[data-display-field="number"], .pm-tasks-table :is(th, td)[data-display-field="status"], .pm-tasks-table :is(th, td)[data-display-field="priority"], .pm-tasks-table :is(th, td)[data-display-field="date"], .pm-tasks-table :is(th, td)[data-display-field="overdue"], .pm-tasks-table :is(th, td)[data-display-field="workspace"] { width: 1%; white-space: nowrap; } /* Скрытие полей по контейнерному списку — механизм панели «Отображение» * (S-B-101/PR2): контейнер страницы несёт data-display-hide="ключи через * пробел" (Pm::DisplayHelper#pm_display_hidden), элементы — маркер * data-display-field. По одному правилу на КАЖДЫЙ ключ из * Pm::Constants::DISPLAY_FIELDS — spec/models/pm/display_fields_spec.rb * пинит паритет (класс бага «тумблер без эффекта», которым была больна * старая панель доски). «workspace» — контекстный ключ режима «все * пространства» (не тумблер): ячейка рендерится строкой всегда, чтобы * turbo_stream-replace не рассинхронизировал число колонок. Правила вне * @layer — бьют tailwind-утилиты без !important (тот же разбор, что у * .mobile-bottom-nav в _components.css). */ [data-display-hide~="workspace"] [data-display-field="workspace"] { display: none; } [data-display-hide~="number"] [data-display-field="number"] { display: none; } [data-display-hide~="status"] [data-display-field="status"] { display: none; } [data-display-hide~="priority"] [data-display-field="priority"] { display: none; } [data-display-hide~="assignee"] [data-display-field="assignee"] { display: none; } [data-display-hide~="labels"] [data-display-field="labels"] { display: none; } [data-display-hide~="date"] [data-display-field="date"] { display: none; } [data-display-hide~="overdue"] [data-display-field="overdue"] { display: none; } [data-display-hide~="project"] [data-display-field="project"] { display: none; } [data-display-hide~="board"] [data-display-field="board"] { display: none; } [data-display-hide~="column"] [data-display-field="column"] { display: none; } [data-display-hide~="subtasks"] [data-display-field="subtasks"] { display: none; } [data-display-hide~="cover"] [data-display-field="cover"] { display: none; } [data-display-hide~="task_type"] [data-display-field="task_type"] { display: none; } [data-display-hide~="tags"] [data-display-field="tags"] { display: none; } /* «Выполненные задачи» на доске: done-карточки помечены data-task-done. * Счётчик колонки (PG-триггер, «правда о колонке») при выключенном тумблере * может расходиться с числом видимых карточек — осознанно. */ [data-display-hide~="completed_tasks"] [data-task-done="true"] { display: none; } /* Универсальный switch-визуал (трек+кнопка) — состояние от aria-checked * ближайшего [role=switch]-предка. Используют тумблер «Все пространства» * и тумблеры панели «Отображение». */ .pm-switch__track { position: relative; flex-shrink: 0; width: 32px; height: 18px; border-radius: 999px; background: var(--color-bg-muted); border: var(--hairline-width) solid var(--color-border-strong); transition: background-color 150ms ease, border-color 150ms ease; } .pm-switch__knob { position: absolute; top: 1px; left: 1px; width: 14px; height: 14px; border-radius: 50%; background: var(--color-bg-elevated); box-shadow: 0 1px 2px rgb(0 0 0 / 0.25); transition: transform 150ms ease; } [role="switch"][aria-checked="true"] .pm-switch__track { background: var(--color-success); border-color: var(--color-success); } [role="switch"][aria-checked="true"] .pm-switch__knob { transform: translateX(14px); } /* Тумблер «Все пространства» — обвязка вокруг .pm-switch. */ .pm-scope-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px; border: none; border-radius: 8px; background: transparent; cursor: pointer; color: var(--color-fg-muted); font-size: 13px; } .pm-scope-toggle:hover { background: var(--color-bg-muted); color: var(--color-fg); } .pm-scope-toggle__label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .pm-scope-toggle__label svg { width: 14px; height: 14px; } /* S-B-160 — карточка, не прошедшая клиентскую сверку с активным фильтром доски (Stimulus pm--board-filter). Атрибут, а не `hidden`: у карточек собственный display (.kanban-card, .card), и правило `[hidden]` из preflight проиграло бы по специфичности — карточка осталась бы на экране. */ [data-filtered-out] { display: none !important; } /* Пункты выпадающих меню на телефоне. Замер на 390px: строки списка статусов/приоритетов ~32px — ниже WCAG 2.5.5, и по ним промахиваешься. Меню при этом прижималось к самому краю экрана. Правило общее для всех дропдаунов PM (.dropdown-menu — класс из _components.css, его используют фильтры, меню карточки, «⋯» слайд-овера). */ @media (pointer: coarse) { .dropdown-menu { margin-inline: 4px; } .dropdown-menu > a, .dropdown-menu > button, .dropdown-menu > form > button { display: flex; align-items: center; min-height: var(--tap-min); } }