diff --git a/extension/audio-options.css b/extension/audio-options.css index 8176bf0..cfd3d85 100644 --- a/extension/audio-options.css +++ b/extension/audio-options.css @@ -37,6 +37,18 @@ body { margin-bottom: 18px; } +.back-link { + display: inline-block; + color: var(--text-muted); + text-decoration: none; + font-size: 12px; + margin-bottom: 6px; + transition: color 0.2s; +} +.back-link:hover { + color: var(--accent); +} + .eyebrow { margin: 0 0 4px; color: var(--text-muted); @@ -66,8 +78,9 @@ h2 { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); - padding: 18px; - margin-bottom: 14px; + padding: 20px; + margin-bottom: 16px; + box-shadow: 0 2px 8px rgba(0,0,0,0.15); } .muted-panel { @@ -109,6 +122,10 @@ h2 { border-radius: var(--radius); color: var(--text); cursor: pointer; + transition: border-color 0.2s, box-shadow 0.2s; +} +.preset-card:hover { + border-color: rgba(99, 102, 241, 0.4); } .preset-card:has(input:checked) { @@ -123,10 +140,11 @@ h2 { .custom-grid { display: grid; gap: 12px; - padding: 14px; + padding: 16px; background: rgba(15, 23, 42, 0.58); border: 1px solid rgba(148, 163, 184, 0.16); border-radius: var(--radius); + transition: opacity 0.3s; } .control-row { @@ -156,6 +174,11 @@ input[type="number"] { border-radius: var(--radius); color: var(--text); font: inherit; + transition: border-color 0.2s; +} +input[type="number"]:focus { + border-color: var(--accent); + outline: none; } .unit { diff --git a/extension/audio-options.html b/extension/audio-options.html index 7618a86..e88401a 100644 --- a/extension/audio-options.html +++ b/extension/audio-options.html @@ -9,6 +9,7 @@