feat(ui): restyle enhanced header locale picker as LED-accent badge

This commit is contained in:
2026-04-22 19:48:08 +03:00
parent 03d2e6b1f2
commit 9ce1dc33bf
2 changed files with 65 additions and 0 deletions
+55
View File
@@ -100,6 +100,61 @@ h2 {
background: var(--bg-secondary); background: var(--bg-secondary);
} }
/* ── Header locale picker (post IconSelect enhancement) ────────────────────
The hidden <select.header-locale> is enhanced into a trigger button at
runtime. Inside the toolbar, re-skin it to match .header-btn so it reads
as a peer of the icon buttons, with the 2-letter code rendered as a small
LED-style accent badge in Orbitron — same display font as the brand mark. */
.header-toolbar .icon-select-trigger {
width: auto;
gap: 6px;
padding: 3px 6px;
border: none;
border-radius: 5px;
background: transparent;
color: var(--text-secondary);
font-size: 0.75rem;
font-weight: 600;
line-height: 1;
transition: color 0.2s, background 0.2s;
}
.header-toolbar .icon-select-trigger:hover {
color: var(--text-color);
background: var(--bg-secondary);
border-color: transparent;
}
.header-toolbar .icon-select-trigger-icon {
font-family: 'Orbitron', sans-serif;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--primary-color);
padding: 3px 5px;
border-radius: 4px;
background: color-mix(in srgb, var(--primary-color) 14%, transparent);
line-height: 1;
}
.header-toolbar .icon-select-trigger-icon > span {
font-weight: inherit;
}
.header-toolbar .icon-select-trigger-label {
flex: 0 1 auto;
font-weight: 500;
font-size: 0.72rem;
letter-spacing: 0.01em;
margin: 0;
}
.header-toolbar .icon-select-trigger-arrow {
font-size: 0.6rem;
opacity: 0.55;
margin-left: 1px;
}
#server-version { #server-version {
font-family: 'Orbitron', sans-serif; font-family: 'Orbitron', sans-serif;
font-size: 0.65rem; font-size: 0.65rem;
+10
View File
@@ -140,6 +140,16 @@
max-width: 48px; max-width: 48px;
} }
/* Collapse the enhanced locale trigger to just the 2-letter badge on
narrow screens, matching the compact footprint of the icon buttons. */
.header-toolbar .icon-select-trigger-label {
display: none;
}
.header-toolbar .icon-select-trigger {
gap: 4px;
padding: 3px 5px;
}
h1 { h1 {
font-size: 1.1rem; font-size: 1.1rem;
} }