openvibers/openvibe.live Commits

Live: the Translate chat switch is a tidy pill on the right of the chat tools row. (#50)

OP OpenVibers committed 8 Oct 2026 · 6322dcf0ce · 1 file, +13 −8

The row's generic .chat-tools-row > button rule (gap 0, large accent text) beat .chat-autotr, so the icon touched the
label and the switch looked like a misfit next to the emoji button. A longer selector keeps it a compact pill at the
row's height: icon spaced from the label, secondary text, accent when translating.


Claude-Session: https://claude.ai/code/session_01K8AYn3FF3HE7CPfM262qdh

Co-authored-by: Claude Opus 5.5 <[email protected]>

Changes

ddiff --git a/public/css/i18n-star.css b/public/css/i18n-star.css
iindex 8f73cf17..01ac3c3f 100644
---- a/public/css/i18n-star.css
++++ b/public/css/i18n-star.css
@@@ -203,18 +203,23 @@
      .star-expand, .star-expand i, .star-card.is-compact .star-avatar { transition: none; }
  }
  
--/* ── Chat: "Translate chat" switch (shows once a line in another language arrives; chat.js _autoTrChip) ── */
--.chat-autotr {
--    display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 3px 10px; border-radius: 999px; cursor: pointer;
--    font: 600 0.72rem/1.2 inherit; white-space: nowrap; color: var(--text-secondary);
++/* ── Chat: "Translate chat" switch (shows once a line in another language arrives; chat.js _autoTrChip) ──
++   A compact pill on the right of the tools row, the height of the other tool buttons. The tools row's generic
++   `.chat-tools-row > button` (gap 0, large accent text) must not apply to it, hence the longer selector. */
++.chat-autotr,
++.chat-tools-row > button.chat-autotr,
++.pc-tools-row > button.chat-autotr {
++    display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 0 12px; height: 34px; border-radius: 999px; cursor: pointer;
++    font-size: 0.78rem; font-weight: 600; line-height: 1; white-space: nowrap; color: var(--text-secondary);
      background: transparent; border: 1px solid var(--border); transition: color .15s, border-color .15s, background-color .15s;
  }
--.chat-autotr:hover { color: var(--text-primary); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
--.chat-autotr.is-on { color: var(--accent-light, var(--accent)); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
++.chat-tools-row > button.chat-autotr i { font-size: 0.95rem; color: var(--accent-light, var(--accent)); }
++.chat-tools-row > button.chat-autotr:hover { color: var(--text-primary); background: transparent; border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
++.chat-tools-row > button.chat-autotr.is-on { color: var(--accent-light, var(--accent)); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
  .chat-autotr:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
--.chat-translate-hint ~ .chat-autotr { margin-left: 6px; }
++.chat-translate-hint ~ .chat-autotr, .chat-tools-row > .chat-translate-hint ~ button.chat-autotr { margin-left: 6px; }
  @media (max-width: 480px) {
      /* Narrow chat: the switch is its icon (the title says what it does), so it stays on the tools row. */
--    .chat-autotr { padding: 4px 8px; }
++    .chat-tools-row > button.chat-autotr { padding: 0 10px; }
      .chat-autotr span { display: none; }
  }