/* ========================================================================== Sell Your Property — редизайн формы /agency/realty/add (тема TM58887) CSS-only. Разметка .ctp НЕ меняется — всё через переопределение существующих классов темы. Задача №1: привести 40 лейблов формы к ОДНОЙ шкале. В исходнике их размеры разъезжались (13 / 15.6 / 16 / 18px) и цвета (#212121 / #434345 / #000) — потому что поля пришли из разных подсистем: form-label (тема), .lab (локация), .label2 (category_params), безклассовые (согласия/телефон). Палитра: brand/colors/palette.json (Red #BE151B / Orange #F26921 / Yellow #F7921E). Шрифт Montserrat — бренд-шрифт, в теме уже загружен (montserrat.css), но форма его не использовала: наследовался Lato. ВАЖНО: в montserrat.css есть только 400 и 700 — промежуточных начертаний (500/600) НЕТ, иерархия строится размером/цветом/трекингом, не весом. ========================================================================== */ :is(#AdvertisementAddForm,#MessageViewForm) { /* Цвета */ --ea-brand-red: #be151b; --ea-brand-orange: #f26921; --ea-brand-yellow: #f7921e; --ea-ink: #1e1e1e; /* основной текст */ --ea-ink-label: #2a2a2e; /* лейблы — единый цвет для ВСЕХ */ --ea-ink-muted: #6b6f76; /* подписи, плейсхолдеры */ /* Нейтрали — ОДНО тёплое семейство (аудит taste-скилла: смешение тёплых и холодных серых). Раньше #F6F7F9/#E3E5E9/#CFD3DA были холодными при тёплых бренд-акцентах — серые еле заметно уводим в тёплый. */ --ea-surface: #ffffff; --ea-surface-sunken: #f8f7f5; --ea-line: #e7e4e0; /* hairline границы */ --ea-line-strong: #d4cfc9; /* граница в hover */ /* Единая шкала лейблов — источник правды для всей формы */ --ea-label-size: 14px; --ea-label-weight: 700; --ea-label-lh: 1.35; --ea-label-tracking: 0.01em; --ea-label-gap: 8px; /* отступ лейбл → поле */ /* Контролы */ --ea-control-h: 52px; /* ≥44px touch-target (Apple HIG) */ --ea-radius: 12px; /* iOS26: крупный мягкий радиус */ --ea-radius-sm: 10px; --ea-field-size: 15px; /* было 13px — мелко для ввода */ --ea-ease: cubic-bezier(0.32, 0.72, 0, 1); /* iOS-подобная пружинность */ /* Тени ТОНИРОВАНЫ в тёплый бренд-оттенок, а не «чёрный на N%» (аудит taste-скилла: generic box-shadow). Свет один — сверху. */ --ea-shadow-rest: 0 1px 2px rgba(120, 72, 40, 0.06); --ea-shadow-raised: 0 6px 18px rgba(120, 72, 40, 0.10); --ea-shadow-focus: 0 0 0 4px rgba(242, 105, 33, 0.14), 0 2px 8px rgba(120, 72, 40, 0.08); font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--ea-ink); } /* Montserrat на всё содержимое формы: тема отдаёт Lato через body, а бренд-шрифт до формы не доходил. */ :is(#AdvertisementAddForm,#MessageViewForm), :is(#AdvertisementAddForm,#MessageViewForm) input, :is(#AdvertisementAddForm,#MessageViewForm) select, :is(#AdvertisementAddForm,#MessageViewForm) textarea, :is(#AdvertisementAddForm,#MessageViewForm) button, :is(#AdvertisementAddForm,#MessageViewForm) label, :is(#AdvertisementAddForm,#MessageViewForm) .select2-container, :is(#AdvertisementAddForm,#MessageViewForm) .select2-selection__rendered { font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; } /* select2-дропдаун рендерится в , вне формы — шрифт задаём отдельно */ .select2-container--bootstrap .select2-results__option, .select2-container--bootstrap .select2-search__field { font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; } /* ========================================================================== 1. ЛЕЙБЛЫ — единая шкала (главный запрос) Перечислены ВСЕ шесть вариантов разметки, встречающихся в форме: .form-label (Category — был 13px) .form-label-size-lg (Sell/Rent, City, Name, Title… — был 15.6px) .lab (Country — был 16px, другой цвет) .label2 (22 поля category_params — был 16px) label без класса (Additional address, Phone — был 16px) .control-group > label (страховка на параметры) ========================================================================== */ :is(#AdvertisementAddForm,#MessageViewForm) label, :is(#AdvertisementAddForm,#MessageViewForm) .form-label, :is(#AdvertisementAddForm,#MessageViewForm) .form-label-size-lg, :is(#AdvertisementAddForm,#MessageViewForm) .form-label-outside, :is(#AdvertisementAddForm,#MessageViewForm) .rd-input-label, :is(#AdvertisementAddForm,#MessageViewForm) .lab, :is(#AdvertisementAddForm,#MessageViewForm) .label2, :is(#AdvertisementAddForm,#MessageViewForm) .control-group > label { /* !important: .form-label-size-lg в style.css темы задаёт font-size через более специфичное правило + инлайновую шкалу — иначе не перебить. */ font-size: var(--ea-label-size) !important; font-weight: var(--ea-label-weight) !important; line-height: var(--ea-label-lh) !important; letter-spacing: var(--ea-label-tracking); color: var(--ea-ink-label) !important; text-transform: none; display: block; margin: 0 0 var(--ea-label-gap); /* тема анимирует .form-label как плавающий placeholder — гасим, лейблы здесь всегда внешние (form-label-outside) */ position: static; transform: none; transition: color 0.2s var(--ea-ease); } /* Обязательные поля: звёздочка в исходнике — часть текста лейбла («Name *»), отдельного узла нет, поэтому красим весь лейбл нельзя. Вместо этого — акцент на группе. Красный (#BE151B) = только семантика required/error. */ :is(#AdvertisementAddForm,#MessageViewForm) .form-group.required > label::after, :is(#AdvertisementAddForm,#MessageViewForm) .control-group > label[for*="required"]::after { content: ""; } /* Лейбл активной группы подсвечивается брендовым — связь «фокус ↔ подпись». ВАЖНО: базовый блок лейблов выше задаёт `color: … !important`, поэтому здесь тоже нужен !important — иначе правило проигрывает и подсветки нет (регресс был именно такой: цвет не менялся ни у input, ни у select2). `:focus-within` не срабатывает для select2: настоящий фокус уходит на служебное поле поиска ВНЕ .form-group, поэтому дополнительно ловим класс `select2-container--open`, который select2 вешает на контейнер. */ :is(#AdvertisementAddForm,#MessageViewForm) .form-group:focus-within > label, :is(#AdvertisementAddForm,#MessageViewForm) .control-group:focus-within > label, :is(#AdvertisementAddForm,#MessageViewForm) .form-group:has(input:focus) > label, :is(#AdvertisementAddForm,#MessageViewForm) .form-group:has(textarea:focus) > label, :is(#AdvertisementAddForm,#MessageViewForm) .form-group:has(select:focus) > label, :is(#AdvertisementAddForm,#MessageViewForm) .form-group:has(.select2-container--open) > label, :is(#AdvertisementAddForm,#MessageViewForm) .form-group:has(.select2-container--focus) > label, :is(#AdvertisementAddForm,#MessageViewForm) .control-group:has(input:focus) > label, :is(#AdvertisementAddForm,#MessageViewForm) .control-group:has(select:focus) > label, :is(#AdvertisementAddForm,#MessageViewForm) .control-group:has(.select2-container--open) > label, :is(#AdvertisementAddForm,#MessageViewForm) .control-group:has(.select2-container--focus) > label { color: var(--ea-ramp-2, var(--ea-brand-orange)) !important; } /* --- Волна перекраски: иконка → буквы слева направо ------------------------ Запрос пользователя: лейбл должен перекрашиваться не мгновенно, а «по буквам» от иконки вправо. Обернуть каждую букву в нельзя — правка разметки запрещена. Поэтому фронт волны — граница двух стопов градиента, который заклипован в текст; едет позицией фона. `@supports` обязателен: `-webkit-text-fill-color: transparent` без работающего background-clip делает лейблы НЕВИДИМЫМИ, а форма боевая. Соседний `color` из блока выше остаётся фолбэком — мгновенная перекраска. Мягкая граница (46%/56%) вместо резкой 50/50: у Montserrat 700 на 14px резкий фронт даёт видимую ступеньку на диагоналях (A, V, W). */ @supports ( (-webkit-background-clip: text) or (background-clip: text) ) { :is(#AdvertisementAddForm,#MessageViewForm) .form-group > label, :is(#AdvertisementAddForm,#MessageViewForm) .control-group > label { /* Лейбл — display:block, его бокс (570px) намного шире текста (~150px). Градиент клипуется по БОКСУ, поэтому на всю ширину блока фронт волны расплывается и слово перекрашивается целиком, а не по буквам. fit-content ужимает бокс до текста — проверено на 37 лейблах, высота не меняется ни у одного (переносов нет, раскладка не едет). */ width: fit-content; max-width: 100%; background-image: linear-gradient( 90deg, var(--ea-ramp-1, var(--ea-brand-red)) 0%, var(--ea-ramp-2, var(--ea-brand-orange)) 34%, var(--ea-ramp-3, var(--ea-brand-yellow)) 49%, var(--ea-ink-label) 51% ); /* 200% = ровно две ширины текста: полоса перехода 2% ≈ 3px, уже одной буквы → фронт идёт по буквам, а не мягкой заливкой по всему слову */ background-size: 200% 100%; background-repeat: no-repeat; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; /* .12s задержки = иконка (0.18s без задержки) успевает начать первой */ transition: background-position 0.45s var(--ea-ease) 0.12s; } /* Иконка красится своим `color`, но text-fill-color наследуется в псевдоэлемент и обнулил бы её — возвращаем явно. */ :is(#AdvertisementAddForm,#MessageViewForm) .form-group > label::before, :is(#AdvertisementAddForm,#MessageViewForm) .control-group > label::before { -webkit-text-fill-color: currentColor; transition: color 0.18s var(--ea-ease); } :is(#AdvertisementAddForm,#MessageViewForm) .form-group:focus-within > label, :is(#AdvertisementAddForm,#MessageViewForm) .control-group:focus-within > label, :is(#AdvertisementAddForm,#MessageViewForm) .form-group:has(input:focus) > label, :is(#AdvertisementAddForm,#MessageViewForm) .form-group:has(textarea:focus) > label, :is(#AdvertisementAddForm,#MessageViewForm) .form-group:has(select:focus) > label, :is(#AdvertisementAddForm,#MessageViewForm) .form-group:has(.select2-container--open) > label, :is(#AdvertisementAddForm,#MessageViewForm) .form-group:has(.select2-container--focus) > label, :is(#AdvertisementAddForm,#MessageViewForm) .control-group:has(input:focus) > label, :is(#AdvertisementAddForm,#MessageViewForm) .control-group:has(select:focus) > label, :is(#AdvertisementAddForm,#MessageViewForm) .control-group:has(.select2-container--open) > label, :is(#AdvertisementAddForm,#MessageViewForm) .control-group:has(.select2-container--focus) > label { background-position: 0 0; } /* Согласия и подписи над картой — НЕ лейблы полей, волна там неуместна. ВАЖНО: лейбл согласия — прямой потомок .form-group и БЕЗ класса, т.е. попадает под `.form-group > label` выше. Классов `.checkbox label` / `.confirmation-label` в этой разметке НЕТ — исключать надо по наличию чекбокса в группе. Текст лежит во вложенном

(block-body), который наследует прозрачный text-fill → сбрасываем и на потомках. */ :is(#AdvertisementAddForm,#MessageViewForm) .sell-map-holder label, :is(#AdvertisementAddForm,#MessageViewForm) .map-wrapper label, :is(#AdvertisementAddForm,#MessageViewForm) .form-group:has(> input[type="checkbox"]) > label, :is(#AdvertisementAddForm,#MessageViewForm) .form-group:has(> input[type="checkbox"]) > label * { background-image: none; -webkit-text-fill-color: currentColor; } } /* ========================================================================== 1.6 ЛЕЙБЛ СОГЛАСИЯ — цвет по СОСТОЯНИЮ чекбокса, не по фокусу Требование пользователя: отмечен → оранжевый, снят → обратно тёмный. Фокус здесь не годится: после клика фокус остаётся на чекбоксе, и цвет залипал на оранжевом даже когда галочка снята. Касается ТОЛЬКО чекбоксов — поля с волной по фокусу не трогаем. ========================================================================== */ :is(#AdvertisementAddForm,#MessageViewForm) .form-group:has(> input[type="checkbox"]) > label, :is(#AdvertisementAddForm,#MessageViewForm) .form-group:has(> input[type="checkbox"]) > label p { color: var(--ea-ink) !important; transition: color 0.28s var(--ea-ease); } :is(#AdvertisementAddForm,#MessageViewForm) .form-group:has(> input[type="checkbox"]:checked) > label, :is(#AdvertisementAddForm,#MessageViewForm) .form-group:has(> input[type="checkbox"]:checked) > label p { color: var(--ea-brand-orange) !important; } /* Ссылка «согласие на обработку» — самостоятельный акцент, состоянием чекбокса не управляется (иначе теряется её читаемость как ссылки). */ :is(#AdvertisementAddForm,#MessageViewForm) .form-group:has(> input[type="checkbox"]) > label a { color: var(--ea-brand-orange) !important; -webkit-text-fill-color: currentColor; } @media (prefers-reduced-motion: reduce) { :is(#AdvertisementAddForm,#MessageViewForm) .form-group:has(> input[type="checkbox"]) > label, :is(#AdvertisementAddForm,#MessageViewForm) .form-group:has(> input[type="checkbox"]) > label p { transition: none; } } @media (prefers-reduced-motion: reduce) { :is(#AdvertisementAddForm,#MessageViewForm) .form-group > label, :is(#AdvertisementAddForm,#MessageViewForm) .control-group > label, :is(#AdvertisementAddForm,#MessageViewForm) .form-group > label::before, :is(#AdvertisementAddForm,#MessageViewForm) .control-group > label::before { transition: none; } } /* Подписи-заголовки над картой (Terrain и т.п.) — были 18px/чёрные. Это НЕ лейблы полей: оставляем крупнее шкалы, но приводим к системе. */ :is(#AdvertisementAddForm,#MessageViewForm) .sell-map-holder label, :is(#AdvertisementAddForm,#MessageViewForm) .map-wrapper label { font-size: var(--ea-label-size) !important; font-weight: var(--ea-label-weight) !important; color: var(--ea-ink-label) !important; } /* ========================================================================== 1.5 ИКОНКИ У ЛЕЙБЛОВ Источник: FontAwesome **4.7** — единственное иконочное семейство, реально рисующееся на фронте TM58887 (@font-face в theme/.../custom_icons.css; Material Design Icons и Flaticon объявлены, но файлы до фронта не доезжают; Glyphicons тоже не рисуется). Коды — из набора 4.7, не из FA6. Иконка ставится на ЛЕЙБЛ (::before), а не внутрь поля: у select2 своя стрелка справа, у intl-tel-input свой флаг+код слева — иконка внутри поля дала бы кашу именно там. Консистентность (главное требование): размер/цвет/отступ/выравнивание заданы ОДИН раз здесь, каждое поле меняет только сам глиф. */ :is(#AdvertisementAddForm,#MessageViewForm) .form-group > label::before, :is(#AdvertisementAddForm,#MessageViewForm) .control-group > label::before { font-family: "FontAwesome"; /* FA 4.7 — без него глиф не отрисуется */ font-weight: 400; font-style: normal; font-size: 13px; line-height: 1; width: 16px; /* фиксированная ширина → текст лейблов выровнен */ display: inline-block; text-align: center; margin-right: 7px; vertical-align: baseline; color: var(--ea-ink-muted); transition: color 0.2s var(--ea-ease); -webkit-font-smoothing: antialiased; } /* На фокусе иконка уходит в бренд вместе с лейблом (те же селекторы, что и у подсветки лейбла — включая select2, который фокус отдаёт наружу) */ :is(#AdvertisementAddForm,#MessageViewForm) .form-group:focus-within > label::before, :is(#AdvertisementAddForm,#MessageViewForm) .control-group:focus-within > label::before, :is(#AdvertisementAddForm,#MessageViewForm) .form-group:has(input:focus) > label::before, :is(#AdvertisementAddForm,#MessageViewForm) .form-group:has(textarea:focus) > label::before, :is(#AdvertisementAddForm,#MessageViewForm) .form-group:has(select:focus) > label::before, :is(#AdvertisementAddForm,#MessageViewForm) .form-group:has(.select2-container--open) > label::before, :is(#AdvertisementAddForm,#MessageViewForm) .form-group:has(.select2-container--focus) > label::before, :is(#AdvertisementAddForm,#MessageViewForm) .control-group:has(input:focus) > label::before, :is(#AdvertisementAddForm,#MessageViewForm) .control-group:has(select:focus) > label::before, :is(#AdvertisementAddForm,#MessageViewForm) .control-group:has(.select2-container--open) > label::before, :is(#AdvertisementAddForm,#MessageViewForm) .control-group:has(.select2-container--focus) > label::before { /* Тёмный конец градиента: иконка стоит ЛЕВЕЕ первой буквы, а градиент текста стартует красным в нулевой точке — так иконка читается как его начало, а не как отдельный элемент. Оранжевый здесь рвал бы переход: иконка была бы светлее следующей за ней буквы. */ color: var(--ea-ramp-1, var(--ea-brand-red)); } /* Фолбэк для полей категории, у которых нет своего смыслового глифа. НЕ caret/chevron/angle: треугольник читается как «раскрыть/аккордеон», а не как смысл поля (замечание пользователя — 22 поля получали один и тот же \f0da). Нейтральный кружок такого прочтения не даёт. */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group > label.label2::before { content: "\f10c"; /* circle-o */ } /* --- Основные поля (по смыслу) --- */ :is(#AdvertisementAddForm,#MessageViewForm) label[for="AdvertisementCategoryId"]::before { content: "\f015"; } /* home */ :is(#AdvertisementAddForm,#MessageViewForm) label[for="AdvertisementRent"]::before { content: "\f0ec"; } /* exchange */ :is(#AdvertisementAddForm,#MessageViewForm) label[for="LocationLocationRegionId"]::before{ content: "\f279"; } /* map */ :is(#AdvertisementAddForm,#MessageViewForm) label[for="LocationLocalityId"]::before { content: "\f041"; } /* map-marker */ :is(#AdvertisementAddForm,#MessageViewForm) label[for="LocationSubLocalityId"]::before { content: "\f041"; } /* map-marker */ :is(#AdvertisementAddForm,#MessageViewForm) label[for="LocationRoomNumber"]::before { content: "\f02b"; } /* tag */ :is(#AdvertisementAddForm,#MessageViewForm) label[for="AdvertisementAdditionalAddress"]::before { content: "\f277"; } /* map-signs */ :is(#AdvertisementAddForm,#MessageViewForm) label[for="Contractor0Fio"]::before { content: "\f007"; } /* user */ :is(#AdvertisementAddForm,#MessageViewForm) label[for="ContractorPhone"]::before { content: "\f095"; } /* phone */ :is(#AdvertisementAddForm,#MessageViewForm) label[for="Contractor0Email"]::before { content: "\f0e0"; } /* envelope */ :is(#AdvertisementAddForm,#MessageViewForm) label[for="AdvertisementTitle"]::before { content: "\f031"; } /* font */ :is(#AdvertisementAddForm,#MessageViewForm) label[for="AdvertisementText"]::before { content: "\f036"; } /* align-left */ :is(#AdvertisementAddForm,#MessageViewForm) label[for="AdvertisementPrice"]::before { content: "\f153"; } /* eur */ /* «Country» — статичное поле, класс .lab (не .form-group > label) */ :is(#AdvertisementAddForm,#MessageViewForm) .lab::before { font-family: "FontAwesome"; content: "\f0ac"; /* globe */ font-size: 13px; line-height: 1; width: 16px; display: inline-block; text-align: center; margin-right: 7px; color: var(--ea-ink-muted); } /* --- category_params (правая колонка) ------------------------------------ Слот CategoryParamValueN держит РАЗНОЕ поле в разных категориях: слот 5 — «Balcony» на Квартирах, но «With furniture?» на Земле. Разметка не отдаёт ни data-*, ни id параметра (Agency/View/Elements/category_params.ctp → CategoryParams::renderForm), а классы .control-group (bedrooms/bathrooms) — зебра чёт/нечет, к смыслу поля отношения не имеют. Единственный устойчивый смысловой ключ, доступный CSS, — выбранная категория: #AdvertisementCategoryId лежит внутри формы, поэтому :has(option[value]:checked) даёт живой скоуп и позволяет попадать иконкой в фактическое поле каждой категории. Коды проверены замером ширины глифа на живой странице против ширины заведомо отсутствующего кодепоинта (FA 4.7: f4xx/f5xx/f6xx не существуют). */ /* Apartments (48) */ /* Villa (4) */ /* Land (37) */ /* Commercial (2) */ /* Business (50) */ /* Иконки НЕ ставим: чекбоксы согласий, кнопки, лейблы валидации */ :is(#AdvertisementAddForm,#MessageViewForm) .confirmation-checkbox ~ label::before, :is(#AdvertisementAddForm,#MessageViewForm) label.error::before, :is(#AdvertisementAddForm,#MessageViewForm) .template-download .input.checkbox label::before { content: none !important; margin: 0; width: auto; } /* ========================================================================== 2. ГРУППЫ ПОЛЕЙ — ритм по вертикали ========================================================================== */ :is(#AdvertisementAddForm,#MessageViewForm) .form-group, :is(#AdvertisementAddForm,#MessageViewForm) .control-group { margin-bottom: 20px; position: relative; } /* «Леджер-спайн»: брендовая полоса слева у активной группы. Единственный выразительный приём формы — остальное держим тихим. */ :is(#AdvertisementAddForm,#MessageViewForm) .form-group::before, :is(#AdvertisementAddForm,#MessageViewForm) .control-group::before { content: ""; position: absolute; left: -14px; top: 2px; bottom: 2px; width: 3px; border-radius: 3px; background: linear-gradient( 180deg, var(--ea-brand-yellow) 0%, var(--ea-brand-orange) 55%, var(--ea-brand-red) 100% ); opacity: 0; transform: scaleY(0.4); transform-origin: 50% 50%; transition: opacity 0.28s var(--ea-ease), transform 0.28s var(--ea-ease); pointer-events: none; } :is(#AdvertisementAddForm,#MessageViewForm) .form-group:focus-within::before, :is(#AdvertisementAddForm,#MessageViewForm) .control-group:focus-within::before { opacity: 1; transform: scaleY(1); } /* Спайн уходит в отрицательный отступ — на узких экранах он бы обрезался краем вьюпорта, поэтому там прячем (место дороже украшения). */ @media (max-width: 991px) { :is(#AdvertisementAddForm,#MessageViewForm) .form-group::before, :is(#AdvertisementAddForm,#MessageViewForm) .control-group::before { display: none; } } /* Спайн должен зажигаться и на select2: настоящий фокус там уходит на служебное поле поиска ВНЕ группы, `:focus-within` не срабатывает. Тот же список условий, что у волны лейбла — три эффекта живут по одному триггеру, иначе на селектах связка распадается. */ :is(#AdvertisementAddForm,#MessageViewForm) .form-group:has(.select2-container--open)::before, :is(#AdvertisementAddForm,#MessageViewForm) .form-group:has(.select2-container--focus)::before, :is(#AdvertisementAddForm,#MessageViewForm) .control-group:has(.select2-container--open)::before, :is(#AdvertisementAddForm,#MessageViewForm) .control-group:has(.select2-container--focus)::before { opacity: 1; transform: scaleY(1); } /* ========================================================================== 2.5 ОБВОДКА-РАЗВЁРТКА — контур поля прорисовывается ПО ПЕРИМЕТРУ Запрос пользователя: бордер не должен «окрашиваться моментально» — он обходит поле по кругу в одну сторону при фокусе и раскручивается обратно при расфокусе, оставаясь частью ОДНОЙ анимации с волной по лейблу и появлением спайна. Почему не псевдоэлементы самого поля: input — replaced-элемент, его `::before`/`::after` не рендерятся (замер на живом стенде: `content` даёт "none"). Рисовать периметр можно только на обёртке. Приём: `conic-gradient` на `.form-group::after`, замаскированный в кольцо толщиной 1.5px (`mask-composite: exclude` = border-box МИНУС padding-box). Угол сектора — зарегистрированное `@property --ea-sweep` с типом ``, поэтому он ИНТЕРПОЛИРУЕТСЯ обычным transition: 0deg→360deg при фокусе и 360deg→0deg при blur. Обратный ход получается сам собой, без второй анимации и без `animation-direction` — это и есть «в одну и в другую сторону» из формулировки задачи. Геометрия ::after — замер на стенде: у ВСЕХ 35 не-чекбоксных групп контрол стоит ровно в `top:26px; left:0; right:0; bottom:0` (100% совпадение). Поэтому одна коробка накрывает и input, и textarea (bottom:0 сам тянет высоту 120px), и `.select2-container`, и `.iti` — у последнего обёртка совпадает с полем по боксу (h=50, собственной рамки нет), так что флаг с кодом страны обводка не режет: она идёт по внешнему периметру целиком. ========================================================================== */ /* Рецепт обводки — ЕДИНЫЙ, в custom.css (секция «ЕДИНАЯ БРЕНД-ОБВОДКА»): @property --ea-sweep, маска-кольцо и conic-gradient объявлены там и накрывают селектор групп этой формы. Здесь остаются только ручки геометрии и триггеры. Геометрия ::after — замер на стенде: у ВСЕХ 35 не-чекбоксных групп контрол стоит ровно в top:26px (лейбл обводкой не накрывается). */ :is(#AdvertisementAddForm,#MessageViewForm) .form-group, :is(#AdvertisementAddForm,#MessageViewForm) .control-group { /* радиус кольцо берёт с носителя (inherit) — у группы он чисто служебный: фона и рамки у неё нет, видно только обводку */ border-radius: var(--ea-radius); --ea-sweep-top: 26px; } /* Целевое значение угла — СНАРУЖИ @supports. Внутри блока правило не применялось (проверено: даже у синтетического сфокусированного input `--ea-sweep` оставался 0deg, при том что базовое правило с маской применялось нормально). Здесь объявляется только кастомное свойство — без поддержки маски оно безвредно, кольцо всё равно не рисуется. */ :is(#AdvertisementAddForm,#MessageViewForm) .form-group:focus-within, :is(#AdvertisementAddForm,#MessageViewForm) .control-group:focus-within, :is(#AdvertisementAddForm,#MessageViewForm) .form-group:has(.select2-container--open), :is(#AdvertisementAddForm,#MessageViewForm) .form-group:has(.select2-container--focus), :is(#AdvertisementAddForm,#MessageViewForm) .control-group:has(.select2-container--open), :is(#AdvertisementAddForm,#MessageViewForm) .control-group:has(.select2-container--focus) { --ea-sweep: 360deg; } /* Чекбоксы согласий: у группы нет поля-коробки, ::after накрыл бы текст. */ :is(#AdvertisementAddForm,#MessageViewForm) .form-group:has(> input[type="checkbox"])::after { content: none; } /* Группа-контейнер карты — не поле ввода, периметр обводить нечему. */ :is(#AdvertisementAddForm,#MessageViewForm) .sell-map-holder .form-group::after, :is(#AdvertisementAddForm,#MessageViewForm) .map-wrapper .form-group::after { content: none; } /* Родная серая рамка поля остаётся на месте всё время — обводка едет ПОВЕРХ неё. Мгновенную перекраску border-color при фокусе гасим: именно она и читалась как «окрасился моментально». Тень фокуса не трогаем — она даёт мягкий ореол под уже прорисованной обводкой. */ :is(#AdvertisementAddForm,#MessageViewForm) .form-control:focus, :is(#AdvertisementAddForm,#MessageViewForm) textarea:focus, :is(#AdvertisementAddForm,#MessageViewForm) .select2-container--bootstrap.select2-container--focus .select2-selection--single, :is(#AdvertisementAddForm,#MessageViewForm) .select2-container--bootstrap.select2-container--open .select2-selection--single { border-color: var(--ea-line-strong); } @media (prefers-reduced-motion: reduce) { :is(#AdvertisementAddForm,#MessageViewForm) .form-group, :is(#AdvertisementAddForm,#MessageViewForm) .control-group { transition: none; } :is(#AdvertisementAddForm,#MessageViewForm) .form-group::after, :is(#AdvertisementAddForm,#MessageViewForm) .control-group::after { content: none; } /* Без движения приём теряет смысл — возвращаем честную мгновенную перекраску рамки, чтобы состояние фокуса всё равно читалось. */ :is(#AdvertisementAddForm,#MessageViewForm) .form-control:focus, :is(#AdvertisementAddForm,#MessageViewForm) textarea:focus, :is(#AdvertisementAddForm,#MessageViewForm) .select2-container--bootstrap.select2-container--focus .select2-selection--single, :is(#AdvertisementAddForm,#MessageViewForm) .select2-container--bootstrap.select2-container--open .select2-selection--single { border-color: var(--ea-brand-orange); } } /* ========================================================================== 3. КОНТРОЛЫ — единая геометрия input / textarea / select2 / intl-tel-input: одна высота, радиус, граница и фокус. ========================================================================== */ :is(#AdvertisementAddForm,#MessageViewForm) .form-control, :is(#AdvertisementAddForm,#MessageViewForm) input[type="text"], :is(#AdvertisementAddForm,#MessageViewForm) input[type="email"], :is(#AdvertisementAddForm,#MessageViewForm) input[type="tel"], :is(#AdvertisementAddForm,#MessageViewForm) input[type="number"], :is(#AdvertisementAddForm,#MessageViewForm) textarea, :is(#AdvertisementAddForm,#MessageViewForm) .select2-container--bootstrap .select2-selection--single { height: var(--ea-control-h); min-height: var(--ea-control-h); padding: 0 16px; font-size: var(--ea-field-size); font-weight: 400; line-height: calc(var(--ea-control-h) - 2px); color: var(--ea-ink); background-color: var(--ea-surface); border: 1px solid var(--ea-line); border-radius: var(--ea-radius); box-shadow: var(--ea-shadow-rest); transition: border-color 0.2s var(--ea-ease), box-shadow 0.2s var(--ea-ease), background-color 0.2s var(--ea-ease); -webkit-appearance: none; appearance: none; } /* Текстовые области — многострочные, высота/line-height свои */ :is(#AdvertisementAddForm,#MessageViewForm) textarea, :is(#AdvertisementAddForm,#MessageViewForm) textarea.form-control { height: auto; min-height: 120px; padding: 14px 16px; line-height: 1.6; resize: vertical; } :is(#AdvertisementAddForm,#MessageViewForm) .form-control:hover, :is(#AdvertisementAddForm,#MessageViewForm) textarea:hover, :is(#AdvertisementAddForm,#MessageViewForm) .select2-container--bootstrap .select2-selection--single:hover { border-color: var(--ea-line-strong); } :is(#AdvertisementAddForm,#MessageViewForm) .form-control:focus, :is(#AdvertisementAddForm,#MessageViewForm) textarea:focus, :is(#AdvertisementAddForm,#MessageViewForm) .select2-container--bootstrap.select2-container--focus .select2-selection--single, :is(#AdvertisementAddForm,#MessageViewForm) .select2-container--bootstrap.select2-container--open .select2-selection--single { border-color: var(--ea-brand-orange); box-shadow: var(--ea-shadow-focus); outline: none; background-color: var(--ea-surface); } :is(#AdvertisementAddForm,#MessageViewForm) .form-control::placeholder, :is(#AdvertisementAddForm,#MessageViewForm) textarea::placeholder { color: var(--ea-ink-muted); opacity: 1; } /* Статичное поле «Country» — это , не ввод. Показываем как read-only, а не как редактируемое (MD read-only-distinction). */ :is(#AdvertisementAddForm,#MessageViewForm) span.form-control { display: block; background-color: var(--ea-surface-sunken); color: var(--ea-ink-muted); box-shadow: none; cursor: default; } /* --- select2 (21 селект: категория, локация, все category_params) --------- */ :is(#AdvertisementAddForm,#MessageViewForm) .select2-container { width: 100% !important; /* select2 пишет ширину инлайном при инициализации */ } :is(#AdvertisementAddForm,#MessageViewForm) .select2-container--bootstrap .select2-selection--single .select2-selection__rendered { padding: 0; line-height: calc(var(--ea-control-h) - 2px); color: var(--ea-ink); font-size: var(--ea-field-size); } :is(#AdvertisementAddForm,#MessageViewForm) .select2-container--bootstrap .select2-selection--single .select2-selection__placeholder { color: var(--ea-ink-muted); } /* Шеврон-индикатор дропдауна. У select2 элемент `.select2-selection__arrow` есть, но пустой (замер: ::before content:none, background-image:none) — визуально стрелки не было вообще. Рисуем глифом FA 4.7. Это НЕ противоречит запрету caret'ов у лейблов: слева-у-лейбла треугольник читается как «раскрыть блок», справа-внутри-поля — общепринятый индикатор выпадающего списка. */ :is(#AdvertisementAddForm,#MessageViewForm) .select2-container--bootstrap .select2-selection--single .select2-selection__arrow { height: calc(var(--ea-control-h) - 2px); right: 12px; width: 16px; display: flex; align-items: center; justify-content: center; } /* Родная стрелка select2 — CSS-треугольник на b::before; гасим его */ :is(#AdvertisementAddForm,#MessageViewForm) .select2-container--bootstrap .select2-selection__arrow b { display: none; } :is(#AdvertisementAddForm,#MessageViewForm) .select2-container--bootstrap .select2-selection__arrow::before { content: "\f107"; /* angle-down (FA 4.7, рендер проверен) */ font-family: "FontAwesome"; font-size: 15px; line-height: 1; color: var(--ea-ink-muted); transition: transform 0.22s var(--ea-ease), color 0.22s var(--ea-ease); } /* Открытый список — шеврон разворачивается вверх */ :is(#AdvertisementAddForm,#MessageViewForm) .select2-container--bootstrap.select2-container--open .select2-selection__arrow::before { transform: rotate(180deg); color: var(--ea-brand-orange); } /* Выпадающий список рендерится в body — стилизуем глобально, но по контейнеру select2-bootstrap, чтобы не задеть админку. */ .select2-container--bootstrap .select2-dropdown { border: 1px solid var(--ea-line); border-radius: var(--ea-radius); box-shadow: 0 12px 32px rgba(120, 72, 40, 0.14); overflow: hidden; } .select2-container--bootstrap .select2-results__option { padding: 11px 16px; font-size: 15px; color: #1e1e1e; } .select2-container--bootstrap .select2-results__option--highlighted[aria-selected] { background-color: rgba(242, 105, 33, 0.1); color: #1e1e1e; } .select2-container--bootstrap .select2-results__option[aria-selected="true"] { background-color: rgba(242, 105, 33, 0.16); color: #1e1e1e; font-weight: 700; } /* --- intl-tel-input (телефон) --------------------------------------------- */ :is(#AdvertisementAddForm,#MessageViewForm) .iti { display: block; width: 100%; } :is(#AdvertisementAddForm,#MessageViewForm) .iti .iti__flag-container { /* флаг-кнопка внутри поля: скругляем ЛЕВЫЙ край под общий радиус */ border-radius: var(--ea-radius) 0 0 var(--ea-radius); } :is(#AdvertisementAddForm,#MessageViewForm) .iti--separate-dial-code .iti__selected-flag { background-color: var(--ea-surface-sunken); border-right: 1px solid var(--ea-line); border-radius: var(--ea-radius) 0 0 var(--ea-radius); padding: 0 10px 0 14px; } :is(#AdvertisementAddForm,#MessageViewForm) .iti--separate-dial-code .iti__selected-dial-code { font-size: var(--ea-field-size); color: var(--ea-ink); } :is(#AdvertisementAddForm,#MessageViewForm) .iti__country-list { border-radius: var(--ea-radius); border: 1px solid var(--ea-line); box-shadow: 0 12px 32px rgba(120, 72, 40, 0.14); font-size: 14px; } /* ========================================================================== 4. КАРТА ========================================================================== */ :is(#AdvertisementAddForm,#MessageViewForm) .sell-map-holder, :is(#AdvertisementAddForm,#MessageViewForm) .map-wrapper, :is(#AdvertisementAddForm,#MessageViewForm) #map-google { border-radius: var(--ea-radius); overflow: hidden; /* обрезаем тайлы карты по общему радиусу */ } :is(#AdvertisementAddForm,#MessageViewForm) .sell-map-holder { border: 1px solid var(--ea-line); box-shadow: var(--ea-shadow-rest); } /* ========================================================================== 5. ПАРАМЕТРЫ КАТЕГОРИИ (#categoryParams) 22 поля в правой колонке — визуально собираем в одну карточку-леджер, иначе они читаются как оторванный от формы список. ========================================================================== */ :is(#AdvertisementAddForm,#MessageViewForm) #categoryParams { background: var(--ea-surface-sunken); border: 1px solid var(--ea-line); border-radius: var(--ea-radius); padding: 20px 22px 4px; margin-top: 20px; } :is(#AdvertisementAddForm,#MessageViewForm) #categoryParams .param-row { margin-bottom: 0; } /* .bedrooms/.bathrooms — исторические имена, фактически это просто ячейки-строки (тема не флоатит их даже на десктопе). */ :is(#AdvertisementAddForm,#MessageViewForm) #categoryParams .control-group { padding-top: 0; } /* ========================================================================== 6. ЧЕКБОКСЫ СОГЛАСИЙ В разметке уже есть пара .checkbox-custom + .checkbox-custom-dummy (тема их не дорисовала: dummy был display:inline, 0×19px). Используем ЭТОТ существующий хук, а не изобретаем новый. ========================================================================== */ :is(#AdvertisementAddForm,#MessageViewForm) .confirmation-checkbox { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; z-index: 2; } :is(#AdvertisementAddForm,#MessageViewForm) .checkbox-custom-dummy { display: inline-block; vertical-align: top; width: 22px; height: 22px; margin-right: 12px; border: 2px solid var(--ea-line-strong); border-radius: 7px; background: var(--ea-surface); transition: border-color 0.2s var(--ea-ease), background-color 0.2s var(--ea-ease); pointer-events: none; position: relative; flex: 0 0 auto; } /* Галка — CSS-фигура (без иконочного шрифта: FA на фронте не канон) */ :is(#AdvertisementAddForm,#MessageViewForm) .checkbox-custom-dummy::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0.4); opacity: 0; transition: opacity 0.16s var(--ea-ease), transform 0.16s var(--ea-ease); } :is(#AdvertisementAddForm,#MessageViewForm) .confirmation-checkbox:checked + .checkbox-custom-dummy { background: var(--ea-brand-orange); border-color: var(--ea-brand-orange); } :is(#AdvertisementAddForm,#MessageViewForm) .confirmation-checkbox:checked + .checkbox-custom-dummy::after { opacity: 1; transform: rotate(45deg) scale(1); } /* Клавиатурный фокус обязан быть виден (WCAG) — нативный чекбокс скрыт, поэтому кольцо рисуем на dummy. */ :is(#AdvertisementAddForm,#MessageViewForm) .confirmation-checkbox:focus-visible + .checkbox-custom-dummy { border-color: var(--ea-brand-orange); box-shadow: var(--ea-shadow-focus); } /* Строка согласия: чекбокс и текст в одну линию, текст — обычный, не лейбл-шкала */ :is(#AdvertisementAddForm,#MessageViewForm) .confirmation-checkbox ~ label { display: inline-block; max-width: calc(100% - 40px); vertical-align: top; font-size: 14px !important; font-weight: 400 !important; /* перебиваем общую 700 из блока лейблов */ line-height: 1.55 !important; color: var(--ea-ink) !important; letter-spacing: normal; margin: 0; cursor: pointer; } :is(#AdvertisementAddForm,#MessageViewForm) .confirmation-checkbox ~ label p { margin: 0; font-size: inherit; line-height: inherit; } :is(#AdvertisementAddForm,#MessageViewForm) .confirmation-checkbox ~ label a { color: var(--ea-brand-orange); text-decoration: underline; text-underline-offset: 2px; } :is(#AdvertisementAddForm,#MessageViewForm) .confirmation-checkbox ~ label a:hover { color: var(--ea-brand-red); } /* У согласий спайн не нужен — это не поле ввода */ :is(#AdvertisementAddForm,#MessageViewForm) .form-group:has(.confirmation-checkbox)::before { display: none; } /* ========================================================================== 7. КНОПКИ Исходно .btn-primary = #FFA200 (небрендовый) + radius 3px, тогда как поля 5px → рассинхрон. Приводим к бренду и общей геометрии. ========================================================================== */ :is(#AdvertisementAddForm,#MessageViewForm) .btn, :is(#AdvertisementAddForm,#MessageViewForm) .btn-primary, :is(#AdvertisementAddForm,#MessageViewForm) input[type="submit"], :is(#AdvertisementAddForm,#MessageViewForm) .JS-add-photo { height: var(--ea-control-h); min-height: var(--ea-control-h); padding: 0 24px; font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 0.01em; line-height: var(--ea-control-h); border-radius: var(--ea-radius); border: 1px solid transparent; transition: transform 0.18s var(--ea-ease), box-shadow 0.22s var(--ea-ease), background 0.22s var(--ea-ease), color 0.22s var(--ea-ease); -webkit-appearance: none; appearance: none; } /* Primary — «Publish». Одна главная кнопка на экране (Apple HIG). */ :is(#AdvertisementAddForm,#MessageViewForm) input[type="submit"].btn-primary, :is(#AdvertisementAddForm,#MessageViewForm) .submit .btn-primary { color: #fff; background: linear-gradient( 135deg, var(--ea-brand-yellow) 0%, var(--ea-brand-orange) 100% ); border-color: transparent; box-shadow: 0 4px 14px rgba(242, 105, 33, 0.28); } :is(#AdvertisementAddForm,#MessageViewForm) input[type="submit"].btn-primary:hover, :is(#AdvertisementAddForm,#MessageViewForm) .submit .btn-primary:hover { background: linear-gradient( 135deg, var(--ea-brand-orange) 0%, var(--ea-brand-red) 100% ); box-shadow: 0 6px 18px rgba(190, 21, 27, 0.26); color: #fff; } :is(#AdvertisementAddForm,#MessageViewForm) input[type="submit"].btn-primary:active, :is(#AdvertisementAddForm,#MessageViewForm) .submit .btn-primary:active { transform: translateY(1px); box-shadow: 0 2px 8px rgba(190, 21, 27, 0.24); } /* Secondary — «Add Photo». Визуально подчинена главной кнопке. */ :is(#AdvertisementAddForm,#MessageViewForm) button.JS-add-photo, :is(#AdvertisementAddForm,#MessageViewForm) .JS-add-photo.btn-primary { color: var(--ea-brand-orange); background: var(--ea-surface); border-color: rgba(242, 105, 33, 0.45); box-shadow: var(--ea-shadow-rest); } :is(#AdvertisementAddForm,#MessageViewForm) button.JS-add-photo:hover, :is(#AdvertisementAddForm,#MessageViewForm) .JS-add-photo.btn-primary:hover { color: #fff; background: var(--ea-brand-orange); border-color: var(--ea-brand-orange); box-shadow: 0 4px 14px rgba(242, 105, 33, 0.24); } :is(#AdvertisementAddForm,#MessageViewForm) .btn:focus-visible, :is(#AdvertisementAddForm,#MessageViewForm) input[type="submit"]:focus-visible { outline: none; box-shadow: var(--ea-shadow-focus); } /* ========================================================================== 8. ЗАГРУЗКА ФОТО (#AdvertisementPicture_list) DOM генерируется jquery-fileupload по шаблонам — не переинициализируем, только оформляем фактические классы. ========================================================================== */ /* --- 8.1 Иконки: glyphicon НЕ работает на этом фронте --------------------- В шаблонах стоят , но шрифт «Glyphicons Halflings» темой TM58887 не подключён: document.fonts.check('14px "Glyphicons Halflings"') === false, узлы рендерились как 12×15px с нерезолвящимся глифом. FontAwesome на ПУБЛИЧНОМ фронте тоже не подключён (FA — канон админки), а тащить новую либу на legacy-страницу запрещено политикой стека. Поэтому рисуем 4 нужные иконки чистым CSS: 0 новых запросов, 0 зависимостей. ponytail: только 4 используемых глифа, не весь набор — остальные добавлять, если появятся в шаблонах. */ :is(#AdvertisementAddForm,#MessageViewForm) .glyphicon { /* сбрасываем нерабочий шрифт — иначе браузер рисует «крокозябру» */ font-family: inherit !important; position: relative; display: inline-block; width: 14px; height: 14px; vertical-align: -2px; speak: never; } :is(#AdvertisementAddForm,#MessageViewForm) .glyphicon::before { content: "" !important; /* гасим кодпоинт Glyphicons */ } /* plus — две палки */ :is(#AdvertisementAddForm,#MessageViewForm) .glyphicon-plus::before, :is(#AdvertisementAddForm,#MessageViewForm) .glyphicon-plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; border-radius: 1px; } :is(#AdvertisementAddForm,#MessageViewForm) .glyphicon-plus::before { width: 12px; height: 2px; transform: translate(-50%, -50%); } :is(#AdvertisementAddForm,#MessageViewForm) .glyphicon-plus::after { width: 2px; height: 12px; transform: translate(-50%, -50%); } /* trash — корзина: крышка (::before) + корпус (::after) */ :is(#AdvertisementAddForm,#MessageViewForm) .glyphicon-trash::before { content: ""; position: absolute; left: 0; top: 1px; width: 14px; height: 2px; background: currentColor; border-radius: 1px; box-shadow: 0 -2px 0 -0.5px currentColor; /* «ручка» крышки */ } :is(#AdvertisementAddForm,#MessageViewForm) .glyphicon-trash::after { content: ""; position: absolute; left: 2px; top: 4px; width: 10px; height: 10px; border: 2px solid currentColor; border-top: 0; border-radius: 0 0 3px 3px; } /* ban-circle — круг с перечёркиванием */ :is(#AdvertisementAddForm,#MessageViewForm) .glyphicon-ban-circle::before { content: ""; position: absolute; inset: 0; border: 2px solid currentColor; border-radius: 50%; } :is(#AdvertisementAddForm,#MessageViewForm) .glyphicon-ban-circle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); } /* upload — стрелка вверх + подставка */ :is(#AdvertisementAddForm,#MessageViewForm) .glyphicon-upload::before { content: ""; position: absolute; left: 50%; top: 1px; width: 7px; height: 7px; border-left: 2px solid currentColor; border-top: 2px solid currentColor; transform: translateX(-50%) rotate(45deg); } :is(#AdvertisementAddForm,#MessageViewForm) .glyphicon-upload::after { content: ""; position: absolute; left: 50%; top: 3px; width: 2px; height: 11px; background: currentColor; transform: translateX(-50%); box-shadow: -5px 9px 0 0 currentColor, 5px 9px 0 0 currentColor; } /* --- 8.2 Кнопка «Add Photo» (span.fileinput-button) ----------------------- Была 0×0: с display:inline и внутри. */ :is(#AdvertisementAddForm,#MessageViewForm) .fileupload .fileupload-buttonbar { padding: 0; margin: 0 0 16px; } :is(#AdvertisementAddForm,#MessageViewForm) .fileupload .span12 { width: auto; margin: 0; } :is(#AdvertisementAddForm,#MessageViewForm) span.fileinput-button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--ea-control-h); padding: 0 22px; font-size: 15px; font-weight: 700; letter-spacing: 0.01em; color: var(--ea-brand-orange); background: var(--ea-surface); border: 1px solid rgba(242, 105, 33, 0.45); border-radius: var(--ea-radius); box-shadow: var(--ea-shadow-rest); cursor: pointer; overflow: hidden; transition: color 0.2s var(--ea-ease), background 0.2s var(--ea-ease), border-color 0.2s var(--ea-ease), box-shadow 0.2s var(--ea-ease); } /* вложенный с текстом — не кнопка, а подпись */ :is(#AdvertisementAddForm,#MessageViewForm) span.fileinput-button span.fileinput-button { display: inline; height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; font: inherit; } :is(#AdvertisementAddForm,#MessageViewForm) span.fileinput-button:hover { color: #fff; background: var(--ea-brand-orange); border-color: var(--ea-brand-orange); box-shadow: 0 4px 14px rgba(242, 105, 33, 0.24); } /* Нативный file-input растягиваем на всю кнопку и прячем: клик идёт по нему, поэтому НЕ display:none (иначе кнопка перестанет открывать диалог). */ :is(#AdvertisementAddForm,#MessageViewForm) span.fileinput-button input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 200px; /* старый приём: увеличивает кликабельную зону в IE/Safari */ } :is(#AdvertisementAddForm,#MessageViewForm) span.fileinput-button:focus-within { border-color: var(--ea-brand-orange); box-shadow: var(--ea-shadow-focus); } /* --- 8.3 СЕТКА ПЛИТОК (переделано: было «строка-таблица») ----------------- Паттерн как у Dropbox / Google Drive / FilePond / демо blueimp: загруженные фото — grid МИНИАТЮР, где плитка = само изображение, а действия лежат иконками ПОВЕРХ него. Было: #AdvertisementPicture_list display:block, .template-download строкой (Delete | Rotate | превью | Main), карточка 576px на одно фото. */ /* 4 колонки на всю ширину контейнера. `auto-fill, minmax(160px, 1fr)` давал 6 плиток по 183px при контейнере 1170px — карточки мелкие, превью не рассмотреть. Фиксированное число колонок растягивает плитку по остатку ширины (замер: 1170px → 4×279px при gap 14px). */ :is(#AdvertisementAddForm,#MessageViewForm) #AdvertisementPicture_list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 16px; align-items: start; } /* Планшет — 3 колонки: при 4 плитка ужимается до нечитаемой. */ @media (max-width: 1199px) { :is(#AdvertisementAddForm,#MessageViewForm) #AdvertisementPicture_list { grid-template-columns: repeat(3, 1fr); } } /* ⚠️ Баг РАЗМЕТКИ (не CSS): tmpl_donwload.ctp не закрывает свой `.template-download` — в файле 2 открывающих

и 1 закрывающий, поэтому КАЖДАЯ следующая карточка рендерится ВНУТРИ предыдущей (замер на 3 фото: вложенность .template-download .template-download, высота 1058px, ширины 281/259/237 «лесенкой»). Чинится только в .ctp (менять запрещено). Нейтрализуем: вложенная плитка выносится из потока родителя и ведёт себя как самостоятельная ячейка сетки. Структура (замер): каждая .template-download содержит СВОИ 4 элемента (2 кнопки, .preview, .input.checkbox) И пятым ребёнком — следующую плитку. Поэтому `display:contents` на обёртке не подходит: он растворил бы и её собственное превью. Разложить это чистым CSS нельзя — вложенность реальная, а не визуальная. Единственная правка, которую делает sellprop-redesign.js: поднять вложенные .template-download на уровень контейнера (см. JS-файл). После этого плитки становятся обычными ячейками грида. ponytail: JS-костыль; настоящий фикс — дописать закрывающий div в tmpl_donwload.ctp, после чего sellprop-redesign.js не нужен. */ /* --- Плитка --------------------------------------------------------------- */ :is(#AdvertisementAddForm,#MessageViewForm) .template-download, :is(#AdvertisementAddForm,#MessageViewForm) .template-upload { position: relative; display: block; /* Единая геометрия ВСЕХ плиток (готовых и загружающихся): любое исходное фото даёт одинаковую плитку независимо от своих пропорций. */ aspect-ratio: 4 / 3; width: 100%; min-width: 0; box-sizing: border-box; /* рамка не увеличивает габарит */ padding: 0; margin: 0; background: var(--ea-surface-sunken); border: 1px solid var(--ea-line); border-radius: var(--ea-radius); overflow: hidden; box-shadow: var(--ea-shadow-rest); /* Готовые плитки — в начале, загружаемые уезжают в хвост (см. .template-upload) */ order: 0; transition: box-shadow 0.22s var(--ea-ease), border-color 0.22s var(--ea-ease); } /* Плитка «в процессе загрузки» ВСЕГДА последняя в сетке. blueimp вставляет её туда, куда пришёл файл (часто второй позицией), из-за чего сетка «прыгала», когда загрузка завершалась и плитка подменялась готовой. `order` работает и в grid, и во flex — поведенческая проблема решается стилями, без вмешательства в плагин. */ :is(#AdvertisementAddForm,#MessageViewForm) .template-upload { order: 999; } :is(#AdvertisementAddForm,#MessageViewForm) .template-download:hover { border-color: var(--ea-line-strong); box-shadow: var(--ea-shadow-raised); } /* Превью = вся плитка. Клик по нему открывает #blueimp-gallery — поэтому кнопки НЕ перекрывают картинку целиком (только углы). */ :is(#AdvertisementAddForm,#MessageViewForm) .template-download .preview { position: absolute; inset: 0; display: block; margin: 0; } :is(#AdvertisementAddForm,#MessageViewForm) .template-download .preview a { display: block; width: 100%; height: 100%; line-height: 0; } /* Жёсткие width=145 height=120 стоят атрибутами в .ctp — перебиваем стилями. */ :is(#AdvertisementAddForm,#MessageViewForm) .template-download .preview img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; border-radius: 0; transition: transform 0.35s var(--ea-ease); } :is(#AdvertisementAddForm,#MessageViewForm) .template-download:hover .preview img { transform: scale(1.04); } /* --- Действия поверх плитки (иконки, не текстовые кнопки) ----------------- */ :is(#AdvertisementAddForm,#MessageViewForm) .template-download .delete-model, :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .delete-model, :is(#AdvertisementAddForm,#MessageViewForm) .template-download .rotate-model, :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .rotate-model, :is(#AdvertisementAddForm,#MessageViewForm) .template-download .cancel , :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .cancel { position: absolute; top: 8px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; /* Жёстко равные width/height + box-sizing → КРУГ, а не эллипс. Без этого высота приходила от line-height/padding кнопки (замер: 34×50). */ width: 34px; height: 34px; min-width: 34px; max-width: 34px; min-height: 34px; max-height: 34px; box-sizing: border-box; padding: 0; line-height: 1; /* font-size:0 прячет текстовую подпись («Delete»/«Rotate») — разметку менять нельзя, обернуть текст нечем. Псевдоэлементу размер задаём явно ниже, иначе 0px наследуется и глиф схлопывается. */ font-size: 0; border: 0; border-radius: 50%; color: #fff; background: rgba(24, 18, 14, 0.55); backdrop-filter: blur(6px); /* плитка не скроллится сама — blur безопасен */ cursor: pointer; opacity: 0; /* на десктопе проявляются по hover */ transform: scale(0.9); transition: opacity 0.2s var(--ea-ease), transform 0.2s var(--ea-ease), background 0.2s var(--ea-ease); } :is(#AdvertisementAddForm,#MessageViewForm) .template-download .delete-model , :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .delete-model { right: 8px; } :is(#AdvertisementAddForm,#MessageViewForm) .template-download .rotate-model, :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .rotate-model, :is(#AdvertisementAddForm,#MessageViewForm) .template-download .cancel { right: 48px; } /* В плитке загрузки cancel — единственная кнопка, поэтому занимает крайнюю правую позицию (место delete на готовой плитке): при переходе «загружается → загружено» кнопка не перескакивает. У неё оба класса (`cancel delete-model`), а `.cancel` идёт ниже — задаём явно. */ :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .cancel { right: 8px; } :is(#AdvertisementAddForm,#MessageViewForm) .template-download:hover .delete-model, :is(#AdvertisementAddForm,#MessageViewForm) .template-upload:hover .delete-model, :is(#AdvertisementAddForm,#MessageViewForm) .template-download:hover .rotate-model, :is(#AdvertisementAddForm,#MessageViewForm) .template-upload:hover .rotate-model, :is(#AdvertisementAddForm,#MessageViewForm) .template-download:hover .cancel, :is(#AdvertisementAddForm,#MessageViewForm) .template-upload:hover .cancel, :is(#AdvertisementAddForm,#MessageViewForm) .template-download:focus-within .delete-model, :is(#AdvertisementAddForm,#MessageViewForm) .template-upload:focus-within .delete-model, :is(#AdvertisementAddForm,#MessageViewForm) .template-download:focus-within .rotate-model , :is(#AdvertisementAddForm,#MessageViewForm) .template-upload:focus-within .rotate-model { opacity: 1; transform: scale(1); } /* Тач-устройства: hover не существует — кнопки видны всегда. */ @media (hover: none) { :is(#AdvertisementAddForm,#MessageViewForm) .template-download .delete-model, :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .delete-model, :is(#AdvertisementAddForm,#MessageViewForm) .template-download .rotate-model, :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .rotate-model, :is(#AdvertisementAddForm,#MessageViewForm) .template-download .cancel , :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .cancel { opacity: 1; transform: scale(1); } } :is(#AdvertisementAddForm,#MessageViewForm) .template-download .delete-model:hover , :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .delete-model:hover { background: var(--ea-brand-red); } :is(#AdvertisementAddForm,#MessageViewForm) .template-download .rotate-model:hover, :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .rotate-model:hover, :is(#AdvertisementAddForm,#MessageViewForm) .template-download .cancel:hover , :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .cancel:hover { background: var(--ea-brand-orange); } /* Иконки действий — FA 4.7 (glyphicon в теме не рисуется). */ /* Иконка кнопки. font-family и font-size — ЯВНО и с !important: на кнопке стоит font-size:0 (прячет текстовую подпись) и он наследуется в псевдоэлемент, а font-family наследует Montserrat формы — в нём глифа \f1f8 нет. Оба наследования нужно перебить, иначе иконки не видно. */ :is(#AdvertisementAddForm,#MessageViewForm) .template-download .delete-model::after, :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .delete-model::after, :is(#AdvertisementAddForm,#MessageViewForm) .template-download .rotate-model::after, :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .rotate-model::after, :is(#AdvertisementAddForm,#MessageViewForm) .template-download .cancel::after , :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .cancel::after { font-family: "FontAwesome" !important; font-size: 15px !important; font-weight: 400; font-style: normal; line-height: 1; display: block; -webkit-font-smoothing: antialiased; } :is(#AdvertisementAddForm,#MessageViewForm) .template-download .delete-model::after , :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .delete-model::after { content: "\f1f8"; } /* trash */ /* Поворот фото: \f01e (repeat) читался как «перезагрузить» — пользователь не понял действия. \f0e2 (undo) — изогнутая стрелка вокруг оси, однозначно «повернуть». Функция штатная: rotateImage() шлёт POST на /file_upload/handler/rotate и разворачивает оригинал + миниатюру. */ :is(#AdvertisementAddForm,#MessageViewForm) .template-download .rotate-model::after , :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .rotate-model::after { content: "\f0e2"; } /* undo — rotate */ :is(#AdvertisementAddForm,#MessageViewForm) .template-download .cancel::after , :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .cancel::after { content: "\f00d"; } /* times */ /* glyphicon-заглушки внутри этих кнопок больше не нужны. `.template-upload` обязателен: без него glyphicon-ban-circle темы рисовал свой значок ПОВЕРХ нашего `::after` — в кружке cancel было видно два наложенных глифа (⊘ и ×). */ :is(#AdvertisementAddForm,#MessageViewForm) .template-download .btn .glyphicon, :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .btn .glyphicon { display: none; } /* --- «Main» — бейдж-состояние плитки, а не чекбокс с подписью ------------- */ :is(#AdvertisementAddForm,#MessageViewForm) .template-download .input.checkbox { position: absolute; left: 8px; bottom: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 10px 5px 8px; border-radius: 999px; background: rgba(24, 18, 14, 0.55); backdrop-filter: blur(6px); transition: background 0.2s var(--ea-ease); } /* Нативный чекбокс остаётся в DOM и сабмитится — просто невидим поверх бейджа. НЕ display:none и НЕ visibility:hidden (ломает клик), только opacity. */ :is(#AdvertisementAddForm,#MessageViewForm) .template-download .input.checkbox input.set-main { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; } :is(#AdvertisementAddForm,#MessageViewForm) .template-download .input.checkbox label { position: relative; margin: 0; font-size: 11px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 0.02em; color: #fff !important; cursor: pointer; pointer-events: none; /* клик уходит на input под ним */ /* Подпись «Main» видна только у ВЫБРАННОЙ плитки: на невыбранных бейдж остаётся компактной звездой-переключателем, иначе слово «Main» на каждой плитке читается как утверждение, а не как выбор. */ display: none; } :is(#AdvertisementAddForm,#MessageViewForm) .template-download .input.checkbox:has(input.set-main:checked) label { display: inline; } /* Звезда живёт на САМОМ бейдже, а не на подписи: подпись «Main» скрыта у невыбранных плиток, и звезда должна оставаться видимой как переключатель. */ :is(#AdvertisementAddForm,#MessageViewForm) .template-download .input.checkbox::after { font-family: "FontAwesome" !important; content: "\f006"; /* star-o — не выбрано */ font-size: 12px; line-height: 1; color: #fff; pointer-events: none; order: -1; /* звезда слева от подписи */ } :is(#AdvertisementAddForm,#MessageViewForm) .template-download .input.checkbox:has(input.set-main:checked) { background: var(--ea-brand-orange); } :is(#AdvertisementAddForm,#MessageViewForm) .template-download .input.checkbox:has(input.set-main:checked)::after { content: "\f005"; /* star — выбрано */ } /* Невыбранный бейдж — компактный кружок только со звездой */ :is(#AdvertisementAddForm,#MessageViewForm) .template-download .input.checkbox:not(:has(input.set-main:checked)) { padding: 6px; border-radius: 50%; } /* Выбранная плитка выделена — ТОЛЬКО outline: он вне потока и не меняет габарит, тогда как border/доп. box-shadow делали выбранную плитку крупнее соседних (замечание пользователя «геометрия нарушена»). */ :is(#AdvertisementAddForm,#MessageViewForm) .template-download:has(input.set-main:checked) { border-color: var(--ea-brand-orange); outline: 2px solid var(--ea-brand-orange); outline-offset: -1px; /* внутрь, чтобы не расширять ячейку сетки */ } /* Скрытые инпуты (picture/picture_small/id) остаются в потоке сабмита. */ :is(#AdvertisementAddForm,#MessageViewForm) .template-download .input.checkbox input[type="hidden"] { display: none; } /* --- 8.5 Плитка в процессе загрузки --------------------------------------- */ /* Плитка загрузки: та же форма и радиус, что у готовой (иначе сетка «прыгает» в момент подмены upload → download). Контент прижат к низу поверх скелетона. */ :is(#AdvertisementAddForm,#MessageViewForm) .template-upload { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 10px; background: var(--ea-surface-sunken); } /* скелетон-мерцание, чтобы сетка не «прыгала» до появления картинки */ :is(#AdvertisementAddForm,#MessageViewForm) .template-upload::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 100deg, var(--ea-surface-sunken) 30%, #efece8 50%, var(--ea-surface-sunken) 70% ); background-size: 220% 100%; animation: ea-skeleton 1.4s var(--ea-ease) infinite; } @keyframes ea-skeleton { from { background-position: 180% 0; } to { background-position: -60% 0; } } :is(#AdvertisementAddForm,#MessageViewForm) .template-upload > * { position: relative; z-index: 1; } :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .upload-info-row { display: flex; flex-direction: column; gap: 6px; } :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .name { margin: 0; font-size: 11px; font-weight: 700; color: var(--ea-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .size { margin: 0; font-size: 11px; color: var(--ea-ink-muted); } /* `.error` пуст по смыслу, но не по DOM: шаблон всегда рендерит внутрь переводы строк, поэтому `:empty` не срабатывает. Показываем блок только когда в нём есть бейдж — его вставляет ветка `if (file.error)`. */ :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .error { display: none; } :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .error:has(.label-danger) { display: block; } :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .label-danger { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; color: #fff; background: var(--ea-brand-red); } /* Геометрию, круглую форму и позиции кнопок плитки загрузки задаёт канон «Действия поверх плитки» (секция 6) — он распространён и на `.template-upload`, поэтому cancel выглядит и стоит ровно как delete/rotate. Локальный дубль здесь раньше задавал обёртке `position:absolute; display:flex` — из-за него две кнопки читались как один вытянутый кружок — и ужимал их до 30px против канонных 34. */ /* .cancel полностью покрыт каноном выше; .start — только в ручном режиме загрузки (`!o.options.autoUpload`), там канон её не знает. */ :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .btn.start::after { content: "\f093"; /* upload */ font-family: "FontAwesome" !important; font-size: 15px !important; line-height: 1; display: block; } :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .btn.start { background: var(--ea-brand-orange); } :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .btn[disabled] { opacity: 0.45; cursor: not-allowed; } :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .upload-preview-row .preview:empty { display: none; } /* --- 8.6 Прогресс-бар ------------------------------------------------------ В разметке inline `height:20px;background-color:gray` на .progress-bar — инлайн перебивается только !important. Бар прижат к низу плитки. */ :is(#AdvertisementAddForm,#MessageViewForm) .progress { height: 5px; border-radius: 999px; background: rgba(24, 18, 14, 0.12); overflow: hidden; margin: 0; box-shadow: none; } :is(#AdvertisementAddForm,#MessageViewForm) .progress-bar { height: 5px !important; background-color: transparent !important; background-image: linear-gradient( 90deg, var(--ea-brand-yellow), var(--ea-brand-orange) ) !important; border-radius: 999px; transition: width 0.3s var(--ea-ease); } /* --- 8.7 Лайтбокс blueimp: не ломаем, только скругляем -------------------- */ #blueimp-gallery .slides img { border-radius: var(--ea-radius); } /* ========================================================================== 8.8 ВЕРТИКАЛЬНЫЙ РИТМ НИЖНЕЙ ЧАСТИ ФОРМЫ Тема задаёт универсальный отступ между блоками-строками: theme/TM58887/css/style.css → `* + .range { margin-top: 50px }` Форма собрана из `.range`-строк, поэтому согласия и кнопки получали 50px (+ padding-bottom:15px у ячеек = до ~65px) против ритма формы 20px. ⚠️ Правило темы переопределяем ТОЛЬКО внутри `:is(#AdvertisementAddForm,#MessageViewForm)`: те же `.range` используются в шапке/футере/на других страницах — трогать их нельзя. Отсюда селектор с `:is(#AdvertisementAddForm,#MessageViewForm) >`. Группировка по смыслу, а не равные отступы: два согласия — парные (12px между собой), перед группой кнопок — крупнее (24px). */ :is(#AdvertisementAddForm,#MessageViewForm) > .range + .range { margin-top: 24px; } /* Ячейки внутри строк формы несут собственные 15px — обнуляем, иначе ритм складывается дважды. */ :is(#AdvertisementAddForm,#MessageViewForm) > .range > [class*="cell-"] { padding-bottom: 0; margin-bottom: 0; } /* Согласия идут подряд двумя .range — между ними ритм плотнее (парный блок) */ :is(#AdvertisementAddForm,#MessageViewForm) > .range:has(.confirmation-checkbox) + .range:has(.confirmation-checkbox) { margin-top: 12px; } /* Перед строкой с кнопками — воздух чуть больше: это смена смысла (данные закончились, дальше действие). */ :is(#AdvertisementAddForm,#MessageViewForm) > .range:has(.submit), :is(#AdvertisementAddForm,#MessageViewForm) > .range:has(.JS-add-photo) { margin-top: 28px; } /* Первая строка формы не должна получать верхний отступ вовсе */ :is(#AdvertisementAddForm,#MessageViewForm) > .range:first-of-type { margin-top: 0; } /* ========================================================================== 9. ВАЛИДАЦИЯ (jquery-validation) Красный — ТОЛЬКО здесь и на required. Ошибка рядом с полем. ========================================================================== */ :is(#AdvertisementAddForm,#MessageViewForm) .form-control.error, :is(#AdvertisementAddForm,#MessageViewForm) textarea.error, :is(#AdvertisementAddForm,#MessageViewForm) select.error + .select2-container .select2-selection--single { border-color: var(--ea-brand-red); box-shadow: 0 0 0 4px rgba(190, 21, 27, 0.1); } :is(#AdvertisementAddForm,#MessageViewForm) label.error { display: block; margin: 6px 0 0; font-size: 13px !important; font-weight: 400 !important; line-height: 1.4 !important; letter-spacing: normal; color: var(--ea-brand-red) !important; } /* Сообщение о проблеме поля — bootstrap-алерт темы в компактном варианте. Полноразмерный `.alert` (padding 12/15, font 16px, сплошная заливка) под полем ведёт себя как баннер: раздвигает сетку и спорит с самим полем за внимание. Здесь аутлайн-вариант в бренд-оранжевом: сообщение читается, но не перетягивает внимание, как сплошная красная плашка. `box-sizing` и `width` фиксируем явно: блок обязан укладываться в колонку и не растягивать соседей. Живёт СНАРУЖИ `.control-group`/`.form-group` (см. errorPlacement в realty_form.js): анимированная обводка группы рисуется по коробке `::after { top: 26px; bottom: 0 }`, и вложенный алерт заставлял её обводить поле вместе с сообщением. */ :is(#AdvertisementAddForm,#MessageViewForm) .field-alert, .field-alert { display: block; box-sizing: border-box; width: 100%; margin: 6px 0 18px; padding: 7px 12px; border: 1px solid var(--ea-brand-orange); border-radius: 6px; background: transparent; color: var(--ea-brand-orange); font-size: 13px; font-weight: 400; line-height: 1.4; letter-spacing: normal; text-align: left; } /* Поле и его сообщение — одна пара: собственный нижний отступ группы между ними обнуляем, зазор целиком задаёт `margin-top` самого алерта. Иначе отступы складываются и сообщения под полями-в-группах отходят дальше, чем сообщения под контролами без группы (кнопка загрузки фото) — разнобой, который и заметен глазу. */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group:has(+ .field-alert), :is(#AdvertisementAddForm,#MessageViewForm) .form-group:has(+ .field-alert) { margin-bottom: 0; } /* ========================================================================== 10. АДАПТИВ ========================================================================== */ @media (max-width: 767px) { :is(#AdvertisementAddForm,#MessageViewForm) { --ea-control-h: 50px; --ea-label-size: 13.5px; } /* 16px — порог, ниже которого iOS Safari зумит страницу при фокусе. Перечисляем те же селекторы, что и в базовом блоке (включая input[type=...]): у базового правила специфичность (1,1,1) за счёт атрибутных селекторов, и одного `.form-control` здесь не хватает. */ :is(#AdvertisementAddForm,#MessageViewForm) .form-control, :is(#AdvertisementAddForm,#MessageViewForm) input[type="text"], :is(#AdvertisementAddForm,#MessageViewForm) input[type="email"], :is(#AdvertisementAddForm,#MessageViewForm) input[type="tel"], :is(#AdvertisementAddForm,#MessageViewForm) input[type="number"], :is(#AdvertisementAddForm,#MessageViewForm) textarea, :is(#AdvertisementAddForm,#MessageViewForm) .select2-container--bootstrap .select2-selection--single { font-size: 16px; } :is(#AdvertisementAddForm,#MessageViewForm) #categoryParams { padding: 16px 14px 4px; } :is(#AdvertisementAddForm,#MessageViewForm) .btn, :is(#AdvertisementAddForm,#MessageViewForm) input[type="submit"], :is(#AdvertisementAddForm,#MessageViewForm) .JS-add-photo { width: 100%; } /* Кнопки в .cell-xs-6 стоят в ряд и на 375px сжимаются до нечитаемых — разводим в стопку. */ :is(#AdvertisementAddForm,#MessageViewForm) .submit, :is(#AdvertisementAddForm,#MessageViewForm) .cell-xs-6 { margin-bottom: 12px; } /* Загрузчик: на телефоне — 2 колонки миниатюр (как в Google Photos/Drive), а не одна широкая плитка: миниатюры на всю ширину экрана выглядят как список, а не как галерея. */ :is(#AdvertisementAddForm,#MessageViewForm) #AdvertisementPicture_list { grid-template-columns: repeat(2, 1fr); gap: 10px; } :is(#AdvertisementAddForm,#MessageViewForm) span.fileinput-button { display: flex; width: 100%; } } /* ========================================================================== 11. ДОСТУПНОСТЬ ========================================================================== */ @media (prefers-reduced-motion: reduce) { :is(#AdvertisementAddForm,#MessageViewForm) *, :is(#AdvertisementAddForm,#MessageViewForm) *::before, :is(#AdvertisementAddForm,#MessageViewForm) *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ========================================================================== 12. ГАШЕНИЕ МГНОВЕННОЙ ПЕРЕКРАСКИ РАМКИ (обязано идти ПОСЛЕДНИМ) Обводка ::after едет по периметру ~600мс, но родные :focus-правила секции 3 красили border-color в оранжевый за 197мс. Пользователь видел ровно это: рамка вспыхивает целиком, и уже ПО оранжевому ползёт вторая, градиентная дуга. Замер (transitionstart/end, реальный клик мышью): border-*-color 37677 → 37874 (197мс, весь периметр сразу) --ea-sweep 37757 → 38292 (535мс, дуга догоняет) Держим рамку нейтральной весь фокус — единственный движущийся контур это дуга. Блок обязан быть ПОСЛЕДНИМ: специфичность равна правилам секции 3, побеждает порядок каскада. Подняли бы специфичность вместо переноса — сломали бы reduced-motion-ветку, которой перекраска нужна. ========================================================================== */ :is(#AdvertisementAddForm,#MessageViewForm) .form-control:focus, :is(#AdvertisementAddForm,#MessageViewForm) .form-control:focus-visible, :is(#AdvertisementAddForm,#MessageViewForm) textarea:focus, :is(#AdvertisementAddForm,#MessageViewForm) input[type="text"]:focus, :is(#AdvertisementAddForm,#MessageViewForm) input[type="email"]:focus, :is(#AdvertisementAddForm,#MessageViewForm) input[type="tel"]:focus, :is(#AdvertisementAddForm,#MessageViewForm) input[type="number"]:focus, :is(#AdvertisementAddForm,#MessageViewForm) .select2-container--bootstrap.select2-container--focus .select2-selection--single, :is(#AdvertisementAddForm,#MessageViewForm) .select2-container--bootstrap.select2-container--open .select2-selection--single { border-color: var(--ea-line-strong); /* Ореол вводим в ритме дуги (0.52s + 0.1s задержки), а не за 0.2s — иначе тень успевает очертить весь периметр раньше обводки и читается как та же «мгновенная рамка», только размытая. */ transition: border-color 0.2s var(--ea-ease), box-shadow 0.52s var(--ea-ease) 0.1s, background-color 0.2s var(--ea-ease); } /* Без движения приём не работает — там честная мгновенная рамка нужна. */ @media (prefers-reduced-motion: reduce) { :is(#AdvertisementAddForm,#MessageViewForm) .form-control:focus, :is(#AdvertisementAddForm,#MessageViewForm) textarea:focus, :is(#AdvertisementAddForm,#MessageViewForm) .select2-container--bootstrap.select2-container--focus .select2-selection--single, :is(#AdvertisementAddForm,#MessageViewForm) .select2-container--bootstrap.select2-container--open .select2-selection--single { border-color: var(--ea-brand-orange); transition: none; } } /* ========================================================================== 13. ИКОНКИ ПАРАМЕТРОВ КАТЕГОРИИ — привязка по СМЫСЛУ, не по позиции Раньше правила висели на `label[for="CategoryParamValueNDataInt"]` внутри `:has(#AdvertisementCategoryId option[value=X]:checked)` — то есть на НОМЕРЕ СЛОТА в конкретной категории. Слот N держит разное поле в разных категориях (5 = Balcony на квартирах, «With furniture?» на земле), поэтому правил было 111 и любое добавление/перестановка параметра в категории ломала соответствие. `CategoryParamsHelper::renderFormCategoryParamValue()` теперь отдаёт в разметку класс `cpalias-` (алиас CategoryParamType — тот же ключ, по которому работает CategoryParamVisibility). Иконка выбирается по нему: 67 правил вместо 111, категории не перечисляются вообще, новый параметр получает иконку сразу во всех категориях, где он объявлен. ========================================================================== */ /* --- Глифы FontAwesome 4.7 --------------------------------------------- */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-accounting-documents > label::before { content: "\f15c"; } /* Accounting documents */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-agent-fee > label::before { content: "\f155"; } /* Commission agent, % */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-air-conditioner > label::before { content: "\f2dc"; } /* Air conditioning */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-apartment-type > label::before { content: "\f1ad"; } /* Apartment type * */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-area > label::before { content: "\f065"; } /* Area, m2 * */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-avito-contact-method > label::before { content: "\f27a"; } /* Contact method avito */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-avito-deal-goal > label::before { content: "\f2b5"; } /* Franchise type (Avito) */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-avito-decoration-commercial > label::before { content: "\f1fc"; } /* Decoration commercial */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-avito-gas-supply > label::before { content: "\f06d"; } /* Газ avito */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-avito-goods-sub-type > label::before { content: "\f02c"; } /* Franchise goods subtype (Avito) */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-avito-goods-type > label::before { content: "\f0b1"; } /* Goods type (Avito) */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-avito-land-status > label::before { content: "\f1bb"; } /* Land status Avito */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-avito-layout > label::before { content: "\f0ce"; } /* Avito Layout */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-avito-object-type-lot > label::before { content: "\f1bb"; } /* Object type lot Avito (land) */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-avito-price-type > label::before { content: "\f0d6"; } /* Price setting option (Avito) */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-avito-property-right > label::before { content: "\f2b5"; } /* Ownership */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-avito-sewerage > label::before { content: "\f2cc"; } /* Канализация avito */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-avito-transaction-type > label::before { content: "\f0ec"; } /* Type of transaction avito commercial */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-avito-water-supply > label::before { content: "\f043"; } /* Водоснабжение avito */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-balcony > label::before { content: "\f2d0"; } /* Balcony * */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-bedroom > label::before { content: "\f236"; } /* Bedroom * */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-building-state > label::before { content: "\f0f6"; } /* Property Certificate */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-buildingclass > label::before { content: "\f005"; } /* Building Class */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-built-year > label::before { content: "\f133"; } /* Year built */ /* fa-ban: сигареты в FA 4.7 нет, `\f172` — это bitbucket-square (логотип), а не «курение»; знак запрета читается однозначно. */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-can-smoke > label::before { content: "\f05e"; } /* Smoking allowed */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-canalization > label::before { content: "\f2cc"; } /* Canalization * */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-cian-condition-type > label::before { content: "\f24e"; } /* Condition (Cian) */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-cian-input-type > label::before { content: "\f2bd"; } /* Cian login (avito) */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-cian-layout > label::before { content: "\f0ce"; } /* Cian Layout */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-commercial-building-type > label::before { content: "\f0f7"; } /* Type of building */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-commercial-readiness-status > label::before { content: "\f00c"; } /* Readiness status */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-commercial-type > label::before { content: "\f2b5"; } /* Possible assignment * */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-commission > label::before { content: "\f155"; } /* Client commission, % */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-construction-stage > label::before { content: "\f085"; } /* Construction stage */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-distance-from-road > label::before { content: "\f018"; } /* Distance from road (Avito) */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-distance-to-city > label::before { content: "\f018"; } /* Distance to city (km) */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-electricity-capacity > label::before { content: "\f0e4"; } /* Power grid capacity, kW */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-elevator > label::before { content: "\f0dc"; } /* Elevator */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-external-infrastructure > label::before { content: "\f0e8"; } /* Infrastructure */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-first-line-site > label::before { content: "\f018"; } /* Line */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-flat-parking-type > label::before { content: "\f1b9"; } /* Type of parking */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-floor-commercial > label::before { content: "\f0ce"; } /* Floor type */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-for-yourself-site > label::before { content: "\f0b1"; } /* For yourself or for work (for rent)? */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-gipernn-object-type > label::before { content: "\f1ad"; } /* Property type (GipernN) */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-gipernn-target > label::before { content: "\f0b1"; } /* Designated use (GipernN) */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-heating-supply > label::before { content: "\f2c9"; } /* Heating */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-heating-type-cian > label::before { content: "\f2c9"; } /* Heating type (Cian) */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-lease-deposit > label::before { content: "\f0d6"; } /* Deposit amount */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-lease-type > label::before { content: "\f0f6"; } /* Lease type */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-lot-cadastral-number > label::before { content: "\f02c"; } /* cadastral number */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-lot-type > label::before { content: "\f1bb"; } /* Type of land */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-mortgage > label::before { content: "\f19c"; } /* Mortgage */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-parking > label::before { content: "\f1b9"; } /* Parking */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-parties-allowed > label::before { content: "\f0fc"; } /* Parties are allowed */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-prepay-months > label::before { content: "\f133"; } /* Monthly prepayment */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-quality > label::before { content: "\f24e"; } /* Condition */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-refrigerator > label::before { content: "\f1e6"; } /* Refrigerator */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-renovation > label::before { content: "\f1fc"; } /* Repairs */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-renovation-commercial > label::before { content: "\f1fc"; } /* Renovation (commercial) */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-room-furniture > label::before { content: "\f0f2"; } /* Furniture */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-rooms-house > label::before { content: "\f236"; } /* Rooms in the house */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-site-area > label::before { content: "\f1bb"; } /* Land area, m2 * */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-television > label::before { content: "\f26c"; } /* TV */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-wall-type > label::before { content: "\f1b2"; } /* Wall material (Avito houses) */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-washing-machine > label::before { content: "\f021"; } /* Washing machine */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-watersupply > label::before { content: "\f043"; } /* Water supply */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-wc-type > label::before { content: "\f2cd"; } /* Number of bathrooms */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-window-view > label::before { content: "\f06e"; } /* View from the window * */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-with-children > label::before { content: "\f1ae"; } /* It is possible with children */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-with-furnitute-site > label::before { content: "\f0f2"; } /* With furniture? */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-with-pets > label::before { content: "\f1b0"; } /* It is possible with pets */ /* --- Ступеньки: рисуются геометрией ------------------------------------- В FontAwesome 4.7 глифа лестницы НЕТ (свип кандидатов f148/f149 level, f0cb list-ol, f176 long-arrow, f1b3 cubes, f0dc sort, f00a th, f24d clone против эталона отсутствия `\f8ff`=7px: все читаются как стрелка/список/ куб). FA6 `stairs` недоступен — на фронте живёт 4.7, подмена шрифта сломала бы остальные иконки. Поэтому 6 слоёв linear-gradient: три проступи (6/5/5 × 2px) и три подступёнка (2 × 4px), сложенные снизу-слева вверх-вправо. Шрифт не участвует — приём переживёт смену FA. */ :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-floor > label::before, :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-floor-additionally > label::before, :is(#AdvertisementAddForm,#MessageViewForm) .control-group.cpalias-floors > label::before { content: ""; display: inline-block; width: 16px; height: 14px; position: relative; /* глиф FA сидит на базовой линии — рисованная лестница встаёт туда же, иначе строка лейбла подпрыгивает относительно соседних полей */ vertical-align: baseline; top: 2px; background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 6px 2px, 2px 4px, 5px 2px, 2px 4px, 5px 2px, 2px 4px; background-position: 0 12px, 5px 8px, 5px 8px, 10px 4px, 10px 4px, 14px 0; } /* ========================================================================== 14. ПЛИТКА ЗАГРУЗКИ: превью во всю площадь + читаемый прогресс Замер до правки (Slow 3G, MutationObserver по #AdvertisementPicture_list): плитка 183×137, превью 80×60 — картинка занимала четверть площади и «растягивалась» только после загрузки (готовая плитка 181×135); .progress высотой 5px стоял В ПОТОКЕ под именем файла и терялся на фоне скелетон-мерцания, хотя технически работал (0% → 53% → 100%). blueimp рисует превью в фиксированного размера (опция previewMaxWidth/Height в JS-инициализации) — менять её нельзя, это правка логики загрузчика. Поэтому масштабируем средствами CSS: canvas растягивается на всю плитку через object-fit, как обычная картинка. ========================================================================== */ /* Превью — фон плитки на всю площадь, а не маленький центрированный холст */ :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .upload-preview-row { position: absolute; inset: 0; z-index: 0; margin: 0; padding: 0; } :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .upload-preview-row .preview { display: block; width: 100%; height: 100%; } :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .upload-preview-row .preview canvas, :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .upload-preview-row .preview img { /* canvas от blueimp приходит 80×60 своими width/height-атрибутами — переопределяем именно размер БОКСА, содержимое масштабирует object-fit */ width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; border-radius: calc(var(--ea-radius) - 2px); /* пока грузится — приглушаем, чтобы читались имя файла и прогресс поверх */ opacity: 0.55; } /* Появилось превью — скелетон больше не нужен, иначе мерцает поверх картинки */ :is(#AdvertisementAddForm,#MessageViewForm) .template-upload:has(.preview canvas)::before, :is(#AdvertisementAddForm,#MessageViewForm) .template-upload:has(.preview img)::before { content: none; } /* Текст поверх превью — с подложкой, иначе имя файла тонет в картинке. `position: static` осознанно: строка не должна быть containing block'ом. Кнопки лежат ВНУТРИ неё по разметке загрузчика, и при `relative` они отсчитывали свои top/right от строки, а не от плитки — уезжали на top 66 / right 20 (замер) и накрывали процент, тогда как на готовой плитке стоят на 11/11. Слой над превью держит `isolation` — он поднимает строку без создания containing block'а для absolute-потомков. `backdrop-filter` убран по той же причине: он создаёт containing block для absolute-потомков ДАЖЕ при `position: static` — с ним кнопки так и отсчитывались от строки (замер: offsetParent = .upload-info-row при position static). Подложка непрозрачна на 82%, размытия под ней почти не видно. */ :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .upload-info-row { position: static; isolation: isolate; z-index: 1; margin-top: auto; padding: 6px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.82); } /* --- Прогресс: заметная полоса, прижатая к низу плитки ------------------- */ :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .upload-size-progress { display: flex; flex-direction: column; gap: 4px; } :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .progress { height: 8px; border-radius: 999px; /* контраст к светлой подложке — 5px на белом полупрозрачном не читались */ background: rgba(24, 18, 14, 0.18); overflow: hidden; box-shadow: inset 0 1px 2px rgba(24, 18, 14, 0.12); } :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .progress-bar { height: 8px !important; min-width: 2px; } /* Полосы движутся В СТОРОНУ ЗАПОЛНЕНИЯ, слева направо. Тема анимирует `background-position: 40px → 0` (style_formating.css:6449), то есть справа налево — против роста бара. Правило темы трогать нельзя (общий файл), поэтому переопределяем анимацию здесь: свои кейфреймы `0 → 40px` и явный `background-size`, иначе шаг 40px не совпадёт с шагом полос и движение будет рваным. Полосы кладём поверх фирменного градиента вторым слоем — сам градиент (жёлтый → оранжевый) остаётся неподвижным, «бежит» только штриховка. */ @keyframes ea-progress-stripes-ltr { from { background-position: 0 0, 0 0; } to { background-position: 40px 0, 0 0; } } :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .progress-striped .progress-bar, :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .progress-bar { background-image: linear-gradient( 45deg, rgba(255, 255, 255, 0.22) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.22) 50%, rgba(255, 255, 255, 0.22) 75%, transparent 75%, transparent ), linear-gradient(90deg, var(--ea-brand-yellow), var(--ea-brand-orange)) !important; background-size: 40px 40px, 100% 100%; background-repeat: repeat, no-repeat; animation: ea-progress-stripes-ltr 1.2s linear infinite !important; } @media (prefers-reduced-motion: reduce) { :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .progress-striped .progress-bar, :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .progress-bar { animation: none !important; } } /* Размер и процент — одной строкой НАД полосой, полоса во всю ширину. Замер до правки: .upload-size-progress оставалась flex-строкой, полоса получала 90px из 161 и уезжала на 36px вправо от текста, а процент был спозиционирован от неё же (bottom:22px) и висел ниже-правее полосы — на скриншоте это читалось как «текст смещён относительно прогресс-бара». Значение берётся из aria-valuenow, его обновляет blueimp на .progress. */ :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .upload-size-progress { position: relative; display: flex; flex-direction: column; gap: 4px; } :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .upload-size-progress .size { /* размер слева, процент справа — одна строка, полоса под ними */ display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .upload-size-progress .size::after { content: attr(data-pct); font-weight: 700; color: var(--ea-brand-orange); } :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .progress { width: 100%; } /* --- 14.1 Алерты загрузки — отдельной строкой НАД сеткой плиток ----------- Ошибка рендерится загрузчиком внутрь карточки (`.template-upload .error`), а карточка ~183×137 — текст вроде «File is too large» туда не влезает. `sellprop_upload_alerts.js` переносит текст в общий блок перед списком; здесь только раскладка, вид берётся от штатных `.alert`/`.alert-danger` темы TM58887 — свой компонент не заводим. */ #AdvertisementPictureUploadAlerts:empty { display: none; } #AdvertisementPictureUploadAlerts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } :is(#AdvertisementAddForm,#MessageViewForm) .upload-alert, .upload-alerts .upload-alert { position: relative; display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 40px 12px 14px; border-radius: var(--ea-radius); font-size: 13px; line-height: 1.45; } /* Иконка предупреждения — тем же приёмом, что иконки лейблов (FA 4.7) */ .upload-alerts .upload-alert::before { content: "\f071"; flex: 0 0 auto; font-family: "FontAwesome"; font-size: 14px; line-height: 1.35; } .upload-alerts .upload-alert-text { /* длинное имя файла не должно распирать строку за край формы */ min-width: 0; overflow-wrap: anywhere; } .upload-alerts .upload-alert .close { position: absolute; top: 8px; right: 10px; padding: 0 4px; font-size: 20px; line-height: 1; background: none; border: 0; opacity: 0.55; cursor: pointer; } .upload-alerts .upload-alert .close:hover { opacity: 1; } /* --- 14.2 Ширина строк внутри плитки загрузки ---------------------------- Тема задаёт детям инфо-строки flex-базис под ГОРИЗОНТАЛЬНУЮ раскладку загрузчика: `.upload-name-error {flex:1 1 140px}`, `.upload-size-progress {flex:1 1 100px}`. Мы развернули строку в колонку (плитка 183px, в ряд не помещается), и базис стал вредным: замер дал 68px и 90px внутри 161px — имя файла, размер и полоса висели узкой колонкой со сдвигом 36px вправо. Обнуляем базис, чтобы каждый ряд занимал всю ширину подложки. */ :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .upload-info-row > * { flex: 0 0 auto; width: 100%; min-width: 0; } /* ========================================================================== 15. ПЛИТКА: единое место кнопок + выравнивание бейджа «Main» 1) Кнопки. На готовой плитке delete/rotate уже стоят справа вверху (замер: top 9, right 9 и 49), а на плитке ЗАГРУЗКИ кнопка отмены шла в потоке слева и наезжала на имя файла. Приводим оба состояния к одной точке — правый верхний угол, одинаковый размер и шаг. 2) Бейдж «Main». Замер отмеченного состояния: у лейбла остался `padding-left: 20px` от темы (место под нативный чекбокс, который мы скрыли) — отсюда «слишком большой отступ от звёздочки до текста»; высота лейбла 24px при line-height 13.2px тянула текст вверх внутри бокса. Обнуляем падинг (расстояние задаёт gap флекса) и снимаем лишнюю высоту. ========================================================================== */ /* --- 15.1 Кнопки: одно место в обоих состояниях -------------------------- */ /* Геометрию и круглую форму кнопкам задаёт канон выше («Действия поверх плитки») — он теперь распространён и на `.template-upload`, поэтому cancel выглядит и стоит ровно как delete/rotate: КАЖДАЯ кнопка — отдельный круг, позиционируется сама. Обёртка `.upload-buttons` есть только в разметке загрузки; она не должна ни позиционировать, ни собирать кнопки в общий бокс — иначе две кнопки читаются как один вытянутый кружок. Схлопываем её в ноль. */ :is(#AdvertisementAddForm,#MessageViewForm) .template-upload .upload-buttons { display: contents; } /* --- 15.2 Бейдж «Main»: текст по центру, отступ от звезды — ровно gap ---- */ :is(#AdvertisementAddForm,#MessageViewForm) .template-download .input.checkbox label { /* padding темы держал место под нативный чекбокс — он скрыт (opacity:0, растянут на весь бейдж), поэтому отступ лишний: его роль играет gap */ padding: 0; /* line-height и height — с !important: правило секции 8 задаёт `line-height: 1.2 !important`, из-за него бокс лейбла был 24px против 13px текста, и при align-items:center подпись уезжала вверх относительно звезды (замер: labelH 24 при lineHeight 13.2px). */ line-height: 1 !important; height: auto !important; /* Bootstrap: `.checkbox label { min-height: 24px }` — место под нативный чекбокс. Он здесь скрыт, а 24px против 11px текста и держали подпись выше звезды (замер: labelH 24 при lineHeight 11px). */ min-height: 0 !important; align-self: center; } /* Звезда и подпись — на одной оптической линии */ :is(#AdvertisementAddForm,#MessageViewForm) .template-download .input.checkbox::after { line-height: 1; align-self: center; } /* --- 15.3 Битая плитка не должна мелькать -------------------------------- `sellprop_upload_alerts.js` снимает её через .cancel, но между отрисовкой и срабатыванием MutationObserver проходит заметное время (замер: первое событие через 18с при валидации на стороне загрузчика). Прячем плитку с ошибкой сразу — CSS применяется в тот же кадр, что и вставка узла, поэтому пользователь её не увидит. JS всё равно нужен: он переносит текст в алерт и убирает файл из очереди blueimp. Признак ошибки — бейдж `.label-danger`: шаблон вставляет его только в ветке `if (file.error)`. `.error:not(:empty)` для этого НЕ годится — сам `
` в tmpl_files.ctp рендерится с переводами строк внутри, поэтому текстовый узел там есть ВСЕГДА и `:empty` не срабатывает даже у исправного файла (замер: 34 символа) — правило скрывало все загружаемые плитки подряд. */ :is(#AdvertisementAddForm,#MessageViewForm) .template-upload:has(.error .label-danger) { display: none !important; } /* ========================================================================== 16. СОГЛАСИЯ + КАПЧА — одна строка, две половины Слева два чекбокса, справа reCAPTCHA. Раньше капча висела внутри правой колонки под категориями, а чекбоксы шли двумя отдельными `range` на всю ширину — строка выглядела рваной. ========================================================================== */ /* Капча — по левому краю САМОЙ карточки категорий (`#categoryParams`), а не её содержимого: визуально она читается как продолжение блока над ней, и любой сдвиг сразу заметен (замер до правки: +22px вправо, +44px вниз). `.controls` темы даёт `padding: 20px 0 0` — снимаем, интервал строк задаёт сам `.range`. Второй источник отступа, `#form_recaptcha { padding-top: 20px }` из custom.css, убран в самом custom.css: селектор по id перебивает любое классовое правило отсюда. */ :is(#AdvertisementAddForm,#MessageViewForm) .sell-recaptcha-holder { padding: 0; } /* Строка согласий выравнивается по верху: чекбоксы и капча начинаются с одной линии независимо от того, что выше. */ :is(#AdvertisementAddForm,#MessageViewForm) .sell-consent-row { align-items: start; } @media (max-width: 991px) { /* Колонки схлопнулись в одну — капча встаёт под чекбоксами, нужен зазор. */ :is(#AdvertisementAddForm,#MessageViewForm) .sell-recaptcha-holder { padding-top: 16px; } } /* ========================================================================== 17. ФОРМА СВЯЗИ НА ГЛАВНОЙ (#MessageViewForm) — тёмный контекст Разметка приходит из CMS-блока `blocks.id=36` и повторяет структуру эталона (`.form-group > label.form-label` + `.form-control`), поэтому весь стиль выше применяется к ней без правки разметки. Здесь — только отличия контекста: 1) Секция стоит на тёмном параллаксе `.context-dark`. Замер фона (`4f70…855crop.jpg`, sRGB relative luminance): min 0.0091 / p50 0.0262 / max 0.0603 — тёмный по всей площади. Поэтому вся палитра формы переопределяется ТОКЕНАМИ: базовые правила читают --ea-surface/--ea-ink/ --ea-line, менять сами правила не нужно. 2) Валидация тут не jquery-validation, а regula из темы (`script.js`): класс `has-error` на `.form-group` + ``. Контейнер рендерится ПУСТЫМ ещё до ввода — его обязательно гасить, иначе форма при загрузке выглядит ошибочной. 3) Свой набор полей → свои глифы у лейблов. ========================================================================== */ .context-dark #MessageViewForm { /* Поле — тонированная стеклянная подложка, а не сплошной белый блок: белые прямоугольники на тёмном параллаксе слишком броские. 7% белого поверх самого светлого участка фона (L 0.0603) даёт L≈0.126 → белый текст 5.9:1, поверх среднего (0.0262) — 8.9:1. */ --ea-surface: rgba(255, 255, 255, 0.07); --ea-ink: #ffffff; --ea-ink-label: #ffffff; --ea-ink-muted: rgba(255, 255, 255, 0.74); /* Рамка — non-text UI (WCAG 1.4.11, порог 3.0). Композитить надо в sRGB, а не в пространстве яркостей: при .24 выходит 2.10 на самом светлом участке фото. .38 даёт 3.14 (light) / 3.41 (mid) / 3.54 (dark) и при этом поле не превращается обратно в «броский белый». */ --ea-line: rgba(255, 255, 255, 0.38); --ea-line-strong: rgba(255, 255, 255, 0.62); /* Осветлённая ветка брендовой рампы для ВОЛНЫ ПО ЛЕЙБЛУ (background-clip: text). Исходные стопы на фото-фоне проваливают AA: #BE151B = 1.88, #F26921 = 3.86 на самом светлом участке (порог 4.5 — лейбл 14px/700 не является large text). Последовательность красный→оранжевый→жёлтый→белый сохранена, каждый стоп замерен на трёх точках фона (см. отчёт). Базовые --ea-brand-* НЕ переопределяем: их же читают кольцо обводки, спайн и градиент кнопки — там нужен исходный бренд. */ --ea-ramp-1: #ff9d8a; /* 5.92 / 7.29 / 8.29 */ --ea-ramp-2: #ffb04d; /* 6.56 / 8.08 / 9.18 — он же --ea-accent-on-dark */ --ea-ramp-3: #ffd08a; /* 8.30 / 10.22 / 11.62 */ /* Стеклянная кромка: тонкий внутренний блик по верхнему краю — без него полупрозрачная подложка читается как «дырка» в фоне, а не как поверхность. Тень наружу на тёмном не работает (её просто не видно), поэтому обе переменные держат только inset-блик + брендовый ореол фокуса. */ --ea-shadow-rest: inset 0 1px 0 rgba(255, 255, 255, 0.09); --ea-shadow-focus: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 0 0 4px rgba(247, 146, 30, 0.18); /* Высота textarea в одном месте: её же читает коробка обводки ниже. */ --ea-msg-textarea-h: 150px; /* Акцент для ТЕКСТА на тёмном: брендовый #F7921E даёт на самом светлом участке фото 4.12:1 — ниже порога AA. Осветлённый до #FFB04D — 5.24:1 (на среднем участке 7.59:1). Для рамок/иконок бренд остаётся исходным. */ --ea-accent-on-dark: #ffb04d; /* База формы (блок 0) ставит color: var(--ea-ink) = тёмная тушь — именно из-за неё текст согласия на параллаксе был нечитаем (1.3:1). */ color: #ffffff; } .context-dark #MessageViewForm .form-control { /* Стекло: подложка полупрозрачная, поэтому фон под ней размываем — иначе сквозь поле читается деталь фотографии и текст ввода дробится. */ -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); } .context-dark #MessageViewForm .form-control::placeholder { color: rgba(255, 255, 255, 0.6); } /* Автозаполнение Chrome заливает поле собственным непрозрачным фоном и ставит тёмный текст — на тёмной секции это возврат к «броскому белому». */ .context-dark #MessageViewForm .form-control:-webkit-autofill { -webkit-text-fill-color: #ffffff; -webkit-box-shadow: 0 0 0 1000px rgba(38, 40, 44, 0.92) inset; caret-color: #ffffff; } .context-dark #MessageViewForm .form-group > label { color: var(--ea-ink-label) !important; } #MessageViewForm label[for="MessageName"]::before { content: "\f007"; } /* user */ #MessageViewForm label[for="MessageTitle"]::before { content: "\f007"; } /* user */ #MessageViewForm label[for="MessagePhone"]::before { content: "\f095"; } /* phone */ #MessageViewForm label[for="MessageEmail"]::before { content: "\f0e0"; } /* envelope */ #MessageViewForm label[for="MessageBody"]::before { content: "\f036"; } /* align-left */ /* Textarea: высота из переменной (было inline `height:150px` в CMS-блоке — !important единственный способ его перебить и держать один источник правды с коробкой обводки). resize запрещён: растянутое поле разъехалось бы с обводкой, которая знает высоту из той же переменной. */ #MessageViewForm textarea.form-control { height: var(--ea-msg-textarea-h) !important; min-height: var(--ea-msg-textarea-h); padding: 14px 16px; line-height: 1.6; resize: none; } /* --- Обводка-развёртка: строго по периметру САМОГО поля -------------------- Базовая коробка `top:26px; bottom:0` верна для эталона, но здесь под полем живёт ещё контейнер regula (замер: +22px снизу у 4 из 5 групп) — обводка захватывала его вместе с полем. Поэтому нижний край не тянем к низу группы, а задаём высоту контрола явно; верх — не «подогнанные» 26px, а точная высота лейбла из тех же токенов (14px × 1.35 + 8px = 26.9px, замер deltaTop = 26.9 на всех пяти группах). */ #MessageViewForm .form-group::after { top: calc(var(--ea-label-size) * var(--ea-label-lh) + var(--ea-label-gap)); bottom: auto; height: var(--ea-control-h); } #MessageViewForm .form-group:has(textarea)::after { height: var(--ea-msg-textarea-h); } /* --- Валидация regula ------------------------------------------------------ Контейнер сообщения тема выводит ПУСТЫМ при загрузке страницы. Пустой он обязан не занимать места и ничего не рисовать, иначе форма читается как уже провалившая проверку (жалоба пользователя). */ #MessageViewForm .form-validation:empty { display: none; } #MessageViewForm .has-error .form-control { border-color: var(--ea-brand-yellow); box-shadow: 0 0 0 4px rgba(247, 146, 30, 0.16); } /* Сообщение — просто строка текста, без плашки: рамка вокруг подписи на тёмном фоне читалась как вторая обводка поля. Тёплый акцент, а не красный: #BE151B на этом фоне даёт 1.4:1 (замер), --ea-accent-on-dark — 5.24:1. */ #MessageViewForm .form-validation { position: static; display: block; width: 100%; margin: 6px 0 0; padding: 0; border: 0; background: transparent; color: var(--ea-accent-on-dark); font-size: 13px; line-height: 1.4; text-align: left; } /* Согласие: текст и ссылка на тёмном — замер контраста ниже в отчёте. */ #MessageViewForm .confirmation-text, #MessageViewForm .confirmation-text p { color: rgba(255, 255, 255, 0.86); } #MessageViewForm .confirmation-text a { color: var(--ea-accent-on-dark); text-decoration: underline; } /* Обязательность полей видна ДО первой ошибки: у эталона звёздочка вшита в текст лейбла, здесь разметка приходит из CMS-блока без неё — берём признак из атрибута regula, который уже стоит на контроле. Без этого пользователь узнаёт про required только по факту ошибки. */ #MessageViewForm .form-group:has([data-constraints*="@Required"]) > label::after { content: " *"; color: var(--ea-accent-on-dark); font-weight: 700; } #MessageViewForm .confirmation-checkbox { accent-color: var(--ea-brand-orange); } /* --- Фон секции: приём из `.ea-quick` (custom.css:886-912) ----------------- Там фото лежит отдельным слоем, а поверх него — затемняющая пелена `.ea-quick::before` с теми же стопами, и только потом белый текст. Здесь фото уже вынесено темой в `.rd-parallax-layer[data-type="media"]`, поэтому повторяем ровно недостающее звено — пелену. Носитель — html-слой: замер даёт y/h 1:1 с секцией (1041px, вся ширина 1425), значит стопы градиента ложатся на бокс СЕКЦИИ, как в оригинале, а не на смещённый параллаксом медиа-слой (тот на 51px выше и живёт своей прокруткой). z-index:-1 — слой fixed, т.е. свой stacking context: пелена уходит под контент слоя, но остаётся НАД соседним медиа-слоем. */ .rd-parallax:has(#MessageViewForm) .rd-parallax-layer[data-type="html"]::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient( 180deg, rgba(20, 20, 22, 0.72) 0%, rgba(20, 20, 22, 0.58) 45%, rgba(20, 20, 22, 0.78) 100% ); } /* --- Секция выходит из штатного rd-parallax --------------------------------- Тема двигает `.rd-parallax-inner` (position:fixed) ТОЛЬКО из scroll-обработчика (js/script.js:1106-1115 + плагин RDParallax). Фиксированный слой со страницей не едет, поэтому на инерционной прокрутке компоновщик рисует кадр раньше, чем JS пересчитает transform, и снизу секции открывается полоса фона страницы РОВНО в дельту кадра (замер: 119.3px при шаге 120px, воспроизводится на каждом кадре). Запас на дочерних слоях эту дыру не лечит: слои лежат внутри `.rd-parallax-inner { overflow:hidden }` и обрезаются вместе с ним. Поэтому берём схему `.ea-quick` (custom.css:886-930): слои позиционируются внутри секции и едут со страницей, скролл-параллакс — на композиторе через animation-timeline:view(), без участия JS. `!important` обязателен: position/height/transform тема пишет инлайном из JS. */ .rd-parallax:has(#MessageViewForm) { /* clip, а не hidden: hidden сделал бы секцию scroll-контейнером и заморозил view()-таймлайн фото (тот же нюанс, что у `.ea-quick`, custom.css:893). */ overflow: clip !important; } /* relative, а не absolute: секция берёт высоту от этого слоя (тема пишет её инлайном по замеру inner). Вынь inner из потока — секция схлопнется в 0. */ .rd-parallax:has(#MessageViewForm) .rd-parallax-inner { position: relative !important; top: auto !important; width: auto !important; height: auto !important; overflow: visible; transform: none !important; } .rd-parallax:has(#MessageViewForm) .rd-parallax-layer-holder { position: static; transform: none !important; } .rd-parallax:has(#MessageViewForm) .rd-parallax-layer[data-type="html"] { position: relative !important; width: auto !important; height: auto !important; transform: none !important; z-index: 2; } /* Фото-слой: запас 42% сверху и снизу, как у `.ea-quick__bg` — при сдвиге параллакса край картинки не выезжает за секцию. Сдвиг за мышью идёт по каналу background-position: transform слоя занят скролл-параллаксом, два transform на одном элементе перетёрли бы друг друга. --mx/--my пишет home_cards.js (тот же обработчик, что у `.ea-quick`). */ .rd-parallax:has(#MessageViewForm) .rd-parallax-layer[data-type="media"] { position: absolute !important; left: 0; right: 0; top: -42%; bottom: -42%; width: auto !important; height: auto !important; z-index: 0; /* без !important: важное авторское объявление перебило бы CSS-анимацию ниже. Инлайновый translate3d темы остаётся только там, где анимации нет (<992px или нет поддержки view()) — его отставание съедает запас 42%. */ transform: none; background-size: cover; background-repeat: no-repeat; background-position: calc(50% + var(--mx, 0px)) calc(50% + var(--my, 0px)); transition: background-position 0.35s cubic-bezier(0.2, 0.6, 0.2, 1); will-change: background-position; } /* Параллакс с 992px — как штатный rd-parallax темы; ниже фон статичен. Ключевые кадры переиспользуем из custom.css (`ea-quick-parallax`). `transform` здесь без !important: иначе важное объявление выше перебило бы анимацию (в каскаде важные авторские правила стоят над анимациями). */ @media (min-width: 992px) { @supports (animation-timeline: view()) { .rd-parallax:has(#MessageViewForm) .rd-parallax-layer[data-type="media"] { transform: none; animation: ea-quick-parallax linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; } } } @media (prefers-reduced-motion: reduce) { .rd-parallax:has(#MessageViewForm) .rd-parallax-layer[data-type="media"] { transition: none; animation: none; } } /* --- Строка согласия: чекбокс и текст в одну строку ------------------------ В CMS-блоке чекбокс, его визуальный дубль `.checkbox-custom-dummy` и `.confirmation-text` — блочные соседи, поэтому текст падал под чекбокс. Flex-строка вместо блоков: на переносе длинный текст остаётся в своей колонке и не подтекает под чекбокс (этим flex лучше float/inline-block). */ #MessageViewForm .confirmation { display: flex; align-items: flex-start; gap: 12px; text-align: left; } #MessageViewForm .confirmation .checkbox-custom-dummy { flex: 0 0 auto; } #MessageViewForm .confirmation-text { flex: 1 1 auto; min-width: 0; } /* line-height 15px при кегле 15px — текст шёл вплотную и не совпадал по высоте с 22px-чекбоксом. 1.5 выравнивает первую строку с ним и заодно выводит межстрочный в читаемый диапазон. */ #MessageViewForm .confirmation-text p { line-height: 1.5; }