gsadmin/KoalaSync
1
0
Fork 0
mirror of https://github.com/Shik3i/KoalaSync.git synced 2026-07-26 12:08:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(extension): unify control system and accessibility

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
extension/audio-options.css
+3 -3
View File
@@ -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"] {
extension/icons/pause.svg
+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>
Side by Side

After

Width:  |  Height:  |  Size: 109 B

extension/icons/play.svg
+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>
Side by Side

After

Width:  |  Height:  |  Size: 100 B

extension/icons/sync.svg
+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>
Side by Side

After

Width:  |  Height:  |  Size: 226 B

extension/locales/de.json
+3 -3
View File
@@ -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",
extension/locales/en.json
+3 -3
View File
@@ -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",
extension/locales/es.json
+3 -3
View File
@@ -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",
extension/locales/fr.json
+3 -3
View File
@@ -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",
extension/locales/it.json
+3 -3
View File
@@ -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",
extension/locales/ja.json
+3 -3
View File
@@ -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": "自分に合わせる",
extension/locales/ko.json
+3 -3
View File
@@ -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": "나에게 이동",
extension/locales/nl.json
+3 -3
View File
@@ -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",
extension/locales/pl.json
+3 -3
View File
@@ -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",
extension/locales/pt-BR.json
+3 -3
View File
@@ -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",
extension/locales/pt.json
+3 -3
View File
@@ -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",
extension/locales/ru.json
+3 -3
View File
@@ -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": "Синхронизировать по мне",
extension/locales/tr.json
+3 -3
View File
@@ -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",
extension/locales/uk.json
+3 -3
View File
@@ -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": "Перейти до мене",
extension/locales/zh.json
+3 -3
View File
@@ -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": "跳到我这里",
extension/popup.html
+85 -14
View File
@@ -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 @@
<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>
</div>
<div style="display: flex; gap: 8px; margin-bottom: 12px;">
<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="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>
<div class="transport-actions">
<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 action-icon" title="Send a Pause command to everyone" data-i18n="BTN_PAUSE" data-i18n-title="BTN_PAUSE_TOOLTIP">Pause</button>
</div>
<div style="display: flex; gap: 8px; margin-bottom: 15px; align-items: stretch;">
<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>
<div class="sync-actions">
<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">
<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>
extension/popup.js
+7 -7
View File
@@ -518,8 +518,8 @@ function updateLastActionUI(state, peers) {
const safeAcks = state.acks || [];
const actionNames = {
'play': getMessage('BTN_PLAY').replace('▶ ', '').toUpperCase(),
'pause': getMessage('BTN_PAUSE').replace('⏸ ', '').toUpperCase(),
'play': getMessage('BTN_PLAY'),
'pause': getMessage('BTN_PAUSE'),
'seek': getMessage('NOTIF_SEEK').toUpperCase(),
'force_sync_prepare': getMessage('BTN_STATE_SYNCING').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();
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}`;
header.appendChild(actionSpan);
@@ -551,14 +551,14 @@ function updateLastActionUI(state, peers) {
if (state.targetTime !== undefined && state.action === 'seek') {
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)}`;
elements.lastActionCard.appendChild(timeInfo);
}
if (state.targetTime !== undefined && state.action.includes('force_sync')) {
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)}`;
elements.lastActionCard.appendChild(timeInfo);
}
@@ -584,7 +584,7 @@ function updateLastActionUI(state, peers) {
dot.textContent = icon;
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}`;
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)');
if (!dimsOk) {
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';
elements.videoDebug.appendChild(dimHint);
}