/* ===================================================================== ТЕМА «Cozy Desk» — шкура поверх app.css. Заказана владельцем 12.09.2026 по макету `.tmp/ChatGPT Image Sep 11, 2026, 08_31_14 PM.png`. Включается в кабинете (`core/Theme.php`), класс на ставит `templates/layout.php`. ГЛАВНОЕ В МАКЕТЕ — ИГРА ТОНОВ (слова владельца: «основа редактора потемнее, панели посветлее… эта игра тонов главное на макете же»). Три ступени, снятые с макета пипеткой (`F:/tmp/pwtheme/tones2.ps1`): 1. СТОЛ (страница) #EED7BD — самый тёмный, тёплый песок; 2. ОСНОВА редактора #FCF4E9 — карточка редактора; видна В ЗАЗОРАХ между панелями и вокруг листа; 3. ПАНЕЛИ на основе #FEFBF6 — линейка, строка свойств, колонка цвета, внутренние плашки и лист #FEFEFE каждая ПРИПОДНЯТА: своя рамка, тень и свой скруглённый угол. Без зазоров и теней ступени сливаются, и редактор выглядит плоским — так и было в первой попытке. Поэтому здесь важны не только цвета, но и ЗАЗОРЫ (14 px между панелями) и тени: панель обязана читаться как отдельная плашка, лежащая НА основе. Прочие числа макета: шапка сайта 86 % ширины (а не во всю), скругления панелей 16 px, плашек 10 px, кнопок — таблетка; коралл #EE6046, заливка выбранного #FEE1D6, чернила #1B2130, дорожка ползунка #EFE7DC с тёмным заполнением #2B3038. ===================================================================== */ .pw-theme--cozy { /* --- лестница тонов --- */ --pw-cz-desk-1: #fdf8f1; /* стол, светлая часть */ --pw-cz-desk-2: #f8e9d2; --pw-cz-desk-3: #eed7bd; /* стол, тёмная часть */ --pw-cz-base: #fcf4e9; /* ОСНОВА редактора */ --pw-cz-base-edge: #f2e3cf; /* кромка основы */ --pw-cz-panel: #fefbf6; /* ПАНЕЛЬ на основе */ --pw-nav-panel: var(--pw-cz-panel); /* меню телефона — та же панель, что шапка */ --pw-cz-panel-2: #fefefe; /* внутренняя плашка, поле, лист */ --pw-cz-border: #f1e6d6; --pw-cz-border-str: #e6d6c0; --pw-cz-ink: #1b2130; --pw-cz-ink-soft: #5b5450; --pw-cz-muted: #8a8078; --pw-cz-muted-dk: #6b6159; /* тот же тон глубже: знак под курсором */ --pw-cz-accent: #ee6046; --pw-cz-accent-dk: #d94e35; --pw-cz-accent-sf: #fee1d6; --pw-cz-accent-tx: #e0553a; --pw-cz-track: #efe7dc; /* дорожка ползунка */ --pw-cz-fill: #2b3038; /* заполненная часть дорожки и бегунок */ --pw-cz-round: 20px; /* карточка редактора */ --pw-cz-round-pnl: 16px; /* панели */ --pw-cz-round-fld: 10px; /* плашки и поля */ --pw-cz-gap: 14px; /* зазор, в котором видна основа */ /* Тени: панель ЛЕЖИТ на основе, а не нарисована на ней. */ --pw-cz-lift: 0 1px 2px rgba(120, 85, 50, .07), 0 6px 18px rgba(120, 85, 50, .10); --pw-cz-lift-sm: 0 1px 2px rgba(120, 85, 50, .06), 0 3px 8px rgba(120, 85, 50, .07); --pw-cz-lift-lg: 0 2px 6px rgba(120, 85, 50, .08), 0 18px 44px rgba(120, 85, 50, .14); /* Ссылки Bootstrap: синий в тёплой странице выглядит чужим. */ --bs-link-color: #d94e35; --bs-link-color-rgb: 217, 78, 53; --bs-link-hover-color: #b93d27; --bs-link-hover-color-rgb: 185, 61, 39; /* --- общие токены сайта: карточки работ и прочее наследуют тему сами --- */ --pw-bg: var(--pw-cz-desk-1); --pw-surface: var(--pw-cz-panel); --pw-border: var(--pw-cz-border); --pw-ink: var(--pw-cz-ink); --pw-muted: var(--pw-cz-muted); --pw-accent: var(--pw-cz-accent); --pw-accent-soft: var(--pw-cz-accent-sf); --pw-radius: var(--pw-cz-round-pnl); --pw-shadow: var(--pw-cz-lift); /* --- оболочка редактора: те же имена токенов, другие значения --- */ --pw-st-panel: var(--pw-cz-panel); --pw-st-quiet: var(--pw-cz-panel); --pw-st-mat: var(--pw-cz-base); --pw-st-border: var(--pw-cz-border); --pw-st-ink: var(--pw-cz-ink); --pw-st-muted: var(--pw-cz-muted); --pw-st-hover: #f7ece0; --pw-st-active: var(--pw-cz-accent-sf); --pw-st-accent: var(--pw-cz-accent-tx); --pw-st-field: var(--pw-cz-panel-2); --pw-st-edge: #f6c4b6; /* Лист и его подложка (решение владельца 03.09.2026 — лист тёплый и с тенью). */ --pw-warm-paper: var(--pw-cz-panel-2); --pw-warm-mat: var(--pw-cz-base); --pw-warm-border: var(--pw-cz-border); --pw-warm-ink: var(--pw-cz-ink); --pw-warm-bar: var(--pw-cz-panel); --pw-warm-hover: #f7ece0; --pw-warm-accent: var(--pw-cz-accent); } /* Стол: тёплый свет слева сверху, песок к правому нижнему углу. */ .pw-theme--cozy body, body.pw-theme--cozy { background: radial-gradient(115% 85% at 10% 0%, #fffdf8 0%, rgba(255, 253, 248, 0) 52%), radial-gradient(90% 70% at 100% 55%, var(--pw-cz-desk-2) 0%, rgba(248, 233, 210, 0) 62%), linear-gradient(160deg, var(--pw-cz-desk-1) 0%, #f9edda 48%, var(--pw-cz-desk-3) 100%); background-attachment: fixed; color: var(--pw-cz-ink); } /* Содержимое лежит НАД украшением: цветы — фон, а не наклейка поверх кнопок. */ .pw-theme--cozy .navbar, .pw-theme--cozy main, .pw-theme--cozy footer, .pw-theme--cozy .alert { position: relative; z-index: 1; } /** * ШАПКА САЙТА — ВЫШЕ СОДЕРЖИМОГО (22.09.2026, баг владельца: «меню проваливается * под редактор»). * * Строка выше выдавала шапке и `main` ОДИН слой (z-index 1), а при равном слое * побеждает тот, кто в разметке ПОЗЖЕ, — то есть `main`. Меню аккаунта при этом * заперто внутри слоя шапки: его собственный z-index 1000 работает уже ВНУТРИ * этого слоя и наружу не считается, поэтому «Sign out» уходил под плашку редактора. * Лечится не подкруткой меню, а старшинством самой шапки. * * 1030 — тот же слой, на котором у Bootstrap стоит закреплённая шапка; он выше * содержимого страницы, но НИЖЕ всплывающих панелей редактора (1080), его курсора * (1090) и полноэкранного редактора (1040) — в полном экране шапки сайта быть * не должно. */ .pw-theme--cozy .navbar { z-index: 1030; } /** * ...НО В ПОЛНОМ ЭКРАНЕ ШАПКУ НАКРЫВАЕТ РЕДАКТОР. * * Тот же механизм, что и строкой выше, только наоборот: редактор лежит ВНУТРИ * `main`, а `main` — отдельный слой, поэтому собственный z-index редактора (1040 * в `app.css`) наружу не считается и шапку с её 1030 он перебить не может — * кнопка выхода из полного экрана оказывалась под ссылкой из шапки. Поднимать * надо сам `main`, и ровно на тот слой, который назначен редактору. * * Всплывающие панели (1080) и курсор (1090) лежат в , то есть СНАРУЖИ * `main`, — они по-прежнему выше всех. */ body.pw-fs.pw-theme--cozy main { z-index: 1040; } /* --------------------------------------------------------------- Шапка сайта — плавающая таблетка. В макете она занимает 86 % ширины и стоит по центру; растянутая во всю ширину читается как полоса. --------------------------------------------------------------- */ .pw-theme--cozy .navbar { background: var(--pw-cz-panel) !important; border: 1px solid var(--pw-cz-border) !important; box-shadow: var(--pw-cz-lift); } .pw-theme--cozy .navbar .container { max-width: none; padding-inline: .85rem; } .pw-theme--cozy .navbar-brand { font-weight: 800; letter-spacing: -.02em; font-size: 1.3rem; } .pw-theme--cozy .navbar .nav-link { position: relative; padding-inline: .8rem; font-size: .975rem; font-weight: 600; color: #5b6068; } .pw-theme--cozy .navbar .nav-link:hover { color: var(--pw-cz-ink); } .pw-theme--cozy .navbar .nav-link.active { color: var(--pw-cz-accent-tx); } .pw-theme--cozy .navbar .nav-link.active::after { content: ''; position: absolute; left: .8rem; right: .8rem; bottom: .05rem; height: 2px; border-radius: 2px; background: var(--pw-cz-accent); } .pw-theme--cozy .navbar .bi-bell { font-size: 1.1rem; } /* Имя вошедшего со знаком в кружке: в макете на этом месте кружок аватара. */ .pw-theme--cozy .navbar .dropdown-toggle { font-weight: 600; color: var(--pw-cz-ink); } .pw-theme--cozy .navbar .dropdown-toggle .bi-person-circle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-right: .45rem !important; font-size: 1.15rem; color: var(--pw-cz-accent-tx); background: var(--pw-cz-accent-sf); border-radius: 50%; vertical-align: middle; } .pw-theme--cozy .dropdown-menu { background: var(--pw-cz-panel); border-color: var(--pw-cz-border); border-radius: var(--pw-cz-round-pnl); box-shadow: var(--pw-cz-lift); } /* --------------------------------------------------------------- Кнопки: главное действие — коралловая таблетка, второстепенное — светлая таблетка с тёплой рамкой (Export и New в макете). --------------------------------------------------------------- */ .pw-theme--cozy .btn { border-radius: 999px; font-weight: 600; } .pw-theme--cozy .btn-primary { --bs-btn-color: #fff; --bs-btn-bg: var(--pw-cz-accent); --bs-btn-border-color: var(--pw-cz-accent); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--pw-cz-accent-dk); --bs-btn-hover-border-color: var(--pw-cz-accent-dk); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--pw-cz-accent-dk); --bs-btn-active-border-color: var(--pw-cz-accent-dk); --bs-btn-disabled-bg: #f4b7a8; --bs-btn-disabled-border-color: #f4b7a8; box-shadow: 0 2px 10px rgba(238, 96, 70, .30); } .pw-theme--cozy .btn-outline-secondary, .pw-theme--cozy .btn-outline-primary { --bs-btn-color: var(--pw-cz-ink); --bs-btn-bg: var(--pw-cz-panel-2); --bs-btn-border-color: var(--pw-cz-border-str); --bs-btn-hover-color: var(--pw-cz-ink); --bs-btn-hover-bg: #fdf6ec; --bs-btn-hover-border-color: var(--pw-cz-border-str); --bs-btn-active-color: var(--pw-cz-ink); --bs-btn-active-bg: #fbeee1; --bs-btn-active-border-color: var(--pw-cz-border-str); /* ВЫКЛЮЧЕННАЯ кнопка тоже тёплая: у bootstrap она серая (#6c757d), и на бумаге это видно сразу — отмена в пустой работе выключена всегда, то есть серым холодным пятном она встречает человека на каждой странице рисования. */ --bs-btn-disabled-color: var(--pw-cz-ink-soft); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--pw-cz-border); box-shadow: var(--pw-cz-lift-sm); } .pw-theme--cozy .btn-outline-primary { --bs-btn-color: var(--pw-cz-accent-tx); } .pw-theme--cozy .btn-link { color: var(--pw-cz-accent-tx); } .pw-theme--cozy .form-control, .pw-theme--cozy .form-select { background-color: var(--pw-cz-panel-2); border-color: var(--pw-cz-border-str); border-radius: var(--pw-cz-round-fld); color: var(--pw-cz-ink); } .pw-theme--cozy .form-control:focus, .pw-theme--cozy .form-select:focus { border-color: var(--pw-cz-border-str); } /* --------------------------------------------------------------- ШИРИНА РЕДАКТОРА. Этап E («ЭКРАН», `editor.screen`) отдаёт редактору ВСЁ окно: `.pw-screen__main { width: 100%; max-width: none }`. Это отдельное решение для темы по умолчанию, и оно остаётся в силе. В макете «Cozy Desk» редактор — КАРТОЧКА НА СТОЛЕ той же ширины, что и шапка сайта (86 %), иначе стол не виден и цветы не при чём. Ширина показа — чистое оформление, поэтому её и назначает тема. --------------------------------------------------------------- */ .pw-theme--cozy .pw-screen__main { /* ширина колонки — в блоке раскладки ниже */ } /* Всё, что стоит ПОД редактором (переход к другим средам, галерея), держит ту же колонку — иначе страница разъезжается на две ширины. Боковые поля здесь НЕ обнуляются: на телефоне колонки нет вовсе, и без полей контейнера заголовок ленты лёг бы прямо на кромку экрана (замер 21.09.2026 — «Fresh drawings» начинался с x=0). На широком экране поле полосе задаёт блок раскладки ниже — она там КАРТОЧКА, и поля у неё свои. */ .pw-theme--cozy .pw-under-editor.container { max-width: none; } /* --------------------------------------------------------------- ЗАГОЛОВОК СТРАНИЦЫ — НАД редактором (слова владельца 12.09.2026: увидел его под холстом — «чезанах?», «исправляй»). В разметке он по-прежнему стоит ПОД редактором — это этап E (§5.1 разбора 12.09.2026), решение по теме ПО УМОЛЧАНИЮ, и здесь оно не отменяется: страницы `/draw/*` индексируются, порядок в исходнике не тронут. Тёплая тема переставляет его ВИДОМ: главная колонка становится колонкой flex, и заголовок получает `order` перед редактором. Тем же приёмом тема задаёт ширину карточки — место на экране это оформление, а не разметка. На ТЕЛЕФОНЕ заголовок остаётся внизу: там холст и ЕСТЬ экран (§5.2), и три строки текста над ним — это треть рабочего места. По той же причине на узком экране тема не рисует и украшения. --------------------------------------------------------------- */ /* --------------------------------------------------------------- РАСКЛАДКА ТЕМЫ — ТОЛЬКО НА ШИРОКОМ ЭКРАНЕ (этап G3, 12.09.2026) Ниже порога узкого экрана (тот же 768 px, на котором оболочка включает шторку свойств, — `--pw-screen-sheet` в `app.css`) тема НЕ трогает геометрию: раскладку телефона задаёт этап E, а тема только красит. Здесь собрано ВСЁ, чем тёплый макет двигает раскладку: ширина колонки 86 %, плавающая таблетка шапки сайта, рамка и скругление карточки редактора, зазоры между панелями, поля окна показа, шапки редактора и линейки. Почему одним блоком под `min-width`, а не сбросом поштучно под `max-width`: сброс пришлось бы дописывать к каждому новому правилу темы и однажды забыть. Замер акта приёмки 12.09.2026 показал, во что это обходится на телефоне: карточка x=27 шириной 335 (правило 86 % без медиазапроса), редактор с y=78, линейка кончалась на 835 вместо 844, строка состояния занимала полосу 133…168 над листом, шторка свойств низом лежала НА линейке, а лист был 275×207 — МЕНЬШЕ, чем до этапа E. --------------------------------------------------------------- */ /* Порог здесь — ТОЧНОЕ отрицание того, при котором оболочка включает телефонную раскладку (`--pw-screen-sheet` в `app.css`: `max-width: 767.98px, max-height: 540px`). С 21.09.2026 у неё появилось второе условие — НИЗКИЙ экран: телефон, повёрнутый горизонтально, по ширине уже не телефон, а по высоте — 390 px. Порог темы обязан идти за ним след в след, иначе получается ровно то, от чего этот блок и защищает: замер 21.09.2026 на 844×390 — заголовок и лид, поднятые темой НАД редактором, съедали 180 px из 390, и холсту оставалось 95. */ /* ЗАГОЛОВОК И ЛИД НАД РЕДАКТОРОМ — и на телефоне в портрете тоже (заказ владельца 23.09.2026: «заголовок и текст НАД редактором»). Раньше это жило только в блоке ниже (десктоп), и телефон видел их под холстом. В горизонтали телефона — нет: там по замеру 21.09.2026 они съедали 180 px из 390 (см. ниже). Поля блока на телефоне ужаты — каждая строка над холстом отнимается у листа. */ @media (min-height: 541px) { .pw-theme--cozy.pw-screen--full .pw-screen__main { display: flex; flex-direction: column; } .pw-theme--cozy.pw-screen--full .pw-screen__main > .pw-page-head { order: -1; } } @media (max-width: 767.98px) and (min-height: 541px) { .pw-theme--cozy.pw-screen--full .pw-screen__main > .pw-page-head { padding-top: .6rem !important; padding-bottom: .5rem !important; } .pw-theme--cozy.pw-screen--full .pw-page-head .pw-hero-title { font-size: 1.25rem; } .pw-theme--cozy.pw-screen--full .pw-page-head p { font-size: .875rem; } } @media (min-width: 768px) and (min-height: 541px) { /* Шапка сайта — плавающая таблетка шириной с карточку редактора. */ .pw-theme--cozy .navbar { top: .6rem; /* body — колонка флексов: `margin-inline: auto` сжал бы шапку по содержимому, поэтому ширину задаём явно, а центрируем через align-self. */ align-self: center; width: min(86%, 1440px); margin: .7rem 0 1.2rem; padding: .25rem .5rem; border-radius: 999px; } /* Колонка страницы: редактор — КАРТОЧКА НА СТОЛЕ, иначе стола не видно. */ .pw-theme--cozy .pw-screen__main { width: min(86%, 1440px); margin-inline: auto; padding: 0 0 .5rem; } /* Кромка и угол карточки. */ .pw-theme--cozy .pw-studio { border: 1px solid var(--pw-cz-base-edge); border-radius: var(--pw-cz-round); } /* Зазоры, в которых видна основа, и поля панелей. Задаются ТОКЕНАМИ оболочки (`--pw-gutter`, `--pw-colgap`): по ним же выравнивается шапка — New над линейкой, отмена и возврат над строкой свойств. Поставишь поле мимо токена — шапка съедет, и это будет видно только глазом. */ .pw-theme--cozy .pw-studio { --pw-gutter: var(--pw-cz-gap); --pw-colgap: var(--pw-cz-gap); --pw-head-gap: .5rem; } .pw-theme--cozy .pw-studio__center { gap: var(--pw-cz-gap); } /* Слева поле берётся у тела (токен), иначе New встанет мимо линейки. */ .pw-theme--cozy .pw-head { padding: .85rem 1.1rem .55rem var(--pw-gutter); } .pw-theme--cozy .pw-rail { gap: .2rem; padding: .55rem .4rem; } .pw-theme--cozy .pw-rail__item { padding: .5rem .2rem .35rem; } .pw-theme--cozy .pw-studio .pw-canvas-host { padding: 20px; border: 1px solid var(--pw-cz-base-edge); border-radius: var(--pw-cz-round-pnl); } /* ----------------------------------------------------------- ПОЛОСА ПОД РЕДАКТОРОМ — ещё одна КАРТОЧКА НА СТОЛЕ. Владелец 21.09.2026: «нижняя панель под редактором — отступов нет, она впритык к редактору, нет внутренних отступов». Так и было: тема поднимает заголовок страницы НАД редактором (`order: -1` ниже), и в теме по умолчанию именно он стоял между карточкой и лентой — здесь между ними не осталось ничего, а плоская плита `--pw-bg` во всю колонку срезала карточке нижние углы. Полей внутри не было тоже: боковые обнулила сама тема, верхнего у блока не было никогда (замер: полоса начиналась ровно на y карточки, текст лежал на её кромке). Лечится языком самой темы: полоса — такая же плашка на столе, как карточка редактора (та же основа, кромка, угол и тень), отделённая от неё зазором `--pw-cz-gap`, а содержимое лежит внутри с полями. Лестница тонов при этом сходится: стол → основа полосы → плитки и плашки на ней. ----------------------------------------------------------- */ .pw-theme--cozy .pw-under-editor.container { margin-block: var(--pw-cz-gap); padding: 1.35rem 1.5rem 1.5rem; background: var(--pw-cz-base); border: 1px solid var(--pw-cz-base-edge); border-radius: var(--pw-cz-round); box-shadow: var(--pw-cz-lift-lg); } } /* Заголовок держит ту же колонку 86 %, что шапка и карточка редактора: своих полей у него нет — поля тут у колонки. Вертикальные отступы оставлены как в разметке (`pt-4 pb-3`): утилиты Bootstrap объявлены `!important`, и тема их не перебивает — ей и не надо, ритм у обеих тем один. */ .pw-theme--cozy .pw-page-head { max-width: none; } /* Поле обнуляется ТОЛЬКО там, где есть колонка: на телефоне её нет, и заголовок без поля контейнера лёг бы на кромку экрана — ровно то же, чем болела полоса под редактором. Порог — тот же, что у всей раскладки темы. */ @media (min-width: 768px) and (min-height: 541px) { .pw-theme--cozy .pw-page-head { padding-inline: 0; } } .pw-theme--cozy .pw-page-head .pw-hero-title { color: var(--pw-cz-ink); } /* --------------------------------------------------------------- КАРТОЧКА РЕДАКТОРА — это ОСНОВА. Всё внутри лежит на ней плашками, между плашками остаётся зазор, в котором основа видна. --------------------------------------------------------------- */ .pw-theme--cozy .pw-studio { background: var(--pw-cz-base); box-shadow: var(--pw-cz-lift-lg); } /* Общий вид ПАНЕЛИ: светлее основы, со своей рамкой, тенью и углом. */ .pw-theme--cozy .pw-rail, .pw-theme--cozy .pw-optbar, .pw-theme--cozy .pw-cdlg, .pw-theme--cozy .pw-zoombar { background: var(--pw-cz-panel); border: 1px solid var(--pw-cz-border); border-radius: var(--pw-cz-round-pnl); box-shadow: var(--pw-cz-lift); } /* ---- шапка редактора: New, отмена/возврат, цвет, Save, Publish ---- Знака темы в полосе нет с 21.09.2026 (заказ владельца), поэтому правила `.pw-head__mark` здесь тоже нет: шкура не красит то, чего в разметке нет. */ .pw-theme--cozy .pw-head { background: transparent; border-bottom: 0; } /* New, полный экран, Save, отмена и возврат — значения владельца из инспектора (21.09.2026; отмена и возврат получили то же оформление позже в тот же день). Каждая кнопка правится ОТДЕЛЬНЫМ правилом по своему имени, а не «все .btn в шапке»: владелец так и просил, и Publish тогда не заденет случайная правка. Поля заданы свойствами, а не `--bs-btn-padding-*`: слева 5 px, справа 6 px — одной переменной ширины такое не выражается. */ .pw-theme--cozy .pw-head__new { background: none; border-radius: 5px; padding-top: 2px; padding-bottom: 2px; padding-left: 5px; padding-right: 6px; } .pw-theme--cozy .pw-head__fs, .pw-theme--cozy .pw-head__rot { background: none; border-radius: 5px; padding-top: 2px; padding-bottom: 2px; padding-left: 5px; padding-right: 6px; } .pw-theme--cozy .pw-head__export { background: none; border-radius: 5px; padding-top: 2px; padding-bottom: 2px; padding-left: 5px; padding-right: 6px; } /* Знак отмены и возврата — ПРИГЛУШЁННЫЙ, как был до смены оформления (владелец 21.09.2026: «иконки стали чёрными, это оттягивает, верни их цвет»). Оформление кнопки при этом общее с New и Save — своё здесь только перо: знак крупный (1.3em), и чернильным он спорит с буквами соседей. Под курсором темнеет — иначе кнопка перестала бы отзываться. */ .pw-theme--cozy .pw-head__undo { --bs-btn-color: var(--pw-cz-muted); --bs-btn-disabled-color: var(--pw-cz-muted); background: none; border-radius: 5px; padding-top: 2px; padding-bottom: 2px; padding-left: 5px; padding-right: 6px; } .pw-theme--cozy .pw-head__redo { --bs-btn-color: var(--pw-cz-muted); --bs-btn-disabled-color: var(--pw-cz-muted); background: none; border-radius: 5px; padding-top: 2px; padding-bottom: 2px; padding-left: 5px; padding-right: 6px; } /* КОРАЛЛОВАЯ ПОДСВЕТКА — ТОЛЬКО ПОКА КНОПКУ ДЕРЖАТ (заказ владельца 23.09.2026: «жмёт — кнопка нажимается и подсвечивается красненьким на короткое время; отпускает — всё возвращается»). Подсветки НАВЕДЕНИЯ нет: курсор после щелчка остаётся на кнопке, и она «залипала» коралловой; на касании браузер держит `:hover` до следующего касания. ЗНАК ЦВЕТ НЕ МЕНЯЕТ НИКОГДА — ни под курсором, ни в нажатии, ни в фокусе: все цветовые токены бутстрапа сведены к одному приглушённому (иначе `.btn:active` и `:focus-visible` красили его в свой цвет, и владелец видел чёрную кнопку). Бледная и ненажимаемая — только `:disabled`. Правило с `background`, а не токеном `--bs-btn-active-bg`: `background: none` выше стоит в правиле той же силы, и подсветку из токена оно бы съело. */ .pw-theme--cozy .pw-head__undo, .pw-theme--cozy .pw-head__redo { --bs-btn-hover-color: var(--pw-cz-muted); --bs-btn-active-color: var(--pw-cz-muted); --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-active-border-color: transparent; /* НАЖАТИЕ МГНОВЕННОЕ, как у настоящей кнопки (жалоба владельца 23.09.2026: «реакция чуть отложенная»). Задержку давал `transition` бутстрапа у `.btn`: коралл наплывал за 0.15 с. Анимации у этих кнопок нет никакой. */ transition: none; -webkit-tap-highlight-color: transparent; } .pw-theme--cozy .pw-head__undo:hover, .pw-theme--cozy .pw-head__redo:hover, .pw-theme--cozy .pw-head__undo:focus, .pw-theme--cozy .pw-head__redo:focus { color: var(--pw-cz-muted); background: none; } .pw-theme--cozy .pw-head__undo.is-press:not(:disabled), .pw-theme--cozy .pw-head__redo.is-press:not(:disabled), .pw-theme--cozy .pw-head__undo:active:not(:disabled), .pw-theme--cozy .pw-head__redo:active:not(:disabled) { color: var(--pw-cz-muted); background: var(--pw-cz-accent-sf); } /* ---- раскладка: зазоры, в которых видна основа (только на широком экране) ---- */ .pw-theme--cozy .pw-studio__body { align-items: start; } /* ...но там, где редактор ЗАНИМАЕТ ОКНО, колонки обязаны тянуться на всю его высоту. `align-items: start` даёт каждой колонке рост ПО СОДЕРЖИМОМУ — и центральная колонка перестаёт быть ограниченной окном: окно показа получает ту высоту, которую попросил лист, а `Editor.fitScreen` читает её обратно и считает, что столько ему и отведено. Круг замыкается на первом же значении, и лист больше не меняется НИКОГДА: замер акта приёмки 12.09.2026 — на окне 1440×900 лист 792×594, низ листа 926 при крае окна 900, линейка обрезана, «смена высоты окна пересчитывает лист :: 594 → 594». Вид темы это не трогает: панели остаются панелями, меняется только их рост — ровно как в теме по умолчанию. */ .pw-theme--cozy.pw-screen--full .pw-studio__body { align-items: stretch; } /* ---- левая линейка: отдельная панель со скруглёнными углами ---- */ .pw-theme--cozy .pw-rail__item { border-radius: 14px; } .pw-theme--cozy .pw-rail__item:hover { background: #f7ece0; } .pw-theme--cozy .pw-rail__item.is-active { background: var(--pw-cz-accent-sf); border-color: transparent; box-shadow: inset 0 0 0 1px rgba(238, 96, 70, .18); } .pw-theme--cozy .pw-rail__label { font-size: .72rem; color: var(--pw-cz-ink-soft); } .pw-theme--cozy .pw-rail__item.is-active .pw-rail__label { color: var(--pw-cz-accent-tx); } /* Группы операций в макете разделены ПРОБЕЛОМ, а не чертой. */ .pw-theme--cozy .pw-rail__sep { background: transparent; height: 6px; margin: .15rem 0; } /* Кнопка-намёк на спрятанные инструменты: та же тёплая подсветка, что у знаков, и тот же угол — она стоит в их колонке. */ .pw-theme--cozy .pw-rail__more { border-radius: 14px; color: var(--pw-cz-muted); } .pw-theme--cozy .pw-rail__more:hover { background: #f7ece0; color: var(--pw-cz-ink-soft); } /* ---- строка свойств: светлая плашка над холстом ---- */ /* Поле строки свойств — токен: от него отсчитывается место отмены и возврата в шапке. */ .pw-theme--cozy .pw-studio { --pw-optbar-pad: .8rem; } .pw-theme--cozy .pw-optbar { padding: .6rem var(--pw-optbar-pad); } .pw-theme--cozy .pw-optbar__scroll { gap: .5rem 1rem; } /* Имя инструмента БЕЗ ЖИРНОГО (владелец 22.09.2026): в тёплой теме оно было 800 — громче всей строки свойств. */ .pw-theme--cozy .pw-optbar__tool { font-size: .95rem; font-weight: 500; padding-right: .4rem; } .pw-theme--cozy .pw-opt { gap: .6rem; font-size: .9rem; } /* Между ручками в макете стоит тонкая черта — она делит строку на группы. */ .pw-theme--cozy .pw-optbar__scroll > .pw-opt + .pw-opt { border-left: 1px solid var(--pw-cz-border); padding-left: 1rem; } .pw-theme--cozy .pw-opt__name { font-size: .9rem; font-weight: 500; color: var(--pw-cz-ink-soft); } /* Кисть — ТАКАЯ ЖЕ плашка, как остальные поля строки: тот же рост, тот же угол, та же рамка (заказ владельца 21.09.2026 — «поле инструмента должно быть таким же по форме углов и прочему, как другие поля панели»). Таблетка со своей тенью читалась в ряду полей как кнопка из другого набора. */ .pw-theme--cozy .pw-brushbtn { height: 36px; padding: 0 .55rem; font-size: .9rem; } /* ЧИСЛО — «Подпись: [значение] ⌄». Ползунка в строке нет ни у одной ручки: он открывается шевроном во всплывашке (заказ владельца 21.09.2026 — «по умолчанию видимые ползунки только захламляют интерфейс»). */ .pw-theme--cozy .pw-num { gap: .15rem; min-width: 58px; height: 36px; padding: 0 .2rem 0 .35rem; } .pw-theme--cozy .pw-num .pw-num__field { width: 2.4rem; font-size: .95rem; font-weight: 600; } .pw-theme--cozy .pw-num__unit { font-size: .8rem; } /* Рамка при вводе. Правило повторено в теме НЕ зря: у `.pw-theme--cozy .pw-num` и у `.pw-num:focus-within` вес одинаковый, и тема, лежащая ниже, перебивала бы общее правило своей обычной кромкой. */ .pw-theme--cozy .pw-num:focus-within { border-color: var(--pw-st-edge); } /* Кружок настоящего диаметра стоит РЯДОМ С ЧИСЛОМ (правило 3 оболочки). */ .pw-theme--cozy .pw-num__dot { width: 26px; height: 26px; } .pw-theme--cozy .pw-num__more { width: 22px; height: 26px; color: var(--pw-cz-ink-soft); } .pw-theme--cozy .pw-num__more:hover { background: #f7ece0; } /* Ползунок во всплывашке своих правил не просит: тёмный бегунок на тёплой дорожке выходит сам из токенов `--pw-st-ink` и `--pw-st-border`, которые тема уже задала. */ .pw-theme--cozy .pw-numpop__range::-webkit-slider-runnable-track { background-color: var(--pw-cz-track); } .pw-theme--cozy .pw-numpop__range::-moz-range-track { background-color: var(--pw-cz-track); } /* Плашки строки свойств: знак, выключатель, сегмент, свотч. */ .pw-theme--cozy .pw-num, .pw-theme--cozy .pw-pick, .pw-theme--cozy .pw-brushbtn, .pw-theme--cozy .pw-optbtn, .pw-theme--cozy .pw-segment, .pw-theme--cozy .pw-valswatch { background: var(--pw-cz-panel-2); border-color: var(--pw-cz-border-str); border-radius: var(--pw-cz-round-fld); } .pw-theme--cozy .pw-pick, .pw-theme--cozy .pw-optbtn, .pw-theme--cozy .pw-segment__btn { height: 36px; } .pw-theme--cozy .pw-segment__btn { border-right-color: var(--pw-cz-border-str); } /* Кнопка […] — такая же плашка, как остальные (в макете это квадрат со скруглением). */ .pw-theme--cozy .pw-optbar__scroll > .pw-icon-btn, .pw-theme--cozy .pw-optbar > .pw-icon-btn { width: 38px; height: 36px; background: var(--pw-cz-panel-2); border: 1px solid var(--pw-cz-border-str); border-radius: var(--pw-cz-round-fld); color: var(--pw-cz-ink-soft); } /* ---- холст: УТОПЛЕННАЯ зона основы, на которой лежит лист ---- Светлой панелью её делать нельзя: белый лист на белой панели пропадает, и как раз это ломало «игру тонов» — вокруг листа обязан быть тон ТЕМНЕЕ листа. */ .pw-theme--cozy .pw-studio .pw-canvas-host { background: var(--pw-cz-base); box-shadow: inset 0 1px 3px rgba(120, 85, 50, .07); } .pw-theme--cozy .pw-studio .pw-stage { border-radius: 12px; box-shadow: 0 2px 6px rgba(120, 85, 50, .12), 0 14px 34px rgba(120, 85, 50, .14); } .pw-theme--cozy .pw-studio .pw-layer { border-radius: 12px; } /* ---- строка состояния: на ОСНОВЕ, зум — маленькой панелью ---- */ .pw-theme--cozy .pw-statusbar { padding: .1rem .3rem .1rem; background: transparent; border-top: 0; } /* Таблетка зума — САМАЯ МЕЛКАЯ панель редактора: зум дополнительная опция, и поля у него меньше, чем у линейки и строки свойств (заказ владельца 22.09.2026). */ .pw-theme--cozy .pw-zoombar { padding: 1px 3px; border-radius: 999px; } /* ---- ОКНО ЦВЕТА ---- Правой колонки с 22.09.2026 нет: цвет открывается знаком линейки в своём окне. Тема окну даёт только ВИД — тёплую полосу, угол и размеры образцов; ПОРЯДОК в нём тема не назначает (этап G4, 12.09.2026: перевёрнутый темой порядок разводил две приёмки проекта). */ .pw-theme--cozy .pw-cdlg { border-color: var(--pw-cz-border); box-shadow: var(--pw-cz-lift-lg); } /* ПОЛОСА ОКНА — БЕЖЕВАЯ, цветом стола (владелец 24.09.2026 со снимком телефона: «шапка с надписью Color белая и сливается с холстом»). Белой была `panel-2` — тот же цвет, что у листа, и шторка, встав на холст, теряла верх. */ .pw-theme--cozy .pw-cdlg__head { background: var(--pw-cz-desk-2); border-bottom-color: var(--pw-cz-border-str); } /* Шторка отделяется от холста КРОМКОЙ и тенью ВВЕРХ: общая тень темы падает вниз, а низ шторки — край экрана, и сверху её не было видно вовсе. */ .pw-theme--cozy .pw-cdlg.is-sheet { border-color: var(--pw-cz-border-str); box-shadow: 0 -2px 6px rgba(120, 85, 50, .10), 0 -12px 32px rgba(120, 85, 50, .20); } .pw-theme--cozy .pw-cdlg__title { color: var(--pw-cz-accent-tx); } /* Подписи рядов — обычные слова, а не мелкий верхний регистр. */ .pw-theme--cozy .pw-swatches__head { margin: .55rem 0 .4rem; font-size: .875rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--pw-cz-ink-soft); } /* У ВЕРХНЕГО ряда поля сверху нет: над «Recent» сразу полоса окна (владелец 22.09.2026 — «отступ над надписью recent до верхней границы палитры непонятно зачем нужен»). Тема задаёт подписям свой отступ двумя классами, поэтому и снимать его здесь: правило оболочки её не перебивает. */ .pw-theme--cozy .pw-swatches__head--recent { margin-top: 0; } .pw-theme--cozy .pw-cdlg .pw-swatch { width: 28px; height: 28px; } .pw-theme--cozy .pw-cdlg .pw-swatches { gap: .4rem; } .pw-theme--cozy .pw-swatch { border-color: var(--pw-cz-panel-2); box-shadow: 0 0 0 1px rgba(120, 85, 50, .14); } .pw-theme--cozy .pw-swatch.is-active { box-shadow: 0 0 0 2px var(--pw-cz-accent); } .pw-theme--cozy .pw-hexrow__input { text-transform: uppercase; } .pw-theme--cozy .pw-cdlg .pw-hexrow__pick { width: 30px; height: 30px; background: var(--pw-cz-panel-2); border: 1px solid var(--pw-cz-border-str); border-radius: var(--pw-cz-round-fld); } /* ---- нижняя полоса действий: ОТДЕЛЬНАЯ панель у нижнего края карточки ---- В макете действия лежат на своей полосе, а не в теле карточки. */ /* Действия над работой (New, Publish) с этапа E стоят В ШАПКЕ редактора, рядом с отменой и выгрузкой, — отдельной плашки под холстом, которую тема оформляла парящей карточкой, больше нет. Карточка в шапке съедала имя работы: на 390 px оно сжималось до нуля (поймано приёмкой тем). */ .pw-theme--cozy .pw-studio .pw-head .pw-actions { gap: .5rem; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; } .pw-theme--cozy .pw-studio .pw-head .pw-actions .btn { --bs-btn-padding-y: .4rem; --bs-btn-padding-x: .9rem; } /* ---- всплывающие панели ---- */ .pw-theme--cozy .pw-pop { background: var(--pw-cz-panel); border-color: var(--pw-cz-border); border-radius: var(--pw-cz-round-pnl); box-shadow: 0 12px 34px rgba(120, 85, 50, .2); } .pw-theme--cozy .pw-brushrow.is-active, .pw-theme--cozy .pw-pickitem.is-active, .pw-theme--cozy .pw-optbtn.is-on, .pw-theme--cozy .pw-segment__btn.is-on { color: var(--pw-cz-accent-tx); } /* --------------------------------------------------------------- Плитки работ и прочие карточки сайта --------------------------------------------------------------- */ .pw-theme--cozy .pw-card, .pw-theme--cozy .bg-white { background: var(--pw-cz-panel) !important; } .pw-theme--cozy .pw-card { border-radius: var(--pw-cz-round-pnl); box-shadow: var(--pw-cz-lift-sm); } .pw-theme--cozy .pw-card:hover { box-shadow: var(--pw-cz-lift); } /* Плашки внутри полосы под редактором (переходы «Try a Wall», «Learn to draw») лежат на ОСНОВЕ и без тени сливаются с ней — как панели редактора без зазоров. Правило про тон, а не про геометрию, поэтому вне блока раскладки. */ .pw-theme--cozy .pw-under-editor .border.rounded-3 { box-shadow: var(--pw-cz-lift-sm); } .pw-theme--cozy .border { border-color: var(--pw-cz-border) !important; } .pw-theme--cozy .rounded-3 { border-radius: var(--pw-cz-round-pnl) !important; } /* Заголовок страницы: в макете его нет вовсе (имя работы стоит в шапке карточки). Убирать содержимое тема не вправе — но она вправе не отдавать ему пол-экрана: мельче и плотнее к редактору. */ .pw-theme--cozy .pw-hero-title { letter-spacing: -.025em; } .pw-theme--cozy main > h1.pw-hero-title { margin-bottom: .1rem !important; font-size: 1.15rem; color: var(--pw-cz-ink-soft); } .pw-theme--cozy main > h1.pw-hero-title + p { margin-bottom: .8rem !important; font-size: .9rem; } .pw-theme--cozy footer { background: transparent !important; border-top-color: var(--pw-cz-border) !important; } /* --------------------------------------------------------------- Украшение: цветы по краям стола и бумажка-стикер. Слой не ловит нажатия (`.pw-decor` в app.css); на узком экране его нет. --------------------------------------------------------------- */ .pw-theme--cozy .pw-decor__left { left: -2.5vw; bottom: -2vh; width: clamp(150px, 17vw, 300px); } .pw-theme--cozy .pw-decor__right { right: -1.5vw; top: -1vh; width: clamp(140px, 15vw, 260px); } .pw-theme--cozy .pw-decor__note { right: 1.2vw; top: 46vh; width: 108px; padding: 14px 10px 22px; font-family: Georgia, 'Times New Roman', serif; font-size: .95rem; line-height: 1.25; text-align: center; color: #7a6a4e; background: linear-gradient(175deg, #fdeec2 0%, #fbe4a9 100%); box-shadow: 0 6px 16px rgba(120, 85, 50, .2); transform: rotate(-4deg); } .pw-theme--cozy .pw-decor__note::after { content: '\2661'; /* сердечко — часть рисунка, не текст */ display: block; margin-top: .35rem; font-size: 1.1rem; color: #c98f6a; } @media (max-width: 1399.98px) { .pw-theme--cozy .pw-decor__note { display: none; } } @media (max-width: 991.98px) { .pw-theme--cozy .pw-decor { display: none; } .pw-theme--cozy .pw-studio .pw-head .pw-actions .btn { --bs-btn-padding-x: .5rem; } .pw-theme--cozy .pw-head__export { --bs-btn-padding-x: .5rem; } } /* Планшет — ещё широкий экран: тема тут раскладку ведёт, только теснее. Ниже порога узкого экрана (768 px) этих правил нет вовсе — там геометрию задаёт этап E (G3). */ @media (min-width: 768px) and (max-width: 991.98px) { /* В шапке работы помещаются только знаки: имя работы важнее полей кнопок. */ .pw-theme--cozy .pw-head { padding: .45rem .6rem; gap: .35rem; } .pw-theme--cozy .navbar { width: calc(100% - 1.5rem); border-radius: var(--pw-cz-round); } .pw-theme--cozy .pw-studio__body { padding-inline: .5rem; gap: .5rem; } }