/* ================================================================ SichAdAnalize — Design Tokens Единый источник правды для всех цветов, отступов и стилей. ИСПОЛЬЗОВАНИЕ: Подключите этот файл ПЕРВЫМ в каждом шаблоне: ЗАМЕНА ХАРДКОДА: Вместо: background: #0d1117; Пишите: background: var(--bg); ТЕМЫ: Тёмная (дефолт): применяется автоматически к :root Светлая: добавьте атрибут data-theme="light" на ================================================================ */ /* ── ТЁМНАЯ ТЕМА (дефолт) ── */ :root { /* --- Фоны --- */ --bg: #0d1117; /* основной фон страницы */ --bg-2: #161b22; /* сайдбар, карточки, панели */ --bg-3: #1c2128; /* хедеры карточек, ховер-строки */ --bg-overlay: #21262d; /* модалки, всплывающие панели */ /* --- Границы --- */ --border: #30363d; /* основная граница */ --border-muted:#21262d; /* мягкая граница (разделители) */ --border-focus:#58a6ff; /* граница при фокусе input */ /* --- Текст --- */ --text: #e6edf3; /* основной текст */ --text-muted: #8b949e; /* второстепенный текст, лейблы */ --text-subtle: #6e7681; /* плейсхолдеры, метки */ --text-on-dark:#ffffff; /* текст на цветных кнопках */ /* --- Акцент (синий) --- */ --accent: #58a6ff; /* ссылки, фокус, интерактивные эл. */ --accent-bg: rgba(31, 111, 235, 0.15); /* фон с акцентом */ --accent-hover:#79c0ff; /* ховер-состояние акцента */ /* --- Семантические цвета прибыли/статуса --- */ --success: #3fb950; /* положительная прибыль, ОК */ --success-bg: rgba(63, 185, 80, 0.12); --success-border: rgba(63, 185, 80, 0.3); --warn: #d29922; /* средняя прибыль, предупреждение */ --warn-bg: rgba(210, 153, 34, 0.12); --warn-border: rgba(210, 153, 34, 0.3); --danger: #f85149; /* убыток, ошибка */ --danger-bg: rgba(248, 81, 73, 0.12); --danger-border: rgba(248, 81, 73, 0.3); /* --- Тиры предметов (Albion-специфика) --- */ --tier-t2: #95a5a6; --tier-t3: #2ecc71; --tier-t4: #3498db; --tier-t5: #e74c3c; --tier-t6: #f39c12; --tier-t7: #f1c40f; --tier-t8: #ecf0f1; /* --- Зачарования --- */ --enchant-0: #6e7681; --enchant-1: #2ecc71; --enchant-2: #00d2ff; --enchant-3: #9b59b6; --enchant-4: #ffd700; /* --- Навбар --- */ --nav-bg: #161b22; --nav-border: #30363d; --nav-text: #e6edf3; --nav-hover-bg:#21262d; /* --- Инпуты --- */ --input-bg: #0d1117; --input-border:#30363d; --input-text: #e6edf3; --input-placeholder: #6e7681; /* --- Тени --- */ --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6); --shadow-dropdown: 0 4px 20px rgba(0, 0, 0, 0.5); /* --- Радиусы --- */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; --radius-pill: 100px; /* --- Отступы --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; /* --- Типографика --- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; --font-size-xs: 12px; --font-size-sm: 13px; --font-size-md: 14px; /* базовый размер страницы */ --font-size-lg: 16px; --font-size-xl: 18px; /* --- Переходы --- */ --transition: 150ms ease; } /* ── СВЕТЛАЯ ТЕМА ── */ [data-theme="light"] { --bg: #f6f8fa; --bg-2: #ffffff; --bg-3: #f0f4ff; --bg-overlay: #ffffff; --border: #d0d7de; --border-muted:#e1e7ef; --border-focus:#0969da; --text: #1f2328; --text-muted: #57606a; --text-subtle: #8c959f; --text-on-dark:#ffffff; --accent: #0969da; --accent-bg: rgba(9, 105, 218, 0.1); --accent-hover:#0550ae; --success: #1a7f37; --success-bg: rgba(26, 127, 55, 0.1); --success-border: rgba(26, 127, 55, 0.3); --warn: #9a6700; --warn-bg: rgba(154, 103, 0, 0.1); --warn-border: rgba(154, 103, 0, 0.3); --danger: #cf222e; --danger-bg: rgba(207, 34, 46, 0.1); --danger-border: rgba(207, 34, 46, 0.3); --nav-bg: #ffffff; --nav-border: #d0d7de; --nav-text: #1f2328; --nav-hover-bg:#f6f8fa; --input-bg: #ffffff; --input-border:#d0d7de; --input-text: #1f2328; --input-placeholder: #8c959f; --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.15); --shadow-dropdown: 0 4px 20px rgba(0, 0, 0, 0.15); } /* ================================================================ БАЗОВЫЕ СТИЛИ — применяются в обеих темах Подключите tokens.css вместо разрозненных inline-стилей ================================================================ */ *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--font-sans); font-size: var(--font-size-md); background: var(--bg); color: var(--text); margin: 0; } /* --- Инпуты --- */ input, select, textarea { font-family: var(--font-sans); font-size: var(--font-size-sm); background: var(--input-bg); border: 1px solid var(--input-border); color: var(--input-text); border-radius: var(--radius-md); padding: 5px 8px; transition: border-color var(--transition), box-shadow var(--transition); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--accent-bg); } input::placeholder, textarea::placeholder { color: var(--input-placeholder); } /* --- Скроллбар --- */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); } * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } /* --- Утилиты цвета прибыли --- */ .profit-positive, .text-profit-up { color: var(--success) !important; } .profit-medium, .text-profit-mid { color: var(--warn) !important; } .profit-negative, .text-profit-down { color: var(--danger) !important; } /* --- Бейджи тиров --- */ .tier-t2 { background: var(--tier-t2); color: #000; } .tier-t3 { background: var(--tier-t3); color: #000; } .tier-t4 { background: var(--tier-t4); color: #fff; } .tier-t5 { background: var(--tier-t5); color: #fff; } .tier-t6 { background: var(--tier-t6); color: #000; } .tier-t7 { background: var(--tier-t7); color: #000; } .tier-t8 { background: var(--tier-t8); color: #000; }