style(extension): unify control system and accessibility

This commit is contained in:
Timo
2026-07-12 13:04:23 +02:00
parent 99ecf9c9a8
commit 0168484382
21 changed files with 149 additions and 69 deletions
+3 -3
View File
@@ -88,7 +88,7 @@ body {
font-size: 11px; font-size: 11px;
font-weight: 700; font-weight: 700;
letter-spacing: 0.08em; letter-spacing: 0.08em;
text-transform: uppercase; letter-spacing: 0.04em;
} }
h1, h1,
@@ -138,7 +138,7 @@ html.theme-light .panel {
color: var(--text-muted); color: var(--text-muted);
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.01em;
} }
.preset-group { .preset-group {
@@ -195,7 +195,7 @@ html.theme-light .panel {
color: var(--text-muted); color: var(--text-muted);
font-size: 11px; font-size: 11px;
font-weight: 700; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.01em;
} }
input[type="range"] { input[type="range"] {
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path d="M3 2.5h4v11H3zm6 0h4v11H9z"/>
</svg>

After

Width:  |  Height:  |  Size: 109 B

+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path d="M4 2.6v10.8L13 8z"/>
</svg>

After

Width:  |  Height:  |  Size: 100 B

+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path d="M13.4 5.5A5.8 5.8 0 0 0 3 4.2L1.7 2.9v4.4h4.4L4.4 5.6a4 4 0 0 1 7.2.8zM2.6 10.5A5.8 5.8 0 0 0 13 11.8l1.3 1.3V8.7H9.9l1.7 1.7a4 4 0 0 1-7.2-.8z"/>
</svg>

After

Width:  |  Height:  |  Size: 226 B

+3 -3
View File
@@ -70,11 +70,11 @@
"LABEL_REMOTE_CONTROL": "Fernsteuerung", "LABEL_REMOTE_CONTROL": "Fernsteuerung",
"BTN_COPY_INVITE": "📋 Einladungslink", "BTN_COPY_INVITE": "📋 Einladungslink",
"BTN_COPY_INVITE_TOOLTIP": "Einladungslink kopieren", "BTN_COPY_INVITE_TOOLTIP": "Einladungslink kopieren",
"BTN_PLAY": "Abspielen", "BTN_PLAY": "Abspielen",
"BTN_PLAY_TOOLTIP": "Sende einen Play-Befehl an alle", "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_PAUSE_TOOLTIP": "Sende einen Pause-Befehl an alle",
"BTN_SYNC": "Sync", "BTN_SYNC": "Sync",
"BTN_SYNC_TOOLTIP": "Erzwinge die Synchronisation aller Teilnehmer", "BTN_SYNC_TOOLTIP": "Erzwinge die Synchronisation aller Teilnehmer",
"OPTION_JUMP_TO_OTHERS": "Zu anderen springen", "OPTION_JUMP_TO_OTHERS": "Zu anderen springen",
"OPTION_JUMP_TO_ME": "Zu mir springen", "OPTION_JUMP_TO_ME": "Zu mir springen",
+3 -3
View File
@@ -70,11 +70,11 @@
"LABEL_REMOTE_CONTROL": "Remote Control", "LABEL_REMOTE_CONTROL": "Remote Control",
"BTN_COPY_INVITE": "📋 Invite Link", "BTN_COPY_INVITE": "📋 Invite Link",
"BTN_COPY_INVITE_TOOLTIP": "Copy 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_PLAY_TOOLTIP": "Send a Play command to everyone",
"BTN_PAUSE": "Pause", "BTN_PAUSE": "Pause",
"BTN_PAUSE_TOOLTIP": "Send a Pause command to everyone", "BTN_PAUSE_TOOLTIP": "Send a Pause command to everyone",
"BTN_SYNC": "Sync", "BTN_SYNC": "Sync",
"BTN_SYNC_TOOLTIP": "Force all users to sync up", "BTN_SYNC_TOOLTIP": "Force all users to sync up",
"OPTION_JUMP_TO_OTHERS": "Jump to Others", "OPTION_JUMP_TO_OTHERS": "Jump to Others",
"OPTION_JUMP_TO_ME": "Jump to Me", "OPTION_JUMP_TO_ME": "Jump to Me",
+3 -3
View File
@@ -70,11 +70,11 @@
"LABEL_REMOTE_CONTROL": "Control remoto", "LABEL_REMOTE_CONTROL": "Control remoto",
"BTN_COPY_INVITE": "📋 Enlace de invitación", "BTN_COPY_INVITE": "📋 Enlace de invitación",
"BTN_COPY_INVITE_TOOLTIP": "Copiar 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_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_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", "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_OTHERS": "Ir a la posición de otros",
"OPTION_JUMP_TO_ME": "Traerlos a mi posición", "OPTION_JUMP_TO_ME": "Traerlos a mi posición",
+3 -3
View File
@@ -70,11 +70,11 @@
"LABEL_REMOTE_CONTROL": "Contrôle à distance", "LABEL_REMOTE_CONTROL": "Contrôle à distance",
"BTN_COPY_INVITE": "📋 Lien d'invitation", "BTN_COPY_INVITE": "📋 Lien d'invitation",
"BTN_COPY_INVITE_TOOLTIP": "Copier le 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_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_PAUSE_TOOLTIP": "Envoyer une commande Pause à tout le monde",
"BTN_SYNC": "Sync", "BTN_SYNC": "Sync",
"BTN_SYNC_TOOLTIP": "Forcer tous les utilisateurs à se synchroniser", "BTN_SYNC_TOOLTIP": "Forcer tous les utilisateurs à se synchroniser",
"OPTION_JUMP_TO_OTHERS": "Rejoindre les autres", "OPTION_JUMP_TO_OTHERS": "Rejoindre les autres",
"OPTION_JUMP_TO_ME": "Les amener à moi", "OPTION_JUMP_TO_ME": "Les amener à moi",
+3 -3
View File
@@ -70,11 +70,11 @@
"LABEL_REMOTE_CONTROL": "Telecomando", "LABEL_REMOTE_CONTROL": "Telecomando",
"BTN_COPY_INVITE": "📋 Link di Invito", "BTN_COPY_INVITE": "📋 Link di Invito",
"BTN_COPY_INVITE_TOOLTIP": "Copia il 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_PLAY_TOOLTIP": "Avvia la riproduzione per tutti",
"BTN_PAUSE": "Pausa", "BTN_PAUSE": "Pausa",
"BTN_PAUSE_TOOLTIP": "Metti in pausa per tutti", "BTN_PAUSE_TOOLTIP": "Metti in pausa per tutti",
"BTN_SYNC": "Sincro", "BTN_SYNC": "Sincro",
"BTN_SYNC_TOOLTIP": "Forza la sincronizzazione per tutti", "BTN_SYNC_TOOLTIP": "Forza la sincronizzazione per tutti",
"OPTION_JUMP_TO_OTHERS": "Vai alla posizione degli altri", "OPTION_JUMP_TO_OTHERS": "Vai alla posizione degli altri",
"OPTION_JUMP_TO_ME": "Portali alla mia posizione", "OPTION_JUMP_TO_ME": "Portali alla mia posizione",
+3 -3
View File
@@ -70,11 +70,11 @@
"LABEL_REMOTE_CONTROL": "リモートコントロール", "LABEL_REMOTE_CONTROL": "リモートコントロール",
"BTN_COPY_INVITE": "📋 招待リンク", "BTN_COPY_INVITE": "📋 招待リンク",
"BTN_COPY_INVITE_TOOLTIP": "招待リンクをコピー", "BTN_COPY_INVITE_TOOLTIP": "招待リンクをコピー",
"BTN_PLAY": "再生", "BTN_PLAY": "再生",
"BTN_PLAY_TOOLTIP": "全員に再生コマンドを送信", "BTN_PLAY_TOOLTIP": "全員に再生コマンドを送信",
"BTN_PAUSE": "一時停止", "BTN_PAUSE": "一時停止",
"BTN_PAUSE_TOOLTIP": "全員に一時停止コマンドを送信", "BTN_PAUSE_TOOLTIP": "全員に一時停止コマンドを送信",
"BTN_SYNC": "同期", "BTN_SYNC": "同期",
"BTN_SYNC_TOOLTIP": "すべてのユーザーを強制的に同期", "BTN_SYNC_TOOLTIP": "すべてのユーザーを強制的に同期",
"OPTION_JUMP_TO_OTHERS": "他の人に合わせる", "OPTION_JUMP_TO_OTHERS": "他の人に合わせる",
"OPTION_JUMP_TO_ME": "自分に合わせる", "OPTION_JUMP_TO_ME": "自分に合わせる",
+3 -3
View File
@@ -70,11 +70,11 @@
"LABEL_REMOTE_CONTROL": "원격 제어", "LABEL_REMOTE_CONTROL": "원격 제어",
"BTN_COPY_INVITE": "📋 초대 링크", "BTN_COPY_INVITE": "📋 초대 링크",
"BTN_COPY_INVITE_TOOLTIP": "초대 링크 복사", "BTN_COPY_INVITE_TOOLTIP": "초대 링크 복사",
"BTN_PLAY": "재생", "BTN_PLAY": "재생",
"BTN_PLAY_TOOLTIP": "모든 사람에게 재생 명령 전송", "BTN_PLAY_TOOLTIP": "모든 사람에게 재생 명령 전송",
"BTN_PAUSE": "일시정지", "BTN_PAUSE": "일시정지",
"BTN_PAUSE_TOOLTIP": "모든 사람에게 일시정지 명령 전송", "BTN_PAUSE_TOOLTIP": "모든 사람에게 일시정지 명령 전송",
"BTN_SYNC": "동기화", "BTN_SYNC": "동기화",
"BTN_SYNC_TOOLTIP": "모든 사용자의 강제 동기화", "BTN_SYNC_TOOLTIP": "모든 사용자의 강제 동기화",
"OPTION_JUMP_TO_OTHERS": "다른 사람에게 이동", "OPTION_JUMP_TO_OTHERS": "다른 사람에게 이동",
"OPTION_JUMP_TO_ME": "나에게 이동", "OPTION_JUMP_TO_ME": "나에게 이동",
+3 -3
View File
@@ -70,11 +70,11 @@
"LABEL_REMOTE_CONTROL": "Afstandsbediening", "LABEL_REMOTE_CONTROL": "Afstandsbediening",
"BTN_COPY_INVITE": "📋 Uitnodigingslink", "BTN_COPY_INVITE": "📋 Uitnodigingslink",
"BTN_COPY_INVITE_TOOLTIP": "Uitnodigingslink kopiëren", "BTN_COPY_INVITE_TOOLTIP": "Uitnodigingslink kopiëren",
"BTN_PLAY": "Afspelen", "BTN_PLAY": "Afspelen",
"BTN_PLAY_TOOLTIP": "Stuur een afspeelopdracht naar iedereen", "BTN_PLAY_TOOLTIP": "Stuur een afspeelopdracht naar iedereen",
"BTN_PAUSE": "Pauzeren", "BTN_PAUSE": "Pauzeren",
"BTN_PAUSE_TOOLTIP": "Stuur een pauzeeropdracht naar iedereen", "BTN_PAUSE_TOOLTIP": "Stuur een pauzeeropdracht naar iedereen",
"BTN_SYNC": "Sync", "BTN_SYNC": "Sync",
"BTN_SYNC_TOOLTIP": "Dwing alle gebruikers om te synchroniseren", "BTN_SYNC_TOOLTIP": "Dwing alle gebruikers om te synchroniseren",
"OPTION_JUMP_TO_OTHERS": "Spring naar anderen", "OPTION_JUMP_TO_OTHERS": "Spring naar anderen",
"OPTION_JUMP_TO_ME": "Spring naar mij", "OPTION_JUMP_TO_ME": "Spring naar mij",
+3 -3
View File
@@ -70,11 +70,11 @@
"LABEL_REMOTE_CONTROL": "Zdalne sterowanie", "LABEL_REMOTE_CONTROL": "Zdalne sterowanie",
"BTN_COPY_INVITE": "📋 Link do zaproszenia", "BTN_COPY_INVITE": "📋 Link do zaproszenia",
"BTN_COPY_INVITE_TOOLTIP": "Kopiuj link 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_PLAY_TOOLTIP": "Wyślij polecenie odtwarzania do wszystkich",
"BTN_PAUSE": "Pauza", "BTN_PAUSE": "Pauza",
"BTN_PAUSE_TOOLTIP": "Wyślij polecenie pauzy do wszystkich", "BTN_PAUSE_TOOLTIP": "Wyślij polecenie pauzy do wszystkich",
"BTN_SYNC": "Sync", "BTN_SYNC": "Sync",
"BTN_SYNC_TOOLTIP": "Wymuś synchronizację wszystkich użytkowników", "BTN_SYNC_TOOLTIP": "Wymuś synchronizację wszystkich użytkowników",
"OPTION_JUMP_TO_OTHERS": "Skocz do innych", "OPTION_JUMP_TO_OTHERS": "Skocz do innych",
"OPTION_JUMP_TO_ME": "Skocz do mnie", "OPTION_JUMP_TO_ME": "Skocz do mnie",
+3 -3
View File
@@ -70,11 +70,11 @@
"LABEL_REMOTE_CONTROL": "Controle remoto", "LABEL_REMOTE_CONTROL": "Controle remoto",
"BTN_COPY_INVITE": "📋 Link de convite", "BTN_COPY_INVITE": "📋 Link de convite",
"BTN_COPY_INVITE_TOOLTIP": "Copiar 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_PLAY_TOOLTIP": "Iniciar a reprodução para todos",
"BTN_PAUSE": "Pausar", "BTN_PAUSE": "Pausar",
"BTN_PAUSE_TOOLTIP": "Pausar o vídeo para todos", "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", "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_OTHERS": "Ir para a posição dos outros",
"OPTION_JUMP_TO_ME": "Trazer para a minha posição", "OPTION_JUMP_TO_ME": "Trazer para a minha posição",
+3 -3
View File
@@ -70,11 +70,11 @@
"LABEL_REMOTE_CONTROL": "Controlo Remoto", "LABEL_REMOTE_CONTROL": "Controlo Remoto",
"BTN_COPY_INVITE": "📋 Link de Convite", "BTN_COPY_INVITE": "📋 Link de Convite",
"BTN_COPY_INVITE_TOOLTIP": "Copiar 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_PLAY_TOOLTIP": "Iniciar a reprodução para todos",
"BTN_PAUSE": "Pausa", "BTN_PAUSE": "Pausa",
"BTN_PAUSE_TOOLTIP": "Pausar o vídeo para todos", "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", "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_OTHERS": "Ir para a posição dos outros",
"OPTION_JUMP_TO_ME": "Trazer para a minha posição", "OPTION_JUMP_TO_ME": "Trazer para a minha posição",
+3 -3
View File
@@ -70,11 +70,11 @@
"LABEL_REMOTE_CONTROL": "Дистанционное управление", "LABEL_REMOTE_CONTROL": "Дистанционное управление",
"BTN_COPY_INVITE": "📋 Ссылка", "BTN_COPY_INVITE": "📋 Ссылка",
"BTN_COPY_INVITE_TOOLTIP": "Копировать ссылку-приглашение", "BTN_COPY_INVITE_TOOLTIP": "Копировать ссылку-приглашение",
"BTN_PLAY": "Запуск", "BTN_PLAY": "Запуск",
"BTN_PLAY_TOOLTIP": "Отправить команду воспроизведения всем", "BTN_PLAY_TOOLTIP": "Отправить команду воспроизведения всем",
"BTN_PAUSE": "Пауза", "BTN_PAUSE": "Пауза",
"BTN_PAUSE_TOOLTIP": "Отправить команду паузы всем", "BTN_PAUSE_TOOLTIP": "Отправить команду паузы всем",
"BTN_SYNC": "Синхро", "BTN_SYNC": "Синхро",
"BTN_SYNC_TOOLTIP": "Принудительно синхронизировать всех участников", "BTN_SYNC_TOOLTIP": "Принудительно синхронизировать всех участников",
"OPTION_JUMP_TO_OTHERS": "Перейти к другим", "OPTION_JUMP_TO_OTHERS": "Перейти к другим",
"OPTION_JUMP_TO_ME": "Синхронизировать по мне", "OPTION_JUMP_TO_ME": "Синхронизировать по мне",
+3 -3
View File
@@ -70,11 +70,11 @@
"LABEL_REMOTE_CONTROL": "Uzaktan Kumanda", "LABEL_REMOTE_CONTROL": "Uzaktan Kumanda",
"BTN_COPY_INVITE": "📋 Davet Linki", "BTN_COPY_INVITE": "📋 Davet Linki",
"BTN_COPY_INVITE_TOOLTIP": "Davet Linkini Kopyala", "BTN_COPY_INVITE_TOOLTIP": "Davet Linkini Kopyala",
"BTN_PLAY": "Oynat", "BTN_PLAY": "Oynat",
"BTN_PLAY_TOOLTIP": "Herkese Oynat komutu gönder", "BTN_PLAY_TOOLTIP": "Herkese Oynat komutu gönder",
"BTN_PAUSE": "Duraklat", "BTN_PAUSE": "Duraklat",
"BTN_PAUSE_TOOLTIP": "Herkese Duraklat komutu gönder", "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", "BTN_SYNC_TOOLTIP": "Tüm kullanıcıları senkronize etmeye zorla",
"OPTION_JUMP_TO_OTHERS": "Diğerlerine Atla", "OPTION_JUMP_TO_OTHERS": "Diğerlerine Atla",
"OPTION_JUMP_TO_ME": "Bana Atla", "OPTION_JUMP_TO_ME": "Bana Atla",
+3 -3
View File
@@ -70,11 +70,11 @@
"LABEL_REMOTE_CONTROL": "Пульт дистанційного керування", "LABEL_REMOTE_CONTROL": "Пульт дистанційного керування",
"BTN_COPY_INVITE": "📋 Посилання на запрошення", "BTN_COPY_INVITE": "📋 Посилання на запрошення",
"BTN_COPY_INVITE_TOOLTIP": "Копіювати посилання для запрошення", "BTN_COPY_INVITE_TOOLTIP": "Копіювати посилання для запрошення",
"BTN_PLAY": "Відтворити", "BTN_PLAY": "Відтворити",
"BTN_PLAY_TOOLTIP": "Надішліть усім команду Play", "BTN_PLAY_TOOLTIP": "Надішліть усім команду Play",
"BTN_PAUSE": "Пауза", "BTN_PAUSE": "Пауза",
"BTN_PAUSE_TOOLTIP": "Надішліть команду паузи всім", "BTN_PAUSE_TOOLTIP": "Надішліть команду паузи всім",
"BTN_SYNC": "Синхр", "BTN_SYNC": "Синхр",
"BTN_SYNC_TOOLTIP": "Змусити всіх користувачів синхронізуватися", "BTN_SYNC_TOOLTIP": "Змусити всіх користувачів синхронізуватися",
"OPTION_JUMP_TO_OTHERS": "Перейти до інших", "OPTION_JUMP_TO_OTHERS": "Перейти до інших",
"OPTION_JUMP_TO_ME": "Перейти до мене", "OPTION_JUMP_TO_ME": "Перейти до мене",
+3 -3
View File
@@ -70,11 +70,11 @@
"LABEL_REMOTE_CONTROL": "遥控", "LABEL_REMOTE_CONTROL": "遥控",
"BTN_COPY_INVITE": "📋 邀请链接", "BTN_COPY_INVITE": "📋 邀请链接",
"BTN_COPY_INVITE_TOOLTIP": "复制邀请链接", "BTN_COPY_INVITE_TOOLTIP": "复制邀请链接",
"BTN_PLAY": "播放", "BTN_PLAY": "播放",
"BTN_PLAY_TOOLTIP": "向所有人发送播放命令", "BTN_PLAY_TOOLTIP": "向所有人发送播放命令",
"BTN_PAUSE": "暂停", "BTN_PAUSE": "暂停",
"BTN_PAUSE_TOOLTIP": "向所有人发送暂停命令", "BTN_PAUSE_TOOLTIP": "向所有人发送暂停命令",
"BTN_SYNC": "同步", "BTN_SYNC": "同步",
"BTN_SYNC_TOOLTIP": "强制所有用户同步", "BTN_SYNC_TOOLTIP": "强制所有用户同步",
"OPTION_JUMP_TO_OTHERS": "跳转到其他", "OPTION_JUMP_TO_OTHERS": "跳转到其他",
"OPTION_JUMP_TO_ME": "跳到我这里", "OPTION_JUMP_TO_ME": "跳到我这里",
+85 -14
View File
@@ -192,11 +192,11 @@
label { label {
display: block; display: block;
font-size: 11px; font-size: 12px;
text-transform: uppercase;
color: var(--text-muted); color: var(--text-muted);
margin-bottom: 4px; margin-bottom: 4px;
font-weight: 700; font-weight: 650;
letter-spacing: 0.01em;
} }
input, select, option { input, select, option {
@@ -340,7 +340,7 @@
.badge { .badge {
display: inline-block; display: inline-block;
padding: 2px 6px; padding: 2px 6px;
font-size: 9px; font-size: 10px;
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
border-radius: 6px; border-radius: 6px;
@@ -566,6 +566,10 @@
transform: translateX(16px); transform: translateX(16px);
background-color: white; background-color: white;
} }
.toggle-switch:has(input:focus-visible) .slider {
outline: 2px solid var(--accent-hover);
outline-offset: 3px;
}
.popup-footer { .popup-footer {
margin-top: 16px; margin-top: 16px;
padding: 11px 2px 2px; padding: 11px 2px 2px;
@@ -577,7 +581,7 @@
} }
.footer-review { .footer-review {
flex: none; flex: none;
min-height: 26px; min-height: 30px;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
padding: 4px 8px; padding: 4px 8px;
@@ -585,7 +589,7 @@
border-radius: 7px; border-radius: 7px;
background: color-mix(in oklch, var(--warning), transparent 91%); background: color-mix(in oklch, var(--warning), transparent 91%);
color: var(--status-warning-text) !important; color: var(--status-warning-text) !important;
font-size: 10px; font-size: 11px;
font-weight: 700; font-weight: 700;
} }
.footer-links { .footer-links {
@@ -594,12 +598,12 @@
gap: 4px; gap: 4px;
} }
.footer-links a { .footer-links a {
min-height: 26px; min-height: 30px;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
padding: 4px 7px; padding: 4px 7px;
border-radius: 6px; border-radius: 6px;
font-size: 10px; font-size: 11px;
font-weight: 600; font-weight: 600;
} }
.footer-links a:hover { .footer-links a:hover {
@@ -717,6 +721,64 @@
letter-spacing: 0; letter-spacing: 0;
text-transform: none; 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, .settings-control,
#tab-settings input[type="text"] { #tab-settings input[type="text"] {
width: 154px; width: 154px;
@@ -789,7 +851,7 @@
background: transparent; background: transparent;
color: var(--text-muted); color: var(--text-muted);
font-family: inherit; font-family: inherit;
font-size: 9px; font-size: 10px;
font-weight: 700; font-weight: 700;
line-height: 1; line-height: 1;
cursor: pointer; cursor: pointer;
@@ -803,6 +865,15 @@
color: var(--text); color: var(--text);
box-shadow: 0 1px 5px oklch(0.08 0.02 150 / 0.32), inset 0 0 0 1px var(--border-soft); 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 { .settings-row .toggle-switch {
justify-self: end; justify-self: end;
margin: 0 2px 0 0; margin: 0 2px 0 0;
@@ -1086,13 +1157,13 @@
<label style="margin: 0;" data-i18n="LABEL_REMOTE_CONTROL">Remote Control</label> <label style="margin: 0;" data-i18n="LABEL_REMOTE_CONTROL">Remote Control</label>
<button id="syncTabCopyInvite" title="Copy Invite Link" style="background:transparent; border: 1px solid var(--border-strong); border-radius: 6px; padding: 4px 8px; font-size: 11px; cursor:pointer; opacity:0.8; transition: opacity 0.2s; color: var(--text-muted); display: flex; align-items: center; gap: 4px; white-space: nowrap;" data-i18n="BTN_COPY_INVITE" data-i18n-title="BTN_COPY_INVITE_TOOLTIP">📋 Invite Link</button> <button id="syncTabCopyInvite" title="Copy Invite Link" style="background:transparent; border: 1px solid var(--border-strong); border-radius: 6px; padding: 4px 8px; font-size: 11px; cursor:pointer; opacity:0.8; transition: opacity 0.2s; color: var(--text-muted); display: flex; align-items: center; gap: 4px; white-space: nowrap;" data-i18n="BTN_COPY_INVITE" data-i18n-title="BTN_COPY_INVITE_TOOLTIP">📋 Invite Link</button>
</div> </div>
<div style="display: flex; gap: 8px; margin-bottom: 12px;"> <div class="transport-actions">
<button id="playBtn" class="primary" style="flex:1; background: var(--success);" title="Send a Play command to everyone" data-i18n="BTN_PLAY" data-i18n-title="BTN_PLAY_TOOLTIP">Play</button> <button id="playBtn" class="primary action-icon" title="Send a Play command to everyone" data-i18n="BTN_PLAY" data-i18n-title="BTN_PLAY_TOOLTIP">Play</button>
<button id="pauseBtn" class="primary" style="flex:1; background: var(--error); color: #fff;" title="Send a Pause command to everyone" data-i18n="BTN_PAUSE" data-i18n-title="BTN_PAUSE_TOOLTIP">Pause</button> <button id="pauseBtn" class="primary action-icon" title="Send a Pause command to everyone" data-i18n="BTN_PAUSE" data-i18n-title="BTN_PAUSE_TOOLTIP">Pause</button>
</div> </div>
<div style="display: flex; gap: 8px; margin-bottom: 15px; align-items: stretch;"> <div class="sync-actions">
<button id="forceSyncBtn" class="primary" style="flex: 1;" title="Force all users to sync up" data-i18n="BTN_SYNC" data-i18n-title="BTN_SYNC_TOOLTIP">Sync</button> <button id="forceSyncBtn" class="primary action-icon" title="Force all users to sync up" data-i18n="BTN_SYNC" data-i18n-title="BTN_SYNC_TOOLTIP">Sync</button>
<select id="forceSyncMode" style="flex: 1; background: var(--card); border: 1px solid var(--border-strong); color: var(--text); padding: 10px 8px; border-radius: 8px; font-size: 11px; font-family: inherit; cursor: pointer; align-self: stretch;" title="Choose sync target" data-i18n-title="OPTION_JUMP_MODE_TOOLTIP"> <select id="forceSyncMode" style="flex: 1; background: var(--card); border: 1px solid var(--border-strong); color: var(--text); padding: 10px 8px; border-radius: 8px; font-size: 11px; font-family: inherit; cursor: pointer; align-self: stretch;" title="Choose sync target" data-i18n-title="OPTION_JUMP_MODE_TOOLTIP">
<option value="jump-to-others" data-i18n="OPTION_JUMP_TO_OTHERS">Jump to Others</option> <option value="jump-to-others" data-i18n="OPTION_JUMP_TO_OTHERS">Jump to Others</option>
<option value="jump-to-me" data-i18n="OPTION_JUMP_TO_ME">Jump to Me</option> <option value="jump-to-me" data-i18n="OPTION_JUMP_TO_ME">Jump to Me</option>
+7 -7
View File
@@ -518,8 +518,8 @@ function updateLastActionUI(state, peers) {
const safeAcks = state.acks || []; const safeAcks = state.acks || [];
const actionNames = { const actionNames = {
'play': getMessage('BTN_PLAY').replace('▶ ', '').toUpperCase(), 'play': getMessage('BTN_PLAY'),
'pause': getMessage('BTN_PAUSE').replace('⏸ ', '').toUpperCase(), 'pause': getMessage('BTN_PAUSE'),
'seek': getMessage('NOTIF_SEEK').toUpperCase(), 'seek': getMessage('NOTIF_SEEK').toUpperCase(),
'force_sync_prepare': getMessage('BTN_STATE_SYNCING').toUpperCase(), 'force_sync_prepare': getMessage('BTN_STATE_SYNCING').toUpperCase(),
'force_sync_execute': getMessage('BTN_STATE_SYNCED').toUpperCase() 'force_sync_execute': getMessage('BTN_STATE_SYNCED').toUpperCase()
@@ -542,7 +542,7 @@ function updateLastActionUI(state, peers) {
actionSpan.textContent = actionNames[state.action] || state.action.toUpperCase(); actionSpan.textContent = actionNames[state.action] || state.action.toUpperCase();
const infoSpan = document.createElement('span'); const infoSpan = document.createElement('span');
infoSpan.style.cssText = 'font-size:9px; color:var(--text-muted);'; infoSpan.style.cssText = 'font-size:10px; color:var(--text-muted);';
infoSpan.textContent = `${senderName} @ ${timeStr}`; infoSpan.textContent = `${senderName} @ ${timeStr}`;
header.appendChild(actionSpan); header.appendChild(actionSpan);
@@ -551,14 +551,14 @@ function updateLastActionUI(state, peers) {
if (state.targetTime !== undefined && state.action === 'seek') { if (state.targetTime !== undefined && state.action === 'seek') {
const timeInfo = document.createElement('div'); const timeInfo = document.createElement('div');
timeInfo.style.cssText = 'font-size:9px; color:var(--text-muted); margin-top:4px;'; timeInfo.style.cssText = 'font-size:10px; color:var(--text-muted); margin-top:4px;';
timeInfo.textContent = `Target: ${formatTime(state.targetTime)}`; timeInfo.textContent = `Target: ${formatTime(state.targetTime)}`;
elements.lastActionCard.appendChild(timeInfo); elements.lastActionCard.appendChild(timeInfo);
} }
if (state.targetTime !== undefined && state.action.includes('force_sync')) { if (state.targetTime !== undefined && state.action.includes('force_sync')) {
const timeInfo = document.createElement('div'); const timeInfo = document.createElement('div');
timeInfo.style.cssText = 'font-size:9px; color:var(--text-muted); margin-top:4px;'; timeInfo.style.cssText = 'font-size:10px; color:var(--text-muted); margin-top:4px;';
timeInfo.textContent = `Sync to: ${formatTime(state.targetTime)}`; timeInfo.textContent = `Sync to: ${formatTime(state.targetTime)}`;
elements.lastActionCard.appendChild(timeInfo); elements.lastActionCard.appendChild(timeInfo);
} }
@@ -584,7 +584,7 @@ function updateLastActionUI(state, peers) {
dot.textContent = icon; dot.textContent = icon;
const nameSpan = document.createElement('span'); const nameSpan = document.createElement('span');
nameSpan.style.cssText = 'font-size:7px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:36px;'; nameSpan.style.cssText = 'font-size:9px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:42px;';
nameSpan.textContent = `${avatar} ${pName}`; nameSpan.textContent = `${avatar} ${pName}`;
peerItem.appendChild(dot); peerItem.appendChild(dot);
@@ -2418,7 +2418,7 @@ function refreshDebugInfo() {
addField('Resolution', `${state.videoWidth}x${state.videoHeight}`, dimsOk ? 'var(--status-success-text)' : 'var(--status-error-text)'); addField('Resolution', `${state.videoWidth}x${state.videoHeight}`, dimsOk ? 'var(--status-success-text)' : 'var(--status-error-text)');
if (!dimsOk) { if (!dimsOk) {
const dimHint = document.createElement('div'); const dimHint = document.createElement('div');
dimHint.style.cssText = 'color: var(--status-warning-text); font-size: 9px; margin: 2px 0 6px 12px;'; dimHint.style.cssText = 'color: var(--status-warning-text); font-size: 10px; margin: 2px 0 6px 12px;';
dimHint.textContent = '0x0 = video element hidden or not yet loaded'; dimHint.textContent = '0x0 = video element hidden or not yet loaded';
elements.videoDebug.appendChild(dimHint); elements.videoDebug.appendChild(dimHint);
} }