/* ===========================================================================
components.css — весь интерфейс. Требует tokens.css и base.css,
для меток — labels.css.
Правила файла:
* ни одного литерального цвета — только var() из tokens.css.
Ровно три исключения, все прокомментированы на месте: запасное
значение фона у .modal::backdrop, стрелка .select и галочка
.checkbox (data:URI не умеет читать var(), поэтому цвет в них зашит;
тема одна, тёмная, так что вариант тоже один);
* z-index берётся только из --z-*;
* каждый компонент работает от 360px без горизонтальной прокрутки
страницы (прокручиваются только холст доски и таблицы);
* иконки — inline SVG с классом .icon, эмодзи нет нигде;
* состояние подписывается не только цветом: есть текст, иконка или
aria-атрибут.
Оглавление:
1 Кнопки 8 Тосты 15 Плитка доски
2 Спиннер и загрузка 9 Скелетоны 16 Холст доски
3 Поля ввода 10 Пустое состояние 17 Колонка (список)
4 Флажки 11 Прогресс 18 Карточка
5 Чипы и бейджи 12 Верхняя панель 19 Перетаскивание
6 Аватары 13 Панель доски 20 Разное
7 Модалка/поповер 14 Боковая панель
СТЕКЛО. Оболочки (шапка, панель доски, колонка, поповер, модалка, тост,
панель формы, боковая панель) — стеклянные пластины. Приём один и тот же:
фон --glass*, граница --glass-border, блик по верхней кромке и тень по
нижней через inset box-shadow, размытие через ОБА свойства
(-webkit-backdrop-filter и backdrop-filter — Safari до 18 знает только
префиксное). Запасной путь без размытия описан в tokens.css: там
@supports подменяет --glass-* на непрозрачные --glass-*-solid, поэтому
ни одно правило ниже не обязано дублировать фон вручную.
ЧЕГО СТЕКЛО НЕ КАСАЕТСЯ:
* .card — карточка на доске. На ней лежит основной текст, а под ней
скроллится содержимое соседних карточек: мельтешение под строкой
читать невозможно. Карточка остаётся --surface-card, стеклянной может
быть только колонка вокруг неё.
* .chip, .btn, .badge, .avatar — их на экране десятки, а backdrop-filter
заставляет браузер пересобирать слой под каждым. Размытие вешается
только на оболочки, которых единицы.
=========================================================================== */
/* ---------------------------------------------------------------------------
1. КНОПКИ
Вариант задаёт четыре переменные: --btn-bg, --btn-fg, --btn-border и
--btn-shadow. Благодаря этому спиннер, иконка и текст всегда одного цвета,
и состояние загрузки не приходится красить отдельно.
Кнопки СТЕКЛЯННЫЕ БЕЗ РАЗМЫТИЯ. Полупрозрачная заливка --btn-neutral и
кромочный блик дают тот же материал, что и у пластин, но backdrop-filter
здесь не ставится: кнопок на экране десятки, и каждая заводила бы
собственный слой композитинга. Стекло под ними уже размыто оболочкой.
--------------------------------------------------------------------------- */
.btn {
--btn-bg: transparent;
--btn-fg: var(--text);
--btn-border: transparent;
--btn-shadow: none;
--btn-height: var(--control-md);
--btn-pad: var(--space-3);
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
box-sizing: border-box;
min-height: var(--btn-height);
padding: 0 var(--btn-pad);
border: var(--hairline) solid var(--btn-border);
border-radius: var(--radius-md);
background-color: var(--btn-bg);
color: var(--btn-fg);
box-shadow: var(--btn-shadow);
font-size: var(--text-md);
font-weight: var(--weight-medium);
line-height: 1;
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
user-select: none;
transition: background-color var(--dur-instant) var(--ease-out),
border-color var(--dur-instant) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled,
.btn[aria-disabled="true"] {
opacity: 0.55;
cursor: not-allowed;
transform: none;
--btn-shadow: none;
}
/* -- Основная: единственная сплошная акцентная кнопка на экран. Плотный
акцент, без прозрачности — она обязана читаться поверх любого слоя.
При наведении добавляется свечение --accent-glow: тот же приём, что у
подсвеченной клавиши, только мягче. --------------------------------- */
.btn--primary {
--btn-bg: var(--accent);
--btn-fg: var(--text-on-accent); /* 7.02 */
--btn-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-sm);
}
.btn--primary:hover:not(:disabled) {
--btn-bg: var(--accent-hover); /* 9.41 */
--btn-shadow: inset 0 1px 0 var(--glass-highlight),
0 0 0 1px var(--accent-glow),
0 6px 20px -6px var(--accent-glow);
}
.btn--primary:active:not(:disabled) {
--btn-bg: var(--accent-active);
--btn-shadow: inset 0 1px 2px var(--glass-shade);
}
/* -- Вторичная: стеклянная. --btn-neutral уже полупрозрачный, поэтому
кнопка берёт цвет у пластины под собой; блик по верхней кромке даёт
объём, граница отделяет от стекла. -------------------------------- */
.btn--secondary {
--btn-bg: var(--btn-neutral);
--btn-fg: var(--text); /* на glass-solid 13.30 */
--btn-border: var(--glass-border);
--btn-shadow: inset 0 1px 0 var(--glass-highlight),
inset 0 -1px 0 var(--glass-shade);
}
.btn--secondary:hover:not(:disabled) {
--btn-bg: var(--btn-neutral-hover);
--btn-border: var(--glass-border-strong);
}
.btn--secondary:active:not(:disabled) {
--btn-bg: var(--btn-neutral-active);
--btn-shadow: inset 0 1px 2px var(--glass-shade);
}
/* -- Призрачная: пустая, пока к ней не подошли. На панелях и в плотных
рядах кнопок фон появляется только по наведению — иначе ряд из шести
полупрозрачных плашек превращает шапку в сетку. -------------------- */
.btn--ghost {
--btn-bg: transparent;
--btn-fg: var(--text-secondary); /* на glass-solid 8.68 */
}
.btn--ghost:hover:not(:disabled) {
--btn-bg: var(--btn-neutral);
--btn-fg: var(--text);
--btn-shadow: inset 0 1px 0 var(--glass-highlight);
}
.btn--ghost:active:not(:disabled) {
--btn-bg: var(--btn-neutral-hover);
--btn-shadow: inset 0 1px 2px var(--glass-shade);
}
/* -- Обведённая: там, где нужен видимый контур на неизвестном фоне.
Граница --border-strong, а не --glass-border: контур управляющего
элемента обязан держать 3:1, а кромочная линия стекла этого не даёт. */
.btn--outline {
--btn-bg: transparent;
--btn-fg: var(--text);
--btn-border: var(--border-strong); /* на glass-solid 4.51 — ≥3:1 */
}
.btn--outline:hover:not(:disabled) { --btn-bg: var(--btn-neutral); }
/* -- Успех: подтверждение необратимого положительного действия
(перенести все карточки, завершить чек-лист). ------------------------ */
.btn--success {
--btn-bg: var(--success);
--btn-fg: var(--on-success); /* 9.68 */
--btn-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-sm);
}
.btn--success:hover:not(:disabled) { --btn-bg: var(--success-hover); }
/* -- Приглушённо-акцентная: действие заметное, но не главное на экране.
--accent-subtle полупрозрачный, поэтому вариант читается как цветное
стекло. ------------------------------------------------------------ */
.btn--subtle {
--btn-bg: var(--accent-subtle);
--btn-fg: var(--accent-text); /* 9.38 */
--btn-border: var(--glass-border);
--btn-shadow: inset 0 1px 0 var(--glass-highlight);
}
.btn--subtle:hover:not(:disabled) { --btn-bg: var(--accent-subtle-hover); }
/* -- Опасная: только удаление и архивация. ------------------------------- */
.btn--danger {
--btn-bg: var(--danger);
--btn-fg: var(--on-danger); /* 6.91 */
--btn-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-sm);
}
.btn--danger:hover:not(:disabled) { --btn-bg: var(--danger-hover); }
/* -- Инверсная: поверх фото или цвета доски. Наведение затемняет, а не
осветляет: белый текст на затемнении держит ≥8.8:1 даже на белом фото. */
.btn--inverse {
--btn-bg: transparent;
--btn-fg: var(--text-on-board); /* на скриме ≥6.19 */
}
.btn--inverse:hover:not(:disabled) { --btn-bg: var(--overlay-hover); } /* 8.86 */
.btn--inverse:active:not(:disabled) { --btn-bg: var(--overlay-active); } /* 10.05 */
/* -- Размеры ------------------------------------------------------------- */
.btn--sm { --btn-height: var(--control-sm); --btn-pad: var(--space-2); font-size: var(--text-sm); }
.btn--lg { --btn-height: var(--control-lg); --btn-pad: var(--space-4); font-size: var(--text-lg); }
.btn--block { width: 100%; }
/* -- Иконочная: квадрат, подпись обязана быть в aria-label или .sr-only. -- */
.btn--icon {
--btn-pad: 0;
width: var(--btn-height);
min-width: var(--btn-height);
border-radius: var(--radius-md);
}
.btn--round { border-radius: var(--radius-round); }
/* -- Состояние загрузки: текст прячется, ширина кнопки не прыгает. ------- */
.btn.is-loading {
color: transparent;
pointer-events: none;
}
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after {
content: "";
position: absolute;
inset: 50% auto auto 50%;
width: 16px;
height: 16px;
margin: -8px 0 0 -8px;
border: 2px solid color-mix(in srgb, var(--btn-fg) 30%, transparent);
border-top-color: var(--btn-fg);
border-radius: var(--radius-round);
animation: spin 700ms linear infinite;
}
/* Группа кнопок-переключателей (вид доски, фильтр). Жёлоб полупрозрачный,
выбранная кнопка — непрозрачная плашка: выбранность обязана читаться, а
прозрачное на прозрачном не читается. */
.btn-group {
display: inline-flex;
padding: 2px;
gap: 2px;
border: var(--hairline) solid var(--glass-border);
border-radius: var(--radius-md);
background-color: var(--btn-neutral);
box-shadow: inset 0 1px 2px var(--glass-shade);
}
.btn-group > .btn { --btn-height: var(--control-sm); border-radius: var(--radius-sm); }
.btn-group > .btn[aria-pressed="true"] {
--btn-bg: var(--surface-card);
--btn-fg: var(--text);
--btn-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-xs);
}
/* ---------------------------------------------------------------------------
2. СПИННЕР И СОСТОЯНИЯ ЗАГРУЗКИ
--------------------------------------------------------------------------- */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
--spinner-size: 16px;
display: inline-block;
flex: none;
width: var(--spinner-size);
height: var(--spinner-size);
border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
border-top-color: currentColor;
border-radius: var(--radius-round);
animation: spin 700ms linear infinite;
}
.spinner--sm { --spinner-size: 12px; border-width: 2px; }
.spinner--lg { --spinner-size: 28px; border-width: 3px; }
/* При отключённой анимации вращение бесполезно — показываем пульсацию
прозрачности, она остаётся заметной и не вызывает укачивания. */
@media (prefers-reduced-motion: reduce) {
.spinner, .btn.is-loading::after {
animation: pulse-fade 1s ease-in-out infinite alternate !important;
animation-duration: 1s !important;
}
}
@keyframes pulse-fade { from { opacity: 1; } to { opacity: 0.35; } }
/* Индикатор HTMX. Пока запрос не начат — элемента нет; во время запроса он
появляется. Работает и на самом элементе, и на предке. */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: inline-flex; }
/* Общий признак «идёт загрузка» для любого контейнера. */
[aria-busy="true"] { cursor: progress; }
.is-loading-block {
position: relative;
min-height: var(--space-16);
pointer-events: none;
}
.is-loading-block > * { opacity: 0.4; }
/* Тонкая полоса прогресса вверху страницы для htmx-переходов. */
.route-progress {
position: fixed;
inset: 0 auto auto 0;
z-index: var(--z-toast);
height: 3px;
width: 100%;
transform-origin: 0 50%;
background-color: var(--accent);
animation: route-progress 2.4s var(--ease-out) forwards;
}
@keyframes route-progress {
from { transform: scaleX(0.05); }
to { transform: scaleX(0.92); }
}
/* ---------------------------------------------------------------------------
3. ПОЛЯ ВВОДА
Поле — УТОПЛЕННОЕ стекло, зеркальное отражение пластины. У пластины блик
сверху и тень снизу, потому что свет падает на выпуклую кромку; у ямки
наоборот — тень сверху внутрь, блик по нижней кромке. Заливка
--glass-shade (полупрозрачная чернота) вместо непрозрачной: поле берёт
цвет у слоя под собой и остаётся тёмным даже над самым светлым местом
фонового пятна, поэтому текст --text держит контраст всюду.
Граница --border-strong, а не --glass-border: контур поля ввода — это
контур управляющего элемента, WCAG требует от него 3:1 (на glass-solid
даёт 4.51). Кромочная линия стекла столько не даёт и здесь не годится.
--------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field__label {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--text-secondary); /* 8.68 */
}
.field__hint {
font-size: var(--text-xs);
color: var(--text-muted); /* 6.87 */
}
.field__error {
display: flex;
align-items: center;
gap: var(--space-1);
font-size: var(--text-xs);
color: var(--danger-text); /* 7.53 */
}
.input,
.textarea,
.select {
box-sizing: border-box;
width: 100%;
min-height: var(--control-lg);
padding: var(--space-2) var(--space-3);
border: var(--hairline) solid var(--border-strong);
border-radius: var(--radius-md);
background-color: var(--glass-shade);
color: var(--text); /* на затемнённом стекле ≥15.4 */
font-size: var(--text-md);
line-height: var(--leading-snug);
/* Внутренняя тень сверху + блик по нижней кромке = ямка. */
box-shadow: inset 0 2px 6px var(--glass-shade),
inset 0 -1px 0 var(--glass-highlight);
transition: border-color var(--dur-fast) var(--ease-out),
background-color var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out);
}
.textarea { min-height: calc(var(--space-16) + var(--space-4)); resize: vertical; }
.input::placeholder,
.textarea::placeholder {
color: var(--text-muted); /* на затемнённом стекле ≥7.9 */
opacity: 1; /* Firefox по умолчанию гасит до 0.54 */
}
.input:hover:not(:disabled),
.textarea:hover:not(:disabled),
.select:hover:not(:disabled) { border-color: var(--text-muted); }
/* Фокус: к кольцу добавляется свечение акцентом. Кольцо остаётся сплошным
и в 2px — свечение его не заменяет, а сопровождает: размытый ореол сам по
себе границы не обозначает и порог 3:1 не берёт. */
.input:focus,
.textarea:focus,
.select:focus {
outline: none;
border-color: var(--border-focus);
box-shadow: inset 0 2px 6px var(--glass-shade),
0 0 0 var(--focus-width) var(--focus-ring),
0 0 24px -2px var(--accent-glow);
}
.input:disabled,
.textarea:disabled,
.select:disabled {
color: var(--text-disabled);
background-color: var(--glass-shade);
box-shadow: none;
}
.input[aria-invalid="true"],
.textarea[aria-invalid="true"] { border-color: var(--danger); }
.input[aria-invalid="true"]:focus,
.textarea[aria-invalid="true"]:focus {
box-shadow: inset 0 2px 6px var(--glass-shade),
0 0 0 var(--focus-width) var(--danger);
}
/* Стрелка select — картинка с зашитым цветом %239FADBC (= --text-muted):
data:URI не умеет читать var(). Тема одна, поэтому и вариант один. */
.select {
appearance: none;
padding-right: var(--space-8);
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right var(--space-3) center;
background-size: 16px;
}
/* Поле с иконкой (поиск в верхней панели). */
.input-group { position: relative; display: flex; align-items: center; width: 100%; }
.input-group > .icon {
position: absolute;
left: var(--space-3);
color: var(--text-muted);
pointer-events: none;
}
/* Отступ под иконку — только когда иконка действительно есть. Безусловное
правило сдвигало текст в поле пароля, у которого иконки слева нет, и рядом
с полем имени они выглядели по-разному выровненными. */
.input-group > .icon ~ .input { padding-left: var(--space-8); }
/* Поле, которое выглядит как текст, пока в него не вошли (заголовок списка,
имя карточки). Заменяет «input, притворяющийся заголовком» из Django-версии,
где фокус было не видно. */
.input-inline {
width: 100%;
min-height: var(--control-md);
padding: var(--space-1) var(--space-2);
border: var(--hairline) solid transparent;
border-radius: var(--radius-md);
background-color: transparent;
color: inherit;
font: inherit;
cursor: pointer;
transition: background-color var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out);
}
/* Пока в поле не вошли, ямки нет — иначе заголовок каждой колонки выглядел
бы вдавленным. Ямка появляется вместе с курсором ввода. */
.input-inline:hover { background-color: var(--btn-neutral); }
.input-inline:focus {
cursor: text;
outline: none;
background-color: var(--glass-shade);
border-color: var(--border-focus);
box-shadow: inset 0 2px 6px var(--glass-shade),
0 0 0 var(--focus-width) var(--focus-ring),
0 0 24px -2px var(--accent-glow);
}
/* ---------------------------------------------------------------------------
4. ФЛАЖКИ И ПЕРЕКЛЮЧАТЕЛИ
--------------------------------------------------------------------------- */
.checkbox,
.radio {
appearance: none;
flex: none;
width: 16px;
height: 16px;
margin: 0;
border: 2px solid var(--border-strong); /* ≥3:1 на всех поверхностях */
background-color: var(--surface-card);
cursor: pointer;
transition: background-color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out);
}
.checkbox { border-radius: var(--radius-xs); }
.radio { border-radius: var(--radius-round); }
.checkbox:hover, .radio:hover { border-color: var(--accent); }
.checkbox:checked,
.radio:checked { background-color: var(--accent); border-color: var(--accent); }
/* Галочка тёмная, а не белая: акцент #4C9AFF светлый, белая галочка на нём
дала бы 2.4:1 и слилась бы. Цвет зашит в data:URI (var() там не работает);
тема одна, поэтому и вариант один. */
.checkbox:checked {
background-image: url('data:image/svg+xml;utf8,');
background-size: 12px;
background-position: center;
background-repeat: no-repeat;
}
.radio:checked { box-shadow: inset 0 0 0 3px var(--surface-card); }
/* Строка «флажок + подпись» — вся строка кликабельна и не меньше 32/44px. */
.check-row {
display: flex;
align-items: flex-start;
gap: var(--space-2);
min-height: var(--control-md);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
cursor: pointer;
}
.check-row:hover { background-color: var(--btn-neutral); }
.check-row > .checkbox { margin-top: 3px; }
.check-row.is-done > .check-row__text { color: var(--text-muted); text-decoration: line-through; }
/* Переключатель (тема, режим дальтоника). */
.switch {
appearance: none;
flex: none;
width: 36px;
height: 20px;
margin: 0;
border-radius: var(--radius-pill);
background-color: var(--btn-neutral-active);
cursor: pointer;
transition: background-color var(--dur-fast) var(--ease-out);
}
.switch::before {
content: "";
display: block;
width: 14px;
height: 14px;
margin: 3px;
border-radius: var(--radius-round);
background-color: var(--surface-card);
box-shadow: var(--shadow-xs);
transition: transform var(--dur-fast) var(--ease-out);
}
.switch:checked { background-color: var(--accent); }
.switch:checked::before { transform: translateX(16px); }
/* ---------------------------------------------------------------------------
5. ЧИПЫ И БЕЙДЖИ
--------------------------------------------------------------------------- */
.chip {
--chip-bg: var(--surface-sunken);
--chip-fg: var(--text-secondary);
display: inline-flex;
align-items: center;
gap: var(--space-1);
max-width: 100%;
min-height: 20px;
padding: 0 var(--space-2);
border-radius: var(--radius-sm);
background-color: var(--chip-bg);
color: var(--chip-fg);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
line-height: 1;
white-space: nowrap;
}
.chip--success { --chip-bg: var(--success-subtle); --chip-fg: var(--success-subtle-text); } /* 7.65 */
.chip--warning { --chip-bg: var(--warning-subtle); --chip-fg: var(--warning-subtle-text); } /* 7.93 */
.chip--danger { --chip-bg: var(--danger-subtle); --chip-fg: var(--danger-subtle-text); } /* 6.81 */
.chip--info { --chip-bg: var(--info-subtle); --chip-fg: var(--info-subtle-text); } /* 7.00 */
.chip--bold { --chip-bg: var(--accent); --chip-fg: var(--text-on-accent); } /* 6.76 */
/* Срок из dto.DueState. Цвет — не единственный признак: у каждого состояния
своя иконка и текстовая подпись, а у просроченного ещё и жирное начертание. */
.chip--due-upcoming { --chip-bg: var(--due-upcoming-bg); --chip-fg: var(--due-upcoming-text); }
.chip--due-soon { --chip-bg: var(--due-soon-bg); --chip-fg: var(--due-soon-text); }
.chip--due-overdue { --chip-bg: var(--due-overdue-bg); --chip-fg: var(--due-overdue-text);
font-weight: var(--weight-bold); }
.chip--due-complete { --chip-bg: var(--due-complete-bg); --chip-fg: var(--due-complete-text); }
.chip--removable { padding-right: var(--space-1); }
.chip__remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: var(--radius-round);
color: inherit;
}
.chip__remove:hover { background-color: var(--overlay-hover); }
/* Счётчик: непрочитанные уведомления, число карточек. */
.badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: var(--radius-pill);
background-color: var(--danger);
color: var(--on-danger); /* 6.65 */
font-size: var(--text-xs);
font-weight: var(--weight-bold);
line-height: 1;
}
.badge--neutral { background-color: var(--btn-neutral); color: var(--text); } /* 10.83 */
.badge--dot { min-width: 8px; width: 8px; height: 8px; padding: 0; }
/* Панель «О доске»: техническое задание — длинный текст, который читают
сверху вниз, поэтому колонка уже обычной модалки, а поле ввода высокое.
Ширина в ch, а не в px: она задаётся длиной строки, при которой текст
удобно читать, а не размером экрана. */
.modal--narrow { max-width: 72ch; }
.textarea--tall { min-height: 40vh; resize: vertical; }
/* Бейдж поверх иконочной кнопки (колокольчик). */
.badge-anchor { position: relative; display: inline-flex; }
.badge-anchor > .badge {
position: absolute;
top: -2px;
right: -2px;
/* Кольцо отделяет бейдж от иконки под ним. Цвет — непрозрачный
эквивалент стекла: полупрозрачное кольцо ничего бы не отделило. */
box-shadow: 0 0 0 2px var(--glass-solid);
}
/* ---------------------------------------------------------------------------
6. АВАТАРЫ
--------------------------------------------------------------------------- */
.avatar {
--avatar-size: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: var(--avatar-size);
height: var(--avatar-size);
border-radius: var(--radius-round);
background-color: var(--accent);
color: var(--text-on-accent); /* 6.76 */
font-size: calc(var(--avatar-size) * 0.4);
font-weight: var(--weight-bold);
line-height: 1;
text-transform: uppercase;
overflow: hidden;
user-select: none;
}
.avatar > img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { --avatar-size: 24px; }
.avatar--lg { --avatar-size: 40px; }
.avatar--xl { --avatar-size: 64px; }
/* Кнопка-аватар (участник карточки, меню профиля). */
.avatar--button { cursor: pointer; }
.avatar--button:hover { filter: brightness(0.92); }
/* Стопка. Кольцо цветом поверхности разделяет наложенные аватары —
на любой теме, потому что кольцо берёт --avatar-ring у контейнера. */
.avatar-stack {
--avatar-ring: var(--surface-card);
display: inline-flex;
align-items: center;
padding-left: var(--space-1);
}
.avatar-stack > .avatar {
margin-left: calc(var(--space-2) * -1);
box-shadow: 0 0 0 2px var(--avatar-ring);
}
.avatar-stack--on-column { --avatar-ring: var(--glass-solid); }
.avatar-stack--on-popover { --avatar-ring: var(--glass-thick-solid); }
.avatar-stack__more {
background-color: var(--btn-neutral);
color: var(--text); /* 10.83 */
font-size: var(--text-xs);
}
/* ---------------------------------------------------------------------------
7. МОДАЛКА И ПОПОВЕР
Самая плотная плотность стекла (--glass-thick) и самое сильное размытие
(--glass-blur-strong). Здесь лежит мелкий и длинный текст — описание
карточки, чек-лист, комментарии, — а под модалкой стоит вся доска целиком.
На тонком стекле сквозь строку просвечивали бы чужие карточки, и читать
такое невозможно. Элементов этого класса на экране единицы, поэтому
размытие им по карману.
--------------------------------------------------------------------------- */
.modal {
position: fixed;
z-index: var(--z-modal); /* нужен только там, где нет top-layer */
inset: 0;
margin: auto;
width: min(760px, calc(100vw - var(--space-8)));
max-height: min(92dvh, 960px);
padding: 0;
border: var(--hairline) solid var(--glass-border-strong);
border-radius: var(--radius-xl);
background-color: var(--glass-thick);
-webkit-backdrop-filter: var(--glass-blur-strong);
backdrop-filter: var(--glass-blur-strong);
color: var(--text); /* на thick-solid 12.02 */
box-shadow: inset 0 1px 0 var(--glass-highlight),
inset 0 -1px 0 var(--glass-shade),
var(--shadow-xl);
overflow: hidden;
}
.modal[open] {
display: flex;
flex-direction: column;
animation: modal-in var(--dur-slow) var(--ease-emphasis);
}
/* Значение в var() дублировано литералом на случай движков, где ::backdrop
не наследует свойства от исходного элемента. Единственное исключение из
запрета на литеральный цвет, и оно обязано остаться единственным — а раз
так, литерал обязан совпадать с токеном: сейчас это --surface-overlay,
rgba(6, 9, 14, 0.62). Прежнее значение rgba(9, 30, 66, 0.54) осталось от
светлой темы (синеватая подложка Trello) и не совпадало ни с чем. */
.modal::backdrop {
background-color: var(--surface-overlay, rgba(6, 9, 14, 0.62));
/* Слабое размытие подложки: доска под модалкой уходит из фокуса зрения, но
остаётся узнаваемой — человек видит, куда вернётся, закрыв окно. */
-webkit-backdrop-filter: var(--glass-blur-weak);
backdrop-filter: var(--glass-blur-weak);
animation: fade-in var(--dur-base) var(--ease-out);
}
@keyframes modal-in {
from { opacity: 0; transform: translateY(12px) scale(0.98); }
to { opacity: 1; transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal__header {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
border-bottom: var(--hairline) solid var(--glass-border);
}
.modal__title { flex: 1 1 auto; min-width: 0; font-size: var(--text-xl); font-weight: var(--weight-semibold); }
.modal__subtitle { font-size: var(--text-sm); color: var(--text-muted); } /* 6.59 */
.modal__body { flex: 1 1 auto; padding: var(--space-5); overflow-y: auto; }
/* Шапка и подвал собственного фона не имеют: они лежат на той же пластине,
вторая заливка поверх стекла сделала бы их мутнее середины. Разделяют их
волосяные линии. */
.modal__footer {
display: flex;
justify-content: flex-end;
gap: var(--space-2);
padding: var(--space-4) var(--space-5);
border-top: var(--hairline) solid var(--glass-border);
background-color: transparent;
}
/* Модалка карточки: содержимое + узкая правая колонка действий.
На узком экране колонка уезжает вниз — горизонтальной прокрутки нет. */
.modal--card { width: min(900px, calc(100vw - var(--space-4))); }
.modal--card .modal__body {
display: grid;
grid-template-columns: minmax(0, 1fr) 200px;
gap: var(--space-6);
align-items: start;
}
@media (max-width: 720px) {
.modal { width: 100vw; max-width: 100vw; max-height: 100dvh; border-radius: 0; }
.modal--card .modal__body { grid-template-columns: minmax(0, 1fr); }
}
/* -- Поповер. Работает и на нативном [popover], и на обычном div. -------- */
.popover {
position: absolute;
z-index: var(--z-popover);
min-width: 240px;
max-width: min(320px, calc(100vw - var(--space-4)));
padding: 0;
border: var(--hairline) solid var(--glass-border-strong);
border-radius: var(--radius-lg);
background-color: var(--glass-thick);
-webkit-backdrop-filter: var(--glass-blur-strong);
backdrop-filter: var(--glass-blur-strong);
color: var(--text); /* на thick-solid 12.02 */
box-shadow: inset 0 1px 0 var(--glass-highlight),
inset 0 -1px 0 var(--glass-shade),
var(--shadow-lg);
overflow: hidden;
}
/* СТЕКЛО НЕ ВИДИТ СКВОЗЬ СТЕКЛО.
Элемент с backdrop-filter создаёт backdrop root: потомок размывает только
то, что нарисовано ВНУТРИ этого предка. Меню списка живёт внутри колонки,
меню участников и фильтра — внутри панели доски, а раскрываются они наружу,
поверх соседних колонок. Всё, что снаружи, в их backdrop не входит: оно
просто просвечивает сквозь оставшиеся 14% прозрачности НЕРАЗМЫТЫМ, и под
пунктами меню начинает читаться чужой текст. Проверено: заголовки карточек
соседней колонки видны сквозь открытое меню.
Поэтому в таких оболочках поповер и меню становятся непрозрачными.
Контраст от этого не меняется ни на сотую: все коэффициенты в tokens.css и
так посчитаны по --glass-thick-solid, то есть по этому самому цвету.
.modal в список не входит намеренно: он лежит в top layer, его backdrop
root — корень документа, и поповер внутри модалки размывает ровно то, что
под ним (содержимое самой модалки, за её край он выйти не может из-за
overflow: hidden). Там стекло работает честно и остаётся. */
:is(.app-bar, .board__bar, .sidebar, .list, .panel) :is(.popover, .menu) {
background-color: var(--glass-thick-solid);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.popover[popover] { margin: 0; inset: auto; }
.popover:not([popover]):not(.is-open) { display: none; }
.popover.is-open { display: block; animation: popover-in var(--dur-base) var(--ease-out); }
@keyframes popover-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
.popover__header {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-3) var(--space-2);
border-bottom: var(--hairline) solid var(--glass-border);
}
.popover__title {
flex: 1 1 auto;
text-align: center;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--text-secondary); /* 7.59 */
}
.popover__body { padding: var(--space-3); max-height: 60dvh; overflow-y: auto; }
/* Меню. Обычно живёт внутри поповера и тогда собственного стекла не имеет —
иначе две пластины сложились бы и середина стала бы мутнее краёв. Но меню
бывает и самостоятельным (контекстное), поэтому по умолчанию оно —
такая же плотная пластина, а внутри .popover заливка снимается. */
.menu {
display: flex;
flex-direction: column;
padding: var(--space-1);
border-radius: var(--radius-lg);
background-color: var(--glass-thick);
-webkit-backdrop-filter: var(--glass-blur-strong);
backdrop-filter: var(--glass-blur-strong);
box-shadow: inset 0 1px 0 var(--glass-highlight),
inset 0 -1px 0 var(--glass-shade);
}
.popover .menu {
border-radius: 0;
background-color: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: none;
}
.menu__item {
display: flex;
align-items: center;
gap: var(--space-2);
width: 100%;
min-height: var(--control-md);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
color: var(--text); /* 11.62 */
font-size: var(--text-md);
text-align: left;
text-decoration: none;
}
.menu__item:hover { background-color: var(--btn-neutral); text-decoration: none; color: var(--text); }
.menu__item[aria-current="true"],
.menu__item.is-active { background-color: var(--surface-selected); color: var(--accent-text); } /* 7.00 */
.menu__item--danger { color: var(--danger-text); } /* 7.23 */
.menu__separator { height: var(--hairline); margin: var(--space-1) 0; background-color: var(--border-subtle); }
/* ---------------------------------------------------------------------------
8. ТОСТЫ
--------------------------------------------------------------------------- */
.toast-stack {
position: fixed;
z-index: var(--z-toast);
right: var(--space-4);
bottom: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-2);
width: min(360px, calc(100vw - var(--space-8)));
pointer-events: none;
}
@media (max-width: 480px) {
.toast-stack { right: var(--space-2); left: var(--space-2); bottom: var(--space-2); width: auto; }
}
/* Тост всплывает над непредсказуемым содержимым и живёт несколько секунд —
перечитать его нельзя. Поэтому плотное стекло, как у поповера: текст
обязан прочитаться с первого взгляда. Цветная полоса слева остаётся
непрозрачной — это опознавательный знак вида сообщения. */
.toast {
--toast-accent: var(--accent);
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border: var(--hairline) solid var(--glass-border-strong);
border-left: 4px solid var(--toast-accent);
border-radius: var(--radius-lg);
background-color: var(--glass-thick);
-webkit-backdrop-filter: var(--glass-blur-strong);
backdrop-filter: var(--glass-blur-strong);
color: var(--text); /* на thick-solid 12.02 */
box-shadow: inset 0 1px 0 var(--glass-highlight),
inset 0 -1px 0 var(--glass-shade),
var(--shadow-lg);
pointer-events: auto;
animation: toast-in var(--dur-base) var(--ease-emphasis);
}
.toast--success { --toast-accent: var(--success); }
.toast--warning { --toast-accent: var(--warning); }
.toast--danger { --toast-accent: var(--danger); }
.toast__icon { color: var(--toast-accent); }
.toast__body { flex: 1 1 auto; min-width: 0; }
.toast__title { font-weight: var(--weight-semibold); }
.toast__text { font-size: var(--text-sm); color: var(--text-secondary); } /* 7.59 */
.toast.is-leaving { animation: toast-out var(--dur-base) var(--ease-in) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }
/* ---------------------------------------------------------------------------
9. СКЕЛЕТОНЫ
Форма скелетона повторяет форму будущего содержимого, иначе при подстановке
данных страница дёргается. Мерцание отключается вместе со всей анимацией —
статичная плашка остаётся понятной.
--------------------------------------------------------------------------- */
.skeleton {
--skeleton-h: 12px;
position: relative;
height: var(--skeleton-h);
border-radius: var(--radius-sm);
background-color: var(--skeleton-base);
overflow: hidden;
}
.skeleton::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background-image: linear-gradient(90deg,
transparent 0%, var(--skeleton-shine) 50%, transparent 100%);
animation: shimmer var(--dur-skeleton) var(--ease-in-out) infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skeleton::after { display: none; } }
.skeleton--text { --skeleton-h: 12px; border-radius: var(--radius-pill); }
.skeleton--title { --skeleton-h: 20px; }
.skeleton--line-70 { width: 70%; }
.skeleton--line-40 { width: 40%; }
.skeleton--avatar { width: 32px; height: 32px; border-radius: var(--radius-round); }
.skeleton--cover { --skeleton-h: 96px; border-radius: var(--radius-md); }
.skeleton--card { --skeleton-h: 72px; border-radius: var(--radius-lg); }
.skeleton--tile { --skeleton-h: 96px; border-radius: var(--radius-xl); }
.skeleton--column { --skeleton-h: 240px; width: var(--column-width); border-radius: var(--radius-xl); }
.skeleton-stack { display: flex; flex-direction: column; gap: var(--space-2); }
/* ---------------------------------------------------------------------------
10. ПУСТОЕ СОСТОЯНИЕ
Заменяет «пустой прямоугольник»: рисунок, заголовок, объяснение и ровно
одно действие.
--------------------------------------------------------------------------- */
.empty {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
padding: var(--space-10) var(--space-4);
text-align: center;
}
.empty__art {
width: 88px;
height: 88px;
color: var(--text-muted); /* 6.59 */
opacity: 0.75;
}
.empty__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.empty__text { max-width: 44ch; color: var(--text-muted); } /* 6.59 */
.empty__actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; justify-content: center; }
/* Компактный вариант внутри колонки. */
.empty--inline { padding: var(--space-5) var(--space-3); gap: var(--space-2); }
.empty--inline .empty__art { width: 40px; height: 40px; }
.empty--inline .empty__title { font-size: var(--text-md); }
.empty--inline .empty__text { font-size: var(--text-sm); }
/* ---------------------------------------------------------------------------
11. ПРОГРЕСС (чек-лист)
--------------------------------------------------------------------------- */
.progress {
height: 8px;
border-radius: var(--radius-pill);
background-color: var(--surface-sunken);
overflow: hidden;
}
.progress__bar {
height: 100%;
border-radius: inherit;
background-color: var(--accent);
transition: width var(--dur-base) var(--ease-out);
}
.progress.is-complete .progress__bar { background-color: var(--success); }
.progress__label { font-size: var(--text-xs); color: var(--text-muted); } /* 6.59 */
/* ---------------------------------------------------------------------------
12. ВЕРХНЯЯ ПАНЕЛЬ
Шапка прибита к верху и всё время висит над прокручивающимся содержимым —
ровно тот случай, ради которого стекло и существует: под ней видно, что
страница уехала, но ничего из-под неё не читается как текст.
Плотность средняя (--glass), не тонкая: на шапке лежат подписи кнопок и
поле поиска. Блик здесь только по НИЖНЕЙ кромке — верхней у прижатой к
краю экрана панели просто нет.
--------------------------------------------------------------------------- */
.app-bar {
position: sticky;
top: 0;
z-index: var(--z-sticky);
display: flex;
align-items: center;
gap: var(--space-2);
height: var(--topbar-height);
padding: 0 var(--space-3);
background-color: var(--glass);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
border-bottom: var(--hairline) solid var(--glass-border);
color: var(--text); /* на glass-solid 13.30 */
box-shadow: inset 0 -1px 0 var(--glass-highlight),
var(--shadow-md);
}
.app-bar__brand {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-md);
color: var(--text);
font-size: var(--text-lg);
font-weight: var(--weight-bold);
letter-spacing: -0.01em;
text-decoration: none;
}
.app-bar__brand:hover { color: var(--text); text-decoration: none; background-color: var(--btn-neutral); }
.app-bar__brand .icon { color: var(--accent); }
.app-bar__nav { display: flex; align-items: center; gap: var(--space-1); }
.app-bar__spacer { flex: 1 1 auto; }
.app-bar__search { flex: 0 1 320px; min-width: 0; }
.app-bar__search .input { min-height: var(--control-md); }
/* На доске панель лежит поверх фото: собственного фона нет, вместо него
затемняющая плашка --surface-scrim и белый текст (≥6.19:1 на любом фото). */
.app-bar--on-board {
background-color: var(--surface-scrim);
border-bottom-color: var(--overlay-hover);
color: var(--text-on-board);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
}
.app-bar--on-board .app-bar__brand,
.app-bar--on-board .btn--ghost { --btn-fg: var(--text-on-board); color: var(--text-on-board); }
.app-bar--on-board .btn--ghost:hover { --btn-bg: var(--overlay-hover); }
@media (max-width: 640px) {
.app-bar__search { display: none; }
.app-bar__search.is-open { display: block; position: absolute; inset: 0 var(--space-2); }
}
/* ---------------------------------------------------------------------------
13. ДОСКА: ПАНЕЛЬ И ХОЛСТ
Фон доски задаётся templ-шаблоном через --board-image (BackgroundURL) и
--board-color (BackgroundColor). Оба необязательны: без них берётся
--surface-board.
--------------------------------------------------------------------------- */
.board {
display: flex;
flex-direction: column;
height: calc(100dvh - var(--topbar-height));
/* Холст нейтральный. Цвета досок пришли из Trello и произвольны — среди них
#b0b6c1 и #cfcecf; ни залитые целиком, ни подмешанные к фону они не дают
опрятного результата, а рябь из разноцветных экранов ломает единство
интерфейса. Доска узнаётся по цветной полосе в своей панели (см.
.board__bar::before) и по метке на плитке дашборда. */
/* Холст прозрачен намеренно: под ним лежат пятна глубины из base.css.
Сплошная заливка перекрыла бы их, и колонкам стало бы нечего размывать —
стекло выродилось бы в ровную серую плашку. */
background-color: transparent;
}
/* Фотография фона — единственный случай, когда холст перестаёт быть
нейтральным: её пользователь выбирает осознанно. */
.board--photo {
background-image: var(--board-image, none);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Панель доски — вторая пластина сразу под шапкой. Плотность та же
(--glass): две одинаковые пластины читаются как один материал, разной
толщины они смотрелись бы как ошибка. */
.board__bar {
position: relative;
/* Панель обязана быть выше холста: из неё выпадают меню участников и
фильтра, а backdrop-filter замкнул их z-index внутри самой панели.
Без этой строки поповер печатался бы под колонками. */
z-index: var(--z-sticky);
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
min-height: var(--board-bar-height);
padding: var(--space-2) var(--space-3);
background-color: var(--glass);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
color: var(--text); /* на glass-solid 13.30 */
border-bottom: var(--hairline) solid var(--glass-border);
box-shadow: inset 0 1px 0 var(--glass-highlight),
var(--shadow-sm);
}
/* Цвет доски живёт здесь — полосой в 3px, а не заливкой всего экрана. */
.board__bar::before {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 3px;
background-color: var(--board-color, var(--accent));
}
/* Поверх фотографии панель снова становится плашкой с белым текстом. */
.board--photo .board__bar {
background-color: var(--surface-scrim);
color: var(--text-on-board);
border-bottom-color: transparent;
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
}
.board__title {
font-size: var(--text-lg);
font-weight: var(--weight-bold);
color: inherit;
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
}
.board__title:hover { background-color: var(--overlay-hover); }
.board__bar .btn { --btn-fg: var(--text-on-board); }
.board__bar .btn:hover:not(:disabled) { --btn-bg: var(--overlay-hover); }
.board__bar .btn:active:not(:disabled) { --btn-bg: var(--overlay-active); }
.board__bar .avatar-stack { --avatar-ring: var(--overlay-active); }
.board__canvas {
flex: 1 1 auto;
display: flex;
align-items: flex-start;
gap: var(--column-gap);
padding: var(--board-pad);
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x proximity;
overscroll-behavior-x: contain;
}
@media (max-width: 560px) {
/* На телефоне колонки листаются по одной и занимают почти всю ширину. */
.board__canvas { scroll-snap-type: x mandatory; }
.list { scroll-snap-align: start; width: min(var(--column-width), calc(100vw - var(--space-8))); }
}
/* ---------------------------------------------------------------------------
14. БОКОВАЯ ПАНЕЛЬ ДОСОК
--------------------------------------------------------------------------- */
.layout { display: flex; align-items: stretch; min-height: calc(100dvh - var(--topbar-height)); }
.layout__main { flex: 1 1 auto; min-width: 0; }
.sidebar {
flex: none;
position: relative;
/* Та же причина, что у .board__bar: стекло замыкает z-index внутри панели,
а она стоит в разметке ДО основного содержимого. */
z-index: var(--z-raised);
width: var(--sidebar-width);
padding: var(--space-3) var(--space-2);
background-color: var(--glass);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
border-right: var(--hairline) solid var(--glass-border);
/* Блик по правой кромке: пластина стоит вертикально, свет ложится на ребро,
обращённое к содержимому. */
box-shadow: inset -1px 0 0 var(--glass-highlight);
overflow-y: auto;
}
.sidebar__section + .sidebar__section { margin-top: var(--space-5); }
.sidebar__title {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
padding: 0 var(--space-2) var(--space-2);
font-size: var(--text-xs);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--text-muted); /* 6.00 */
}
.sidebar__item {
display: flex;
align-items: center;
gap: var(--space-2);
min-height: var(--control-md);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
color: var(--text); /* 11.62 */
font-size: var(--text-md);
text-decoration: none;
}
.sidebar__item:hover { background-color: var(--btn-neutral); color: var(--text); text-decoration: none; }
.sidebar__item[aria-current="page"],
.sidebar__item.is-active {
background-color: var(--surface-selected);
color: var(--accent-text); /* 7.00 */
font-weight: var(--weight-semibold);
}
/* Цветной образец доски. Форма 24×20 — узнаётся и без цвета (в отличие от
точки), а сам цвет продублирован названием доски рядом. */
.sidebar__swatch {
flex: none;
width: 24px;
height: 20px;
border-radius: var(--radius-xs);
background-color: var(--board-color, var(--accent));
background-image: var(--board-image, none);
background-size: cover;
background-position: center;
box-shadow: inset 0 0 0 1px var(--overlay-hover);
}
.sidebar__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar__star { flex: none; color: var(--text-muted); }
.sidebar__star[aria-pressed="true"] { color: var(--warning-text); } /* на popover 8.97 */
/* Ниже 900px панель уезжает за край и вызывается кнопкой. */
@media (max-width: 900px) {
.sidebar {
position: fixed;
inset: var(--topbar-height) auto 0 0;
z-index: var(--z-popover);
transform: translateX(-100%);
transition: transform var(--dur-slow) var(--ease-emphasis);
/* Выехавшая панель отрывается от содержимого сильнее: к кромочному блику
добавляется большая тень. Плотность стекла тоже растёт — панель теперь
лежит поверх доски, а не рядом с ней. */
background-color: var(--glass-thick);
-webkit-backdrop-filter: var(--glass-blur-strong);
backdrop-filter: var(--glass-blur-strong);
box-shadow: inset -1px 0 0 var(--glass-highlight), var(--shadow-xl);
}
.sidebar.is-open { transform: none; }
}
/* ---------------------------------------------------------------------------
15. ПЛИТКА ДОСКИ (дашборд)
Вместо пустого прямоугольника: фон доски, читаемое название на затемнении,
счётчики списков и карточек, звезда избранного.
--------------------------------------------------------------------------- */
.board-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--space-4);
}
@media (max-width: 400px) { .board-grid { grid-template-columns: 1fr; } }
/* Плитка доски — нейтральная поверхность, а цвет доски служит меткой, а не
заливкой. Цвета приходят из Trello и произвольны: среди них есть и #cfcecf,
и #ff9f43, поэтому текст поверх заливки невозможно сделать читаемым одним
правилом — светлые плитки съедали белый шрифт (контраст ~1.5:1), а сама
стена ярких прямоугольников выбивалась из спокойного интерфейса. Теперь
текст всегда лежит на --surface-card и держит контраст независимо от цвета,
а доску по-прежнему легко узнать: полоса слева и лёгкий оттенок фона. */
.board-tile {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--space-2);
min-height: 104px;
padding: var(--space-3);
padding-left: calc(var(--space-3) + 6px);
border-radius: var(--radius-xl);
border: var(--hairline) solid var(--glass-border);
/* Самое тонкое стекло: на плитке всего две короткие строки, крупных.
Размытия НЕТ намеренно — плиток на дашборде бывает несколько десятков, а
backdrop-filter заводит каждой отдельный слой композитинга (правило: blur
только на оболочки, которых единицы). Полупрозрачной заливки и кромки
достаточно, чтобы плитка читалась как тот же материал. */
background-color: var(--glass-thin);
/* Оттенок в 10% различим, но не спорит с текстом. */
background-image:
linear-gradient(135deg,
color-mix(in srgb, var(--board-color, var(--accent)) 10%, transparent),
transparent 62%);
color: var(--text); /* на thin-solid 12.10 */
box-shadow: inset 0 1px 0 var(--glass-highlight),
inset 0 -1px 0 var(--glass-shade);
text-decoration: none;
overflow: hidden;
transition: transform var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out);
}
/* Цветная метка доски. */
.board-tile::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 6px;
background-color: var(--board-color, var(--accent));
}
.board-tile > * { position: relative; }
.board-tile:hover {
transform: translateY(-2px);
box-shadow: inset 0 1px 0 var(--glass-highlight),
inset 0 -1px 0 var(--glass-shade),
var(--shadow-md);
border-color: var(--glass-border-strong);
color: var(--text);
text-decoration: none;
}
/* Доска с фотографией остаётся картинкой: там цвет заранее неизвестен, и
работает прежний приём — сплошной скрим под белым текстом. */
.board-tile--photo {
padding-left: var(--space-3);
background-image: var(--board-image, none);
background-size: cover;
background-position: center;
color: var(--text-on-board);
border-color: transparent;
}
.board-tile--photo::before {
inset: 0;
width: auto;
background-color: var(--surface-scrim);
}
.board-tile--photo:hover { color: var(--text-on-board); }
.board-tile__title {
font-size: var(--text-md);
font-weight: var(--weight-bold);
line-height: var(--leading-snug);
overflow-wrap: anywhere;
}
.board-tile__meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-1) var(--space-2);
font-size: var(--text-xs);
color: var(--text-secondary);
}
/* «6 списков» — единая величина: перенос между числом и словом читается как
два разных значения. */
.board-tile__meta > * { white-space: nowrap; }
.board-tile--photo .board-tile__meta { color: var(--text-on-board); opacity: 0.92; }
.board-tile__star {
position: absolute;
top: var(--space-2);
right: var(--space-2);
color: var(--text-muted);
}
.board-tile--photo .board-tile__star { color: var(--text-on-board); }
/* Плитка «создать доску» — пунктир, а не сплошной блок: сразу видно, что
это не доска. */
.board-tile--new {
align-items: center;
justify-content: center;
background: var(--btn-neutral);
color: var(--text); /* 10.83 */
border: 2px dashed var(--border-strong);
font-weight: var(--weight-semibold);
}
.board-tile--new::before { content: none; }
.board-tile--new:hover { background-color: var(--btn-neutral-hover); color: var(--text); }
/* ---------------------------------------------------------------------------
16—17. КОЛОНКА (СПИСОК)
Ширина 272px — как в Trello. В Django-версии было 290px, из-за чего на
ноутбуке 1440px помещалось на колонку меньше.
Колонка — стеклянная, карточки внутри неё — нет. Это главное разделение
всей темы: колонка держит на себе только заголовок и счётчик, поэтому
сквозь неё можно смотреть; карточка несёт основной текст и под ней
прокручиваются соседние карточки, поэтому её фон обязан быть непрозрачным
(см. .card ниже).
Колонок на экране единицы (при 272px в 1440 их помещается пять), поэтому
размытие здесь по карману. Внутренний блик по верхней кромке рисуется у
.list__header, а не у .list: у .list переполнение видимое, и inset-тень на
нём легла бы под шапку колонки.
--------------------------------------------------------------------------- */
.list {
flex: none;
display: flex;
flex-direction: column;
width: var(--column-width);
max-height: 100%;
border: var(--hairline) solid var(--glass-border);
border-radius: var(--radius-xl);
background-color: var(--glass);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
box-shadow: inset 0 -1px 0 var(--glass-shade),
var(--shadow-md);
}
/* ВАЖНО. backdrop-filter создаёт контекст наложения. Меню списка
(column.templ) лежит ВНУТРИ колонки, и его z-index: --z-popover теперь
ограничен этим контекстом: раскрытое меню первой колонки ушло бы под
вторую. Пока внутри колонки есть фокус — а он там есть всё время, пока
меню открыто: кнопка получает фокус по нажатию, а при открытии он
переезжает в само меню, — колонка поднимается целиком.
:focus-within, а не :has(.popover.is-open): работает во всех браузерах, где
работает и остальная тема. Ложные срабатывания безвредны — колонки друг с
другом не перекрываются, поднимать нечего. */
.list:focus-within { z-index: var(--z-popover); }
/* Заголовок чуть плотнее остальной колонки: --glass-thin поверх --glass даёт
сложенную прозрачность, и название списка перестаёт зависеть от того, что
именно проплывает под колонкой при прокрутке доски. Заодно эта полоса
несёт кромочный блик всей пластины. */
.list__header {
display: flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-2) var(--space-2) var(--space-1);
border-radius: calc(var(--radius-xl) - var(--hairline))
calc(var(--radius-xl) - var(--hairline)) 0 0;
background-color: var(--glass-thin);
box-shadow: inset 0 1px 0 var(--glass-highlight);
}
.list__title {
flex: 1 1 auto;
min-width: 0;
font-size: var(--text-md);
font-weight: var(--weight-semibold);
color: var(--text); /* на колонке 14.47 */
}
.list__count {
flex: none;
min-width: 20px;
padding: 0 var(--space-1);
text-align: center;
font-size: var(--text-xs);
color: var(--text-muted); /* на колонке 7.47 */
}
/* Цветная полоса списка (List.Color) — над заголовком, а не вместо него. */
.list__stripe {
height: 6px;
margin: 0 var(--space-2);
border-radius: var(--radius-xs);
background-color: var(--label-bg, var(--accent));
}
.list__cards {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: var(--space-2);
min-height: var(--space-2);
padding: var(--space-1) var(--space-2);
overflow-y: auto;
overscroll-behavior-y: contain;
}
.list__footer { padding: var(--space-1) var(--space-2) var(--space-2); }
.list__add {
display: flex;
align-items: center;
gap: var(--space-2);
width: 100%;
min-height: var(--control-md);
padding: 0 var(--space-2);
border-radius: var(--radius-sm);
color: var(--text-muted); /* на колонке 7.47 */
font-size: var(--text-md);
text-align: left;
}
.list__add:hover { background-color: var(--btn-neutral); color: var(--text); }
/* Зона приёма при перетаскивании — видна и без цвета: пунктир и отступ. */
.list__cards.is-drop-target {
outline: 2px dashed var(--accent);
outline-offset: -2px;
border-radius: var(--radius-md);
}
/* Колонка «добавить список» — самое тонкое стекло: в ней нет содержимого,
которое надо читать, только одна строка призыва. */
.list--add {
background-color: var(--glass-thin);
color: var(--text); /* на thin-solid 12.10 */
padding: var(--space-2);
min-height: var(--control-lg);
justify-content: center;
}
.list--add:hover { background-color: var(--glass); }
/* ---------------------------------------------------------------------------
18. КАРТОЧКА
КАРТОЧКА НЕ СТЕКЛЯННАЯ, И ЭТО НАМЕРЕННО. Здесь сходятся три причины:
* на ней лежит основной текст интерфейса — название задачи, метки, сроки;
* под ней прокручивается содержимое той же колонки, то есть фон под
строкой меняется во время чтения;
* карточек на доске десятки, а backdrop-filter — операция уровня слоя
композитинга: полсотни размытий подряд роняют прокрутку.
Поэтому фон остаётся непрозрачным --surface-card. От стеклянного языка
карточка берёт только форму: увеличенный радиус (--radius-lg, как у
колонки) и мягкую многослойную тень вместо жёсткой линии.
--------------------------------------------------------------------------- */
.card {
position: relative;
display: block;
padding: var(--space-2) var(--space-3);
border: var(--hairline) solid var(--glass-border);
border-radius: var(--radius-lg);
background-color: var(--surface-card);
color: var(--text); /* на card 13.10 */
box-shadow: inset 0 1px 0 var(--glass-highlight),
var(--shadow-sm);
text-align: left;
text-decoration: none;
cursor: pointer;
transition: box-shadow var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
.card:hover {
box-shadow: inset 0 1px 0 var(--glass-highlight),
var(--shadow-md);
border-color: var(--glass-border-strong);
text-decoration: none;
color: var(--text);
}
.card:focus-visible { outline-offset: 1px; }
/* Обложка. Цветная берёт заливку из класса метки (.label--blue и т.п.) —
палитра обложек и меток в API одна и та же. */
.card__cover {
display: block;
margin: calc(var(--space-2) * -1) calc(var(--space-3) * -1) var(--space-2);
border-radius: calc(var(--radius-lg) - var(--hairline))
calc(var(--radius-lg) - var(--hairline)) 0 0;
overflow: hidden;
}
.card__cover--color { height: 32px; background-color: var(--label-bg, var(--accent)); }
.card__cover--image { max-height: var(--card-cover-max); }
.card__cover--image img { width: 100%; height: 100%; max-height: var(--card-cover-max); object-fit: cover; }
.card__title {
font-size: var(--text-md);
line-height: var(--leading-snug);
overflow-wrap: anywhere;
}
.card__badges {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-1) var(--space-3);
margin-top: var(--space-2);
color: var(--text-muted); /* 6.59 */
font-size: var(--text-xs);
}
.card__badge { display: inline-flex; align-items: center; gap: var(--space-1); }
.card__badge--active { color: var(--accent-text); } /* 7.39 */
.card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
margin-top: var(--space-2);
}
.card__members { margin-left: auto; }
.card--archived { opacity: 0.65; }
.card--archived .card__title { text-decoration: line-through; }
/* Быстрое редактирование прямо в колонке. */
.card--editing { box-shadow: 0 0 0 var(--focus-width) var(--focus-ring); cursor: default; }
.card--editing .card__title { display: none; }
/* ---------------------------------------------------------------------------
19. ПЕРЕТАСКИВАНИЕ (SortableJS) И КЛАВИАТУРНАЯ АЛЬТЕРНАТИВА
--------------------------------------------------------------------------- */
.sortable-ghost {
opacity: 0.4;
background-color: var(--surface-sunken) !important;
box-shadow: inset 0 0 0 2px var(--accent) !important;
}
.sortable-ghost > * { visibility: hidden; }
.sortable-chosen { cursor: grabbing; }
.sortable-drag {
z-index: var(--z-drag);
box-shadow: var(--shadow-drag) !important;
transform: rotate(2deg);
opacity: 1 !important;
}
.list.sortable-drag { transform: rotate(1deg); }
.drag-handle {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--control-sm);
height: var(--control-sm);
border-radius: var(--radius-sm);
color: var(--text-muted);
cursor: grab;
}
.drag-handle:hover { background-color: var(--btn-neutral); color: var(--text); }
.drag-handle:active { cursor: grabbing; }
/* Клавиатурный перенос: карточка «взята», стрелки двигают её.
Состояние объявляется и текстом в .sr-only рядом — цвет не единственный
носитель смысла. */
.is-grabbed {
position: relative;
z-index: var(--z-drag);
box-shadow: var(--shadow-drag), 0 0 0 var(--focus-width) var(--focus-ring);
transform: scale(1.02);
}
.is-drop-hint {
height: var(--space-8);
border-radius: var(--radius-md);
border: 2px dashed var(--accent);
}
/* ---------------------------------------------------------------------------
20. РАЗНОЕ
--------------------------------------------------------------------------- */
/* Панель-карточка: дашборд, настройки, форма входа. Оболочка, которых на
экране одна-две, — берёт среднюю плотность и обычное размытие. Текста на
ней много, но он крупный и лежит блоками, а не поверх прокрутки. */
.panel {
padding: var(--space-5);
border: var(--hairline) solid var(--glass-border);
border-radius: var(--radius-xl);
background-color: var(--glass);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
color: var(--text); /* на glass-solid 13.30 */
box-shadow: inset 0 1px 0 var(--glass-highlight),
inset 0 -1px 0 var(--glass-shade),
var(--shadow-lg);
}
.panel__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
/* Строка списка (участники доски, токены, вложения). */
.row {
display: flex;
align-items: center;
gap: var(--space-3);
min-height: var(--control-lg);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
}
.row:hover { background-color: var(--btn-neutral); }
.row + .row { border-top: var(--hairline) solid var(--border-subtle); border-radius: 0; }
/* Баннер: ошибка формы, «доска закрыта», «нет прав». Иконка + текст, цвет
лишь подкрепляет. */
.banner {
--banner-bg: var(--info-subtle);
--banner-fg: var(--info-subtle-text);
display: flex;
align-items: flex-start;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
background-color: var(--banner-bg);
color: var(--banner-fg); /* info 5.86 | 7.00 */
font-size: var(--text-sm);
}
.banner--success { --banner-bg: var(--success-subtle); --banner-fg: var(--success-subtle-text); } /* 7.65 */
.banner--warning { --banner-bg: var(--warning-subtle); --banner-fg: var(--warning-subtle-text); } /* 7.93 */
.banner--danger { --banner-bg: var(--danger-subtle); --banner-fg: var(--danger-subtle-text); } /* 6.81 */
/* Разделитель с подписью. */
.divider {
display: flex;
align-items: center;
gap: var(--space-3);
color: var(--text-muted);
font-size: var(--text-xs);
}
.divider::before,
.divider::after {
content: "";
flex: 1 1 auto;
height: var(--hairline);
background-color: var(--border);
}
/* Всплывающая подсказка на CSS. Только дополняет видимую подпись —
единственным источником смысла быть не может. */
.tooltip { position: relative; }
.tooltip::after {
content: attr(data-tooltip);
position: absolute;
z-index: var(--z-popover);
left: 50%;
bottom: calc(100% + var(--space-1));
transform: translateX(-50%);
padding: var(--space-1) var(--space-2);
border: var(--hairline) solid var(--glass-border);
border-radius: var(--radius-md);
/* Непрозрачный эквивалент плотного стекла. Размытия здесь нет по двум
причинам сразу: .tooltip::after существует у КАЖДОГО элемента с
подсказкой (backdrop-filter на десятках скрытых слоёв — чистый расход),
а подсказка почти всегда всплывает внутри стеклянной оболочки, где
размывать внешний фон всё равно нельзя (см. правило про backdrop root
выше). Прозрачность без размытия под строкой в 12px — худшее, что можно
сделать с читаемостью, поэтому подсказка глухая. */
background-color: var(--glass-thick-solid);
color: var(--text); /* на thick-solid 12.02 */
box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-md);
font-size: var(--text-xs);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-fast) var(--ease-out);
}
.tooltip:hover::after,
.tooltip:focus-visible::after { opacity: 1; }
/* Активность и комментарии. */
.activity { display: flex; gap: var(--space-3); padding: var(--space-2) 0; }
.activity__body { flex: 1 1 auto; min-width: 0; }
.activity__meta { font-size: var(--text-xs); color: var(--text-muted); } /* 6.59 */
.comment {
padding: var(--space-3);
border-radius: var(--radius-md);
background-color: var(--surface-sunken);
}