diff --git a/extension/audio-options.css b/extension/audio-options.css
index 46ed508..7c3dc61 100644
--- a/extension/audio-options.css
+++ b/extension/audio-options.css
@@ -1,15 +1,15 @@
:root {
/* KoalaSync nature system: forest neutrals, eucalyptus brand, warm supporting accents. */
- --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);
+ --bg-base: oklch(0.23 0.028 155);
+ --surface: oklch(0.30 0.035 150);
+ --surface-deep: oklch(0.205 0.025 155);
+ --surface-alt: oklch(0.265 0.032 150);
+ --border-soft: oklch(0.88 0.025 145 / 0.09);
+ --border-strong: oklch(0.39 0.038 145);
--text-primary: oklch(0.96 0.01 90);
--text-secondary: oklch(0.78 0.02 90);
- --accent-green: oklch(0.68 0.13 155);
- --accent-green-hover: oklch(0.75 0.13 155);
+ --accent-green: oklch(0.73 0.13 155);
+ --accent-green-hover: oklch(0.79 0.12 155);
--accent-terracotta: oklch(0.62 0.14 45);
--success-green: oklch(0.72 0.14 135);
--warning-amber: oklch(0.76 0.14 80);
diff --git a/extension/popup.html b/extension/popup.html
index 48bfc70..5b877f3 100644
--- a/extension/popup.html
+++ b/extension/popup.html
@@ -14,16 +14,16 @@
:root {
/* KoalaSync nature system: forest neutrals, eucalyptus brand, warm supporting accents. */
- --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);
+ --bg-base: oklch(0.23 0.028 155);
+ --surface: oklch(0.30 0.035 150);
+ --surface-deep: oklch(0.205 0.025 155);
+ --surface-alt: oklch(0.265 0.032 150);
+ --border-soft: oklch(0.88 0.025 145 / 0.09);
+ --border-strong: oklch(0.39 0.038 145);
--text-primary: oklch(0.96 0.01 90);
--text-secondary: oklch(0.78 0.02 90);
- --accent-green: oklch(0.68 0.13 155);
- --accent-green-hover: oklch(0.75 0.13 155);
+ --accent-green: oklch(0.73 0.13 155);
+ --accent-green-hover: oklch(0.79 0.12 155);
--accent-terracotta: oklch(0.62 0.14 45);
--success-green: oklch(0.72 0.14 135);
--warning-amber: oklch(0.76 0.14 80);
@@ -205,20 +205,6 @@
transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
- @supports (appearance: base-select) {
- #langSelector,
- #langSelector::picker(select) {
- appearance: base-select;
- }
- #langSelector::picker(select) {
- background-color: var(--bg);
- border: 1px solid var(--border-strong);
- border-radius: 8px;
- padding: 4px;
- font-family: 'Twemoji Country Flags', inherit;
- }
- }
-
input:focus,
select:focus {
border-color: var(--accent);
@@ -697,8 +683,8 @@
.settings-control,
#tab-settings input[type="text"] {
width: 154px;
- height: 38px;
- min-height: 38px;
+ height: 40px;
+ min-height: 40px;
margin: 0;
border-radius: 9px;
border-color: var(--border-strong);
@@ -706,7 +692,7 @@
color: var(--text);
font-size: 12px;
font-weight: 600;
- line-height: normal;
+ line-height: 38px;
}
#tab-settings input[type="text"] {
padding: 0 11px;
@@ -729,8 +715,11 @@
}
.settings-select select {
appearance: none;
+ display: block;
padding: 0 32px 0 11px;
cursor: pointer;
+ text-align: left;
+ text-align-last: left;
}
.settings-row .toggle-switch {
justify-self: end;
@@ -1082,21 +1071,21 @@