From 588a303c445db84f190d8f6f5e00824f9f506a63 Mon Sep 17 00:00:00 2001 From: "alexei.dolgolyov" Date: Sat, 25 Apr 2026 02:55:36 +0300 Subject: [PATCH] ui: fix search icon overlap, Display cards, compact view, dark dropdowns MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Library - Search icon overlapped placeholder text — legacy CSS positioned the icon absolutely (left: 0.6rem) inside a position: relative wrapper. Override now resets position: static (with !important) on icon, clear button, and wrapper, lets the flexbox order them naturally with gap: 10px, and zeroes the input's legacy padding: 0.4rem 2rem 0.4rem 2rem. - Compact view now visually distinct from grid view: tighter grid (minmax(120px, 1fr) vs 200px), 18px gap, smaller sans- font name (13px sans 500 weight) instead of serif, smaller meta (9px), smaller browser-icon. The legacy .browser-grid-compact class was being applied but my .now-playing-styled rules ignored it. Display tab — full card styling - Cards: 360px min width (was 280px), serif name (17px) with copper monitor icon, mono uppercase resolution + manufacturer, copper-bordered "PRIMARY" badge. - Power button: 38px circle, jade when ON (with copper-glow shadow), faint ink when OFF, copper on hover. Was previously unstyled / invisible. - Brightness control: hairline divider above, copper hairline slider with copper handle and copper-glow, mono tabular-num percentage in copper. Native form widgets readable on dark theme - color-scheme: dark on :root (light on light theme) so native controls (select dropdowns, scrollbars) inherit dark colors. - select option { background-color, color } so the popup list paints dark text on dark background instead of system white. --- media_server/static/css/styles.css | 244 +++++++++++++++++++++++++++-- 1 file changed, 232 insertions(+), 12 deletions(-) diff --git a/media_server/static/css/styles.css b/media_server/static/css/styles.css index f0275a5..1a8b1f7 100644 --- a/media_server/static/css/styles.css +++ b/media_server/static/css/styles.css @@ -93,6 +93,10 @@ ============================================================ */ :root { + /* Tells browsers we're using a dark UI so native widgets + (select dropdowns, scrollbars, form controls) match. */ + color-scheme: dark; + /* Studio Reference (warm dark) */ --bg-deep: #0E0D0B; --bg-paper: #18150F; @@ -146,6 +150,7 @@ } :root[data-theme="light"] { + color-scheme: light; /* Paper Edition (warm cream) */ --bg-deep: #F5F1EA; --bg-paper: #EDE7DC; @@ -7300,11 +7305,15 @@ body.audio-spectrum-live .now-playing .spectrum span { border-bottom: 1px solid var(--rule-strong) !important; border-radius: 0 !important; padding: 4px 0 !important; - display: inline-flex; + /* override legacy position: relative so the absolutely-positioned + icon doesn't overlap the input */ + position: static !important; + display: inline-flex !important; align-items: center; - gap: 8px; + gap: 10px; transition: border-color 180ms var(--ease); min-width: 220px; + max-width: none !important; } .browser-container .browser-search-wrapper:focus-within { border-bottom-color: var(--copper) !important; @@ -7313,23 +7322,40 @@ body.audio-spectrum-live .now-playing .spectrum span { background: transparent !important; border: 0 !important; color: var(--ink) !important; - font-family: var(--sans); - font-size: 14px; + font-family: var(--sans) !important; + font-size: 14px !important; + /* defeat legacy padding: 0.4rem 2rem 0.4rem 2rem */ padding: 4px 0 !important; - outline: none; + outline: none !important; flex: 1; min-width: 0; + width: auto !important; } .browser-container .browser-search-input::placeholder { color: var(--ink-mute); } -.browser-container .browser-search-icon { color: var(--ink-mute); flex-shrink: 0; } +.browser-container .browser-search-icon { + /* defeat legacy position: absolute */ + position: static !important; + transform: none !important; + left: auto !important; + top: auto !important; + color: var(--ink-mute); + flex-shrink: 0; + pointer-events: none; +} .browser-container .browser-search-clear { + /* defeat legacy position: absolute */ + position: static !important; + transform: none !important; + right: auto !important; + top: auto !important; background: transparent !important; border: 0 !important; - color: var(--ink-mute); + color: var(--ink-mute) !important; cursor: pointer; padding: 0 !important; + flex-shrink: 0; } -.browser-container .browser-search-clear:hover { color: var(--copper); } +.browser-container .browser-search-clear:hover { color: var(--copper) !important; } /* Items per page label + select */ .browser-container .items-per-page-label { @@ -7343,7 +7369,7 @@ body.audio-spectrum-live .now-playing .spectrum span { gap: 8px; } .browser-container .items-per-page-label select { - background: transparent !important; + background: var(--bg-card) !important; border: 1px solid var(--rule-strong) !important; color: var(--ink) !important; border-radius: 0 !important; @@ -7352,14 +7378,44 @@ body.audio-spectrum-live .now-playing .spectrum span { padding: 6px 10px !important; cursor: pointer; } +/* Native