diff --git a/media_server/static/css/styles.css b/media_server/static/css/styles.css index 68733c1..a66e73a 100644 --- a/media_server/static/css/styles.css +++ b/media_server/static/css/styles.css @@ -1151,13 +1151,22 @@ button:disabled { } .audio-device-selector select { - padding: 0.5rem 0.625rem; - border-radius: 8px; + width: 100%; + padding: 10px; border: 1px solid var(--border); + border-radius: 4px; background: var(--bg-tertiary); color: var(--text-primary); - font-size: 0.875rem; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; + font-size: 1rem; cursor: pointer; + transition: border-color 0.25s ease, box-shadow 0.25s ease; +} + +.audio-device-selector select:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 3px rgba(29, 185, 84, 0.15); } .audio-device-status { @@ -3025,6 +3034,10 @@ footer .separator { /* Tablet breakpoint */ @media (min-width: 601px) and (max-width: 900px) { + .mini-volume-container { + display: none; + } + .browser-list-bitrate { display: none; } diff --git a/media_server/static/js/app.js b/media_server/static/js/app.js index a1dbb11..b5f3c29 100644 --- a/media_server/static/js/app.js +++ b/media_server/static/js/app.js @@ -477,7 +477,6 @@ try { const token = localStorage.getItem('media_server_token'); - // Fetch devices and current status in parallel const [devicesResp, statusResp] = await Promise.all([ fetch('/api/media/visualizer/devices', { headers: { 'Authorization': `Bearer ${token}` } @@ -497,7 +496,6 @@ return; } - // Show section section.style.display = ''; // Populate dropdown (keep auto-detect as first option) @@ -519,10 +517,8 @@ } } - // Update status indicator updateAudioDeviceStatus(status); } catch (e) { - // Silently hide if unavailable section.style.display = 'none'; } } @@ -562,7 +558,6 @@ if (resp.ok) { const result = await resp.json(); updateAudioDeviceStatus(result); - // Re-check visualizer availability since device changed await checkVisualizerAvailability(); if (visualizerEnabled) applyVisualizerMode(); showToast(t('settings.audio.device_changed'), 'success');