/* oscript-ui — базовый лист UI-кита: правила его собственных примитивов.
*
* САМОДОСТАТОЧЕН. Библиотека, поставленная в чужой проект, выглядит прилично без
* единой строки CSS от потребителя: этот лист печатает КаркасСтраницы первым тегом
* , спрашивая адрес у АктивыСтатики.АдресБазовогоЛиста().
*
* ПЕРЕОПРЕДЕЛЕНИЕ — КАСКАДОМ. Лист инсталляции идёт вторым, поэтому её правило той же
* специфичности побеждает без !important. Как проект перебивает правило, подменяет файл
* и меняет палитру — раздел «Переопределение» в README.
*
* ХЕШ СОДЕРЖИМОГО В АДРЕСЕ. Файл лежит на диске БЕЗ версии в имени, а отдаётся по адресу
* /static/oscript-ui-<хеш>.css, где хеш — префикс SHA-256 этого файла (считает
* ОтпечаткиСтатики). Любая правка сама меняет адрес: «правка без сброса кэша» невозможна.
*
* НИ ОДНОГО ЦВЕТА. Все значения берутся из CSS-переменных, которые сервер печатает
* инлайном в (ТокеныТемы): тема, акцент, плотность, радиусы. Поэтому смена темы
* не требует ни пересборки этого файла, ни сброса его кэша.
*
* Порядок разделов: сброс → каркас → типографика → компоненты → страницы (формы, отборы,
* свёртки) → каркас настроек → движение.
*/
/* --- сброс --- */
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
font-family: var(--font-body);
font-size: var(--font-size-body);
line-height: 1.55;
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
}
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
code, pre, kbd, samp { font-family: var(--font-mono); }
/* --- каркас --- */
.wrap {
max-width: var(--layout-width);
margin: 0 auto;
padding: 0 var(--space-5);
}
/* ⚠ Высоту этой полосы повторяет отступ выпадающей панели меню (.hubmenu:popover-open
в медиа-блоке широкого экрана): панель висит ПОД шапкой и собрана из тех же величин.
Меняешь отступы полосы или высоту знака — поправь расчёт и там. */
.top {
background: var(--color-surface);
border-bottom: 1px solid var(--color-divider);
padding: var(--space-3) 0;
position: sticky;
top: 0;
z-index: 20;
backdrop-filter: saturate(140%) blur(6px);
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.brand {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-heading);
font-weight: 600;
font-size: 17px;
color: var(--color-text);
}
.brand:hover { text-decoration: none; color: var(--color-accent); }
/* Высота фиксирована, ширина считается по СОБСТВЕННЫМ пропорциям картинки: знак бывает
и квадратным (поставка), и горизонтальным с нарисованным названием (загруженный).
Квадратный от этого не меняется — 28 на 28 он и есть. Потолок ширины держит очень
длинный логотип, чтобы тот не выдавил навигацию; object-fit не даёт потолку растянуть
картинку — вместо искажения остаются поля. */
.brand__mark { height: 28px; width: auto; max-width: 200px; object-fit: contain; flex: none; }
.top__nav { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.top__link { color: var(--color-text-muted); }
.top__link:hover { color: var(--color-text); text-decoration: none; }
.who {
display: inline-flex;
align-items: center;
gap: var(--space-1);
color: var(--color-text-muted);
font-size: var(--font-size-small);
}
main.wrap { padding-top: var(--space-6); padding-bottom: var(--space-8); min-height: 60vh; }
/* --- единое меню инсталляции: шапка, бургер, панель -----------------------------------
Навигация инсталляции живёт в ОДНОМ меню. На широком экране шапка остаётся прежней —
знак, дороги, оформление, учётка справа, — и учётка же открывает панель; на телефоне
полоса ходов прячется целиком, а слева появляется бургер. Открывают они одну и ту же
панель, второй копии пунктов в разметке нет. Открытие, крест, Esc и щелчок мимо —
работа движка по атрибутам popover/popovertarget: JS в ките нет ни строки.
Открывашки печатаются всегда, а видны ровно там, где панель открывается: движку без
верхнего слоя кнопка ничего не откроет, и мёртвых кнопок на экране быть не должно. */
.hubmenu__opener { display: none; }
.hubmenu__user { display: none; }
.hubmenu__close { display: none; }
/* Панель БЕЗ верхнего слоя — обычный блок в потоке, до содержимого страницы: разделы
видны, каждая дорога достижима. Здесь же снимается раскладка, которую движок даёт
любому popover (по центру экрана, своей рамкой на своей заливке): `inset: auto` стоит
ПЕРЕД остальными, сокращённая запись обнулила бы их. */
.hubmenu {
display: block;
position: static;
inset: auto;
width: auto;
max-width: none;
height: auto;
margin: 0 0 var(--space-5);
padding: var(--space-4);
border: 0;
border-bottom: 1px solid var(--color-divider);
border-radius: 0;
overflow: visible;
background: var(--color-surface);
color: inherit;
}
.hubmenu__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.hubmenu__brand { display: inline-flex; align-items: center; min-width: 0; }
/* Блок вошедшего — он же ход в кабинет, поэтому кликабелен целиком. */
.hubmenu__account {
display: flex;
align-items: center;
gap: var(--space-3);
min-height: 44px;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
color: var(--color-text);
}
.hubmenu__account:hover { background: var(--color-surface-alt); text-decoration: none; }
.hubmenu__avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
flex: none;
border-radius: 50%;
background: var(--color-accent-900);
color: var(--color-accent-400);
font-family: var(--font-heading);
font-weight: 600;
}
.hubmenu__who { display: flex; flex-direction: column; min-width: 0; }
.hubmenu__login { font-weight: 600; overflow-wrap: anywhere; }
.hubmenu__role { color: var(--color-text-muted); font-size: var(--font-size-small); }
.hubmenu__section { margin-top: var(--space-4); }
/* Разделы текущего экрана: на широком их прячет медиа-блок — там они уже стоят колонкой
на самой странице. На телефоне колонки нет, и это единственная дорога к ним. */
.hubmenu__section--screen { display: block; }
/* Строка переключателя оформления: на широком её прячет медиа-блок — там переключатель
стоит в самой шапке, и вторая такая же строка в меню была бы дублем. На телефоне полоса
ходов спрятана, и это единственное место, где тему можно переключить. */
.hubmenu__theme { display: block; }
.hubmenu__title {
margin: 0 0 var(--space-1);
color: var(--color-text-muted);
font-size: var(--font-size-small);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* Пункт меню — строка во всю ширину и под палец: кнопка кита сама по себе ужимается
по содержимому и выравнивается по центру. */
.hubmenu .button {
min-height: 44px;
justify-content: flex-start;
text-align: left;
}
.hubmenu__foot {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-top: var(--space-5);
padding-top: var(--space-3);
border-top: 1px solid var(--color-divider);
}
/* Шапка страницы с единым меню — прежняя шапка: знак слева, ходы справа. Бургер стоит
первым и виден только на телефоне, поэтому на широком экране полоса выглядит ровно
так же, как у инсталляции без меню. */
.top--menu .wrap { gap: var(--space-3); }
/* Верхний слой знает не всякий движок, поэтому ВСЁ, что без него бессмысленно, живёт
здесь: и открывашки, и всплывающая панель. */
@supports selector(:popover-open) {
.hubmenu__user { display: inline-flex; }
.hubmenu__close { display: inline-flex; }
.hubmenu:not(:popover-open) { display: none; }
/* Открытая панель прокручивается сама: самый длинный дом в неё не влезает ни на одной
ширине, а тянуть за собой страницу она не должна. */
.hubmenu:popover-open {
display: flex;
flex-direction: column;
position: fixed;
margin: 0;
border: 0;
overflow-y: auto;
overscroll-behavior: contain;
box-shadow: var(--shadow-lg);
}
/* Панель — колонка, и содержимого в ней бывает больше, чем высоты: без этого браузер
ужимает строки, чтобы всё влезло, и учётка с рубриками наезжают друг на друга.
Не ужимаем — прокручиваем. */
.hubmenu:popover-open > * { flex: none; }
}
/* Панель широкого экрана висит под шапкой у ПРАВОГО края — там же, где стоит кнопка,
которая её открыла. Позиция обычная, `position: fixed`: привязка к якорю (anchor())
живёт не во всех движках, а меню, которое в одном браузере выпадает у кнопки, а в другом
прилипает к левому верхнему углу, — хуже предсказуемого. `inset: auto` снимает раскладку
UA-стиля (`inset: 0` вместе с `margin: auto` ставит popover по центру экрана), поэтому
стоит ПЕРЕД top/right. Отступ сверху — высота липкой шапки плюс зазор. */
@media (min-width: 901px) {
/* Шапка панели на широком не нужна вовсе: знак стоит в двух шагах, в самой шапке
страницы, а закрывают выпадающее меню щелчком мимо и клавишей Esc — так жило
прежнее меню учётки. Крест — привычка телефона, там он и остаётся. */
.hubmenu__head { display: none; }
/* Вид — прежнего меню учётки: компактный дропдаун, а не мобильная шторка. */
.hubmenu {
padding: var(--space-3);
border: 1px solid var(--color-divider);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
}
/* Пункт — строка с тонким фоном на наведении: рамка-коробка у каждого пункта дробила
бы список на кнопки, а это список. */
.hubmenu .button {
min-height: 0;
width: 100%;
padding: var(--space-1) var(--space-2);
border-color: transparent;
background: transparent;
border-radius: var(--radius-sm);
}
.hubmenu .button:hover { background: var(--color-surface-alt); filter: none; }
/* Рубрика — мелкая приглушённая подпись над тонким разделителем, а не заголовок:
в дропдауне секции разделяют, а не объявляют. */
.hubmenu__section {
margin-top: var(--space-3);
padding-top: var(--space-2);
border-top: 1px solid var(--color-divider);
}
.hubmenu__title {
margin-bottom: 2px;
text-transform: none;
letter-spacing: normal;
}
/* Учётка — такая же строка, как пункты: мелкий кружок, имя и роль под ним. Высота
собственная, а не нулевая: с min-height: 0 двухэтажная строка съезжала на аватар. */
.hubmenu__account {
min-height: 36px;
gap: var(--space-2);
padding: var(--space-1) var(--space-2);
margin-top: var(--space-1);
}
.hubmenu__avatar { width: 24px; height: 24px; font-size: var(--font-size-small); }
.hubmenu__who { line-height: 1.25; }
.hubmenu__login { font-size: 14px; }
/* Разделы текущего экрана на широком стоят колонкой на самой странице, а переключатель
оформления — в шапке: второй раз в меню они не нужны. */
.hubmenu__section--screen { display: none; }
.hubmenu__theme { display: none; }
/* Скрим под дропдауном не нужен: прежнее меню учётки страницу не затемняло. */
.hubmenu::backdrop { background: transparent; }
.hubmenu__foot {
margin-top: var(--space-2);
padding-top: var(--space-2);
gap: var(--space-1);
}
@supports selector(:popover-open) {
.hubmenu:popover-open {
inset: auto;
/* Отступ сверху — не число на глаз: это высота липкой шапки, собранная из тех же
величин, что и она сама (её вертикальные отступы, знак в 28px и линия снизу),
плюс зазор. Меняется плотность — панель едет вместе с шапкой. */
top: calc(var(--space-3) * 2 + 28px + 1px + var(--space-5));
/* Отступ справа считается от ПОЛОСЫ содержимого, а не от края экрана: кнопка,
которая открыла панель, стоит у правого края .wrap, а полоса на широком
мониторе центрирована и уже экрана. Проценты, а не 100vw: у фиксированного
элемента процент берётся от области просмотра БЕЗ полосы прокрутки, и панель
не съезжает на её половину. Экран уже полосы — остаётся прежний отступ. */
right: max(var(--space-5), calc(50% - var(--layout-width) / 2 + var(--space-5)));
width: min(92vw, 280px);
max-height: min(80vh, 640px);
border: 1px solid var(--color-divider);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
}
}
}
.bottom {
border-top: 1px solid var(--color-divider);
color: var(--color-text-muted);
padding: var(--space-5) 0;
font-size: var(--font-size-small);
margin-top: var(--space-8);
}
/* --- типографика --- */
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-weight-heading); }
h1 { font-size: var(--font-size-h1); margin: 0 0 var(--space-3); letter-spacing: -0.01em; }
h2 {
font-size: var(--font-size-h2);
margin: var(--space-6) 0 var(--space-3);
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--color-divider);
}
h3 { font-size: 16px; margin: var(--space-5) 0 var(--space-2); }
.muted { color: var(--color-text-muted); }
/* --- компонент: иконка --- */
.icon {
width: 1em;
height: 1em;
flex: none;
vertical-align: -0.125em;
}
/* --- компонент: карточка --- */
.card {
background: var(--color-surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: var(--space-5);
margin-bottom: var(--space-4);
}
.card__title {
display: flex;
align-items: center;
gap: var(--space-2);
margin: 0 0 var(--space-2);
font-size: var(--font-size-h2);
border: 0;
padding: 0;
}
.card__title .icon { color: var(--color-accent); }
.card__lead { color: var(--color-text-muted); margin: 0 0 var(--space-4); }
/* Ритм внутри карточки — та же обязанность, что у .section__body. Тело карточки держит
произвольное доверенное содержимое, в том числе поля кита, и раньше ритм давали
маргины самих полей: в витрине кита восемь полей подряд в .card__body слиплись
в ноль пикселей. Маргин, а не flex+gap — по той же причине, что и у .section__body:
в потоке маргины детей схлопываются, а не складываются с зазором.
ОХВАТ ПРАВИЛА ПРОВЕРЕН ЧИСЛАМИ.
Правило кладёт margin-top ВСЕМ не-первым детям тела карточки, поэтому вопрос «не
поехала ли вёрстка» законный. Шаг сетки здесь не 4px, а 2.8/5.6/8.4/11.2/16.8
(ТокеныТемы.ШагСетки, плотность 1), то есть --space-4 = 11.2px при font-size-body 15px.
Считаем по факту, помня две вещи: правило трогает только ВЕРХНИЙ маргин, а маргины
соседей СХЛОПЫВАЮТСЯ (зазор = max, а не сумма):
* поля и тумблеры (собственных маргинов у них нет): 0 -> 11.2px — собственно
починенный дефект;
*
+
без класса: остаётся 15px. Правило переопределяет margin-top второго
абзаца, но margin-bottom первого — браузерный 1em = 15px — остаётся, и схлопывание
даёт max(15, 11.2) = 15px. Не «стало плотнее», а «не изменилось»;
* pre.code (margin-bottom space-3 = 8.4px) перед
: max(8.4, 11.2) = 11.2px;
* первый и последний ребёнок: внешние маргины сняты, чтобы не удваивать padding
карточки (space-5 = 16.8px).
ЗАЗОР ПОД ЗАГОЛОВКОМ СТАНОВИТСЯ ШИРЕ — и это единственное место, где правило не
только нормализует. У заголовков собственный нижний маргин МЕНЬШЕ 11.2px, а верхний
больше, так что правило подтягивает их сверху и раздвигает снизу:
* h3 (margin: space-5 0 space-2 = 16.8/5.6) — реальный непосредственный ребёнок
.card__body (ВитринаКита.os: заголовки блоков витрины): сверху 16.8 -> 11.2,
снизу max(5.6, 11.2) = 11.2 (+5.6). Заголовок становится равноудалён от соседей
сверху и снизу — практически это ровнее, а не поломка;
* h1 (margin-bottom space-3 = 8.4) и h2 (space-6 0 space-3 = 22.4/8.4) — так же:
снизу 8.4 -> 11.2.
АТОМАРНОМУ ИНЛАЙНУ (inline-block, inline-flex — такова .tag) ЭТОТ МАРГИН УХОДИТ
В ВЫСОТУ СТРОЧНОГО БОКСА и опускает всю строку вместе с собой; настоящий inline
вертикальный маргин игнорирует. Поэтому ряд инлайновых элементов печатается ОДНИМ
ребёнком тела (.tag-row), а не несколькими. Одиночный атомарный инлайн после
заголовка — законный случай (витрина кита): там маргин отбивает образец от подписи
своего блока.
Сужать правило нельзя: «> * + *» владеет интервалом между ЛЮБЫМИ соседями тела,
а «> .field + .field» не покрывает даже пару .field + .toggle — стоит поставить
тумблер между двумя полями, и зазор в этом месте пропадёт. */
.card__body > * + * { margin-top: var(--space-4); }
.card__body > :first-child { margin-top: 0; }
.card__body > :last-child { margin-bottom: 0; }
.card__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--color-divider);
}
/* Карточка В ЯЧЕЙКЕ СЕТКИ — колонка на всю высоту ряда; лекарство то же, что у .objcard.
Ячейка сетки высоту ряда получает (align-items: stretch), а карточка внутри неё росла
только под своё содержимое: в ряду карточек описание в три строки опускало разделитель
и кнопку на 23 px ниже, чем у соседей, и ряд разъезжался. height: 100% выравнивает
коробки, margin-top: auto ставит полосу действий на одну линию у всех.
Собственный нижний маргин карточки в сетке лишний вдвойне: интервал между рядами
держит gap сетки, а внутри ячейки он не давал карточке дойти до низа.
Зазор над разделителем не теряется: маргины флекс-элементов не схлопываются, и
нижний маргин .card__lead (space-4) даёт ровно тот же отступ, что схлопывание давало
в потоке. Вне сетки правило молчит — одиночной карточке не во что тянуться. */
.grid__cell > .card {
display: flex;
flex-direction: column;
height: 100%;
margin-bottom: 0;
}
.grid__cell > .card > .card__actions { margin-top: auto; }
/* --- компонент: поле ---
ИНТЕРВАЛ МЕЖДУ ПОЛЯМИ ДАЁТ КОНТЕЙНЕР, А НЕ ПОЛЕ.
Было: у .field и .toggle стоял margin-bottom: space-4, и он СКЛАДЫВАЛСЯ с gap
контейнера — формы дышали двойным ритмом 16+12 px, причём величина зависела
от того, в какой контейнер поле попало. Заодно это ломало выравнивание в .filters:
align-items: flex-end равняет МАРГИН-БОКСЫ, поэтому нижний отступ поля опускал его
контрол на 16 px выше базовой линии кнопки рядом. Один владелец интервала
(контейнер) лечит и то, и то.
ПОЛНОТА ДЕРЖИТСЯ НЕ СПИСКОМ.
Первая редакция этого правила называла три контейнера (.form-stack, .filters,
.from-config) и этим создала впечатление полноты: тело секции настроек
(.section__body), где лежит большинство полей приложения, в список не попало
и осталось без ритма — три поля подряд слиплись в ноль пикселей. Обязанность
формулируется поэтому не перечнем, а правилом: КАЖДЫЙ элемент, внутри которого
печатается больше одного .field/.toggle, обязан задать интервал сам. Новый
контейнер подпадает под правило сразу, без правки этого комментария.
Контейнер, в котором поле ОДНО по конструкции (.filters, .from-config), интервалом
между полями не владеет, но gap ему всё равно нужен: он разводит поле с кнопкой
отбора и с подписью источника. Задавая gap, не забудь про display: flex — без
flex-контекста gap инертен, и правило выглядит рабочим, ничего не делая. */
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field__label { font-size: var(--font-size-small); color: var(--color-text-muted); }
.field__control {
width: 100%;
padding: var(--space-2) var(--space-3);
font: inherit;
color: var(--color-text);
background: var(--color-surface-alt);
border: 1px solid var(--color-divider);
border-radius: var(--radius-md);
transition: border-color var(--motion-fast) var(--motion-ease),
box-shadow var(--motion-fast) var(--motion-ease);
}
.field__control:hover:not([disabled]) { border-color: var(--color-accent); }
.field__control[disabled], .field__control[readonly] {
color: var(--color-text-muted);
cursor: not-allowed;
}
.field__hint { font-size: var(--font-size-small); color: var(--color-text-muted); }
.field__error { font-size: var(--font-size-small); color: var(--color-danger); }
.field--error .field__control { border-color: var(--color-danger); }
.field--check { flex-direction: row; align-items: center; gap: var(--space-2); }
.field--check .field__label { color: var(--color-text); }
.field__check { width: 16px; height: 16px; accent-color: var(--color-accent); }
textarea.field__control { min-height: calc(var(--space-8) * 2); resize: vertical; }
/* Группа полей