/* =========================================================== Белорусская тема публичной страницы. Включается атрибутом data-skin="by" на . Ставит его app.js по полю theme идущей игры (games.theme в базе, выбирается в хабе при создании игры), поэтому один и тот же паблик выглядит по-разному на разных квизах. Без атрибута файл не делает ничего — можно держать подключённым всегда. Палитра рушника: чёрный фон, красный узор, бежевые линии. Синих и зелёных оттенков нет вообще — «принято» и «связь есть» держит бежевый, «внимание» и ставки — янтарный. Орнамент — два SVG по крестиковой сетке (img/by-ornament.svg, img/by-band.svg), вместе меньше 12 КБ. О специфичности. Тёмный блок ниже — :root[data-skin='by'], те же 0,2,0, что и у :root[data-theme='light'] из style.css; выигрывает он только порядком подключения. Поэтому светлый блок здесь обязан переопределить каждую переменную, которую задаёт тёмный, — иначе в паре «светлая тема + by» просочились бы цвета не оттуда. =========================================================== */ /* --- Тёмная тема --- */ :root[data-skin='by'] { --bg: #12100e; /* чёрный с тёплым уводом, как основа ткани */ --card: rgba(30, 25, 20, 0.82); /* полупрозрачные карточки: сквозь них виден орнамент, и страница читается как ткань, а не как узор под стеклом */ --card-2: rgba(58, 47, 37, 0.55); --line: #3b3128; --text: #f4efe4; --muted: #a9997f; --accent: #d42a31; /* 5:1 с белым текстом на кнопке */ --accent-ink: #ffffff; --ok: #e8cf9b; /* бежевый вместо зелёного */ --ok-wash: rgba(232, 207, 155, 0.12); --ok-line: rgba(232, 207, 155, 0.38); --err: #ff6b64; --warn: #f0a63c; --warn-wash: rgba(240, 166, 60, 0.12); --warn-line: rgba(240, 166, 60, 0.38); /* Углы чуть жёстче родных 14px: орнамент геометрический, и мягкая пластика с ним спорит. */ --radius: 9px; /* Ручки орнамента — тут же удобно крутить, если покажется много/мало. Эти четыре от темы не зависят и в светлом блоке не повторяются. */ --by-tile: 260px; /* ширина повтора обойной плитки */ --by-band: 14px; /* высота каймы под шапкой */ --by-band-ink: #17120f; /* подложка каймы — всегда чёрная, в обеих темах */ --by-alpha: 0.1; /* насколько узор проступает сквозь фон */ --by-head: #1a1613; /* непрозрачный фон липкой шапки */ } /* --- Светлая тема --- Не белая, а небелёный лён. Контраст к карточке у всех акцентов не ниже 5:1, у белого текста на красной кнопке — 6.9:1. */ :root[data-skin='by'][data-theme='light'] { --bg: #f5efe3; --card: rgba(255, 253, 247, 0.86); --card-2: rgba(236, 226, 208, 0.75); --line: #ddd0b6; --text: #1e1712; --muted: #6d6154; --accent: #b3141d; /* 6.9:1 на карточке */ --accent-ink: #ffffff; --ok: #7a5c14; /* 6.2:1 — тёмная охра, тот же бежевый род */ --ok-wash: rgba(122, 92, 20, 0.1); --ok-line: rgba(122, 92, 20, 0.4); --err: #a4161a; /* 7.7:1 */ --warn: #b45309; /* 5.1:1 */ --warn-wash: rgba(180, 83, 9, 0.1); --warn-line: rgba(180, 83, 9, 0.4); /* На светлом фоне тот же узор читается слабее — добавляем плотности */ --by-alpha: 0.12; --by-head: #fffdf7; } /* --- Фоновый орнамент --- Слой лежит на html::before, а не на body::before: фон корневого элемента уходит на канву, и элемент с z-index:-1 оказывается ровно между ней и всем содержимым. Поэтому же с body снимаем заливку — иначе она закрыла бы узор. position:fixed вместо background-attachment:fixed — на iOS Safari фиксированный фон при скролле дёргается, а фиксированный слой нет. */ [data-skin='by'] body { background-color: transparent; } :root[data-skin='by']::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url('../img/by-ornament.svg') repeat 0 0; background-size: var(--by-tile) auto; opacity: var(--by-alpha); } /* --- Кайма под шапкой --- Рушниковая полоса вместо серой линии border-bottom. Чёрная подложка в обеих темах: узор родом с чёрной ткани, на бежевом фоне светлой темы полоса работает как акцент, а не как грязь. Шапка sticky, то есть позиционированная, — ::after цепляется к ней. Нижний паддинг увеличен на высоту каймы, чтобы полоса не наезжала на номер раунда. */ [data-skin='by'] .top { background: var(--by-head); border-bottom: none; padding-bottom: calc(12px + var(--by-band)); } [data-skin='by'] .top::after, [data-skin='by'] body::after { content: ''; pointer-events: none; background: var(--by-band-ink) url('../img/by-band.svg') repeat-x left top; background-size: auto var(--by-band); } [data-skin='by'] .top::after { position: absolute; left: 0; right: 0; bottom: 0; height: var(--by-band); } /* Такая же кайма прибита к низу экрана: страница получает рамку рушника сверху и снизу, а содержимое не теряет ни строчки — на высоту полосы вырос нижний паддинг body. Вырез экрана добираем чёрной подложкой, чтобы под полосой не оставалось светлой щели. */ [data-skin='by'] body::after { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; height: calc(var(--by-band) + env(safe-area-inset-bottom)); } [data-skin='by'] body { padding-bottom: calc(var(--by-band) + env(safe-area-inset-bottom)); } /* --- Мелкая подгонка под новую палитру --- */ /* Кнопка темы на непрозрачной шапке: --card-2 теперь полупрозрачный и на шапке выглядел бы мутным пятном. */ [data-skin='by'] .theme-btn { background: transparent; } /* Принятый ответ — бежевым по тёмному; жирность оставляем, бежевый спокойнее зелёного и требует веса, чтобы не теряться. */ [data-skin='by'] .q-accepted-text { font-weight: 800; } /* Карточка с поставленной ставкой и без того в янтарной рамке; на полупрозрачном фоне добавляем ей чуть плотности, иначе узор под ней конкурирует с текстом ставки. */ [data-skin='by'] .q.has-bet { background: var(--warn-wash); } /* Родное правило при закрытом приёме убирает заливку карточки и сажает её прямо на фон страницы. В стандартной теме фон от карточки почти не отличается, и это читается. Здесь на фоне орнамент — и он проходит сквозь поля: номер вопроса и рамка тонут в узоре, на экране остаётся один принятый ответ без понятной привязки. Заливку возвращаем. Что приём закрыт, и так сказано трижды: плашкой наверху, пунктирной рамкой карточки и погасшей кнопкой отправки. */ [data-skin='by'] .questions.is-locked .q { background: var(--card); } @media (min-width: 720px) { :root[data-skin='by'] { --by-tile: 320px; /* на широком экране плитка крупнее: узор виден в полях по бокам от колонки */ --by-band: 16px; } } /* Кому узор мешает — уважаем системную настройку: убираем фоновый слой, оставляем только каймы и палитру. */ @media (prefers-reduced-transparency: reduce) { :root[data-skin='by']::before { display: none; } :root[data-skin='by'] { --card: #1c1815; --card-2: #2b241c; } :root[data-skin='by'][data-theme='light'] { --card: #fffdf7; --card-2: #ece2d0; } }