/* Точка входу стилів і єдине місце, де оголошено, що за чим іде. Кроку збірки в деплої немає й тут: цей файл читає сам застосунок на старті й підставляє замість кожного @import вміст названого файлу, загорнутий у його шар (shared/assets.py). Для каскаду це те саме — @import ... layer(X) і @layer X { … } рівносильні за специфікацією. Для браузера різниця велика: доти він дізнавався про ці тридцять файлів лише розібравши цей, тобто перше малювання сторінки чекало два оберти по мережі замість одного. Правити тут і в сусідніх файлах — як і раніше; ASSETS_CACHE=false у .env перескладає все на кожен запит, тож локально нічого не змінилось. Порядок шарів нижче ВАЖЛИВІШИЙ за специфічність: правило з пізнішого шару виграє в правила з ранішого, хай яким «сильним» той селектор був. Завдяки цьому в проєкті майже немає !important і немає гонки селекторів. Хто де: rhythm — вертикальні відступи МІЖ блоками сторінки (мусить стояти після components, бо гасить власні margin компонентів), service — інлайнові стилі конкретного сервіса, utilities — точкові класи-виправлення. */ @layer reset, tokens, base, layout, components, rhythm, service, utilities; @layer reset { /* 00-reset.css */ /* Мінімальний ресет — лише те, без чого дефолти браузера справді заважають. Свідомо не «обнуляємо все»: типографіку й відступи задає 20-base.css. */ *, *::before, *::after { box-sizing: border-box; } /* Атрибут hidden має вимикати елемент незалежно від того, який display йому задав компонентний клас. Без цього правила будь-який .hint чи .badge із власним display перебиває стиль браузера й лишається на видноті — саме через це підказка про Caps Lock висіла на сторінці входу завжди. !important тут не «сильніший селектор», а перемикач порядку шарів: для важливих оголошень шари рахуються у зворотному порядку, тож reset — найраніший у списку — б'є і components, і utilities. Єдине місце в проєкті, де це доречно: правило має діяти скрізь і без винятків. */ [hidden] { display: none !important; } /* display:block прибирає «зайвий» відступ під картинкою від рядкового потоку, max-width не дає їй вилізти за контейнер. */ img, svg, video, canvas { display: block; max-width: 100%; } /* Поля форм не успадковують шрифт від сторінки самі — доводиться просити. */ input, button, textarea, select { font: inherit; color: inherit; } table { border-collapse: collapse; } } @layer tokens { /* 10-tokens.css */ /* Токени дизайн-системи — єдине місце, де задаються кольори, відступи й розміри. Далі всі компоненти беруть готові змінні й не рахують нічого самі. Дві ідеї, на яких усе тримається: 1. Кольори виводяться з ВІДТІНКУ (hue), а не задаються поштучно. Одне число --h-accent → і вся акцентна гама сторінки перерахувалась. Саме тому сервіс отримує свій колір одним рядком у registry.py. 2. Світла й темна теми живуть в одному оголошенні через light-dark(). Ніяких дублів на кожен колір і жодного окремого «темного файлу». Перемикає їх color-scheme нижче. */ :root { /* Обидві теми доступні; фактичну обирає data-theme або система. */ color-scheme: light dark; --h-brand: 265; /* Відтінки станів. Вибрані так, щоб читались і на світлому, і на темному. */ --h-ok: 150; --h-warn: 75; --h-fail: 25; --h-info: 230; /* Акцент сторінки. Дефолт — брендовий, але base.html перебиває його інлайном на , підставляючи hue поточного сервісу. */ --h-accent: var(--h-brand); /* Поверхні: bg — тло сторінки, далі за зростанням «підняття». Легка домішка brand-відтінку не дає сірому виглядати брудним. */ --bg: light-dark(oklch(.985 .003 var(--h-brand)), oklch(.170 .015 var(--h-brand))); --surface: light-dark(oklch(1 0 0), oklch(.210 .018 var(--h-brand))); --surface-2: light-dark(oklch(.975 .004 var(--h-brand)), oklch(.250 .020 var(--h-brand))); --surface-3: light-dark(oklch(.955 .006 var(--h-brand)), oklch(.290 .022 var(--h-brand))); /* Текст: ink — основний, muted — другорядний, subtle — ледь помітний. У темній темі порядок muted/subtle за світлістю навмисно перевернутий: там «тихіший» означає темніший, а не світліший. */ --ink: light-dark(oklch(.250 .020 var(--h-brand)), oklch(.940 .008 var(--h-brand))); --ink-muted: light-dark(oklch(.550 .020 var(--h-brand)), oklch(.680 .020 var(--h-brand))); --ink-subtle: light-dark(oklch(.680 .015 var(--h-brand)), oklch(.550 .018 var(--h-brand))); --border: light-dark(oklch(.910 .008 var(--h-brand)), oklch(.300 .020 var(--h-brand))); --border-strong: light-dark(oklch(.840 .012 var(--h-brand)), oklch(.380 .024 var(--h-brand))); --brand: light-dark(oklch(.550 .20 var(--h-brand)), oklch(.700 .16 var(--h-brand))); --brand-ink: light-dark(oklch(1 0 0), oklch(.170 .02 var(--h-brand))); /* Похідні від --brand через color-mix: підмішування до поверхні (soft, line) або до тексту (hover, active). Так відтінки лишаються узгодженими самі собою, у будь-якій темі. */ --brand-soft: color-mix(in oklch, var(--brand) 12%, var(--surface)); --brand-line: color-mix(in oklch, var(--brand) 35%, var(--border)); --brand-hover: color-mix(in oklch, var(--brand) 88%, var(--ink)); --brand-active: color-mix(in oklch, var(--brand) 76%, var(--ink)); /* Те саме, але від --h-accent. Різниця лише в тому, що акцент змінюється від сторінки до сторінки, а бренд — ні. */ --accent: light-dark(oklch(.550 .20 var(--h-accent)), oklch(.700 .16 var(--h-accent))); --accent-soft: color-mix(in oklch, var(--accent) 12%, var(--surface)); --accent-line: color-mix(in oklch, var(--accent) 40%, var(--border)); --focus-ring: 2px solid var(--brand); --focus-offset: 2px; /* Стани — одна трійка на кожен: ink (текст/іконка), bg (тло), line (рамка). Пропорції домішування скрізь однакові, тож алерти, бейджі й рядки таблиць виглядають як одна сім'я. */ --ok-ink: light-dark(oklch(.450 .13 var(--h-ok)), oklch(.800 .14 var(--h-ok))); --ok-bg: color-mix(in oklch, var(--ok-ink) 12%, var(--surface)); --ok-line: color-mix(in oklch, var(--ok-ink) 32%, var(--border)); --warn-ink: light-dark(oklch(.500 .12 var(--h-warn)), oklch(.820 .14 var(--h-warn))); --warn-bg: color-mix(in oklch, var(--warn-ink) 12%, var(--surface)); --warn-line: color-mix(in oklch, var(--warn-ink) 32%, var(--border)); --fail-ink: light-dark(oklch(.500 .18 var(--h-fail)), oklch(.780 .15 var(--h-fail))); --fail-bg: color-mix(in oklch, var(--fail-ink) 12%, var(--surface)); --fail-line: color-mix(in oklch, var(--fail-ink) 32%, var(--border)); --info-ink: light-dark(oklch(.500 .15 var(--h-info)), oklch(.800 .13 var(--h-info))); --info-bg: color-mix(in oklch, var(--info-ink) 12%, var(--surface)); --info-line: color-mix(in oklch, var(--info-ink) 32%, var(--border)); /* Один множник на всю сітку відступів: змінивши --density, можна згустити чи розрідити інтерфейс цілком, не чіпаючи компоненти. */ --density: 1; /* Півкроку. Потрібен рідко — там, де рядок списку має «дихати», але вже не поміщається в повний крок: стрічка кампаній, фішка в клітинці календаря. Окремим токеном, а не 2px у стилі сервісу, — інакше він перестає стискатись разом із рештою при зміні --density. */ --s-0: calc(2px * var(--density)); --s-1: calc(4px * var(--density)); --s-2: calc(8px * var(--density)); --s-3: calc(12px * var(--density)); --s-4: calc(16px * var(--density)); --s-5: calc(24px * var(--density)); --s-6: calc(32px * var(--density)); --s-7: calc(48px * var(--density)); --s-8: calc(64px * var(--density)); /* Розміри тексту в rem — щоб масштаб шрифту в налаштуваннях браузера працював як має. */ --t-xs: 0.6875rem; --t-sm: 0.75rem; --t-cmp: 0.8125rem; --t-md: 0.9375rem; --t-lg: 1.0625rem; --t-xl: 1.3125rem; --t-2xl: 1.6875rem; /* Системні шрифти: жодного веб-шрифту, тобто нуль зовнішніх запитів і нуль стрибків тексту при завантаженні. */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "Cascadia Code", "Cascadia Mono", Menlo, Consolas, monospace; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-full: 999px; /* У темній темі тіні помітно щільніші: на темному тлі слабка тінь просто не читається. */ --shadow-1: light-dark(oklch(0 0 0 / .06), oklch(0 0 0 / .40)); --shadow-2: light-dark(oklch(0 0 0 / .09), oklch(0 0 0 / .50)); --e-1: 0 1px 2px var(--shadow-1); --e-2: 0 4px 12px var(--shadow-2), 0 1px 2px var(--shadow-1); --e-3: 0 12px 32px var(--shadow-2), 0 2px 6px var(--shadow-1); } /* Увесь перемикач теми — оці два правила. data-theme на звужує color-scheme до однієї схеми, і всі light-dark() вище перемикаються разом. Без атрибута лишається "light dark", тобто рішення за системою. Ставить атрибут shared/static/js/theme.js. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } } @layer base { /* 20-base.css */ /* Базова типографіка й вигляд «голих» тегів. Компоненти далі спираються на це й перевизначають лише те, що відрізняється. */ /* Сама сторінка не прокручується — прокрутка живе всередині .main (див. 30-layout.css). Резервувати тут жолоб під смугу не можна: він лежить ЗЗОВНІ , тож топбар і бічна панель не діставали б до краю екрана, а на короткій сторінці там лишалася б порожня смужка фону. */ body { margin: 0; font-family: var(--font-sans); font-size: var(--t-md); line-height: 1.55; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.25; letter-spacing: -0.011em; /* balance — щоб заголовок не лишав одне слово-сироту на другому рядку. */ text-wrap: balance; } h1 { font-size: var(--t-xl); } h2 { font-size: var(--t-lg); margin: var(--s-6) 0 var(--s-3); } h3 { font-size: var(--t-md); margin: var(--s-5) 0 var(--s-2); } h4 { font-size: var(--t-md); margin: var(--s-4) 0 var(--s-2); } p { margin: 0 0 var(--s-3); text-wrap: pretty; } a { color: var(--brand); /* Підкреслення напівпрозоре в спокої й суцільне на ховері: лінк лишається впізнаваним, але не рябить у щільному тексті. */ text-decoration-color: color-mix(in oklch, currentColor 35%, transparent); text-underline-offset: 0.2em; text-decoration-thickness: 1px; } a:hover { text-decoration-color: currentColor; } /* Один фокус-ринг на весь застосунок. :focus-visible, а не :focus — рамка з'являється при навігації клавіатурою, але не після кліку мишею. Прибирати її не можна: без неї з клавіатури працювати неможливо. */ :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); } label { display: block; margin: var(--s-4) 0 var(--s-1); font-weight: 600; font-size: var(--t-md); } ::placeholder { color: var(--ink-subtle); opacity: 1; } code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; } code { padding: 0.1em 0.35em; background: var(--surface-3); border-radius: var(--r-sm); } pre { margin: 0; padding: var(--s-4); overflow-x: auto; font-family: var(--font-mono); font-size: var(--t-cmp); line-height: 1.5; background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); border-radius: var(--r-md); } pre code { padding: 0; background: none; font-size: inherit; } hr { height: 1px; margin: var(--s-5) 0; border: 0; background: var(--border); } ::selection { background: var(--brand-soft); color: var(--ink); } /* Повага до системного «менше руху». Не вимикаємо анімації зовсім, а стискаємо до 0.01ms: так вони лишаються миттєвими, але події transitionend/animationend усе одно спрацьовують, і код, який на них розраховує, не зависає. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } } @layer layout { /* 30-layout.css */ /* Каркас сторінки: бічна панель + топбар + контент. Стан панелі приходить із data-атрибутів на (їх ставить shell.js): data-sidebar="collapsed" — вузька смуга з іконок (широкий екран); data-drawer="open" — панель поверх контенту (вузький екран). Самі атрибути нічого не роблять — уся поведінка описана тут. */ :root { --sidebar-w: 248px; --sidebar-rail: 60px; /* ширина у згорнутому стані — лише під іконки */ --topbar-h: 52px; /* Три ширини контенту: форма (щоб рядок не був завдовжки), звичайна сторінка і на всю ширину — для таблиць. */ --w-form: 680px; --w-app: 1200px; --w-wide: 100%; } .app-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: var(--topbar-h) 1fr; /* Панель займає обидва рядки — тому топбар починається праворуч від неї. */ grid-template-areas: "sidebar topbar" "sidebar main"; /* Рівно на висоту екрана, не min-height: прокручується лише .main, а панель із топбаром лишаються на місці. Так смуга прокрутки опиняється всередині контенту й не забирає собі праву межу каркаса. */ height: 100dvh; } /* Згортання — це просто інша ширина колонки. Решта підлаштовується сама. */ :root[data-sidebar="collapsed"] .app-shell { --sidebar-w: var(--sidebar-rail); } .sidebar { grid-area: sidebar; view-transition-name: sidebar; display: flex; flex-direction: column; /* Висоту дає сітка каркаса; min-height: 0 — щоб вміст не розпирав комірку. Панель принципово не прокручується: власна смуга прокрутки поруч зі смугою контенту читалася як друга сторінка, а навігація має бути одним нерухомим полем, де пункт завжди на тому самому місці. Тому список компактний за розмірами (див. .side-link і @media height нижче) і вміщається цілком; зайве обрізається, а не гортається. */ min-height: 0; overflow: hidden; background: var(--surface); border-right: 1px solid var(--border); } /* Шапка панелі: бренд і кнопка згортання. Заввишки рівно з топбар — лінія під нею продовжує нижню межу топбару в один рівний рядок. */ .sidebar-head { display: flex; flex: none; align-items: center; gap: var(--s-1); height: var(--topbar-h); padding: 0 var(--s-2) 0 var(--s-4); border-bottom: 1px solid var(--border); } .brand { display: flex; /* Займає весь вільний рядок, кнопка лишається притиснутою до правого краю; min-width: 0 — щоб довга назва обрізалась, а не виштовхувала кнопку. */ flex: 1; min-width: 0; align-items: center; gap: var(--s-2); font-size: var(--t-md); font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap; } .brand-name { overflow: hidden; text-overflow: ellipsis; } .collapse-toggle { flex: none; } .brand .ico { color: var(--brand); } .side-nav { flex: 1; min-height: 0; padding: var(--s-2); } /* Підгрупа сервісів: заголовок і пункти під ним (див. shared/base.html). Власних відступів не має — їх задає .side-group. Обгортка потрібна заради згорнутої панелі: там заголовки ховаються, і без неї групи не було б чим розділити (правило нижче, поруч із рештою «згорнутого»). */ .side-group { margin: var(--s-3) var(--s-2) 2px; font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-subtle); } .side-link { /* --h-side ставить base.html інлайном на кожне посилання сервісу. Немає його (Дашборд, розділи адмінки) — беремо брендовий відтінок. */ --side-accent: light-dark( oklch(0.55 0.2 var(--h-side, var(--h-brand))), oklch(0.7 0.16 var(--h-side, var(--h-brand))) ); display: flex; align-items: center; gap: var(--s-2); min-height: 32px; padding: 0 var(--s-2); font-size: var(--t-cmp); font-weight: 600; color: var(--ink-muted); text-decoration: none; white-space: nowrap; border-radius: var(--r-md); border-left: 3px solid transparent; transition: background-color 0.12s, color 0.12s; } .side-link .ico { color: var(--ink-subtle); } /* Запобіжник під назви сервісів: замість того щоб розпирати панель, задовгий підпис обрізається трьома крапками. min-width: 0 обов'язковий — без нього флекс-елемент не стискається менше за свій вміст і обрізання не спрацює. Повну назву видно при наведенні: base.html кладе її в title посилання. */ .side-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .side-link:hover { color: var(--ink); background: var(--surface-3); } .side-link:hover .ico { color: var(--side-accent); } .side-link.active { color: var(--ink); background: var(--surface-3); border-left-color: var(--side-accent); } .side-link.active .ico { color: var(--side-accent); } /* Дуже низьке вікно (ноутбук з панеллю задач, відкрита консоль): панель не прокручується, тож замість смуги прокрутки список просто стає щільнішим. */ @media (max-height: 760px) { .side-link { min-height: 28px; } .side-group { margin-top: var(--s-2); } } /* Бренд у згорнутій панелі ховається цілком: на смузі в 60px він і кнопка згортання поруч не стоять, а сама кнопка потрібніша — без неї панель не розгорнути. На головну з вузької смуги веде пункт «Дашборд». */ :root[data-sidebar="collapsed"] .brand, :root[data-sidebar="collapsed"] .side-label, :root[data-sidebar="collapsed"] .side-group { display: none; } :root[data-sidebar="collapsed"] .sidebar-head { justify-content: center; padding-inline: 0; } /* Заголовків груп у вузькій панелі немає — лишаються самі іконки, і без розділювача вони злилися б в один суцільний стовпчик. Лінія каже те саме, що й напис: далі інша група. */ :root[data-sidebar="collapsed"] .side-section + .side-section { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--border); } :root[data-sidebar="collapsed"] .side-link { justify-content: center; padding-inline: 0; } /* У згорнутій панелі позначка активного пункту переїжджає ліворуч→праворуч: зліва вона зливалася б із краєм екрана, справа — межує з контентом. */ :root[data-sidebar="collapsed"] .side-link { border-left-width: 0; border-right: 3px solid transparent; } :root[data-sidebar="collapsed"] .side-link.active { border-right-color: var(--side-accent); } .topbar { grid-area: topbar; view-transition-name: topbar; /* На широкому екрані топбар і так нерухомий — це рядок сітки. sticky потрібен вузькому екрану, де прокручується сторінка цілком. */ position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-4); background: var(--surface); border-bottom: 1px solid var(--border); } .topbar-spacer { flex: 1; } .icon-btn { display: inline-flex; align-items: center; gap: var(--s-2); justify-content: center; min-width: 34px; min-height: 34px; padding: 0 var(--s-2); font-size: var(--t-cmp); font-weight: 600; color: var(--ink-muted); background: none; border: 1px solid transparent; border-radius: var(--r-md); cursor: pointer; transition: background-color 0.12s, color 0.12s, border-color 0.12s; } .icon-btn:hover { color: var(--ink); background: var(--surface-3); border-color: var(--border); } /* Довгий email обрізаємо трьома крапками — інакше він розпихає топбар. */ .user-name { max-width: 20ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .main { grid-area: main; /* min-width: 0 обов'язковий для grid-елемента: без нього широка таблиця всередині розпирає всю сітку замість того, щоб скролитись. min-height: 0 — те саме по вертикалі, щоб працював overflow нижче. */ min-width: 0; min-height: 0; /* position: relative — не для зсуву, а щоб .main став containing block для своїх абсолютних нащадків. Без цього ними опікується , і overflow нижче їх НЕ обрізає: вони лишаються в області прокрутки документа й тягнуть за собою другу смугу — поруч зі смугою .main. На кожній сторінці таких нащадків десятки: кожен