/* ========================================================================== ea-form.css — ОБЩИЙ СЛОЙ ПРИМИТИВОВ ПОЛЯ (лейбл, иконка, кольцо, контрол, кнопка, валидация, a11y). Выделен из sellprop_form.css 2026-08-10. Зачем отдельный файл: те же примитивы нужны трём формам — add-форме (#AdvertisementAddForm), форме связи на главной (#MessageViewForm) и фильтру каталога (.ea-form). Фильтр живёт в теле блока 47 и на /agency/realty, где sellprop_form.css НЕ подключается вовсе, поэтому слой обязан грузиться глобально — он в TmSiteHelper::$_css сразу после custom.css. Скоуп АДДИТИВНЫЙ: :is(#AdvertisementAddForm,#MessageViewForm,.ea-form). ID оставлены намеренно — специфичность :is() берётся по «тяжёлому» аргументу, так что добавление класса ничего не роняет и тема не начинает перебивать правила формы. Снятие ID — отдельная задача после подтверждённого вида. Групповой селектор — :is(.form-group,.control-group,.elementor-field-group): третий класс носят группы фильтра. Что осталось в sellprop_form.css: обвязка именно add-формы (вертикальный ритм групп, карта, category_params, чекбоксы согласий, загрузка фото, адаптив, плитки, капча, тёмный контекст формы связи). Порядок секций сохранён от исходника — он значим: §12 гасит перекраску рамки равной специфичностью и обязано идти ПОСЛЕ §3. ========================================================================== */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) { /* Цвета */ --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,.ea-form), :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) input, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) select, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) textarea, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) button, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) label, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .select2-container, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .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) :is(.form-group,.control-group,.elementor-field-group) > label (страховка на параметры) ========================================================================== */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) label, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .form-label, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .form-label-size-lg, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .form-label-outside, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .rd-input-label, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .lab, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .label2, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-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,.ea-form) :is(.form-group,.control-group,.elementor-field-group).required > label::after, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group) > label[for*="required"]::after { content: ""; } /* Лейбл активной группы подсвечивается брендовым — связь «фокус ↔ подпись». ВАЖНО: базовый блок лейблов выше задаёт `color: … !important`, поэтому здесь тоже нужен !important — иначе правило проигрывает и подсветки нет (регресс был именно такой: цвет не менялся ни у input, ни у select2). `:focus-within` не срабатывает для select2: настоящий фокус уходит на служебное поле поиска ВНЕ :is(.form-group,.control-group,.elementor-field-group), поэтому дополнительно ловим класс `select2-container--open`, который select2 вешает на контейнер. */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):focus-within > label, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(input:focus) > label, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(textarea:focus) > label, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(select:focus) > label, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(.select2-container--open) > label, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(.select2-container--focus) > label, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(input:focus) > label, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(select:focus) > label, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(.select2-container--open) > label, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-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,.ea-form) :is(.form-group,.control-group,.elementor-field-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,.ea-form) :is(.form-group,.control-group,.elementor-field-group) > label::before { -webkit-text-fill-color: currentColor; transition: color 0.18s var(--ea-ease); } :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):focus-within > label, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(input:focus) > label, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(textarea:focus) > label, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(select:focus) > label, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(.select2-container--open) > label, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(.select2-container--focus) > label, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(input:focus) > label, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(select:focus) > label, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(.select2-container--open) > label, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(.select2-container--focus) > label { background-position: 0 0; } /* Согласия и подписи над картой — НЕ лейблы полей, волна там неуместна. ВАЖНО: лейбл согласия — прямой потомок :is(.form-group,.control-group,.elementor-field-group) и БЕЗ класса, т.е. попадает под `:is(.form-group,.control-group,.elementor-field-group) > label` выше. Классов `.checkbox label` / `.confirmation-label` в этой разметке НЕТ — исключать надо по наличию чекбокса в группе. Текст лежит во вложенном

(block-body), который наследует прозрачный text-fill → сбрасываем и на потомках. */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .sell-map-holder label, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .map-wrapper label, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(> input[type="checkbox"]) > label, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(> input[type="checkbox"]) > label * { background-image: none; -webkit-text-fill-color: currentColor; } } /* ========================================================================== 1.6 ЛЕЙБЛ СОГЛАСИЯ — цвет по СОСТОЯНИЮ чекбокса, не по фокусу Требование пользователя: отмечен → оранжевый, снят → обратно тёмный. Фокус здесь не годится: после клика фокус остаётся на чекбоксе, и цвет залипал на оранжевом даже когда галочка снята. Касается ТОЛЬКО чекбоксов — поля с волной по фокусу не трогаем. ========================================================================== */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(> input[type="checkbox"]) > label, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(> input[type="checkbox"]) > label p { color: var(--ea-ink) !important; transition: color 0.28s var(--ea-ease); } :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(> input[type="checkbox"]:checked) > label, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(> input[type="checkbox"]:checked) > label p { color: var(--ea-brand-orange) !important; } /* Ссылка «согласие на обработку» — самостоятельный акцент, состоянием чекбокса не управляется (иначе теряется её читаемость как ссылки). */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-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,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(> input[type="checkbox"]) > label, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(> input[type="checkbox"]) > label p { transition: none; } } @media (prefers-reduced-motion: reduce) { :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group) > label, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group) > label::before { transition: none; } } /* Подписи-заголовки над картой (Terrain и т.п.) — были 18px/чёрные. Это НЕ лейблы полей: оставляем крупнее шкалы, но приводим к системе. */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .sell-map-holder label, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .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** — иконочное семейство, на котором построена вся форма (@font-face в theme/.../custom_icons.css). Коды — из набора 4.7, не из FA6. Замер 2026-08-10: Material Design Icons ДОЕЗЖАЕТ (GET /theme/TM58887/fonts/materialdesignicons-webfont.woff2 -> 200, 78 908 b) — прежнее утверждение «не доезжает» неверно. Мёртв только Flaticon: у него второе @font-face с src:url("./Flaticon.svg#Flaticon") отдаёт 404 и рубит всё семейство. Иконка ставится на ЛЕЙБЛ (::before), а не внутрь поля: у select2 своя стрелка справа, у intl-tel-input свой флаг+код слева — иконка внутри поля дала бы кашу именно там. Консистентность (главное требование): размер/цвет/отступ/выравнивание заданы ОДИН раз здесь, каждое поле меняет только сам глиф. */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-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,.ea-form) :is(.form-group,.control-group,.elementor-field-group):focus-within > label::before, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(input:focus) > label::before, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(textarea:focus) > label::before, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(select:focus) > label::before, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(.select2-container--open) > label::before, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(.select2-container--focus) > label::before, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(input:focus) > label::before, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(select:focus) > label::before, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(.select2-container--open) > label::before, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(.select2-container--focus) > label::before { /* Тёмный конец градиента: иконка стоит ЛЕВЕЕ первой буквы, а градиент текста стартует красным в нулевой точке — так иконка читается как его начало, а не как отдельный элемент. Оранжевый здесь рвал бы переход: иконка была бы светлее следующей за ней буквы. */ color: var(--ea-ramp-1, var(--ea-brand-red)); } /* Фолбэк для полей категории, у которых нет своего смыслового глифа. НЕ caret/chevron/angle: треугольник читается как «раскрыть/аккордеон», а не как смысл поля (замечание пользователя — 22 поля получали один и тот же \f0da). Нейтральный кружок такого прочтения не даёт. */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group) > label.label2::before { content: "\f10c"; /* circle-o */ } /* --- Основные поля (по смыслу) --- */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) label[for="AdvertisementCategoryId"]::before { content: "\f015"; } /* home */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) label[for="AdvertisementRent"]::before { content: "\f0ec"; } /* exchange */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) label[for="LocationLocationRegionId"]::before{ content: "\f279"; } /* map */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) label[for="LocationLocalityId"]::before { content: "\f041"; } /* map-marker */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) label[for="LocationSubLocalityId"]::before { content: "\f041"; } /* map-marker */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) label[for="LocationRoomNumber"]::before { content: "\f02b"; } /* tag */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) label[for="AdvertisementAdditionalAddress"]::before { content: "\f277"; } /* map-signs */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) label[for="Contractor0Fio"]::before { content: "\f007"; } /* user */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) label[for="ContractorPhone"]::before { content: "\f095"; } /* phone */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) label[for="Contractor0Email"]::before { content: "\f0e0"; } /* envelope */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) label[for="AdvertisementTitle"]::before { content: "\f031"; } /* font */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) label[for="AdvertisementText"]::before { content: "\f036"; } /* align-left */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) label[for="AdvertisementPrice"]::before { content: "\f153"; } /* eur */ /* «Country» — статичное поле, класс .lab (не :is(.form-group,.control-group,.elementor-field-group) > label) */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .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), а классы :is(.form-group,.control-group,.elementor-field-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,.ea-form) .confirmation-checkbox ~ label::before, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) label.error::before, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .template-download .input.checkbox label::before { content: none !important; margin: 0; width: auto; } /* ========================================================================== 2.5 ОБВОДКА-РАЗВЁРТКА — контур поля прорисовывается ПО ПЕРИМЕТРУ Запрос пользователя: бордер не должен «окрашиваться моментально» — он обходит поле по кругу в одну сторону при фокусе и раскручивается обратно при расфокусе, оставаясь частью ОДНОЙ анимации с волной по лейблу и появлением спайна. Почему не псевдоэлементы самого поля: input — replaced-элемент, его `::before`/`::after` не рендерятся (замер на живом стенде: `content` даёт "none"). Рисовать периметр можно только на обёртке. Приём: `conic-gradient` на `:is(.form-group,.control-group,.elementor-field-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,.ea-form) :is(.form-group,.control-group,.elementor-field-group) { /* радиус кольцо берёт с носителя (inherit) — у группы он чисто служебный: фона и рамки у неё нет, видно только обводку */ border-radius: var(--ea-radius); --ea-sweep-top: 26px; } /* Целевое значение угла — СНАРУЖИ @supports. Внутри блока правило не применялось (проверено: даже у синтетического сфокусированного input `--ea-sweep` оставался 0deg, при том что базовое правило с маской применялось нормально). Здесь объявляется только кастомное свойство — без поддержки маски оно безвредно, кольцо всё равно не рисуется. */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):focus-within, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(.select2-container--open), :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(.select2-container--focus), :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(.select2-container--open), :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(.select2-container--focus) { --ea-sweep: 360deg; } /* Чекбоксы согласий: у группы нет поля-коробки, ::after накрыл бы текст. */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(> input[type="checkbox"])::after { content: none; } /* Группа-контейнер карты — не поле ввода, периметр обводить нечему. */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .sell-map-holder :is(.form-group,.control-group,.elementor-field-group)::after, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .map-wrapper :is(.form-group,.control-group,.elementor-field-group)::after { content: none; } /* Родная серая рамка поля остаётся на месте всё время — обводка едет ПОВЕРХ неё. Мгновенную перекраску border-color при фокусе гасим: именно она и читалась как «окрасился моментально». Тень фокуса не трогаем — она даёт мягкий ореол под уже прорисованной обводкой. */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .form-control:focus, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) textarea:focus, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .select2-container--bootstrap.select2-container--focus .select2-selection--single, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .select2-container--bootstrap.select2-container--open .select2-selection--single { border-color: var(--ea-line-strong); } @media (prefers-reduced-motion: reduce) { :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group) { transition: none; } :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group)::after { content: none; } /* Без движения приём теряет смысл — возвращаем честную мгновенную перекраску рамки, чтобы состояние фокуса всё равно читалось. */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .form-control:focus, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) textarea:focus, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .select2-container--bootstrap.select2-container--focus .select2-selection--single, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .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,.ea-form) .form-control, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) input[type="text"], :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) input[type="email"], :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) input[type="tel"], :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) input[type="number"], :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) textarea, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .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,.ea-form) textarea, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) textarea.form-control { height: auto; min-height: 120px; padding: 14px 16px; line-height: 1.6; resize: vertical; } :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .form-control:hover, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) textarea:hover, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .select2-container--bootstrap .select2-selection--single:hover { border-color: var(--ea-line-strong); } :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .form-control:focus, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) textarea:focus, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .select2-container--bootstrap.select2-container--focus .select2-selection--single, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .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,.ea-form) .form-control::placeholder, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) textarea::placeholder { color: var(--ea-ink-muted); opacity: 1; } /* Статичное поле «Country» — это , не ввод. Показываем как read-only, а не как редактируемое (MD read-only-distinction). */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) 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,.ea-form) .select2-container { width: 100% !important; /* select2 пишет ширину инлайном при инициализации */ } :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .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,.ea-form) .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,.ea-form) .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,.ea-form) .select2-container--bootstrap .select2-selection__arrow b { display: none; } :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .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,.ea-form) .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,.ea-form) .iti { display: block; width: 100%; } :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .iti .iti__flag-container { /* флаг-кнопка внутри поля: скругляем ЛЕВЫЙ край под общий радиус */ border-radius: var(--ea-radius) 0 0 var(--ea-radius); } :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .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,.ea-form) .iti--separate-dial-code .iti__selected-dial-code { font-size: var(--ea-field-size); color: var(--ea-ink); } :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .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; } /* ========================================================================== 7. КНОПКИ Исходно .btn-primary = #FFA200 (небрендовый) + radius 3px, тогда как поля 5px → рассинхрон. Приводим к бренду и общей геометрии. ========================================================================== */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .btn, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .btn-primary, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) input[type="submit"], :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .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,.ea-form) input[type="submit"].btn-primary, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .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,.ea-form) input[type="submit"].btn-primary:hover, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .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,.ea-form) input[type="submit"].btn-primary:active, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .submit .btn-primary:active { transform: translateY(1px); box-shadow: 0 2px 8px rgba(190, 21, 27, 0.24); } /* Secondary — «Add Photo». Визуально подчинена главной кнопке. */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) button.JS-add-photo, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .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,.ea-form) button.JS-add-photo:hover, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .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,.ea-form) .btn:focus-visible, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) input[type="submit"]:focus-visible { outline: none; box-shadow: var(--ea-shadow-focus); } /* ========================================================================== 9. ВАЛИДАЦИЯ (jquery-validation) Красный — ТОЛЬКО здесь и на required. Ошибка рядом с полем. ========================================================================== */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .form-control.error, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) textarea.error, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) 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,.ea-form) 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` фиксируем явно: блок обязан укладываться в колонку и не растягивать соседей. Живёт СНАРУЖИ `:is(.form-group,.control-group,.elementor-field-group)`/`:is(.form-group,.control-group,.elementor-field-group)` (см. errorPlacement в realty_form.js): анимированная обводка группы рисуется по коробке `::after { top: 26px; bottom: 0 }`, и вложенный алерт заставлял её обводить поле вместе с сообщением. */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .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,.ea-form) :is(.form-group,.control-group,.elementor-field-group):has(+ .field-alert) { margin-bottom: 0; } /* ========================================================================== 11. ДОСТУПНОСТЬ ========================================================================== */ @media (prefers-reduced-motion: reduce) { :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) *, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) *::before, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) *::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,.ea-form) .form-control:focus, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .form-control:focus-visible, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) textarea:focus, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) input[type="text"]:focus, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) input[type="email"]:focus, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) input[type="tel"]:focus, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) input[type="number"]:focus, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .select2-container--bootstrap.select2-container--focus .select2-selection--single, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .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,.ea-form) .form-control:focus, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) textarea:focus, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .select2-container--bootstrap.select2-container--focus .select2-selection--single, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) .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,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-accounting-documents > label::before { content: "\f15c"; } /* Accounting documents */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-agent-fee > label::before { content: "\f155"; } /* Commission agent, % */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-air-conditioner > label::before { content: "\f2dc"; } /* Air conditioning */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-apartment-type > label::before { content: "\f1ad"; } /* Apartment type * */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-area > label::before { content: "\f065"; } /* Area, m2 * */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-avito-contact-method > label::before { content: "\f27a"; } /* Contact method avito */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-avito-deal-goal > label::before { content: "\f2b5"; } /* Franchise type (Avito) */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-avito-decoration-commercial > label::before { content: "\f1fc"; } /* Decoration commercial */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-avito-gas-supply > label::before { content: "\f06d"; } /* Газ avito */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-avito-goods-sub-type > label::before { content: "\f02c"; } /* Franchise goods subtype (Avito) */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-avito-goods-type > label::before { content: "\f0b1"; } /* Goods type (Avito) */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-avito-land-status > label::before { content: "\f1bb"; } /* Land status Avito */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-avito-layout > label::before { content: "\f0ce"; } /* Avito Layout */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-avito-object-type-lot > label::before { content: "\f1bb"; } /* Object type lot Avito (land) */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-avito-price-type > label::before { content: "\f0d6"; } /* Price setting option (Avito) */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-avito-property-right > label::before { content: "\f2b5"; } /* Ownership */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-avito-sewerage > label::before { content: "\f2cc"; } /* Канализация avito */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-avito-transaction-type > label::before { content: "\f0ec"; } /* Type of transaction avito commercial */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-avito-water-supply > label::before { content: "\f043"; } /* Водоснабжение avito */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-balcony > label::before { content: "\f2d0"; } /* Balcony * */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-bedroom > label::before { content: "\f236"; } /* Bedroom * */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-building-state > label::before { content: "\f0f6"; } /* Property Certificate */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-buildingclass > label::before { content: "\f005"; } /* Building Class */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-built-year > label::before { content: "\f133"; } /* Year built */ /* fa-ban: сигареты в FA 4.7 нет, `\f172` — это bitbucket-square (логотип), а не «курение»; знак запрета читается однозначно. */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-can-smoke > label::before { content: "\f05e"; } /* Smoking allowed */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-canalization > label::before { content: "\f2cc"; } /* Canalization * */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-cian-condition-type > label::before { content: "\f24e"; } /* Condition (Cian) */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-cian-input-type > label::before { content: "\f2bd"; } /* Cian login (avito) */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-cian-layout > label::before { content: "\f0ce"; } /* Cian Layout */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-commercial-building-type > label::before { content: "\f0f7"; } /* Type of building */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-commercial-readiness-status > label::before { content: "\f00c"; } /* Readiness status */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-commercial-type > label::before { content: "\f2b5"; } /* Possible assignment * */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-commission > label::before { content: "\f155"; } /* Client commission, % */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-construction-stage > label::before { content: "\f085"; } /* Construction stage */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-distance-from-road > label::before { content: "\f018"; } /* Distance from road (Avito) */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-distance-to-city > label::before { content: "\f018"; } /* Distance to city (km) */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-electricity-capacity > label::before { content: "\f0e4"; } /* Power grid capacity, kW */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-elevator > label::before { content: "\f0dc"; } /* Elevator */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-external-infrastructure > label::before { content: "\f0e8"; } /* Infrastructure */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-first-line-site > label::before { content: "\f018"; } /* Line */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-flat-parking-type > label::before { content: "\f1b9"; } /* Type of parking */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-floor-commercial > label::before { content: "\f0ce"; } /* Floor type */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-for-yourself-site > label::before { content: "\f0b1"; } /* For yourself or for work (for rent)? */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-gipernn-object-type > label::before { content: "\f1ad"; } /* Property type (GipernN) */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-gipernn-target > label::before { content: "\f0b1"; } /* Designated use (GipernN) */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-heating-supply > label::before { content: "\f2c9"; } /* Heating */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-heating-type-cian > label::before { content: "\f2c9"; } /* Heating type (Cian) */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-lease-deposit > label::before { content: "\f0d6"; } /* Deposit amount */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-lease-type > label::before { content: "\f0f6"; } /* Lease type */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-lot-cadastral-number > label::before { content: "\f02c"; } /* cadastral number */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-lot-type > label::before { content: "\f1bb"; } /* Type of land */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-mortgage > label::before { content: "\f19c"; } /* Mortgage */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-parking > label::before { content: "\f1b9"; } /* Parking */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-parties-allowed > label::before { content: "\f0fc"; } /* Parties are allowed */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-prepay-months > label::before { content: "\f133"; } /* Monthly prepayment */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-quality > label::before { content: "\f24e"; } /* Condition */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-refrigerator > label::before { content: "\f1e6"; } /* Refrigerator */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-renovation > label::before { content: "\f1fc"; } /* Repairs */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-renovation-commercial > label::before { content: "\f1fc"; } /* Renovation (commercial) */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-room-furniture > label::before { content: "\f0f2"; } /* Furniture */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-rooms-house > label::before { content: "\f236"; } /* Rooms in the house */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-site-area > label::before { content: "\f1bb"; } /* Land area, m2 * */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-television > label::before { content: "\f26c"; } /* TV */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-wall-type > label::before { content: "\f1b2"; } /* Wall material (Avito houses) */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-washing-machine > label::before { content: "\f021"; } /* Washing machine */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-watersupply > label::before { content: "\f043"; } /* Water supply */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-wc-type > label::before { content: "\f2cd"; } /* Number of bathrooms */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-window-view > label::before { content: "\f06e"; } /* View from the window * */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-with-children > label::before { content: "\f1ae"; } /* It is possible with children */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-with-furnitute-site > label::before { content: "\f0f2"; } /* With furniture? */ :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-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,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-floor > label::before, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-group).cpalias-floor-additionally > label::before, :is(#AdvertisementAddForm,#MessageViewForm,.ea-form) :is(.form-group,.control-group,.elementor-field-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); 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; }