Styling your Language Dropdown
Explore 88 live language selector designs, from simple dropdowns and flag buttons to searchable lists, modal windows, and region directories. Filter the gallery, try a design, then open its settings and code.
Preset styles use SiteTran widget settings and custom CSS. The other layouts use a shared JavaScript helper on your website, powered by your SiteTran widget. The demo previews show English and Spanish; your website shows its configured languages and flags.
Set up a preset style · Set up a custom control · Check your finished design
Showing all 88 designs
Styled Select
View settingsDropdown List
View settingsBare Select
View settingsRounded Button
View settingsDark Dropdown
View settingsMinimal Dropdown
View settingsWarm Dropdown
View settingsLarger Dropdown
View settingsOutline Button
View settingsClassic Flags
View settingsCircle Flags
View settingsSquare Flags
View settingsMidnight Flags
View settingsGlobe Button
View settingsMint Dropdown
View settingsLavender Dropdown
View settingsSunset Button
View settingsInk Outline
View settingsEditorial Serif
View settingsOcean Select
View settingsDark Select
View settingsSimple Underline
View settingsTranslation Icon
View settingsRaised Card
View settingsLanguage Pills
View settingsOutline Languages
View settingsLanguage Links
View settingsFlag Buttons
View settingsCircle Flag Buttons
View settingsFlags With Names
View settingsFlag Dropdown
View settingsCircle Flag Dropdown
View settingsDark Flag Dropdown
View settingsNames to Flags
View settingsSquare Flag Dropdown
View settingsFlag Badge
View settingsLanguage Code Bar
View settingsFlag Name Bar
View settingsFlag Code Bar
View settingsGlobe Code Dropdown
View settings1. Everyday select
View code and settings2. Navigation text
View code and settings3. Language code
View code and settings4. Globe button
View code and settings5. Split control
View code and settings6. Floating label
View code and settings7. Native + translated
View code and settings8. Code index
View code and settings9. Radio choices
View code and settings10. Search-first
View code and settings11. Two-column list
View code and settings12. Language tiles
View code and settings13. Flag atlas
View code and settings14. Region groups
View code and settings15. Command picker
View code and settings16. Oversized codes
View code and settings17. Editorial serif
View code and settings18. Underline field
View code and settings19. Frosted capsule
View code and settings20. Boarding pass
View code and settings21. Footer drop-up
View code and settings22. Mobile bottom sheet
View code and settings23. Side drawer
View code and settings24. Language directory
View code and settings25. Monogram menu
View code and settings26. Graphic block
View code and settings27. Ruled notebook
View code and settings28. Header utility
View code and settings29. Vertical title rail
View code and settings30. Floating row stack
View code and settings31. Current language status
View code and settings32. Dense utility
View code and settings33. Large readable picker
View code and settings34. Native browser select
View code and settings35. Settings form field
View code and settings36. Locale pair
View code and settings37. Search + flags
View code and settings38. Searchable flag tiles
View code and settings39. Native-name search
View code and settings40. Round flag finder
View code and settings41. Locale search
View code and settings42. Dark flag search
View code and settings43. Simple language modal
View code and settings44. Searchable flag modal
View code and settings45. Round flag modal
View code and settings46. Region directory modal
View code and settings47. Region filter modal
View code and settings48. Flag tile modal
View code and settingsSet Up a Preset Style in SiteTran
For a design under Preset styles, match its widget settings in SiteTran, paste its CSS into your preset, and save. For the other gallery designs, follow Set Up Custom Language Controls.
1. Open Dropdown Style
Open your site in Site Manager, click Dropdown Style, then click Edit on the widget preset your website uses.
2. Open the CSS Editor
Scroll down and click CSS (Advanced). If this preset already has custom CSS, the editor will be open.
3. Paste the CSS and Save
Paste a design's CSS into Add your own custom CSS. Check Live Result, then click Save Styles.
Use CSS only, without <style> tags. Keep a copy of any existing custom CSS before replacing it, and reload your website after saving.
You can also change the language names displayed in your dropdown, such as showing “Español” instead of “Spanish.” See Overwriting your Dropdown's Language Names or Country Flags for the steps.
Preset Style Settings and CSS
Use the settings and CSS below for the designs under Preset styles. Their gallery previews load saved SiteTran presets on the demo site. Copy the settings into your own preset; the demo preset names are not added to your account. Where a design includes JavaScript, add it after your SiteTran Widget Code.
Styled Select
A browser select control with a styled border and arrow.
Widget type: Styled Select. Icon: None. Position: Inline.
Use these settings as they are; no custom CSS is needed.
Dropdown List
A clickable button that opens a language list.
Widget type: Dropdown List. Flags: Off. Icon: None. Position: Inline.
Use these settings as they are; no custom CSS is needed.
Bare Select
A simple browser select control.
Widget type: Bare Select. Icon: None. Position: Inline.
Use these settings as they are; no custom CSS is needed.
Rounded Button
A blue button with rounded corners.
Widget type: Dropdown List. Flags: Off. Icon: None. Position: Inline.
Show CSS
#sitetran_translate_element {
--st-bg: #1d4ed8;
--st-text: #ffffff;
--st-border: #1d4ed8;
--st-hover: #1e40af;
--st-active: #1e3a8a;
--st-focus: #0f172a;
--st-radius: 24px;
font-family: inherit;
}
#sitetran_translate_element .sitetran_translate_element_btn {
background: var(--st-bg);
color: var(--st-text);
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
box-shadow: none;
font-family: inherit;
font-size: 15px;
font-weight: 500;
min-height: 44px;
height: auto;
line-height: 1.4;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_element_btn:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_element_btn:focus-visible,
#sitetran_translate_element .sitetran_translate_list:focus-visible {
outline: 2px solid var(--st-focus);
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_element_btn_carret {
background: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
width: 7px;
height: 7px;
transform: translateY(-2px) rotate(45deg);
}
#sitetran_translate_element .sitetran-translate-list-container {
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
}
#sitetran_translate_element .sitetran_translate_list {
background: var(--st-bg);
color: var(--st-text);
font-family: inherit;
font-size: 15px;
font-weight: 500;
}
#sitetran_translate_element .sitetran_translate_list li {
font-family: inherit;
min-height: 44px;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_list li:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item,
#sitetran_translate_element .sitetran_translate_list li.selected {
background: var(--st-active);
}
#demo-status { display: none; }
body { display: flex; justify-content: center; align-items: flex-start; }Dark Dropdown
A charcoal palette for a dark header.
Widget type: Dropdown List. Flags: Off. Icon: None. Position: Inline.
Show CSS
#sitetran_translate_element {
--st-bg: #111827;
--st-text: #f9fafb;
--st-border: #64748b;
--st-hover: #1f2937;
--st-active: #374151;
--st-focus: #60a5fa;
--st-radius: 8px;
font-family: inherit;
}
#sitetran_translate_element .sitetran_translate_element_btn {
background: var(--st-bg);
color: var(--st-text);
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
box-shadow: none;
font-family: inherit;
font-size: 15px;
font-weight: 500;
min-height: 44px;
height: auto;
line-height: 1.4;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_element_btn:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_element_btn:focus-visible,
#sitetran_translate_element .sitetran_translate_list:focus-visible {
outline: 2px solid var(--st-focus);
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_element_btn_carret {
background: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
width: 7px;
height: 7px;
transform: translateY(-2px) rotate(45deg);
}
#sitetran_translate_element .sitetran-translate-list-container {
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
}
#sitetran_translate_element .sitetran_translate_list {
background: var(--st-bg);
color: var(--st-text);
font-family: inherit;
font-size: 15px;
font-weight: 500;
}
#sitetran_translate_element .sitetran_translate_list li {
font-family: inherit;
min-height: 44px;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_list li:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item,
#sitetran_translate_element .sitetran_translate_list li.selected {
background: var(--st-active);
}
#demo-status { display: none; }
body { display: flex; justify-content: center; align-items: flex-start; }Warm Dropdown
Warm colors and a soft shadow.
Widget type: Dropdown List. Flags: Off. Icon: None. Position: Inline.
Show CSS
#sitetran_translate_element {
--st-bg: #fffbeb;
--st-text: #422006;
--st-border: #b8a080;
--st-hover: #fef3c7;
--st-active: #fde68a;
--st-focus: #92400e;
--st-radius: 12px;
font-family: inherit;
}
#sitetran_translate_element .sitetran_translate_element_btn {
background: var(--st-bg);
color: var(--st-text);
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
box-shadow: none;
font-family: inherit;
font-size: 15px;
font-weight: 500;
min-height: 44px;
height: auto;
line-height: 1.4;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_element_btn:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_element_btn:focus-visible,
#sitetran_translate_element .sitetran_translate_list:focus-visible {
outline: 2px solid var(--st-focus);
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_element_btn_carret {
background: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
width: 7px;
height: 7px;
transform: translateY(-2px) rotate(45deg);
}
#sitetran_translate_element .sitetran-translate-list-container {
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
}
#sitetran_translate_element .sitetran_translate_list {
background: var(--st-bg);
color: var(--st-text);
font-family: inherit;
font-size: 15px;
font-weight: 500;
}
#sitetran_translate_element .sitetran_translate_list li {
font-family: inherit;
min-height: 44px;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_list li:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item,
#sitetran_translate_element .sitetran_translate_list li.selected {
background: var(--st-active);
}
#sitetran_translate_element .sitetran_translate_element_btn {
box-shadow: 0 2px 8px rgb(66 32 6 / 12%);
}
#demo-status { display: none; }
body { display: flex; justify-content: center; align-items: flex-start; }Larger Dropdown
Extra spacing for a larger language control.
Widget type: Dropdown List. Flags: Off. Icon: None. Position: Inline.
Show CSS
#sitetran_translate_element {
--st-bg: #ffffff;
--st-text: #1f2937;
--st-border: #cbd5e1;
--st-hover: #f1f5f9;
--st-active: #e2e8f0;
--st-focus: #2563eb;
--st-radius: 10px;
font-family: inherit;
}
#sitetran_translate_element .sitetran_translate_element_btn {
background: var(--st-bg);
color: var(--st-text);
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
box-shadow: none;
font-family: inherit;
font-size: 15px;
font-weight: 500;
min-height: 44px;
height: auto;
line-height: 1.4;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_element_btn:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_element_btn:focus-visible,
#sitetran_translate_element .sitetran_translate_list:focus-visible {
outline: 2px solid var(--st-focus);
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_element_btn_carret {
background: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
width: 7px;
height: 7px;
transform: translateY(-2px) rotate(45deg);
}
#sitetran_translate_element .sitetran-translate-list-container {
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
}
#sitetran_translate_element .sitetran_translate_list {
background: var(--st-bg);
color: var(--st-text);
font-family: inherit;
font-size: 15px;
font-weight: 500;
}
#sitetran_translate_element .sitetran_translate_list li {
font-family: inherit;
min-height: 44px;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_list li:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item,
#sitetran_translate_element .sitetran_translate_list li.selected {
background: var(--st-active);
}
#sitetran_translate_element .sitetran_translate_element_btn {
font-size: 16px;
min-height: 48px;
padding: 12px 18px;
}
#sitetran_translate_element .sitetran_translate_list li {
font-size: 16px;
min-height: 48px;
padding: 12px 18px;
}
#demo-status { display: none; }
body { display: flex; justify-content: center; align-items: flex-start; }Outline Button
A light button with a blue outline.
Widget type: Dropdown List. Flags: Off. Icon: None. Position: Inline.
Show CSS
#sitetran_translate_element {
--st-bg: #ffffff;
--st-text: #1d4ed8;
--st-border: #1d4ed8;
--st-hover: #eff6ff;
--st-active: #dbeafe;
--st-focus: #0f172a;
--st-radius: 24px;
font-family: inherit;
}
#sitetran_translate_element .sitetran_translate_element_btn {
background: var(--st-bg);
color: var(--st-text);
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
box-shadow: none;
font-family: inherit;
font-size: 15px;
font-weight: 500;
min-height: 44px;
height: auto;
line-height: 1.4;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_element_btn:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_element_btn:focus-visible,
#sitetran_translate_element .sitetran_translate_list:focus-visible {
outline: 2px solid var(--st-focus);
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_element_btn_carret {
background: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
width: 7px;
height: 7px;
transform: translateY(-2px) rotate(45deg);
}
#sitetran_translate_element .sitetran-translate-list-container {
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
}
#sitetran_translate_element .sitetran_translate_list {
background: var(--st-bg);
color: var(--st-text);
font-family: inherit;
font-size: 15px;
font-weight: 500;
}
#sitetran_translate_element .sitetran_translate_list li {
font-family: inherit;
min-height: 44px;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_list li:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item,
#sitetran_translate_element .sitetran_translate_list li.selected {
background: var(--st-active);
}
#demo-status { display: none; }
body { display: flex; justify-content: center; align-items: flex-start; }Classic Flags
Rectangular flags beside each language.
Widget type: Dropdown List. Flags: Rectangle. Icon: None. Position: Inline.
Show CSS
#sitetran_translate_element {
--st-bg: #ffffff;
--st-text: #1f2937;
--st-border: #cbd5e1;
--st-hover: #f1f5f9;
--st-active: #e2e8f0;
--st-focus: #2563eb;
--st-radius: 10px;
font-family: inherit;
}
#sitetran_translate_element .sitetran_translate_element_btn {
background: var(--st-bg);
color: var(--st-text);
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
box-shadow: none;
font-family: inherit;
font-size: 15px;
font-weight: 500;
min-height: 44px;
height: auto;
line-height: 1.4;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_element_btn:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_element_btn:focus-visible,
#sitetran_translate_element .sitetran_translate_list:focus-visible {
outline: 2px solid var(--st-focus);
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_element_btn_carret {
background: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
width: 7px;
height: 7px;
transform: translateY(-2px) rotate(45deg);
}
#sitetran_translate_element .sitetran-translate-list-container {
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
}
#sitetran_translate_element .sitetran_translate_list {
background: var(--st-bg);
color: var(--st-text);
font-family: inherit;
font-size: 15px;
font-weight: 500;
}
#sitetran_translate_element .sitetran_translate_list li {
font-family: inherit;
min-height: 44px;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_list li:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item,
#sitetran_translate_element .sitetran_translate_list li.selected {
background: var(--st-active);
}
#sitetran_translate_element {
--st-bg: #fff;
--st-text: #1f2937;
--st-border: #cbd5e1;
--st-hover: #f1f5f9;
--st-active: #e2e8f0;
--st-radius: 10px;
}Circle Flags
Round flags with a fresh cyan outline.
Widget type: Dropdown List. Flags: Round. Icon: None. Position: Inline.
Show CSS
#sitetran_translate_element {
--st-bg: #ffffff;
--st-text: #1f2937;
--st-border: #cbd5e1;
--st-hover: #f1f5f9;
--st-active: #e2e8f0;
--st-focus: #2563eb;
--st-radius: 10px;
font-family: inherit;
}
#sitetran_translate_element .sitetran_translate_element_btn {
background: var(--st-bg);
color: var(--st-text);
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
box-shadow: none;
font-family: inherit;
font-size: 15px;
font-weight: 500;
min-height: 44px;
height: auto;
line-height: 1.4;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_element_btn:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_element_btn:focus-visible,
#sitetran_translate_element .sitetran_translate_list:focus-visible {
outline: 2px solid var(--st-focus);
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_element_btn_carret {
background: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
width: 7px;
height: 7px;
transform: translateY(-2px) rotate(45deg);
}
#sitetran_translate_element .sitetran-translate-list-container {
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
}
#sitetran_translate_element .sitetran_translate_list {
background: var(--st-bg);
color: var(--st-text);
font-family: inherit;
font-size: 15px;
font-weight: 500;
}
#sitetran_translate_element .sitetran_translate_list li {
font-family: inherit;
min-height: 44px;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_list li:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item,
#sitetran_translate_element .sitetran_translate_list li.selected {
background: var(--st-active);
}
#sitetran_translate_element {
--st-bg: #fff;
--st-text: #164e63;
--st-border: #67e8f9;
--st-hover: #ecfeff;
--st-active: #cffafe;
--st-radius: 22px;
}Square Flags
Square flags and crisp green borders.
Widget type: Dropdown List. Flags: Square. Icon: None. Position: Inline.
Show CSS
#sitetran_translate_element {
--st-bg: #ffffff;
--st-text: #1f2937;
--st-border: #cbd5e1;
--st-hover: #f1f5f9;
--st-active: #e2e8f0;
--st-focus: #2563eb;
--st-radius: 10px;
font-family: inherit;
}
#sitetran_translate_element .sitetran_translate_element_btn {
background: var(--st-bg);
color: var(--st-text);
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
box-shadow: none;
font-family: inherit;
font-size: 15px;
font-weight: 500;
min-height: 44px;
height: auto;
line-height: 1.4;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_element_btn:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_element_btn:focus-visible,
#sitetran_translate_element .sitetran_translate_list:focus-visible {
outline: 2px solid var(--st-focus);
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_element_btn_carret {
background: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
width: 7px;
height: 7px;
transform: translateY(-2px) rotate(45deg);
}
#sitetran_translate_element .sitetran-translate-list-container {
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
}
#sitetran_translate_element .sitetran_translate_list {
background: var(--st-bg);
color: var(--st-text);
font-family: inherit;
font-size: 15px;
font-weight: 500;
}
#sitetran_translate_element .sitetran_translate_list li {
font-family: inherit;
min-height: 44px;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_list li:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item,
#sitetran_translate_element .sitetran_translate_list li.selected {
background: var(--st-active);
}
#sitetran_translate_element {
--st-bg: #fff;
--st-text: #14532d;
--st-border: #86efac;
--st-hover: #f0fdf4;
--st-active: #dcfce7;
--st-radius: 2px;
}Midnight Flags
Round flags on a deep navy background.
Widget type: Dropdown List. Flags: Round. Icon: None. Position: Inline.
Show CSS
#sitetran_translate_element {
--st-bg: #ffffff;
--st-text: #1f2937;
--st-border: #cbd5e1;
--st-hover: #f1f5f9;
--st-active: #e2e8f0;
--st-focus: #2563eb;
--st-radius: 10px;
font-family: inherit;
}
#sitetran_translate_element .sitetran_translate_element_btn {
background: var(--st-bg);
color: var(--st-text);
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
box-shadow: none;
font-family: inherit;
font-size: 15px;
font-weight: 500;
min-height: 44px;
height: auto;
line-height: 1.4;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_element_btn:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_element_btn:focus-visible,
#sitetran_translate_element .sitetran_translate_list:focus-visible {
outline: 2px solid var(--st-focus);
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_element_btn_carret {
background: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
width: 7px;
height: 7px;
transform: translateY(-2px) rotate(45deg);
}
#sitetran_translate_element .sitetran-translate-list-container {
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
}
#sitetran_translate_element .sitetran_translate_list {
background: var(--st-bg);
color: var(--st-text);
font-family: inherit;
font-size: 15px;
font-weight: 500;
}
#sitetran_translate_element .sitetran_translate_list li {
font-family: inherit;
min-height: 44px;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_list li:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item,
#sitetran_translate_element .sitetran_translate_list li.selected {
background: var(--st-active);
}
#sitetran_translate_element {
--st-bg: #0f172a;
--st-text: #e2e8f0;
--st-border: #475569;
--st-hover: #1e293b;
--st-active: #334155;
--st-radius: 10px;
}Globe Button
A globe icon beside the language name.
Widget type: Dropdown List. Flags: Off. Icon: Globe. Position: Inline.
Show CSS
#sitetran_translate_element {
--st-bg: #ffffff;
--st-text: #1f2937;
--st-border: #cbd5e1;
--st-hover: #f1f5f9;
--st-active: #e2e8f0;
--st-focus: #2563eb;
--st-radius: 10px;
font-family: inherit;
}
#sitetran_translate_element .sitetran_translate_element_btn {
background: var(--st-bg);
color: var(--st-text);
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
box-shadow: none;
font-family: inherit;
font-size: 15px;
font-weight: 500;
min-height: 44px;
height: auto;
line-height: 1.4;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_element_btn:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_element_btn:focus-visible,
#sitetran_translate_element .sitetran_translate_list:focus-visible {
outline: 2px solid var(--st-focus);
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_element_btn_carret {
background: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
width: 7px;
height: 7px;
transform: translateY(-2px) rotate(45deg);
}
#sitetran_translate_element .sitetran-translate-list-container {
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
}
#sitetran_translate_element .sitetran_translate_list {
background: var(--st-bg);
color: var(--st-text);
font-family: inherit;
font-size: 15px;
font-weight: 500;
}
#sitetran_translate_element .sitetran_translate_list li {
font-family: inherit;
min-height: 44px;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_list li:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item,
#sitetran_translate_element .sitetran_translate_list li.selected {
background: var(--st-active);
}
#sitetran_translate_element {
--st-bg: #fff;
--st-text: #0f172a;
--st-border: #cbd5e1;
--st-hover: #f8fafc;
--st-active: #e2e8f0;
--st-radius: 24px;
}
#sitetran_toggle {
content: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23171717%22%20stroke-width%3D%221.8%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%2212%22%20rx%3D%224.5%22%20ry%3D%2210%22%2F%3E%3Cpath%20d%3D%22M2%2012h20%22%2F%3E%3C%2Fsvg%3E);
width: 24px !important;
height: 24px !important;
flex-shrink: 0;
}Mint Dropdown
A soft mint palette with rectangular flags.
Widget type: Dropdown List. Flags: Rectangle. Icon: None. Position: Inline.
Show CSS
#sitetran_translate_element {
--st-bg: #ffffff;
--st-text: #1f2937;
--st-border: #cbd5e1;
--st-hover: #f1f5f9;
--st-active: #e2e8f0;
--st-focus: #2563eb;
--st-radius: 10px;
font-family: inherit;
}
#sitetran_translate_element .sitetran_translate_element_btn {
background: var(--st-bg);
color: var(--st-text);
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
box-shadow: none;
font-family: inherit;
font-size: 15px;
font-weight: 500;
min-height: 44px;
height: auto;
line-height: 1.4;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_element_btn:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_element_btn:focus-visible,
#sitetran_translate_element .sitetran_translate_list:focus-visible {
outline: 2px solid var(--st-focus);
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_element_btn_carret {
background: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
width: 7px;
height: 7px;
transform: translateY(-2px) rotate(45deg);
}
#sitetran_translate_element .sitetran-translate-list-container {
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
}
#sitetran_translate_element .sitetran_translate_list {
background: var(--st-bg);
color: var(--st-text);
font-family: inherit;
font-size: 15px;
font-weight: 500;
}
#sitetran_translate_element .sitetran_translate_list li {
font-family: inherit;
min-height: 44px;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_list li:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item,
#sitetran_translate_element .sitetran_translate_list li.selected {
background: var(--st-active);
}
#sitetran_translate_element {
--st-bg: #ecfdf5;
--st-text: #064e3b;
--st-border: #6ee7b7;
--st-hover: #d1fae5;
--st-active: #a7f3d0;
--st-radius: 10px;
}Lavender Dropdown
A gentle lavender palette with round flags.
Widget type: Dropdown List. Flags: Round. Icon: None. Position: Inline.
Show CSS
#sitetran_translate_element {
--st-bg: #ffffff;
--st-text: #1f2937;
--st-border: #cbd5e1;
--st-hover: #f1f5f9;
--st-active: #e2e8f0;
--st-focus: #2563eb;
--st-radius: 10px;
font-family: inherit;
}
#sitetran_translate_element .sitetran_translate_element_btn {
background: var(--st-bg);
color: var(--st-text);
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
box-shadow: none;
font-family: inherit;
font-size: 15px;
font-weight: 500;
min-height: 44px;
height: auto;
line-height: 1.4;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_element_btn:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_element_btn:focus-visible,
#sitetran_translate_element .sitetran_translate_list:focus-visible {
outline: 2px solid var(--st-focus);
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_element_btn_carret {
background: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
width: 7px;
height: 7px;
transform: translateY(-2px) rotate(45deg);
}
#sitetran_translate_element .sitetran-translate-list-container {
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
}
#sitetran_translate_element .sitetran_translate_list {
background: var(--st-bg);
color: var(--st-text);
font-family: inherit;
font-size: 15px;
font-weight: 500;
}
#sitetran_translate_element .sitetran_translate_list li {
font-family: inherit;
min-height: 44px;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_list li:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item,
#sitetran_translate_element .sitetran_translate_list li.selected {
background: var(--st-active);
}
#sitetran_translate_element {
--st-bg: #f5f3ff;
--st-text: #4c1d95;
--st-border: #c4b5fd;
--st-hover: #ede9fe;
--st-active: #ddd6fe;
--st-radius: 16px;
}Sunset Button
Warm orange with a rounded button.
Widget type: Dropdown List. Flags: Off. Icon: None. Position: Inline.
Show CSS
#sitetran_translate_element {
--st-bg: #ffffff;
--st-text: #1f2937;
--st-border: #cbd5e1;
--st-hover: #f1f5f9;
--st-active: #e2e8f0;
--st-focus: #2563eb;
--st-radius: 10px;
font-family: inherit;
}
#sitetran_translate_element .sitetran_translate_element_btn {
background: var(--st-bg);
color: var(--st-text);
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
box-shadow: none;
font-family: inherit;
font-size: 15px;
font-weight: 500;
min-height: 44px;
height: auto;
line-height: 1.4;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_element_btn:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_element_btn:focus-visible,
#sitetran_translate_element .sitetran_translate_list:focus-visible {
outline: 2px solid var(--st-focus);
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_element_btn_carret {
background: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
width: 7px;
height: 7px;
transform: translateY(-2px) rotate(45deg);
}
#sitetran_translate_element .sitetran-translate-list-container {
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
}
#sitetran_translate_element .sitetran_translate_list {
background: var(--st-bg);
color: var(--st-text);
font-family: inherit;
font-size: 15px;
font-weight: 500;
}
#sitetran_translate_element .sitetran_translate_list li {
font-family: inherit;
min-height: 44px;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_list li:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item,
#sitetran_translate_element .sitetran_translate_list li.selected {
background: var(--st-active);
}
#sitetran_translate_element {
--st-bg: #9a3412;
--st-text: #fff;
--st-border: #9a3412;
--st-hover: #7c2d12;
--st-active: #431407;
--st-radius: 24px;
}Ink Outline
A bold black outline with square flags.
Widget type: Dropdown List. Flags: Square. Icon: None. Position: Inline.
Show CSS
#sitetran_translate_element {
--st-bg: #ffffff;
--st-text: #1f2937;
--st-border: #cbd5e1;
--st-hover: #f1f5f9;
--st-active: #e2e8f0;
--st-focus: #2563eb;
--st-radius: 10px;
font-family: inherit;
}
#sitetran_translate_element .sitetran_translate_element_btn {
background: var(--st-bg);
color: var(--st-text);
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
box-shadow: none;
font-family: inherit;
font-size: 15px;
font-weight: 500;
min-height: 44px;
height: auto;
line-height: 1.4;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_element_btn:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_element_btn:focus-visible,
#sitetran_translate_element .sitetran_translate_list:focus-visible {
outline: 2px solid var(--st-focus);
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_element_btn_carret {
background: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
width: 7px;
height: 7px;
transform: translateY(-2px) rotate(45deg);
}
#sitetran_translate_element .sitetran-translate-list-container {
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
}
#sitetran_translate_element .sitetran_translate_list {
background: var(--st-bg);
color: var(--st-text);
font-family: inherit;
font-size: 15px;
font-weight: 500;
}
#sitetran_translate_element .sitetran_translate_list li {
font-family: inherit;
min-height: 44px;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_list li:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item,
#sitetran_translate_element .sitetran_translate_list li.selected {
background: var(--st-active);
}
#sitetran_translate_element {
--st-bg: #fff;
--st-text: #111827;
--st-border: #111827;
--st-hover: #f3f4f6;
--st-active: #e5e7eb;
--st-radius: 0px;
}
#sitetran_translate_element .sitetran_translate_element_btn,
#sitetran_translate_element .sitetran-translate-list-container { border-width: 2px; }Editorial Serif
A cream palette and serif type for editorial sites.
Widget type: Dropdown List. Flags: Off. Icon: None. Position: Inline.
Show CSS
#sitetran_translate_element {
--st-bg: #ffffff;
--st-text: #1f2937;
--st-border: #cbd5e1;
--st-hover: #f1f5f9;
--st-active: #e2e8f0;
--st-focus: #2563eb;
--st-radius: 10px;
font-family: inherit;
}
#sitetran_translate_element .sitetran_translate_element_btn {
background: var(--st-bg);
color: var(--st-text);
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
box-shadow: none;
font-family: inherit;
font-size: 15px;
font-weight: 500;
min-height: 44px;
height: auto;
line-height: 1.4;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_element_btn:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_element_btn:focus-visible,
#sitetran_translate_element .sitetran_translate_list:focus-visible {
outline: 2px solid var(--st-focus);
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_element_btn_carret {
background: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
width: 7px;
height: 7px;
transform: translateY(-2px) rotate(45deg);
}
#sitetran_translate_element .sitetran-translate-list-container {
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
}
#sitetran_translate_element .sitetran_translate_list {
background: var(--st-bg);
color: var(--st-text);
font-family: inherit;
font-size: 15px;
font-weight: 500;
}
#sitetran_translate_element .sitetran_translate_list li {
font-family: inherit;
min-height: 44px;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_list li:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item,
#sitetran_translate_element .sitetran_translate_list li.selected {
background: var(--st-active);
}
#sitetran_translate_element {
--st-bg: #faf7f2;
--st-text: #292524;
--st-border: #d6d3d1;
--st-hover: #f5f5f4;
--st-active: #e7e5e4;
--st-radius: 2px;
}
#sitetran_translate_element { font-family: Georgia, serif; }Ocean Select
A blue native select with generous spacing.
Widget type: Styled Select. Icon: None. Position: Inline.
Show CSS
#sitetran_translate_element select {
background: #e0f2fe;
color: #075985;
border: 1px solid #7dd3fc;
border-radius: 12px;
min-height: 44px;
padding: 10px 36px 10px 14px;
font: 600 15px system-ui, sans-serif;
}
#sitetran_translate_element,
#sitetran_translate_element:hover {
border: 0;
box-shadow: none;
background: transparent;
overflow: visible;
}
#sitetran_translate_element select:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 3px;
}Dark Select
A native select for a dark header.
Widget type: Styled Select. Icon: None. Position: Inline.
Show CSS
#sitetran_translate_element select {
background: #111827;
color: #f9fafb;
border: 1px solid #64748b;
border-radius: 12px;
min-height: 44px;
padding: 10px 36px 10px 14px;
font: 600 15px system-ui, sans-serif;
}
#sitetran_translate_element,
#sitetran_translate_element:hover {
border: 0;
box-shadow: none;
background: transparent;
overflow: visible;
}
#sitetran_translate_element select:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 3px;
}Simple Underline
A minimal native select with an underline.
Widget type: Bare Select. Icon: None. Position: Inline.
Show CSS
#sitetran_translate_element select {
background: transparent;
color: #334155;
border: 0;
border-bottom: 2px solid #64748b;
border-radius: 0;
min-height: 44px;
padding: 8px 24px 8px 4px;
font: 15px system-ui, sans-serif;
}Translation Icon
A translation icon in a clean green design.
Widget type: Dropdown List. Flags: Off. Icon: Green translation icon. Position: Inline.
Show CSS
#sitetran_translate_element {
--st-bg: #ffffff;
--st-text: #1f2937;
--st-border: #cbd5e1;
--st-hover: #f1f5f9;
--st-active: #e2e8f0;
--st-focus: #2563eb;
--st-radius: 10px;
font-family: inherit;
}
#sitetran_translate_element .sitetran_translate_element_btn {
background: var(--st-bg);
color: var(--st-text);
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
box-shadow: none;
font-family: inherit;
font-size: 15px;
font-weight: 500;
min-height: 44px;
height: auto;
line-height: 1.4;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_element_btn:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_element_btn:focus-visible,
#sitetran_translate_element .sitetran_translate_list:focus-visible {
outline: 2px solid var(--st-focus);
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_element_btn_carret {
background: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
width: 7px;
height: 7px;
transform: translateY(-2px) rotate(45deg);
}
#sitetran_translate_element .sitetran-translate-list-container {
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
}
#sitetran_translate_element .sitetran_translate_list {
background: var(--st-bg);
color: var(--st-text);
font-family: inherit;
font-size: 15px;
font-weight: 500;
}
#sitetran_translate_element .sitetran_translate_list li {
font-family: inherit;
min-height: 44px;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_list li:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item,
#sitetran_translate_element .sitetran_translate_list li.selected {
background: var(--st-active);
}
#sitetran_translate_element {
--st-bg: #fff;
--st-text: #14532d;
--st-border: #bbf7d0;
--st-hover: #f0fdf4;
--st-active: #dcfce7;
--st-radius: 10px;
}Raised Card
A white card with soft shadows and round flags.
Widget type: Dropdown List. Flags: Round. Icon: None. Position: Inline.
Show CSS
#sitetran_translate_element {
--st-bg: #ffffff;
--st-text: #1f2937;
--st-border: #cbd5e1;
--st-hover: #f1f5f9;
--st-active: #e2e8f0;
--st-focus: #2563eb;
--st-radius: 10px;
font-family: inherit;
}
#sitetran_translate_element .sitetran_translate_element_btn {
background: var(--st-bg);
color: var(--st-text);
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
box-shadow: none;
font-family: inherit;
font-size: 15px;
font-weight: 500;
min-height: 44px;
height: auto;
line-height: 1.4;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_element_btn:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_element_btn:focus-visible,
#sitetran_translate_element .sitetran_translate_list:focus-visible {
outline: 2px solid var(--st-focus);
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_element_btn_carret {
background: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
width: 7px;
height: 7px;
transform: translateY(-2px) rotate(45deg);
}
#sitetran_translate_element .sitetran-translate-list-container {
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
}
#sitetran_translate_element .sitetran_translate_list {
background: var(--st-bg);
color: var(--st-text);
font-family: inherit;
font-size: 15px;
font-weight: 500;
}
#sitetran_translate_element .sitetran_translate_list li {
font-family: inherit;
min-height: 44px;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_list li:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item,
#sitetran_translate_element .sitetran_translate_list li.selected {
background: var(--st-active);
}
#sitetran_translate_element {
--st-bg: #fff;
--st-text: #1e293b;
--st-border: #e2e8f0;
--st-hover: #f8fafc;
--st-active: #e2e8f0;
--st-radius: 12px;
}
#sitetran_translate_element .sitetran_translate_element_btn,
#sitetran_translate_element .sitetran-translate-list-container { box-shadow: 0 4px 12px rgb(15 23 42 / 14%); }Language Pills
Keep every language visible as a rounded button.
Widget type: Dropdown List. Flags: Off. Icon: None. Position: Inline.
Show CSS
#sitetran_translate_element {
--st-bg: #ffffff;
--st-text: #1f2937;
--st-border: #cbd5e1;
--st-hover: #f1f5f9;
--st-active: #e2e8f0;
--st-focus: #2563eb;
--st-radius: 10px;
font-family: inherit;
}
#sitetran_translate_element .sitetran_translate_element_btn {
background: var(--st-bg);
color: var(--st-text);
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
box-shadow: none;
font-family: inherit;
font-size: 15px;
font-weight: 500;
min-height: 44px;
height: auto;
line-height: 1.4;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_element_btn:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_element_btn:focus-visible,
#sitetran_translate_element .sitetran_translate_list:focus-visible {
outline: 2px solid var(--st-focus);
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_element_btn_carret {
background: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
width: 7px;
height: 7px;
transform: translateY(-2px) rotate(45deg);
}
#sitetran_translate_element .sitetran-translate-list-container {
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
}
#sitetran_translate_element .sitetran_translate_list {
background: var(--st-bg);
color: var(--st-text);
font-family: inherit;
font-size: 15px;
font-weight: 500;
}
#sitetran_translate_element .sitetran_translate_list li {
font-family: inherit;
min-height: 44px;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_list li:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item,
#sitetran_translate_element .sitetran_translate_list li.selected {
background: var(--st-active);
}
#sitetran_translate_element .sitetran_translate_element_btn { display: none; }
#sitetran_translate_element .sitetran-translate-list-container {
display: block !important;
position: static;
width: fit-content;
max-height: none;
border: 0;
background: transparent;
box-shadow: none;
overflow: visible;
}
#sitetran_translate_element .sitetran_translate_list {
display: flex;
flex-wrap: wrap;
gap: 6px;
background: transparent;
}
#sitetran_translate_element .sitetran_translate_list li {
width: auto;
min-width: 44px;
min-height: 44px;
justify-content: center;
background: #fff;
border: 1px solid #cbd5e1;
border-radius: 14px;
}
#sitetran_translate_element .sitetran_translate_list li:hover { background: #eff6ff; }
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item {
background: #1d4ed8;
border-color: #1d4ed8;
color: #fff;
}
#sitetran_translate_element .sitetran_translate_list li:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 3px;
}Add this JavaScript after your SiteTran Widget Code to make each language button work with the keyboard.
Show JavaScript
(function () {
function enhanceLanguages() {
var list = document.querySelector('#sitetran_translate_element .sitetran_translate_list');
if (!list || list.dataset.buttonsReady) return;
list.dataset.buttonsReady = 'true';
list.setAttribute('role', 'group');
list.setAttribute('aria-label', 'Choose a language');
list.removeAttribute('tabindex');
function syncButtons() {
list.removeAttribute('aria-activedescendant');
list.querySelectorAll('li[data-lang]').forEach(function (item) {
var code = item.getAttribute('data-lang');
var language = sitetran.prod_data.site_lang[code];
var name = language.language_format_name || language.language_name || code;
item.setAttribute('role', 'button');
item.setAttribute('tabindex', '0');
item.setAttribute('aria-label', name);
item.setAttribute('title', name);
item.removeAttribute('aria-selected');
item.setAttribute('aria-pressed', code === sitetran.lang ? 'true' : 'false');
});
}
syncButtons();
new MutationObserver(syncButtons).observe(list, {
childList: true, subtree: true, attributes: true, attributeFilter: ['class']
});
list.addEventListener('keydown', async function (event) {
var item = event.target.closest('li[data-lang]');
if (!item || (event.key !== 'Enter' && event.key !== ' ')) return;
event.preventDefault();
event.stopPropagation();
var code = item.getAttribute('data-lang');
await sitetran.api_change_language(code);
syncButtons();
var current = list.querySelector('li[data-lang="' + code + '"]');
if (current) current.focus();
});
}
window.addEventListener('sitetranReady', enhanceLanguages, { once: true });
if (window.sitetran && sitetran.prod_data && sitetran.widget) enhanceLanguages();
})();Outline Languages
Simple outlined buttons with a soft selected state.
Widget type: Dropdown List. Flags: Off. Icon: None. Position: Inline.
Show CSS
#sitetran_translate_element {
--st-bg: #ffffff;
--st-text: #1f2937;
--st-border: #cbd5e1;
--st-hover: #f1f5f9;
--st-active: #e2e8f0;
--st-focus: #2563eb;
--st-radius: 10px;
font-family: inherit;
}
#sitetran_translate_element .sitetran_translate_element_btn {
background: var(--st-bg);
color: var(--st-text);
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
box-shadow: none;
font-family: inherit;
font-size: 15px;
font-weight: 500;
min-height: 44px;
height: auto;
line-height: 1.4;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_element_btn:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_element_btn:focus-visible,
#sitetran_translate_element .sitetran_translate_list:focus-visible {
outline: 2px solid var(--st-focus);
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_element_btn_carret {
background: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
width: 7px;
height: 7px;
transform: translateY(-2px) rotate(45deg);
}
#sitetran_translate_element .sitetran-translate-list-container {
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
}
#sitetran_translate_element .sitetran_translate_list {
background: var(--st-bg);
color: var(--st-text);
font-family: inherit;
font-size: 15px;
font-weight: 500;
}
#sitetran_translate_element .sitetran_translate_list li {
font-family: inherit;
min-height: 44px;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_list li:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item,
#sitetran_translate_element .sitetran_translate_list li.selected {
background: var(--st-active);
}
#sitetran_translate_element .sitetran_translate_element_btn { display: none; }
#sitetran_translate_element .sitetran-translate-list-container {
display: block !important;
position: static;
width: fit-content;
max-height: none;
border: 0;
background: transparent;
box-shadow: none;
overflow: visible;
}
#sitetran_translate_element .sitetran_translate_list {
display: flex;
flex-wrap: wrap;
gap: 6px;
background: transparent;
}
#sitetran_translate_element .sitetran_translate_list li {
width: auto;
min-width: 44px;
min-height: 44px;
justify-content: center;
background: #fff;
border: 1px solid #cbd5e1;
border-radius: 22px;
}
#sitetran_translate_element .sitetran_translate_list li:hover { background: #eff6ff; }
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item {
background: #1d4ed8;
border-color: #1d4ed8;
color: #fff;
}
#sitetran_translate_element .sitetran_translate_list li:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_list li { border-radius: 6px; }
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item { background: #eff6ff; color: #1d4ed8; }
#sitetran_translate_element .sitetran_translate_list li {
min-height: 40px;
padding: 8px 12px;
}Add this JavaScript after your SiteTran Widget Code to make each language button work with the keyboard.
Show JavaScript
(function () {
function enhanceLanguages() {
var list = document.querySelector('#sitetran_translate_element .sitetran_translate_list');
if (!list || list.dataset.buttonsReady) return;
list.dataset.buttonsReady = 'true';
list.setAttribute('role', 'group');
list.setAttribute('aria-label', 'Choose a language');
list.removeAttribute('tabindex');
function syncButtons() {
list.removeAttribute('aria-activedescendant');
list.querySelectorAll('li[data-lang]').forEach(function (item) {
var code = item.getAttribute('data-lang');
var language = sitetran.prod_data.site_lang[code];
var name = language.language_format_name || language.language_name || code;
item.setAttribute('role', 'button');
item.setAttribute('tabindex', '0');
item.setAttribute('aria-label', name);
item.setAttribute('title', name);
item.removeAttribute('aria-selected');
item.setAttribute('aria-pressed', code === sitetran.lang ? 'true' : 'false');
});
}
syncButtons();
new MutationObserver(syncButtons).observe(list, {
childList: true, subtree: true, attributes: true, attributeFilter: ['class']
});
list.addEventListener('keydown', async function (event) {
var item = event.target.closest('li[data-lang]');
if (!item || (event.key !== 'Enter' && event.key !== ' ')) return;
event.preventDefault();
event.stopPropagation();
var code = item.getAttribute('data-lang');
await sitetran.api_change_language(code);
syncButtons();
var current = list.querySelector('li[data-lang="' + code + '"]');
if (current) current.focus();
});
}
window.addEventListener('sitetranReady', enhanceLanguages, { once: true });
if (window.sitetran && sitetran.prod_data && sitetran.widget) enhanceLanguages();
})();Language Links
A compact row of language names for your navigation.
Widget type: Dropdown List. Flags: Off. Icon: None. Position: Inline.
Show CSS
#sitetran_translate_element {
--st-bg: #ffffff;
--st-text: #1f2937;
--st-border: #cbd5e1;
--st-hover: #f1f5f9;
--st-active: #e2e8f0;
--st-focus: #2563eb;
--st-radius: 10px;
font-family: inherit;
}
#sitetran_translate_element .sitetran_translate_element_btn {
background: var(--st-bg);
color: var(--st-text);
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
box-shadow: none;
font-family: inherit;
font-size: 15px;
font-weight: 500;
min-height: 44px;
height: auto;
line-height: 1.4;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_element_btn:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_element_btn:focus-visible,
#sitetran_translate_element .sitetran_translate_list:focus-visible {
outline: 2px solid var(--st-focus);
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_element_btn_carret {
background: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
width: 7px;
height: 7px;
transform: translateY(-2px) rotate(45deg);
}
#sitetran_translate_element .sitetran-translate-list-container {
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
}
#sitetran_translate_element .sitetran_translate_list {
background: var(--st-bg);
color: var(--st-text);
font-family: inherit;
font-size: 15px;
font-weight: 500;
}
#sitetran_translate_element .sitetran_translate_list li {
font-family: inherit;
min-height: 44px;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_list li:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item,
#sitetran_translate_element .sitetran_translate_list li.selected {
background: var(--st-active);
}
#sitetran_translate_element .sitetran_translate_element_btn { display: none; }
#sitetran_translate_element .sitetran-translate-list-container {
display: block !important;
position: static;
width: fit-content;
max-height: none;
border: 0;
background: transparent;
box-shadow: none;
overflow: visible;
}
#sitetran_translate_element .sitetran_translate_list {
display: flex;
flex-wrap: wrap;
gap: 8px;
background: transparent;
}
#sitetran_translate_element .sitetran_translate_list li {
width: auto;
min-width: 44px;
min-height: 44px;
justify-content: center;
background: #fff;
border: 1px solid #cbd5e1;
border-radius: 22px;
}
#sitetran_translate_element .sitetran_translate_list li:hover { background: #eff6ff; }
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item {
background: #1d4ed8;
border-color: #1d4ed8;
color: #fff;
}
#sitetran_translate_element .sitetran_translate_list li:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_list { gap: 2px; }
#sitetran_translate_element .sitetran_translate_list li { border-color: transparent; border-radius: 4px; padding: 6px; }
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item { background: transparent; border-color: transparent; color: #1d4ed8; text-decoration: underline; text-underline-offset: 5px; }
#sitetran_translate_element .sitetran_translate_list li {
min-height: 34px;
}Add this JavaScript after your SiteTran Widget Code to make each language button work with the keyboard.
Show JavaScript
(function () {
function enhanceLanguages() {
var list = document.querySelector('#sitetran_translate_element .sitetran_translate_list');
if (!list || list.dataset.buttonsReady) return;
list.dataset.buttonsReady = 'true';
list.setAttribute('role', 'group');
list.setAttribute('aria-label', 'Choose a language');
list.removeAttribute('tabindex');
function syncButtons() {
list.removeAttribute('aria-activedescendant');
list.querySelectorAll('li[data-lang]').forEach(function (item) {
var code = item.getAttribute('data-lang');
var language = sitetran.prod_data.site_lang[code];
var name = language.language_format_name || language.language_name || code;
item.setAttribute('role', 'button');
item.setAttribute('tabindex', '0');
item.setAttribute('aria-label', name);
item.setAttribute('title', name);
item.removeAttribute('aria-selected');
item.setAttribute('aria-pressed', code === sitetran.lang ? 'true' : 'false');
});
}
syncButtons();
new MutationObserver(syncButtons).observe(list, {
childList: true, subtree: true, attributes: true, attributeFilter: ['class']
});
list.addEventListener('keydown', async function (event) {
var item = event.target.closest('li[data-lang]');
if (!item || (event.key !== 'Enter' && event.key !== ' ')) return;
event.preventDefault();
event.stopPropagation();
var code = item.getAttribute('data-lang');
await sitetran.api_change_language(code);
syncButtons();
var current = list.querySelector('li[data-lang="' + code + '"]');
if (current) current.focus();
});
}
window.addEventListener('sitetranReady', enhanceLanguages, { once: true });
if (window.sitetran && sitetran.prod_data && sitetran.widget) enhanceLanguages();
})();Flag Buttons
Clickable rectangular flags with no visible language names.
Widget type: Dropdown List. Flags: Rectangle. Icon: None. Position: Inline.
Show CSS
#sitetran_translate_element {
--st-bg: #ffffff;
--st-text: #1f2937;
--st-border: #cbd5e1;
--st-hover: #f1f5f9;
--st-active: #e2e8f0;
--st-focus: #2563eb;
--st-radius: 10px;
font-family: inherit;
}
#sitetran_translate_element .sitetran_translate_element_btn {
background: var(--st-bg);
color: var(--st-text);
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
box-shadow: none;
font-family: inherit;
font-size: 15px;
font-weight: 500;
min-height: 44px;
height: auto;
line-height: 1.4;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_element_btn:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_element_btn:focus-visible,
#sitetran_translate_element .sitetran_translate_list:focus-visible {
outline: 2px solid var(--st-focus);
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_element_btn_carret {
background: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
width: 7px;
height: 7px;
transform: translateY(-2px) rotate(45deg);
}
#sitetran_translate_element .sitetran-translate-list-container {
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
}
#sitetran_translate_element .sitetran_translate_list {
background: var(--st-bg);
color: var(--st-text);
font-family: inherit;
font-size: 15px;
font-weight: 500;
}
#sitetran_translate_element .sitetran_translate_list li {
font-family: inherit;
min-height: 44px;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_list li:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item,
#sitetran_translate_element .sitetran_translate_list li.selected {
background: var(--st-active);
}
#sitetran_translate_element .sitetran_translate_element_btn { display: none; }
#sitetran_translate_element .sitetran-translate-list-container {
display: block !important;
position: static;
width: fit-content;
max-height: none;
border: 0;
background: transparent;
box-shadow: none;
overflow: visible;
}
#sitetran_translate_element .sitetran_translate_list {
display: flex;
flex-wrap: wrap;
gap: 8px;
background: transparent;
}
#sitetran_translate_element .sitetran_translate_list li {
width: auto;
min-width: 44px;
min-height: 44px;
justify-content: center;
background: #fff;
border: 1px solid #cbd5e1;
border-radius: 22px;
}
#sitetran_translate_element .sitetran_translate_list li:hover { background: #eff6ff; }
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item {
background: #1d4ed8;
border-color: #1d4ed8;
color: #fff;
}
#sitetran_translate_element .sitetran_translate_list li:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_list li {
font-size: 0;
gap: 0;
justify-content: center;
min-width: 44px;
min-height: 44px;
}
#sitetran_translate_element .sitetran_translate_list li img {
width: 26px !important;
height: 20px !important;
object-fit: cover;
}
#sitetran_translate_element .sitetran_translate_list li { border-radius: 8px; padding: 10px; }Add this JavaScript after your SiteTran Widget Code to make each language button work with the keyboard.
Show JavaScript
(function () {
function enhanceLanguages() {
var list = document.querySelector('#sitetran_translate_element .sitetran_translate_list');
if (!list || list.dataset.buttonsReady) return;
list.dataset.buttonsReady = 'true';
list.setAttribute('role', 'group');
list.setAttribute('aria-label', 'Choose a language');
list.removeAttribute('tabindex');
function syncButtons() {
list.removeAttribute('aria-activedescendant');
list.querySelectorAll('li[data-lang]').forEach(function (item) {
var code = item.getAttribute('data-lang');
var language = sitetran.prod_data.site_lang[code];
var name = language.language_format_name || language.language_name || code;
item.setAttribute('role', 'button');
item.setAttribute('tabindex', '0');
item.setAttribute('aria-label', name);
item.setAttribute('title', name);
item.removeAttribute('aria-selected');
item.setAttribute('aria-pressed', code === sitetran.lang ? 'true' : 'false');
});
}
syncButtons();
new MutationObserver(syncButtons).observe(list, {
childList: true, subtree: true, attributes: true, attributeFilter: ['class']
});
list.addEventListener('keydown', async function (event) {
var item = event.target.closest('li[data-lang]');
if (!item || (event.key !== 'Enter' && event.key !== ' ')) return;
event.preventDefault();
event.stopPropagation();
var code = item.getAttribute('data-lang');
await sitetran.api_change_language(code);
syncButtons();
var current = list.querySelector('li[data-lang="' + code + '"]');
if (current) current.focus();
});
}
window.addEventListener('sitetranReady', enhanceLanguages, { once: true });
if (window.sitetran && sitetran.prod_data && sitetran.widget) enhanceLanguages();
})();Circle Flag Buttons
Circular flags inside simple rectangular buttons.
Widget type: Dropdown List. Flags: Round. Icon: None. Position: Inline.
Show CSS
#sitetran_translate_element {
--st-bg: #ffffff;
--st-text: #1f2937;
--st-border: #cbd5e1;
--st-hover: #f1f5f9;
--st-active: #e2e8f0;
--st-focus: #2563eb;
--st-radius: 10px;
font-family: inherit;
}
#sitetran_translate_element .sitetran_translate_element_btn {
background: var(--st-bg);
color: var(--st-text);
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
box-shadow: none;
font-family: inherit;
font-size: 15px;
font-weight: 500;
min-height: 44px;
height: auto;
line-height: 1.4;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_element_btn:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_element_btn:focus-visible,
#sitetran_translate_element .sitetran_translate_list:focus-visible {
outline: 2px solid var(--st-focus);
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_element_btn_carret {
background: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
width: 7px;
height: 7px;
transform: translateY(-2px) rotate(45deg);
}
#sitetran_translate_element .sitetran-translate-list-container {
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
}
#sitetran_translate_element .sitetran_translate_list {
background: var(--st-bg);
color: var(--st-text);
font-family: inherit;
font-size: 15px;
font-weight: 500;
}
#sitetran_translate_element .sitetran_translate_list li {
font-family: inherit;
min-height: 44px;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_list li:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item,
#sitetran_translate_element .sitetran_translate_list li.selected {
background: var(--st-active);
}
#sitetran_translate_element .sitetran_translate_element_btn { display: none; }
#sitetran_translate_element .sitetran-translate-list-container {
display: block !important;
position: static;
width: fit-content;
max-height: none;
border: 0;
background: transparent;
box-shadow: none;
overflow: visible;
}
#sitetran_translate_element .sitetran_translate_list {
display: flex;
flex-wrap: wrap;
gap: 8px;
background: transparent;
}
#sitetran_translate_element .sitetran_translate_list li {
width: auto;
min-width: 44px;
min-height: 44px;
justify-content: center;
background: #fff;
border: 1px solid #cbd5e1;
border-radius: 22px;
}
#sitetran_translate_element .sitetran_translate_list li:hover { background: #eff6ff; }
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item {
background: #1d4ed8;
border-color: #1d4ed8;
color: #fff;
}
#sitetran_translate_element .sitetran_translate_list li:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_list li {
font-size: 0;
gap: 0;
justify-content: center;
min-width: 44px;
min-height: 44px;
}
#sitetran_translate_element .sitetran_translate_list li img {
width: 26px !important;
height: 20px !important;
object-fit: cover;
}
#sitetran_translate_element .sitetran_translate_list li { border-radius: 8px; padding: 10px; }
#sitetran_translate_element .sitetran_translate_list li img { width: 24px !important; height: 24px !important; }Add this JavaScript after your SiteTran Widget Code to make each language button work with the keyboard.
Show JavaScript
(function () {
function enhanceLanguages() {
var list = document.querySelector('#sitetran_translate_element .sitetran_translate_list');
if (!list || list.dataset.buttonsReady) return;
list.dataset.buttonsReady = 'true';
list.setAttribute('role', 'group');
list.setAttribute('aria-label', 'Choose a language');
list.removeAttribute('tabindex');
function syncButtons() {
list.removeAttribute('aria-activedescendant');
list.querySelectorAll('li[data-lang]').forEach(function (item) {
var code = item.getAttribute('data-lang');
var language = sitetran.prod_data.site_lang[code];
var name = language.language_format_name || language.language_name || code;
item.setAttribute('role', 'button');
item.setAttribute('tabindex', '0');
item.setAttribute('aria-label', name);
item.setAttribute('title', name);
item.removeAttribute('aria-selected');
item.setAttribute('aria-pressed', code === sitetran.lang ? 'true' : 'false');
});
}
syncButtons();
new MutationObserver(syncButtons).observe(list, {
childList: true, subtree: true, attributes: true, attributeFilter: ['class']
});
list.addEventListener('keydown', async function (event) {
var item = event.target.closest('li[data-lang]');
if (!item || (event.key !== 'Enter' && event.key !== ' ')) return;
event.preventDefault();
event.stopPropagation();
var code = item.getAttribute('data-lang');
await sitetran.api_change_language(code);
syncButtons();
var current = list.querySelector('li[data-lang="' + code + '"]');
if (current) current.focus();
});
}
window.addEventListener('sitetranReady', enhanceLanguages, { once: true });
if (window.sitetran && sitetran.prod_data && sitetran.widget) enhanceLanguages();
})();Flags With Names
Visible language buttons with round flags and readable names.
Widget type: Dropdown List. Flags: Round. Icon: None. Position: Inline.
Show CSS
#sitetran_translate_element {
--st-bg: #ffffff;
--st-text: #1f2937;
--st-border: #cbd5e1;
--st-hover: #f1f5f9;
--st-active: #e2e8f0;
--st-focus: #2563eb;
--st-radius: 10px;
font-family: inherit;
}
#sitetran_translate_element .sitetran_translate_element_btn {
background: var(--st-bg);
color: var(--st-text);
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
box-shadow: none;
font-family: inherit;
font-size: 15px;
font-weight: 500;
min-height: 44px;
height: auto;
line-height: 1.4;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_element_btn:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_element_btn:focus-visible,
#sitetran_translate_element .sitetran_translate_list:focus-visible {
outline: 2px solid var(--st-focus);
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_element_btn_carret {
background: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
width: 7px;
height: 7px;
transform: translateY(-2px) rotate(45deg);
}
#sitetran_translate_element .sitetran-translate-list-container {
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
}
#sitetran_translate_element .sitetran_translate_list {
background: var(--st-bg);
color: var(--st-text);
font-family: inherit;
font-size: 15px;
font-weight: 500;
}
#sitetran_translate_element .sitetran_translate_list li {
font-family: inherit;
min-height: 44px;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_list li:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item,
#sitetran_translate_element .sitetran_translate_list li.selected {
background: var(--st-active);
}
#sitetran_translate_element .sitetran_translate_element_btn { display: none; }
#sitetran_translate_element .sitetran-translate-list-container {
display: block !important;
position: static;
width: fit-content;
max-height: none;
border: 0;
background: transparent;
box-shadow: none;
overflow: visible;
}
#sitetran_translate_element .sitetran_translate_list {
display: flex;
flex-wrap: wrap;
gap: 8px;
background: transparent;
}
#sitetran_translate_element .sitetran_translate_list li {
width: auto;
min-width: 44px;
min-height: 44px;
justify-content: center;
background: #fff;
border: 1px solid #cbd5e1;
border-radius: 22px;
}
#sitetran_translate_element .sitetran_translate_list li:hover { background: #eff6ff; }
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item {
background: #1d4ed8;
border-color: #1d4ed8;
color: #fff;
}
#sitetran_translate_element .sitetran_translate_list li:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 3px;
}Add this JavaScript after your SiteTran Widget Code to make each language button work with the keyboard.
Show JavaScript
(function () {
function enhanceLanguages() {
var list = document.querySelector('#sitetran_translate_element .sitetran_translate_list');
if (!list || list.dataset.buttonsReady) return;
list.dataset.buttonsReady = 'true';
list.setAttribute('role', 'group');
list.setAttribute('aria-label', 'Choose a language');
list.removeAttribute('tabindex');
function syncButtons() {
list.removeAttribute('aria-activedescendant');
list.querySelectorAll('li[data-lang]').forEach(function (item) {
var code = item.getAttribute('data-lang');
var language = sitetran.prod_data.site_lang[code];
var name = language.language_format_name || language.language_name || code;
item.setAttribute('role', 'button');
item.setAttribute('tabindex', '0');
item.setAttribute('aria-label', name);
item.setAttribute('title', name);
item.removeAttribute('aria-selected');
item.setAttribute('aria-pressed', code === sitetran.lang ? 'true' : 'false');
});
}
syncButtons();
new MutationObserver(syncButtons).observe(list, {
childList: true, subtree: true, attributes: true, attributeFilter: ['class']
});
list.addEventListener('keydown', async function (event) {
var item = event.target.closest('li[data-lang]');
if (!item || (event.key !== 'Enter' && event.key !== ' ')) return;
event.preventDefault();
event.stopPropagation();
var code = item.getAttribute('data-lang');
await sitetran.api_change_language(code);
syncButtons();
var current = list.querySelector('li[data-lang="' + code + '"]');
if (current) current.focus();
});
}
window.addEventListener('sitetranReady', enhanceLanguages, { once: true });
if (window.sitetran && sitetran.prod_data && sitetran.widget) enhanceLanguages();
})();Flag Dropdown
Show the selected flag and open a menu of flags.
Widget type: Dropdown List. Flags: Rectangle. Icon: None. Position: Inline.
Show CSS
#sitetran_translate_element {
--st-bg: #ffffff;
--st-text: #1f2937;
--st-border: #cbd5e1;
--st-hover: #f1f5f9;
--st-active: #e2e8f0;
--st-focus: #2563eb;
--st-radius: 10px;
font-family: inherit;
}
#sitetran_translate_element .sitetran_translate_element_btn {
background: var(--st-bg);
color: var(--st-text);
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
box-shadow: none;
font-family: inherit;
font-size: 15px;
font-weight: 500;
min-height: 44px;
height: auto;
line-height: 1.4;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_element_btn:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_element_btn:focus-visible,
#sitetran_translate_element .sitetran_translate_list:focus-visible {
outline: 2px solid var(--st-focus);
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_element_btn_carret {
background: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
width: 7px;
height: 7px;
transform: translateY(-2px) rotate(45deg);
}
#sitetran_translate_element .sitetran-translate-list-container {
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
}
#sitetran_translate_element .sitetran_translate_list {
background: var(--st-bg);
color: var(--st-text);
font-family: inherit;
font-size: 15px;
font-weight: 500;
}
#sitetran_translate_element .sitetran_translate_list li {
font-family: inherit;
min-height: 44px;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_list li:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item,
#sitetran_translate_element .sitetran_translate_list li.selected {
background: var(--st-active);
}
#sitetran_translate_element .sitetran_translate_element_btn_language {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
#sitetran_translate_element .sitetran_translate_list li {
font-size: 0;
gap: 0;
justify-content: center;
min-width: 44px;
min-height: 44px;
}
#sitetran_translate_element .sitetran_translate_list li img {
width: 26px !important;
height: 20px !important;
object-fit: cover;
}Circle Flag Dropdown
A compact dropdown with round flags and no visible names.
Widget type: Dropdown List. Flags: Round. Icon: None. Position: Inline.
Show CSS
#sitetran_translate_element {
--st-bg: #ffffff;
--st-text: #1f2937;
--st-border: #cbd5e1;
--st-hover: #f1f5f9;
--st-active: #e2e8f0;
--st-focus: #2563eb;
--st-radius: 10px;
font-family: inherit;
}
#sitetran_translate_element .sitetran_translate_element_btn {
background: var(--st-bg);
color: var(--st-text);
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
box-shadow: none;
font-family: inherit;
font-size: 15px;
font-weight: 500;
min-height: 44px;
height: auto;
line-height: 1.4;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_element_btn:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_element_btn:focus-visible,
#sitetran_translate_element .sitetran_translate_list:focus-visible {
outline: 2px solid var(--st-focus);
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_element_btn_carret {
background: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
width: 7px;
height: 7px;
transform: translateY(-2px) rotate(45deg);
}
#sitetran_translate_element .sitetran-translate-list-container {
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
}
#sitetran_translate_element .sitetran_translate_list {
background: var(--st-bg);
color: var(--st-text);
font-family: inherit;
font-size: 15px;
font-weight: 500;
}
#sitetran_translate_element .sitetran_translate_list li {
font-family: inherit;
min-height: 44px;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_list li:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item,
#sitetran_translate_element .sitetran_translate_list li.selected {
background: var(--st-active);
}
#sitetran_translate_element .sitetran_translate_element_btn_language {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
#sitetran_translate_element .sitetran_translate_list li {
font-size: 0;
gap: 0;
justify-content: center;
min-width: 44px;
min-height: 44px;
}
#sitetran_translate_element .sitetran_translate_list li img {
width: 26px !important;
height: 20px !important;
object-fit: cover;
}
#sitetran_translate_element .sitetran_translate_list li img { width: 24px !important; height: 24px !important; }
#sitetran_translate_element { --st-radius: 22px; }Dark Flag Dropdown
A flags-only dropdown for a dark header.
Widget type: Dropdown List. Flags: Round. Icon: None. Position: Inline.
Show CSS
#sitetran_translate_element {
--st-bg: #ffffff;
--st-text: #1f2937;
--st-border: #cbd5e1;
--st-hover: #f1f5f9;
--st-active: #e2e8f0;
--st-focus: #2563eb;
--st-radius: 10px;
font-family: inherit;
}
#sitetran_translate_element .sitetran_translate_element_btn {
background: var(--st-bg);
color: var(--st-text);
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
box-shadow: none;
font-family: inherit;
font-size: 15px;
font-weight: 500;
min-height: 44px;
height: auto;
line-height: 1.4;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_element_btn:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_element_btn:focus-visible,
#sitetran_translate_element .sitetran_translate_list:focus-visible {
outline: 2px solid var(--st-focus);
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_element_btn_carret {
background: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
width: 7px;
height: 7px;
transform: translateY(-2px) rotate(45deg);
}
#sitetran_translate_element .sitetran-translate-list-container {
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
}
#sitetran_translate_element .sitetran_translate_list {
background: var(--st-bg);
color: var(--st-text);
font-family: inherit;
font-size: 15px;
font-weight: 500;
}
#sitetran_translate_element .sitetran_translate_list li {
font-family: inherit;
min-height: 44px;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_list li:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item,
#sitetran_translate_element .sitetran_translate_list li.selected {
background: var(--st-active);
}
#sitetran_translate_element .sitetran_translate_element_btn_language {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
#sitetran_translate_element .sitetran_translate_list li {
font-size: 0;
gap: 0;
justify-content: center;
min-width: 44px;
min-height: 44px;
}
#sitetran_translate_element .sitetran_translate_list li img {
width: 26px !important;
height: 20px !important;
object-fit: cover;
}
#sitetran_translate_element .sitetran_translate_list li img { width: 24px !important; height: 24px !important; }
#sitetran_translate_element { --st-bg: #0f172a; --st-text: #fff; --st-border: #475569; --st-hover: #1e293b; --st-active: #334155; }Names to Flags
Keep the language name on the button; show only flags in the menu.
Widget type: Dropdown List. Flags: Rectangle. Icon: None. Position: Inline.
Show CSS
#sitetran_translate_element {
--st-bg: #ffffff;
--st-text: #1f2937;
--st-border: #cbd5e1;
--st-hover: #f1f5f9;
--st-active: #e2e8f0;
--st-focus: #2563eb;
--st-radius: 10px;
font-family: inherit;
}
#sitetran_translate_element .sitetran_translate_element_btn {
background: var(--st-bg);
color: var(--st-text);
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
box-shadow: none;
font-family: inherit;
font-size: 15px;
font-weight: 500;
min-height: 44px;
height: auto;
line-height: 1.4;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_element_btn:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_element_btn:focus-visible,
#sitetran_translate_element .sitetran_translate_list:focus-visible {
outline: 2px solid var(--st-focus);
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_element_btn_carret {
background: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
width: 7px;
height: 7px;
transform: translateY(-2px) rotate(45deg);
}
#sitetran_translate_element .sitetran-translate-list-container {
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
}
#sitetran_translate_element .sitetran_translate_list {
background: var(--st-bg);
color: var(--st-text);
font-family: inherit;
font-size: 15px;
font-weight: 500;
}
#sitetran_translate_element .sitetran_translate_list li {
font-family: inherit;
min-height: 44px;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_list li:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item,
#sitetran_translate_element .sitetran_translate_list li.selected {
background: var(--st-active);
}
#sitetran_translate_element .sitetran_translate_list li {
font-size: 0;
gap: 0;
justify-content: center;
min-width: 44px;
min-height: 44px;
}
#sitetran_translate_element .sitetran_translate_list li img {
width: 26px !important;
height: 20px !important;
object-fit: cover;
}Square Flag Dropdown
Square flags with crisp corners.
Widget type: Dropdown List. Flags: Square. Icon: None. Position: Inline.
Show CSS
#sitetran_translate_element {
--st-bg: #ffffff;
--st-text: #1f2937;
--st-border: #cbd5e1;
--st-hover: #f1f5f9;
--st-active: #e2e8f0;
--st-focus: #2563eb;
--st-radius: 10px;
font-family: inherit;
}
#sitetran_translate_element .sitetran_translate_element_btn {
background: var(--st-bg);
color: var(--st-text);
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
box-shadow: none;
font-family: inherit;
font-size: 15px;
font-weight: 500;
min-height: 44px;
height: auto;
line-height: 1.4;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_element_btn:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_element_btn:focus-visible,
#sitetran_translate_element .sitetran_translate_list:focus-visible {
outline: 2px solid var(--st-focus);
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_element_btn_carret {
background: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
width: 7px;
height: 7px;
transform: translateY(-2px) rotate(45deg);
}
#sitetran_translate_element .sitetran-translate-list-container {
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
}
#sitetran_translate_element .sitetran_translate_list {
background: var(--st-bg);
color: var(--st-text);
font-family: inherit;
font-size: 15px;
font-weight: 500;
}
#sitetran_translate_element .sitetran_translate_list li {
font-family: inherit;
min-height: 44px;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_list li:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item,
#sitetran_translate_element .sitetran_translate_list li.selected {
background: var(--st-active);
}
#sitetran_translate_element .sitetran_translate_element_btn_language {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
#sitetran_translate_element .sitetran_translate_list li {
font-size: 0;
gap: 0;
justify-content: center;
min-width: 44px;
min-height: 44px;
}
#sitetran_translate_element .sitetran_translate_list li img {
width: 26px !important;
height: 20px !important;
object-fit: cover;
}
#sitetran_translate_element .sitetran_translate_list li img { width: 24px !important; height: 24px !important; }
#sitetran_translate_element { --st-radius: 2px; }Flag Badge
A single round flag button that opens the flag menu.
Widget type: Dropdown List. Flags: Round. Icon: None. Position: Inline.
Show CSS
#sitetran_translate_element {
--st-bg: #ffffff;
--st-text: #1f2937;
--st-border: #cbd5e1;
--st-hover: #f1f5f9;
--st-active: #e2e8f0;
--st-focus: #2563eb;
--st-radius: 10px;
font-family: inherit;
}
#sitetran_translate_element .sitetran_translate_element_btn {
background: var(--st-bg);
color: var(--st-text);
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
box-shadow: none;
font-family: inherit;
font-size: 15px;
font-weight: 500;
min-height: 44px;
height: auto;
line-height: 1.4;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_element_btn:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_element_btn:focus-visible,
#sitetran_translate_element .sitetran_translate_list:focus-visible {
outline: 2px solid var(--st-focus);
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_element_btn_carret {
background: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
width: 7px;
height: 7px;
transform: translateY(-2px) rotate(45deg);
}
#sitetran_translate_element .sitetran-translate-list-container {
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
}
#sitetran_translate_element .sitetran_translate_list {
background: var(--st-bg);
color: var(--st-text);
font-family: inherit;
font-size: 15px;
font-weight: 500;
}
#sitetran_translate_element .sitetran_translate_list li {
font-family: inherit;
min-height: 44px;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_list li:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item,
#sitetran_translate_element .sitetran_translate_list li.selected {
background: var(--st-active);
}
#sitetran_translate_element .sitetran_translate_element_btn_language {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
#sitetran_translate_element .sitetran_translate_list li {
font-size: 0;
gap: 0;
justify-content: center;
min-width: 44px;
min-height: 44px;
}
#sitetran_translate_element .sitetran_translate_list li img {
width: 26px !important;
height: 20px !important;
object-fit: cover;
}
#sitetran_translate_element .sitetran_translate_list li img { width: 24px !important; height: 24px !important; }
#sitetran_translate_element .sitetran_translate_element_btn_carret { display: none; }
#sitetran_translate_element .sitetran_translate_element_btn { width: 44px; padding: 10px; justify-content: center; border-radius: 50%; }
#sitetran_translate_element .sitetran-translate-list-container {
left: 50%;
right: auto;
transform: translateX(-50%);
}Language Code Bar
Compact language codes separated by dividers inside one rounded bar.
Widget type: Dropdown List. Flags: Off. Icon: None. Position: Inline.
Show CSS
#sitetran_translate_element {
--st-bg: #ffffff;
--st-text: #1f2937;
--st-border: #cbd5e1;
--st-hover: #f1f5f9;
--st-active: #e2e8f0;
--st-focus: #2563eb;
--st-radius: 10px;
font-family: inherit;
}
#sitetran_translate_element .sitetran_translate_element_btn {
background: var(--st-bg);
color: var(--st-text);
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
box-shadow: none;
font-family: inherit;
font-size: 15px;
font-weight: 500;
min-height: 44px;
height: auto;
line-height: 1.4;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_element_btn:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_element_btn:focus-visible,
#sitetran_translate_element .sitetran_translate_list:focus-visible {
outline: 2px solid var(--st-focus);
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_element_btn_carret {
background: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
width: 7px;
height: 7px;
transform: translateY(-2px) rotate(45deg);
}
#sitetran_translate_element .sitetran-translate-list-container {
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
}
#sitetran_translate_element .sitetran_translate_list {
background: var(--st-bg);
color: var(--st-text);
font-family: inherit;
font-size: 15px;
font-weight: 500;
}
#sitetran_translate_element .sitetran_translate_list li {
font-family: inherit;
min-height: 44px;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_list li:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item,
#sitetran_translate_element .sitetran_translate_list li.selected {
background: var(--st-active);
}
#sitetran_translate_element .sitetran_translate_element_btn { display: none; }
#sitetran_translate_element .sitetran-translate-list-container {
display: block !important;
position: static;
width: fit-content;
max-height: none;
border: 0;
background: transparent;
box-shadow: none;
overflow: visible;
}
#sitetran_translate_element .sitetran_translate_list {
display: flex;
flex-wrap: wrap;
gap: 8px;
background: transparent;
}
#sitetran_translate_element .sitetran_translate_list li {
width: auto;
min-width: 44px;
min-height: 44px;
justify-content: center;
background: #fff;
border: 1px solid #cbd5e1;
border-radius: 22px;
}
#sitetran_translate_element .sitetran_translate_list li:hover { background: #eff6ff; }
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item {
background: #1d4ed8;
border-color: #1d4ed8;
color: #fff;
}
#sitetran_translate_element .sitetran_translate_list li:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_list {
gap: 0;
padding: 6px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
}
#sitetran_translate_element .sitetran_translate_list li {
background: transparent;
border: 0;
border-radius: 8px;
padding: 8px 10px;
color: #171717;
font-size: 16px;
font-weight: 500;
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item {
background: transparent;
border-color: transparent;
color: #171717;
font-weight: 600;
}
#sitetran_translate_element .sitetran_translate_list li:hover { background: #f1f5f9; }
#sitetran_translate_element .sitetran-translate-list-container {
position: relative;
max-width: 100%;
}
#sitetran_translate_element .sitetran_translate_list {
gap: 6px 24px;
max-width: 100%;
}
#sitetran_translate_element .st-language-dividers {
position: absolute;
inset: 0;
pointer-events: none;
}
#sitetran_translate_element .st-language-divider {
position: absolute;
height: 24px;
border-left: 2px solid #a3a3a3;
transform: rotate(18deg);
}
#sitetran_translate_element .sitetran_translate_list li img {
width: 24px !important;
height: 24px !important;
}
#sitetran_translate_element .sitetran_translate_list li { font-size: 0; }
#sitetran_translate_element .sitetran_translate_list li::after {
content: attr(data-lang);
text-transform: uppercase;
font-size: 18px;
letter-spacing: .02em;
}
#sitetran_translate_element {
min-width: 0;
max-width: 100%;
}
#sitetran_translate_element .sitetran-translate-list-container,
#sitetran_translate_element .sitetran_translate_list {
min-width: 0;
}
#sitetran_translate_element .sitetran_translate_list li,
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item {
font-weight: 600;
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item {
color: #1d4ed8;
}
#sitetran_translate_element .sitetran_translate_list {
padding: 4px;
gap: 4px 14px;
border-radius: 10px;
}
#sitetran_translate_element .sitetran_translate_list li {
min-width: 0;
min-height: 28px;
padding: 2px 4px;
gap: 4px;
border-radius: 5px;
}
#sitetran_translate_element .sitetran_translate_list li::after {
font-size: 14px;
}
#sitetran_translate_element .sitetran_translate_list li img {
width: 18px !important;
height: 18px !important;
}
#sitetran_translate_element .st-language-divider {
height: 16px;
}Add this JavaScript after your SiteTran Widget Code for keyboard controls and dividers between the language buttons.
Show JavaScript
(function () {
function enhanceLanguages() {
var list = document.querySelector('#sitetran_translate_element .sitetran_translate_list');
if (!list || list.dataset.buttonsReady) return;
list.dataset.buttonsReady = 'true';
list.setAttribute('role', 'group');
list.setAttribute('aria-label', 'Choose a language');
list.removeAttribute('tabindex');
var container = list.parentElement;
var dividers = document.createElement('div');
dividers.className = 'st-language-dividers';
dividers.setAttribute('aria-hidden', 'true');
container.appendChild(dividers);
var dividerFrame;
function arrangeDividers() {
cancelAnimationFrame(dividerFrame);
dividerFrame = requestAnimationFrame(function () {
dividers.replaceChildren();
var bounds = container.getBoundingClientRect();
var items = Array.from(list.querySelectorAll('li[data-lang]'));
items.forEach(function (item, index) {
if (!index) return;
var previous = items[index - 1].getBoundingClientRect();
var current = item.getBoundingClientRect();
if (Math.abs(previous.top - current.top) > 1) return;
var divider = document.createElement('span');
divider.className = 'st-language-divider';
divider.style.left = ((previous.right + current.left) / 2 - bounds.left - 1) + 'px';
divider.style.top = (current.top - bounds.top + (current.height - 16) / 2) + 'px';
dividers.appendChild(divider);
});
});
}
new ResizeObserver(arrangeDividers).observe(list);
function syncButtons() {
list.removeAttribute('aria-activedescendant');
list.querySelectorAll('li[data-lang]').forEach(function (item) {
var code = item.getAttribute('data-lang');
var language = sitetran.prod_data.site_lang[code];
var name = language.language_format_name || language.language_name || code;
item.setAttribute('role', 'button');
item.setAttribute('tabindex', '0');
item.setAttribute('aria-label', name);
item.setAttribute('title', name);
item.removeAttribute('aria-selected');
item.setAttribute('aria-pressed', code === sitetran.lang ? 'true' : 'false');
});
arrangeDividers();
}
syncButtons();
new MutationObserver(syncButtons).observe(list, {
childList: true, subtree: true, attributes: true, attributeFilter: ['class']
});
list.addEventListener('keydown', async function (event) {
var item = event.target.closest('li[data-lang]');
if (!item || (event.key !== 'Enter' && event.key !== ' ')) return;
event.preventDefault();
event.stopPropagation();
var code = item.getAttribute('data-lang');
await sitetran.api_change_language(code);
syncButtons();
var current = list.querySelector('li[data-lang="' + code + '"]');
if (current) current.focus();
});
}
window.addEventListener('sitetranReady', enhanceLanguages, { once: true });
if (window.sitetran && sitetran.prod_data && sitetran.widget) enhanceLanguages();
})();Flag Name Bar
Round flags and language names together in a white bar.
Widget type: Dropdown List. Flags: Round. Icon: None. Position: Inline.
Show CSS
#sitetran_translate_element {
--st-bg: #ffffff;
--st-text: #1f2937;
--st-border: #cbd5e1;
--st-hover: #f1f5f9;
--st-active: #e2e8f0;
--st-focus: #2563eb;
--st-radius: 10px;
font-family: inherit;
}
#sitetran_translate_element .sitetran_translate_element_btn {
background: var(--st-bg);
color: var(--st-text);
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
box-shadow: none;
font-family: inherit;
font-size: 15px;
font-weight: 500;
min-height: 44px;
height: auto;
line-height: 1.4;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_element_btn:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_element_btn:focus-visible,
#sitetran_translate_element .sitetran_translate_list:focus-visible {
outline: 2px solid var(--st-focus);
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_element_btn_carret {
background: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
width: 7px;
height: 7px;
transform: translateY(-2px) rotate(45deg);
}
#sitetran_translate_element .sitetran-translate-list-container {
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
}
#sitetran_translate_element .sitetran_translate_list {
background: var(--st-bg);
color: var(--st-text);
font-family: inherit;
font-size: 15px;
font-weight: 500;
}
#sitetran_translate_element .sitetran_translate_list li {
font-family: inherit;
min-height: 44px;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_list li:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item,
#sitetran_translate_element .sitetran_translate_list li.selected {
background: var(--st-active);
}
#sitetran_translate_element .sitetran_translate_element_btn { display: none; }
#sitetran_translate_element .sitetran-translate-list-container {
display: block !important;
position: static;
width: fit-content;
max-height: none;
border: 0;
background: transparent;
box-shadow: none;
overflow: visible;
}
#sitetran_translate_element .sitetran_translate_list {
display: flex;
flex-wrap: wrap;
gap: 8px;
background: transparent;
}
#sitetran_translate_element .sitetran_translate_list li {
width: auto;
min-width: 44px;
min-height: 44px;
justify-content: center;
background: #fff;
border: 1px solid #cbd5e1;
border-radius: 22px;
}
#sitetran_translate_element .sitetran_translate_list li:hover { background: #eff6ff; }
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item {
background: #1d4ed8;
border-color: #1d4ed8;
color: #fff;
}
#sitetran_translate_element .sitetran_translate_list li:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_list {
gap: 0;
padding: 6px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
}
#sitetran_translate_element .sitetran_translate_list li {
background: transparent;
border: 0;
border-radius: 8px;
padding: 8px 10px;
color: #171717;
font-size: 16px;
font-weight: 500;
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item {
background: transparent;
border-color: transparent;
color: #171717;
font-weight: 600;
}
#sitetran_translate_element .sitetran_translate_list li:hover { background: #f1f5f9; }
#sitetran_translate_element .sitetran-translate-list-container {
position: relative;
max-width: 100%;
}
#sitetran_translate_element .sitetran_translate_list {
gap: 6px 24px;
max-width: 100%;
}
#sitetran_translate_element .st-language-dividers {
position: absolute;
inset: 0;
pointer-events: none;
}
#sitetran_translate_element .st-language-divider {
position: absolute;
height: 24px;
border-left: 2px solid #a3a3a3;
transform: rotate(18deg);
}
#sitetran_translate_element .sitetran_translate_list li img {
width: 24px !important;
height: 24px !important;
}
#sitetran_translate_element .sitetran_translate_list li { gap: 8px; font-size: 15px; padding-inline: 8px; }
#sitetran_translate_element {
min-width: 0;
max-width: 100%;
}
#sitetran_translate_element .sitetran-translate-list-container,
#sitetran_translate_element .sitetran_translate_list {
min-width: 0;
}
#sitetran_translate_element .sitetran_translate_list li,
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item {
font-weight: 600;
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item {
color: #1d4ed8;
}
#sitetran_translate_element .sitetran_translate_list {
padding: 4px;
gap: 4px 14px;
border-radius: 10px;
}
#sitetran_translate_element .sitetran_translate_list li {
min-width: 0;
min-height: 30px;
padding: 3px 5px;
gap: 5px;
font-size: 14px;
border-radius: 5px;
}
#sitetran_translate_element .sitetran_translate_list li img {
width: 20px !important;
height: 20px !important;
}
#sitetran_translate_element .st-language-divider {
height: 16px;
}Add this JavaScript after your SiteTran Widget Code for keyboard controls and dividers between the language buttons.
Show JavaScript
(function () {
function enhanceLanguages() {
var list = document.querySelector('#sitetran_translate_element .sitetran_translate_list');
if (!list || list.dataset.buttonsReady) return;
list.dataset.buttonsReady = 'true';
list.setAttribute('role', 'group');
list.setAttribute('aria-label', 'Choose a language');
list.removeAttribute('tabindex');
var container = list.parentElement;
var dividers = document.createElement('div');
dividers.className = 'st-language-dividers';
dividers.setAttribute('aria-hidden', 'true');
container.appendChild(dividers);
var dividerFrame;
function arrangeDividers() {
cancelAnimationFrame(dividerFrame);
dividerFrame = requestAnimationFrame(function () {
dividers.replaceChildren();
var bounds = container.getBoundingClientRect();
var items = Array.from(list.querySelectorAll('li[data-lang]'));
items.forEach(function (item, index) {
if (!index) return;
var previous = items[index - 1].getBoundingClientRect();
var current = item.getBoundingClientRect();
if (Math.abs(previous.top - current.top) > 1) return;
var divider = document.createElement('span');
divider.className = 'st-language-divider';
divider.style.left = ((previous.right + current.left) / 2 - bounds.left - 1) + 'px';
divider.style.top = (current.top - bounds.top + (current.height - 16) / 2) + 'px';
dividers.appendChild(divider);
});
});
}
new ResizeObserver(arrangeDividers).observe(list);
function syncButtons() {
list.removeAttribute('aria-activedescendant');
list.querySelectorAll('li[data-lang]').forEach(function (item) {
var code = item.getAttribute('data-lang');
var language = sitetran.prod_data.site_lang[code];
var name = language.language_format_name || language.language_name || code;
item.setAttribute('role', 'button');
item.setAttribute('tabindex', '0');
item.setAttribute('aria-label', name);
item.setAttribute('title', name);
item.removeAttribute('aria-selected');
item.setAttribute('aria-pressed', code === sitetran.lang ? 'true' : 'false');
});
arrangeDividers();
}
syncButtons();
new MutationObserver(syncButtons).observe(list, {
childList: true, subtree: true, attributes: true, attributeFilter: ['class']
});
list.addEventListener('keydown', async function (event) {
var item = event.target.closest('li[data-lang]');
if (!item || (event.key !== 'Enter' && event.key !== ' ')) return;
event.preventDefault();
event.stopPropagation();
var code = item.getAttribute('data-lang');
await sitetran.api_change_language(code);
syncButtons();
var current = list.querySelector('li[data-lang="' + code + '"]');
if (current) current.focus();
});
}
window.addEventListener('sitetranReady', enhanceLanguages, { once: true });
if (window.sitetran && sitetran.prod_data && sitetran.widget) enhanceLanguages();
})();Flag Code Bar
Round flags with EN / ES labels in a single white bar.
Widget type: Dropdown List. Flags: Round. Icon: None. Position: Inline.
Show CSS
#sitetran_translate_element {
--st-bg: #ffffff;
--st-text: #1f2937;
--st-border: #cbd5e1;
--st-hover: #f1f5f9;
--st-active: #e2e8f0;
--st-focus: #2563eb;
--st-radius: 10px;
font-family: inherit;
}
#sitetran_translate_element .sitetran_translate_element_btn {
background: var(--st-bg);
color: var(--st-text);
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
box-shadow: none;
font-family: inherit;
font-size: 15px;
font-weight: 500;
min-height: 44px;
height: auto;
line-height: 1.4;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_element_btn:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_element_btn:focus-visible,
#sitetran_translate_element .sitetran_translate_list:focus-visible {
outline: 2px solid var(--st-focus);
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_element_btn_carret {
background: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
width: 7px;
height: 7px;
transform: translateY(-2px) rotate(45deg);
}
#sitetran_translate_element .sitetran-translate-list-container {
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
}
#sitetran_translate_element .sitetran_translate_list {
background: var(--st-bg);
color: var(--st-text);
font-family: inherit;
font-size: 15px;
font-weight: 500;
}
#sitetran_translate_element .sitetran_translate_list li {
font-family: inherit;
min-height: 44px;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_list li:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item,
#sitetran_translate_element .sitetran_translate_list li.selected {
background: var(--st-active);
}
#sitetran_translate_element .sitetran_translate_element_btn { display: none; }
#sitetran_translate_element .sitetran-translate-list-container {
display: block !important;
position: static;
width: fit-content;
max-height: none;
border: 0;
background: transparent;
box-shadow: none;
overflow: visible;
}
#sitetran_translate_element .sitetran_translate_list {
display: flex;
flex-wrap: wrap;
gap: 8px;
background: transparent;
}
#sitetran_translate_element .sitetran_translate_list li {
width: auto;
min-width: 44px;
min-height: 44px;
justify-content: center;
background: #fff;
border: 1px solid #cbd5e1;
border-radius: 22px;
}
#sitetran_translate_element .sitetran_translate_list li:hover { background: #eff6ff; }
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item {
background: #1d4ed8;
border-color: #1d4ed8;
color: #fff;
}
#sitetran_translate_element .sitetran_translate_list li:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_list {
gap: 0;
padding: 6px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
}
#sitetran_translate_element .sitetran_translate_list li {
background: transparent;
border: 0;
border-radius: 8px;
padding: 8px 10px;
color: #171717;
font-size: 16px;
font-weight: 500;
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item {
background: transparent;
border-color: transparent;
color: #171717;
font-weight: 600;
}
#sitetran_translate_element .sitetran_translate_list li:hover { background: #f1f5f9; }
#sitetran_translate_element .sitetran-translate-list-container {
position: relative;
max-width: 100%;
}
#sitetran_translate_element .sitetran_translate_list {
gap: 6px 24px;
max-width: 100%;
}
#sitetran_translate_element .st-language-dividers {
position: absolute;
inset: 0;
pointer-events: none;
}
#sitetran_translate_element .st-language-divider {
position: absolute;
height: 24px;
border-left: 2px solid #a3a3a3;
transform: rotate(18deg);
}
#sitetran_translate_element .sitetran_translate_list li img {
width: 24px !important;
height: 24px !important;
}
#sitetran_translate_element .sitetran_translate_list li { font-size: 0; }
#sitetran_translate_element .sitetran_translate_list li::after {
content: attr(data-lang);
text-transform: uppercase;
font-size: 18px;
letter-spacing: .02em;
}
#sitetran_translate_element .sitetran_translate_list li { gap: 8px; }
#sitetran_translate_element {
min-width: 0;
max-width: 100%;
}
#sitetran_translate_element .sitetran-translate-list-container,
#sitetran_translate_element .sitetran_translate_list {
min-width: 0;
}
#sitetran_translate_element .sitetran_translate_list li,
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item {
font-weight: 600;
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item {
color: #1d4ed8;
}
#sitetran_translate_element .sitetran_translate_list {
padding: 4px;
gap: 4px 14px;
border-radius: 10px;
}
#sitetran_translate_element .sitetran_translate_list li {
min-width: 0;
min-height: 28px;
padding: 2px 4px;
gap: 4px;
border-radius: 5px;
}
#sitetran_translate_element .sitetran_translate_list li::after {
font-size: 14px;
}
#sitetran_translate_element .sitetran_translate_list li img {
width: 18px !important;
height: 18px !important;
}
#sitetran_translate_element .st-language-divider {
height: 16px;
}Add this JavaScript after your SiteTran Widget Code for keyboard controls and dividers between the language buttons.
Show JavaScript
(function () {
function enhanceLanguages() {
var list = document.querySelector('#sitetran_translate_element .sitetran_translate_list');
if (!list || list.dataset.buttonsReady) return;
list.dataset.buttonsReady = 'true';
list.setAttribute('role', 'group');
list.setAttribute('aria-label', 'Choose a language');
list.removeAttribute('tabindex');
var container = list.parentElement;
var dividers = document.createElement('div');
dividers.className = 'st-language-dividers';
dividers.setAttribute('aria-hidden', 'true');
container.appendChild(dividers);
var dividerFrame;
function arrangeDividers() {
cancelAnimationFrame(dividerFrame);
dividerFrame = requestAnimationFrame(function () {
dividers.replaceChildren();
var bounds = container.getBoundingClientRect();
var items = Array.from(list.querySelectorAll('li[data-lang]'));
items.forEach(function (item, index) {
if (!index) return;
var previous = items[index - 1].getBoundingClientRect();
var current = item.getBoundingClientRect();
if (Math.abs(previous.top - current.top) > 1) return;
var divider = document.createElement('span');
divider.className = 'st-language-divider';
divider.style.left = ((previous.right + current.left) / 2 - bounds.left - 1) + 'px';
divider.style.top = (current.top - bounds.top + (current.height - 16) / 2) + 'px';
dividers.appendChild(divider);
});
});
}
new ResizeObserver(arrangeDividers).observe(list);
function syncButtons() {
list.removeAttribute('aria-activedescendant');
list.querySelectorAll('li[data-lang]').forEach(function (item) {
var code = item.getAttribute('data-lang');
var language = sitetran.prod_data.site_lang[code];
var name = language.language_format_name || language.language_name || code;
item.setAttribute('role', 'button');
item.setAttribute('tabindex', '0');
item.setAttribute('aria-label', name);
item.setAttribute('title', name);
item.removeAttribute('aria-selected');
item.setAttribute('aria-pressed', code === sitetran.lang ? 'true' : 'false');
});
arrangeDividers();
}
syncButtons();
new MutationObserver(syncButtons).observe(list, {
childList: true, subtree: true, attributes: true, attributeFilter: ['class']
});
list.addEventListener('keydown', async function (event) {
var item = event.target.closest('li[data-lang]');
if (!item || (event.key !== 'Enter' && event.key !== ' ')) return;
event.preventDefault();
event.stopPropagation();
var code = item.getAttribute('data-lang');
await sitetran.api_change_language(code);
syncButtons();
var current = list.querySelector('li[data-lang="' + code + '"]');
if (current) current.focus();
});
}
window.addEventListener('sitetranReady', enhanceLanguages, { once: true });
if (window.sitetran && sitetran.prod_data && sitetran.widget) enhanceLanguages();
})();Globe Code Dropdown
A line-style globe, the selected language code, and a dropdown arrow.
Widget type: Dropdown List. Flags: Off. Icon: Globe. Position: Inline.
Show CSS
#sitetran_translate_element {
--st-bg: #ffffff;
--st-text: #1f2937;
--st-border: #cbd5e1;
--st-hover: #f1f5f9;
--st-active: #e2e8f0;
--st-focus: #2563eb;
--st-radius: 10px;
font-family: inherit;
}
#sitetran_translate_element .sitetran_translate_element_btn {
background: var(--st-bg);
color: var(--st-text);
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
box-shadow: none;
font-family: inherit;
font-size: 15px;
font-weight: 500;
min-height: 44px;
height: auto;
line-height: 1.4;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_element_btn:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_element_btn:focus-visible,
#sitetran_translate_element .sitetran_translate_list:focus-visible {
outline: 2px solid var(--st-focus);
outline-offset: 3px;
}
#sitetran_translate_element .sitetran_translate_element_btn_carret {
background: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
width: 7px;
height: 7px;
transform: translateY(-2px) rotate(45deg);
}
#sitetran_translate_element .sitetran-translate-list-container {
border: 1px solid var(--st-border);
border-radius: var(--st-radius);
}
#sitetran_translate_element .sitetran_translate_list {
background: var(--st-bg);
color: var(--st-text);
font-family: inherit;
font-size: 15px;
font-weight: 500;
}
#sitetran_translate_element .sitetran_translate_list li {
font-family: inherit;
min-height: 44px;
padding: 10px 14px;
}
#sitetran_translate_element .sitetran_translate_list li:hover {
background: var(--st-hover);
}
#sitetran_translate_element .sitetran_translate_list li.sitetran_selected_item,
#sitetran_translate_element .sitetran_translate_list li.selected {
background: var(--st-active);
}
#sitetran_translate_wrapper {
gap: 0;
padding: 0;
background: transparent;
border: 0;
}
#sitetran_toggle {
content: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23171717%22%20stroke-width%3D%221.8%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%2212%22%20rx%3D%224.5%22%20ry%3D%2210%22%2F%3E%3Cpath%20d%3D%22M2%2012h20%22%2F%3E%3C%2Fsvg%3E);
width: 24px !important;
height: 24px !important;
margin: 0;
flex-shrink: 0;
}
#sitetran_translate_element .sitetran_translate_element_btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 44px;
padding: 10px 14px;
border: 1px solid #e2e8f0;
border-radius: 14px;
background: #fff;
color: #171717;
box-shadow: none;
}
#sitetran_translate_element .sitetran_translate_element_btn_language { font-size: 0; }
#sitetran_translate_element .sitetran_translate_element_btn_language::after {
content: attr(data-code);
font-size: 18px;
font-weight: 500;
}
#sitetran_translate_element .sitetran-translate-list-container { min-width: 130px; }Add this JavaScript after your SiteTran Widget Code to show the language code and make the globe part of the clickable button.
Show JavaScript
(function () {
function showLanguageCode() {
var button = document.querySelector('.sitetran_translate_element_btn');
var icon = document.getElementById('sitetran_toggle');
if (button && icon && !button.contains(icon)) {
icon.alt = '';
icon.setAttribute('aria-hidden', 'true');
button.prepend(icon);
}
function updateLabel() {
var label = document.querySelector('.sitetran_translate_element_btn_language');
if (label) label.setAttribute('data-code', sitetran.lang.toUpperCase());
}
updateLabel();
new MutationObserver(updateLabel).observe(document.documentElement, {
attributes: true, attributeFilter: ['lang']
});
}
window.addEventListener('sitetranReady', showLanguageCode, { once: true });
if (window.sitetran && sitetran.prod_data && sitetran.widget) showLanguageCode();
})();Use one design at a time. Feel free to change the colors or spacing to match your website.
Set Up Custom Language Controls
The 48 custom layouts use your SiteTran widget’s languages and switching API. Choose a design in the gallery, then add its CSS, configuration, and the shared helper below to your website.
Install the Shared Language Picker Helper
Keep your existing Widget Code and site ID. Use Dropdown List for the examples below and turn on Use Flags when you want flags. Add the selected design’s CSS to your website stylesheet, then put its configuration and the shared helper after your Widget Code. Use one design at a time. The helper hides the original control only after the replacement is ready.
These are custom interfaces powered by the SiteTran widget, rather than additional built-in Dropdown Style types. Search, modal windows, and region filters need JavaScript on your website; do not paste JavaScript into Add your own custom CSS:.
The helper reads the languages available in the rendered widget and switches them through sitetran.api_change_language, including the site’s configured URL behavior. It keeps the site’s flag overrides. Region headings come from the configuration you supply, not automatic geographic detection. Languages missing from that mapping appear under Other languages.
The public previews use the existing demo site, which currently offers English and Spanish. On your website, the helper shows your widget’s available languages. Search ignores case and Latin accents, so espanol finds Español. Two-line options show language_format_name above language_name, for example Español above Spanish. Identical names appear once. Searching matches both metadata names, native-name aliases, or the language code; native-name fallbacks use the browser’s Intl.DisplayNames support.
Shared JavaScript Helper
<script>
/* Place this helper after your existing SiteTran Widget Code. */
(function () {
'use strict';
const config = window.siteTranPickerOptions || {};
let installed = false;
function install() {
const st = window.sitetran;
const source = document.getElementById('sitetran_translate_element');
if (installed || !source || !st || typeof st.api_change_language !== 'function' || !(st.widget instanceof Element)) return;
installed = true;
const root = document.createElement('div');
root.id = 'st-language-picker';
root.className = 'stage ' + (config.classes || 'base');
root.setAttribute('translate', 'no');
const picker = document.createElement('div');
picker.className = 'picker';
root.append(picker);
const sourceWrapper = source.closest('#sitetran_translate_wrapper') || source;
sourceWrapper.after(root);
let choices = [], current = '', busy = false, query = '', region = 'All regions';
const classes = config.classes || '';
const modal = config.mode === 'modal';
const searchEnabled = config.search !== false && (modal || classes.includes('searchable'));
const withFlags = config.flags === true;
const regions = config.regions || {};
const bilingual = classes.includes('bilingual') || classes.includes('mega') || modal;
const codeOnly = classes === 'compact' || classes.includes('minimal-code');
const nativeSelect = classes.includes('native-select');
function make(tag, className, text) {
const node = document.createElement(tag);
if (className) node.className = className;
if (text !== undefined) node.textContent = text;
return node;
}
function displayName(code, locale, fallback) {
try { return new Intl.DisplayNames([locale], {type:'language'}).of(code) || fallback; }
catch (_) { return fallback; }
}
function metadataName(value) {
return typeof value === 'string' && value.trim() && value.trim() !== 'null' ? value.trim() : '';
}
function readChoices() {
const widget = st.widget instanceof Element ? st.widget : source.querySelector('select, .sitetran_translate_list');
if (!widget) return;
const nodes = widget.tagName === 'SELECT' ? [...widget.options] : [...widget.querySelectorAll('li[data-lang]')];
choices = nodes.map(node => {
const code = node.dataset.lang || node.value;
const record = st.prod_data?.site_lang?.[code] || {};
const english = metadataName(record.language_name) || displayName(code,'en',node.textContent.trim());
const name = metadataName(record.language_format_name) || metadataName(record.language_name) || node.textContent.trim();
const configuredFlag = node.querySelector('img')?.getAttribute('src') || (typeof st.get_flag_url === 'function' ? st.get_flag_url(code) : '');
return {code, name, english, native:displayName(code,code,name), direction:record.direction_code || 'auto', flag:configuredFlag};
});
current = st.lang || widget.value || source.querySelector('li.sitetran_selected_item')?.dataset.lang || choices[0]?.code || '';
}
function flag(choice) {
const image = make('img','flag');
// Retain configured country flags and custom flag URL overrides.
image.src = choice.flag.startsWith('//') ? 'https:' + choice.flag : choice.flag.replace(/^http:\/\/c\.sitetran\.com\//, 'https://c.sitetran.com/');
image.alt = '';
image.setAttribute('aria-hidden','true');
return image;
}
let trigger, panel, list, search, empty, dialog, status, select;
function selectedChoice() { return choices.find(c=>c.code===current) || choices[0]; }
function updateTrigger() {
const choice = selectedChoice();
if (!choice) return;
if (nativeSelect) { select.value = current; return; }
trigger.replaceChildren();
if (withFlags && choice.flag) trigger.append(flag(choice));
else if (classes.includes('duo')) trigger.append(make('span','symbol',choice.code.toUpperCase()));
else {
const icon=make('span','symbol');icon.setAttribute('aria-hidden','true');
const ns='http://www.w3.org/2000/svg';
const svg=document.createElementNS(ns,'svg');
for(const [name,value] of Object.entries({width:'18',height:'18',viewBox:'0 0 24 24',fill:'none',stroke:'currentColor','stroke-width':'1.5'}))svg.setAttribute(name,value);
for(const [tag,attributes] of [['circle',{cx:'12',cy:'12',r:'9'}],['ellipse',{cx:'12',cy:'12',rx:'4',ry:'9'}],['path',{d:'M3 12h18'}]]){
const shape=document.createElementNS(ns,tag);
for(const [name,value] of Object.entries(attributes))shape.setAttribute(name,value);
svg.append(shape);
}
icon.append(svg);trigger.append(icon);
}
trigger.append(make('span','label',codeOnly?choice.code.toUpperCase():choice.name));
const arrow=make('span',modal?'modal-indicator':'chevron',modal?'↗':undefined);
arrow.setAttribute('aria-hidden','true');
if(!modal){
const ns='http://www.w3.org/2000/svg';
const svg=document.createElementNS(ns,'svg');
svg.setAttribute('viewBox','0 0 16 16');svg.setAttribute('fill','none');
svg.setAttribute('stroke','currentColor');svg.setAttribute('stroke-width','1.75');
svg.setAttribute('stroke-linecap','round');svg.setAttribute('stroke-linejoin','round');
for(const [className,points] of [['caret-down','M3 5.5 8 10.5 13 5.5'],['caret-up','M3 10.5 8 5.5 13 10.5']]){
const path=document.createElementNS(ns,'path');path.setAttribute('class',className);path.setAttribute('d',points);svg.append(path);
}
arrow.append(svg);
}
trigger.append(arrow);
trigger.setAttribute('aria-label','Choose language. Selected: '+choice.name);
}
function searchKey(text) {
// Fold Latin accents for matching; leave the displayed language names intact.
return text.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').trim();
}
function matching() {
const value=searchKey(query);
return choices.filter(c => (!config.grouped || region==='All regions' || (regions[c.code] || 'Other languages')===region) && searchKey([c.name,c.english,c.native,c.code].join(' ')).includes(value));
}
function renderItems() {
const focusedCode=document.hasFocus()&&list.contains(document.activeElement)?document.activeElement.dataset.code:null;
list.replaceChildren();
const shown=matching();
const groups=config.grouped ? [...new Set(shown.map(c=>regions[c.code] || 'Other languages'))] : [''];
for (const group of groups) {
const groupItems=group?shown.filter(c=>(regions[c.code] || 'Other languages')===group):shown;
let target=list;if(modal&&!group){target=make('div','dialog-options');list.append(target);}
if(group){const section=make('section');const heading=make('h3',modal?'dialog-region':'panel-title',group);section.append(heading);target=make('div',modal?'dialog-options':'options');section.append(target);list.append(section);}
for(const choice of groupItems) {
const button=make('button',modal?'dialog-option':'option');button.type='button';button.dataset.code=choice.code;
button.setAttribute('aria-pressed',String(choice.code===current));
// CSS uses this data attribute for selection; buttons keep their native semantics.
button.dataset.selected=String(choice.code===current);
button.disabled=busy;
if(withFlags && choice.flag)button.append(flag(choice));
if(classes.includes('codes')||classes.includes('big-code')||classes.includes('command'))button.append(make('span','code',choice.code.toUpperCase()));
const names=make('span',modal?'names':'name',codeOnly?choice.code.toUpperCase():choice.name);names.dir='auto';
if(bilingual && searchKey(choice.english)!==searchKey(choice.name)){const subtitle=make(modal?'small':'span',modal?'':'native',choice.english);subtitle.dir='auto';names.append(subtitle);}
button.append(names);
const check=make('span','check',choice.code===current?'✓':'');check.setAttribute('aria-hidden','true');button.append(check);
button.addEventListener('click',()=>change(choice.code));target.append(button);
}
}
empty.hidden=shown.length>0;
if(focusedCode){const replacement=[...list.querySelectorAll('button')].find(b=>b.dataset.code===focusedCode);(replacement||search||trigger)?.focus({preventScroll:true});}
}
let lastChoices='';
function refresh() {
readChoices();
const snapshot=JSON.stringify([current,choices]);
if(snapshot===lastChoices)return;
lastChoices=snapshot;
updateTrigger();
if(nativeSelect){select.replaceChildren();choices.forEach(c=>{const option=make('option','',c.name);option.value=c.code;select.append(option)});select.value=current;}
else renderItems();
}
function setOpen(open, focus=true) {
if(modal){if(open&&!dialog.open){query='';if(search)search.value='';renderItems();dialog.showModal();(search||list.querySelector('button')||dialog.querySelector('button')).focus({preventScroll:true});}else if(!open&&dialog.open)dialog.close();}
else {panel.hidden=!open;trigger.setAttribute('aria-expanded',String(open));if(open&&focus)(search||list.querySelector('[data-selected=true]')||list.querySelector('button'))?.focus({preventScroll:true});}
}
async function change(code) {
if(busy || st.is_translating)return;
busy=true;root.setAttribute('aria-busy','true');status.textContent='Switching language…';if(select)select.disabled=true;
try {
// This runs SiteTran’s translation and configured URL/redirect behavior.
await st.api_change_language(code);
readChoices();
if(current!==code)throw new Error('The language could not be changed.');
refresh();status.textContent='Selected '+selectedChoice().name;
if(!nativeSelect){setOpen(false);trigger.focus({preventScroll:true});}
} catch(error) {status.textContent='Could not switch language. Please try again.';console.error('SiteTran language picker:',error);}
finally {busy=false;root.removeAttribute('aria-busy');if(select)select.disabled=false;if(!nativeSelect)renderItems();}
}
status=make('p','picker-status');status.setAttribute('role','status');root.append(status);
if(nativeSelect){const label=make('label','','Website language');label.htmlFor='st-picker-select';select=make('select');select.id=label.htmlFor;picker.append(label,select);select.addEventListener('change',()=>change(select.value));}
else {
if(classes.includes('form-field'))picker.append(make('label','','Preferred language'));
trigger=make('button','trigger');trigger.type='button';picker.append(trigger);
if(modal){dialog=make('dialog','language-dialog '+classes);dialog.setAttribute('aria-labelledby','st-picker-title');const head=make('div','dialog-head');const title=make('h2','','Choose your language');title.id='st-picker-title';const close=make('button','dialog-close','×');close.type='button';close.setAttribute('aria-label','Close language selector');close.addEventListener('click',()=>dialog.close());head.append(title,close);dialog.append(head);panel=make('div','dialog-controls');dialog.append(panel);root.append(dialog);trigger.setAttribute('aria-haspopup','dialog');dialog.addEventListener('close',()=>trigger.focus({preventScroll:true}));dialog.addEventListener('click',e=>{if(e.target!==dialog)return;const r=dialog.getBoundingClientRect();if(e.clientX<r.left||e.clientX>r.right||e.clientY<r.top||e.clientY>r.bottom)dialog.close()});}
else {panel=make('div','panel');panel.hidden=true;picker.append(panel);trigger.setAttribute('aria-expanded','false');}
if(searchEnabled){search=make('input',modal?'':'search');search.type='search';search.placeholder='Search languages…';search.setAttribute('aria-label','Search languages');panel.append(search);search.addEventListener('input',()=>{query=search.value;renderItems()});}
if(config.tabs)panel.append(make('div','region-tabs'));
if(classes.includes('status')||classes.includes('mega')||classes.includes('drawer'))panel.append(make('div','panel-title','Choose your language'));
list=make('div',modal?'dialog-body':config.grouped?'grouped-options':'options');empty=make('p','no-results','No matching languages.');empty.setAttribute('role','status');
if(modal)dialog.append(list,empty);else panel.append(list,empty);
panel.id='st-picker-panel';trigger.setAttribute('aria-controls',modal?'st-picker-dialog':panel.id);if(modal)dialog.id='st-picker-dialog';
trigger.addEventListener('click',()=>setOpen(modal?true:panel.hidden));
root.addEventListener('keydown',e=>{if(e.target===trigger&&(e.key==='ArrowDown'||e.key==='ArrowUp')){e.preventDefault();setOpen(true);return;}if(e.key==='Escape'){e.preventDefault();setOpen(false);trigger.focus({preventScroll:true});return;}if(!['ArrowDown','ArrowUp','Home','End'].includes(e.key)||e.target===search||e.target===trigger)return;const buttons=[...list.querySelectorAll('button:not(:disabled)')];if(!buttons.length)return;e.preventDefault();const i=buttons.indexOf(document.activeElement);const next=buttons[e.key==='Home'?0:e.key==='End'?buttons.length-1:(i+(e.key==='ArrowDown'?1:-1)+buttons.length)%buttons.length];next.focus({preventScroll:true});const scroller=modal?list:panel;const itemBounds=next.getBoundingClientRect(),menuBounds=scroller.getBoundingClientRect();if(itemBounds.top<menuBounds.top)scroller.scrollTop+=itemBounds.top-menuBounds.top;else if(itemBounds.bottom>menuBounds.bottom)scroller.scrollTop+=itemBounds.bottom-menuBounds.bottom;});
document.addEventListener('click',e=>{if(!modal&&!e.composedPath().includes(root))setOpen(false,false)});
// Only keyboard navigation out dismisses on focus changes. Programmatic
// focus transfers and widget refreshes must not close a newly opened menu.
root.addEventListener('keydown',e=>{
if(!modal&&e.key==='Tab')setTimeout(()=>{
if(!root.contains(document.activeElement))setOpen(false,false);
},0);
});
}
if(modal)dialog.append(status);
refresh();
if(config.tabs){const tabs=root.querySelector('.region-tabs');tabs.replaceChildren();for(const name of ['All regions',...new Set(choices.map(c=>regions[c.code]||'Other languages'))]){const button=make('button','',name);button.type='button';button.setAttribute('aria-pressed',String(name===region));button.addEventListener('click',()=>{region=name;tabs.querySelectorAll('button').forEach(b=>b.setAttribute('aria-pressed',String(b===button)));renderItems()});tabs.append(button);}}
// Hide the original UI only once the replacement can switch real languages.
sourceWrapper.hidden=true;sourceWrapper.style.setProperty('display','none','important');
// Observe the stable DOM container, not the widget's mutable runtime reference.
new MutationObserver(()=>refresh()).observe(sourceWrapper,{childList:true,subtree:true});
new MutationObserver(()=>refresh()).observe(document.documentElement,{attributes:true,attributeFilter:['lang']});
root.dataset.ready='true';
if(config.openOnReady&&!modal&&!nativeSelect)setOpen(true,false);
}
window.addEventListener('sitetranReady',install);
if(window.sitetran?.prod_data && window.sitetran?.widget) install();
})();
</script>For a modal, the window opens inside the preview frame. On your website, it opens over the page. Modern browsers with native <dialog> support are required.
Design CSS and Configuration
1. Everyday select
A familiar label, chevron, and checkmark.
Implementation: Custom language control + SiteTran widget. Flags: Hidden in the replacement. Use the shared helper with this design’s CSS and configuration.
CSS for Everyday select
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Everyday select
<script>
window.siteTranPickerOptions = {
"classes": "base",
"mode": "dropdown",
"flags": false,
"search": false,
"grouped": false,
"tabs": false
};
</script>2. Navigation text
An unboxed link with a quiet floating menu.
Implementation: Custom language control + SiteTran widget. Flags: Hidden in the replacement. Use the shared helper with this design’s CSS and configuration.
CSS for Navigation text
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker.text .trigger{border:0;background:transparent;padding-left:0}
#st-language-picker.text .picker{width:190px}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Navigation text
<script>
window.siteTranPickerOptions = {
"classes": "text",
"mode": "dropdown",
"flags": false,
"search": false,
"grouped": false,
"tabs": false
};
</script>3. Language code
Two-letter trigger; compact code-only choices.
Implementation: Custom language control + SiteTran widget. Flags: Hidden in the replacement. Use the shared helper with this design’s CSS and configuration.
CSS for Language code
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker.compact .picker{width:96px}
#st-language-picker.compact .option{justify-content:space-between}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Language code
<script>
window.siteTranPickerOptions = {
"classes": "compact",
"mode": "dropdown",
"flags": false,
"search": false,
"grouped": false,
"tabs": false
};
</script>4. Globe button
A circular icon opens a full-width language list.
Implementation: Custom language control + SiteTran widget. Flags: Hidden in the replacement. Use the shared helper with this design’s CSS and configuration.
CSS for Globe button
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker.icon .picker{width:220px}
#st-language-picker.icon .trigger{width:46px;border-radius:50%;justify-content:center;margin-left:auto}
#st-language-picker.icon .chevron,#st-language-picker.icon .trigger .label{display:none}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Globe button
<script>
window.siteTranPickerOptions = {
"classes": "icon",
"mode": "dropdown",
"flags": false,
"search": false,
"grouped": false,
"tabs": false
};
</script>5. Split control
An icon compartment separates action from label.
Implementation: Custom language control + SiteTran widget. Flags: Hidden in the replacement. Use the shared helper with this design’s CSS and configuration.
CSS for Split control
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker.split .trigger{padding:0;gap:0;overflow:hidden}
#st-language-picker.split .symbol{padding:12px 14px;background:#f0f4f1;border-right:1px solid #d9e0dc}
#st-language-picker.split .label{padding:0 12px}
#st-language-picker.split .chevron{margin-right:14px}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Split control
<script>
window.siteTranPickerOptions = {
"classes": "split",
"mode": "dropdown",
"flags": false,
"search": false,
"grouped": false,
"tabs": false
};
</script>6. Floating label
A persistent field label sits inside the control.
Implementation: Custom language control + SiteTran widget. Flags: Hidden in the replacement. Use the shared helper with this design’s CSS and configuration.
CSS for Floating label
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker.floating-label .trigger{padding-top:20px}
#st-language-picker.floating-label .picker:before{content:'WEBSITE LANGUAGE';position:absolute;top:8px;left:14px;letter-spacing:1px;font-size:8px;color:#738478}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Floating label
<script>
window.siteTranPickerOptions = {
"classes": "floating-label",
"mode": "dropdown",
"flags": false,
"search": false,
"grouped": false,
"tabs": false
};
</script>7. Native + translated
Two lines make each language easy to recognize.
Implementation: Custom language control + SiteTran widget. Flags: Hidden in the replacement. Use the shared helper with this design’s CSS and configuration.
CSS for Native + translated
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker.bilingual .option{min-height:52px}
#st-language-picker.bilingual .panel{max-height:265px}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Native + translated
<script>
window.siteTranPickerOptions = {
"classes": "bilingual",
"mode": "dropdown",
"flags": false,
"search": false,
"grouped": false,
"tabs": false
};
</script>8. Code index
An aligned ISO-code column anchors the list.
Implementation: Custom language control + SiteTran widget. Flags: Hidden in the replacement. Use the shared helper with this design’s CSS and configuration.
CSS for Code index
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker.codes .option .code{width:30px;border-right:1px solid #e1e7e2;padding-right:8px;color:#3e6652}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Code index
<script>
window.siteTranPickerOptions = {
"classes": "codes",
"mode": "dropdown",
"flags": false,
"search": false,
"grouped": false,
"tabs": false
};
</script>9. Radio choices
A radio-like indicator clearly marks the current choice.
Implementation: Custom language control + SiteTran widget. Flags: Hidden in the replacement. Use the shared helper with this design’s CSS and configuration.
CSS for Radio choices
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker.radio .check{width:15px;height:15px;border:1px solid #b3c4b9;border-radius:50%;font-size:0}
#st-language-picker.radio [data-selected=true] .check{border:4px solid #386d50}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Radio choices
<script>
window.siteTranPickerOptions = {
"classes": "radio",
"mode": "dropdown",
"flags": false,
"search": false,
"grouped": false,
"tabs": false
};
</script>10. Search-first
Find a language by English name, native name, or code.
Implementation: Custom language control + SiteTran widget. Flags: Hidden in the replacement. Use the shared helper with this design’s CSS and configuration.
CSS for Search-first
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Search-first
<script>
window.siteTranPickerOptions = {
"classes": "searchable",
"mode": "dropdown",
"flags": false,
"search": true,
"grouped": false,
"tabs": false
};
</script>11. Two-column list
A wider, shorter menu for a growing language set.
Implementation: Custom language control + SiteTran widget. Flags: Hidden in the replacement. Use the shared helper with this design’s CSS and configuration.
CSS for Two-column list
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker.columns .picker{width:290px}
#st-language-picker.columns .options{display:grid;grid-template-columns:repeat(2,1fr)}
#st-language-picker.columns .option{min-width:0;font-size:11px;padding:10px 6px}
#st-language-picker.columns .check{display:none}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Two-column list
<script>
window.siteTranPickerOptions = {
"classes": "columns",
"mode": "dropdown",
"flags": false,
"search": false,
"grouped": false,
"tabs": false
};
</script>12. Language tiles
A grid of self-contained choices instead of rows.
Implementation: Custom language control + SiteTran widget. Flags: SiteTran flags, including your overrides. Use the shared helper with this design’s CSS and configuration.
CSS for Language tiles
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker.tiles .picker{width:290px}
#st-language-picker.tiles .options{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
#st-language-picker.tiles .option{display:flex;flex-direction:column;justify-content:center;text-align:center;min-height:78px;padding:10px 4px;border:1px solid #edf0eb}
#st-language-picker.tiles .option .name{flex:0}
#st-language-picker.tiles .check{display:none}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Language tiles
<script>
window.siteTranPickerOptions = {
"classes": "tiles",
"mode": "dropdown",
"flags": true,
"search": false,
"grouped": false,
"tabs": false
};
</script>13. Flag atlas
A visual grid with readable native-name captions.
Implementation: Custom language control + SiteTran widget. Flags: SiteTran flags, including your overrides. Use the shared helper with this design’s CSS and configuration.
CSS for Flag atlas
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker.flag-grid .options{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
#st-language-picker.flag-grid .option{flex-direction:column;justify-content:center;padding:10px 4px;text-align:center}
#st-language-picker.flag-grid .option .name{flex:0 0 auto}
#st-language-picker.flag-grid .symbol{font-size:26px}
#st-language-picker.flag-grid .check{display:none}
#st-language-picker.flag-grid .name{font-size:10px}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Flag atlas
<script>
window.siteTranPickerOptions = {
"classes": "flag-grid",
"mode": "dropdown",
"flags": true,
"search": false,
"grouped": false,
"tabs": false
};
</script>14. Region groups
Section labels organize languages by example region.
Implementation: Custom language control + SiteTran widget. Flags: Hidden in the replacement. Edit the regions mapping to match your own language codes. Use the shared helper with this design’s CSS and configuration.
CSS for Region groups
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker.regional .option{min-height:32px}
#st-language-picker.regional .panel-title{border-top:1px solid #e6eae5;padding-top:10px}
#st-language-picker.regional .panel-title:first-child{border-top:0}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Region groups
<script>
window.siteTranPickerOptions = {
"classes": "regional",
"mode": "dropdown",
"flags": false,
"search": false,
"grouped": true,
"tabs": false,
"regions": {
"en": "North America",
"es": "Latin America",
"fr": "Europe",
"de": "Europe",
"ja": "Asia",
"ar": "Middle East",
"pt": "Europe",
"it": "Europe",
"ko": "Asia",
"zh": "Asia",
"hi": "Asia",
"he": "Middle East",
"nl": "Europe",
"tr": "Middle East",
"pt-br": "Latin America",
"en-au": "Oceania"
}
};
</script>15. Command picker
A search-led utility menu for a product header.
Implementation: Custom language control + SiteTran widget. Flags: Hidden in the replacement. Use the shared helper with this design’s CSS and configuration.
CSS for Command picker
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.dark .picker{color:#e3eee7}
#st-language-picker.dark .trigger,#st-language-picker.dark .panel{background:#223630;border-color:#3d5048}
#st-language-picker.dark .option:hover,#st-language-picker.dark .option[data-selected=true]{background:#314b40}
#st-language-picker.dark .native,#st-language-picker.dark .code{color:#a9beb0}
#st-language-picker.dark .check{color:#96d6b0}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker.command .trigger{background:#22352e;color:#f2f7f3}
#st-language-picker.command .panel{border-radius:8px}
#st-language-picker.command .search{font-family:ui-monospace,monospace}
#st-language-picker.command .option .code{margin-left:auto}
#st-language-picker.command .check{display:none}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Command picker
<script>
window.siteTranPickerOptions = {
"classes": "command searchable dark",
"mode": "dropdown",
"flags": false,
"search": true,
"grouped": false,
"tabs": false
};
</script>16. Oversized codes
Large codes create a strong typographic hierarchy.
Implementation: Custom language control + SiteTran widget. Flags: Hidden in the replacement. Use the shared helper with this design’s CSS and configuration.
CSS for Oversized codes
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker.big-code .option{min-height:52px}
#st-language-picker.big-code .option .code{font-size:22px;width:42px;font-weight:600;color:#3a5947}
#st-language-picker.big-code .option .name{font-size:11px}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Oversized codes
<script>
window.siteTranPickerOptions = {
"classes": "big-code",
"mode": "dropdown",
"flags": false,
"search": false,
"grouped": false,
"tabs": false
};
</script>17. Editorial serif
A literary menu with ruled rows and serif typography.
Implementation: Custom language control + SiteTran widget. Flags: Hidden in the replacement. Use the shared helper with this design’s CSS and configuration.
CSS for Editorial serif
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker.editorial .picker{font-family:Georgia,serif}
#st-language-picker.editorial .trigger{font-size:17px;border-radius:0;border-color:#817b6c;background:#fdfaf3}
#st-language-picker.editorial .panel{border-radius:0;background:#fdfaf3;border-color:#b9b19f}
#st-language-picker.editorial .option{border-radius:0;border-bottom:1px solid #e9e2d5}
#st-language-picker.editorial .option:last-child{border-bottom:0}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Editorial serif
<script>
window.siteTranPickerOptions = {
"classes": "editorial cream",
"mode": "dropdown",
"flags": false,
"search": false,
"grouped": false,
"tabs": false
};
</script>18. Underline field
A single baseline with a crisp rectangular list.
Implementation: Custom language control + SiteTran widget. Flags: Hidden in the replacement. Use the shared helper with this design’s CSS and configuration.
CSS for Underline field
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker.underline .trigger{border:0;border-bottom:1px solid #8a9990;border-radius:0;background:transparent}
#st-language-picker.underline .panel{border-radius:0;box-shadow:none}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Underline field
<script>
window.siteTranPickerOptions = {
"classes": "underline",
"mode": "dropdown",
"flags": false,
"search": false,
"grouped": false,
"tabs": false
};
</script>19. Frosted capsule
A pill trigger above a translucent floating panel.
Implementation: Custom language control + SiteTran widget. Flags: Hidden in the replacement. Use the shared helper with this design’s CSS and configuration.
CSS for Frosted capsule
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker.glass .trigger,#st-language-picker.glass .panel{background:#ffffff85;backdrop-filter:blur(12px);border-color:#fff;box-shadow:0 12px 25px #453d5b12}
#st-language-picker.glass .trigger{border-radius:30px}
#st-language-picker.glass .panel{border-radius:18px}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Frosted capsule
<script>
window.siteTranPickerOptions = {
"classes": "glass mist",
"mode": "dropdown",
"flags": false,
"search": false,
"grouped": false,
"tabs": false
};
</script>20. Boarding pass
Dashed edges and code columns suggest travel.
Implementation: Custom language control + SiteTran widget. Flags: Hidden in the replacement. Use the shared helper with this design’s CSS and configuration.
CSS for Boarding pass
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker.codes .option .code{width:30px;border-right:1px solid #e1e7e2;padding-right:8px;color:#3e6652}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker.ticket .trigger{border-radius:2px;border:1px dashed #a9946b;background:#fffdf8}
#st-language-picker.ticket .panel{border:1px dashed #a9946b;border-radius:2px;background:#fffdf8}
#st-language-picker.ticket .option .code{font-family:ui-monospace,monospace}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Boarding pass
<script>
window.siteTranPickerOptions = {
"classes": "ticket cream codes",
"mode": "dropdown",
"flags": false,
"search": false,
"grouped": false,
"tabs": false
};
</script>21. Footer drop-up
The language menu rises above a footer link.
Implementation: Custom language control + SiteTran widget. Flags: Hidden in the replacement. Use the shared helper with this design’s CSS and configuration.
CSS for Footer drop-up
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker.text .trigger{border:0;background:transparent;padding-left:0}
#st-language-picker.text .picker{width:190px}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker.footer{align-items:flex-end;padding-bottom:32px}
#st-language-picker.footer .panel{position:absolute;bottom:100%;margin:0 0 8px;width:100%}
#st-language-picker.footer .trigger{border:0;background:transparent}
#st-language-picker.footer:before{content:'© 2026 • Privacy • Terms';position:absolute;bottom:12px;font-size:9px;color:#929a93}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Footer drop-up
<script>
window.siteTranPickerOptions = {
"classes": "footer text",
"mode": "dropdown",
"flags": false,
"search": false,
"grouped": false,
"tabs": false
};
</script>22. Mobile bottom sheet
A large sheet opens from the bottom of its container.
Implementation: Custom language control + SiteTran widget. Flags: Hidden in the replacement. Use the shared helper with this design’s CSS and configuration.
CSS for Mobile bottom sheet
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker.bottom-sheet .picker{position:static;width:220px}
#st-language-picker.bottom-sheet .panel{position:absolute;bottom:0;left:0;right:0;border-radius:20px 20px 0 0;max-height:285px;padding:14px 18px}
#st-language-picker.bottom-sheet .panel:before{content:'';display:block;width:35px;height:4px;background:#cdd6ce;border-radius:6px;margin:0 auto 12px}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker.mobile .picker{width:230px}
#st-language-picker.mobile .trigger{border-radius:12px;min-height:50px}
#st-language-picker.mobile .panel{border-radius:14px;padding:0}
#st-language-picker.mobile .option{min-height:46px;border-radius:0;border-bottom:1px solid #e9ede7;padding:12px 16px}
#st-language-picker.mobile .option:last-child{border:0}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Mobile bottom sheet
<script>
window.siteTranPickerOptions = {
"classes": "bottom-sheet mobile blue",
"mode": "dropdown",
"flags": false,
"search": false,
"grouped": false,
"tabs": false
};
</script>23. Side drawer
A right-edge panel gives languages their own space.
Implementation: Custom language control + SiteTran widget. Flags: Hidden in the replacement. Use the shared helper with this design’s CSS and configuration.
CSS for Side drawer
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker.drawer .picker{position:static}
#st-language-picker.drawer .panel{position:absolute;right:0;top:0;bottom:0;margin:0;width:238px;max-height:none;border-radius:0;padding:22px 12px;box-shadow:-12px 0 30px #21362b15}
#st-language-picker.drawer .panel-title{font-size:14px;text-transform:none;letter-spacing:0}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Side drawer
<script>
window.siteTranPickerOptions = {
"classes": "drawer",
"mode": "dropdown",
"flags": false,
"search": false,
"grouped": false,
"tabs": false
};
</script>24. Language directory
A spacious two-column directory with native names.
Implementation: Custom language control + SiteTran widget. Flags: Hidden in the replacement. Use the shared helper with this design’s CSS and configuration.
CSS for Language directory
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker.bilingual .option{min-height:52px}
#st-language-picker.bilingual .panel{max-height:265px}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker.mega .picker{width:300px}
#st-language-picker.mega .panel{padding:16px}
#st-language-picker.mega .panel-title{padding:0 0 12px;font-size:12px;letter-spacing:0;text-transform:none;color:#344c3c}
#st-language-picker.mega .options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker.mega .option{background:#f4f7f2;min-height:58px;align-items:center}
#st-language-picker.mega .check{display:none}
#st-language-picker.mega .native{font-size:10px}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Language directory
<script>
window.siteTranPickerOptions = {
"classes": "mega bilingual",
"mode": "dropdown",
"flags": false,
"search": false,
"grouped": false,
"tabs": false
};
</script>25. Monogram menu
A tiny code trigger with a square offset-shadow menu.
Implementation: Custom language control + SiteTran widget. Flags: Hidden in the replacement. Use the shared helper with this design’s CSS and configuration.
CSS for Monogram menu
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker.minimal-code .trigger{width:auto;border:0;background:transparent;letter-spacing:1px;font-size:11px}
#st-language-picker.minimal-code .picker{width:180px}
#st-language-picker.minimal-code .panel{border-radius:0;box-shadow:4px 4px 0 #e0e7dd}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Monogram menu
<script>
window.siteTranPickerOptions = {
"classes": "minimal-code",
"mode": "dropdown",
"flags": false,
"search": false,
"grouped": false,
"tabs": false
};
</script>26. Graphic block
Hard edges, solid shadow, and a punchy active row.
Implementation: Custom language control + SiteTran widget. Flags: Hidden in the replacement. Use the shared helper with this design’s CSS and configuration.
CSS for Graphic block
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker.brutalist .trigger,#st-language-picker.brutalist .panel{border:2px solid #242d24;border-radius:0;box-shadow:4px 4px 0 #242d24}
#st-language-picker.brutalist .trigger{background:#e7f58d;font-weight:700}
#st-language-picker.brutalist .option{border-radius:0}
#st-language-picker.brutalist .option[data-selected=true]{background:#e7f58d}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Graphic block
<script>
window.siteTranPickerOptions = {
"classes": "brutalist",
"mode": "dropdown",
"flags": false,
"search": false,
"grouped": false,
"tabs": false
};
</script>27. Ruled notebook
A ruled list with a margin stripe and paper-like surface.
Implementation: Custom language control + SiteTran widget. Flags: Hidden in the replacement. Use the shared helper with this design’s CSS and configuration.
CSS for Ruled notebook
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker.notebook .panel{background:repeating-linear-gradient(#fffdf6 0px,#fffdf6 37px,#e3e7dc 38px);border-radius:0;border-left:3px solid #cc9a92}
#st-language-picker.notebook .option{border-radius:0;min-height:38px}
#st-language-picker.notebook .trigger{font-family:Georgia,serif;border-radius:0;background:#fffdf6}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Ruled notebook
<script>
window.siteTranPickerOptions = {
"classes": "notebook cream",
"mode": "dropdown",
"flags": false,
"search": false,
"grouped": false,
"tabs": false
};
</script>28. Header utility
An aligned utility menu inside a minimal header.
Implementation: Custom language control + SiteTran widget. Flags: Hidden in the replacement. Use the shared helper with this design’s CSS and configuration.
CSS for Header utility
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker.text .trigger{border:0;background:transparent;padding-left:0}
#st-language-picker.text .picker{width:190px}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker.nav-bar{padding:24px 16px;background:#f6f8f5}
#st-language-picker.nav-bar:before{content:'ACME / Journal';font-size:10px;position:absolute;left:16px;top:38px;color:#738177}
#st-language-picker.nav-bar .picker{margin-left:auto;width:160px}
#st-language-picker.nav-bar .trigger{border:0;background:transparent}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Header utility
<script>
window.siteTranPickerOptions = {
"classes": "nav-bar text",
"mode": "dropdown",
"flags": false,
"search": false,
"grouped": false,
"tabs": false
};
</script>29. Vertical title rail
A side label gives the menu a distinctive silhouette.
Implementation: Custom language control + SiteTran widget. Flags: Hidden in the replacement. Use the shared helper with this design’s CSS and configuration.
CSS for Vertical title rail
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker.vertical-tab .picker{width:240px}
#st-language-picker.vertical-tab .panel{display:grid;grid-template-columns:35px 1fr;padding:0;overflow:hidden}
#st-language-picker.vertical-tab .panel[hidden]{display:none}
#st-language-picker.vertical-tab .panel:before{content:'LANGUAGES';writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;background:#254b3c;color:#e6f0e6;font-size:9px;letter-spacing:2px;padding:12px}
#st-language-picker.vertical-tab .options{padding:6px}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Vertical title rail
<script>
window.siteTranPickerOptions = {
"classes": "vertical-tab",
"mode": "dropdown",
"flags": false,
"search": false,
"grouped": false,
"tabs": false
};
</script>30. Floating row stack
Individual capsules replace the surrounding menu box.
Implementation: Custom language control + SiteTran widget. Flags: Hidden in the replacement. Use the shared helper with this design’s CSS and configuration.
CSS for Floating row stack
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker.rounded-stack .panel{background:transparent;box-shadow:none;border:0;padding:0}
#st-language-picker.rounded-stack .option{background:#fff;margin-bottom:5px;border:1px solid #dbe5da;border-radius:30px;min-height:40px}
#st-language-picker.rounded-stack .option[data-selected=true]{background:#284b39;color:#fff}
#st-language-picker.rounded-stack .check{color:inherit}
#st-language-picker.rounded-stack .trigger{border-radius:30px}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Floating row stack
<script>
window.siteTranPickerOptions = {
"classes": "rounded-stack cream",
"mode": "dropdown",
"flags": false,
"search": false,
"grouped": false,
"tabs": false
};
</script>31. Current language status
A status dot and menu heading give the choice context.
Implementation: Custom language control + SiteTran widget. Flags: Hidden in the replacement. Use the shared helper with this design’s CSS and configuration.
CSS for Current language status
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker.status .trigger .symbol svg{display:none}
#st-language-picker.status .trigger .symbol{width:8px;height:8px;background:#5c9e76;border-radius:50%;font-size:0}
#st-language-picker.status .option{gap:14px}
#st-language-picker.status .panel-title{background:#f3f6f2;margin:-6px -6px 6px;padding:12px 16px;border-bottom:1px solid #e1e7dd}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Current language status
<script>
window.siteTranPickerOptions = {
"classes": "status",
"mode": "dropdown",
"flags": false,
"search": false,
"grouped": false,
"tabs": false
};
</script>32. Dense utility
A narrow control with compact rows for busy toolbars.
Implementation: Custom language control + SiteTran widget. Flags: Hidden in the replacement. Use the shared helper with this design’s CSS and configuration.
CSS for Dense utility
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.dark .picker{color:#e3eee7}
#st-language-picker.dark .trigger,#st-language-picker.dark .panel{background:#223630;border-color:#3d5048}
#st-language-picker.dark .option:hover,#st-language-picker.dark .option[data-selected=true]{background:#314b40}
#st-language-picker.dark .native,#st-language-picker.dark .code{color:#a9beb0}
#st-language-picker.dark .check{color:#96d6b0}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker.dense .option{min-height:29px;padding:6px 8px;font-size:11px}
#st-language-picker.dense .panel{width:165px;margin-left:auto}
#st-language-picker.dense .trigger{min-height:34px;padding:8px 12px;font-size:11px}
#st-language-picker.dense .picker{width:165px}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Dense utility
<script>
window.siteTranPickerOptions = {
"classes": "dense dark",
"mode": "dropdown",
"flags": false,
"search": false,
"grouped": false,
"tabs": false
};
</script>33. Large readable picker
Larger text, clear outlines, and generous click targets.
Implementation: Custom language control + SiteTran widget. Flags: Hidden in the replacement. Use the shared helper with this design’s CSS and configuration.
CSS for Large readable picker
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker.accessibility .trigger{min-height:56px;font-size:16px;border:2px solid #23392e}
#st-language-picker.accessibility .option{min-height:48px;font-size:15px}
#st-language-picker.accessibility .panel{border:2px solid #23392e}
#st-language-picker.accessibility .picker{width:260px}
#st-language-picker.accessibility .panel{max-height:265px}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Large readable picker
<script>
window.siteTranPickerOptions = {
"classes": "accessibility",
"mode": "dropdown",
"flags": false,
"search": false,
"grouped": false,
"tabs": false
};
</script>34. Native browser select
The browser’s own picker, labeled and lightly styled.
Implementation: Custom language control + SiteTran widget. Flags: Hidden in the replacement. Use the shared helper with this design’s CSS and configuration.
CSS for Native browser select
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker.native-select .picker{width:230px}
#st-language-picker.native-select select{width:100%;border:1px solid #bfcabf;border-radius:5px;background:white;padding:13px;color:#283b30}
#st-language-picker.native-select label{display:block;font-size:11px;color:#6f7e71;margin-bottom:8px}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Native browser select
<script>
window.siteTranPickerOptions = {
"classes": "native-select blue",
"mode": "dropdown",
"flags": false,
"search": false,
"grouped": false,
"tabs": false
};
</script>35. Settings form field
An external label and full-width control for settings.
Implementation: Custom language control + SiteTran widget. Flags: Hidden in the replacement. Use the shared helper with this design’s CSS and configuration.
CSS for Settings form field
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker.form-field .trigger{min-height:53px;border-radius:5px}
#st-language-picker.form-field label{display:block;font-size:11px;color:#62766a;margin-bottom:8px}
#st-language-picker.form-field .panel{border-radius:5px;box-shadow:0 4px 15px #243c2a14}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Settings form field
<script>
window.siteTranPickerOptions = {
"classes": "form-field",
"mode": "dropdown",
"flags": false,
"search": false,
"grouped": false,
"tabs": false
};
</script>36. Locale pair
A locale code plus native name above an anchored popover.
Implementation: Custom language control + SiteTran widget. Flags: Hidden in the replacement. Use the shared helper with this design’s CSS and configuration.
CSS for Locale pair
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker.duo .trigger{justify-content:space-between}
#st-language-picker.duo .trigger .symbol{border-right:1px solid #dce2dc;padding-right:10px;font-size:11px;font-weight:600}
#st-language-picker.duo .trigger .label{font-size:11px}
#st-language-picker.popover .panel:before{content:'';width:10px;height:10px;background:white;border-left:1px solid #e0e6e1;border-top:1px solid #e0e6e1;position:absolute;top:49px;left:22px;transform:rotate(45deg)}
#st-language-picker.popover .trigger{width:auto;border:0;background:transparent}
#st-language-picker.popover .panel{margin-top:14px}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Locale pair
<script>
window.siteTranPickerOptions = {
"classes": "duo popover",
"mode": "dropdown",
"flags": false,
"search": false,
"grouped": false,
"tabs": false
};
</script>37. Search + flags
A searchbar above native names and SiteTran flags.
Implementation: Custom language control + SiteTran widget. Flags: SiteTran flags, including your overrides. Use the shared helper with this design’s CSS and configuration.
CSS for Search + flags
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker.bilingual .option{min-height:52px}
#st-language-picker.bilingual .panel{max-height:265px}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Search + flags
<script>
window.siteTranPickerOptions = {
"classes": "searchable bilingual with-flags",
"mode": "dropdown",
"flags": true,
"search": true,
"grouped": false,
"tabs": false
};
</script>38. Searchable flag tiles
Filter a grid of visual language cards as you type.
Implementation: Custom language control + SiteTran widget. Flags: SiteTran flags, including your overrides. Use the shared helper with this design’s CSS and configuration.
CSS for Searchable flag tiles
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker.search-cards .options{display:grid;grid-template-columns:1fr 1fr;gap:5px}
#st-language-picker.search-cards .option{flex-wrap:wrap;min-height:72px;border:1px solid #e3e9e2}
#st-language-picker.search-cards .check{display:none}
#st-language-picker.search-cards .name{flex-basis:100%}
#st-language-picker.search-cards .native{display:none}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Searchable flag tiles
<script>
window.siteTranPickerOptions = {
"classes": "searchable with-flags search-cards blue",
"mode": "dropdown",
"flags": true,
"search": true,
"grouped": false,
"tabs": false
};
</script>39. Native-name search
A rounded searchbar matches names in their own script.
Implementation: Custom language control + SiteTran widget. Flags: Hidden in the replacement. Use the shared helper with this design’s CSS and configuration.
CSS for Native-name search
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker.bilingual .option{min-height:52px}
#st-language-picker.bilingual .panel{max-height:265px}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker.search-pill .search{border-radius:30px;padding:12px 16px;background:#f0f5ef}
#st-language-picker.search-pill .trigger{border-radius:30px}
#st-language-picker.search-pill .panel{border-radius:18px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Native-name search
<script>
window.siteTranPickerOptions = {
"classes": "searchable bilingual search-pill cream",
"mode": "dropdown",
"flags": false,
"search": true,
"grouped": false,
"tabs": false
};
</script>40. Round flag finder
Circular flags with a searchable bilingual list.
Implementation: Custom language control + SiteTran widget. Flags: SiteTran flags, including your overrides. Use the shared helper with this design’s CSS and configuration.
CSS for Round flag finder
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker.bilingual .option{min-height:52px}
#st-language-picker.bilingual .panel{max-height:265px}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker.round-flags .flag{width:24px;height:24px;border-radius:50%}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Round flag finder
<script>
window.siteTranPickerOptions = {
"classes": "searchable with-flags round-flags bilingual",
"mode": "dropdown",
"flags": true,
"search": true,
"grouped": false,
"tabs": false
};
</script>41. Locale search
Search regional variants such as Brazil and Australia.
Implementation: Custom language control + SiteTran widget. Flags: SiteTran flags, including your overrides. Use the shared helper with this design’s CSS and configuration.
CSS for Locale search
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker.bilingual .option{min-height:52px}
#st-language-picker.bilingual .panel{max-height:265px}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker.search-locale .option{min-height:52px}
#st-language-picker.search-locale .option .name{font-size:12px}
#st-language-picker.search-locale .panel{max-height:270px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Locale search
<script>
window.siteTranPickerOptions = {
"classes": "searchable with-flags search-locale bilingual",
"mode": "dropdown",
"flags": true,
"search": true,
"grouped": false,
"tabs": false
};
</script>42. Dark flag search
A searchbar and clear country flags for a dark header.
Implementation: Custom language control + SiteTran widget. Flags: SiteTran flags, including your overrides. Use the shared helper with this design’s CSS and configuration.
CSS for Dark flag search
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.dark .picker{color:#e3eee7}
#st-language-picker.dark .trigger,#st-language-picker.dark .panel{background:#223630;border-color:#3d5048}
#st-language-picker.dark .option:hover,#st-language-picker.dark .option[data-selected=true]{background:#314b40}
#st-language-picker.dark .native,#st-language-picker.dark .code{color:#a9beb0}
#st-language-picker.dark .check{color:#96d6b0}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker.bilingual .option{min-height:52px}
#st-language-picker.bilingual .panel{max-height:265px}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Dark flag search
<script>
window.siteTranPickerOptions = {
"classes": "searchable with-flags bilingual dark",
"mode": "dropdown",
"flags": true,
"search": true,
"grouped": false,
"tabs": false
};
</script>43. Simple language modal
A focused modal with a straightforward language list.
Implementation: Custom modal + SiteTran widget. Flags: Hidden in the replacement. Use the shared helper with this design’s CSS and configuration.
CSS for Simple language modal
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker.simple .dialog-options{grid-template-columns:1fr}
#st-language-picker.simple .dialog-option{border:0;border-bottom:1px solid #e7ece3;border-radius:0;min-height:48px}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Simple language modal
<script>
window.siteTranPickerOptions = {
"classes": "simple",
"mode": "modal",
"flags": false,
"search": false,
"grouped": false,
"tabs": false
};
</script>44. Searchable flag modal
A searchbar, SiteTran flags, and bilingual language names.
Implementation: Custom modal + SiteTran widget. Flags: SiteTran flags, including your overrides. Use the shared helper with this design’s CSS and configuration.
CSS for Searchable flag modal
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Searchable flag modal
<script>
window.siteTranPickerOptions = {
"classes": "with-flags",
"mode": "modal",
"flags": true,
"search": true,
"grouped": false,
"tabs": false
};
</script>45. Round flag modal
Circular flags in a spacious two-column selector.
Implementation: Custom modal + SiteTran widget. Flags: SiteTran flags, including your overrides. Use the shared helper with this design’s CSS and configuration.
CSS for Round flag modal
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker.round-flags .flag{width:24px;height:24px;border-radius:50%}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Round flag modal
<script>
window.siteTranPickerOptions = {
"classes": "round-flags",
"mode": "modal",
"flags": true,
"search": true,
"grouped": false,
"tabs": false
};
</script>46. Region directory modal
Browse example locales under clear region headings.
Implementation: Custom modal + SiteTran widget. Flags: SiteTran flags, including your overrides. Edit the regions mapping to match your own language codes. Use the shared helper with this design’s CSS and configuration.
CSS for Region directory modal
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker.atlas .dialog-options{grid-template-columns:repeat(3,1fr)}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options,#st-language-picker.atlas .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Region directory modal
<script>
window.siteTranPickerOptions = {
"classes": "atlas regions",
"mode": "modal",
"flags": true,
"search": true,
"grouped": true,
"tabs": false,
"regions": {
"en": "North America",
"es": "Latin America",
"fr": "Europe",
"de": "Europe",
"ja": "Asia",
"ar": "Middle East",
"pt": "Europe",
"it": "Europe",
"ko": "Asia",
"zh": "Asia",
"hi": "Asia",
"he": "Middle East",
"nl": "Europe",
"tr": "Middle East",
"pt-br": "Latin America",
"en-au": "Oceania"
}
};
</script>47. Region filter modal
Combine region filters with a language searchbar.
Implementation: Custom modal + SiteTran widget. Flags: SiteTran flags, including your overrides. Edit the regions mapping to match your own language codes. Use the shared helper with this design’s CSS and configuration.
CSS for Region filter modal
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker.atlas .dialog-options{grid-template-columns:repeat(3,1fr)}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options,#st-language-picker.atlas .dialog-options{grid-template-columns:1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Region filter modal
<script>
window.siteTranPickerOptions = {
"classes": "atlas regions tabs",
"mode": "modal",
"flags": true,
"search": true,
"grouped": true,
"tabs": true,
"regions": {
"en": "North America",
"es": "Latin America",
"fr": "Europe",
"de": "Europe",
"ja": "Asia",
"ar": "Middle East",
"pt": "Europe",
"it": "Europe",
"ko": "Asia",
"zh": "Asia",
"hi": "Asia",
"he": "Middle East",
"nl": "Europe",
"tr": "Middle East",
"pt-br": "Latin America",
"en-au": "Oceania"
}
};
</script>48. Flag tile modal
A dark modal with large flag tiles and native names.
Implementation: Custom modal + SiteTran widget. Flags: SiteTran flags, including your overrides. Use the shared helper with this design’s CSS and configuration.
CSS for Flag tile modal
#st-language-picker{box-sizing:border-box;position:relative;display:flex;justify-content:center;align-items:flex-start;padding:24px 0;min-height:100px;width:100%;color:#25332f;font:14px/1.4 system-ui,sans-serif;}
#st-language-picker *,#st-language-picker *::before,#st-language-picker *::after{box-sizing:border-box;}
#st-language-picker button,#st-language-picker input,#st-language-picker select{font:inherit;}
#st-language-picker button{cursor:pointer;}
#st-language-picker button:focus-visible,#st-language-picker input:focus-visible,#st-language-picker select:focus-visible{outline:3px solid #167c70;outline-offset:3px;}
#st-language-picker [hidden]{display:none!important;}
#st-language-picker.dark{color:#e3eee7;}
#st-language-picker .picker-status{position:absolute;top:100%;left:0;width:100%;margin:6px 0 0;text-align:center;font-size:12px;}
#st-language-picker .language-dialog{line-height:1.4;}
#st-language-picker .language-dialog .picker-status{position:static;margin:0;padding:0 28px 20px;}
#st-language-picker .language-dialog .picker-status:empty{display:none;}
#st-language-picker .picker{position:relative;width:228px;color:#25332f}
#st-language-picker .trigger{width:100%;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #d9e0dc;min-height:44px;padding:11px 14px;border-radius:8px;color:inherit;text-align:left;font-size:13px}
#st-language-picker .trigger .label{flex:1}
#st-language-picker .chevron{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
#st-language-picker .chevron svg{display:block;width:12px;height:12px}
#st-language-picker .chevron .caret-up{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-down{display:none}
#st-language-picker .trigger[aria-expanded=true] .chevron .caret-up{display:block}
#st-language-picker .panel{margin-top:8px;border:1px solid #e0e6e1;background:#fff;border-radius:10px;padding:6px;box-shadow:0 12px 30px #21362b12;max-height:275px;overflow:auto}
#st-language-picker .panel[hidden]{display:none}
#st-language-picker .option{width:100%;border:0;border-radius:5px;display:flex;gap:10px;align-items:center;min-height:38px;padding:8px 10px;background:transparent;color:inherit;text-align:left;font-size:12px}
#st-language-picker .option:hover{background:#eef4f0}
#st-language-picker .option[data-selected=true]{background:#edf4ef}
#st-language-picker .option .name{flex:1}
#st-language-picker .check{color:#288169;font-size:13px}
#st-language-picker .native{display:block;color:#7f8881;font-size:11px;margin-top:3px}
#st-language-picker .code{font:11px ui-monospace,monospace;color:#79857c}
#st-language-picker .symbol{font-size:19px;display:inline-flex;align-items:center}
#st-language-picker .panel-title{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#7d867f;padding:12px 10px 8px}
#st-language-picker .search{width:100%;border:1px solid #dce2dd;background:#f8faf8;border-radius:6px;padding:10px;font-size:12px;margin:2px 0 6px}
#st-language-picker .no-results{font-size:12px;padding:14px;color:#69766d}
#st-language-picker.stage.dark{background:#172521}
#st-language-picker.dark .picker{color:#e3eee7}
#st-language-picker.dark .trigger,#st-language-picker.dark .panel{background:#223630;border-color:#3d5048}
#st-language-picker.dark .option:hover,#st-language-picker.dark .option[data-selected=true]{background:#314b40}
#st-language-picker.dark .native,#st-language-picker.dark .code{color:#a9beb0}
#st-language-picker.dark .check{color:#96d6b0}
#st-language-picker.stage.cream{background:#f3eee4}
#st-language-picker.stage.blue{background:#edf3fa}
#st-language-picker.stage.rose{background:#faf0ee}
#st-language-picker.stage.ink{background:#27364b}
#st-language-picker.stage.mist{background:linear-gradient(140deg,#eee7f4,#dfedea)}
#st-language-picker .rail .panel{border-radius:0 9px 9px 0;border-left:3px solid #38755a}
#st-language-picker .rail .option{border-radius:0}
#st-language-picker .rail [data-selected=true]{background:#dfeee4}
#st-language-picker .swiss .trigger{border:0;border-radius:0;background:#df3b2f;color:white;font-weight:600}
#st-language-picker .swiss .panel{border-radius:0;border:0;box-shadow:none}
#st-language-picker .swiss .option{border-radius:0;border-bottom:1px solid #ddd;min-height:40px}
#st-language-picker .swiss .option .code{font-size:10px;color:#dc3c31}
#st-language-picker .swiss .option[data-selected=true]{background:#fcedea}
#st-language-picker .swiss .check{color:#dc3c31}
#st-language-picker .flag{width:24px;height:18px;object-fit:cover;flex-shrink:0;border-radius:2px;box-shadow:0 0 0 1px #00000010}
#st-language-picker .large-flags .flag{width:34px;height:25px}
#st-language-picker .mini-window{background:white;border:1px solid #dce5dd;border-radius:10px;padding:15px;box-shadow:0 12px 30px #21362b12;pointer-events:none;max-width:300px;margin:auto}
#st-language-picker .mini-heading{font-size:14px;font-weight:600;margin-bottom:10px}
#st-language-picker .mini-search{border:1px solid #e1e7e1;border-radius:6px;padding:9px;font-size:10px;color:#89958c;margin-bottom:10px}
#st-language-picker .mini-options{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#st-language-picker .mini-option{font-size:10px;display:flex;align-items:center;gap:7px;background:#f5f8f4;border-radius:5px;padding:9px 6px}
#st-language-picker .mini-option .flag{width:18px;height:13px}
#st-language-picker .mini-region{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:#7c8b80;margin:12px 0 6px}
#st-language-picker .mini-note{text-align:center;font-size:10px;color:#6f7d72;margin:16px 0}
#st-language-picker .language-dialog{border:0;border-radius:18px;padding:0;width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:#253a2c;background:#fff;box-shadow:0 28px 90px #172c3440}
#st-language-picker .language-dialog::backdrop{background:#122c286b;backdrop-filter:blur(4px)}
#st-language-picker .dialog-head{padding:28px 28px 16px;position:relative}
#st-language-picker .dialog-head h2{font-size:24px;letter-spacing:-.6px;margin:0 40px 7px 0;font-weight:500}
#st-language-picker .dialog-head p{font-size:12px;line-height:1.6;color:#6b7d6f;margin:0}
#st-language-picker .dialog-close{position:absolute;right:20px;top:20px;border:0;background:#edf2eb;border-radius:50%;width:34px;height:34px;font-size:22px;color:inherit}
#st-language-picker .dialog-controls{padding:0 28px 16px}
#st-language-picker .dialog-controls input{padding:13px 15px;width:100%;border:1px solid #d4ded4;background:#f8faf6;border-radius:8px;font-size:14px}
#st-language-picker .region-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#st-language-picker .region-tabs button{border:1px solid #d8e2d5;background:transparent;border-radius:20px;padding:8px 12px;font-size:11px;color:inherit}
#st-language-picker .region-tabs button[aria-pressed=true]{background:#2b513c;color:white;border-color:#2b513c}
#st-language-picker .dialog-body{padding:0 28px 24px;max-height:55dvh;overflow:auto}
#st-language-picker .dialog-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#st-language-picker .dialog-option{display:flex;align-items:center;gap:12px;min-height:62px;border:1px solid #e0e7dc;border-radius:8px;background:white;padding:12px;text-align:left;color:inherit;font-size:13px}
#st-language-picker .dialog-option:hover{background:#f2f7ef}
#st-language-picker .dialog-option[aria-pressed=true]{border-color:#52865e;background:#edf5e8}
#st-language-picker .dialog-option .names{flex:1;display:flex;flex-direction:column;justify-content:center;line-height:1.35}
#st-language-picker .dialog-option small{display:block;font-size:11px;color:#738371;margin-top:4px}
#st-language-picker .dialog-option .flag{width:30px;height:22px}
#st-language-picker .dialog-region{margin:20px 0 10px;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#62775f}
#st-language-picker .dialog-region:first-child{margin-top:0}
#st-language-picker .dialog-foot{padding:16px 28px;border-top:1px solid #e2e8dc;font-size:11px;color:#6b7b66;background:#f8faf6}
#st-language-picker .language-dialog.simple{width:min(440px,calc(100vw - 32px))}
#st-language-picker .language-dialog.dark{background:#1e332a;color:#e1eee4}
#st-language-picker .language-dialog.dark .dialog-head p,#st-language-picker .language-dialog.dark small,#st-language-picker .language-dialog.dark .dialog-region{color:#aabfae}
#st-language-picker .language-dialog.dark .dialog-option{background:#294437;border-color:#3e5b48}
#st-language-picker .language-dialog.dark .dialog-option[aria-pressed=true]{background:#3c6247;border-color:#89bd8d}
#st-language-picker .language-dialog.dark input,#st-language-picker .language-dialog.dark .dialog-close,#st-language-picker .language-dialog.dark .dialog-foot{background:#294437;color:#d8e8dc;border-color:#46634e}
#st-language-picker .language-dialog.atlas{width:min(850px,calc(100vw - 32px))}
#st-language-picker .language-dialog.round-flags .dialog-option .flag{width:32px;height:32px;border-radius:50%}
#st-language-picker .language-dialog.tiles-modal .dialog-option{flex-direction:column;text-align:center;min-height:116px;justify-content:center}
#st-language-picker.tiles-modal .dialog-option .names{flex:0 0 auto}
#st-language-picker.tiles-modal .dialog-option .flag{width:42px;height:31px}
#st-language-picker.tiles-modal .dialog-option .check{display:none}
@media(max-width:600px){#st-language-picker .dialog-head{padding:24px 20px 16px}
#st-language-picker .dialog-controls{padding:0 20px 16px}
#st-language-picker .dialog-body{padding:0 20px 20px}
#st-language-picker .dialog-foot{padding:14px 20px}
#st-language-picker .dialog-options{grid-template-columns:1fr}
#st-language-picker.tiles-modal .dialog-options{grid-template-columns:1fr 1fr}
#st-language-picker .dialog-head h2{font-size:21px}
}
#st-language-picker .dialog-controls>input{width:100%;padding:13px 15px;border:1px solid #d4ded4;border-radius:8px;background:#f8faf6;}
#st-language-picker .dialog-body{max-height:55dvh;}
#st-language-picker .dialog-head{padding-bottom:22px;}
#st-language-picker.drawer,#st-language-picker.bottom-sheet,#st-language-picker.footer{min-height:280px;}
#st-language-picker button:disabled{opacity:.55;cursor:wait;}
Configuration for Flag tile modal
<script>
window.siteTranPickerOptions = {
"classes": "tiles-modal dark",
"mode": "modal",
"flags": true,
"search": true,
"grouped": false,
"tabs": false
};
</script>Write your Own CSS
If you want to write your own CSS, these selectors let you style specific parts of the language dropdown.
CSS Selectors for Styled Select and Bare Select
Both types use a native HTML <select> control.
| Selector | What It Styles |
|---|---|
#sitetran_translate_wrapper | The icon and select control together. |
#sitetran_translate_element | The container around the select control. |
#sitetran_translate_element select | The select control itself. |
For example, this CSS changes the font and text size:
#sitetran_translate_element select {
font-family: inherit;
font-size: 16px;
}CSS Selectors for Dropdown List
| Selector | What It Styles |
|---|---|
#sitetran_translate_wrapper | The icon and language dropdown together. |
#sitetran_translate_element | The container around the button and menu. |
#sitetran_translate_element .sitetran_translate_element_btn | The button that opens the menu. |
#sitetran_translate_element .sitetran-translate-list-container | The menu container. |
#sitetran_translate_element .sitetran_translate_list li | Each language item in the menu. |
Make It Ready for your Website
Try your language selector on a computer and phone. Check that the menu fits, flags and names align, and you can switch languages with the keyboard. For searchable controls, try both a display name and an English name, such as “espanol” and “Spanish.” For modals, check that Escape closes the window and focus returns to its button.
For preset styles, check that you saved the preset your website uses. To undo a preset style, restore your previous CSS and click Save Styles. For custom controls, remove the helper, configuration, and design CSS, then reload the page to restore the original widget.