/* Elementor Phone Mask — оформление поля и выпадающего списка стран. * * Все размеры и цвета вынесены в переменные на :root — их можно переопределить * в настройках плагина или своим CSS (Внешний вид → Настроить → Дополнительные стили): * * :root { * --epm-flag-w: 22px; размер флага в поле * --epm-flag-list-w: 24px; размер флага в списке * --epm-dd-width: 300px; ширина списка * --epm-dd-height: 280px; максимальная высота списка * --epm-dd-font: 14px; размер текста в списке * --epm-radius: 8px; скругление списка * --epm-bg / --epm-text / --epm-muted / --epm-hover / --epm-border / --epm-danger * } * * ВАЖНО про !important. Темы сплошь и рядом красят все button и span внутри форм, * причём сами с !important — и кнопка с флагом превращается в цветную «пилюлю». * Поэтому структурные свойства своих элементов плагин задаёт принудительно * и с повышенной специфичностью (класс продублирован). Чтобы это не мешало * настройке, ЗНАЧЕНИЯ берутся из переменных: переопределяйте переменную, * а не свойство. Фоновая картинка флага при этом не трогается — её ставит JS. */ :root { --epm-flag-w: 22px; --epm-flag-list-w: 24px; --epm-flag-ratio: 0.75; --epm-flag-radius: 2px; /* Попапы Elementor и виджеты чатов встречаются с z-index: 2147483647 — это максимум, больше не бывает. Встаём на тот же уровень, а поверх выходим за счёт порядка в DOM: JS переносит список в конец . */ --epm-dd-z: 2147483647; --epm-toast-z: 2147483647; --epm-dd-width: 300px; --epm-dd-height: 280px; --epm-dd-font: 14px; --epm-radius: 8px; --epm-toggle-bg: transparent; --epm-toggle-pad-left: 10px; --epm-toggle-pad-right: 8px; --epm-toggle-gap: 4px; /* Цвет стрелки. По умолчанию JS подставляет сюда цвет текста самого поля — иначе в тёмном попапе получалась белая стрелка на белом инпуте. */ --epm-caret-color: #7a7f87; --epm-bg: #fff; --epm-text: #1f2124; --epm-muted: #7a7f87; --epm-hover: rgba(0, 0, 0, .06); --epm-border: rgba(0, 0, 0, .12); --epm-danger: #d64545; } /* ------------------------------------------------------------------ * * Поле * ------------------------------------------------------------------ */ .epm-wrap.epm-wrap { position: relative !important; display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; float: none !important; flex-grow: 1; flex-basis: 100%; } /* Отступ под флаг. * * Запасное значение собрано ровно из тех же переменных, из которых складывается * ширина кнопки, поэтому вёрстка правильная сразу — ещё до того, как отработает * JS. JS потом кладёт в --epm-gutter измеренную ширину, что важно для эмодзи-флагов * и режима «без флагов», где ширина заранее неизвестна. * * Свойство ставится принудительно: темы любят задавать полям padding с !important. * Чтобы задать отступ вручную, переопределите переменную --epm-gutter, * а не padding-left. */ .epm-wrap > .epm-input.epm-input { width: 100% !important; padding-left: var(--epm-gutter, calc( var(--epm-flag-w) + var(--epm-toggle-pad-left) + var(--epm-toggle-pad-right) + var(--epm-toggle-gap) + 10px /* стрелка (8px) + зазор до текста */ )) !important; } /* Без выпадающего списка стрелки нет */ .epm-wrap--static > .epm-input.epm-input { padding-left: var(--epm-gutter, calc( var(--epm-flag-w) + var(--epm-toggle-pad-left) + var(--epm-toggle-pad-right) + 2px )) !important; } /* ------------------------------------------------------------------ * * Кнопка с флагом — самое уязвимое место: это