/* * Theme "dark_purple" - The task page, the answer form, bonuses, hints, inventory. * * One of the parts css/theme/dark_purple/ is split into, by the screen each token * serves; the screens are the ones section 0 of css/style_game_common.css * marks its groups with, and the design studio names its slots with. * A theme is a delta: what is not here keeps the default value. * * The game screen supports two modes: * - Day Mode (:root): Clean, crisp light surfaces on the task card and answer form. * - Night Mode (:root[data-theme="dark"]): Deep dark canvas with high-visibility accents. */ :root { /* --- Image zoom -------------------------------------------------------- */ --qeng-zoom-backdrop: rgba(0, 0, 0, 0.75); /* --- How a task counts ------------------------------------------------- */ --qeng-task-pause-bg: #f4f0fe; } body.game { /* --- The game page (Day mode - light) ---------------------------------- */ --qeng-game-bg: #ffffff; --qeng-game-text: #202022; --qeng-surface-bg: #ffffff; --qeng-surface-warm-bg: #f4f0fe; --qeng-game-service-bg: #f2f0f4; --qeng-game-border: #d8d6db; --qeng-task-header-bg: #f4f0fe; --qeng-text: #202022; --qeng-text-contrast: #202022; --qeng-text-on-surface: #202022; --qeng-text-muted: #56555a; --qeng-dropdown-bg: #ffffff; --qeng-dropdown-text: #202022; --qeng-dropdown-border: #d8d6db; --qeng-switch-bg: #e0dee3; --qeng-switch-border: #d8d6db; --qeng-switch-thumb: #ffffff; --qeng-switch-active-bg: #6e56cf; --qeng-switch-active-border: #56468b; --qeng-switch-active-thumb: #ffffff; --qeng-max-time: #56468b; --qeng-answers-bar-bg: #f2f0f4; --qeng-menu-button: #202022; --qeng-menu-button-hover: #6e56cf; --qeng-progress-bg: #faf9fb; --qeng-awards-bg: #ffc53d; --qeng-awards-gradient: linear-gradient(157deg, rgb(255, 232, 150) 0%, rgb(224, 168, 0) 100%); --qeng-awards-text: #202022; --qeng-level-closed-bg: #6e56cf; --qeng-task-status-lost: #b91c40; --qeng-task-canceled-bg: #f4f0fe; --qeng-drag-spot-bg: #f4f0fe; --qeng-drag-spot-text: #202022; --qeng-link: #56468b; --qeng-link-hover: #372a60; --qeng-game-bar-link: #56468b; --qeng-game-bar-border: #d8d6db; --qeng-progress-bg: #f4f0fe; --qeng-progress-text: #202022; --qeng-bs-danger: #b91c40; --qeng-bs-secondary: #56468b; /* Обводка тоже дневная: светлая сиреневая из _base.css рассчитана на тёмный фон темы и на белом дневной игры давала 2.1:1. */ --qeng-bs-secondary-outline: #5b47a8; /* И янтарь дневной: светлый из _base.css рассчитан на тёмный фон темы, а здесь фон белый - 1.5:1. */ --qeng-bs-warning: #946400; --qeng-bs-primary: #56468b; --qeng-bs-info: #007a8c; --qeng-code-text: #56468b; --qeng-inner-rule: #e0dee3; --qeng-hint-block-border: #d8d6db; --qeng-hint-title: #646367; --qeng-hint-open: #202022; --qeng-hint-open-name: #6e56cf; --qeng-codes-border: #d8d6db; --qeng-codes-title: #6e56cf; --qeng-codes-bg: #ffffff; --qeng-bonus-border: #d8d6db; --qeng-bonus-solved-bg: #e6f7ed; --qeng-bonus-penalty-bg: #feeaed; --qeng-bonus-timeout-bg: #f4f0fe; --qeng-bonus-plus: #147257; --qeng-bonus-minus: #b91c40; /* Slightly deeper than Jade 9: a bonus name is printed bold on the pale plates above (#e6f7ed, #feeaed), and there the lighter shade read 4.2:1 - under the 4.5 a 14px caption needs. */ --qeng-answer-right: #1B7358; --qeng-answer-wrong: #ca244d; --qeng-answer-repeat: #6550b9; --qeng-answer-panel-bg: rgba(32, 32, 34, 0.88); --qeng-answer-panel-border: #6e56cf 1px solid; --qeng-answer-field-bg: #ffffff; --qeng-answer-field-text: #202022; --qeng-answer-field-family: var(--qeng-font-family); --qeng-answer-field-size: 130%; --qeng-answer-field-line-height: normal; --qeng-answer-field-radius: var(--qeng-radius-sm); --qeng-monitor-bg: rgba(32, 32, 34, 0.88); --qeng-monitor-border: #d8d6db; --qeng-monitor-link-hover: #e2ddfe; --qeng-monitor-repeat: #baa7ff; --qeng-monitor-user: #ffc53d; /* --- Inventory (Day mode) ---------------------------------------------- */ --qeng-inventory-accent: #ffc53d; --qeng-inventory-accent-glow: rgba(255, 197, 61, 0.7); --qeng-inventory-slot-bg: #f2f0f4; --qeng-inventory-slot-border: #d8d6db; --qeng-inventory-selected: #6e56cf; } :root[data-theme="dark"], :root[data-theme="dark"] body.game, body.game[data-theme="dark"] { /* --- The game page (Night mode - dark) --------------------------------- */ --qeng-game-bg: #121113; --qeng-game-text: #eeeef0; --qeng-surface-bg: #1a191b; --qeng-surface-warm-bg: #232225; --qeng-game-service-bg: #1a191b; --qeng-game-border: #3c393f; --qeng-task-header-bg: #1a191b; --qeng-task-header-shadow: none; --qeng-text: #eeeef0; --qeng-text-contrast: #ffffff; --qeng-text-on-surface: #eeeef0; --qeng-text-muted: #b5b2bc; --qeng-dropdown-bg: #181719; --qeng-dropdown-text: #eeeef0; --qeng-dropdown-border: rgba(186, 167, 255, 0.25); --qeng-switch-bg: #121113; --qeng-switch-border: #3c393f; --qeng-switch-thumb: #b5b2bc; --qeng-switch-active-bg: #6e56cf; --qeng-switch-active-border: #56468b; --qeng-switch-active-thumb: #ffffff; --qeng-answers-bar-bg: #1a191b; --qeng-drag-spot-bg: #291f43; --qeng-drag-spot-text: #eeeef0; --qeng-task-pause-bg: #291f43; --qeng-task-canceled-bg: #291f43; --qeng-link: #baa7ff; --qeng-link-hover: #e2ddfe; --qeng-menu-button: #eeeef0; --qeng-menu-button-hover: #baa7ff; --qeng-inner-rule-style: none none none none; --qeng-hint-block-border-style: none none none; --qeng-codes-padding: 16px 0 0 0; --qeng-codes-border-style: none; --qeng-codes-radius: 0; --qeng-codes-title: #ffd60a; --qeng-hint-open-name: #ffd60a; --qeng-hint-open-name-weight: bold; --qeng-max-time: #ffc53d; --qeng-linkspan-text: #eeeef0; --qeng-hint-title: #b5b2bc; --qeng-hint-open: #eeeef0; --qeng-hint-open-flash-from: var(--qeng-game-bg); --qeng-hint-open-flash-to: #ffd60a; --qeng-codes-bg: var(--qeng-game-bg); --qeng-codes-border: #3c393f; --qeng-bonus-border: #49474e; --qeng-bonus-solved-bg: #0f2e22; --qeng-bonus-penalty-bg: #3a141e; --qeng-bonus-timeout-bg: #1e1517; --qeng-bonus-plus: var(--qeng-plus-on-overlay); --qeng-bonus-minus: var(--qeng-minus-on-overlay); --qeng-answer-right: var(--qeng-plus-on-overlay); --qeng-answer-wrong: var(--qeng-minus-on-overlay); --qeng-answer-repeat: var(--qeng-repeat-on-overlay); --qeng-answer-panel-bg: rgba(14, 13, 16, 0.94); --qeng-answer-panel-shadow: none; --qeng-monitor-bg: rgba(18, 17, 19, 0.9); --qeng-monitor-border: #3c393f; --qeng-answer-field-bg: #1a191b; --qeng-answer-field-text: #eeeef0; --qeng-answer-field-family: var(--qeng-font-family); --qeng-answer-field-size: 130%; --qeng-answer-field-line-height: normal; --qeng-answer-field-radius: var(--qeng-radius-sm); --qeng-answer-panel-border: #6e56cf 1px solid; --qeng-game-bar-link: #baa7ff; --qeng-game-bar-border: #3c393f; --qeng-bs-secondary: #3c393f; --qeng-bs-secondary-text: #eeeef0; --qeng-bs-secondary-outline: #baa7ff; --qeng-bs-danger: #ff949d; /* --- Inventory (Night mode) -------------------------------------------- */ --qeng-progress-bg: #232225; --qeng-progress-text: #eeeef0; --qeng-inventory-slot-bg: #232225; --qeng-inventory-slot-border: #3c393f; --qeng-inventory-selected: #baa7ff; --qeng-inventory-zone: rgba(186, 167, 255, 0.12); --qeng-inventory-zone-accepted: #baa7ff; --qeng-inventory-zone-shadow: none; }