/* =========================================================================== Общая оболочка: палитра и базовые правила. Зачем отдельным файлом. Страниц у приложения три, и раньше у каждой была своя палитра: вход — светло-серая с синей кнопкой, «Занято» — ещё одна светлая, само приложение — тёмный терминал с оранжевым. Человек, заходящий по ссылке снаружи, видел три разных продукта подряд. Теперь цвета живут здесь, а страницы их только используют. Файл отдаётся с самого приложения, без интернета и CDN: `/static/shell.css` открыт и до входа по паролю, и при занятом замке — иначе страница входа осталась бы без стилей ровно тогда, когда она нужна. Что здесь есть: переменные обеих тем, сброс, шрифт страницы, кнопки, поля, ссылки, пилюли, баннеры и видимый фокус с клавиатуры. Всё остальное — шапка, карточки, таблицы, зона перетаскивания — осталось в шаблонах. ========================================================================= */ /* ───────────────────────────────────────────────────────── тёмная схема «Терминал»: почти чёрная подложка, сигнальный оранжевый, прямые углы, плотные строки. Собрано под складской компьютер: там экран стоит боком к окну, и на светлом фоне цифры приходится угадывать сквозь блик. color-scheme:dark перекрашивает то, что нам не подчиняется: выпадающий список, полосы прокрутки, календарь. Без него выпадашка остаётся белой и бьёт по глазам ровно в тот момент, когда её открыли. */ :root{ color-scheme:dark; --bg:#0a0a0b; /* фон страницы */ --card:#101012; /* карточка */ --field:#17181b; /* поле ввода, чип, ненажатая кнопка */ --line:#2c2d31; /* линии и рамки */ --ink:#f2f0ec; /* текст */ --muted:#8b8b87; /* подписи */ --accent:#ff9e2c; /* акцент: кнопки, ссылки, текущий шаг */ --accent-ink:#180f02; /* текст на акценте */ --accent-soft:#2a1c08; /* заливка под акцентом */ --accent-line:#4a3410; --ok:#4fc98a; --ok-bg:#0f241b; --ok-line:#1d4234; --warn:#e3c04e; --warn-bg:#241f0e; --warn-line:#453b1b; --bad:#ff5a5f; --bad-bg:#261315; --bad-line:#4a2225; /* Текст — IBM Plex Sans, цифры и коды — IBM Plex Mono. Обе с кириллицей, у обеих перечёркнутый ноль и единица с засечкой: 0 и О, 1 и l на складе путают, и стоит это приёмки, а не вкуса. Гарнитуры подключены в ; не загрузились — подхватываются системные, вёрстка не едет. */ --ui:"IBM Plex Sans",-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; --num:"IBM Plex Mono",ui-monospace,Consolas,"Courier New",monospace; --accent-hover:#ffad4e; --shadow:#000; --radius:4px; } /* Светлая тема. Тот же набор переменных — ни один компонент об этом не знает. Оранжевый на белом нечитаем, поэтому здесь он тёмнее на три ступени: цвет тот же по семье, контраст поднят до нормы. Выбор хранит браузер, сервер о теме не знает и в разметке она не участвует. */ :root[data-theme="light"]{ color-scheme:light; --bg:#f4f4f2; --card:#ffffff; --field:#f7f7f4; --line:#dfdedb; --ink:#17181a; --muted:#6c6c67; --accent:#b45309; --accent-ink:#ffffff; --accent-soft:#fdf3e3; --accent-line:#eccb95; --accent-hover:#94430a; --ok:#15803d; --ok-bg:#e9f5ec; --ok-line:#bfe3ca; --warn:#9a5b06; --warn-bg:#fdf3e3; --warn-line:#f0d3a0; --bad:#b3261e; --bad-bg:#fdeceb; --bad-line:#f3c2bf; --shadow:rgba(21,24,29,.35); } /* ─────────────────────────────────────────────────────────── общее для всех */ *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink);font:14.5px/1.55 var(--ui)} ::selection{background:var(--accent);color:var(--accent-ink)} a{color:var(--accent)} select,button,input[type=text],input[type=search],input[type=password],textarea{ font:inherit;font-size:14px;padding:7px 10px;border:1px solid var(--line); border-radius:var(--radius);background:var(--field);color:var(--ink)} input::placeholder{color:var(--muted)} input[type=checkbox],input[type=radio]{accent-color:var(--accent)} button{background:var(--accent);color:var(--accent-ink);border-color:var(--accent); cursor:pointer;font-weight:600} button:hover{background:var(--accent-hover);border-color:var(--accent-hover)} button.ghost{background:var(--field);color:var(--ink);border-color:var(--line);font-weight:400} button.ghost:hover{background:var(--field);border-color:var(--accent);color:var(--accent)} button:disabled{opacity:.4;cursor:not-allowed} button:disabled:hover{background:var(--accent);border-color:var(--accent)} button.ghost:disabled:hover{background:var(--field);border-color:var(--line);color:var(--ink)} .muted{color:var(--muted)} .pill{display:inline-block;padding:2px 8px;border-radius:var(--radius); font:500 11.5px/1.55 var(--num);letter-spacing:.01em;white-space:nowrap; border:1px solid transparent} .pill.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)} .pill.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)} .pill.bad{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-line)} .pill.neutral{background:var(--field);color:var(--muted);border-color:var(--line)} /* Полоса слева: род сообщения читается раньше, чем прочитан текст. */ .banner{border-radius:var(--radius);padding:11px 15px;margin-bottom:14px;font-size:13.5px; border:1px solid transparent;border-left-width:3px} .banner.ok{background:var(--ok-bg);border-color:var(--ok-line);border-left-color:var(--ok);color:var(--ok)} .banner.warn{background:var(--warn-bg);border-color:var(--warn-line);border-left-color:var(--warn);color:var(--warn)} .banner.bad{background:var(--bad-bg);border-color:var(--bad-line);border-left-color:var(--bad);color:var(--bad)} .banner.info{background:var(--accent-soft);border-color:var(--accent-line); border-left-color:var(--accent);color:var(--accent)}