mirror of
https://github.com/Shik3i/KoalaSync.git
synced 2026-08-09 18:59:48 +00:00
fix(extension): polish settings selects and dark palette
This commit is contained in:
Timo
@@ -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);
|
||||
|
||||
+29
-40
@@ -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 @@
|
||||
<label for="langSelector" data-i18n="LABEL_LANGUAGE" data-i18n-title="LABEL_LANGUAGE_TOOLTIP" title="Choose your preferred extension language">App Language</label>
|
||||
<span class="settings-select">
|
||||
<select id="langSelector" class="settings-control">
|
||||
<option value="en">English</option>
|
||||
<option value="de">Deutsch</option>
|
||||
<option value="fr">Français</option>
|
||||
<option value="es">Español</option>
|
||||
<option value="pt-BR">Português (Brasil)</option>
|
||||
<option value="ru">Русский</option>
|
||||
<option value="it">Italiano</option>
|
||||
<option value="pl">Polski</option>
|
||||
<option value="tr">Türkçe</option>
|
||||
<option value="nl">Nederlands</option>
|
||||
<option value="ja">日本語</option>
|
||||
<option value="ko">한국어</option>
|
||||
<option value="zh">中文</option>
|
||||
<option value="uk">Українська</option>
|
||||
<option value="pt">Português (Portugal)</option>
|
||||
<option value="en">🇬🇧 English</option>
|
||||
<option value="de">🇩🇪 Deutsch</option>
|
||||
<option value="fr">🇫🇷 Français</option>
|
||||
<option value="es">🇪🇸 Español</option>
|
||||
<option value="pt-BR">🇧🇷 Português (Brasil)</option>
|
||||
<option value="ru">🇷🇺 Русский</option>
|
||||
<option value="it">🇮🇹 Italiano</option>
|
||||
<option value="pl">🇵🇱 Polski</option>
|
||||
<option value="tr">🇹🇷 Türkçe</option>
|
||||
<option value="nl">🇳🇱 Nederlands</option>
|
||||
<option value="ja">🇯🇵 日本語</option>
|
||||
<option value="ko">🇰🇷 한국어</option>
|
||||
<option value="zh">🇨🇳 中文</option>
|
||||
<option value="uk">🇺🇦 Українська</option>
|
||||
<option value="pt">🇵🇹 Português (Portugal)</option>
|
||||
</select>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user