From 774e7f9958362d33f4ec2a38135a8eb5c998d219 Mon Sep 17 00:00:00 2001 From: David Keane Date: Fri, 29 May 2026 23:11:06 +0100 Subject: [PATCH] fix(0.3.1): My Radio layout polish + drop dark-auto MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Real-screen review of v0.3.0 surfaced a contrast bug and several layout issues. Quick patch. - Drop @media prefers-color-scheme dark for theme=auto. WP admin has no native dark mode, so OS-dark made our light text sit on the still- white WP postbox = unreadable. `auto` now behaves as light; `dark` remains as an explicit choice. - theme=dark now actually reads: the player surface itself goes dark (#1d2327 bg + subtle border + padding) so the light text has somewhere to land instead of fighting the white WP postbox. - .radio-wrap max-width 880px — player no longer stretches edge-to-edge. - Drop the .radio-intro max-width:720px cap so the intro fits one line. - Volume slider fixed at flex:0 0 auto / width:220px — % label sits next to the slider instead of pinned to the far edge. - Station dropdown capped at 360px (was width:100%). - Play-button dashicon shrunk 18px → 14px so it sits on the button-text baseline instead of looking like a second row. Files: radio.php, assets/css/radio.css, inc/about.php, CHANGELOG.md. Co-Authored-By: Claude Opus 4.7 (1M context) --- CHANGELOG.md | 17 +++++++++++++++ assets/css/radio.css | 52 ++++++++++++++++++-------------------------- inc/about.php | 8 +++++-- radio.php | 4 ++-- 4 files changed, 46 insertions(+), 35 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 20d8ba1..5c6d735 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,23 @@ Format: [Keep a Changelog 1.1.0](https://keepachangelog.com/en/1.1.0/) — versi --- +## [0.3.1] — 2026-05-29 — My Radio layout polish + drop dark-auto + +Quick patch after a real-screen review of the My Radio admin page. v0.3.0 added a lot of features but stretched the player to fill the full admin width and — embarrassingly — introduced a real contrast bug via the dark-auto CSS. + +### Fixed +- **Dropped `@media (prefers-color-scheme: dark)` for `theme=auto`.** WordPress admin has no native dark mode, so when the OS was dark, our dark text rendered on the still-white WP postbox = unreadable. `auto` now behaves as light (matching WP's actual scheme); `dark` is still available as an explicit choice. +- **`theme=dark` now actually reads.** The player surface goes dark (`#1d2327` background + subtle border + padding) so the light text has somewhere to sit, instead of fighting the white WP postbox. +- **Player no longer stretches edge-to-edge.** `.radio-wrap { max-width: 880px; }` keeps the player a focused settings-page card. +- **Intro paragraph one-line on normal widths.** Removed the `max-width: 720px` cap that was forcing the wrap. +- **Volume slider no longer dominates the row.** Fixed width 220px (`flex: 0 0 auto`) — the percent label now sits next to the slider instead of pinned to the far right edge. +- **Station dropdown** capped at 360px (was full-width) — typical WP form-control width. +- **Play button icon** shrunk from 18px to 14px so the ▶ glyph sits on the button-text baseline instead of looking like a separate row. + +**Files changed:** `radio.php` (version), `assets/css/radio.css` (wrap width, intro, play icon, volume, station-select, dark-auto block deleted, dark-surface added), `inc/about.php` (history entry). + +--- + ## [0.3.0] — 2026-05-29 — Dark theme + mute + media keys + current-track display A polish pass that closes the gaps surfaced by a UI review. Two categories: **2nd-look fixes** (things the previous release implied but didn't actually deliver) and **nice-to-haves** (small upgrades that lift the admin-player feel). diff --git a/assets/css/radio.css b/assets/css/radio.css index 70540dc..c6a09d3 100644 --- a/assets/css/radio.css +++ b/assets/css/radio.css @@ -87,9 +87,9 @@ } .radio-player__play .dashicons { - font-size: 18px; - width: 18px; - height: 18px; + font-size: 14px; + width: 14px; + height: 14px; line-height: 1; } @@ -97,8 +97,8 @@ display: flex; align-items: center; gap: 8px; - flex: 1; - min-width: 200px; + flex: 0 0 auto; + width: 220px; } .radio-player__volume .dashicons { @@ -160,7 +160,7 @@ .radio-player__station-select select { width: 100%; - max-width: 100%; + max-width: 360px; } /* Error notice — uses WP notice styling */ @@ -195,9 +195,15 @@ } /* ────────────────────────────────────────────────────────────────── - * Main admin page — wrap player in a postbox-like card + * Main admin page — wrap player in a postbox-like card. + * Constrained max-width keeps the player a focused settings-page card + * instead of stretching to fill the full admin width. * ─────────────────────────────────────────────────────────────── */ +.radio-wrap { + max-width: 880px; +} + .radio-wrap .radio-player { margin-top: 4px; } @@ -206,7 +212,6 @@ margin: 0 0 16px; color: #50575e; font-size: 13px; - max-width: 720px; } /* ────────────────────────────────────────────────────────────────── @@ -366,27 +371,12 @@ border-top-color: #3c434a; } -/* Auto — same dark rules behind prefers-color-scheme. Duplicated rather - than nested in @media-inside-selector (CSS doesn't allow that), kept - line-for-line in sync with the .radio-theme-dark block above. */ -@media (prefers-color-scheme: dark) { - .radio-theme-auto .radio-player__now { border-bottom-color: #3c434a; } - .radio-theme-auto .radio-player__station-name { color: #f0f0f1; } - .radio-theme-auto .radio-player__label, - .radio-theme-auto .radio-player__station-genre, - .radio-theme-auto .radio-player__volume-pct, - .radio-theme-auto .radio-player__credit, - .radio-theme-auto .radio-player__mute, - .radio-theme-auto .radio-player__station-select label, - .radio-theme-auto .radio-player__volume .dashicons { color: #a7aaad; } - .radio-theme-auto .radio-player__mute:hover { color: #f0f0f1; } - .radio-theme-auto .radio-player__mute--muted { color: #ff8b8b; } - .radio-theme-auto .radio-player__station-desc, - .radio-theme-auto .radio-player__track, - .radio-theme-auto .radio-intro { color: #c3c4c7; } - .radio-theme-auto .radio-player__station-genre { background: rgba(255, 255, 255, 0.08); } - .radio-theme-auto .radio-player__error { background: rgba(179, 45, 46, 0.18); color: #ff9b9b; } - .radio-theme-auto .radio-about-card { background: #1d2327; border-color: #3c434a; color: #c3c4c7; } - .radio-theme-auto .radio-about-card h2 { background: #2c3338; color: #f0f0f1; border-bottom-color: #3c434a; } - .radio-theme-auto #radio_dashboard_widget .radio-player__credit { border-top-color: #3c434a; } +/* Give the player its own dark surface when theme=dark so the dark text + has something to read against — WP postboxes don't follow our dark + choice, so without this the light text would sit on white. */ +.radio-theme-dark .radio-player { + background: #1d2327; + padding: 14px 16px; + border-radius: 3px; + border: 1px solid #3c434a; } diff --git a/inc/about.php b/inc/about.php index 50a0fcb..dbc8110 100644 --- a/inc/about.php +++ b/inc/about.php @@ -48,8 +48,12 @@ function radio_render_about_page() {