/* ========================================================== themes.css — оформление раскраски. Подключается ПОСЛЕ style.css. Тема ставится атрибутом data-theme на сервером, без мигания при загрузке. ========================================================== */ body[data-theme="night"] { --ca-bg:#1a1a2e; --ca-panel:#16213e; --ca-btn:#0f3460; --ca-hover:#153d7a; --ca-press:#533483; --ca-accent:#e94560; --ca-text:#e0e0e0; --ca-muted:#9fb4d8; --ca-border:#0f3460; --ca-on-accent:#fff; } body[data-theme="graphite"] { --ca-bg:#1c1c20; --ca-panel:#26262c; --ca-btn:#34343c; --ca-hover:#41414a; --ca-press:#f59e0b; --ca-accent:#f59e0b; --ca-text:#e8e8ea; --ca-muted:#9a9aa5; --ca-border:#34343c; --ca-on-accent:#1c1c20; } body[data-theme="forest"] { --ca-bg:#0e1f1a; --ca-panel:#153029; --ca-btn:#1e4438; --ca-hover:#295c4b; --ca-press:#e8b04b; --ca-accent:#e8b04b; --ca-text:#e4efe9; --ca-muted:#9dc2b2; --ca-border:#1e4438; --ca-on-accent:#0e1f1a; } body[data-theme="lagoon"] { --ca-bg:#0b2027; --ca-panel:#123540; --ca-btn:#1a4d5c; --ca-hover:#246878; --ca-press:#ffb703; --ca-accent:#ffb703; --ca-text:#e3f1f5; --ca-muted:#94bdc9; --ca-border:#1a4d5c; --ca-on-accent:#0b2027; } body[data-theme="twilight"] { --ca-bg:#1d1428; --ca-panel:#2b1d3d; --ca-btn:#3e2a57; --ca-hover:#523873; --ca-press:#f28aa0; --ca-accent:#f28aa0; --ca-text:#ece4f5; --ca-muted:#b3a1c9; --ca-border:#3e2a57; --ca-on-accent:#2b1240; } body[data-theme="parchment"] { --ca-bg:#f4ece0; --ca-panel:#e8dbc8; --ca-btn:#d9c7ab; --ca-hover:#cbb693; --ca-press:#c2410c; --ca-accent:#c2410c; --ca-text:#43382a; --ca-muted:#7d6e58; --ca-border:#cbb693; --ca-on-accent:#fff; } body[data-theme="sakura"] { --ca-bg:#fdf2f4; --ca-panel:#f7dfe4; --ca-btn:#ecc4cd; --ca-hover:#e0abb7; --ca-press:#d1466a; --ca-accent:#d1466a; --ca-text:#4a3339; --ca-muted:#8a6a72; --ca-border:#e0abb7; --ca-on-accent:#fff; } body[data-theme="contrast"] { --ca-bg:#000; --ca-panel:#111; --ca-btn:#1c1c1c; --ca-hover:#333; --ca-press:#ffd400; --ca-accent:#ffd400; --ca-text:#fff; --ca-muted:#ddd; --ca-border:#ffd400; --ca-on-accent:#000; } /* ---------- Применение ---------- Селектор с body[data-theme] специфичнее базового #coloring-app .x, поэтому перебивает его при одинаковом !important. */ body[data-theme], body[data-theme] #coloring-app { background: var(--ca-bg) !important; } body[data-theme] #coloring-app { color: var(--ca-text) !important; } body[data-theme] #coloring-app .ca-header, body[data-theme] #coloring-app .ca-bottom, body[data-theme] #coloring-app .ca-toolbar, body[data-theme] #coloring-app .ca-menu, body[data-theme] #coloring-app .ca-panel { background: var(--ca-panel) !important; border-color: var(--ca-border) !important; } body[data-theme] #coloring-app .ca-title, body[data-theme] #coloring-app .ca-seo-links h2 { color: var(--ca-text) !important; } body[data-theme] #coloring-app .ca-seo-nav a { color: var(--ca-muted) !important; } body[data-theme] #coloring-app .ca-seo-links a { background: var(--ca-btn) !important; color: var(--ca-text) !important; } body[data-theme] #coloring-app .ca-btn, body[data-theme] #coloring-app .ca-hdr-btns #btn-sound { background: var(--ca-btn) !important; color: var(--ca-text) !important; } body[data-theme] #coloring-app .ca-btn:hover, body[data-theme] #coloring-app .ca-hdr-btns #btn-sound:hover { background: var(--ca-hover) !important; } body[data-theme] #coloring-app .ca-btn:active, body[data-theme] #coloring-app .ca-hdr-btns #btn-sound:active { background: var(--ca-press) !important; color: var(--ca-on-accent) !important; } body[data-theme] #coloring-app .ca-color-badge, body[data-theme] #coloring-app .ca-progress i, body[data-theme] #coloring-app .ca-progress-bar i { background: var(--ca-accent) !important; color: var(--ca-on-accent) !important; } /* Светлые темы: белая обводка активного цвета не видна — делаем тёмную */ body[data-theme="parchment"] #coloring-app .ca-color-btn.active, body[data-theme="sakura"] #coloring-app .ca-color-btn.active { border-color: var(--ca-text) !important; box-shadow: 0 0 10px rgba(0,0,0,.25) !important; } /* Контраст: толстые рамки и жирный шрифт — это доступность, а не украшение */ body[data-theme="contrast"] #coloring-app .ca-btn, body[data-theme="contrast"] #coloring-app .ca-hdr-btns #btn-sound { border: 2px solid var(--ca-accent) !important; font-weight: 700 !important; } body[data-theme="contrast"] #coloring-app .ca-color-btn.active { border-color: var(--ca-accent) !important; box-shadow: 0 0 0 3px #000, 0 0 12px var(--ca-accent) !important; } body[data-theme="contrast"] #coloring-app .ca-title { font-weight: 700 !important; } /* ---------- Экран раскрашивания ---------- */ body[data-theme] #coloring-app .ca-canvas-area { background: var(--ca-bg) !important; background-image: none !important; /* в style.css там градиент */ } /* .ca-progress-bar — это заливка, а не дорожка под ней */ body[data-theme] #coloring-app .ca-progress-wrap { background: var(--ca-panel) !important; } body[data-theme] #coloring-app .ca-progress-bar { background: var(--ca-accent) !important; } body[data-theme] #coloring-app .ca-palette { background: transparent !important; } body[data-theme] #coloring-app .ca-undo-btn, body[data-theme] #coloring-app .ca-find-btn { background: var(--ca-btn) !important; color: var(--ca-text) !important; border: 1px solid var(--ca-border) !important; } body[data-theme] #coloring-app .ca-undo-btn:hover, body[data-theme] #coloring-app .ca-find-btn:hover { background: var(--ca-hover) !important; } body[data-theme] #coloring-app .ca-dropdown, body[data-theme] #coloring-app .ca-modal-box, body[data-theme] #coloring-app .ca-tutorial-box { background: var(--ca-panel) !important; color: var(--ca-text) !important; border: 1px solid var(--ca-border) !important; } body[data-theme] #coloring-app .ca-dropdown-item, body[data-theme] #coloring-app .ca-modal-btn, body[data-theme] #coloring-app .ca-tutorial-btn { background: var(--ca-btn) !important; color: var(--ca-text) !important; } body[data-theme] #coloring-app .ca-dropdown-title, body[data-theme] #coloring-app .ca-tutorial-tip { color: var(--ca-muted) !important; } body[data-theme] #coloring-app .ca-zone-hint { background: var(--ca-panel) !important; color: var(--ca-text) !important; } /* ---------- Контраст: рамки должны быть видны везде ---------- */ body[data-theme="contrast"] #coloring-app .ca-progress-wrap { border-bottom: 1px solid var(--ca-accent) !important; } body[data-theme="contrast"] #coloring-app .ca-header, body[data-theme="contrast"] #coloring-app .ca-toolbar { border-color: var(--ca-accent) !important; } body[data-theme="contrast"] #coloring-app .ca-undo-btn, body[data-theme="contrast"] #coloring-app .ca-find-btn { border: 2px solid var(--ca-accent) !important; font-weight: 700 !important; } body[data-theme="contrast"] #coloring-app .ca-title { font-size: 17px !important; } /* ---------- Виджет монет в шапке ---------- */ /* coins.css рисует его золотом по тёмному. На светлых темах золото по светлому не читается, поэтому цвета вынесены в переменные */ body[data-theme] #coloring-app .ca-coin-widget { background: var(--ca-coin-bg, rgba(255,215,0,.12)) !important; border-color: var(--ca-coin-brd, rgba(255,215,0,.35)) !important; color: var(--ca-coin-fg, #FFD700) !important; } body[data-theme] #coloring-app .ca-coin-widget:hover { background: var(--ca-coin-bg-h, rgba(255,215,0,.22)) !important; } body[data-theme] #coloring-app .ca-coin-bar { background: var(--ca-coin-track, rgba(255,255,255,.18)) !important; } body[data-theme="parchment"] { --ca-coin-bg:#fffdf7; --ca-coin-bg-h:#fff6e2; --ca-coin-fg:#9a4b06; --ca-coin-brd:#d9a441; --ca-coin-track:rgba(0,0,0,.12); } body[data-theme="sakura"] { --ca-coin-bg:#fff; --ca-coin-bg-h:#fff0f3; --ca-coin-fg:#a82f4e; --ca-coin-brd:#e0a8b6; --ca-coin-track:rgba(0,0,0,.12); } /* ---------- Окно «Готово» и форма сохранения ---------- */ /* Текст там тоже светлый — на «Пергаменте» и «Сакуре» пропадал */ body[data-theme] #coloring-app .ca-coin-block { border-bottom-color: var(--ca-border) !important; } body[data-theme] #coloring-app .ca-coin-earned, body[data-theme] #coloring-app .ca-coin-goal b, body[data-theme] #coloring-app .ca-coin-code-big, body[data-theme] #coloring-app .ca-coin-code-row b { color: var(--ca-coin-fg, #FFD700) !important; } body[data-theme] #coloring-app .ca-coin-note, body[data-theme] #coloring-app .ca-coin-goal, body[data-theme] #coloring-app .ca-coin-spam, body[data-theme] #coloring-app .ca-coin-consent, body[data-theme] #coloring-app .ca-coin-code-row { color: var(--ca-muted) !important; } body[data-theme] #coloring-app .ca-coin-consent a { color: var(--ca-muted) !important; } body[data-theme] #coloring-app .ca-coin-save-title { color: var(--ca-text) !important; } body[data-theme] #coloring-app .ca-coin-progress, body[data-theme] #coloring-app .ca-coin-code-big { background: var(--ca-coin-track, rgba(255,255,255,.12)) !important; } body[data-theme] #coloring-app .ca-coin-save input[type="email"] { background: var(--ca-bg) !important; color: var(--ca-text) !important; border-color: var(--ca-border) !important; } body[data-theme] #coloring-app .ca-coin-keep > summary, body[data-theme] #coloring-app .ca-coin-copy { color: var(--ca-coin-fg, #FFD700) !important; border-color: var(--ca-coin-brd, rgba(255,215,0,.45)) !important; } /* Выпадающие списки в меню (звук, мелодия, оформление) */ body[data-theme] #coloring-app .ca-dropdown select { background: var(--ca-bg) !important; color: var(--ca-text) !important; border: 1px solid var(--ca-border) !important; } body[data-theme] #coloring-app #ca-sound-settings, body[data-theme] #coloring-app #ca-theme-settings { border-top-color: var(--ca-border) !important; color: var(--ca-text) !important; }