feat(ui): restyle enhanced header locale picker as LED-accent badge
This commit is contained in:
@@ -100,6 +100,61 @@ h2 {
|
||||
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 {
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
font-size: 0.65rem;
|
||||
|
||||
@@ -140,6 +140,16 @@
|
||||
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 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user