From 0168484382939bcdce95c0cf2446ebae688b442d Mon Sep 17 00:00:00 2001 From: Timo <6156589+Shik3i@users.noreply.github.com> Date: Sun, 12 Jul 2026 13:04:23 +0200 Subject: [PATCH] style(extension): unify control system and accessibility --- extension/audio-options.css | 6 +-- extension/icons/pause.svg | 3 ++ extension/icons/play.svg | 3 ++ extension/icons/sync.svg | 3 ++ extension/locales/de.json | 6 +-- extension/locales/en.json | 6 +-- extension/locales/es.json | 6 +-- extension/locales/fr.json | 6 +-- extension/locales/it.json | 6 +-- extension/locales/ja.json | 6 +-- extension/locales/ko.json | 6 +-- extension/locales/nl.json | 6 +-- extension/locales/pl.json | 6 +-- extension/locales/pt-BR.json | 6 +-- extension/locales/pt.json | 6 +-- extension/locales/ru.json | 6 +-- extension/locales/tr.json | 6 +-- extension/locales/uk.json | 6 +-- extension/locales/zh.json | 6 +-- extension/popup.html | 99 +++++++++++++++++++++++++++++++----- extension/popup.js | 14 ++--- 21 files changed, 149 insertions(+), 69 deletions(-) create mode 100644 extension/icons/pause.svg create mode 100644 extension/icons/play.svg create mode 100644 extension/icons/sync.svg diff --git a/extension/audio-options.css b/extension/audio-options.css index e680ca8..8c3be91 100644 --- a/extension/audio-options.css +++ b/extension/audio-options.css @@ -88,7 +88,7 @@ body { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; - text-transform: uppercase; + letter-spacing: 0.04em; } h1, @@ -138,7 +138,7 @@ html.theme-light .panel { color: var(--text-muted); font-size: 12px; font-weight: 700; - text-transform: uppercase; + letter-spacing: 0.01em; } .preset-group { @@ -195,7 +195,7 @@ html.theme-light .panel { color: var(--text-muted); font-size: 11px; font-weight: 700; - text-transform: uppercase; + letter-spacing: 0.01em; } input[type="range"] { diff --git a/extension/icons/pause.svg b/extension/icons/pause.svg new file mode 100644 index 0000000..0b65dc4 --- /dev/null +++ b/extension/icons/pause.svg @@ -0,0 +1,3 @@ + + + diff --git a/extension/icons/play.svg b/extension/icons/play.svg new file mode 100644 index 0000000..f4239cf --- /dev/null +++ b/extension/icons/play.svg @@ -0,0 +1,3 @@ + + + diff --git a/extension/icons/sync.svg b/extension/icons/sync.svg new file mode 100644 index 0000000..fb41276 --- /dev/null +++ b/extension/icons/sync.svg @@ -0,0 +1,3 @@ + + + diff --git a/extension/locales/de.json b/extension/locales/de.json index 0772507..91e5136 100644 --- a/extension/locales/de.json +++ b/extension/locales/de.json @@ -70,11 +70,11 @@ "LABEL_REMOTE_CONTROL": "Fernsteuerung", "BTN_COPY_INVITE": "📋 Einladungslink", "BTN_COPY_INVITE_TOOLTIP": "Einladungslink kopieren", - "BTN_PLAY": "▶ Abspielen", + "BTN_PLAY": "Abspielen", "BTN_PLAY_TOOLTIP": "Sende einen Play-Befehl an alle", - "BTN_PAUSE": "⏸ Pause", + "BTN_PAUSE": "Pause", "BTN_PAUSE_TOOLTIP": "Sende einen Pause-Befehl an alle", - "BTN_SYNC": "⚡ Sync", + "BTN_SYNC": "Sync", "BTN_SYNC_TOOLTIP": "Erzwinge die Synchronisation aller Teilnehmer", "OPTION_JUMP_TO_OTHERS": "Zu anderen springen", "OPTION_JUMP_TO_ME": "Zu mir springen", diff --git a/extension/locales/en.json b/extension/locales/en.json index 99cfc54..ed99f04 100644 --- a/extension/locales/en.json +++ b/extension/locales/en.json @@ -70,11 +70,11 @@ "LABEL_REMOTE_CONTROL": "Remote Control", "BTN_COPY_INVITE": "📋 Invite Link", "BTN_COPY_INVITE_TOOLTIP": "Copy Invite Link", - "BTN_PLAY": "▶ Play", + "BTN_PLAY": "Play", "BTN_PLAY_TOOLTIP": "Send a Play command to everyone", - "BTN_PAUSE": "⏸ Pause", + "BTN_PAUSE": "Pause", "BTN_PAUSE_TOOLTIP": "Send a Pause command to everyone", - "BTN_SYNC": "⚡ Sync", + "BTN_SYNC": "Sync", "BTN_SYNC_TOOLTIP": "Force all users to sync up", "OPTION_JUMP_TO_OTHERS": "Jump to Others", "OPTION_JUMP_TO_ME": "Jump to Me", diff --git a/extension/locales/es.json b/extension/locales/es.json index 06051fd..b36643a 100644 --- a/extension/locales/es.json +++ b/extension/locales/es.json @@ -70,11 +70,11 @@ "LABEL_REMOTE_CONTROL": "Control remoto", "BTN_COPY_INVITE": "📋 Enlace de invitación", "BTN_COPY_INVITE_TOOLTIP": "Copiar enlace de invitación", - "BTN_PLAY": "▶ Reproducir", + "BTN_PLAY": "Reproducir", "BTN_PLAY_TOOLTIP": "Enviar un comando de reproducción a todos", - "BTN_PAUSE": "⏸ Pausar", + "BTN_PAUSE": "Pausar", "BTN_PAUSE_TOOLTIP": "Enviar un comando de pausa a todos", - "BTN_SYNC": "⚡ Sync", + "BTN_SYNC": "Sync", "BTN_SYNC_TOOLTIP": "Forzar la sincronización de todos los usuarios", "OPTION_JUMP_TO_OTHERS": "Ir a la posición de otros", "OPTION_JUMP_TO_ME": "Traerlos a mi posición", diff --git a/extension/locales/fr.json b/extension/locales/fr.json index b792225..13a9192 100644 --- a/extension/locales/fr.json +++ b/extension/locales/fr.json @@ -70,11 +70,11 @@ "LABEL_REMOTE_CONTROL": "Contrôle à distance", "BTN_COPY_INVITE": "📋 Lien d'invitation", "BTN_COPY_INVITE_TOOLTIP": "Copier le lien d'invitation", - "BTN_PLAY": "▶ Lecture", + "BTN_PLAY": "Lecture", "BTN_PLAY_TOOLTIP": "Envoyer une commande Lecture à tout le monde", - "BTN_PAUSE": "⏸ Pause", + "BTN_PAUSE": "Pause", "BTN_PAUSE_TOOLTIP": "Envoyer une commande Pause à tout le monde", - "BTN_SYNC": "⚡ Sync", + "BTN_SYNC": "Sync", "BTN_SYNC_TOOLTIP": "Forcer tous les utilisateurs à se synchroniser", "OPTION_JUMP_TO_OTHERS": "Rejoindre les autres", "OPTION_JUMP_TO_ME": "Les amener à moi", diff --git a/extension/locales/it.json b/extension/locales/it.json index 3aae11c..303524f 100644 --- a/extension/locales/it.json +++ b/extension/locales/it.json @@ -70,11 +70,11 @@ "LABEL_REMOTE_CONTROL": "Telecomando", "BTN_COPY_INVITE": "📋 Link di Invito", "BTN_COPY_INVITE_TOOLTIP": "Copia il link di invito", - "BTN_PLAY": "▶ Riproduci", + "BTN_PLAY": "Riproduci", "BTN_PLAY_TOOLTIP": "Avvia la riproduzione per tutti", - "BTN_PAUSE": "⏸ Pausa", + "BTN_PAUSE": "Pausa", "BTN_PAUSE_TOOLTIP": "Metti in pausa per tutti", - "BTN_SYNC": "⚡ Sincro", + "BTN_SYNC": "Sincro", "BTN_SYNC_TOOLTIP": "Forza la sincronizzazione per tutti", "OPTION_JUMP_TO_OTHERS": "Vai alla posizione degli altri", "OPTION_JUMP_TO_ME": "Portali alla mia posizione", diff --git a/extension/locales/ja.json b/extension/locales/ja.json index cc7124b..44ccc8e 100644 --- a/extension/locales/ja.json +++ b/extension/locales/ja.json @@ -70,11 +70,11 @@ "LABEL_REMOTE_CONTROL": "リモートコントロール", "BTN_COPY_INVITE": "📋 招待リンク", "BTN_COPY_INVITE_TOOLTIP": "招待リンクをコピー", - "BTN_PLAY": "▶ 再生", + "BTN_PLAY": "再生", "BTN_PLAY_TOOLTIP": "全員に再生コマンドを送信", - "BTN_PAUSE": "⏸ 一時停止", + "BTN_PAUSE": "一時停止", "BTN_PAUSE_TOOLTIP": "全員に一時停止コマンドを送信", - "BTN_SYNC": "⚡ 同期", + "BTN_SYNC": "同期", "BTN_SYNC_TOOLTIP": "すべてのユーザーを強制的に同期", "OPTION_JUMP_TO_OTHERS": "他の人に合わせる", "OPTION_JUMP_TO_ME": "自分に合わせる", diff --git a/extension/locales/ko.json b/extension/locales/ko.json index 2ad90ef..b0787c1 100644 --- a/extension/locales/ko.json +++ b/extension/locales/ko.json @@ -70,11 +70,11 @@ "LABEL_REMOTE_CONTROL": "원격 제어", "BTN_COPY_INVITE": "📋 초대 링크", "BTN_COPY_INVITE_TOOLTIP": "초대 링크 복사", - "BTN_PLAY": "▶ 재생", + "BTN_PLAY": "재생", "BTN_PLAY_TOOLTIP": "모든 사람에게 재생 명령 전송", - "BTN_PAUSE": "⏸ 일시정지", + "BTN_PAUSE": "일시정지", "BTN_PAUSE_TOOLTIP": "모든 사람에게 일시정지 명령 전송", - "BTN_SYNC": "⚡ 동기화", + "BTN_SYNC": "동기화", "BTN_SYNC_TOOLTIP": "모든 사용자의 강제 동기화", "OPTION_JUMP_TO_OTHERS": "다른 사람에게 이동", "OPTION_JUMP_TO_ME": "나에게 이동", diff --git a/extension/locales/nl.json b/extension/locales/nl.json index 4e7fd50..73316f7 100644 --- a/extension/locales/nl.json +++ b/extension/locales/nl.json @@ -70,11 +70,11 @@ "LABEL_REMOTE_CONTROL": "Afstandsbediening", "BTN_COPY_INVITE": "📋 Uitnodigingslink", "BTN_COPY_INVITE_TOOLTIP": "Uitnodigingslink kopiëren", - "BTN_PLAY": "▶ Afspelen", + "BTN_PLAY": "Afspelen", "BTN_PLAY_TOOLTIP": "Stuur een afspeelopdracht naar iedereen", - "BTN_PAUSE": "⏸ Pauzeren", + "BTN_PAUSE": "Pauzeren", "BTN_PAUSE_TOOLTIP": "Stuur een pauzeeropdracht naar iedereen", - "BTN_SYNC": "⚡ Sync", + "BTN_SYNC": "Sync", "BTN_SYNC_TOOLTIP": "Dwing alle gebruikers om te synchroniseren", "OPTION_JUMP_TO_OTHERS": "Spring naar anderen", "OPTION_JUMP_TO_ME": "Spring naar mij", diff --git a/extension/locales/pl.json b/extension/locales/pl.json index de4213d..47c45b0 100644 --- a/extension/locales/pl.json +++ b/extension/locales/pl.json @@ -70,11 +70,11 @@ "LABEL_REMOTE_CONTROL": "Zdalne sterowanie", "BTN_COPY_INVITE": "📋 Link do zaproszenia", "BTN_COPY_INVITE_TOOLTIP": "Kopiuj link zaproszenia", - "BTN_PLAY": "▶ Odtwórz", + "BTN_PLAY": "Odtwórz", "BTN_PLAY_TOOLTIP": "Wyślij polecenie odtwarzania do wszystkich", - "BTN_PAUSE": "⏸ Pauza", + "BTN_PAUSE": "Pauza", "BTN_PAUSE_TOOLTIP": "Wyślij polecenie pauzy do wszystkich", - "BTN_SYNC": "⚡ Sync", + "BTN_SYNC": "Sync", "BTN_SYNC_TOOLTIP": "Wymuś synchronizację wszystkich użytkowników", "OPTION_JUMP_TO_OTHERS": "Skocz do innych", "OPTION_JUMP_TO_ME": "Skocz do mnie", diff --git a/extension/locales/pt-BR.json b/extension/locales/pt-BR.json index 4b20210..37c2fa0 100644 --- a/extension/locales/pt-BR.json +++ b/extension/locales/pt-BR.json @@ -70,11 +70,11 @@ "LABEL_REMOTE_CONTROL": "Controle remoto", "BTN_COPY_INVITE": "📋 Link de convite", "BTN_COPY_INVITE_TOOLTIP": "Copiar link de convite", - "BTN_PLAY": "▶ Reproduzir", + "BTN_PLAY": "Reproduzir", "BTN_PLAY_TOOLTIP": "Iniciar a reprodução para todos", - "BTN_PAUSE": "⏸ Pausar", + "BTN_PAUSE": "Pausar", "BTN_PAUSE_TOOLTIP": "Pausar o vídeo para todos", - "BTN_SYNC": "⚡ Sincro", + "BTN_SYNC": "Sincro", "BTN_SYNC_TOOLTIP": "Forçar todos os usuários a sincronizar", "OPTION_JUMP_TO_OTHERS": "Ir para a posição dos outros", "OPTION_JUMP_TO_ME": "Trazer para a minha posição", diff --git a/extension/locales/pt.json b/extension/locales/pt.json index 21d22a0..623cdba 100644 --- a/extension/locales/pt.json +++ b/extension/locales/pt.json @@ -70,11 +70,11 @@ "LABEL_REMOTE_CONTROL": "Controlo Remoto", "BTN_COPY_INVITE": "📋 Link de Convite", "BTN_COPY_INVITE_TOOLTIP": "Copiar Link de Convite", - "BTN_PLAY": "▶ Reproduzir", + "BTN_PLAY": "Reproduzir", "BTN_PLAY_TOOLTIP": "Iniciar a reprodução para todos", - "BTN_PAUSE": "⏸ Pausa", + "BTN_PAUSE": "Pausa", "BTN_PAUSE_TOOLTIP": "Pausar o vídeo para todos", - "BTN_SYNC": "⚡ Sincro", + "BTN_SYNC": "Sincro", "BTN_SYNC_TOOLTIP": "Forçar sincronização de todos os utilizadores", "OPTION_JUMP_TO_OTHERS": "Ir para a posição dos outros", "OPTION_JUMP_TO_ME": "Trazer para a minha posição", diff --git a/extension/locales/ru.json b/extension/locales/ru.json index 9e6521a..48ce4fc 100644 --- a/extension/locales/ru.json +++ b/extension/locales/ru.json @@ -70,11 +70,11 @@ "LABEL_REMOTE_CONTROL": "Дистанционное управление", "BTN_COPY_INVITE": "📋 Ссылка", "BTN_COPY_INVITE_TOOLTIP": "Копировать ссылку-приглашение", - "BTN_PLAY": "▶ Запуск", + "BTN_PLAY": "Запуск", "BTN_PLAY_TOOLTIP": "Отправить команду воспроизведения всем", - "BTN_PAUSE": "⏸ Пауза", + "BTN_PAUSE": "Пауза", "BTN_PAUSE_TOOLTIP": "Отправить команду паузы всем", - "BTN_SYNC": "⚡ Синхро", + "BTN_SYNC": "Синхро", "BTN_SYNC_TOOLTIP": "Принудительно синхронизировать всех участников", "OPTION_JUMP_TO_OTHERS": "Перейти к другим", "OPTION_JUMP_TO_ME": "Синхронизировать по мне", diff --git a/extension/locales/tr.json b/extension/locales/tr.json index 6e6c7fc..74bae81 100644 --- a/extension/locales/tr.json +++ b/extension/locales/tr.json @@ -70,11 +70,11 @@ "LABEL_REMOTE_CONTROL": "Uzaktan Kumanda", "BTN_COPY_INVITE": "📋 Davet Linki", "BTN_COPY_INVITE_TOOLTIP": "Davet Linkini Kopyala", - "BTN_PLAY": "▶ Oynat", + "BTN_PLAY": "Oynat", "BTN_PLAY_TOOLTIP": "Herkese Oynat komutu gönder", - "BTN_PAUSE": "⏸ Duraklat", + "BTN_PAUSE": "Duraklat", "BTN_PAUSE_TOOLTIP": "Herkese Duraklat komutu gönder", - "BTN_SYNC": "⚡ Sync", + "BTN_SYNC": "Sync", "BTN_SYNC_TOOLTIP": "Tüm kullanıcıları senkronize etmeye zorla", "OPTION_JUMP_TO_OTHERS": "Diğerlerine Atla", "OPTION_JUMP_TO_ME": "Bana Atla", diff --git a/extension/locales/uk.json b/extension/locales/uk.json index a401dc0..cf9f97f 100644 --- a/extension/locales/uk.json +++ b/extension/locales/uk.json @@ -70,11 +70,11 @@ "LABEL_REMOTE_CONTROL": "Пульт дистанційного керування", "BTN_COPY_INVITE": "📋 Посилання на запрошення", "BTN_COPY_INVITE_TOOLTIP": "Копіювати посилання для запрошення", - "BTN_PLAY": "▶ Відтворити", + "BTN_PLAY": "Відтворити", "BTN_PLAY_TOOLTIP": "Надішліть усім команду Play", - "BTN_PAUSE": "⏸ Пауза", + "BTN_PAUSE": "Пауза", "BTN_PAUSE_TOOLTIP": "Надішліть команду паузи всім", - "BTN_SYNC": "⚡ Синхр", + "BTN_SYNC": "Синхр", "BTN_SYNC_TOOLTIP": "Змусити всіх користувачів синхронізуватися", "OPTION_JUMP_TO_OTHERS": "Перейти до інших", "OPTION_JUMP_TO_ME": "Перейти до мене", diff --git a/extension/locales/zh.json b/extension/locales/zh.json index 80bd2d7..5ee51a5 100644 --- a/extension/locales/zh.json +++ b/extension/locales/zh.json @@ -70,11 +70,11 @@ "LABEL_REMOTE_CONTROL": "遥控", "BTN_COPY_INVITE": "📋 邀请链接", "BTN_COPY_INVITE_TOOLTIP": "复制邀请链接", - "BTN_PLAY": "▶ 播放", + "BTN_PLAY": "播放", "BTN_PLAY_TOOLTIP": "向所有人发送播放命令", - "BTN_PAUSE": "⏸ 暂停", + "BTN_PAUSE": "暂停", "BTN_PAUSE_TOOLTIP": "向所有人发送暂停命令", - "BTN_SYNC": "⚡ 同步", + "BTN_SYNC": "同步", "BTN_SYNC_TOOLTIP": "强制所有用户同步", "OPTION_JUMP_TO_OTHERS": "跳转到其他", "OPTION_JUMP_TO_ME": "跳到我这里", diff --git a/extension/popup.html b/extension/popup.html index 287d7d3..3461a8a 100644 --- a/extension/popup.html +++ b/extension/popup.html @@ -192,11 +192,11 @@ label { display: block; - font-size: 11px; - text-transform: uppercase; + font-size: 12px; color: var(--text-muted); margin-bottom: 4px; - font-weight: 700; + font-weight: 650; + letter-spacing: 0.01em; } input, select, option { @@ -340,7 +340,7 @@ .badge { display: inline-block; padding: 2px 6px; - font-size: 9px; + font-size: 10px; font-weight: 700; text-transform: uppercase; border-radius: 6px; @@ -566,6 +566,10 @@ transform: translateX(16px); background-color: white; } + .toggle-switch:has(input:focus-visible) .slider { + outline: 2px solid var(--accent-hover); + outline-offset: 3px; + } .popup-footer { margin-top: 16px; padding: 11px 2px 2px; @@ -577,7 +581,7 @@ } .footer-review { flex: none; - min-height: 26px; + min-height: 30px; display: inline-flex; align-items: center; padding: 4px 8px; @@ -585,7 +589,7 @@ border-radius: 7px; background: color-mix(in oklch, var(--warning), transparent 91%); color: var(--status-warning-text) !important; - font-size: 10px; + font-size: 11px; font-weight: 700; } .footer-links { @@ -594,12 +598,12 @@ gap: 4px; } .footer-links a { - min-height: 26px; + min-height: 30px; display: inline-flex; align-items: center; padding: 4px 7px; border-radius: 6px; - font-size: 10px; + font-size: 11px; font-weight: 600; } .footer-links a:hover { @@ -717,6 +721,64 @@ letter-spacing: 0; text-transform: none; } + + .transport-actions, + .sync-actions { + display: flex; + gap: 8px; + margin-bottom: 12px; + } + .sync-actions { + margin-bottom: 15px; + align-items: stretch; + } + .transport-actions .primary, + .sync-actions .primary { + flex: 1; + margin-top: 0; + border: 1px solid transparent; + } + #playBtn { + background: var(--accent); + color: var(--text-on-green); + } + #pauseBtn { + background: var(--surface-alt); + border-color: var(--border-strong); + color: var(--text); + } + #pauseBtn:hover { + background: color-mix(in oklch, var(--surface-alt), var(--text) 7%); + } + #forceSyncBtn { + background: transparent; + border-color: color-mix(in oklch, var(--accent), transparent 42%); + color: var(--accent-hover); + } + #forceSyncBtn:hover { + background: color-mix(in oklch, var(--accent), transparent 88%); + } + .action-icon::before { + content: ""; + width: 13px; + height: 13px; + display: inline-block; + margin-right: 6px; + vertical-align: -2px; + background: currentColor; + mask-position: center; + mask-repeat: no-repeat; + mask-size: contain; + } + #playBtn::before { + mask-image: url("icons/play.svg"); + } + #pauseBtn::before { + mask-image: url("icons/pause.svg"); + } + #forceSyncBtn::before { + mask-image: url("icons/sync.svg"); + } .settings-control, #tab-settings input[type="text"] { width: 154px; @@ -789,7 +851,7 @@ background: transparent; color: var(--text-muted); font-family: inherit; - font-size: 9px; + font-size: 10px; font-weight: 700; line-height: 1; cursor: pointer; @@ -803,6 +865,15 @@ color: var(--text); box-shadow: 0 1px 5px oklch(0.08 0.02 150 / 0.32), inset 0 0 0 1px var(--border-soft); } + .tab-btn[data-tab="tab-dev"], + #devToolsTabBtn { + color: color-mix(in oklch, var(--text-muted), transparent 18%); + font-size: 11px; + } + .tab-btn[data-tab="tab-dev"].active, + #devToolsTabBtn.active { + color: var(--text-on-green); + } .settings-row .toggle-switch { justify-self: end; margin: 0 2px 0 0; @@ -1086,13 +1157,13 @@ -
- - +
+ +
-
- +
+