/* * htelegraf: тёмная тема (v2, по умолчанию). * * Включается классом .dark на : * - кнопкой «Тема» в тулбаре комнаты (galene.js), * - заранее при загрузке (theme-early.js): тема тёмная, если пользователь * явно не выбрал светлую (localStorage htelegraf-theme = 'light'). * * Подключается ПОСЛЕ galene.css / mainpage.css. Внимание: у многих правил * базовой темы фон задан сокращением `background:` (с изображением), такие * места здесь тоже перекрываются сокращением, а не background-color. * * Палитра: фон #232329, панели #1c1c22 / #1a1a20 / #111114, * фирменный фиолетовый #610a86 затемнён до #2b0a3f, * акценты #b79bf0, пузырь чата #2c3f27. */ html.dark { color-scheme: dark; /* контекстное меню (third-party/contextual) */ --contextualMenuBg: #2b2b33; --contextualMenuText: #e8e6ef; --contextualSubMenuBg: #2b2b33; --contextualHover: #3a3a44; } /* --- база --- */ html.dark body { background-color: #232329; color: #e8e6ef; } html.dark ::placeholder { color: #9a95a8; opacity: .8; } /* --- шапка и тулбар --- */ html.dark .navbar { background-color: #2b0a3f; } html.dark .navbar-light .navbar-brand, html.dark .topnav .navbar-brand { color: #f1ecf7; } html.dark .nav-menu .nav-link, html.dark .nav-menu label { color: #e8e6ef; } html.dark .nav-button:hover, html.dark .nav-button:active { background-color: rgba(255, 255, 255, 0.1); } /* --- левая панель участников --- */ html.dark .users-header { background: #2b0a3f; } html.dark #left-sidebar { background: #232329; border-right: 1px solid rgba(255, 255, 255, 0.08); } html.dark #users { color: #e8e6ef; background-color: #232329; border: 1px solid rgba(255, 255, 255, 0.06); } html.dark #users .user-p { border-bottom: 1px solid rgba(255, 255, 255, 0.06); } html.dark #users > div:hover { background-color: #2b2b33; } /* --- основная область и вход --- */ html.dark .app { background-color: #232329; } html.dark .login-container { background-color: #232329; color: #e8e6ef; } html.dark .login-container label, html.dark .login-container .sidenav-label-first { color: #e8e6ef; } html.dark .login-box { background: #1c1c22; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); } @media only screen and (max-device-width: 768px) { html.dark .login-container { background: #232329; } html.dark .login-box { background: transparent; box-shadow: none; } } /* --- чат --- */ html.dark #chat { background-color: #232329; border-right: 4px solid #1a1a20; } html.dark .reply { background-color: #1a1a20; } html.dark .form-reply { background-color: #111114; color: #e8e6ef; border: 1px solid rgba(255, 255, 255, 0.12); } html.dark .message { background: #2c3f27; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); } html.dark .message-content { color: #e8e6ef; } html.dark .message-header { color: #b9b3c9; } html.dark .message-footer, html.dark .message-time { color: #948da8; } html.dark .message-system { background: #1f1f26; color: #c9c4d6; } html.dark .message-sender { background: #1f1f26; } html.dark .message-private { background: #243420; } html.dark .close-chat { color: #9a95a8; } html.dark .close-chat:hover, html.dark .close-chat:active { border-color: rgba(255, 255, 255, 0.25); } /* --- боковая панель настроек --- */ html.dark .sidenav { background-color: #2b0a3f; } html.dark .sidenav-content { background: #232329; color: #e8e6ef; } html.dark .sidenav-header h2, html.dark .sidenav-content h2, html.dark .sidenav legend, html.dark legend { color: #e8e6ef; } html.dark .sidenav label { color: #e8e6ef; } html.dark .sidenav a { color: #b79bf0; } html.dark .sidenav a:hover { color: #d0bdf5; } html.dark .sidenav .closebtn { color: #e8e6ef; } html.dark fieldset { border-color: rgba(255, 255, 255, 0.15); } /* --- формы --- */ html.dark .form-control { color: #e8e6ef; background-color: #1a1a20; border: 1px solid rgba(255, 255, 255, 0.15); } html.dark .select { color: #e8e6ef; background-color: #1a1a20; border: 1px solid rgba(255, 255, 255, 0.15); } html.dark input[type="radio"], html.dark input[type="checkbox"] { accent-color: #610a86; } /* --- диалоги, подписи, тест камеры --- */ html.dark #invite-dialog { background-color: #232329; color: #e8e6ef; border: solid 2px #610a86; } html.dark #invite-dialog input { background-color: #1a1a20; color: #e8e6ef; border: 1px solid rgba(255, 255, 255, 0.15); } html.dark #captions { background-color: rgba(0, 0, 0, 0.75); color: #ffffff; } html.dark #test-fft { background: #1a1a20; } html.dark #test-camera summary { color: #e8e6ef; } /* --- ссылки --- */ html.dark a { color: #b79bf0; } html.dark a:hover { color: #d0bdf5; } /* --- уведомления toastify: текст белый, фон-градиент родной --- */ html.dark .toastify { color: #ffffff; }