/* Оформление оболочки CodePro в браузере (фаза 23.2). * * Ни сборщика, ни препроцессора - решение владельца по фазе 23: файл читают * и правят руками, поэтому переменные объявлены один раз наверху, а дальше * идут только они. * * ⚠️ Тема считается ДВАЖДЫ и это намеренно: `prefers-color-scheme` даёт * системную, атрибут `data-theme` на - выбранную человеком в * настройках (ThemeMode приложения: 0 система, 1 светлая, 2 тёмная). Без * второй половины выбор «всегда светлая» на тёмной системе не сработал бы. */ :root { color-scheme: light dark; /* Светлая тема - значения по умолчанию. */ --bg: #ffffff; --bg-elev: #f2f2f7; --bg-row-selected: rgba(0, 122, 255, 0.12); --text: #000000; --text-dim: #6c6c70; --sep: rgba(60, 60, 67, 0.18); --accent: #007aff; --code-bg: #f7f7f9; /* Красный «потеряешь работу»: кнопка «Не сохранять» у вопроса о правке. * Тот же цвет, что у отказа входа (`css/account.css`), и та же пара для * тёмной темы: системный алый на чёрном слишком тёмен. */ --danger: #d33a2c; /* Фиолетовый «новое» и «изучено». Снят пипеткой с NewTopic@3x в * приложении; галочка «изучено» стоит на месте кружка и обязана быть * того же цвета (правка владельца 02.09.2026). */ --new: #c148ac; /* Серый неактивного значка - одно число на весь проект. */ --inactive: #8e8e93; --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; /* ⚠️ Menlo первым: по нему приложение считает колонки переноса строк. * Реальную ширину знака веб всё равно меряет canvas.measureText (это * дело порта конвейера, фаза 23.3), но список шрифтов обязан совпадать. */ --font-code: Menlo, Consolas, monospace; --row-h: 44px; --topbar-h: 48px; --langbar-h: 56px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #000000; --bg-elev: #1c1c1e; --bg-row-selected: rgba(10, 132, 255, 0.22); --text: #ffffff; --text-dim: #98989f; --sep: rgba(84, 84, 88, 0.6); --accent: #0a84ff; --code-bg: #1c1c1e; --danger: #ff6961; } } :root[data-theme="dark"] { --bg: #000000; --bg-elev: #1c1c1e; --bg-row-selected: rgba(10, 132, 255, 0.22); --text: #ffffff; --text-dim: #98989f; --sep: rgba(84, 84, 88, 0.6); --accent: #0a84ff; --code-bg: #1c1c1e; --danger: #ff6961; } * { box-sizing: border-box; } /* ⚠️ Обязательно и обязательно с `!important`: свои правила ниже задают * `display: flex` элементам, которые оболочка прячет атрибутом `hidden`, и * без этой строки скрытая кнопка «назад» и скрытая панель кода остаются на * экране. Поймано замером в браузере: `backBtn.hidden === true`, а кнопка * видна. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: 15px; -webkit-text-size-adjust: 100%; } /* ⚠️ 100dvh, а не 100vh: в Safari на iOS панели браузера съезжают, и при * 100vh нижняя панель языков уезжает под адресную строку. */ .shell { display: flex; height: 100dvh; overflow: hidden; } .body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; } /* ---------- Верхняя строка ---------- */ .topbar { display: flex; align-items: center; gap: 8px; min-height: var(--topbar-h); padding: 0 8px; padding-top: env(safe-area-inset-top); border-bottom: 1px solid var(--sep); background: var(--bg-elev); } .title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; } .iconbtn { display: inline-flex; align-items: center; justify-content: center; /* 44×44 - минимум Apple для зоны нажатия (фаза 9.2 приложения). */ width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--accent); cursor: pointer; } .iconbtn:hover { background: var(--bg-row-selected); } .iconbtn:disabled { color: var(--inactive); cursor: default; } .iconbtn:disabled:hover { background: transparent; } .iconbtn svg { width: 20px; height: 20px; fill: currentColor; } .searchfield { width: min(280px, 42vw); height: 32px; padding: 0 10px; border: 1px solid var(--sep); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; } /* ---------- Панели ---------- */ .panes { display: flex; flex: 1 1 auto; min-height: 0; } .pane { overflow-y: auto; -webkit-overflow-scrolling: touch; } .listpane { flex: 0 0 auto; /* Ширина в телефоне - вся полоса; в сплите её ставит layout.js долей окна. */ width: 100%; border-right: 0; } .pagepane { flex: 1 1 auto; min-width: 0; display: flex; } .resizer { flex: 0 0 6px; cursor: col-resize; background: var(--sep); background-clip: content-box; border-left: 2px solid transparent; border-right: 2px solid transparent; } .resizer:focus-visible { outline: 2px solid var(--accent); } /* ---------- Строка списка тем ---------- */ .rows { list-style: none; margin: 0; padding: 0; } .row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--row-h); padding: 6px 10px; border: 0; border-bottom: 1px solid var(--sep); background: transparent; color: var(--text); font: inherit; text-align: start; cursor: pointer; } .row:hover { background: var(--bg-elev); } .row[aria-current="true"] { background: var(--bg-row-selected); } /* Значок темы: квадрат постоянного размера, в углу счётчик детей, сверху * кружок «новое» или галочка «изучено» - ровно как в приложении. */ .row-icon { position: relative; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 7px; background: var(--bg-elev); display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: 11px; font-weight: 600; } .row-mark { position: absolute; top: -3px; inset-inline-end: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--new); } /* Галочка «изучено» стоит НА МЕСТЕ кружка и того же цвета: она часть того * же рисунка значка (правка владельца 02.09.2026). */ .row-mark.studied { background: transparent; color: var(--new); font-size: 11px; font-weight: 900; line-height: 10px; text-align: center; } .row-text { flex: 1 1 auto; min-width: 0; } .row-caption { display: block; font-size: 17px; } .row-detail { display: block; margin-top: 2px; font-size: 12px; color: var(--text-dim); } .row-chevron { flex: 0 0 auto; color: var(--inactive); } .row-lock { flex: 0 0 auto; color: var(--inactive); } /* ⚠️ Размер значку строки нужен ЯВНЫЙ. `icon()` не ставит ни `width`, ни * `height` (кнопкам их даёт `.iconbtn svg`), а svg без размеров в * flex-строке получает нулевую ширину и не рисуется вовсе: и замок, и * стрелка «внутрь» были невидимы, хотя в разметке стояли. Поймано живой * проверкой 03.09.2026 - на снимке экрана нулевой значок неотличим от * значка, которого не поставили. */ .row-chevron svg, .row-lock svg { display: block; width: 16px; height: 16px; } /* Строка результата поиска: две цели-соседки (название открывает пример, * путь ведёт в раздел). ⚠️ Вложить вторую кнопку внутрь первой нельзя - * проверено на iOS: вложенный контрол забирает нажатия по всей строке. */ .row.two-target { cursor: default; } .row.two-target .row-caption, .row.two-target .row-detail { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; } .row.two-target .row-detail { color: var(--accent); font-size: 12px; } /* ---------- Шапка списка: «Пройдено N из M · Продолжить» ---------- */ .progressline { display: flex; align-items: baseline; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--sep); font-size: 12px; color: var(--text-dim); } .progressline .link { padding: 0; border: 0; background: transparent; color: var(--accent); font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pathline { padding: 6px 10px; border-bottom: 1px solid var(--sep); font-size: 12px; color: var(--text-dim); } /* ---------- Страница примера ---------- */ /* Страница - КОЛОНКА: код с кнопками сверху, полоса результата прогона снизу * (подфаза 23.6). Полоса прижата к низу и растёт вверх, поэтому у колонки * обязана быть высота: без неё `sticky` не к чему прижиматься. */ .page { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; height: 100%; overflow: hidden; } /* Строка «код плюс стопка кнопок». `min-height: 0` обязателен: без него * колонка не даёт строке сжаться, и полоса результата уезжает за нижний край * панели вместо того, чтобы отнять место у кода. */ .page-main { display: flex; flex: 1 1 auto; min-width: 0; min-height: 0; } .page-frame { flex: 1 1 auto; min-width: 0; border: 0; background: var(--code-bg); } /* Стопка кнопок справа от кода - как в приложении. */ .page-actions { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; padding: 4px; border-inline-start: 1px solid var(--sep); background: var(--bg-elev); } /* Подписи под значками - ТОЛЬКО в сплите (разбор удобства iPad 30.08.2026): * на телефоне пять подписей отняли бы у кода треть ширины, на десктопе есть * подсказка под курсором. */ .page-actions .iconbtn-label { display: none; } .shell[data-layout="split"] .page-actions .iconbtn { flex-direction: column; gap: 2px; width: 84px; height: auto; padding: 6px 2px; } .shell[data-layout="split"] .page-actions .iconbtn-label { display: block; font-size: 11px; line-height: 1.15; color: var(--text-dim); text-align: center; } /* Отмеченное «изучено» - фиолетовым, тем же цветом, что галочка в строке * списка: одно действие обязано читаться одним цветом в обоих местах. */ #studiedButton[aria-pressed="true"] { color: var(--new); } .placeholder { margin: auto; padding: 24px; color: var(--text-dim); text-align: center; } /* ---------- Панель языков ---------- */ .langbar { display: flex; gap: 6px; align-items: center; min-height: var(--langbar-h); padding: 6px 8px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid var(--sep); background: var(--bg-elev); overflow-x: auto; /* Панель стоит ПОД панелями и не участвует в их прокрутке. */ flex: 0 0 auto; /* Растворение у краёв - порт `.mask(scrollFadeMask)` из * `LangTabItemListView.swift` (разбор удобства 30.08.2026): языки не * помещаются в ширину экрана, и крайний обрезается ровно посередине - * это читается как поломка вёрстки, а не как приглашение прокрутить. * * ⚠️ Доли те же, что на iOS (0 - 2% - 98% - 100%), и полоса растворения * узкая намеренно: шире - и обрезается сам значок языка. * * ⚠️ Про направление письма здесь думать НЕ НАДО, и это не забывчивость: * растворение симметрично, поэтому `to right` и `to left` дают один и тот * же рисунок. В `dir="rtl"` панель зеркалится браузером вместе с * прокруткой, а маска остаётся верной сама собой. * * ⚠️ Префиксное свойство рядом с обычным: Safari до 15.4 знает только * `-webkit-mask-image`, а приложение открывают и со старых айпадов. */ -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2%, #000 98%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 2%, #000 98%, transparent 100%); } .langcol { flex: 0 0 auto; width: 168px; padding: 8px; padding-top: calc(8px + env(safe-area-inset-top)); border-inline-end: 1px solid var(--sep); background: var(--bg-elev); overflow-y: auto; /* Та же панель, только стоймя (раскладка мака): семнадцать языков в * невысоком окне не помещаются, и обрезанный снизу язык выглядит так же * неверно, как обрезанный сбоку. Ось другая, доли те же. */ -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 2%, #000 98%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 2%, #000 98%, transparent 100%); } .langbtn { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 10px; border: 1px solid transparent; border-radius: 9px; background: var(--bg); color: var(--text); font: inherit; white-space: nowrap; cursor: pointer; } .langcol .langbtn { width: 100%; margin-bottom: 4px; } /* Логотип в строке языка: в сетке первого экрана он 32 px, в строке - 22, * ровно как знак приложения у кнопки «Все языки» рядом (`.langbtn-appicon`), * чтобы колонка читалась одним ритмом. */ .langbtn .langlogo { width: 22px; height: 22px; } .langbtn .langlogo .badge { font-size: 9px; padding: 0; width: 22px; height: 22px; } .langbtn[aria-current="true"] { border-color: var(--accent); color: var(--accent); font-weight: 600; } .langbtn .badge { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 4px; border-radius: 6px; background: var(--inactive); color: #fff; font-size: 11px; font-weight: 700; } /* ---------- Экран языков и настроек ---------- */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; padding: 12px; } .card { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--sep); border-radius: 12px; background: var(--bg-elev); color: var(--text); font: inherit; text-align: start; cursor: pointer; } .card:hover { border-color: var(--accent); } .form { /* Одна колонка на все вкладки настроек - число с iPad (31.08.2026): * форма во всю ширину 13 дюймов выдавала себя не текстом, а чертой. */ max-width: 700px; padding: 12px; } .form h2 { font-size: 15px; font-weight: 600; margin: 18px 0 6px; } .field { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 4px 0; border-bottom: 1px solid var(--sep); } .field select, .field input[type="range"] { font: inherit; } /* Строка с текстовым полем (почта и пароль на экране входа): подпись слева * своей ширины, поле сразу за ней и во всю оставшуюся ширину до разумного * потолка. Раньше поле без стилей стояло у правого края в полуметре от * подписи и было ростом со строку (владелец, 05.09.2026). Кегль 16 - ниже * него iPhone приближает страницу при фокусе. */ .field-text { justify-content: flex-start; gap: 16px; } .field-text > span { flex: 0 0 auto; min-width: 88px; } .acc-input { flex: 1 1 auto; min-width: 0; max-width: 420px; min-height: 40px; padding: 6px 12px; border: 1px solid var(--sep); border-radius: 10px; background: var(--bg-elev); color: var(--text); font: inherit; font-size: 16px; } .acc-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* ---------- Раскладки ---------- */ /* Телефон: одна полоса, страница примера занимает её целиком. */ .shell[data-layout="phone"] .listpane { width: 100%; } .shell[data-layout="phone"] .pagepane { width: 100%; } /* Сплит и десктоп: список слева, страница справа, между ними разделитель. */ .shell[data-layout="split"] .listpane, .shell[data-layout="desktop"] .listpane { border-inline-end: 1px solid var(--sep); } /* Панель языков внизу - только там, где нет колонки языков слева. */ .shell[data-layout="desktop"] .langbar { display: none; } /* ---------- Полоса загрузки банка (подфаза 23.2) ---------- */ /* Первый заход ждёт банк: полтора мегабайта архива по сети. Полоса стоит на месте списка тем - там, где через секунду появятся сами темы, а не отдельным экраном поверх: так переход не выглядит скачком. */ .loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 40vh; padding: 24px; text-align: center; } .loading-caption { margin: 0; color: var(--text-dim); } .loading-track { width: min(280px, 70%); height: 4px; border-radius: 2px; background: var(--sep); overflow: hidden; } .loading-bar { width: 0; height: 100%; background: var(--accent); /* Плавно, но коротко: длинный переход отстаёт от настоящей доли и на конце догоняет её рывком. */ transition: width 120ms linear; } /* Длина неизвестна (нет Content-Length) - полосе нечего показывать, остаются мегабайты числом. */ .loading-track.unknown { display: none; } .loading-percent { margin: 0; font-variant-numeric: tabular-nums; color: var(--text-dim); } /* ---------- Предрендер: полоса поверх и статическое содержимое (24.1) ---- */ /* На статической странице содержимое УЖЕ есть, и полоса не занимает его место, а ложится узкой лентой сверху: ради этого страница и собиралась - чтобы человек читал текст с первой секунды. Лента уходит, как только банк приехал (`main.js#boot`). */ .loading.over { position: fixed; inset: 0 0 auto 0; z-index: 40; flex-direction: row; align-items: center; justify-content: center; min-height: 0; padding: 6px 12px; gap: 12px; background: var(--bg); border-bottom: 1px solid var(--sep); font-size: 13px; } /* Полоса в ленте - шире и тоньше: она тут не главная, а подпись рядом. */ .loading.over .loading-track { width: min(200px, 40vw); height: 3px; } /* Статическая страница примера: тот же текст, что уедет во фрейм после гидратации, но прямо в панели. ⚠️ Фреймом его роботу отдавать бесполезно - содержимое чужого документа к странице-хозяйке не относится, и в выдачу попадёт пустая оболочка. ⚠️ Цветов у кода тут нет намеренно: под CSP `style-src 'self'` атрибуты `style` всё равно не применяются, и генератор их снимает (см. `tools/prerender.mjs#pageBodyMarkup`: с ними одна страница давала 47 отказов CSP в консоли, без них - ноль). Цвета вернутся через кадр - вместе с фреймом. */ .page-pre { flex: 1; min-height: 0; overflow: auto; padding: 8px 12px; font-family: var(--font-code); font-size: 15px; line-height: 1.35; background: var(--code-bg); color: var(--text); } /* Длинная строка кода скроллит СВОЙ блок, а не всю страницу вбок. */ .page-pre p, .page-pre ol { margin: 0; } /* Тизер платного примера (решение владельца 22): название, замок и дорога в магазины - без кода. Разметка `.acc-lock` из `css/account.css` подходит целиком; своё здесь только поле сверху, потому что панель у неё пустая. */ .pre-lock { margin: 24px auto; } /* === страница примера: редактор, пределы, словарь === */ /* Уведомление и попап словаря позиционируются АБСОЛЮТНО поверх страницы - * `.page` обязана быть точкой отсчёта. Остальные её свойства (флекс-колонка, * высота) уже заданы выше - это только добавка, а не замена. */ .page { position: relative; } /* ---------- Редактор примера (подключение подфазы 23.8) ---------- */ /* Хозяйство редактора занимает то же место, что строка «код + кнопки» * (`.page-main`): вид самого редактора - в `css/editor.css`, здесь только * то, что касается его МЕСТА внутри страницы. */ .editor-host { display: flex; flex: 1 1 auto; min-height: 0; min-width: 0; } /* ⚠️ `min-width: 0` редактору ОБЯЗАТЕЛЕН, и это не украшение вёрстки. * Элемент флексбокса по умолчанию не ужимается ниже своего содержимого * (`min-width: auto`), а содержимое здесь - верхняя строка редактора с * названием примера и тремя кнопками. На телефоне она требует 610 px в окне * шириной 375: редактор вылезал за экран вместе с «Сохранить» и «Отмена» - * то есть выйти из правки было нечем. Ужиматься умеет ровно заголовок * (`css/editor.css: .editor-caption`), но до этого правила дело не доходило. * Поймано живой проверкой 04.09.2026 на своём примере. */ .editor-host > .editor { flex: 1 1 auto; min-width: 0; } /* ---------- Предел бесплатного издания исчерпан (пункт «Б») ---------- */ /* Небольшая карточка поверх страницы/редактора - порт системного алерта * приложения (`.alert(ProTitle) { Text(UnlockPro...) }`), только с * кликабельной ссылкой в магазин: обычный `alert()` её дать не может. */ .limit-notice { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 5; max-width: 360px; margin-inline: auto; padding: 14px 16px; border-radius: 12px; background: var(--bg-elev); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); } /* Уведомление, которое САМО стало страницей (исчерпанная квота платного * примера, подфаза 23.11): собирать под ним нечего, всплывать не над чем. * В потоке и сверху - иначе у нижнего края пустой панели оно читается как * случайно уехавшая плашка. Тени тоже нет: она поднимала бы над страницей то, * что и есть страница. * * ⚠️ `align-self` и `flex` тут обязательны: `#pagePane` - флекс-СТРОКА, и * обычный потоковый ребёнок в ней растягивается на всю высоту панели и * сжимается по ширине. Замерено живьём: коробка в одну строку текста вышла * 132×321. */ .limit-notice.limit-standalone { position: static; align-self: flex-start; flex: 0 1 auto; width: 100%; margin: 24px auto 0; border: 1px solid var(--sep); box-shadow: none; } .limit-title { margin: 0 24px 4px 0; font-size: 15px; font-weight: 600; } .limit-text { margin: 0; font-size: 13px; line-height: 1.4; color: var(--text-dim); } .limit-close { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: none; border-radius: 14px; background: none; color: var(--text-dim); cursor: pointer; } .limit-close:hover { background: var(--row-hover, rgba(128, 128, 128, 0.12)); } /* Та же строка ссылок, что у замка платной темы (`.acc-storelist`) - решение * не заводить второй вид для одного и того же действия «идти в магазин». */ .limit-storelist { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } /* ⚠️ Столбиком: под именем издания имя магазина, иначе на Android две * ссылки подряд подписаны одинаково (см. `.acc-storelist` и витрину). */ .limit-storelist a { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 36px; padding: 4px 12px; color: var(--accent); text-decoration: none; font-size: 13px; border: 1px solid var(--sep); border-radius: 8px; } .limit-storelist a:hover { background: var(--bg-row-selected); } .limit-store-where { color: var(--text-dim); font-size: 12px; } /* ---------- Словарь по нажатому слову (пункт «В») ---------- */ /* Подложка - только на телефоне (лист снизу перекрывает страницу целиком); * на планшете и десктопе попап - плавающая панель, подложки под ней нет, * страница рядом остаётся видимой и рабочей. */ /* Справка словаря - ЛИСТ В НИЖНЕЙ ЧАСТИ ОКНА, на ВСЕХ раскладках (слово * владельца 05.09.2026). Прежде на планшете и маке это была панель у правого * края с подложкой; подложка перехватывала нажатия по коду, и правило «другое * слово обновляет справку» было недостижимо в принципе - см. шапку * `js/app/views/dictionary.js`. Подложки (`.dic-backdrop`) больше нет ни в * разметке, ни здесь. * * ⚠️ Высоту задаёт СКРИПТ (`dictionary.js`, доли окна как у полосы * результата), а не эта таблица: её тянут ручкой, и число обязано быть одно. */ .dic-popup { position: absolute; z-index: 7; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; background: var(--bg); border-top: 1px solid var(--sep); border-radius: 14px 14px 0 0; /* Та же тень, что у полосы результата, и по той же причине: на светлой * теме фон листа и фон кода под ним отличаются на полпроцента, и границу * держала бы одна волосяная линия - её на экране не видно. */ box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18); overflow: hidden; } .dic-frame { flex: 1 1 auto; min-height: 0; border: 0; background: var(--code-bg); } .dic-close { position: absolute; top: 8px; right: 8px; z-index: 1; width: 32px; height: 32px; border: none; border-radius: 16px; background: var(--bg-elev); color: var(--text); cursor: pointer; } .dic-close:hover { background: var(--row-hover, rgba(128, 128, 128, 0.12)); } /* === список тем, шапка, раскладки === */ /* ---------- RTL: значки со стрелкой зеркалятся ---------- */ /* ⚠️ Логические свойства (`inset-inline-end`, `text-align: start`) уже * переворачивают расположение при `dir="rtl"` сами - это работа браузера. * Но сам РИСУНОК стрелки (путь в SVG) нарисован для LTR раз и навсегда: * без зеркала «шеврон вперёд» в арабском/иврите указывал бы НАЗАД, * а «назад» в шапке - вперёд. Проверено живьём на `ar` (волна 4). */ [dir="rtl"] .row-chevron svg, [dir="rtl"] #backBtn svg { transform: scaleX(-1); } /* ---------- Кнопка «+» «Моих примеров» и «Поделиться» в шапке ---------- */ /* Те же 44×44, что у остальных кнопок шапки - `.iconbtn` их уже даёт, * здесь только скрытие там, где действие сейчас недоступно. */ #addBtn[hidden], #shareHeaderBtn[hidden] { display: none; } /* ---------- Диалоги «+»: выбор, имя, предел ---------- */ /* ⚠️ Родное ``, а не свой оверлей: модальность, ловушка фокуса и * Escape достаются бесплатно от браузера, а свой велосипед ради трёх экранов * (выбор / имя / предел) столько же кода не экономит. */ .userdlg { box-sizing: border-box; width: min(360px, calc(100vw - 32px)); padding: 16px; border: 1px solid var(--sep); border-radius: 12px; background: var(--bg); color: var(--text); font: inherit; } .userdlg::backdrop { background: rgba(0, 0, 0, 0.4); } .userdlg h2 { margin: 0 0 12px; font-size: 17px; font-weight: 600; } .userdlg p { margin: 0 0 16px; color: var(--text-dim); } .userdlg-choices { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; } .userdlg-choice { text-align: start; } .userdlg-input { box-sizing: border-box; width: 100%; height: 40px; margin-bottom: 16px; padding: 0 10px; border: 1px solid var(--sep); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; } .userdlg-actions { display: flex; justify-content: flex-end; gap: 8px; } .userdlg-btn { min-height: 36px; padding: 6px 14px; border: 1px solid var(--sep); border-radius: 8px; background: var(--bg-elev); color: var(--text); font: inherit; cursor: pointer; } .userdlg-btn:hover { border-color: var(--accent); } .userdlg-primary { border-color: var(--accent); background: var(--accent); color: #fff; } .userdlg-primary:disabled { opacity: 0.5; cursor: default; } /* Кнопка, которая теряет работу («Не сохранять» у вопроса о правке). Красная, * как `role: .destructive` в алертах приложения, и она НЕ основная: основной * тут отказ, и фокус стоит на нём (`views/userDialogs.js`). */ .userdlg-danger { border-color: var(--danger); color: var(--danger); } .userdlg-danger:hover { border-color: var(--danger); background: var(--danger); color: #fff; } /* ---------- Подтверждение копирования ссылки (Web Share API недоступен) ---------- */ /* Тихое, само гаснущее подтверждение под кнопкой «Поделиться»: копирование в * буфер обмена происходит без единого визуального отклика по умолчанию, и * без этой строки человек нажимал бы кнопку по нескольку раз, не понимая, * сработало ли что-то. */ .toast { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 8px 16px; border-radius: 8px; background: var(--text); color: var(--bg); font-size: 13px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); z-index: 1000; pointer-events: none; } /* ---------- Тема по выбору: системные элементы тоже ---------- */ /* ⚠️ Переменных цвета МАЛО. `color-scheme` объявлен наверху как `light dark`, * то есть выпадающие списки, флажки, ползунок кегля, полосы прокрутки и рамка * фокуса рисуются браузером по СИСТЕМНОЙ теме, а не по выбранной. На тёмной * системе выбор «светлая» давал белую страницу с чёрными системными * элементами - ровно то, ради чего пункт «Тема» и заводился. Атрибут ставит * `applyTheme` в `main.js`, здесь только следствие для встроенных элементов. * * Положения «по системе» (атрибута нет) эти правила не касаются: там * `color-scheme: light dark` наверху и есть верный ответ. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* ---------- Редактор своего примера в панели страницы ---------- */ /* ⚠️ `.pagepane` - флексбокс (страница примера растягивается в нём фреймом), * и редактор, смонтированный в него напрямую (`renderOwnExample` в * `main.js`), приходит обычным элементом флекса: без этой строки он берёт * ширину по содержимому - 210px в панели 428px, а поле кода вместе с ним. * Высоту он занимает сам (`height: 100%` в `css/editor.css`), ширины у него * своей нет и быть не должно: её задаёт то место, куда его положили. */ .pagepane > .editor { flex: 1 1 auto; min-width: 0; } /* ---------- Витрина «в приложении - все темы» (подфаза 23.9) ---------- */ /* Порт строки `OtherAppsRow` из «О программе» приложения: черта, заголовок, * пояснение, ссылки именами изданий. Место у неё два (`views/showcase.js`): * под списком КОРНЯ языка и последней строкой настроек. * * ⚠️ Ширина ограничена тем же числом 700, что у формы настроек и замка: во * всю ширину монитора строка выдаёт себя не словами, а чертой (замер на iPad * 31.08.2026). Поля - как у строк списка, иначе витрина висит левее их. */ .showcase { display: block; max-width: 700px; margin: 8px auto 0; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--sep); } .showcase-title { margin: 0; font-size: 15px; font-weight: 600; } /* Пояснения - тише заголовка: это ответ на «зачем», а не название раздела. */ .showcase-pitch, .showcase-note { margin: 4px 0 0; color: var(--text-dim); font-size: 13px; } .showcase-links { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } /* ⚠️ Высота 44 - тот же палец, что у строк списка (`--row-h`): ссылка в * магазин это конец дороги роста, и промахиваться по ней нельзя. * * Название магазина - ВТОРОЙ строкой внутри той же ссылки: на Android у * каждого издания две дороги (Google Play и RuStore), и без него в столбик * встают четыре кнопки с двумя парами одинаковых надписей. */ .showcase-links a { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: var(--row-h); padding: 4px 14px; border: 1px solid var(--sep); border-radius: 10px; color: var(--accent); text-decoration: none; } .showcase-links a:hover { background: var(--bg-row-selected); } .showcase-store { color: var(--text-dim); font-size: 12px; } /* === витрина, поиск, полоса языков === */ /* Разбор дизайна и удобства 04.09.2026 (`docs/web_ux_review.md`), пункты * 1, 2, 4, 7, 8: первый экран, пустая правая панель, полоса языков, поиск и * мелочи оболочки. Всё, что ниже, дописано одной работой и одним куском * намеренно - чтобы следующему было видно, что это одна правка, а не * пятнадцать разных. */ /* ---------- Логотипы языков (п. 1) ---------- */ /* ⚠️ Размер задаётся КОРОБКЕ, а не картинке: пока логотип не приехал (или не * приедет вовсе - см. `langLogo` в `views/langs.js`), на его месте стоят две * буквы `.badge`, и без размера у коробки карточка дёргалась бы при загрузке. */ .langlogo { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; } .langlogo-img { width: 100%; height: 100%; /* `contain`, а не `cover`: логотипы разной формы (у Go длинный, у Python * квадратный), и обрезка съела бы половину знака. */ object-fit: contain; /* ⚠️ Без скругления: у Kotlin логотип во весь квадрат, и радиус на самой * картинке срезал ему углы (владелец, 05.09.2026). Скруглять можно * подложку `.langlogo`, но не рисунок. */ } /* ---------- Первый экран: витрина продукта (п. 1) ---------- */ .home { /* Та же ширина 700, что у формы настроек и витрины магазинов: во всю * ширину монитора фраза о продукте выдаёт себя не словами, а чертой. */ max-width: 700px; margin: 0 auto; padding: 16px 12px calc(16px + env(safe-area-inset-bottom)); } /* Первое, что читает гость из поисковика. Крупнее строк списка и тем более * крупнее подписей - это заголовок продукта, а не подпись под ним. */ .home-pitch { margin: 0 4px 16px; font-size: 19px; line-height: 1.35; font-weight: 600; } /* Сетка языков внутри витрины стоит без своих отступов сверху: их уже дала * фраза о продукте. */ .home .grid { padding: 0; } .home-try { margin-top: 20px; } .home-try-title { margin: 0 4px 8px; font-size: 15px; font-weight: 600; color: var(--text-dim); } .home-try-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .home-try-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: var(--row-h); padding: 8px 12px; border: 1px solid var(--sep); border-radius: 12px; background: var(--bg-elev); color: var(--text); font: inherit; text-align: start; cursor: pointer; } .home-try-item:hover { border-color: var(--accent); } /* ▶ - тот же закрашенный треугольник, что запускает код на странице примера. * Кружком и цветом акцента: обещание «код запускается прямо в браузере» стоит * строкой выше, и знак обязан быть узнаваем. */ .home-try-play { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 16px; background: var(--accent); color: #fff; } .home-try-play svg { display: block; width: 14px; height: 14px; fill: currentColor; } .home-try-text { flex: 1 1 auto; min-width: 0; } .home-try-name { display: block; font-size: 17px; } .home-try-path { display: block; margin-top: 2px; font-size: 12px; color: var(--text-dim); } /* ---------- Карточка языка: логотип, название, число примеров (п. 1) ---------- */ .card-text { min-width: 0; } .card-caption { display: block; font-size: 17px; } .card-count { display: block; margin-top: 2px; font-size: 12px; color: var(--text-dim); } .card[aria-current="true"] { border-color: var(--accent); } /* ---------- Кнопка «Все языки» в полосе языков (вопрос про шестерёнку) ---------- */ /* ⚠️ Знак приложения ровно той же высоты, что строка языка рядом * (`.langbtn` - min-height 36): кнопка обязана читаться как ещё одна строка * полосы, а не как значок другого рода. */ /* Скрытые SVG-определения (маска значка): вне потока, иначе нулевой SVG * занимает строку. Инлайновый style атрибутом CSP не пропустит. */ .svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; } /* Рамка Apple: суперэллипс (маска в index.html), волосяная обводка изнутри * через ::after (обычный box-shadow обрезается маской вместе с элементом) и * тень по форме маски через filter - box-shadow по обрезанному элементу не * рисуется. Размер задаёт вложенный знак. */ .langbtn-appicon-frame { flex: 0 0 auto; position: relative; display: inline-block; line-height: 0; /* Отрицательные поля съедают прибавку размера знака, чтобы строка * колонки не росла вместе с ним. */ margin: -6px 0 -4px -6px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)); } .langbtn-appicon-frame::after { content: ""; position: absolute; inset: 0; clip-path: url(#appIconMask); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); pointer-events: none; } .langbtn-appicon { clip-path: url(#appIconMask); display: block; /* Крупнее логотипов языков (22 px) - владелец, 05.09.2026: знак * приложения в углу главнее строки языка и не должен теряться в ряду. * Ещё на 20% крупнее и чуть левее-выше - его же слово тем же днём, * и ещё на 10% (38 -> 42) той же ночью. */ width: 42px; height: 42px; } /* ---------- Правая панель, пока пример не выбран (п. 2) ---------- */ /* Описание раздела рисуется тем же отдельным документом, что страница примера * (`/frame.html`): описания в банке - это HTML со ссылками, таблицами и * ``, а оболочка живёт под CSP без `unsafe-inline`. */ .desc-frame { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: var(--code-bg); } /* Корень языка: «Продолжить» и последние открытые. * * ⚠️ `align-self: flex-start` и своя ширина обязательны: `#pagePane` - флекс- * СТРОКА, и обычный потоковый ребёнок в ней растянулся бы на всю высоту и * сжался по ширине (та же грабля, что у `.limit-standalone`). */ .rootpane { align-self: flex-start; flex: 0 1 auto; width: 100%; max-width: 700px; margin: 0 auto; padding: 24px 16px; } .rootpane-resume { margin: 0 0 20px; } .rootpane-resume-link { padding: 0; border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 17px; font-weight: 600; text-align: start; cursor: pointer; } .rootpane-title { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--text-dim); } .rootpane-list { list-style: none; margin: 0; padding: 0; } .rootpane-link { display: block; width: 100%; min-height: 36px; padding: 6px 0; border: 0; border-bottom: 1px solid var(--sep); background: transparent; color: var(--text); font: inherit; text-align: start; cursor: pointer; } .rootpane-link:hover { color: var(--accent); } /* ---------- Полоса языков: растворение краёв и уход при прокрутке (п. 4) ---------- */ /* ⚠️ Растворение считается В ТОЧКАХ, а не долями. Доли (0 - 2% - 98% - 100%) * перенесены с iOS дословно, и на широкой панели они верны, а на телефоне 2% * от 390 - это восемь точек: надпись под ними почти непрозрачна, и край * по-прежнему читается как обрезанный, а не как приглашение прокрутить. Так и * было поймано на разборе 04.09.2026: «Objective-C» показан как «bjective-C». * Двадцать четыре точки - это примерно две буквы того же кегля, и рисунок у * широкой полосы от этого не портится. * * ⚠️ Про направление письма думать по-прежнему не надо: растворение * симметрично, и в `dir="rtl"` рисунок тот же. */ .langbar { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); transition: margin-bottom 180ms ease, opacity 180ms ease; } .langcol { /* ⚠️ Растворение ТОЛЬКО снизу: верхний край колонки не прокручивается * (первая строка всегда на месте), и верхняя маска гасила знак * приложения у кнопки «Все языки» - владелец 05.09.2026 увидел * «затемнённый верх логотипа». */ -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 24px), transparent 100%); } /* Полоса ушла вниз: читают вниз - полоса не нужна, повели вверх - вернулась * (тот же приём, что у адресной строки браузера). * * ⚠️ Уезжает ОТРИЦАТЕЛЬНЫМ полем, а не `transform`: полоса стоит в колонке * флексбокса, и сдвиг трансформацией оставил бы под ней пустое место высотой в * саму полосу - код не получил бы ни точки из того, ради чего всё делается. */ .langbar.langbar-away { margin-bottom: calc(-1 * (var(--langbar-h) + env(safe-area-inset-bottom))); opacity: 0; pointer-events: none; } /* Уважение к тем, кто выключил анимацию в системе. */ @media (prefers-reduced-motion: reduce) { .langbar { transition: none; } } /* ---------- Поиск: где стоит поле и что говорит выдача (п. 7) ---------- */ /* Телефон: строка поиска ВТОРОЙ СТРОКОЙ шапки, прямо над списком тем. * * ⚠️ Перенос строки объявлен ШАПКЕ, а само поле уезжает вниз порядком * (`order`), а не переносом: перенос двигает элемент, только если он последний * по порядку в контейнере, а после него стоит стопка действий. Ради этого поле * и вынуто из стопки действий в разметке (`index.html`). * * ⚠️ Поле показывается не всегда, а только на экранах со списком тем * (`main.js: setTopbar`, признак `listScreen`): на странице примера вторая * строка шапки отняла бы у кода ряд, которого ему и так не хватает. */ .shell[data-layout="phone"] .topbar { flex-wrap: wrap; row-gap: 6px; padding-bottom: 6px; } /* ⚠️ Шапке ЗАПРЕЩЕНО сжиматься, и без этой строки вторая её строка рисуется * ПОВЕРХ списка тем. `.body` - колонка флексбокса, у `.panes` базовый размер * равен высоте всего списка (полсотни строк), свободного места отрицательно, и * браузер честно ужимает всех, кто может, - шапку до её `min-height` 48. Одна * строка в 48 помещалась, две - нет. Полоса языков от этого защищена той же * строкой с самого начала (`.langbar { flex: 0 0 auto }`), шапке она не * понадобилась, пока шапка была однострочной. Поймано живой проверкой * 04.09.2026: поле поиска лежало на первых строках списка. */ .topbar { flex: 0 0 auto; } .shell[data-layout="phone"] .searchfield { order: 10; flex: 1 1 100%; width: auto; height: 36px; } /* Ответ поиска, когда не нашлось ничего: занимает место списка, а не висит * тихой серой строчкой над пустотой - иначе пустой экран остался бы тем же * пустым экраном, только с подписью, которую никто не читает. */ #searchSummary.placeholder { max-width: 420px; line-height: 1.4; } /* ---------- Мелочи разбора (п. 8) ---------- */ /* Образец кегля рядом с ползунком: «Aa» тем самым шрифтом и тем самым * размером, который ползунок и выбирает. Ширина фиксирована - иначе строка * настроек дёргалась бы на каждом делении. */ .field-control { display: inline-flex; align-items: center; gap: 12px; } .font-sample { display: inline-block; min-width: 44px; font-family: var(--font-code); line-height: 1; color: var(--text-dim); text-align: end; } /* Подпись у кнопки шапки: по умолчанию её нет нигде (`iconButton` ставит её * всем, а показывает - место). */ .topbar .iconbtn-label { display: none; } /* Телефон: «+» с подписью. Значок в шапке телефона не объяснён ничем - ни * подсказки под курсором, ни соседней надписи, - и завести свой пример гостю * было неоткуда узнать. */ .shell[data-layout="phone"] #addBtn { width: auto; gap: 4px; padding: 0 10px; } .shell[data-layout="phone"] #addBtn .iconbtn-label { display: block; font-size: 13px; white-space: nowrap; } /* Хлебные крошки над списком: 12px читались с трудом, и цвет у них был тот же, * что у подписей строк. Крупнее и с явной чертой снизу - это путь, а не * подпись. Показываются во ВСЕХ раскладках, телефон включительно. */ .pathline { font-size: 13px; line-height: 1.3; } /* ---------- Разделы настроек (владелец, 05.09.2026) ---------- */ /* Колонка разделов стоит НА МЕСТЕ колонки языков и повторяет её размеры: это * буквально одно и то же место экрана, и разная ширина читалась бы как прыжок * содержимого при входе в настройки. Показывается она, в отличие от языков, и * на планшете - там колонки языков нет вовсе, а разделам она нужна: иначе * четыре закладки приложения превращались бы в лишнюю страницу стека. */ .settingscol { flex: 0 0 auto; width: 168px; padding: 8px; padding-top: calc(8px + env(safe-area-inset-top)); border-inline-end: 1px solid var(--sep); background: var(--bg-elev); overflow-y: auto; } .settingscol-list { display: flex; flex-direction: column; gap: 4px; } .settingsnav-item { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 4px 10px; border: 1px solid transparent; border-radius: 9px; background: var(--bg); color: var(--text); font: inherit; text-align: start; cursor: pointer; } .settingsnav-item:hover { border-color: var(--accent); } /* Выделение активного раздела - той же парой «рамка плюс цвет», что у * активного языка в панели (`.langbtn[aria-current]`): это одно и то же место * экрана, и два разных способа сказать «ты здесь» спорили бы друг с другом. */ .settingsnav-item[aria-current="true"] { border-color: var(--accent); color: var(--accent); font-weight: 600; } .settingsnav-item svg { flex: 0 0 auto; width: 20px; height: 20px; fill: currentColor; } .settingsnav-caption { flex: 1 1 auto; min-width: 0; } /* Шеврон - только у страницы списка на телефоне: там строка ОТКРЫВАЕТ * следующую страницу, и сказать об этом надо тем же знаком, каким об этом * говорит строка раздела в списке тем. */ .settingsnav-chevron { flex: 0 0 auto; color: var(--inactive); } .settingsnav-chevron svg { width: 16px; height: 16px; stroke: currentColor; fill: none; } /* ⚠️ Зеркалится в rtl вместе со всеми шевронами оболочки: там «дальше» - это * влево. Правило рядом с остальными зеркальными значками не поставить - оно * ниже по файлу, а этот блок дописан в конец. */ [dir="rtl"] .settingsnav-chevron svg { transform: scaleX(-1); } .settingspage-list { list-style: none; margin: 0; padding: 12px; max-width: 700px; } .settingspage-list li { margin-bottom: 8px; } /* ---------- Живой образец страницы примера в настройках ---------- */ /* Порт превью `HTMLStringView` из формы настроек: показывает разом шрифт, * кегль, межстрочный интервал, номера строк и перенос длинной строки. Высота * не задана намеренно - три строки её и определяют, а пустое место под ними * в браузере не нужно (на iPhone превью держит 180pt, потому что там оно * рисует НАСТОЯЩУЮ страницу примера, а не три строки). */ .settings-preview { margin: 12px 0 6px; padding: 8px 10px; border: 1px solid var(--sep); border-radius: 8px; background: var(--code-bg); color: var(--text); overflow-x: auto; } .settings-preview-line { display: flex; gap: 10px; } /* Номер строки серым и не выделяется мышью - как на самой странице примера. */ .settings-preview-num { flex: 0 0 auto; min-width: 1.5em; color: var(--inactive); text-align: end; user-select: none; } .settings-preview-code { flex: 1 1 auto; white-space: pre-wrap; word-break: break-word; } /* Перенос выключен - строка уезжает вбок вместе с полосой прокрутки блока, а * не ломается: ровно то, что делает страница примера. */ .settings-preview.nowrap .settings-preview-code { white-space: pre; word-break: normal; } /* ---------- Раздел «Языки» ---------- */ .langlist { list-style: none; margin: 0; padding: 12px; max-width: 700px; } .langlist-row { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--sep); background: var(--bg); } /* Строка, которую тянут, лежит ПОВЕРХ соседей и красится: без этого она * уезжает под них и жест выглядит поломкой. Тот же приём, что `zIndex(1f)` в * `LangListScreen.kt`. */ .langlist-row.dragging { position: relative; z-index: 1; background: var(--bg-row-selected); } .langlist-pick { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; min-height: var(--row-h); padding: 4px 2px; border: 0; background: none; color: var(--text); font: inherit; text-align: start; cursor: pointer; } .langlist-caption { flex: 1 1 auto; min-width: 0; } /* Галочка выбранного - тем же цветом, что и всё выбранное в оболочке. */ .langlist-check { flex: 0 0 auto; color: var(--accent); display: inline-flex; } .langlist-check svg { width: 20px; height: 20px; fill: currentColor; } /* Ручка перетаскивания. ⚠️ `touch-action: none` обязателен: без него палец на * ручке прокручивает страницу, а не тянет строку, и жест не начинается вовсе. * Ширина - 44 точки, минимальная цель нажатия (`MIN_TOUCH_TARGET` Android). */ .langlist-handle { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: none; color: var(--inactive); cursor: grab; touch-action: none; } .langlist-handle:focus-visible { outline: 2px solid var(--accent); border-radius: 8px; } .langlist-handle svg { width: 20px; height: 20px; fill: currentColor; } /* ---------- Раздел «О программе» ---------- */ .about { text-align: center; } .about-mark { width: 72px; height: 72px; border-radius: 16px; } .about-name { font-size: 22px; font-weight: 600; margin: 6px 0 3px; } .about-copy { margin: 0; font-size: 12px; color: var(--text-dim); } .about-rule { height: 1px; margin: 10px 0; border: 0; background: var(--sep); } .about-label { margin: 10px 0 2px; } /* Справочные числа - тем же серым, что строка версии (решение владельца * 18.08.2026): это не то, ради чего экран открывают. */ .about-value { margin: 0; font-size: 12px; color: var(--text-dim); line-height: 1.5; } .about-email { margin-top: 4px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 17px; cursor: pointer; } /* Витрина под «О программе» стоит в ТОЙ ЖЕ колонке, что и форма над ней, * и по центру, как всё на этом экране (владелец, 05.09.2026): на широком * окне форма прижата к левому краю панели, а витрина со своим `margin: auto` * уезжала в середину, и две черты стояли вразнобой. Поля 12px и ширина 676 * повторяют `.form` (700 минус padding), чтобы черта витрины совпала с * чертой `.about-rule` пиксель в пиксель. */ .about + .showcase { max-width: 676px; margin: 8px 12px 0; padding-left: 0; padding-right: 0; text-align: center; } .about + .showcase .showcase-links { justify-content: center; } .about + .showcase .showcase-links a { align-items: center; }