vultr/openclaw
1
0
Fork 0
mirror of https://github.com/openclaw/openclaw.git synced 2026-07-24 01:41:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): settings language picker was oversized and unthemed (#110621)

Browse Source 
* fix(ui): settings language picker matches the settings design language

* fix(ui): keep Web Awesome available-height bound in language listbox cap

* fix(ui): restore forced-colors focus outlines for the language picker
This commit is contained in:
Peter Steinberger
2026-07-18 12:16:30 +01:00
committed by GitHub
parent 3b2797f09b
commit c989b8a519
1 changed files with 87 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
ui/src/styles/settings.css
View File

@@ -416,12 +416,18 @@ wa-radio-group.settings-segmented::part(radios) {
.settings-select {
width: 100%;
min-width: 0;
font: inherit;
font-size: var(--control-ui-input-text-size);
}
/* Native controls own their box. wa-select draws the same box on its shadow
combobox part below; host chrome would double-border the web component. */
.settings-input,
select.settings-select {
border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--bg) 80%, var(--bg-elevated) 20%);
color: var(--text);
font: inherit;
font-size: var(--control-ui-input-text-size);
padding: 7px 10px;
transition: border-color var(--duration-fast) var(--ease-out);
}
@@ -495,12 +501,90 @@ wa-radio-group.settings-segmented::part(radios) {
}
.settings-input:focus-visible,
.settings-select:focus-visible {
select.settings-select:focus-visible {
outline: none;
border-color: color-mix(in srgb, var(--accent) 55%, var(--border) 45%);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}
/* ── Web Awesome select ── */
wa-select.settings-select {
--wa-form-control-activated-color: var(--accent);
}
wa-select.settings-select::part(combobox) {
min-height: var(--settings-control-height);
padding-inline: 10px;
border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--bg) 80%, var(--bg-elevated) 20%);
color: var(--text);
cursor: default;
transition: border-color var(--duration-fast) var(--ease-out);
}
/* [open] is required alongside :focus-within: Chromium does not propagate
:focus-within to the host while a slotted option holds focus, so the open
state must key off the reflected attribute or the stock ring leaks through. */
wa-select.settings-select[open]::part(combobox),
wa-select.settings-select:focus-within::part(combobox) {
outline: none;
border-color: color-mix(in srgb, var(--accent) 55%, var(--border) 45%);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}
wa-select.settings-select::part(expand-icon) {
margin-inline-start: var(--space-2);
font-size: var(--control-ui-text-sm);
color: var(--muted);
}
wa-select.settings-select::part(listbox) {
/* Keep Web Awesome's collision-aware bound in the cap; replacing it outright
would let the listbox overflow when the popup has little room to open. */
max-height: min(320px, var(--auto-size-available-height, calc(100vh - 48px)));
padding: 6px;
border: 1px solid color-mix(in srgb, var(--border-strong) 86%, transparent);
border-radius: var(--radius-md);
background: var(--bg-elevated);
box-shadow: var(--shadow-lg);
color: var(--text);
}
wa-select.settings-select wa-option {
padding: 6px 8px;
border-radius: calc(var(--radius-md) - 4px);
font-size: var(--control-ui-text-md);
color: var(--text);
cursor: default;
}
/* The roving "current" option already carries the accent fill; the global
:focus-visible accent outline on top of it is pure noise. */
wa-select.settings-select wa-option:focus-visible {
outline: none;
}
wa-select.settings-select wa-option:state(current) {
color: var(--accent-foreground);
}
/* Forced colors suppresses the box-shadow ring and accent fill that stand in
for the outlines removed above, so restore system-color outlines there. */
@media (forced-colors: active) {
wa-select.settings-select[open]::part(combobox),
wa-select.settings-select:focus-within::part(combobox) {
outline: 2px solid SelectedItem;
outline-offset: 2px;
}
wa-select.settings-select wa-option:focus-visible {
outline: 2px solid SelectedItem;
outline-offset: 2px;
}
}
textarea.settings-input {
min-height: 88px;
resize: vertical;