feat(settings): Sprint 2 — extract SecuritySettings (420 lines, needs trim)
This commit is contained in:
Hibryda
parent
9769e7f29a
commit
734d5fff89
2 changed files with 428 additions and 40 deletions
|
|
@ -249,73 +249,41 @@
|
|||
.muted { color: var(--ctp-overlay0); }
|
||||
.available { color: var(--ctp-green); font-weight: 600; }
|
||||
.empty { font-size: 0.75rem; color: var(--ctp-overlay0); margin: 0.25rem 0; }
|
||||
|
||||
input, .ta {
|
||||
padding: 0.375rem 0.625rem; background: var(--ctp-surface0); border: 1px solid var(--ctp-surface1);
|
||||
border-radius: 0.25rem; color: var(--ctp-text); font-size: 0.8rem;
|
||||
}
|
||||
input, .ta { padding: 0.375rem 0.625rem; background: var(--ctp-surface0); border: 1px solid var(--ctp-surface1); border-radius: 0.25rem; color: var(--ctp-text); font-size: 0.8rem; }
|
||||
.ta { font-family: var(--term-font-family, monospace); resize: vertical; min-height: 3rem; line-height: 1.4; }
|
||||
.ta:focus, input:focus { outline: none; border-color: var(--ctp-blue); }
|
||||
.ta::placeholder, input::placeholder { color: var(--ctp-overlay0); }
|
||||
|
||||
.toggle-row { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
|
||||
.toggle {
|
||||
position: relative; width: 2rem; height: 1.125rem; border: none; border-radius: 0.5625rem;
|
||||
background: var(--ctp-surface1); cursor: pointer; transition: background 0.2s; padding: 0; flex-shrink: 0;
|
||||
}
|
||||
.toggle { position: relative; width: 2rem; height: 1.125rem; border: none; border-radius: 0.5625rem; background: var(--ctp-surface1); cursor: pointer; transition: background 0.2s; padding: 0; flex-shrink: 0; }
|
||||
.toggle.on { background: var(--ctp-blue); }
|
||||
.thumb {
|
||||
position: absolute; top: 0.125rem; left: 0.125rem; width: 0.875rem; height: 0.875rem;
|
||||
border-radius: 50%; background: var(--ctp-text); transition: transform 0.2s;
|
||||
}
|
||||
.thumb { position: absolute; top: 0.125rem; left: 0.125rem; width: 0.875rem; height: 0.875rem; border-radius: 50%; background: var(--ctp-text); transition: transform 0.2s; }
|
||||
.toggle.on .thumb { transform: translateX(0.875rem); }
|
||||
|
||||
.seg-group { display: flex; border-radius: 0.25rem; overflow: hidden; border: 1px solid var(--ctp-surface1); }
|
||||
.seg-btn {
|
||||
flex: 1; padding: 0.25rem 0.5rem; border: none; background: var(--ctp-surface0);
|
||||
color: var(--ctp-overlay1); font-size: 0.7rem; font-weight: 500; cursor: pointer; transition: background 0.12s, color 0.12s;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.seg-btn { flex: 1; padding: 0.25rem 0.5rem; border: none; background: var(--ctp-surface0); color: var(--ctp-overlay1); font-size: 0.7rem; font-weight: 500; cursor: pointer; transition: background 0.12s, color 0.12s; text-transform: capitalize; }
|
||||
.seg-btn:not(:last-child) { border-right: 1px solid var(--ctp-surface1); }
|
||||
.seg-btn:hover { background: var(--ctp-surface1); color: var(--ctp-subtext1); }
|
||||
.seg-btn.active { background: color-mix(in srgb, var(--ctp-blue) 20%, var(--ctp-surface0)); color: var(--ctp-blue); font-weight: 600; }
|
||||
|
||||
.num-row { display: flex; align-items: center; gap: 0.25rem; }
|
||||
.num {
|
||||
width: 4.5rem; padding: 0.375rem 0.625rem; background: var(--ctp-surface0); border: 1px solid var(--ctp-surface1);
|
||||
border-radius: 0.25rem; color: var(--ctp-text); font-size: 0.8rem; -moz-appearance: textfield;
|
||||
}
|
||||
.num { width: 4.5rem; padding: 0.375rem 0.625rem; background: var(--ctp-surface0); border: 1px solid var(--ctp-surface1); border-radius: 0.25rem; color: var(--ctp-text); font-size: 0.8rem; -moz-appearance: textfield; }
|
||||
.num::-webkit-inner-spin-button, .num::-webkit-outer-spin-button { -webkit-appearance: none; }
|
||||
.unit { font-size: 0.7rem; color: var(--ctp-overlay0); }
|
||||
|
||||
.btn {
|
||||
padding: 0.375rem 0.75rem; background: var(--ctp-surface0); border: 1px solid var(--ctp-surface1);
|
||||
border-radius: 0.25rem; color: var(--ctp-text); font-size: 0.75rem; cursor: pointer; transition: background 0.12s;
|
||||
}
|
||||
.btn { padding: 0.375rem 0.75rem; background: var(--ctp-surface0); border: 1px solid var(--ctp-surface1); border-radius: 0.25rem; color: var(--ctp-text); font-size: 0.75rem; cursor: pointer; transition: background 0.12s; }
|
||||
.btn:hover { background: var(--ctp-surface1); }
|
||||
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
.btn-row { display: flex; gap: 0.5rem; }
|
||||
|
||||
.plug-list { display: flex; flex-direction: column; gap: 0.375rem; }
|
||||
.plug-row { background: var(--ctp-surface0); border: 1px solid var(--ctp-surface1); border-radius: 0.375rem; padding: 0.5rem 0.625rem; }
|
||||
.plug-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
|
||||
.plug-info { display: flex; align-items: center; gap: 0.375rem; flex: 1; min-width: 0; }
|
||||
.plug-name { font-size: 0.8rem; font-weight: 600; color: var(--ctp-text); white-space: nowrap; }
|
||||
.plug-ver { font-size: 0.65rem; color: var(--ctp-overlay0); }
|
||||
.plug-badge {
|
||||
padding: 0.0625rem 0.375rem; border-radius: 0.75rem; font-size: 0.575rem; font-weight: 600;
|
||||
text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap;
|
||||
}
|
||||
.plug-badge { padding: 0.0625rem 0.375rem; border-radius: 0.75rem; font-size: 0.575rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
|
||||
.plug-badge.loaded { background: color-mix(in srgb, var(--ctp-green) 15%, transparent); color: var(--ctp-green); }
|
||||
.plug-badge.err { background: color-mix(in srgb, var(--ctp-red) 15%, transparent); color: var(--ctp-red); }
|
||||
.plug-badge.off { background: color-mix(in srgb, var(--ctp-overlay0) 15%, transparent); color: var(--ctp-overlay0); }
|
||||
.plug-badge.disc { background: color-mix(in srgb, var(--ctp-blue) 15%, transparent); color: var(--ctp-blue); }
|
||||
.plug-desc { font-size: 0.7rem; color: var(--ctp-overlay1); margin: 0.25rem 0 0; }
|
||||
.plug-err { font-size: 0.65rem; color: var(--ctp-red); margin: 0.25rem 0 0; }
|
||||
|
||||
.hint-block { font-size: 0.75rem; color: var(--ctp-overlay1); margin: 0; line-height: 1.5; }
|
||||
.hint-block code {
|
||||
padding: 0.125rem 0.375rem; background: var(--ctp-surface0); border-radius: 0.1875rem;
|
||||
font-family: var(--term-font-family, monospace); font-size: 0.7rem; color: var(--ctp-text);
|
||||
}
|
||||
.hint-block code { padding: 0.125rem 0.375rem; background: var(--ctp-surface0); border-radius: 0.1875rem; font-family: var(--term-font-family, monospace); font-size: 0.7rem; color: var(--ctp-text); }
|
||||
</style>
|
||||
|
|
|
|||
420
src/lib/settings/categories/SecuritySettings.svelte
Normal file
420
src/lib/settings/categories/SecuritySettings.svelte
Normal file
|
|
@ -0,0 +1,420 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { getSetting, setSetting } from '../../adapters/settings-bridge';
|
||||
import { storeSecret, getSecret, deleteSecret, listSecrets, hasKeyring, knownSecretKeys, SECRET_KEY_LABELS } from '../../adapters/secrets-bridge';
|
||||
|
||||
// Secrets state
|
||||
let keyringAvailable = $state(false);
|
||||
let storedKeys = $state<string[]>([]);
|
||||
let knownKeys = $state<string[]>([]);
|
||||
let revealedKey = $state<string | null>(null);
|
||||
let revealedValue = $state('');
|
||||
let newSecretKey = $state('');
|
||||
let newSecretValue = $state('');
|
||||
let secretsKeyDropdownOpen = $state(false);
|
||||
let secretsSaving = $state(false);
|
||||
|
||||
// Branch policies state
|
||||
let branchPolicies = $state<{ pattern: string; action: 'block' | 'warn' }[]>([]);
|
||||
let newBranchPattern = $state('');
|
||||
let newBranchAction = $state<'block' | 'warn'>('warn');
|
||||
|
||||
// Privacy & telemetry state
|
||||
let telemetryEnabled = $state(false);
|
||||
let retentionDays = $state(90);
|
||||
|
||||
let availableKeysForAdd = $derived(knownKeys.filter(k => !storedKeys.includes(k)));
|
||||
let newSecretKeyLabel = $derived(newSecretKey ? getSecretKeyLabel(newSecretKey) : 'Select key...');
|
||||
|
||||
onMount(async () => {
|
||||
// Load secrets
|
||||
try {
|
||||
keyringAvailable = await hasKeyring();
|
||||
if (keyringAvailable) {
|
||||
storedKeys = await listSecrets();
|
||||
knownKeys = await knownSecretKeys();
|
||||
}
|
||||
} catch {
|
||||
keyringAvailable = false;
|
||||
}
|
||||
|
||||
// Load branch policies
|
||||
const rawPolicies = await getSetting('branch_policies');
|
||||
if (rawPolicies) {
|
||||
try { branchPolicies = JSON.parse(rawPolicies); } catch { branchPolicies = []; }
|
||||
}
|
||||
|
||||
// Load privacy settings
|
||||
const rawTelemetry = await getSetting('telemetry_enabled');
|
||||
telemetryEnabled = rawTelemetry === 'true';
|
||||
const rawRetention = await getSetting('data_retention_days');
|
||||
retentionDays = rawRetention ? parseInt(rawRetention, 10) : 90;
|
||||
});
|
||||
|
||||
async function save(key: string, value: string) {
|
||||
try { await setSetting(key, value); } catch (e) { console.error(`Failed to save ${key}:`, e); }
|
||||
}
|
||||
|
||||
// --- Secrets handlers ---
|
||||
|
||||
function getSecretKeyLabel(key: string): string {
|
||||
return SECRET_KEY_LABELS[key] ?? key;
|
||||
}
|
||||
|
||||
async function handleRevealSecret(key: string) {
|
||||
if (revealedKey === key) {
|
||||
revealedKey = null;
|
||||
revealedValue = '';
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const val = await getSecret(key);
|
||||
revealedKey = key;
|
||||
revealedValue = val ?? '';
|
||||
} catch (e) {
|
||||
console.error(`Failed to reveal secret '${key}':`, e);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSaveSecret() {
|
||||
if (!newSecretKey || !newSecretValue) return;
|
||||
secretsSaving = true;
|
||||
try {
|
||||
await storeSecret(newSecretKey, newSecretValue);
|
||||
storedKeys = await listSecrets();
|
||||
newSecretKey = '';
|
||||
newSecretValue = '';
|
||||
revealedKey = null;
|
||||
revealedValue = '';
|
||||
} catch (e) {
|
||||
console.error('Failed to store secret:', e);
|
||||
} finally {
|
||||
secretsSaving = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDeleteSecret(key: string) {
|
||||
try {
|
||||
await deleteSecret(key);
|
||||
storedKeys = await listSecrets();
|
||||
if (revealedKey === key) {
|
||||
revealedKey = null;
|
||||
revealedValue = '';
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(`Failed to delete secret '${key}':`, e);
|
||||
}
|
||||
}
|
||||
|
||||
// --- Branch policy handlers ---
|
||||
|
||||
function addBranchPolicy() {
|
||||
if (!newBranchPattern.trim()) return;
|
||||
branchPolicies = [...branchPolicies, { pattern: newBranchPattern.trim(), action: newBranchAction }];
|
||||
newBranchPattern = '';
|
||||
newBranchAction = 'warn';
|
||||
save('branch_policies', JSON.stringify(branchPolicies));
|
||||
}
|
||||
|
||||
function removeBranchPolicy(idx: number) {
|
||||
branchPolicies = branchPolicies.filter((_, i) => i !== idx);
|
||||
save('branch_policies', JSON.stringify(branchPolicies));
|
||||
}
|
||||
|
||||
function handleClickOutside(e: MouseEvent) {
|
||||
if (!(e.target as HTMLElement).closest('.custom-dropdown')) {
|
||||
secretsKeyDropdownOpen = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape') secretsKeyDropdownOpen = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window onclick={handleClickOutside} onkeydown={handleKeydown} />
|
||||
|
||||
<!-- Secrets Management -->
|
||||
<section class="section">
|
||||
<h2>Secrets</h2>
|
||||
<div class="secrets-status">
|
||||
<span class="keyring-indicator" class:available={keyringAvailable} class:unavailable={!keyringAvailable}></span>
|
||||
<span class="keyring-label">{keyringAvailable ? 'System keyring available' : 'System keyring unavailable'}</span>
|
||||
</div>
|
||||
|
||||
{#if !keyringAvailable}
|
||||
<div class="secrets-warning">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
||||
<span>System keyring not available. Secrets cannot be stored securely.</span>
|
||||
</div>
|
||||
{:else}
|
||||
{#if storedKeys.length > 0}
|
||||
<div class="secrets-list">
|
||||
{#each storedKeys as key}
|
||||
<div class="secret-row">
|
||||
<div class="secret-info">
|
||||
<span class="secret-key-name">{getSecretKeyLabel(key)}</span>
|
||||
<span class="secret-key-id">{key}</span>
|
||||
</div>
|
||||
<div class="secret-value-area">
|
||||
{#if revealedKey === key}
|
||||
<input type="text" class="secret-value-input" value={revealedValue} readonly />
|
||||
{:else}
|
||||
<span class="secret-masked">{'\u25CF'.repeat(8)}</span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="secret-actions">
|
||||
<button class="secret-btn" title={revealedKey === key ? 'Hide' : 'Reveal'} onclick={() => handleRevealSecret(key)}>
|
||||
{#if revealedKey === key}
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
|
||||
{:else}
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
||||
{/if}
|
||||
</button>
|
||||
<button class="secret-btn secret-btn-danger" title="Delete" onclick={() => handleDeleteSecret(key)}>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4h8v2"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="secret-add-form">
|
||||
<div class="secret-add-row">
|
||||
<div class="custom-dropdown secret-key-dropdown">
|
||||
<button class="dropdown-trigger" onclick={() => { secretsKeyDropdownOpen = !secretsKeyDropdownOpen; }} aria-haspopup="listbox" aria-expanded={secretsKeyDropdownOpen}>
|
||||
<span class="dropdown-label">{newSecretKeyLabel}</span>
|
||||
<span class="dropdown-arrow">{secretsKeyDropdownOpen ? '\u25B4' : '\u25BE'}</span>
|
||||
</button>
|
||||
{#if secretsKeyDropdownOpen}
|
||||
<div class="dropdown-menu" role="listbox">
|
||||
{#each availableKeysForAdd as key}
|
||||
<button class="dropdown-option" class:active={newSecretKey === key} role="option" aria-selected={newSecretKey === key}
|
||||
onclick={() => { newSecretKey = key; secretsKeyDropdownOpen = false; }}>
|
||||
<span class="dropdown-option-label">{getSecretKeyLabel(key)}</span>
|
||||
<span class="secret-key-hint">{key}</span>
|
||||
</button>
|
||||
{/each}
|
||||
{#if availableKeysForAdd.length === 0}
|
||||
<span class="dropdown-empty">All keys configured</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<input type="password" class="secret-value-new" bind:value={newSecretValue} placeholder="Secret value" disabled={!newSecretKey} />
|
||||
<button class="btn-primary" onclick={handleSaveSecret} disabled={!newSecretKey || !newSecretValue || secretsSaving}>
|
||||
{secretsSaving ? 'Saving...' : 'Save'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<!-- Branch Policies -->
|
||||
<section class="section" id="setting-branch-policies">
|
||||
<h2>Branch Policies <span class="pro">Pro</span></h2>
|
||||
<div class="fields">
|
||||
{#if branchPolicies.length > 0}
|
||||
<div class="policy-list">
|
||||
{#each branchPolicies as policy, idx}
|
||||
<div class="policy-row">
|
||||
<span class="policy-pattern">{policy.pattern}</span>
|
||||
<span class="policy-action" class:block={policy.action === 'block'} class:warn={policy.action === 'warn'}>{policy.action}</span>
|
||||
<button class="secret-btn secret-btn-danger" title="Remove" onclick={() => removeBranchPolicy(idx)}>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M8 6V4h8v2"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
<div class="policy-add-form">
|
||||
<div class="policy-add-row">
|
||||
<input class="policy-input" value={newBranchPattern} placeholder="e.g. main, release/*" oninput={e => { newBranchPattern = (e.target as HTMLInputElement).value; }} />
|
||||
<div class="seg-group">
|
||||
<button class="seg-btn" class:active={newBranchAction === 'warn'} onclick={() => { newBranchAction = 'warn'; }}>Warn</button>
|
||||
<button class="seg-btn" class:active={newBranchAction === 'block'} onclick={() => { newBranchAction = 'block'; }}>Block</button>
|
||||
</div>
|
||||
<button class="btn-primary" onclick={addBranchPolicy} disabled={!newBranchPattern.trim()}>Add</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Privacy & Telemetry -->
|
||||
<section class="section">
|
||||
<h2>Privacy & Telemetry</h2>
|
||||
<div class="fields">
|
||||
<div class="field" id="setting-telemetry">
|
||||
<label class="lbl toggle-row">
|
||||
<span>Enable telemetry</span>
|
||||
<button class="toggle" class:on={telemetryEnabled} role="switch" aria-checked={telemetryEnabled}
|
||||
onclick={() => { telemetryEnabled = !telemetryEnabled; save('telemetry_enabled', String(telemetryEnabled)); }}>
|
||||
<span class="thumb"></span>
|
||||
</button>
|
||||
</label>
|
||||
<span class="hint">Send anonymous usage data to help improve BTerminal</span>
|
||||
</div>
|
||||
<div class="field" id="setting-retention">
|
||||
<label for="sec-retention" class="lbl">Data retention</label>
|
||||
<div class="num-row">
|
||||
<input id="sec-retention" type="number" min="1" max="365" value={retentionDays} class="num"
|
||||
onchange={e => { const n = parseInt((e.target as HTMLInputElement).value, 10); if (!isNaN(n) && n >= 1 && n <= 365) { retentionDays = n; save('data_retention_days', String(n)); } }} />
|
||||
<span class="unit">days</span>
|
||||
</div>
|
||||
<span class="hint">How long to keep session history and logs</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
h2 { font-size: 0.875rem; font-weight: 600; color: var(--ctp-text); margin: 0 0 0.625rem; padding-bottom: 0.375rem; border-bottom: 1px solid var(--ctp-surface0); }
|
||||
.section { margin-bottom: 1.25rem; }
|
||||
.fields { display: flex; flex-direction: column; gap: 0.625rem; }
|
||||
.field { display: flex; flex-direction: column; gap: 0.25rem; }
|
||||
.lbl { font-size: 0.7rem; color: var(--ctp-subtext0); text-transform: uppercase; letter-spacing: 0.03em; }
|
||||
.hint { font-size: 0.625rem; color: var(--ctp-overlay0); }
|
||||
|
||||
.toggle-row { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
|
||||
.toggle {
|
||||
position: relative; width: 2rem; height: 1.125rem; border: none; border-radius: 0.5625rem;
|
||||
background: var(--ctp-surface1); cursor: pointer; transition: background 0.2s; padding: 0; flex-shrink: 0;
|
||||
}
|
||||
.toggle.on { background: var(--ctp-blue); }
|
||||
.thumb {
|
||||
position: absolute; top: 0.125rem; left: 0.125rem; width: 0.875rem; height: 0.875rem;
|
||||
border-radius: 50%; background: var(--ctp-text); transition: transform 0.2s;
|
||||
}
|
||||
.toggle.on .thumb { transform: translateX(0.875rem); }
|
||||
|
||||
.num-row { display: flex; align-items: center; gap: 0.25rem; }
|
||||
.num {
|
||||
width: 4.5rem; padding: 0.375rem 0.625rem; background: var(--ctp-surface0); border: 1px solid var(--ctp-surface1);
|
||||
border-radius: 0.25rem; color: var(--ctp-text); font-size: 0.8rem; -moz-appearance: textfield;
|
||||
}
|
||||
.num::-webkit-inner-spin-button, .num::-webkit-outer-spin-button { -webkit-appearance: none; }
|
||||
.unit { font-size: 0.7rem; color: var(--ctp-overlay0); }
|
||||
|
||||
.pro {
|
||||
display: inline-block; font-size: 0.5625rem; padding: 0.0625rem 0.3125rem; background: var(--ctp-peach);
|
||||
color: var(--ctp-base); border-radius: 0.125rem; font-weight: 700; text-transform: uppercase;
|
||||
letter-spacing: 0.04em; vertical-align: middle; margin-left: 0.375rem;
|
||||
}
|
||||
|
||||
.seg-group { display: flex; border-radius: 0.25rem; overflow: hidden; border: 1px solid var(--ctp-surface1); }
|
||||
.seg-btn {
|
||||
flex: 1; padding: 0.25rem 0.5rem; border: none; background: var(--ctp-surface0);
|
||||
color: var(--ctp-overlay1); font-size: 0.7rem; font-weight: 500; cursor: pointer; transition: background 0.12s, color 0.12s;
|
||||
}
|
||||
.seg-btn:not(:last-child) { border-right: 1px solid var(--ctp-surface1); }
|
||||
.seg-btn:hover { background: var(--ctp-surface1); color: var(--ctp-subtext1); }
|
||||
.seg-btn.active { background: color-mix(in srgb, var(--ctp-blue) 20%, var(--ctp-surface0)); color: var(--ctp-blue); font-weight: 600; }
|
||||
|
||||
.btn-primary {
|
||||
padding: 0.3125rem 0.875rem; background: var(--ctp-blue); color: var(--ctp-base); border: none;
|
||||
border-radius: 0.25rem; font-size: 0.78rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: opacity 0.15s;
|
||||
}
|
||||
.btn-primary:hover { opacity: 0.9; }
|
||||
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
|
||||
|
||||
/* --- Secrets --- */
|
||||
.secrets-status { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.625rem; }
|
||||
.keyring-indicator { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
|
||||
.keyring-indicator.available { background: var(--ctp-green); box-shadow: 0 0 4px color-mix(in srgb, var(--ctp-green) 50%, transparent); }
|
||||
.keyring-indicator.unavailable { background: var(--ctp-red); box-shadow: 0 0 4px color-mix(in srgb, var(--ctp-red) 50%, transparent); }
|
||||
.keyring-label { font-size: 0.75rem; color: var(--ctp-subtext0); }
|
||||
|
||||
.secrets-warning {
|
||||
display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.625rem;
|
||||
background: color-mix(in srgb, var(--ctp-red) 8%, var(--ctp-surface0));
|
||||
border: 1px solid color-mix(in srgb, var(--ctp-red) 30%, var(--ctp-surface1));
|
||||
border-radius: 0.375rem; color: var(--ctp-red); font-size: 0.75rem; line-height: 1.4;
|
||||
}
|
||||
.secrets-warning svg { flex-shrink: 0; }
|
||||
|
||||
.secrets-list { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 0.625rem; }
|
||||
.secret-row {
|
||||
display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.625rem;
|
||||
background: var(--ctp-surface0); border: 1px solid var(--ctp-surface1);
|
||||
border-radius: 0.375rem; transition: border-color 0.15s;
|
||||
}
|
||||
.secret-row:hover { border-color: var(--ctp-surface2); }
|
||||
.secret-info { display: flex; flex-direction: column; gap: 0.0625rem; min-width: 0; flex-shrink: 0; }
|
||||
.secret-key-name { font-size: 0.78rem; font-weight: 600; color: var(--ctp-text); white-space: nowrap; }
|
||||
.secret-key-id { font-size: 0.625rem; color: var(--ctp-overlay0); font-family: var(--term-font-family, monospace); }
|
||||
.secret-value-area { flex: 1; min-width: 0; display: flex; align-items: center; }
|
||||
.secret-masked { color: var(--ctp-overlay0); font-size: 0.75rem; letter-spacing: 0.1em; }
|
||||
.secret-value-input {
|
||||
width: 100%; padding: 0.25rem 0.5rem; background: var(--ctp-base); border: 1px solid var(--ctp-surface1);
|
||||
border-radius: 0.25rem; color: var(--ctp-text); font-size: 0.75rem; font-family: var(--term-font-family, monospace);
|
||||
}
|
||||
.secret-actions { display: flex; gap: 0.25rem; flex-shrink: 0; }
|
||||
.secret-btn {
|
||||
display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem;
|
||||
background: transparent; border: 1px solid var(--ctp-surface1); border-radius: 0.25rem;
|
||||
color: var(--ctp-overlay1); cursor: pointer; transition: color 0.15s, background 0.15s, border-color 0.15s;
|
||||
}
|
||||
.secret-btn:hover { color: var(--ctp-text); background: var(--ctp-surface0); border-color: var(--ctp-surface2); }
|
||||
.secret-btn-danger:hover {
|
||||
color: var(--ctp-red); background: color-mix(in srgb, var(--ctp-red) 8%, transparent);
|
||||
border-color: color-mix(in srgb, var(--ctp-red) 30%, var(--ctp-surface1));
|
||||
}
|
||||
.secret-add-form { padding: 0.5rem 0.625rem; background: var(--ctp-mantle); border: 1px dashed var(--ctp-surface1); border-radius: 0.375rem; }
|
||||
.secret-add-row { display: flex; gap: 0.375rem; align-items: stretch; }
|
||||
.secret-key-dropdown { min-width: 10rem; flex-shrink: 0; }
|
||||
.secret-key-hint { font-size: 0.625rem; color: var(--ctp-overlay0); font-family: var(--term-font-family, monospace); margin-left: auto; padding-left: 0.5rem; }
|
||||
.secret-value-new {
|
||||
flex: 1; min-width: 0; padding: 0.375rem 0.625rem; background: var(--ctp-surface0);
|
||||
border: 1px solid var(--ctp-surface1); border-radius: 0.25rem; color: var(--ctp-text); font-size: 0.8rem;
|
||||
}
|
||||
.secret-value-new:disabled { opacity: 0.4; cursor: not-allowed; }
|
||||
.secret-value-new:focus { border-color: var(--ctp-blue); outline: none; }
|
||||
|
||||
/* --- Dropdown (custom select) --- */
|
||||
.custom-dropdown { position: relative; }
|
||||
.dropdown-trigger {
|
||||
display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.375rem 0.625rem;
|
||||
background: var(--ctp-surface0); border: 1px solid var(--ctp-surface1); border-radius: 0.25rem;
|
||||
color: var(--ctp-text); font-size: 0.8rem; cursor: pointer; text-align: left; height: 100%;
|
||||
}
|
||||
.dropdown-trigger:hover { border-color: var(--ctp-surface2); }
|
||||
.dropdown-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.dropdown-arrow { color: var(--ctp-overlay0); font-size: 0.7rem; flex-shrink: 0; }
|
||||
.dropdown-menu {
|
||||
position: absolute; top: calc(100% + 0.25rem); left: 0; min-width: 100%; width: max-content;
|
||||
max-height: 22.5rem; overflow-y: auto; background: var(--ctp-mantle); border: 1px solid var(--ctp-surface1);
|
||||
border-radius: 0.25rem; box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.4); z-index: 100; padding: 0.25rem 0;
|
||||
}
|
||||
.dropdown-option {
|
||||
display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.3125rem 0.625rem;
|
||||
background: transparent; border: none; color: var(--ctp-subtext1); font-size: 0.8rem; cursor: pointer; text-align: left; white-space: nowrap;
|
||||
}
|
||||
.dropdown-option:hover { background: var(--ctp-surface0); color: var(--ctp-text); }
|
||||
.dropdown-option.active { background: var(--ctp-surface0); color: var(--ctp-text); font-weight: 600; }
|
||||
.dropdown-option-label { flex: 1; }
|
||||
.dropdown-empty { display: block; padding: 0.375rem 0.625rem; font-size: 0.75rem; color: var(--ctp-overlay0); font-style: italic; }
|
||||
|
||||
/* --- Branch Policies --- */
|
||||
.policy-list { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 0.625rem; }
|
||||
.policy-row {
|
||||
display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.625rem;
|
||||
background: var(--ctp-surface0); border: 1px solid var(--ctp-surface1);
|
||||
border-radius: 0.375rem; transition: border-color 0.15s;
|
||||
}
|
||||
.policy-row:hover { border-color: var(--ctp-surface2); }
|
||||
.policy-pattern { flex: 1; font-size: 0.78rem; font-family: var(--term-font-family, monospace); color: var(--ctp-text); }
|
||||
.policy-action {
|
||||
font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
|
||||
padding: 0.125rem 0.375rem; border-radius: 0.125rem;
|
||||
}
|
||||
.policy-action.warn { background: color-mix(in srgb, var(--ctp-yellow) 15%, transparent); color: var(--ctp-yellow); }
|
||||
.policy-action.block { background: color-mix(in srgb, var(--ctp-red) 15%, transparent); color: var(--ctp-red); }
|
||||
.policy-add-form { padding: 0.5rem 0.625rem; background: var(--ctp-mantle); border: 1px dashed var(--ctp-surface1); border-radius: 0.375rem; }
|
||||
.policy-add-row { display: flex; gap: 0.375rem; align-items: stretch; }
|
||||
.policy-input {
|
||||
flex: 1; min-width: 0; padding: 0.375rem 0.625rem; background: var(--ctp-surface0);
|
||||
border: 1px solid var(--ctp-surface1); border-radius: 0.25rem; color: var(--ctp-text);
|
||||
font-size: 0.8rem; font-family: var(--term-font-family, monospace);
|
||||
}
|
||||
.policy-input:focus { border-color: var(--ctp-blue); outline: none; }
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue