/* webapp-stand-tour-task.css — правила ЭКРАНА ЗАДАНИЯ точки тура. * * ПОЧЕМУ ОТДЕЛЬНЫМ ФАЙЛОМ (одобрено координатором 08.09). Эти правила сносило * из webapp-v3.css ТРИЖДЫ за одну смену, и ни разу не по чьему-то решению. * Причина названа координатором: поезд склеивает ветки через * `cherry-pick -X theirs`, и ветка, несущая СТАРУЮ копию общего файла, * перезаписывает его целиком — вместе со всем, что добавили после её среза. * Конфликта при этом не возникает: CSS остаётся валидным, экран рисуется, * гейты зелёные, а правка просто исчезает. Отдельный файл так не затирается: * ветка со старой копией webapp-v3.css про него ничего не знает. * * ПОДКЛЮЧЕНИЕ — строго ПОСЛЕ webapp-v3.css (см. webappShellScripts в * landing.go). Порядок здесь не косметика: часть правил ниже перебивает * правила v7 из webapp-v3.css, у которых селекторы заведомо весомее * (два :has плюс атрибут проекта). Стоит этот файл раньше — !important * останется, а каскад развернётся, и подложка под кнопкой снова перестанет * рисоваться. Проверять после переноса надо КАДРОМ, а не глазами по коду. */ /* ВОССТАНОВЛЕНО (T10436, 08.09). Этот блок уже был в main коммитом 6e79c61f, а * затем целиком удалён коммитом 71e3e362 «fix(msh): match care question button * colors to Drive (T10311)»: в его дифе по этому файлу 61 строка удаления и НИ * ОДНОЙ строки добавления, то есть правку цвета он не нёс — это потеря при * слиянии, а не решение. Из-за неё на проде 2e42c519 классы st-hide-bottom-nav * и st-task-actions движок ставил (JS-половина доехала), но оформлять их было * нечем: меню «Главная» осталось видимым, кнопка снова уезжала при прокрутке. * Если этот блок опять исчезнет — смотреть слияния, а не логику. */ /* T10436 (Рафаэль, живой прод 08.09, топик 1595) — экран задания точки тура. * 1) Нижнее меню («Главная») на заданиях макетами v7 не предусмотрено и * отъедало низ экрана. Узел меню общий для экрана и переиспользуется * движком, поэтому гасим его классом на body, который ставит * webapp-render-stand-tour только на вопросе и разборе. * 2) Без меню возвращаем странице обычный нижний отступ — иначе внизу * остаётся пустая полоса высотой в панель. */ body.st-hide-bottom-nav .v2-bottom-nav { display: none !important; } body.st-hide-bottom-nav #app.v2-active { /* T10436, вторая приёмка: запас снизу теперь считается под ЗАКРЕПЛЁННУЮ * кнопку. Она стала fixed и вышла из потока — без этого запаса последний ряд * карточек уезжает под неё и его не долистать. 24 px хватало, пока кнопка * оставалась в потоке и занимала место сама. */ padding-bottom: calc(88px + env(safe-area-inset-bottom)); } /* 3) «Экран вверх пододвигаешь, а кнопка вниз проваливается»: кнопка ответа * стояла обычным блоком в конце содержимого. Прижимаем её к низу кадра — * карточки ответов прокручиваются под ней, кнопка остаётся под пальцем. * z-index:60 — тот же слой, что и у общего sticky-CTA (v2-block-cta-sticky), * выше содержимого и ниже модалок. */ /* Селектор с body и .st-has-bg — не украшение: у фоновых точек (а овечка * именно такая) уже есть правило «body .st-question.st-has-bg .actions * {position:relative}» (T9444, чтобы кнопка лежала поверх вуали фото). Оно * весомее короткого «.st-question .actions», и первая версия этой правки * молча не применилась — кадр показал кнопку ВНЕ экрана. Держим оба случая * явно, z-index сохраняем. */ body .st-question .actions.st-task-actions, body .st-question.st-has-bg .actions.st-task-actions { /* T10436, ВТОРАЯ ПРИЁМКА (прод ad4044d8): sticky здесь не работал и работать * не мог. sticky пришпиливает элемент ТОЛЬКО В ПРЕДЕЛАХ РОДИТЕЛЯ: пока низ * .st-question ниже кадра — кнопка стоит у нижнего края, но как только при * прокрутке низ родителя входит в кадр, кнопка едет вместе с ним. Документ на * проде выше окна ровно на 65 px — и кнопка уезжала ровно на 65 px * (y=726→661), и от колеса, и от свайпа. Это не сбой браузера, а поведение * sticky по спецификации: у него не было запаса хода. * * fixed привязывает к КАДРУ, а не к родителю, поэтому геометрия родителя его * больше не достаёт. Проверено, что предков с transform/filter/contain у * #app/.content/.v2-screen нет — иначе fixed сломался бы так же тихо. * Скролл в v2 идёт по документу (см. правило #app.v2-active выше), так что * привязка к кадру здесь и есть то, что просил владелец. */ position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60; margin-bottom: 4px; /* Подложка под кнопкой. Без неё закреплённая кнопка едет ПОВЕРХ карточек * ответов и режет их подписи пополам — видно на кадре первой версии. * Гасим карточки под кнопкой той же вуалью, какой фоновое фото точки * подложено под текст (rgba(247,250,240,.96), T9444), с растушёвкой вверх, * чтобы граница не читалась полосой. */ /* !important здесь не украшение и не лень: у экранов v7 уже есть правило * «… .st-question:has(.st-slide7-art-header) .actions {padding:0;background:none}» * (T10311, оно снимало рамку с блока кнопки). Его селектор с двумя :has и * атрибутом проекта заведомо весомее любого разумного нашего, и без * important подложка молча не рисовалась — проверено кадром: кнопка резала * подписи карточек пополам. Перебиваем ровно две декларации, остальное * (ширина, центровка, отсутствие рамки) остаётся за правилом v7. */ padding-top: 16px !important; } /* Подложка рисуется ОТДЕЛЬНЫМ слоем во всю ширину кадра, а не фоном самого * блока: блок кнопки на экранах v7 узкий (width:74% из правила T10311, оно же * ставит background:none), и фон на нём закрыл бы карточки только по центру, * оставив обрезанные подписи по краям. Слой лежит ПОД кнопкой (z-index:-1 * внутри её же контекста наложения), поэтому саму кнопку не трогает. */ body .st-question .actions.st-task-actions::before, body .st-question.st-has-bg .actions.st-task-actions::before { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 100vw; top: 0; bottom: calc(-12px - env(safe-area-inset-bottom)); z-index: -1; background: linear-gradient(to top, rgba(247, 250, 240, .98) 62%, rgba(247, 250, 240, 0) 100%); pointer-events: none; } /* T9449 (08.09, сверка разбора «Заботимся-3» с эталоном v7/image37). * Правило v7 в webapp-v3.css красит карточку разбора для image40/39/37 в * бежевое — и фон совпадает с эскизом, а РАМКА нет: на эталоне она зелёная, * у нас #d5b693. Замер по кадру: на верхней кромке карточки у эталона 845 * зелёных пикселей, у нас ноль. Зелёный беру тот же, каким рамка выходит на * соседнем разборе (задание 2, rgb(19,131,28)) — там наш экран эталону * соответствует. * * Сужаю до image37 намеренно. Для image40/39 то правило на наших кадрах не * применяется вовсе (карточка выходит белой с зелёной рамкой и эскизу * соответствует), поэтому трогать их — значит чинить то, что не сломано. * Фон не меняю: кремовый градиент эскизу отвечает. */ body[data-project="msh-mfm"] .st-feedback:has(.st-slide7-art-header img[src$="/image37.png"]) .st-explain-card { /* !important здесь не лень: у правила v7 селектор с двумя :has и атрибутом * проекта заведомо весомее любого разумного нашего — без него правка молча не * применяется (проверено кадром: borderColor оставался бежевым). Перебиваем * ровно одну декларацию. */ border-color: #13831c !important; } /* T9449 (08.09): выравнивание текста в карточке разбора «Заботимся» 3 и 4. * На эталонах v7/image37 и image38 текст стоит ПО ЦЕНТРУ — измерено по левым * краям строк: разброс 74 и 127 px соответственно (у выключки влево он был бы * нулевым). У нас карточка выключена влево. * * Почему правило v7 не помогло: оно центрирует ВНУТРЕННИЙ span * (.st-explain-text), а тот строчный — text-align на нём ни на что не влияет, * выравнивание задаёт блок-контейнер. Замер это и показал: у q3 и q4 * card=left, text=center, а на кадре текст стоит слева. Ставим выравнивание * там, где оно действует. * * image39 (задание 2) СЮДА НЕ ВХОДИТ, хотя на эскизе текст тоже центрирован * (проверено кадром вплотную; мой первый замер по нему врал — окно поиска * обрезало левые края, и они выходили одинаковыми, упираясь в границу окна). * Причина исключения другая: там карточка с иконкой, текст лежит отдельным * элементом, и это правило на него НЕ ДЕЙСТВУЕТ — проверил кадром, текст * остался слева при вычисленном center. Нужен разбор той разметки отдельно, * а вешать правило, которое ничего не меняет, я не буду. */ body[data-project="msh-mfm"] .st-feedback:has(.st-slide7-art-header img:is([src$="/image37.png"],[src$="/image38.png"])) .st-explain-card { text-align: center; } /* T9449: задание 2 «Заботимся» — текст в карточке разбора у нас ВЫКЛЮЧЕН ВЛЕВО, * на эталоне v7/image39 он ПО ЦЕНТРУ. Правку не делаю: это столкновение с чужим * осознанным решением, а не дефект. Разбор — чтобы никто не начинал заново. * * В webapp-v3.css есть правило, которое ставит left ИМЕННО ЭТОМУ ЭКРАНУ: * … .st-feedback:has(.st-slide7-art-header img[src$="/image39.png"]) * .st-explain-text { text-align:left; } * Селектор адресный, значит кто-то выключил текст влево намеренно. Либо тогда * сверялись с другим эскизом, либо эскиз позже заменили. Молча перебивать * чужое решение своим я не буду — нужен ответ владельца, что верно сейчас. * * ПОПРАВКА К МОЕЙ ЖЕ ПРЕДЫДУЩЕЙ ЗАПИСИ (коммит fd6e54eb) — она была НЕВЕРНА. * Я написал, что правила v7 минуют этот экран, потому что «имя эталона не равно * имени ассета»: скан показал на экране image32, а не image39. Скан читал * только кадр ВОПРОСА; на кадре РАЗБОРА image39 присутствует, и правила v7 по * нему исправно срабатывают. Настоящая причина моих трёх промахов проще: у того * правила селектор с внешним :has, и мои варианты проигрывали ему по весу. * Урок: прежде чем объявлять правило недостижимым, проверь, не проигрываешь ли * ты каскад — вычисленный стиль это показывает сразу. * * Если решение поменять: правило должно перебить указанное выше по весу или * через important, и целиться в .st-explain-text (блок 210 px), а НЕ в карточку * (она flex-контейнер из иконки и текста, собственного текста у неё нет). */ /* T10403 (P0, Рафаэль заблокирован 08.09): «не могу из-за кнопки Далее у овцы». * * ПРИЧИНА. На экранах задания v7 действует правило T10311 * «.btn:disabled { opacity:1 }» — его поставили, чтобы кнопка выглядела как на * эскизе, сплошной зелёной. Но у single-вопросов кнопка ДО выбора варианта * ОТКЛЮЧЕНА (disabled в разметке), и opacity:1 убрал ЕДИНСТВЕННЫЙ признак * этого. Участник видит нормальную зелёную «ДАЛЕЕ», жмёт — и ничего не * происходит, потому что кнопка неактивна. Ровно то, на что жалуется владелец. * * Проверено в отдаваемом продом webapp-v3.css: правило .btn:disabled{opacity:1} * там есть. * * ПРАВКА. Сплошную заливку сохраняем (эскиз соблюдён), но отключённое * состояние делаем видимым: обесцвечиваем и осветляем. Кнопка остаётся на * месте, того же размера и формы — двигается только цвет, поэтому вёрстка, * сверенная сегодня с эталонами поэкранно, не меняется. cursor:default — * чтобы на десктопной проверке тоже было видно. * * НЕ снимаю opacity:1 и не трогаю правило T10311: оно чужое и осознанное, * а нужный эффект достигается поверх него. */ /* Селектор НЕ ЗАВИСИТ ОТ КОНТЕЙНЕРА намеренно. По коду кнопка лежит внутри * .st-question (webapp-render-stand-tour, блок actions st-task-actions), но на * стенде выборка «.st-question .btn» дала НОЛЬ узлов — то есть путь отрисовки * там другой. Гадать, где именно она окажется у участника, я не буду: целюсь и * в контейнерный вариант, и в саму кнопку по её id, который задан в разметке * рядом с disabled. Так правило переживёт и перенос блока. */ body[data-project="msh-mfm"] .st-question .btn:disabled, body[data-project="msh-mfm"] #st-submit:disabled { filter: grayscale(0.7) brightness(1.18); cursor: default; } /* T10528: compact, non-interactive decoration; media stays in document flow. */ .st-zone-mascots { display:flex; justify-content:center; margin:4px auto 12px; flex-shrink:0; pointer-events:none; } .st-zone-mascots img { display:block; width:112px; height:84px; object-fit:contain; } #ar-water-start-gate.ar-water-gate-with-mascots { overflow-y:auto; box-sizing:border-box; justify-content:flex-start !important; padding-top:64px !important; } #ar-water-start-gate.ar-water-gate-with-mascots > * { flex-shrink:0; } #ar-water-start-gate.ar-water-gate-with-mascots > :first-child { margin-top:auto; } #ar-water-start-gate.ar-water-gate-with-mascots > :last-child { margin-bottom:auto; } /* T10529: the three videos occupy the original 3:4 crop image slots. */ .st-result-card-pic .st-crop-video { display:block; width:100%; height:100%; object-fit:cover; background:#243220; } .st-crop-replay { display:block; margin:auto 8px 6px; min-height:36px; border:0; border-radius:8px; background:#e5ebdc; color:#205b31; font-family:inherit; font-size:12px; font-weight:600; line-height:1.2; cursor:pointer; } .st-crop-replay:focus-visible { outline:2px solid #205b31; outline-offset:2px; }