Add voice audio, capture and transcript, browser monitor, and DM UI
This commit is contained in:
Fisto
+1067
-121
File diff suppressed because it is too large
Load Diff
+209
-56
@@ -15,6 +15,11 @@
|
||||
<span class="vk-brand-version">debug</span>
|
||||
</span>
|
||||
|
||||
<div class="vk-scope">
|
||||
<button id="scope-guild" class="vk-scope-btn active" type="button">Guild</button>
|
||||
<button id="scope-dm" class="vk-scope-btn" type="button">DM</button>
|
||||
</div>
|
||||
|
||||
<div class="vk-guild-picker">
|
||||
<button id="guild-picker" class="btn btn-secondary vk-guild-button" type="button">
|
||||
<span id="guild-picker-label">Direct messages</span>
|
||||
@@ -33,6 +38,17 @@
|
||||
</div>
|
||||
|
||||
<div class="vk-header-right">
|
||||
<button id="core-start-banner" class="btn btn-primary vk-small-btn vk-start-server" type="button" hidden>
|
||||
Start server
|
||||
</button>
|
||||
<button
|
||||
id="client-audio"
|
||||
class="btn btn-secondary vk-small-btn vk-client-audio"
|
||||
type="button"
|
||||
title="Play the call in this browser"
|
||||
>
|
||||
Client audio
|
||||
</button>
|
||||
<label class="vk-takeover" title="Read-only unless takeover is on">
|
||||
<input type="checkbox" id="takeover" />
|
||||
<span class="vk-switch"><span class="vk-knob"></span></span>
|
||||
@@ -51,19 +67,28 @@
|
||||
<aside class="vk-rail">
|
||||
<div id="guild-switcher" class="vk-guild-switcher"></div>
|
||||
|
||||
<div class="vk-rail-section">
|
||||
<div class="vk-rail-label">Text</div>
|
||||
<div id="text-channels" class="vk-rail-list"></div>
|
||||
<div id="rail-guild" class="vk-rail-scope">
|
||||
<div class="vk-rail-section">
|
||||
<div class="vk-rail-label">Text</div>
|
||||
<div id="text-channels" class="vk-rail-list"></div>
|
||||
</div>
|
||||
|
||||
<div class="vk-rail-section">
|
||||
<div class="vk-rail-label">Voice</div>
|
||||
<div id="voice-channels" class="vk-rail-list"></div>
|
||||
</div>
|
||||
|
||||
<div class="vk-rail-section">
|
||||
<div class="vk-rail-label">People</div>
|
||||
<div id="people-list" class="vk-rail-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vk-rail-section">
|
||||
<div class="vk-rail-label">Voice</div>
|
||||
<div id="voice-channels" class="vk-rail-list"></div>
|
||||
</div>
|
||||
|
||||
<div class="vk-rail-section">
|
||||
<div class="vk-rail-label">Direct</div>
|
||||
<div id="direct-list" class="vk-rail-list"></div>
|
||||
<div id="rail-dm" class="vk-rail-scope" hidden>
|
||||
<div class="vk-rail-section">
|
||||
<div class="vk-rail-label">Direct messages</div>
|
||||
<div id="dm-rail-list" class="vk-rail-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="agent-identity" class="vk-rail-footer"></div>
|
||||
@@ -103,16 +128,18 @@
|
||||
</div>
|
||||
<div class="vk-tts-settings">
|
||||
<span class="vk-micro-label">Voice settings</span>
|
||||
<span class="vk-chip vk-chip-on">sv-SE · Mattias</span>
|
||||
<span class="vk-chip">rate 1.0×</span>
|
||||
<span class="vk-chip vk-chip-on">yield to call</span>
|
||||
<span class="vk-chip">duck 30%</span>
|
||||
<select id="tts-provider" class="vk-select">
|
||||
<option value="local">local TTS</option>
|
||||
<option value="api">API TTS</option>
|
||||
</select>
|
||||
<span class="vk-chip vk-chip-on">duck on voice</span>
|
||||
<span class="vk-chip vk-chip-on">queue lines</span>
|
||||
</div>
|
||||
<div class="vk-tts-body">
|
||||
<textarea id="tts-input" class="vk-tts-field" rows="3" placeholder="Speak text into the call…"></textarea>
|
||||
<div class="vk-tts-meta">
|
||||
<span class="vk-mono vk-dim">voice audio is not implemented yet</span>
|
||||
<span class="vk-mono vk-dim" id="tts-status">idle</span>
|
||||
<button id="tts-stop" class="btn btn-secondary vk-small-btn" type="button">Stop</button>
|
||||
<button id="tts-speak" class="btn btn-primary vk-small-btn" type="button">Speak</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -154,7 +181,6 @@
|
||||
<div id="right-dms" class="vk-right-list"></div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="vk-right-footer vk-mono vk-dim">full roster sits behind the guild header</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
@@ -186,9 +212,12 @@
|
||||
<div id="event-log" class="vk-event-log"></div>
|
||||
</div>
|
||||
<div id="console-panel-transcript" class="vk-console-panel">
|
||||
<div class="vk-roadmap">
|
||||
<span class="tag tag-outline">roadmap</span>
|
||||
<p>Voice transcription (STT/TTS) is not implemented yet. Transcript segments will appear here once voice audio lands.</p>
|
||||
<div class="vk-transcript">
|
||||
<div class="vk-transcript-toolbar">
|
||||
<span id="transcript-status" class="vk-mono vk-dim">no capture session</span>
|
||||
<button id="transcript-refresh" class="btn btn-secondary vk-small-btn" type="button">Refresh</button>
|
||||
</div>
|
||||
<div id="transcript-list" class="vk-transcript-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -205,50 +234,174 @@
|
||||
</div>
|
||||
|
||||
<div class="vk-settings-body">
|
||||
<section class="vk-settings-section">
|
||||
<div class="vk-section-head">
|
||||
<span class="vk-rail-label vk-rail-label-flat">Core process</span>
|
||||
<span class="vk-settings-actions">
|
||||
<button id="core-start" class="btn btn-primary vk-small-btn" type="button">Start</button>
|
||||
<button id="core-stop" class="btn btn-secondary vk-small-btn" type="button">Stop</button>
|
||||
<button id="core-restart" class="btn btn-secondary vk-small-btn" type="button">Restart</button>
|
||||
</span>
|
||||
</div>
|
||||
<div id="core-status" class="vk-settings-card"></div>
|
||||
</section>
|
||||
|
||||
<section class="vk-settings-section">
|
||||
<div class="vk-section-head">
|
||||
<span class="vk-rail-label vk-rail-label-flat">Account login</span>
|
||||
<span class="vk-settings-actions">
|
||||
<button id="auth-start" class="btn btn-primary vk-small-btn" type="button">Start QR login</button>
|
||||
<button id="auth-cancel" class="btn btn-secondary vk-small-btn" type="button">Cancel</button>
|
||||
<button id="auth-restart" class="btn btn-secondary vk-small-btn" type="button">Restart with token</button>
|
||||
</span>
|
||||
</div>
|
||||
<div id="auth-status" class="vk-settings-card"></div>
|
||||
<div id="auth-qr" class="vk-qr" hidden></div>
|
||||
<form id="auth-captcha" class="vk-settings-row" hidden>
|
||||
<input id="auth-captcha-key" class="input" placeholder="hCaptcha response token" />
|
||||
<button class="btn btn-secondary vk-small-btn" type="submit">Submit captcha</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="vk-settings-section">
|
||||
<div class="vk-section-head">
|
||||
<span class="vk-rail-label vk-rail-label-flat">Visible guilds</span>
|
||||
<button id="guilds-show-all" class="btn btn-secondary vk-small-btn" type="button">Show all</button>
|
||||
<span class="vk-settings-actions">
|
||||
<button id="guilds-save" class="btn btn-primary vk-small-btn" type="button" disabled>Save</button>
|
||||
<button id="guilds-hide-all" class="btn btn-secondary vk-small-btn" type="button">Hide all</button>
|
||||
<button id="guilds-show-all" class="btn btn-secondary vk-small-btn" type="button">Show all</button>
|
||||
</span>
|
||||
</div>
|
||||
<div id="guild-visibility" class="vk-settings-card"></div>
|
||||
</section>
|
||||
|
||||
<section class="vk-settings-section">
|
||||
<div class="vk-section-head">
|
||||
<span class="vk-rail-label vk-rail-label-flat">Action log</span>
|
||||
<button id="logs-refresh" class="btn btn-secondary vk-small-btn" type="button">Refresh</button>
|
||||
<details class="vk-settings-group" open>
|
||||
<summary class="vk-settings-summary">
|
||||
<span class="vk-icon vk-caret" data-icon="caretDown"></span>
|
||||
<span>Client</span>
|
||||
</summary>
|
||||
|
||||
<div class="vk-settings-group-body">
|
||||
<section class="vk-settings-section">
|
||||
<div class="vk-section-head">
|
||||
<span class="vk-rail-label vk-rail-label-flat">Bot audio</span>
|
||||
<span class="vk-settings-actions">
|
||||
<button id="audio-connect" class="btn btn-primary vk-small-btn" type="button">Connect devices</button>
|
||||
<button id="audio-refresh" class="btn btn-secondary vk-small-btn" type="button">Refresh</button>
|
||||
<button id="audio-capture" class="btn btn-secondary vk-small-btn" type="button">Start capture</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="vk-settings-card">
|
||||
<div class="vk-status-row">
|
||||
<span class="vk-status-label">Audio engine</span>
|
||||
<span class="vk-status-value" id="audio-status">checking…</span>
|
||||
</div>
|
||||
<div class="vk-status-row" id="audio-hint-row" hidden>
|
||||
<span class="vk-status-label">Fix</span>
|
||||
<span class="vk-status-value vk-dim" id="audio-hint"></span>
|
||||
</div>
|
||||
<div class="vk-status-row">
|
||||
<span class="vk-status-label">TTS</span>
|
||||
<span class="vk-status-value" id="audio-tts">—</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="vk-settings-section">
|
||||
<div class="vk-section-head">
|
||||
<span class="vk-rail-label vk-rail-label-flat">Speech</span>
|
||||
<span class="vk-mono vk-dim" id="speech-status"></span>
|
||||
</div>
|
||||
<div class="vk-settings-card">
|
||||
<div class="vk-status-row">
|
||||
<span class="vk-status-label">TTS engine</span>
|
||||
<select class="vk-select" id="speech-provider">
|
||||
<option value="">Auto</option>
|
||||
<option value="local">Local</option>
|
||||
<option value="api">API</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="vk-status-row">
|
||||
<span class="vk-status-label">Language</span>
|
||||
<select class="vk-select" id="speech-language">
|
||||
<option value="">Auto</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="vk-status-row">
|
||||
<span class="vk-status-label">Voice</span>
|
||||
<select class="vk-select" id="speech-voice">
|
||||
<option value="">Default</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="vk-status-row">
|
||||
<span class="vk-status-label">STT</span>
|
||||
<span class="vk-status-value vk-dim" id="speech-stt">—</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="vk-settings-section">
|
||||
<div class="vk-section-head">
|
||||
<span class="vk-rail-label vk-rail-label-flat">Display</span>
|
||||
<span class="vk-mono vk-dim" id="timezone-status"></span>
|
||||
</div>
|
||||
<div class="vk-settings-card">
|
||||
<div class="vk-status-row">
|
||||
<span class="vk-status-label">Timezone</span>
|
||||
<select class="vk-select" id="timezone-select"></select>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="vk-settings-section">
|
||||
<div class="vk-section-head">
|
||||
<span class="vk-rail-label vk-rail-label-flat">Browser audio</span>
|
||||
<span class="vk-settings-actions">
|
||||
<button id="browser-grant" class="btn btn-primary vk-small-btn" type="button">Enable browser audio</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="vk-settings-card">
|
||||
<div class="vk-status-row">
|
||||
<span class="vk-status-label">Output device</span>
|
||||
<select class="vk-select" id="browser-output">
|
||||
<option value="">Browser default</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="vk-status-row">
|
||||
<span class="vk-status-label">Input device</span>
|
||||
<select class="vk-select" id="browser-input" disabled>
|
||||
<option value="">Mic puppeting not implemented</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="vk-status-row">
|
||||
<span class="vk-status-label">Call audio</span>
|
||||
<span class="vk-status-value vk-dim" id="browser-audio-status">off</span>
|
||||
</div>
|
||||
<div class="vk-status-row">
|
||||
<span class="vk-status-label">Note</span>
|
||||
<span class="vk-status-value vk-dim" id="browser-hint">Browser audio needs HTTPS or localhost.</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div id="action-log" class="vk-log"></div>
|
||||
</section>
|
||||
</details>
|
||||
|
||||
<details class="vk-settings-group" open>
|
||||
<summary class="vk-settings-summary">
|
||||
<span class="vk-icon vk-caret" data-icon="caretDown"></span>
|
||||
<span>Server</span>
|
||||
</summary>
|
||||
|
||||
<div class="vk-settings-group-body">
|
||||
<section class="vk-settings-section">
|
||||
<div class="vk-section-head">
|
||||
<span class="vk-rail-label vk-rail-label-flat">Core process</span>
|
||||
<span class="vk-settings-actions">
|
||||
<button id="core-start" class="btn btn-primary vk-small-btn" type="button">Start</button>
|
||||
<button id="core-stop" class="btn btn-secondary vk-small-btn" type="button">Stop</button>
|
||||
<button id="core-restart" class="btn btn-secondary vk-small-btn" type="button">Restart</button>
|
||||
</span>
|
||||
</div>
|
||||
<div id="core-status" class="vk-settings-card"></div>
|
||||
</section>
|
||||
|
||||
<section class="vk-settings-section">
|
||||
<div class="vk-section-head">
|
||||
<span class="vk-rail-label vk-rail-label-flat">Account login</span>
|
||||
<span class="vk-settings-actions">
|
||||
<button id="auth-start" class="btn btn-primary vk-small-btn" type="button">Start QR login</button>
|
||||
<button id="auth-cancel" class="btn btn-secondary vk-small-btn" type="button">Cancel</button>
|
||||
<button id="auth-restart" class="btn btn-secondary vk-small-btn" type="button">Restart with token</button>
|
||||
</span>
|
||||
</div>
|
||||
<div id="auth-status" class="vk-settings-card"></div>
|
||||
<div id="auth-qr" class="vk-qr" hidden></div>
|
||||
<form id="auth-captcha" class="vk-settings-row" hidden>
|
||||
<input id="auth-captcha-key" class="input" placeholder="hCaptcha response token" />
|
||||
<button class="btn btn-secondary vk-small-btn" type="submit">Submit captcha</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section class="vk-settings-section">
|
||||
<div class="vk-section-head">
|
||||
<span class="vk-rail-label vk-rail-label-flat">Action log</span>
|
||||
<button id="logs-refresh" class="btn btn-secondary vk-small-btn" type="button">Refresh</button>
|
||||
</div>
|
||||
<div id="action-log" class="vk-log"></div>
|
||||
</section>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -166,6 +166,12 @@ button {
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
width: 100%;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-text);
|
||||
text-align: left;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.vk-menu-item:hover {
|
||||
@@ -268,6 +274,151 @@ button {
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.vk-start-server {
|
||||
padding: 5px 12px;
|
||||
font-size: 12px;
|
||||
animation: vk-bloom 2.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes vk-bloom {
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 transparent;
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 12px 2px color-mix(in srgb, var(--color-accent) 45%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.vk-start-server {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
.vk-scope {
|
||||
display: inline-flex;
|
||||
border: 1px solid var(--color-divider);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vk-scope-btn {
|
||||
padding: 5px 12px;
|
||||
font-size: 12.5px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-neutral-400);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vk-scope-btn + .vk-scope-btn {
|
||||
border-left: 1px solid var(--color-divider);
|
||||
}
|
||||
|
||||
.vk-scope-btn:hover {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.vk-scope-btn.active {
|
||||
color: var(--color-accent);
|
||||
box-shadow: inset 0 0 0 1px var(--color-accent);
|
||||
}
|
||||
|
||||
/* The main areas dim and stop taking input while the bridge is down. */
|
||||
.vk-offline .vk-body,
|
||||
.vk-offline .vk-console {
|
||||
opacity: 0.5;
|
||||
filter: saturate(0.6);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.vk-rail-scope {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.vk-dm-row {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.vk-dm-badge {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-width: 17px;
|
||||
height: 16px;
|
||||
padding: 0 4px;
|
||||
margin-right: 2px;
|
||||
border-radius: 8px;
|
||||
font: 500 10px/1 ui-monospace, Menlo, monospace;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.vk-dm-badge.unread {
|
||||
background: var(--color-accent-800);
|
||||
color: var(--color-accent-100);
|
||||
}
|
||||
|
||||
.vk-dm-badge.mention {
|
||||
background: color-mix(in srgb, var(--color-mention) 35%, transparent);
|
||||
color: var(--color-mention);
|
||||
}
|
||||
|
||||
.vk-dm-badge.muted {
|
||||
background: var(--color-neutral-800);
|
||||
color: var(--color-neutral-300);
|
||||
}
|
||||
|
||||
.vk-dm-time {
|
||||
margin-left: auto;
|
||||
font: 400 10px/1 ui-monospace, Menlo, monospace;
|
||||
color: var(--color-neutral-400);
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.vk-star {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
color: var(--color-neutral-500);
|
||||
cursor: pointer;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.vk-star:hover {
|
||||
color: var(--color-accent-300);
|
||||
}
|
||||
|
||||
.vk-star.on {
|
||||
color: var(--color-accent-400);
|
||||
}
|
||||
|
||||
.vk-person-name.speaking,
|
||||
.vk-voice-member .speaking,
|
||||
.vk-right-name .speaking {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.vk-marks .unavailable {
|
||||
opacity: 0.35;
|
||||
}
|
||||
|
||||
:root {
|
||||
--color-mention: #d29922;
|
||||
}
|
||||
|
||||
.vk-client-audio.active {
|
||||
color: var(--color-accent);
|
||||
border-color: var(--color-accent);
|
||||
background: color-mix(in srgb, var(--color-accent) 12%, transparent);
|
||||
}
|
||||
|
||||
/* Call strip */
|
||||
|
||||
.vk-call-strip {
|
||||
@@ -484,6 +635,18 @@ button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.vk-rail-voice-head:hover .vk-rail-name {
|
||||
color: var(--color-accent-300);
|
||||
}
|
||||
|
||||
.vk-rail-voice-members {
|
||||
@@ -989,6 +1152,24 @@ a.vk-attachment:hover {
|
||||
padding: 10px 6px 0;
|
||||
}
|
||||
|
||||
.vk-right-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.vk-right-group-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 4px 6px;
|
||||
font-size: 12.5px;
|
||||
color: var(--color-neutral-300);
|
||||
background: var(--color-neutral-900);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.vk-roadmap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -1002,6 +1183,63 @@ a.vk-attachment:hover {
|
||||
color: var(--color-neutral-500);
|
||||
}
|
||||
|
||||
.vk-transcript {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.vk-transcript-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.vk-transcript-toolbar .vk-small-btn {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.vk-transcript-list {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
font-family: ui-monospace, Menlo, monospace;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.vk-transcript-line {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: baseline;
|
||||
color: var(--color-neutral-400);
|
||||
}
|
||||
|
||||
.vk-transcript-line .vk-transcript-time {
|
||||
flex: none;
|
||||
color: var(--color-neutral-500);
|
||||
}
|
||||
|
||||
.vk-transcript-line .vk-transcript-speaker {
|
||||
flex: none;
|
||||
min-width: 84px;
|
||||
color: var(--color-accent-300);
|
||||
}
|
||||
|
||||
.vk-transcript-line .vk-transcript-text {
|
||||
color: var(--color-neutral-200);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.vk-transcript-line .vk-transcript-wav {
|
||||
flex: none;
|
||||
color: var(--color-neutral-500);
|
||||
}
|
||||
|
||||
/* Voice state marks */
|
||||
|
||||
.vk-marks {
|
||||
@@ -1280,6 +1518,56 @@ a.vk-attachment:hover {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.vk-settings-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.vk-settings-summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
padding: 6px 0;
|
||||
font: 500 12px/1 var(--font-heading);
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-neutral-300);
|
||||
}
|
||||
|
||||
.vk-settings-summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vk-settings-summary:hover {
|
||||
color: var(--color-accent-300);
|
||||
}
|
||||
|
||||
.vk-settings-group:not([open]) .vk-caret {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.vk-settings-group-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 22px;
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.vk-select {
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
border: 1px solid var(--color-divider);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 4px 8px;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.vk-select:disabled {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.vk-settings-actions {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user