/* Правки виджета выбора страны под вёрстку этих подписных. Три вещи, которые виджет ломает на любой чужой вёрстке: */ /* 1. Ширина. Виджет оборачивает инпут в inline-block, и поле телефона становится уже соседнего поля почты. */ .iti { display: block; width: 100%; } .iti > input, .iti > input[type="tel"], .iti > input[type="text"] { width: 100%; } /* 2. Цвет кода страны. Прибивать нельзя: на одних подписных поле светлое с тёмным текстом, на других (frontpage3) — тёмное полупрозрачное со светлым. Цвет подставляет phone.js, считывая его с самого поля; значение здесь — просто запасное, если скрипт не отработал. */ .iti__country-container, .iti__selected-country, .iti__selected-country-primary, .iti__selected-dial-code { color: var(--iti-fg, #1f1f1f); } /* Разделитель между плашкой и цифрами — иначе код читается как часть номера. */ .iti--separate-dial-code .iti__selected-country { border-right: 1px solid var(--iti-line, rgba(31, 31, 31, .15)); } /* 3. Список стран поверх всего. Сам список виджет кладёт в (dropdownParent), но у страниц есть липкие блоки и кнопки со своим z-index — поднимаем заведомо выше. */ .iti__dropdown-content, .iti--container { z-index: 99999; } /* Внутри списка текст всегда тёмный на белом: список лежит в body и не должен наследовать ни цвет секции, ни цвет поля, из которого его открыли. */ .iti__dropdown-content, .iti__country-list, .iti__country, .iti__search-input { color: #1f1f1f; } /* 4. Кегль и начертание плашки — как у самого поля. Свои 16px виджета рядом с 18px поля читались как «код меньше цифр», и базовые линии не совпадали. Значения подставляет phone.js, считывая их с поля. */ .iti__selected-country, .iti__selected-country-primary, .iti__selected-dial-code { font-size: var(--iti-font-size, inherit); font-weight: var(--iti-font-weight, inherit); font-family: var(--iti-font-family, inherit); letter-spacing: var(--iti-letter-spacing, normal); line-height: 1; }