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);
|
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;
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user