/*! * HubFront — UI-компоненты (CSS). Фаза C. ЕДИНЫЙ дом стилей примитивов. * Copyright (c) 2026 Mehti Zeynalov / Hubstorie. Proprietary. All rights reserved. * * Сюда складываем по одному переиспользуемые UI-примитивы HubFront UI («свой * Bootstrap»): logo (есть), далее — button/card/sheet/toast/tabs… (по микрошагам). * Стили опираются на дизайн-токены (assets/css/hubfront.tokens.css), но КАЖДЫЙ * var() имеет фолбэк — примитив не разваливается на странице, где токены ещё не * подключены (часть автономных страниц держит свой :root). Правило 10: один дом * вместо копий по страницам. */ /* ── Logo (знак Hubstorie) ───────────────────────────────────────────────── * Канон: «hub»(--text)«storie»(--accent) СЛИТНО + акцентная точка. Разметку даёт * hubLogo() (helpers.php). gap действует МЕЖДУ словом и точкой (слово — один * флекс-элемент), внутри слова hub/storie слитны. --sm — компактный топбар ленты. */ .hub-logo { display: inline-flex; align-items: center; gap: 0.2em; /* em → отступ до точки пропорционален шрифту (один вид при любом размере) */ font-family: var(--font-serif, 'Source Serif 4', Georgia, serif); font-weight: 600; font-size: 22px; line-height: 1; letter-spacing: -0.02em; color: var(--text, #ede4d3); text-decoration: none; white-space: nowrap; } .hub-logo__word { display: inline; } .hub-logo__accent { color: var(--accent, #d4a574); } .hub-logo__dot { width: 0.24em; /* em → точка масштабируется со шрифтом (лента/кабинет — одинаково) */ height: 0.24em; flex: 0 0 auto; border-radius: var(--radius-round, 50%); background: var(--accent, #d4a574); align-self: center; /* по центру строки (а не «плавающий градус» сверху) */ margin-top: 0.04em; /* оптическая поправка для serif */ } /* ── Icon (единый источник SVG, hubIcon() в helpers.php) ─────────────────── * Размер задаёт КОНТЕКСТНЫЙ CSS (напр. `.app-menu-item svg{width:..}`), как и * раньше — у svg нет width/height. Здесь только то, что не конфликтует с размером. */ .hub-icon { flex-shrink: 0; } /* ── Icon button (кнопка-иконка топбара) — ЕДИНЫЙ вид (Фаза C) ────────────── * Канон = ридер-топбар ленты (`.icon-btn`): 30px кружок, bg-soft, рамка, 14px * иконка, серый → акцент в active. Кабинет переведён на него (бургер/колокол). * Лента остаётся на своём `.icon-btn` (его класс используют JS-селекторы жестов) — * визуально идентичен; переименование ленты — безопасный следующий шаг. */ .hub-iconbtn { width: 30px; height: 30px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-round, 50%); background: var(--bg-soft, #232327); border: 1px solid var(--border, rgba(237, 228, 211, 0.1)); color: var(--text-dim, #b8b0a0); cursor: pointer; text-decoration: none; position: relative; -webkit-tap-highlight-color: transparent; transition: all 0.2s; } .hub-iconbtn:hover { color: var(--text, #ede4d3); } .hub-iconbtn:active { transform: scale(0.9); } .hub-iconbtn.active { background: var(--accent, #d4a574); color: #1a1a1c; border-color: var(--accent, #d4a574); } .hub-iconbtn svg { width: 14px; height: 14px; } /* .hub-back — ЕДИНАЯ кнопка «назад» (модульная): прозрачная, без обводки, svg 22px, * ховер-акцент. Один вид в кабинете (topbar) и в ленте (грид автора). Раньше кабинет * держал это инлайн как .topback — перенесено сюда (правило 10). Работает на и