fix(0.3.1): My Radio layout polish + drop dark-auto
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) <noreply@anthropic.com>
This commit is contained in:
+21
-31
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user