/* ======================================== ПЕРЕМЕННЫЕ ЦВЕТОВ ДЛЯ ТЁМНОЙ ТЕМЫ ======================================== */ :root { --bg-primary: #333333; --bg-primary2: #333333; --bg-primary6: #fffcfc; --bg-primary3: #333333; --bg-primary4: #3a3a3a; --bg-secondary: #3a3a3a; --bg-tertiary: #3b3a3a; --bg-button: #444444; --bg-button-hover: #555555; --bg-dropdown: #2d2d2d; --bg-transparent: transparent; --text-primary: #ffffff; --text-primary2: #ffffff; --text-primary3: #333333; --text-primary4: #ffffff; --text-secondary: #cccccc; --text-muted: #aaaaaa; --text-muted2: #dadada; --text-light: #888888; --text-dark: #838383; --text-extra-light: #e0e0e0; --text-label: #b3b3b3; --accent-primary: #3399cc; --accent-primary-hover: #2678a6; --accent-secondary: #55bbbb; --accent-dark: #336699; --accent-light: #4facfe; --accent-extra-light: #66cccc; --border-primary: #444444; --border-secondary: #555555; --border-accent: #3399cc; --border-light: #f0f0f0; --warning: #ffaa44; --warning-bg: rgba(255, 170, 68, 0.1); --error: #ff6b6b; --error-bg: rgba(255, 107, 107, 0.08); --error-border: #ff6644; --error-bg-light: rgba(255, 102, 68, 0.1); --success: #2ecc71; --special-orange: #d35400; --c9-gray: #c9c9c9; --scrollbar-thumb: #7e7e7e; --scrollbar-thumb-hover: #a7a7a7; --scrollbar-thumb-alt: #6e6e6e; --overlay-dark: rgba(0, 0, 0, 0.7); --overlay-dark2: rgba(255, 255, 255, 0.9); --overlay-medium: rgba(0, 0, 0, 0.6); --overlay-light: rgba(0, 0, 0, 0.3); --white-05: rgba(255, 255, 255, 0.05); --white-10: rgba(255, 255, 255, 0.1); --white-20: rgba(255, 255, 255, 0.2); --error-hover: rgba(255, 59, 48, 0.9); --a0-gray: #a0a0a0; --black-pure: #000000; --gray-666: #666666; --gray-9b: #9b9b9b; /* ДОПОЛНИТЕЛЬНЫЕ ЦВЕТА */ /* Фоны */ --bg-modal: #2a2a2a; --bg-modal-header: #333333; --bg-param-item-hover: #4a4a4a; --bg-subscription: #424242; --bg-recording-panel: rgba(30, 30, 30, 0.95); /* Текстовые */ --text-modal-title: #a8a8a8; --text-photo-overlay: #a8a8a8; --text-counter: #9c9c9c; --text-param-value: #d1d1d1; --text-placeholder-dark: #999999; --text-9e9e9e: #9e9e9e; --text-bdbdbd: #bdbdbd; --text-bebebe: #bebebe; --text-clear-icon: #c2c2c2; /* Акценты */ --accent-auth-hover: #3399cc; --accent-glow-light: #a5d8ff; --accent-voice-loading: #8ed6fa; /* Границы */ --border-photo-selected: #66cc99; --border-preview: #555555; --border-preview-hover: #55bbbb; --border-4a4a4a: #4a4a4a; --border-6d6d6d: #6d6d6d; --dropdown-border: #555555; /* Ошибки/удаление */ --error-delete-hover: #ff5555; --error-voice: #f44336; --error-voice-stop-hover: #d32f2f; --error-delete-bg: #dc3545; --error-delete-light: #ff6666; --error-delete-light-hover: #ff8888; /* Прозрачности */ --overlay-photo: rgba(0, 0, 0, 0.8); --overlay-modal: rgba(0, 0, 0, 0.33); --overlay-prompt: rgba(0, 0, 0, 0.9); --accent-transparent-02: rgba(51, 153, 204, 0.2); --accent-transparent-03: rgba(51, 153, 204, 0.2); --accent-transparent-01: rgba(51, 153, 204, 0.1); --accent-transparent-015: rgba(51, 153, 204, 0.15); --accent-transparent-03: rgba(51, 153, 204, 0.3); --error-transparent-01: rgba(255, 0, 0, 0.1); --error-transparent-02: rgba(255, 0, 0, 0.2); --error-transparent-07: rgba(255, 0, 0, 0.7); --white-003: rgba(255, 255, 255, 0.03); --white-015: rgba(255, 255, 255, 0.15); --black-015: rgba(0, 0, 0, 0.15); /* Специальные */ --gradient-photo-overlay: linear-gradient(transparent, rgba(0, 0, 0, 0.8)); } /* ======================================== СВЕТЛАЯ ТЕМА ======================================== */ [data-theme="light"] { /* ===== ОСНОВНЫЕ ФОНЫ ===== */ --bg-primary: #d4d4d4; --bg-primary2: #6b6b6b; --bg-primary6: #6b6b6b; --bg-primary3: #b6b6b6e7; --bg-primary4: #c7c7c7; --bg-secondary: #c7c7c7; --bg-tertiary: #c5c5c5; --bg-button: #b8b8b8; --bg-button-hover: #b0b0b0; --bg-dropdown: #dbdbdb; --bg-transparent: transparent; /* Текстовые цвета (инвертированы) */ --text-primary: #ffffff; --text-primary2: #333333; --text-primary3: #b6b6b6e7; --text-primary4: #7e7e7e; --text-secondary: #4a4a4a; --text-muted: #666666; --text-muted2: #414141; --text-light: #5c5c5c; --text-dark: #7a7a7a; --text-extra-light: #3a3a3a; --text-label: #5a5a5a; /* Акценты (тёмный пыльно-розовый) */ --accent-primary: #a05c82; --accent-primary-hover: #8a4a6e; --accent-secondary: #b87c9f; --accent-dark: #7a3d5e; --accent-light: #c99bb3; --accent-extra-light: #dbb6cb; /* Границы (инвертированы) */ --border-primary: #c0c0c0; --border-secondary: #b0b0b0; --border-accent: #a05c82; --border-light: #2a2a2a; --dropdown-border: #a5a5a5; /* более темный, видимый цвет */ /* Ошибки и предупреждения (без изменений) */ --warning: #ffaa44; --warning-bg: rgba(255, 170, 68, 0.15); --error: #ff6b6b; --error-bg: rgba(255, 107, 107, 0.1); --error-border: #ff6644; --error-bg-light: rgba(255, 102, 68, 0.12); --overlay-dark2: rgba(255, 255, 255, 0.9); /* Остальные цвета */ --success: #27ae60; --special-orange: #d35400; --c9-gray: #3a3a3a; /* Скроллбар (инвертирован) */ --scrollbar-thumb: #9e9e9e; --scrollbar-thumb-hover: #8a8a8a; --scrollbar-thumb-alt: #aaaaaa; /* Оверлеи (светлее) */ --overlay-dark: rgba(156, 156, 156, 0.7); --overlay-medium: rgba(151, 151, 151, 0.6); --overlay-light: rgba(146, 146, 146, 0.3); --white-05: rgba(0, 0, 0, 0.05); --white-10: rgba(0, 0, 0, 0.1); --white-20: rgba(160, 160, 160, 0.815); --error-hover: rgba(255, 59, 48, 0.9); --a0-gray: #5a5a5a; --black-pure: #ffffff; --gray-666: #9a9a9a; --gray-9b: #6a6a6a; /* ДОПОЛНИТЕЛЬНЫЕ ЦВЕТА */ /* Фоны (инвертированы) */ --bg-modal: #e0e0e0; --bg-modal-header: #d4d4d4; --bg-param-item-hover: #c8c8c8; --bg-subscription: #cecece; --bg-recording-panel: rgba(240, 240, 240, 0.95); /* Текстовые (инвертированы) */ --text-modal-title: #5a5a5a; --text-photo-overlay: #5a5a5a; --text-counter: #6a6a6a; --text-param-value: #4a4a4a; --text-placeholder-dark: #6a6a6a; --text-9e9e9e: #6a6a6a; --text-bdbdbd: #4a4a4a; --text-bebebe: #4a4a4a; --text-clear-icon: #4a4a4a; /* Акценты (тёмный пыльно-розовый) */ --accent-auth-hover: #b06a8e; --accent-glow-light: #e6cbd9; --accent-voice-loading: #dbb6cb; /* Границы (инвертированы) */ --border-photo-selected: #66cc99; --border-preview: #b0b0b0; --border-preview-hover: #b87c9f; --border-4a4a4a: #c0c0c0; --border-6d6d6d: #b8b8b8; /* Ошибки/удаление (без изменений) */ --error-delete-hover: #ff5555; --error-voice: #f44336; --error-voice-stop-hover: #d32f2f; --error-delete-bg: #dc3545; --error-delete-light: #ff6666; --error-delete-light-hover: #ff8888; /* Прозрачности для акцентов (пыльно-розовые) */ --overlay-photo: rgba(255, 255, 255, 0.85); --overlay-modal: rgba(255, 255, 255, 0.5); --overlay-prompt: rgba(255, 255, 255, 0.9); --accent-transparent-02: rgba(160, 92, 130, 0.2); --accent-transparent-03: rgba(168, 168, 168, 0.493); --accent-transparent-01: rgb(156, 156, 156); --accent-transparent-015: rgba(160, 92, 130, 0.308); --error-transparent-01: rgba(255, 0, 0, 0.1); --error-transparent-02: rgba(255, 0, 0, 0.2); --error-transparent-07: rgba(255, 0, 0, 0.7); --white-003: rgba(0, 0, 0, 0.03); --white-015: rgba(0, 0, 0, 0.15); --black-015: rgba(255, 255, 255, 0.15); /* Специальные */ --gradient-photo-overlay: linear-gradient(transparent, rgba(255, 255, 255, 0.8)); } /* #ffffff var(--text-primary) #cccccc var(--text-secondary) #aaaaaa var(--text-muted) #888888 var(--text-light) #838383 var(--text-dark) #e0e0e0 var(--text-extra-light) #b3b3b3 var(--text-label) #3399cc var(--accent-primary) #2678a6 var(--accent-primary-hover) #55bbbb var(--accent-secondary) #336699 var(--accent-dark) #4facfe var(--accent-light) #66cccc var(--accent-extra-light) #f0f0f0 var(--border-light) #ffaa44 var(--warning) #ff6b6b var(--error) #ff6644 var(--error-border) #2ecc71 var(--success) #d35400 var(--special-orange) #c9c9c9 var(--c9-gray) #7e7e7e var(--scrollbar-thumb) #a7a7a7 var(--scrollbar-thumb-hover) #6e6e6e var(--scrollbar-thumb-alt) rgba(0, 0, 0, 0.7) var(--overlay-dark) rgba(0, 0, 0, 0.6) var(--overlay-medium) rgba(0, 0, 0, 0.3) var(--overlay-light) rgba(255, 255, 255, 0.05) var(--white-05) rgba(255, 255, 255, 0.1) var(--white-10) rgba(255, 255, 255, 0.2) var(--white-20) rgba(255, 59, 48, 0.9) var(--error-hover) #a0a0a0 var(--a0-gray) #000000 var(--black-pure) #666666 var(--gray-666) #9b9b9b var(--gray-9b) #2a2a2a var(--bg-modal) #a8a8a8 var(--text-modal-title) #9e9e9e var(--text-9e9e9e) #bdbdbd var(--text-bdbdbd) #bebebeff var(--text-bebebe) #c2c2c2 var(--text-clear-icon) #9c9c9c var(--text-counter) #999999 var(--text-placeholder-dark) #d1d1d1 var(--text-param-value) #44aadd var(--accent-auth-hover) #a5d8ff var(--accent-glow-light) #8ed6faff var(--accent-voice-loading) #424242ff var(--bg-subscription) #4a4a4a var(--border-4a4a4a) #4d4d4d var(--bg-param-item-hover) #3b3b3b var(--bg-button) #3d3d3d var(--bg-button-hover) #6d6d6d var(--border-6d6d6d) #66cc99 var(--border-photo-selected) #ff5555 var(--error-delete-hover) #f44336 var(--error-voice) #d32f2f var(--error-voice-stop-hover) #dc3545 var(--error-delete-bg) #ff6666 var(--error-delete-light) #ff8888 var(--error-delete-light-hover) rgba(0, 0, 0, 0.8) var(--overlay-photo) rgba(0, 0, 0, 0.33) var(--overlay-modal) rgba(0, 0, 0, 0.9) var(--overlay-prompt) rgba(51, 153, 204, 0.2) var(--accent-transparent-02) rgba(51, 153, 204, 0.1) var(--accent-transparent-01) rgba(51, 153, 204, 0.15) var(--accent-transparent-015) rgba(51, 153, 204, 0.3) var(--accent-transparent-03) rgba(255, 0, 0, 0.1) var(--error-transparent-01) rgba(255, 0, 0, 0.2) var(--error-transparent-02) rgba(255, 0, 0, 0.7) var(--error-transparent-07) rgba(30, 30, 30, 0.95) var(--bg-recording-panel) rgba(20, 20, 20, 0.95) var(--bg-recording-panel) linear-gradient(transparent, rgba(0, 0, 0, 0.8)) var(--gradient-photo-overlay) */