/* Действия страницы примера на ТЕЛЕФОНЕ - п. 3 разбора удобства 04.09.2026. * * ⚠️ Здесь только телефон. Планшет и десктоп рисуются прежними правилами из * `app.css` (стопка кнопок справа от кода, подписи в сплите) и этим файлом не * трогаются вовсе: сама разметка на них строится тем же кодом, что и раньше * (`views/example.js`, ветка `mode !== "phone"`). * * Что чинится. На телефоне колонка из пяти кнопок стояла СПРАВА ОТ КОДА и * отнимала у него 15% ширины (44 px рамки нажатия плюс граница при окне 375): * код с длинными строками переносился или уезжал. В приложении такого нет - * там стопка лежит ОВЕРЛЕЕМ поверх страницы и ширины у кода не берёт * (`HtmlView.swift:74`, `HtmlButtonsView.swift`: `.opacity(0.6)` и * `.frame(maxWidth: .infinity, alignment: .topTrailing)`). * * Порт сделан не буквой, а смыслом: пять полупрозрачных значков поверх кода * на 375 px закрывали бы правый край страницы целиком, поэтому поверх остаются * ДВА - ▶ и «⋯», - а остальные уходят в меню под «⋯» и там впервые получают * видимые подписи (на телефоне их не было нигде, и назначение значка * приходилось угадывать). * * ⚠️ Файл подключается ИЗ `views/example.js`, а не строкой в `index.html`: * каркас в этот час правит соседний сеанс, и трогать его нельзя. Строку * `` надо перенести в ``, * когда сеансы сойдутся, - тогда стили приезжают вместе с остальными, а не * первым же импортом модуля. */ /* Точка отсчёта для оверлея - строка «код плюс действия». Именно она, а не * `.page`: полоса результата прогона живёт в `.page` ниже, и кнопки, привязанные * к странице целиком, легли бы поверх ответа. */ .shell[data-layout="phone"] .page-main { position: relative; } /* Оверлей у нижнего правого края. `inset-inline-end` вместо `right` - в * арабском и иврите оболочка зеркалится целиком (`dir="rtl"`), и кнопки обязаны * уехать к другому краю вместе с ней. */ .shell[data-layout="phone"] .page-actions { position: absolute; inset-block-end: 12px; inset-inline-end: 12px; z-index: 4; flex-direction: column; align-items: flex-end; gap: 8px; padding: 0; border: 0; background: none; } /* Плавающие ▶ и «⋯»: круглые, с подложкой и тенью. Подложка обязательна - * значок без неё лежит прямо на коде и на строке с текстом не читается. * * ⚠️ Подложка `--bg`, а НЕ `--bg-elev`, и обводка акцентом, а не `--sep`. * `--bg-elev` совпадает с фоном кода (`--code-bg`) буква в букву на тёмной * теме (оба `#1c1c1e`) и почти совпадает на светлой (`#f2f2f7` против * `#f7f7f9`): кнопка на коде читалась бы только тенью, а тени на чёрном не * видно вовсе. Замерено в браузере 04.09.2026 на обеих темах. */ .shell[data-layout="phone"] .page-actions > .iconbtn { border: 1px solid var(--accent); border-radius: 22px; background: var(--bg); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); } .shell[data-layout="phone"] .page-actions > .iconbtn:disabled { box-shadow: none; } /* ▶ - главное действие страницы, и оно закрашено акцентом, а не нарисовано * линией: это единственная кнопка, за которой человек приходит на страницу * с исполняемым примером. */ .shell[data-layout="phone"] .page-actions > #runButton { background: var(--accent); border-color: var(--accent); color: #ffffff; } .shell[data-layout="phone"] .page-actions > #runButton:hover { background: var(--accent); } /* Меню под «⋯»: карточка со строками «значок плюс подпись». Строится всегда, * но до нажатия спрятано атрибутом `hidden`. * * ⚠️ Фон `--bg`, а не `--bg-elev`, по той же причине, что и у кнопок выше: * `--bg-elev` равен фону кода, и карточка меню лежала бы на нём без края. * Обводка обязательна вдобавок: на светлой теме белое на `#f7f7f9` - это * разница в полпроцента, и держит границу именно она. */ .page-menu { display: flex; flex-direction: column; min-width: 200px; padding: 4px; border: 1px solid var(--sep); border-radius: 12px; background: var(--bg); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28); } /* ⚠️ Строка меню перебивает `.iconbtn` из `app.css` целиком: там кнопка - * квадрат 44×44 по центру, а здесь строка во всю ширину карточки, с подписью * справа от значка. Без `width: auto` строка осталась бы 44 px, и подпись * вылезала бы за карточку. */ .page-menu .iconbtn { justify-content: flex-start; width: 100%; height: 44px; padding: 0 10px; gap: 10px; border-radius: 8px; color: var(--text); } /* Значок строки остаётся акцентным - как в списке действий приложения. */ .page-menu .iconbtn svg { color: var(--accent); flex: 0 0 auto; } /* Подпись в меню видна ВСЕГДА, и ради неё меню и заведено: пять значков на * телефоне стояли безымянными (то же, что чинил разбор iPad 30.08.2026 - * назначение трёх из пяти по рисунку не угадывалось). */ .page-menu .iconbtn-label { display: block; font-size: 15px; line-height: 1.2; text-align: start; color: var(--text); } /* Кнопка «⋯» нажата - залить её, иначе непонятно, чем открыто меню. * Обводка для этого не годится: у кнопки она акцентная и так. * * ⚠️ Селектор начинается с `.shell[data-layout="phone"]` не для порядка: * правило подложки выше весит (0,4,0), и более короткое (0,3,0) ему * проигрывает. Без этого фон оставался белым, а цвет знака белым уже стал - * три точки исчезали вовсе. Видно только глазами: CSS о проигранной * специфичности не сообщает ничем. Поймано снимком экрана 04.09.2026. */ .shell[data-layout="phone"] .page-actions > .page-more[aria-expanded="true"] { background: var(--accent); color: #ffffff; }