/* OpenHub — лист инсталляции: то, чего нет и не может быть в UI-ките.
*
* ВТОРОЙ В КАСКАДЕ. Базовый лист кита (oscript-ui.css) приезжает первым тегом ,
* этот — вторым, поэтому правило отсюда перебивает китовое той же специфичностью.
* Всё, что рисует примитивы кита, живёт в его листе; сюда попадает только то, чей
* печатающий живёт в хабе.
*
* ХЕШ СОДЕРЖИМОГО В АДРЕСЕ. Файл лежит на диске БЕЗ версии в имени, а отдаётся по адресу
* /static/openhub-<хеш>.css, где хеш — префикс SHA-256 этого файла (считает
* ОтпечаткиСтатики кита). Любая правка сама меняет адрес.
*
* НИ ОДНОГО ЦВЕТА. Значения берутся из CSS-переменных, которые сервер печатает инлайном
* в (ТокеныТемы кита).
*/
/* --- требования к паролю рядом с полем ввода -------------------------------------
Список печатает сервер, спросив политику; скрипт лишь помечает выполненные по мере
набора. Состояние несёт СИМВОЛ отметки, а не только цвет: без цвета список читается
так же, и без скрипта остаётся обычным списком требований.
Блок собран элементами кита, поэтому своих имён классов у него нет: и оформление,
и скрипт находят его по тем же признакам (data-pwreq, data-pwrule, data-pwmark),
а не по второму, параллельному адресу. Классы состояния добавляет скрипт. */
[data-pwreq] { margin: var(--space-2) 0 0; font-size: var(--font-size-small); color: var(--color-text-muted); }
[data-pwreq] > p { margin: 0 0 var(--space-1); }
[data-pwreq] > ul { list-style: none; margin: 0; padding: 0; }
[data-pwrule] { display: flex; gap: var(--space-2); align-items: baseline; }
[data-pwmark] { flex: 0 0 1em; text-align: center; }
.pwreq__item--ok { color: var(--color-success); }
.pwreq__item--fail { color: var(--color-danger); }
/* --- подсветка кода в README ----------------------------------------------------
Блок кода с языком раскрашивает в браузере скрипт oscript-md: он заменяет блок своим
, а фон темы GitHub пишет в его атрибут style. Других
с атрибутом style в
README нет — санитайзер его не пропускает. Блок остаётся блоком страницы: фон у него
тот же, что у кода без языка, а от темы GitHub приходят только цвета слов, и те
выбирает color-scheme темы хаба. Атрибут style перебивает только !important. */
.prose pre[style] { background-color: var(--color-surface-alt) !important; }
/* --- панель сохранения: «есть несохранённое» ------------------------------------
Сама панель — компонент кита, а вот состояние «форма тронута» навешивает скрипт
ЭТОЙ инсталляции (openhub.js, раздел «панель сохранения»). Кит скриптов не везёт
и такого класса никогда не создаёт, поэтому правило состояния живёт здесь — рядом
с тем, кто его ставит. */
.savebar--dirty { box-shadow: var(--shadow-lg); }
/* --- живая форма подписки: сообщение предпросмотра и итог пробы ---------------------
Предпросмотр показывает уведомление так, как его покажет Telegram: простой текст
с переносами строк «пузырём» и под ним карточка ссылки. Разметку собирает сервер
элементами кита, и оформление находит её по тем же признакам, что и скрипт
(data-sub-*), — своих имён классов у неё нет. Итог пробы несёт состояние словом и
знаком, цвет — только вторая подсказка. */
/* пустое поле шаблона показывает шаблон по умолчанию целиком — все его шесть строк */
form:has([data-sub-preview]) textarea.field__control { min-height: 10.5em; }
[data-sub-preview] { display: grid; gap: var(--space-2); margin: var(--space-2) 0; }
[data-sub-preview][hidden] { display: none; }
[data-sub-bubble] {
max-width: 32rem; padding: var(--space-2) var(--space-3);
background: var(--color-surface-alt); border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-sm);
}
[data-sub-text] { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
[data-sub-card] {
display: grid; gap: var(--space-1); margin-top: var(--space-2); padding-left: var(--space-2);
border-left: 3px solid var(--color-accent); font-size: var(--font-size-small); overflow-wrap: anywhere;
}
[data-sub-result="err"] { color: var(--color-danger); white-space: pre-wrap; }
[data-sub-trial] { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
[data-sub-trial-result] [data-sub-result="ok"] { color: var(--color-success); }
/* --- брендирование: образец шапки и слоты картинок ----------------------------------
Образец — узел кита, а что внутри рамки, решает хаб: мини-шапка, ряд акцента и подвал,
их находят по признакам data-brand-preview. Ряд акцента перекрашивает сам кит: зеркало
поля accent пересобирает палитру узла внутри образца. Название рядом со знаком прячется
вместе с выключенным тумблером — так, как его спрячет шапка; пометка «+ свой акцент» у
пресета — вместе с опустевшим полем акцента. */
[data-brand-preview="head"], [data-brand-preview="accent"] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
[data-brand-preview="head"] { padding-bottom: var(--space-3); border-bottom: 1px solid var(--md-sys-color-outline-variant); }
[data-brand-preview="head"] > img { height: 28px; width: auto; }
[data-brand-preview="name"] { margin-right: auto; font: var(--type-title-medium); }
[data-brand-preview="accent"] { padding: var(--space-3) 0; }
[data-brand-preview="foot"] {
margin: 0; padding-top: var(--space-3); border-top: 1px solid var(--md-sys-color-outline-variant);
}
form:has(input[type="checkbox"][name="show_name"]:not(:checked)) [data-brand-preview="name"] { display: none; }
form:has(input[name="accent"]:placeholder-shown) [data-brand-preview="own-accent"] { display: none; }
[data-brand-slot] {
display: grid; gap: var(--space-2); padding: var(--space-3);
border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-medium);
}
/* --- образец плашки тега в окне «Оформление» ----------------------------------------
Плашку образца сервер печатает в виде выбранного стиля, а выбранный стиль кит зеркалит в её
признак (data-mirror-стиль — слово ЗеркалоПризнаком): вид по нему задаёт этот лист. Роли
цвета те же, что у плашки заведённого тега (ОформлениеТега.ВидПлашки и .tag--<вид> кита;
соответствие сверяет СлойПредставления_Тесты). Значок, выбранный сеткой, скрипт кита кладёт
в плашку сам. Без скрипта признак — значение, напечатанное сервером. */
.tag[data-mirror-стиль] { --_bg: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); }
.tag[data-mirror-стиль="stable"] { --_bg: var(--md-sys-color-success-container); color: var(--md-sys-color-on-success-container); }
.tag[data-mirror-стиль="prerelease"] { --_bg: var(--md-sys-color-warning-container); color: var(--md-sys-color-on-warning-container); }
.tag[data-mirror-стиль="deprecated"] { --_bg: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.tag[data-mirror-стиль="special"] { --_bg: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
/* --- источник значения у настройки ----------------------------------------------------
Поле настройки и плашку его источника сервер печатает одним узлом с признаками
data-setting и data-source (ПоляНастроек.Настройка). Плашка стоит справа от поля по высоте
его управления; колонка плашек у всех полей одной ширины, поэтому правые края полей раздела
совпадают. На телефоне плашка встаёт над полем. У занятого конфигурацией поля управление
лежит в пунктирной рамке — плашка опускается на её внутренний отступ. */
[data-setting] {
display: grid;
grid-template-columns: minmax(0, 1fr) 10.5rem;
column-gap: var(--space-3);
align-items: start;
}
[data-setting] > :last-child { justify-self: start; margin-top: 11px; }
[data-setting]:has(.toggle) > :last-child { margin-top: 9px; }
[data-setting]:has(> .from-config) > :last-child { margin-top: calc(var(--space-4) + 11px); }
@media (max-width: 640px) {
[data-setting] { grid-template-columns: minmax(0, 1fr); }
[data-setting] > :last-child { grid-row: 1; justify-self: end; margin: 0 0 var(--space-1); }
[data-setting]:has(.toggle) > :last-child,
[data-setting]:has(> .from-config) > :last-child { margin: 0 0 var(--space-1); }
}
/* Формы сброса скрыты: их шлют кнопки плашек «изменено» атрибутом form. В шапке секции-формы
они единственное, что лежит вне её