Add missing Svelte components and stores, fix .gitignore lib/ pattern
The src/lib/ directory was being excluded by a Python .gitignore rule for lib/ (meant for Python's build output). Changed to /lib/ so it only matches root-level lib/ and doesn't block src/lib/. Adds 8 files that were created but missed in the initial commit: - 5 Svelte components (Header, StatusBar, Controls, TranscriptionDisplay, Settings) - 3 TypeScript stores (backend, config, transcriptions) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Developer
780
src/lib/components/Settings.svelte
Normal file
780
src/lib/components/Settings.svelte
Normal file
@@ -0,0 +1,780 @@
|
||||
<script lang="ts">
|
||||
import { configStore } from "$lib/stores/config";
|
||||
import { backendStore } from "$lib/stores/backend";
|
||||
|
||||
interface Props {
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
let { onClose }: Props = $props();
|
||||
|
||||
// Local copies of config values for editing
|
||||
let userName = $state("");
|
||||
let audioDevice = $state("default");
|
||||
let model = $state("base.en");
|
||||
let language = $state("en");
|
||||
let computeDevice = $state("auto");
|
||||
let computeType = $state("default");
|
||||
let enableRealtime = $state(false);
|
||||
let realtimeModel = $state("tiny.en");
|
||||
let realtimeProcessingPause = $state(0.1);
|
||||
let sileroSensitivity = $state(0.4);
|
||||
let webrtcSensitivity = $state(3);
|
||||
let postSpeechSilence = $state(0.3);
|
||||
let minRecordingLength = $state(0.5);
|
||||
let minGapBetween = $state(0);
|
||||
let continuousMode = $state(false);
|
||||
let showTimestamps = $state(true);
|
||||
let fadeSeconds = $state(10);
|
||||
let maxLines = $state(100);
|
||||
let fontSize = $state(12);
|
||||
let userColor = $state("#4CAF50");
|
||||
let textColor = $state("#FFFFFF");
|
||||
let backgroundColor = $state("#000000");
|
||||
let syncEnabled = $state(false);
|
||||
let syncUrl = $state("");
|
||||
let syncRoom = $state("default");
|
||||
let syncPassphrase = $state("");
|
||||
let remoteMode = $state("local");
|
||||
let remoteServerUrl = $state("");
|
||||
let managedEmail = $state("");
|
||||
let managedPassword = $state("");
|
||||
let autoCheckUpdates = $state(true);
|
||||
|
||||
// Fetched device lists
|
||||
let audioDevices = $state<{ id: string; name: string }[]>([]);
|
||||
let computeDevices = $state<{ id: string; name: string }[]>([]);
|
||||
|
||||
// Model options
|
||||
const modelOptions = [
|
||||
"tiny",
|
||||
"tiny.en",
|
||||
"base",
|
||||
"base.en",
|
||||
"small",
|
||||
"small.en",
|
||||
"medium",
|
||||
"medium.en",
|
||||
"large-v1",
|
||||
"large-v2",
|
||||
"large-v3",
|
||||
];
|
||||
|
||||
const computeTypeOptions = [
|
||||
{ value: "default", label: "Default" },
|
||||
{ value: "int8", label: "int8 (Fastest)" },
|
||||
{ value: "float16", label: "float16 (GPU)" },
|
||||
{ value: "float32", label: "float32 (Best Quality)" },
|
||||
];
|
||||
|
||||
const webrtcOptions = [
|
||||
{ value: 0, label: "0 (Most Sensitive)" },
|
||||
{ value: 1, label: "1" },
|
||||
{ value: 2, label: "2" },
|
||||
{ value: 3, label: "3 (Least Sensitive)" },
|
||||
];
|
||||
|
||||
// Load config values on mount
|
||||
$effect(() => {
|
||||
const cfg = configStore.config;
|
||||
userName = cfg.user.name;
|
||||
audioDevice = cfg.audio.input_device;
|
||||
model = cfg.transcription.model;
|
||||
language = cfg.transcription.language;
|
||||
computeDevice = cfg.transcription.device;
|
||||
computeType = cfg.transcription.compute_type;
|
||||
enableRealtime = cfg.transcription.enable_realtime_transcription;
|
||||
realtimeModel = cfg.transcription.realtime_model;
|
||||
realtimeProcessingPause = cfg.transcription.realtime_processing_pause;
|
||||
sileroSensitivity = cfg.transcription.silero_sensitivity;
|
||||
webrtcSensitivity = cfg.transcription.webrtc_sensitivity;
|
||||
postSpeechSilence = cfg.transcription.post_speech_silence_duration;
|
||||
minRecordingLength = cfg.transcription.min_length_of_recording;
|
||||
minGapBetween = cfg.transcription.min_gap_between_recordings;
|
||||
continuousMode = cfg.transcription.continuous_mode;
|
||||
showTimestamps = cfg.display.show_timestamps;
|
||||
fadeSeconds = cfg.display.fade_after_seconds;
|
||||
maxLines = cfg.display.max_lines;
|
||||
fontSize = cfg.display.font_size;
|
||||
userColor = cfg.display.user_color;
|
||||
textColor = cfg.display.text_color;
|
||||
// Strip alpha from background color for the color picker (only supports 6-char hex)
|
||||
const bgHex = cfg.display.background_color.replace("#", "");
|
||||
backgroundColor = "#" + bgHex.substring(0, 6);
|
||||
syncEnabled = cfg.server_sync.enabled;
|
||||
syncUrl = cfg.server_sync.url;
|
||||
syncRoom = cfg.server_sync.room;
|
||||
syncPassphrase = cfg.server_sync.passphrase;
|
||||
remoteMode = cfg.remote.mode;
|
||||
remoteServerUrl = cfg.remote.server_url;
|
||||
autoCheckUpdates = cfg.updates.auto_check;
|
||||
});
|
||||
|
||||
// Fetch audio devices and compute devices on mount
|
||||
$effect(() => {
|
||||
fetchAudioDevices();
|
||||
fetchComputeDevices();
|
||||
});
|
||||
|
||||
async function fetchAudioDevices() {
|
||||
try {
|
||||
const data = await backendStore.apiGet<{
|
||||
devices: { id: string; name: string }[];
|
||||
}>("/api/audio-devices");
|
||||
audioDevices = data.devices ?? [];
|
||||
} catch {
|
||||
audioDevices = [];
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchComputeDevices() {
|
||||
try {
|
||||
const data = await backendStore.apiGet<{
|
||||
devices: { id: string; name: string }[];
|
||||
}>("/api/compute-devices");
|
||||
computeDevices = data.devices ?? [];
|
||||
} catch {
|
||||
computeDevices = [
|
||||
{ id: "auto", name: "Auto" },
|
||||
{ id: "cpu", name: "CPU" },
|
||||
{ id: "cuda", name: "CUDA (GPU)" },
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
const updates = {
|
||||
user: {
|
||||
name: userName,
|
||||
},
|
||||
audio: {
|
||||
input_device: audioDevice,
|
||||
},
|
||||
transcription: {
|
||||
model,
|
||||
device: computeDevice,
|
||||
language,
|
||||
compute_type: computeType,
|
||||
enable_realtime_transcription: enableRealtime,
|
||||
realtime_model: realtimeModel,
|
||||
realtime_processing_pause: realtimeProcessingPause,
|
||||
silero_sensitivity: sileroSensitivity,
|
||||
webrtc_sensitivity: webrtcSensitivity,
|
||||
post_speech_silence_duration: postSpeechSilence,
|
||||
min_length_of_recording: minRecordingLength,
|
||||
min_gap_between_recordings: minGapBetween,
|
||||
continuous_mode: continuousMode,
|
||||
},
|
||||
display: {
|
||||
show_timestamps: showTimestamps,
|
||||
fade_after_seconds: fadeSeconds,
|
||||
max_lines: maxLines,
|
||||
font_size: fontSize,
|
||||
user_color: userColor,
|
||||
text_color: textColor,
|
||||
background_color: backgroundColor,
|
||||
},
|
||||
server_sync: {
|
||||
enabled: syncEnabled,
|
||||
url: syncUrl,
|
||||
room: syncRoom,
|
||||
passphrase: syncPassphrase,
|
||||
},
|
||||
remote: {
|
||||
mode: remoteMode,
|
||||
server_url: remoteServerUrl,
|
||||
},
|
||||
updates: {
|
||||
auto_check: autoCheckUpdates,
|
||||
},
|
||||
};
|
||||
|
||||
try {
|
||||
await configStore.saveConfig(updates);
|
||||
onClose();
|
||||
} catch (err) {
|
||||
console.error("Failed to save settings:", err);
|
||||
}
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
onClose();
|
||||
}
|
||||
|
||||
async function handleCheckUpdates() {
|
||||
try {
|
||||
await backendStore.apiPost("/api/check-updates");
|
||||
} catch (err) {
|
||||
console.error("Failed to check for updates:", err);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleManagedLogin() {
|
||||
try {
|
||||
await backendStore.apiPost("/api/remote/login", {
|
||||
email: managedEmail,
|
||||
password: managedPassword,
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("Login failed:", err);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleManagedRegister() {
|
||||
try {
|
||||
await backendStore.apiPost("/api/remote/register", {
|
||||
email: managedEmail,
|
||||
password: managedPassword,
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("Register failed:", err);
|
||||
}
|
||||
}
|
||||
|
||||
function handleOverlayClick(e: MouseEvent) {
|
||||
if ((e.target as HTMLElement).classList.contains("settings-overlay")) {
|
||||
handleCancel();
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
if (e.key === "Escape") {
|
||||
handleCancel();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window onkeydown={handleKeydown} />
|
||||
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
|
||||
<div class="settings-overlay" role="presentation" onclick={handleOverlayClick}>
|
||||
<div class="settings-panel">
|
||||
<div class="settings-header">
|
||||
<h2>Settings</h2>
|
||||
<button class="close-btn" aria-label="Close settings" onclick={handleCancel}>
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="settings-content">
|
||||
<!-- User Settings -->
|
||||
<section class="settings-section">
|
||||
<h3>User Settings</h3>
|
||||
<div class="field">
|
||||
<label for="user-name">Display Name</label>
|
||||
<input id="user-name" type="text" bind:value={userName} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Audio Settings -->
|
||||
<section class="settings-section">
|
||||
<h3>Audio Settings</h3>
|
||||
<div class="field">
|
||||
<label for="audio-device">Audio Device</label>
|
||||
<select id="audio-device" bind:value={audioDevice}>
|
||||
<option value="default">Default</option>
|
||||
{#each audioDevices as device}
|
||||
<option value={device.id}>{device.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Transcription Settings -->
|
||||
<section class="settings-section">
|
||||
<h3>Transcription Settings</h3>
|
||||
<div class="field">
|
||||
<label for="model">Model</label>
|
||||
<select id="model" bind:value={model}>
|
||||
{#each modelOptions as opt}
|
||||
<option value={opt}>{opt}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="language">Language</label>
|
||||
<input id="language" type="text" bind:value={language} placeholder="en" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="compute-device">Compute Device</label>
|
||||
<select id="compute-device" bind:value={computeDevice}>
|
||||
{#each computeDevices as dev}
|
||||
<option value={dev.id}>{dev.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="compute-type">Compute Type</label>
|
||||
<select id="compute-type" bind:value={computeType}>
|
||||
{#each computeTypeOptions as opt}
|
||||
<option value={opt.value}>{opt.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Realtime Preview -->
|
||||
<section class="settings-section">
|
||||
<h3>Realtime Preview</h3>
|
||||
<div class="field-row">
|
||||
<label for="enable-realtime">Enable Realtime Preview</label>
|
||||
<input
|
||||
id="enable-realtime"
|
||||
type="checkbox"
|
||||
bind:checked={enableRealtime}
|
||||
/>
|
||||
</div>
|
||||
{#if enableRealtime}
|
||||
<div class="field">
|
||||
<label for="realtime-model">Realtime Model</label>
|
||||
<select id="realtime-model" bind:value={realtimeModel}>
|
||||
{#each modelOptions as opt}
|
||||
<option value={opt}>{opt}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="realtime-pause"
|
||||
>Processing Pause: {realtimeProcessingPause.toFixed(2)}s</label
|
||||
>
|
||||
<input
|
||||
id="realtime-pause"
|
||||
type="range"
|
||||
min="0.01"
|
||||
max="1.0"
|
||||
step="0.01"
|
||||
bind:value={realtimeProcessingPause}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<!-- VAD Settings -->
|
||||
<section class="settings-section">
|
||||
<h3>VAD Settings</h3>
|
||||
<div class="field">
|
||||
<label for="silero-sensitivity"
|
||||
>Silero Sensitivity: {sileroSensitivity.toFixed(2)}</label
|
||||
>
|
||||
<input
|
||||
id="silero-sensitivity"
|
||||
type="range"
|
||||
min="0.0"
|
||||
max="1.0"
|
||||
step="0.05"
|
||||
bind:value={sileroSensitivity}
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="webrtc-sensitivity">WebRTC Sensitivity</label>
|
||||
<select id="webrtc-sensitivity" bind:value={webrtcSensitivity}>
|
||||
{#each webrtcOptions as opt}
|
||||
<option value={opt.value}>{opt.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Timing -->
|
||||
<section class="settings-section">
|
||||
<h3>Timing</h3>
|
||||
<div class="field">
|
||||
<label for="post-speech-silence"
|
||||
>Post-Speech Silence: {postSpeechSilence.toFixed(2)}s</label
|
||||
>
|
||||
<input
|
||||
id="post-speech-silence"
|
||||
type="range"
|
||||
min="0.1"
|
||||
max="3.0"
|
||||
step="0.1"
|
||||
bind:value={postSpeechSilence}
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="min-recording"
|
||||
>Min Recording Length: {minRecordingLength.toFixed(2)}s</label
|
||||
>
|
||||
<input
|
||||
id="min-recording"
|
||||
type="range"
|
||||
min="0.1"
|
||||
max="5.0"
|
||||
step="0.1"
|
||||
bind:value={minRecordingLength}
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="min-gap"
|
||||
>Min Gap Between Recordings: {minGapBetween.toFixed(2)}s</label
|
||||
>
|
||||
<input
|
||||
id="min-gap"
|
||||
type="range"
|
||||
min="0"
|
||||
max="3.0"
|
||||
step="0.1"
|
||||
bind:value={minGapBetween}
|
||||
/>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<label for="continuous-mode">Continuous Mode</label>
|
||||
<input
|
||||
id="continuous-mode"
|
||||
type="checkbox"
|
||||
bind:checked={continuousMode}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Display Settings -->
|
||||
<section class="settings-section">
|
||||
<h3>Display Settings</h3>
|
||||
<div class="field-row">
|
||||
<label for="show-timestamps">Show Timestamps</label>
|
||||
<input
|
||||
id="show-timestamps"
|
||||
type="checkbox"
|
||||
bind:checked={showTimestamps}
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="fade-seconds"
|
||||
>Fade After Seconds: {fadeSeconds} (0 = never)</label
|
||||
>
|
||||
<input
|
||||
id="fade-seconds"
|
||||
type="range"
|
||||
min="0"
|
||||
max="60"
|
||||
step="1"
|
||||
bind:value={fadeSeconds}
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="max-lines">Max Lines: {maxLines}</label>
|
||||
<input
|
||||
id="max-lines"
|
||||
type="range"
|
||||
min="10"
|
||||
max="500"
|
||||
step="10"
|
||||
bind:value={maxLines}
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="font-size">Font Size: {fontSize}px</label>
|
||||
<input
|
||||
id="font-size"
|
||||
type="range"
|
||||
min="8"
|
||||
max="32"
|
||||
step="1"
|
||||
bind:value={fontSize}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Color Settings -->
|
||||
<section class="settings-section">
|
||||
<h3>Color Settings</h3>
|
||||
<div class="field-row">
|
||||
<label for="user-color">User Color</label>
|
||||
<input id="user-color" type="color" bind:value={userColor} />
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<label for="text-color">Text Color</label>
|
||||
<input id="text-color" type="color" bind:value={textColor} />
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<label for="bg-color">Background Color</label>
|
||||
<input id="bg-color" type="color" bind:value={backgroundColor} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Server Sync -->
|
||||
<section class="settings-section">
|
||||
<h3>Server Sync</h3>
|
||||
<div class="field-row">
|
||||
<label for="sync-enabled">Enable Server Sync</label>
|
||||
<input
|
||||
id="sync-enabled"
|
||||
type="checkbox"
|
||||
bind:checked={syncEnabled}
|
||||
/>
|
||||
</div>
|
||||
{#if syncEnabled}
|
||||
<div class="field">
|
||||
<label for="sync-url">Server URL</label>
|
||||
<input
|
||||
id="sync-url"
|
||||
type="url"
|
||||
bind:value={syncUrl}
|
||||
placeholder="http://localhost:3000/api/send"
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="sync-room">Room</label>
|
||||
<input id="sync-room" type="text" bind:value={syncRoom} />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="sync-passphrase">Passphrase</label>
|
||||
<input
|
||||
id="sync-passphrase"
|
||||
type="password"
|
||||
bind:value={syncPassphrase}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<!-- Remote Transcription -->
|
||||
<section class="settings-section">
|
||||
<h3>Remote Transcription</h3>
|
||||
<div class="radio-group">
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="remote-mode"
|
||||
value="local"
|
||||
bind:group={remoteMode}
|
||||
/>
|
||||
Local
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="remote-mode"
|
||||
value="managed"
|
||||
bind:group={remoteMode}
|
||||
/>
|
||||
Managed
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="remote-mode"
|
||||
value="byok"
|
||||
bind:group={remoteMode}
|
||||
/>
|
||||
BYOK (Bring Your Own Key)
|
||||
</label>
|
||||
</div>
|
||||
{#if remoteMode !== "local"}
|
||||
<div class="field">
|
||||
<label for="remote-url">Server URL</label>
|
||||
<input
|
||||
id="remote-url"
|
||||
type="url"
|
||||
bind:value={remoteServerUrl}
|
||||
placeholder="wss://your-proxy.com"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
{#if remoteMode === "managed"}
|
||||
<div class="managed-auth">
|
||||
<div class="field">
|
||||
<label for="managed-email">Email</label>
|
||||
<input
|
||||
id="managed-email"
|
||||
type="email"
|
||||
bind:value={managedEmail}
|
||||
placeholder="email@example.com"
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="managed-password">Password</label>
|
||||
<input
|
||||
id="managed-password"
|
||||
type="password"
|
||||
bind:value={managedPassword}
|
||||
/>
|
||||
</div>
|
||||
<div class="auth-buttons">
|
||||
<button onclick={handleManagedLogin}>Login</button>
|
||||
<button onclick={handleManagedRegister}>Register</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<!-- Updates -->
|
||||
<section class="settings-section">
|
||||
<h3>Updates</h3>
|
||||
<div class="field-row">
|
||||
<label for="auto-check-updates">Auto-Check for Updates</label>
|
||||
<input
|
||||
id="auto-check-updates"
|
||||
type="checkbox"
|
||||
bind:checked={autoCheckUpdates}
|
||||
/>
|
||||
</div>
|
||||
<button onclick={handleCheckUpdates}>Check Now</button>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="settings-footer">
|
||||
<button onclick={handleCancel}>Cancel</button>
|
||||
<button class="primary" onclick={handleSave}>Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.settings-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.settings-panel {
|
||||
background-color: var(--bg-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
width: 560px;
|
||||
max-width: 95vw;
|
||||
max-height: 85vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.settings-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.settings-header h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background-color: transparent;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
background-color: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.settings-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.settings-section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.settings-section h3 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--accent-blue);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.field label {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.field-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.field-row label {
|
||||
font-size: 13px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.radio-group label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.managed-auth {
|
||||
margin-top: 8px;
|
||||
padding: 12px;
|
||||
background-color: var(--bg-secondary);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.auth-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.settings-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding: 16px 20px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user