diff --git a/extension/audio-options.css b/extension/audio-options.css index cfd3d85..3e70dab 100644 --- a/extension/audio-options.css +++ b/extension/audio-options.css @@ -1,12 +1,27 @@ :root { - --bg: #0f172a; - --card: #1e293b; - --panel: #172033; - --accent: #6366f1; - --accent-hover: #818cf8; - --text: #f8fafc; - --text-muted: #94a3b8; - --border: #334155; + /* v3.0.0 "The Greens Update" nature palette (shared with the website) */ + --bg-base: oklch(0.20 0.025 140); + --surface: oklch(0.27 0.035 130); + --surface-deep: oklch(0.16 0.025 135); + --surface-alt: oklch(0.23 0.03 130); + --border-soft: rgba(255, 255, 255, 0.06); + --border-strong: oklch(0.32 0.03 125); + --text-primary: oklch(0.96 0.01 90); + --text-secondary: oklch(0.78 0.02 90); + --accent-green: oklch(0.68 0.13 150); + --accent-green-hover: oklch(0.75 0.13 150); + --accent-terracotta: oklch(0.62 0.14 45); + --danger: oklch(0.55 0.15 25); + --text-on-green: oklch(0.14 0.02 90); + + --bg: var(--bg-base); + --card: var(--surface); + --panel: var(--surface-alt); + --accent: var(--accent-green); + --accent-hover: var(--accent-green-hover); + --text: var(--text-primary); + --text-muted: var(--text-secondary); + --border: var(--border-strong); --radius: 8px; } @@ -125,12 +140,12 @@ h2 { transition: border-color 0.2s, box-shadow 0.2s; } .preset-card:hover { - border-color: rgba(99, 102, 241, 0.4); + border-color: rgba(86, 174, 108, 0.4); } .preset-card:has(input:checked) { border-color: var(--accent); - box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.35); + box-shadow: 0 0 0 1px rgba(86, 174, 108, 0.35); } .preset-card input { @@ -141,8 +156,8 @@ h2 { display: grid; gap: 12px; padding: 16px; - background: rgba(15, 23, 42, 0.58); - border: 1px solid rgba(148, 163, 184, 0.16); + background: rgba(16, 25, 14, 0.58); + border: 1px solid rgba(163, 162, 148, 0.16); border-radius: var(--radius); transition: opacity 0.3s; } @@ -204,7 +219,7 @@ input[type="number"]:focus { position: absolute; cursor: pointer; inset: 0; - background-color: #334155; + background-color: var(--border-strong); transition: .3s; border-radius: 22px; } @@ -216,7 +231,7 @@ input[type="number"]:focus { width: 16px; left: 3px; bottom: 3px; - background-color: #94a3b8; + background-color: var(--text-secondary); transition: .3s; border-radius: 50%; } diff --git a/extension/content.js b/extension/content.js index 6a12f7e..d148a64 100644 --- a/extension/content.js +++ b/extension/content.js @@ -430,7 +430,7 @@ const body = hcmEl('div', 'margin-bottom:12px;color:#d1d5db', hcmStrings.body); const btnRow = hcmEl('div', 'display:flex;gap:8px;justify-content:flex-end'); const soloBtn = hcmEl('button', 'background:#374151;color:#f9fafb;border:0;padding:8px 12px;border-radius:8px;cursor:pointer', hcmStrings.solo); - const stayBtn = hcmEl('button', 'background:#10b981;color:#062a20;border:0;padding:8px 12px;border-radius:8px;cursor:pointer;font-weight:600', hcmStrings.stay); + const stayBtn = hcmEl('button', 'background:#56ae6c;color:#0a1a0d;border:0;padding:8px 12px;border-radius:8px;cursor:pointer;font-weight:600', hcmStrings.stay); btnRow.append(soloBtn, stayBtn); wrap.append(title, body, btnRow); root.appendChild(wrap); diff --git a/extension/popup.html b/extension/popup.html index df2188c..f7cad49 100644 --- a/extension/popup.html +++ b/extension/popup.html @@ -12,14 +12,29 @@ } :root { - --bg: #0f172a; - --card: #1e293b; - --accent: #6366f1; - --accent-hover: #818cf8; - --text: #f8fafc; - --text-muted: #94a3b8; - --success: #22c55e; - --error: #ef4444; + /* v3.0.0 "The Greens Update" nature palette (shared with the website) */ + --bg-base: oklch(0.20 0.025 140); + --surface: oklch(0.27 0.035 130); + --surface-deep: oklch(0.16 0.025 135); + --surface-alt: oklch(0.23 0.03 130); + --border-soft: rgba(255, 255, 255, 0.06); + --border-strong: oklch(0.32 0.03 125); + --text-primary: oklch(0.96 0.01 90); + --text-secondary: oklch(0.78 0.02 90); + --accent-green: oklch(0.68 0.13 150); + --accent-green-hover: oklch(0.75 0.13 150); + --accent-terracotta: oklch(0.62 0.14 45); + --danger: oklch(0.55 0.15 25); + --text-on-green: oklch(0.14 0.02 90); + + --bg: var(--surface-deep); + --card: var(--surface); + --accent: var(--accent-green); + --accent-hover: var(--accent-green-hover); + --text: var(--text-primary); + --text-muted: var(--text-secondary); + --success: var(--accent-green); + --error: var(--danger); --radius: 12px; --star: #fbbf24; } @@ -103,7 +118,7 @@ .tab-btn.active { background: var(--accent); - color: white; + color: var(--text-on-green); } .tab-content { @@ -138,7 +153,7 @@ width: 100%; box-sizing: border-box; background: var(--card); - border: 1px solid #334155; + border: 1px solid var(--border-strong); color: white; padding: 10px; border-radius: 8px; @@ -153,7 +168,7 @@ } #langSelector::picker(select) { background-color: var(--bg); - border: 1px solid #334155; + border: 1px solid var(--border-strong); border-radius: 8px; padding: 4px; font-family: 'Twemoji Country Flags', inherit; @@ -162,7 +177,7 @@ input:focus { border-color: var(--accent); - box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2); + box-shadow: 0 0 0 2px rgba(86, 174, 108, 0.2); } button.primary { @@ -170,7 +185,7 @@ padding: 12px; background: var(--accent); border: none; - color: white; + color: var(--text-on-green); font-weight: 700; border-radius: 8px; cursor: pointer; @@ -186,7 +201,7 @@ button.secondary { width: 100%; padding: 10px; - background: #334155; + background: var(--border-strong); border: none; color: white; font-weight: 600; @@ -201,12 +216,12 @@ padding: 12px; border-radius: 8px; margin-bottom: 12px; - border: 1px solid #334155; + border: 1px solid var(--border-strong); } .peer-item { padding: 8px 0; - border-bottom: 1px solid #334155; + border-bottom: 1px solid var(--border-strong); } .peer-item:last-child { border: 0; } @@ -271,9 +286,9 @@ animation: toastSlideIn 0.3s ease-out, toastFadeOut 0.3s ease-in 2.7s forwards; box-shadow: 0 4px 12px rgba(0,0,0,0.3); } - .toast-success { background: var(--success); color: white; } + .toast-success { background: var(--success); color: var(--text-on-green); } .toast-error { background: var(--error); color: white; } - .toast-info { background: var(--accent); color: white; } + .toast-info { background: var(--accent); color: var(--text-on-green); } .toast-warning { background: #f59e0b; color: white; } @keyframes toastSlideIn { @@ -309,7 +324,7 @@ position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; - background-color: #334155; + background-color: var(--border-strong); transition: .3s; border-radius: 20px; } @@ -320,7 +335,7 @@ width: 14px; left: 3px; bottom: 3px; - background-color: #94a3b8; + background-color: #a3a294; transition: .3s; border-radius: 50%; } @@ -365,8 +380,8 @@ 50% { opacity: 1; transform: scale(1.3); } } @keyframes spotlightPulse { - 0%, 100% { box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.65), 0 0 0 0px var(--accent); } - 50% { box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.65), 0 0 0 6px var(--accent); } + 0%, 100% { box-shadow: 0 0 0 9999px rgba(16, 25, 14, 0.65), 0 0 0 0px var(--accent); } + 50% { box-shadow: 0 0 0 9999px rgba(16, 25, 14, 0.65), 0 0 0 6px var(--accent); } } @keyframes floatHint { 0%, 100% { transform: translateY(0); } @@ -399,12 +414,12 @@
- -
+ +
Manual Connect / Advanced
-
+
@@ -458,7 +473,7 @@ @@ -492,7 +507,7 @@ -
-
+
-
+
Privacy Settings
@@ -562,7 +577,7 @@
- @@ -570,7 +585,7 @@
-
+
-
+
-
+
-
+
-
+
- Open + Open
-
+
- @@ -710,10 +725,10 @@