/* * Defending intl-tel-input from the page it lands on (CONTRACTS: the phone field). * * TWO REPORTED BUGS, ONE CAUSE. The library decides almost nothing about * colour and inherits the rest from whatever theme it is dropped into. Its * whole stylesheet declares exactly one colour value — a shadow — so every * country name in the dropdown is painted in the HOST PAGE's text colour, * while the panel behind it is hardcoded white. On a dark theme that is * near-white text on a white panel, and the country list reads as blank rows * with flags. It is not a dark-mode bug in the sense of a missing dark mode: * it is a contrast pair with only one half declared. * * The second is the same shape. The search field reserves room for the * magnifier with padding-left, and any theme that styles `input` at equal or * greater specificity replaces that padding — dropping the placeholder * underneath the icon. We do not control those themes, which is what the * !important below is for: it defends a third-party widget's internal element * against arbitrary site CSS, and there is no other lever. * * So both halves of every contrast pair are stated here and nothing is left to * inheritance. Dark mode follows the OS preference on top of that; a site that * is dark because its THEME is dark, with no OS signal, still gets the light * panel — but with explicitly dark text on it, so it is legible either way. * That is the intended failure mode: correct everywhere, native where we can * tell. * * Loaded alongside the library wherever the library is enqueued — the form and * the chat both use it. */ /* -- the dropdown panel ---------------------------------------------------- */ .iti__country-selector { --iti-country-selector-bg: #ffffff; --iti-border-color: #d1d5db; --iti-hover-color: rgba(0, 0, 0, 0.06); --iti-icon-color: #5b6b80; color: #1f2933; } /* Stated on the text-bearing elements themselves and not only on the panel: whichever ancestor a future version makes the panel, these still hold. */ .iti__country-list, .iti__country, .iti__country-name, .iti__no-results { color: inherit; } .iti__dial-code { color: #5b6b80; } /* -- the country popup, on mobile ------------------------------------------ */ /* IT OPENED BEHIND THE CHAT. On a narrow screen intl-tel-input detaches the country list from the field and attaches it to as a full-screen popup — and gives it `z-index: 1060`, which is its own rule, verified in the bundled stylesheet. The chat panel sits at 99990. 1060 < 99990, so the list was painted underneath it: the arrow toggled, the overlay dimmed, and nothing appeared. Desktop is unaffected because the picker stays inline there. * * 100000 is "just above the chat", and the number is only meaningful next to * that one — `--cnclc-z-panel` in chat.css carries a note pointing back here so * a future change to the chat's stacking cannot quietly re-bury this. * * !important, deliberately: our file already loads after the library and would * win on order alone, but this fleet runs optimiser plugins that concatenate * and reorder stylesheets, and losing this rule shows up as a country picker * that simply does nothing on a phone. */ .iti--detached-country-selector { z-index: 100000 !important; } /* -- the search field ------------------------------------------------------ */ .iti__search-input { /* The library's own reservation — spacer + icon + spacer — restated so a theme styling `input` cannot collapse it under the magnifier. */ padding-left: calc( var( --iti-spacer-horizontal, 10px ) + var( --iti-globe-icon-size, 17px ) + var( --iti-spacer-horizontal, 10px ) ) !important; padding-right: calc( var( --iti-spacer-horizontal, 10px ) + var( --iti-clear-icon-size, 15px ) + var( --iti-spacer-horizontal, 10px ) ) !important; background-color: transparent; color: inherit; /* Themes routinely give inputs a border and a min-height; both fight the wrapper's own bottom border and change the row's height mid-list. */ border: 0; box-shadow: none; min-height: 0; line-height: 1.5; } .iti__search-input::placeholder { color: #5b6b80; opacity: 1; /* Firefox dims placeholders by default, on top of the colour. */ } [dir="rtl"] .iti__search-input { padding-left: calc( var( --iti-spacer-horizontal, 10px ) + var( --iti-clear-icon-size, 15px ) + var( --iti-spacer-horizontal, 10px ) ) !important; padding-right: calc( var( --iti-spacer-horizontal, 10px ) + var( --iti-globe-icon-size, 17px ) + var( --iti-spacer-horizontal, 10px ) ) !important; } /* -- dark ------------------------------------------------------------------ */ @media ( prefers-color-scheme: dark ) { .iti__country-selector { --iti-country-selector-bg: #1f2430; --iti-border-color: #3a4150; /* The library's hover is black at 6%, which is invisible on a dark panel — the row a keyboard user is on would stop being marked. */ --iti-hover-color: rgba( 255, 255, 255, 0.10 ); --iti-icon-color: #9aa4b2; color: #e6e9ee; } .iti__dial-code, .iti__search-input::placeholder { color: #9aa4b2; } }