/* ============================================================ themes.css — цветовые темы оформления web-консоли. Управляется переключателем (static/theme.js). Выбранная тема хранится в localStorage, атрибут data-theme ставится на . ============================================================ */ /* === Изумруд (по умолчанию, исходный вид) === */ :root, html[data-theme="green"] { --accent: #00e676; --accent-2: #00c853; --accent-soft: #69f0ae; --accent-rgb: 0, 230, 118; --on-accent: #000000; --bg: #0d0d0d; --scroll-track: #1a1a1a; --neutral: #333333; --c-text: #e0e0e0; --c-dim: #888888; --c-soft: #666666; --c-faint: #555555; --c-muted: #444444; --panel-rgb: 30, 30, 30; --thead-rgb: 37, 37, 37; --row-hover-rgb: 40, 40, 40; --row-active-rgb: 50, 50, 50; --row-border-rgb: 45, 45, 45; --border-rgb: 51, 51, 51; --border2-rgb: 68, 68, 68; --overlay-bg: rgba(20, 20, 20, 0.9); --input-bg: rgba(0, 0, 0, 0.4); --input-bg-focus: rgba(0, 0, 0, 0.6); } /* === Неон (сине-голубой) === */ html[data-theme="blue"] { --accent: #00b0ff; --accent-2: #0091ea; --accent-soft: #40c4ff; --accent-rgb: 0, 176, 255; --on-accent: #000000; } /* === Плазма (фиолетовый) === */ html[data-theme="purple"] { --accent: #b388ff; --accent-2: #7c4dff; --accent-soft: #d1c4ff; --accent-rgb: 179, 136, 255; --on-accent: #ffffff; } /* === Магма (оранжевый) === */ html[data-theme="orange"] { --accent: #ffab40; --accent-2: #f57c00; --accent-soft: #ffe0b2; --accent-rgb: 255, 171, 64; --on-accent: #000000; } /* === Роза (малиново-розовый) === */ html[data-theme="rose"] { --accent: #ff4081; --accent-2: #f50057; --accent-soft: #ff80ab; --accent-rgb: 255, 64, 129; --on-accent: #ffffff; } /* === Светлая === */ html[data-theme="light"] { --accent: #00a854; --accent-2: #00853f; --accent-soft: #35c26f; --accent-rgb: 0, 168, 84; --on-accent: #ffffff; --bg: #eef1f6; --scroll-track: #dfe3ec; --neutral: #cfd5e0; --c-text: #1f2430; --c-dim: #4c566a; --c-soft: #667085; --c-faint: #8791a4; --c-muted: #a3adbd; --panel-rgb: 255, 255, 255; --thead-rgb: 242, 244, 248; --row-hover-rgb: 244, 246, 250; --row-active-rgb: 230, 233, 240; --row-border-rgb: 227, 230, 236; --border-rgb: 150, 156, 166; --border2-rgb: 193, 198, 207; --overlay-bg: rgba(250, 251, 253, 0.9); --input-bg: #ffffff; --input-bg-focus: #ffffff; } /* === Тонкая настройка светлой темы === */ html[data-theme="light"] ::selection { color: #0d0d0d; } html[data-theme="light"] .logout-link { color: #c62828; border-color: rgba(198, 40, 40, 0.6); } html[data-theme="light"] .logout-link:hover { background: #c62828; color: #ffffff; } html[data-theme="light"] .del-btn { color: #c62828; border-color: rgba(198, 40, 40, 0.5); } html[data-theme="light"] .del-btn:hover { background: rgba(198, 40, 40, 0.1); border-color: #c62828; box-shadow: 0 0 8px rgba(198, 40, 40, 0.15); } html[data-theme="light"] .rename-btn { color: #0277bd; border-color: rgba(2, 119, 189, 0.5); } html[data-theme="light"] .rename-btn:hover { background: rgba(2, 119, 189, 0.1); border-color: #0277bd; box-shadow: 0 0 8px rgba(2, 119, 189, 0.15); } html[data-theme="light"] .error-message { color: #c62828; background: rgba(198, 40, 40, 0.07); border-color: rgba(198, 40, 40, 0.35); } /* === Переключатель тем (виджет) === */ .theme-picker { position: fixed; bottom: 18px; right: 18px; z-index: 9998; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .theme-picker-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(var(--border2-rgb), 0.9); background: rgba(var(--panel-rgb), 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--c-text); font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); transition: transform 0.2s ease, box-shadow 0.2s ease; touch-action: manipulation; } .theme-picker-btn:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); } .theme-picker-btn:active { transform: scale(0.95); } .theme-picker-menu { position: absolute; bottom: 58px; right: 0; min-width: 215px; background: rgba(var(--panel-rgb), 0.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(var(--border-rgb), 0.7); border-radius: 14px; padding: 8px; display: none; flex-direction: column; gap: 2px; box-shadow: 0 14px 38px rgba(0, 0, 0, 0.45); transform-origin: bottom right; animation: themeMenuIn 0.18s ease-out; } .theme-picker-menu.show { display: flex; } @keyframes themeMenuIn { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .theme-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: none; background: none; border-radius: 9px; cursor: pointer; color: var(--c-text); font-size: 13px; font-weight: 600; text-align: left; transition: background 0.15s ease; font-family: inherit; } .theme-option:hover { background: rgba(var(--border-rgb), 0.35); } .theme-option.active { background: rgba(var(--accent-rgb), 0.16); color: var(--accent); } .theme-option.active::after { content: '✓'; margin-left: auto; font-weight: 800; } .theme-swatch { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 1px solid rgba(127, 127, 127, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } .theme-name { flex: 1; } /* Компактнее на мобильных */ @media (max-width: 480px) { .theme-picker { bottom: 14px; right: 14px; } .theme-picker-btn { width: 44px; height: 44px; font-size: 18px; } .theme-picker-menu { min-width: 190px; } }