/* =================================================================== 1MKM — общая тема сайта. Единый источник цветов и общих компонентов вместо копий в каждой странице. Тёмная тема — значения по умолчанию (как было исторически); светлая включается только когда система/браузер сами в светлом режиме (см. @media ниже) и сейчас не тёмное время суток (theme-night.js) — так же, как в Android-приложении (values-night там играет роль "по умолчанию", values/ — светлый вариант). =================================================================== */ * { box-sizing: border-box; margin: 0; padding: 0; } :root { /* --- текст и акценты --- */ --bg: #1a1510; --text: #f0e6d2; /* основной текст, заголовки */ --text-secondary: #e8dcc8; /* текст body, ссылки */ --text-dim: #9a8b72; /* приглушённый текст (подписи, hint) */ --text-dim2: #b8a88a; /* приглушённый текст, вторая градация */ --accent: #c9a66b; /* accent-color, прогресс-бары */ --link: #c9b896; /* цвет ссылок/лейблов */ --heading-accent: #d4b896; /* заголовки h2, метки */ --emphasis: #fff8e7; /* hover/активное состояние — самый яркий текст */ /* --- поверхности (карточки/панели/поля), заданные как "R,G,B" — подставляются в rgba(var(--x-rgb), alpha), чтобы сохранить прозрачность каждого конкретного использования --- */ --surface-rgb: 20, 15, 10; /* общая тёмная панель (инпуты, полосы, бейджи) */ --surface2-rgb: 30, 22, 14; /* вторая тональность панели (.card на части страниц) */ --card1-rgb: 45, 32, 20; /* верхний стоп градиента .card */ --card2-rgb: 28, 20, 12; /* нижний стоп градиента .card */ --card1-hover-rgb: 75, 55, 30; /* .card в состоянии :hover — верхний стоп */ --card2-hover-rgb: 50, 35, 20; /* .card в состоянии :hover — нижний стоп */ --chip-rgb: 40, 30, 20; /* мелкие пилюли (буквы алфавита и т.п.) */ --scrim1-rgb: 15, 10, 5; /* затемнение фото-фона, верхний стоп */ --scrim2-rgb: 10, 8, 5; /* затемнение фото-фона, нижний стоп */ /* --- фирменные кнопки сайта (button/.btn): тёмное золото со светлым текстом в тёмной теме; в светлой переопределяются ниже на светлое золото с тёмным текстом — так же, как в приложении (values/ vs values-night/) и в попапе расширения --- */ --brand1-rgb: 90, 60, 35; --brand2-rgb: 60, 40, 20; --brand1-hover-rgb: 110, 75, 40; --brand2-hover-rgb: 75, 50, 25; --brand-text: #F2E9DC; /* --- статусы (ok/err) и второстепенные акценты — раньше были захардкожены по-разному на каждой странице (#f0a090, #c8e0b0, ...) и не менялись в светлой теме, из-за чего блоки статуса/ошибок были почти нечитаемы на светлом фоне. Теперь один источник. --- */ --ok-text: #c8e0b0; --ok-bg-rgb: 40, 70, 40; --ok-border-rgb: 110, 175, 110; --err-text: #f0a090; --err-bg-rgb: 80, 30, 22; --err-border-rgb: 195, 95, 72; --danger-link: #c9997e; /* второстепенные "удалить/отменить" ссылки */ --danger-link-hover: #f0a090; --kind-a: #c8e0b0; --kind-a-bg-rgb: 60, 90, 50; /* бейдж-категория 1 (напр. звонок) */ --kind-b: #b0c8e0; --kind-b-bg-rgb: 50, 70, 100; /* бейдж-категория 2 (напр. смс) */ --kind-c: #e0b0c8; --kind-c-bg-rgb: 90, 60, 80; /* бейдж-категория 3 (напр. ммс) */ /* --- кнопка "скачать" (.btn.download): отдельный зелёный акцент, не завязанный на --brand*, со своим читаемым текстом в обеих темах --- */ --dl1-rgb: 60, 90, 45; --dl2-rgb: 40, 60, 30; --dl1-hover-rgb: 80, 115, 60; --dl2-hover-rgb: 55, 80, 40; --dl-text: #F2E9DC; } /* Светлая — только когда система светлая И сейчас не тёмное время суток: с заката до рассвета theme-night.js ставит на класс night-dark, и этот блок не применяется (страница остаётся в тёмных значениях выше). */ :root.night-dark { color-scheme: dark; } @media (prefers-color-scheme: light) { :root:not(.night-dark) { --bg: #FAF6EF; --text: #2A2118; --text-secondary: #4A3B2A; --text-dim: #7A6A54; --text-dim2: #7A6A54; --accent: #9C7A3F; --link: #9C7A3F; --heading-accent: #6B4E24; --emphasis: #1F1710; --surface-rgb: 250, 247, 245; --surface2-rgb: 250, 247, 244; --card1-rgb: 255, 255, 255; --card2-rgb: 250, 244, 232; --card1-hover-rgb: 255, 250, 240; --card2-hover-rgb: 245, 235, 210; --chip-rgb: 250, 247, 245; --scrim1-rgb: 251, 247, 244; --scrim2-rgb: 250, 248, 245; /* Кнопки (button/.btn) в светлой теме — тёплое светлое золото вместо тёмно-коричневого, чтобы соответствовать посветлевшим карточкам/фону. */ --brand1-rgb: 235, 214, 173; --brand2-rgb: 214, 185, 132; --brand1-hover-rgb: 242, 226, 192; --brand2-hover-rgb: 224, 198, 148; --brand-text: #3A2A18; --ok-text: #2E6B1F; --ok-bg-rgb: 214, 234, 200; --ok-border-rgb: 140, 190, 110; --err-text: #A23B2A; --err-bg-rgb: 248, 216, 206; --err-border-rgb: 210, 130, 105; --danger-link: #A2543C; --danger-link-hover: #A23B2A; --kind-a: #2E6B1F; --kind-a-bg-rgb: 210, 232, 195; --kind-b: #2A5A8A; --kind-b-bg-rgb: 205, 222, 240; --kind-c: #8A2A63; --kind-c-bg-rgb: 240, 210, 228; --dl1-rgb: 200, 224, 180; --dl2-rgb: 172, 202, 145; --dl1-hover-rgb: 212, 232, 195; --dl2-hover-rgb: 185, 212, 160; --dl-text: #234017; } } /* =================================================================== Фон страницы с фото (books.jpg / mountains.jpg) — задайте саму картинку через CSS-переменную --photo на body, например: Фото остаётся в обеих темах (тёмной и светлой) — как и было исторически на сайте (см. book.html, library.php и т.д.), просто затемняется/ осветляется под тему через --scrim1-rgb/--scrim2-rgb ниже. =================================================================== */ body.page-bg { min-height: 100vh; font-family: 'Georgia', 'Times New Roman', serif; color: var(--text-secondary); background-color: var(--bg); background-image: linear-gradient(rgba(var(--scrim1-rgb), 0.85), rgba(var(--scrim2-rgb), 0.9)), var(--photo, none); background-size: cover; background-position: center; background-attachment: fixed; } /* =================================================================== Верхнее меню (topnav) — было продублировано по многим страницам (местами и вовсе через PHP-функцию отдельно от