feat(redesign): re-skin auth + account views to DS (Phase D batch 1)
All checks were successful
Test Asgard Runner / test (push) Successful in 3s
All checks were successful
Test Asgard Runner / test (push) Successful in 3s
Auth (Login/Register/ForgotPassword/SetupWizard) + account cluster (Settings/Team/Notifications) re-skinned onto design-system components + tokens. JPEG login banner replaced with the C-gauge mark + Oxanium wordmark. All logic/store/router/handlers preserved (TOTP flow, validators, save handlers, API endpoints). Build green. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Vantz Stockwell
@@ -3,7 +3,10 @@ import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { useApi } from '@/composables/useApi'
|
||||
import { Server, Wifi, CheckCircle, ArrowRight, Loader2 } from 'lucide-vue-next'
|
||||
import Logo from '@/components/ds/brand/Logo.vue'
|
||||
import Input from '@/components/ds/forms/Input.vue'
|
||||
import Button from '@/components/ds/core/Button.vue'
|
||||
import Alert from '@/components/ds/feedback/Alert.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const auth = useAuthStore()
|
||||
@@ -21,13 +24,25 @@ const serverForm = ref({
|
||||
game_port: 28015,
|
||||
})
|
||||
|
||||
// String mirrors for the DS Input component (which binds defineModel<string>).
|
||||
// Changes sync back to serverForm as numbers before submission.
|
||||
const serverPortStr = ref(String(serverForm.value.server_port))
|
||||
const gamePortStr = ref(String(serverForm.value.game_port))
|
||||
|
||||
function syncPorts() {
|
||||
serverForm.value.server_port = parseInt(serverPortStr.value, 10) || serverForm.value.server_port
|
||||
serverForm.value.game_port = parseInt(gamePortStr.value, 10) || serverForm.value.game_port
|
||||
}
|
||||
|
||||
const connectionTypes = [
|
||||
{ value: 'bare_metal', label: 'Bare Metal / VPS', desc: 'Direct connection via Companion Agent' },
|
||||
{ value: 'bare_metal', label: 'Bare metal / VPS', desc: 'Direct connection via Companion Agent' },
|
||||
{ value: 'amp', label: 'AMP (CubeCoders)', desc: 'Connect through AMP panel API' },
|
||||
{ value: 'pterodactyl', label: 'Pterodactyl', desc: 'Connect through Pterodactyl panel API' },
|
||||
]
|
||||
|
||||
async function submitServerConfig() {
|
||||
syncPorts()
|
||||
|
||||
if (!serverForm.value.server_name.trim()) {
|
||||
error.value = 'Server name is required.'
|
||||
return
|
||||
@@ -58,180 +73,464 @@ async function completeSetup() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen bg-neutral-950 flex items-center justify-center px-4">
|
||||
<div class="w-full max-w-lg">
|
||||
<!-- Progress -->
|
||||
<div class="flex items-center justify-center gap-3 mb-8">
|
||||
<div
|
||||
class="flex items-center gap-2 text-sm"
|
||||
:class="step >= 1 ? 'text-oxide-400' : 'text-neutral-600'"
|
||||
>
|
||||
<Server class="w-4 h-4" />
|
||||
Server
|
||||
</div>
|
||||
<div class="w-8 h-px" :class="step >= 2 ? 'bg-oxide-500' : 'bg-neutral-700'" />
|
||||
<div
|
||||
class="flex items-center gap-2 text-sm"
|
||||
:class="step >= 2 ? 'text-oxide-400' : 'text-neutral-600'"
|
||||
>
|
||||
<Wifi class="w-4 h-4" />
|
||||
Connect
|
||||
</div>
|
||||
<div class="w-8 h-px" :class="step >= 3 ? 'bg-oxide-500' : 'bg-neutral-700'" />
|
||||
<div
|
||||
class="flex items-center gap-2 text-sm"
|
||||
:class="step >= 3 ? 'text-oxide-400' : 'text-neutral-600'"
|
||||
>
|
||||
<CheckCircle class="w-4 h-4" />
|
||||
Done
|
||||
<div class="setup-shell">
|
||||
<div class="setup-wrap">
|
||||
<!-- Brand header -->
|
||||
<div class="setup-brand">
|
||||
<div class="setup-brand__mark">
|
||||
<Logo :size="30" tagline="Setup" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 1: Server Config -->
|
||||
<div v-if="step === 1" class="bg-neutral-900 border border-neutral-800 rounded-lg p-8">
|
||||
<div class="text-center mb-6">
|
||||
<img src="/logo.png" alt="Corrosion" class="h-12 w-12 mx-auto mb-3" />
|
||||
<h1 class="text-xl font-bold text-neutral-100">Configure Your Server</h1>
|
||||
<p class="text-sm text-neutral-500 mt-1">Let's get your Rust server connected to Corrosion.</p>
|
||||
<!-- Progress stepper -->
|
||||
<div class="setup-steps">
|
||||
<div
|
||||
v-for="(s, i) in [
|
||||
{ label: 'Server', icon: 'server' },
|
||||
{ label: 'Connect', icon: 'wifi' },
|
||||
{ label: 'Done', icon: 'check' },
|
||||
]"
|
||||
:key="i"
|
||||
class="setup-step"
|
||||
:class="{
|
||||
'setup-step--active': step === i + 1,
|
||||
'setup-step--done': step > i + 1,
|
||||
}"
|
||||
>
|
||||
<span class="setup-step__num">{{ step > i + 1 ? '✓' : i + 1 }}</span>
|
||||
<span class="setup-step__label">{{ s.label }}</span>
|
||||
<div v-if="i < 2" class="setup-step__connector" :class="step > i + 1 ? 'setup-step__connector--done' : ''" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 1: Server config -->
|
||||
<div v-if="step === 1" class="setup-card">
|
||||
<div class="setup-card__head">
|
||||
<h1 class="setup-card__title">Configure your server</h1>
|
||||
<p class="setup-card__sub">Connect your Rust server to Corrosion.</p>
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="mb-4 p-3 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 text-sm">
|
||||
{{ error }}
|
||||
</div>
|
||||
<Alert v-if="error" tone="danger">{{ error }}</Alert>
|
||||
|
||||
<form @submit.prevent="submitServerConfig" class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-xs text-neutral-500 mb-1">Server Name</label>
|
||||
<input
|
||||
v-model="serverForm.server_name"
|
||||
type="text"
|
||||
required
|
||||
placeholder="My Rust Server"
|
||||
class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 text-sm focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<form class="setup-form" @submit.prevent="submitServerConfig">
|
||||
<Input
|
||||
v-model="serverForm.server_name"
|
||||
label="Server name"
|
||||
type="text"
|
||||
placeholder="My Rust Server"
|
||||
:required="true"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs text-neutral-500 mb-2">Connection Type</label>
|
||||
<div class="space-y-2">
|
||||
<!-- Connection type selector -->
|
||||
<div class="conn-group">
|
||||
<span class="conn-group__label">Connection type</span>
|
||||
<div class="conn-options">
|
||||
<label
|
||||
v-for="ct in connectionTypes"
|
||||
:key="ct.value"
|
||||
class="flex items-start gap-3 p-3 bg-neutral-800 border rounded-lg cursor-pointer transition-colors"
|
||||
:class="serverForm.connection_type === ct.value
|
||||
? 'border-oxide-500/50 bg-oxide-500/5'
|
||||
: 'border-neutral-700 hover:border-neutral-600'"
|
||||
class="conn-option"
|
||||
:class="serverForm.connection_type === ct.value ? 'conn-option--active' : ''"
|
||||
>
|
||||
<input
|
||||
v-model="serverForm.connection_type"
|
||||
:value="ct.value"
|
||||
type="radio"
|
||||
name="connection_type"
|
||||
class="mt-0.5 accent-oxide-500"
|
||||
class="conn-option__radio"
|
||||
/>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-neutral-200">{{ ct.label }}</p>
|
||||
<p class="text-xs text-neutral-500">{{ ct.desc }}</p>
|
||||
<div class="conn-option__body">
|
||||
<span class="conn-option__name">{{ ct.label }}</span>
|
||||
<span class="conn-option__desc">{{ ct.desc }}</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
<div class="col-span-1">
|
||||
<label class="block text-xs text-neutral-500 mb-1">Server IP</label>
|
||||
<input
|
||||
v-model="serverForm.server_ip"
|
||||
type="text"
|
||||
placeholder="0.0.0.0"
|
||||
class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 placeholder-neutral-500 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs text-neutral-500 mb-1">RCON Port</label>
|
||||
<input
|
||||
v-model.number="serverForm.server_port"
|
||||
type="number"
|
||||
class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs text-neutral-500 mb-1">Game Port</label>
|
||||
<input
|
||||
v-model.number="serverForm.game_port"
|
||||
type="number"
|
||||
class="w-full px-3 py-2.5 bg-neutral-800 border border-neutral-700 rounded-lg text-neutral-100 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-oxide-500/50 focus:border-oxide-500 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<!-- Port / IP row -->
|
||||
<div class="setup-ports">
|
||||
<Input
|
||||
v-model="serverForm.server_ip"
|
||||
label="Server IP"
|
||||
type="text"
|
||||
placeholder="0.0.0.0"
|
||||
:mono="true"
|
||||
/>
|
||||
<Input
|
||||
v-model="serverPortStr"
|
||||
label="RCON port"
|
||||
type="text"
|
||||
placeholder="28016"
|
||||
:mono="true"
|
||||
/>
|
||||
<Input
|
||||
v-model="gamePortStr"
|
||||
label="Game port"
|
||||
type="text"
|
||||
placeholder="28015"
|
||||
:mono="true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
<Button
|
||||
type="submit"
|
||||
:disabled="isLoading"
|
||||
class="w-full flex items-center justify-center gap-2 py-2.5 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 text-white font-medium rounded-lg transition-colors"
|
||||
:loading="isLoading"
|
||||
:block="true"
|
||||
size="md"
|
||||
icon-right="arrow-right"
|
||||
>
|
||||
<Loader2 v-if="isLoading" class="w-4 h-4 animate-spin" />
|
||||
<template v-else>
|
||||
Continue
|
||||
<ArrowRight class="w-4 h-4" />
|
||||
</template>
|
||||
</button>
|
||||
Continue
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Step 2: Connection Instructions -->
|
||||
<div v-if="step === 2" class="bg-neutral-900 border border-neutral-800 rounded-lg p-8">
|
||||
<div class="text-center mb-6">
|
||||
<Wifi class="w-10 h-10 text-oxide-500 mx-auto mb-3" />
|
||||
<h1 class="text-xl font-bold text-neutral-100">Install the Companion Agent</h1>
|
||||
<p class="text-sm text-neutral-500 mt-1">
|
||||
The Companion Agent runs on your server and connects to Corrosion securely — no inbound ports required.
|
||||
</p>
|
||||
<!-- Step 2: Companion agent install -->
|
||||
<div v-if="step === 2" class="setup-card">
|
||||
<div class="setup-card__head setup-card__head--center">
|
||||
<div class="setup-icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="M5 12.55a11 11 0 0 1 14.08 0M1.42 9a16 16 0 0 1 21.16 0M8.53 16.11a6 6 0 0 1 6.95 0M12 20h.01" />
|
||||
</svg>
|
||||
</div>
|
||||
<h1 class="setup-card__title">Install the Companion Agent</h1>
|
||||
<p class="setup-card__sub">The agent runs on your server and connects to Corrosion — no inbound ports required.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-black/50 border border-neutral-800 rounded-lg p-4 font-mono text-sm text-neutral-300 mb-6">
|
||||
<p class="text-neutral-500 mb-2"># Download and install the Companion Agent</p>
|
||||
<p class="text-oxide-400">curl -sSL https://get.corrosionmgmt.com | sh</p>
|
||||
<p class="text-neutral-500 mt-3 mb-2"># Start the agent with your license key</p>
|
||||
<p class="text-oxide-400">corrosion-agent start --key {{ auth.license?.license_key || 'YOUR-LICENSE-KEY' }}</p>
|
||||
<div class="setup-code">
|
||||
<p class="setup-code__comment"># Download and install the Companion Agent</p>
|
||||
<p class="setup-code__cmd">curl -sSL https://get.corrosionmgmt.com | sh</p>
|
||||
<p class="setup-code__comment setup-code__comment--mt"># Start the agent with your license key</p>
|
||||
<p class="setup-code__cmd">corrosion-agent start --key {{ auth.license?.license_key ?? 'YOUR-LICENSE-KEY' }}</p>
|
||||
</div>
|
||||
|
||||
<p class="text-xs text-neutral-500 text-center mb-6">
|
||||
The agent will automatically register with your panel. You can also use the uMod plugin for lightweight integration.
|
||||
<p class="setup-hint">
|
||||
The agent auto-registers with your panel. You can also use the uMod plugin for lightweight integration.
|
||||
</p>
|
||||
|
||||
<div class="flex gap-3">
|
||||
<button
|
||||
<div class="setup-actions">
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
size="md"
|
||||
@click="step = 3"
|
||||
class="flex-1 py-2.5 bg-neutral-800 hover:bg-neutral-700 text-neutral-300 font-medium rounded-lg text-sm transition-colors text-center"
|
||||
>
|
||||
Skip for Now
|
||||
</button>
|
||||
<button
|
||||
Skip for now
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="md"
|
||||
icon-right="arrow-right"
|
||||
@click="step = 3"
|
||||
class="flex-1 flex items-center justify-center gap-2 py-2.5 bg-oxide-600 hover:bg-oxide-700 text-white font-medium rounded-lg text-sm transition-colors"
|
||||
>
|
||||
I've Installed It
|
||||
<ArrowRight class="w-4 h-4" />
|
||||
</button>
|
||||
I've installed it
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 3: Complete -->
|
||||
<div v-if="step === 3" class="bg-neutral-900 border border-neutral-800 rounded-lg p-8 text-center">
|
||||
<CheckCircle class="w-12 h-12 text-green-400 mx-auto mb-4" />
|
||||
<h1 class="text-xl font-bold text-neutral-100 mb-2">You're All Set</h1>
|
||||
<p class="text-sm text-neutral-500 mb-6">
|
||||
Your server is configured. Head to the dashboard to start managing your Rust server.
|
||||
</p>
|
||||
<button
|
||||
<div v-if="step === 3" class="setup-card setup-card--center">
|
||||
<div class="setup-complete-icon">
|
||||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
|
||||
<polyline points="22 4 12 14.01 9 11.01" />
|
||||
</svg>
|
||||
</div>
|
||||
<h1 class="setup-card__title">You're all set</h1>
|
||||
<p class="setup-card__sub">Your server is configured. Head to the dashboard to start managing your Rust server.</p>
|
||||
<Button
|
||||
type="button"
|
||||
:loading="isLoading"
|
||||
:block="true"
|
||||
size="md"
|
||||
@click="completeSetup"
|
||||
:disabled="isLoading"
|
||||
class="w-full py-2.5 bg-oxide-600 hover:bg-oxide-700 disabled:opacity-50 text-white font-medium rounded-lg transition-colors"
|
||||
>
|
||||
Go to Dashboard
|
||||
</button>
|
||||
Go to dashboard
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.setup-shell {
|
||||
min-height: 100vh;
|
||||
background: var(--surface-canvas);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.setup-wrap {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-6);
|
||||
}
|
||||
|
||||
/* Brand */
|
||||
.setup-brand {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.setup-brand__mark {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* Progress stepper */
|
||||
.setup-steps {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.setup-step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.setup-step__num {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 700;
|
||||
background: var(--surface-raised);
|
||||
box-shadow: var(--ring-default);
|
||||
color: var(--text-muted);
|
||||
flex: none;
|
||||
transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease;
|
||||
}
|
||||
|
||||
.setup-step--active .setup-step__num {
|
||||
background: var(--accent-soft);
|
||||
box-shadow: inset 0 0 0 1px var(--accent-border);
|
||||
color: var(--accent-text);
|
||||
}
|
||||
|
||||
.setup-step--done .setup-step__num {
|
||||
background: var(--accent);
|
||||
box-shadow: none;
|
||||
color: var(--accent-contrast);
|
||||
}
|
||||
|
||||
.setup-step__label {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.setup-step--active .setup-step__label,
|
||||
.setup-step--done .setup-step__label {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.setup-step__connector {
|
||||
width: 40px;
|
||||
height: 1px;
|
||||
background: var(--border-default);
|
||||
margin: 0 var(--space-2);
|
||||
flex: none;
|
||||
transition: background 200ms ease;
|
||||
}
|
||||
|
||||
.setup-step__connector--done {
|
||||
background: var(--accent-border);
|
||||
}
|
||||
|
||||
/* Card */
|
||||
.setup-card {
|
||||
background: var(--surface-base);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--ring-default), var(--shadow-lg);
|
||||
padding: var(--space-8);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.setup-card--center {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.setup-card__head {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1-5);
|
||||
}
|
||||
|
||||
.setup-card__head--center {
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.setup-card__title {
|
||||
margin: 0;
|
||||
font-size: var(--text-xl);
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: var(--tracking-tight);
|
||||
}
|
||||
|
||||
.setup-card__sub {
|
||||
margin: 0;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
line-height: var(--leading-normal);
|
||||
}
|
||||
|
||||
/* Icon in step 2 header */
|
||||
.setup-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--accent-soft);
|
||||
box-shadow: inset 0 0 0 1px var(--accent-border);
|
||||
color: var(--accent-text);
|
||||
flex: none;
|
||||
}
|
||||
|
||||
/* Step 3 check icon */
|
||||
.setup-complete-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--status-online-soft);
|
||||
box-shadow: inset 0 0 0 1px var(--status-online-border);
|
||||
color: var(--status-online);
|
||||
}
|
||||
|
||||
/* Form */
|
||||
.setup-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
/* Connection type group */
|
||||
.conn-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1-5);
|
||||
}
|
||||
|
||||
.conn-group__label {
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.conn-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.conn-option {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3);
|
||||
background: var(--surface-inset);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--ring-default);
|
||||
cursor: pointer;
|
||||
transition: box-shadow 120ms ease, background 120ms ease;
|
||||
}
|
||||
|
||||
.conn-option--active {
|
||||
background: var(--accent-soft);
|
||||
box-shadow: inset 0 0 0 1px var(--accent-border);
|
||||
}
|
||||
|
||||
.conn-option__radio {
|
||||
margin-top: 2px;
|
||||
accent-color: var(--accent);
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.conn-option__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.conn-option__name {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.conn-option__desc {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
/* Port grid */
|
||||
.setup-ports {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 1fr;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
/* Code block */
|
||||
.setup-code {
|
||||
background: var(--surface-sunken);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--ring-subtle);
|
||||
padding: var(--space-4) var(--space-5);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
line-height: 1.8;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.setup-code__comment {
|
||||
margin: 0;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.setup-code__comment--mt {
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
|
||||
.setup-code__cmd {
|
||||
margin: 0;
|
||||
color: var(--accent-text);
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.setup-hint {
|
||||
margin: 0;
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-tertiary);
|
||||
text-align: center;
|
||||
line-height: var(--leading-normal);
|
||||
}
|
||||
|
||||
.setup-actions {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.setup-actions > * {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user