/* ===================================================================== Альтернативные темы оформления. Принцип: ВСЯ красота — на клиенте. Серверный рендер не меняется, дополнительной нагрузки на CPU нет. Темы — это только переопределение CSS-переменных (объявлены в base.html :root) + точечные правки компонентов. Активируется атрибутом data-theme на (переключатель в topbar). Совместимость 1:1: разметка секций, статусы (green/yellow/red), asset-бейджи, модалки и маршруты не дублируются — меняется только вид. Селекторы темы (:root[data-theme="x"] / [data-theme="x"] .foo) специфичнее базовых, поэтому переопределяют их независимо от порядка подключения. ===================================================================== */ /* Плавная смена темы целиком. */ body { transition: background-color 0.3s ease, color 0.3s ease; } /* ───────────────────────────────────────────────────────────────────── 1. ГРАФИТ + НЕОН — тёмная инженерная тема ───────────────────────────────────────────────────────────────────── */ :root[data-theme="dark"] { --bg: #0f141b; --card: #161d27; --primary: #38bdf8; --primary-hover: #0ea5e9; --primary-light: rgba(56, 189, 248, 0.14); --success: #34d399; --success-bg: rgba(52, 211, 153, 0.15); --success-border: rgba(52, 211, 153, 0.40); --warning: #fbbf24; --warning-bg: rgba(251, 191, 36, 0.15); --warning-border: rgba(251, 191, 36, 0.40); --danger: #f87171; --danger-bg: rgba(248, 113, 113, 0.16); --danger-border: rgba(248, 113, 113, 0.45); --text: #e6eef7; --muted: #93a4b8; --border: #283546; } [data-theme="dark"] body { background: radial-gradient(1200px 600px at 80% -10%, rgba(56, 189, 248, 0.08), transparent 60%), var(--bg); } [data-theme="dark"] .topbar { background: #131a24; border-bottom-color: var(--border); } [data-theme="dark"] .card { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); } /* ───────────────────────────────────────────────────────────────────── 2. BLUEPRINT — чертёж (сетка + циан по тёмно-синему) ───────────────────────────────────────────────────────────────────── */ :root[data-theme="blueprint"] { --bg: #0b1f3a; --card: #0e2747; --primary: #5fd0ff; --primary-hover: #38bdf8; --primary-light: rgba(95, 208, 255, 0.14); --success: #5eead4; --success-bg: rgba(94, 234, 212, 0.14); --success-border: rgba(94, 234, 212, 0.40); --warning: #fcd34d; --warning-bg: rgba(252, 211, 77, 0.14); --warning-border: rgba(252, 211, 77, 0.40); --danger: #fca5a5; --danger-bg: rgba(252, 165, 165, 0.16); --danger-border: rgba(252, 165, 165, 0.45); --text: #dbeafe; --muted: #8fb3da; --border: #1e3a5f; } /* Чертёжная сетка — чистый CSS-градиент, без картинок и без сервера. */ [data-theme="blueprint"] body { background-color: var(--bg); background-image: linear-gradient(rgba(95, 208, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(95, 208, 255, 0.07) 1px, transparent 1px); background-size: 26px 26px; } [data-theme="blueprint"] .topbar { background: rgba(11, 31, 58, 0.92); border-bottom-color: var(--border); } [data-theme="blueprint"] .topbar-brand, [data-theme="blueprint"] .card-title, [data-theme="blueprint"] h1 { letter-spacing: 0.6px; } [data-theme="blueprint"] .card { box-shadow: 0 0 0 1px rgba(95, 208, 255, 0.06), 0 10px 28px rgba(0, 0, 0, 0.4); } /* ───────────────────────────────────────────────────────────────────── 3. БУМАГА И ПЕЧАТЬ — тёплый скевоморфизм документа ───────────────────────────────────────────────────────────────────── */ :root[data-theme="paper"] { --bg: #ece3d2; --card: #fbf7ee; --primary: #8a5a2b; --primary-hover: #6f4720; --primary-light: rgba(138, 90, 43, 0.08); --success: #2f7d4f; --success-bg: #e7f3ea; --success-border: #b7dcc2; --warning: #b9791b; --warning-bg: #f6ecd6; --warning-border: #e6cf9e; --danger: #b3402f; --danger-bg: #f6e3df; --danger-border: #e3b3aa; --text: #3a3024; --muted: #8a7c63; --border: #e0d4bd; } /* Лёгкая «бумажная» зернистость + светлая виньетка. */ [data-theme="paper"] body { background-color: var(--bg); background-image: radial-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px); background-size: 4px 4px; } [data-theme="paper"] .topbar { background: #f3ecdd; border-bottom-color: var(--border); } [data-theme="paper"] .card { box-shadow: 0 2px 0 rgba(0, 0, 0, 0.04), 0 8px 22px rgba(80, 60, 30, 0.10); } /* Статусные бейджи как круглые «печати». */ [data-theme="paper"] .section-badge { letter-spacing: 0.3px; text-transform: uppercase; font-size: 11px; } /* ───────────────────────────────────────────────────────────────────── 4. HUD / ПУЛЬТ — тёмный командный центр, неон + моноширинные акценты ───────────────────────────────────────────────────────────────────── */ :root[data-theme="hud"] { --bg: #06090f; --card: #0b121b; --primary: #22d3ee; --primary-hover: #06b6d4; --primary-light: rgba(34, 211, 238, 0.14); --success: #4ade80; --success-bg: rgba(74, 222, 128, 0.14); --success-border: rgba(74, 222, 128, 0.40); --warning: #facc15; --warning-bg: rgba(250, 204, 21, 0.14); --warning-border: rgba(250, 204, 21, 0.40); --danger: #fb7185; --danger-bg: rgba(251, 113, 133, 0.16); --danger-border: rgba(251, 113, 133, 0.45); --text: #d7f8ff; --muted: #6b8a99; --border: #16303a; } [data-theme="hud"] body { background: radial-gradient(900px 500px at 100% 0%, rgba(34, 211, 238, 0.07), transparent 55%), var(--bg); } [data-theme="hud"] .topbar { background: #08111a; border-bottom-color: var(--border); } [data-theme="hud"] .topbar-brand, [data-theme="hud"] .card-title, [data-theme="hud"] h1, [data-theme="hud"] .badge, [data-theme="hud"] .section-badge { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.5px; } [data-theme="hud"] .card { box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.07), 0 10px 30px rgba(0, 0, 0, 0.6); } /* ───────────────────────────────────────────────────────────────────── 5. SOFT — спокойный минимал в духе iOS (крупные радиусы, мягкие тени) ───────────────────────────────────────────────────────────────────── */ :root[data-theme="soft"] { --bg: #f2f3f7; --card: #ffffff; --primary: #0a84ff; --primary-hover: #0060df; --primary-light: rgba(10, 132, 255, 0.08); --text: #1c1c1e; --muted: #8e8e93; --border: #e7e9ee; --radius: 18px; } [data-theme="soft"] .topbar { background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: rgba(0, 0, 0, 0.06); } [data-theme="soft"] .card { border: none; box-shadow: 0 10px 30px rgba(17, 24, 39, 0.07); } [data-theme="soft"] .btn { border-radius: 14px; } [data-theme="soft"] .field input[type="text"], [data-theme="soft"] .field input[type="date"], [data-theme="soft"] .field input[type="number"], [data-theme="soft"] .field select, [data-theme="soft"] .field textarea { border-radius: 12px; background: #f7f8fa; } /* ───────────────────────────────────────────────────────────────────── 6. ПОЛЕВОЙ — высокий контраст, крупные элементы (планшет / яркий свет) ───────────────────────────────────────────────────────────────────── */ :root[data-theme="field"] { --bg: #ffffff; --card: #ffffff; --primary: #1d4ed8; --primary-hover: #1e40af; --primary-light: rgba(29, 78, 216, 0.08); --success: #15803d; --warning: #b45309; --danger: #b91c1c; --text: #000000; --muted: #1f2937; --border: #9ca3af; } [data-theme="field"] body { font-size: 17px; } [data-theme="field"] .field label { font-size: 14px; color: #111827; font-weight: 600; } [data-theme="field"] .field input[type="text"], [data-theme="field"] .field input[type="date"], [data-theme="field"] .field input[type="number"], [data-theme="field"] .field select, [data-theme="field"] .field textarea { font-size: 16px; padding: 11px 14px; border-width: 2px; } [data-theme="field"] .btn { font-size: 16px; padding: 14px 34px; } [data-theme="field"] .section-toggle { border-left-width: 8px; font-size: 16px; } /* ===================================================================== ОБЩИЕ ФИКСЫ ДЛЯ ТЁМНЫХ ТЕМ Базовые инпуты используют background:var(--bg), но не задают color, из-за чего на тёмном фоне текст был бы чёрным. Принудительно задаём контраст. ===================================================================== */ [data-theme="dark"] .field input, [data-theme="dark"] .field select, [data-theme="dark"] .field textarea, [data-theme="blueprint"] .field input, [data-theme="blueprint"] .field select, [data-theme="blueprint"] .field textarea, [data-theme="hud"] .field input, [data-theme="hud"] .field select, [data-theme="hud"] .field textarea { background: rgba(0, 0, 0, 0.25); color: var(--text); border-color: var(--border); } [data-theme="dark"] .field input::placeholder, [data-theme="blueprint"] .field input::placeholder, [data-theme="hud"] .field input::placeholder { color: var(--muted); } /* Выпадающие