mirror of https://github.com/ospab/ostp.git
1008 lines
26 KiB
CSS
1008 lines
26 KiB
CSS
/* ═══════════════════════════════════════════════════════════════════════════
|
|
OSTP Client — Design System v2
|
|
Minimal dark with vivid accents. Glassmorphism. No frameworks.
|
|
═══════════════════════════════════════════════════════════════════════════ */
|
|
|
|
/* ── Tokens — Dark (default) ─────────────────────────────────────────────── */
|
|
:root {
|
|
/* Colors */
|
|
--c-bg: #08080f;
|
|
--c-surface: #0f0f1a;
|
|
--c-card: rgba(255,255,255,0.04);
|
|
--c-card-border: rgba(255,255,255,0.07);
|
|
|
|
--c-accent: #6c72ff;
|
|
--c-accent-2: #a78bfa;
|
|
--c-accent-glow: rgba(108,114,255,0.35);
|
|
--c-accent-dim: rgba(108,114,255,0.12);
|
|
|
|
--c-green: #22d3a5;
|
|
--c-green-glow: rgba(34,211,165,0.35);
|
|
--c-green-dim: rgba(34,211,165,0.10);
|
|
|
|
--c-amber: #f59e0b;
|
|
--c-red: #f87171;
|
|
|
|
--c-txt-1: #e2e4f0;
|
|
--c-txt-2: #636882;
|
|
--c-txt-3: #343647;
|
|
|
|
/* Radii */
|
|
--r-xs: 6px;
|
|
--r-sm: 10px;
|
|
--r-md: 14px;
|
|
--r-lg: 20px;
|
|
--r-full: 9999px;
|
|
|
|
/* Transitions */
|
|
--t-fast: 150ms ease;
|
|
--t-med: 280ms cubic-bezier(0.4,0,0.2,1);
|
|
--t-slow: 420ms cubic-bezier(0.34,1.56,0.64,1);
|
|
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
color: var(--c-txt-1);
|
|
}
|
|
|
|
/* ── Tokens — Light theme override ────────────────────────────────────────── */
|
|
[data-theme="light"] {
|
|
--c-bg: #f0f2fa;
|
|
--c-surface: #ffffff;
|
|
--c-card: rgba(255,255,255,0.75);
|
|
--c-card-border: rgba(0,0,0,0.08);
|
|
|
|
--c-accent: #5b61f0;
|
|
--c-accent-2: #8b5cf6;
|
|
--c-accent-glow: rgba(91,97,240,0.25);
|
|
--c-accent-dim: rgba(91,97,240,0.10);
|
|
|
|
--c-green: #10b981;
|
|
--c-green-glow: rgba(16,185,129,0.25);
|
|
--c-green-dim: rgba(16,185,129,0.10);
|
|
|
|
--c-amber: #d97706;
|
|
--c-red: #ef4444;
|
|
|
|
--c-txt-1: #0f1020;
|
|
--c-txt-2: #5a5f7a;
|
|
--c-txt-3: #b0b4cc;
|
|
}
|
|
|
|
/* ── Light theme element overrides ───────────────────────────────────────── */
|
|
html[data-theme="light"],
|
|
html[data-theme="light"] body {
|
|
background: var(--c-bg);
|
|
}
|
|
|
|
html[data-theme="light"] .blob-1 { opacity: 0.08; }
|
|
html[data-theme="light"] .blob-2 { opacity: 0.06; }
|
|
|
|
html[data-theme="light"] .power-btn {
|
|
background: var(--c-surface);
|
|
box-shadow:
|
|
0 0 0 8px rgba(0,0,0,0.04),
|
|
0 8px 32px rgba(0,0,0,0.12);
|
|
}
|
|
|
|
html[data-theme="light"] .server-badge {
|
|
background: rgba(0,0,0,0.05);
|
|
border-color: rgba(0,0,0,0.10);
|
|
color: rgba(0,0,0,0.65);
|
|
}
|
|
|
|
html[data-theme="light"] .ping-test-box {
|
|
background: rgba(0,0,0,0.04);
|
|
border-color: rgba(0,0,0,0.07);
|
|
}
|
|
|
|
html[data-theme="light"] .ping-test-title { color: rgba(0,0,0,0.35); }
|
|
html[data-theme="light"] .ping-test-value { color: rgba(0,0,0,0.65); }
|
|
|
|
html[data-theme="light"] .metrics-bar {
|
|
background: rgba(0,0,0,0.04);
|
|
border-top-color: rgba(0,0,0,0.08);
|
|
}
|
|
|
|
html[data-theme="light"] .metric-sep { background: rgba(0,0,0,0.12); }
|
|
html[data-theme="light"] .metric-label { color: rgba(0,0,0,0.45); }
|
|
|
|
html[data-theme="light"] .field-input {
|
|
background: rgba(0,0,0,0.04);
|
|
border-color: rgba(0,0,0,0.10);
|
|
}
|
|
|
|
html[data-theme="light"] .field-input::placeholder { color: var(--c-txt-3); }
|
|
|
|
html[data-theme="light"] .toggle-track {
|
|
background: rgba(0,0,0,0.08);
|
|
border-color: rgba(0,0,0,0.12);
|
|
}
|
|
|
|
html[data-theme="light"] .toggle-row {
|
|
border-top-color: rgba(0,0,0,0.06);
|
|
}
|
|
|
|
html[data-theme="light"] .section-head {
|
|
border-top-color: rgba(0,0,0,0.06);
|
|
}
|
|
|
|
html[data-theme="light"] .card.scrollable {
|
|
scrollbar-color: rgba(0,0,0,0.12) transparent;
|
|
}
|
|
html[data-theme="light"] .card.scrollable::-webkit-scrollbar-thumb {
|
|
background: rgba(0,0,0,0.12);
|
|
}
|
|
|
|
html[data-theme="light"] .toast {
|
|
background: rgba(255,255,255,0.95);
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
html[data-theme="light"] .icon-btn:hover {
|
|
border-color: rgba(0,0,0,0.14);
|
|
color: var(--c-txt-1);
|
|
background: rgba(0,0,0,0.06);
|
|
}
|
|
|
|
/* ── Theme toggle button ─────────────────────────────────────────────────── */
|
|
.theme-toggle-btn {
|
|
width: 34px; height: 34px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
border-radius: var(--r-sm);
|
|
border: 1px solid var(--c-card-border);
|
|
background: var(--c-card);
|
|
color: var(--c-txt-2);
|
|
transition: all var(--t-fast);
|
|
backdrop-filter: blur(8px);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.theme-toggle-btn:hover {
|
|
border-color: var(--c-accent);
|
|
color: var(--c-accent);
|
|
}
|
|
|
|
.theme-toggle-btn:active { transform: scale(0.93); }
|
|
|
|
/* sun icon — shown in dark mode */
|
|
.theme-toggle-btn .icon-sun { display: block; }
|
|
.theme-toggle-btn .icon-moon { display: none; }
|
|
html[data-theme="light"] .theme-toggle-btn .icon-sun { display: none; }
|
|
html[data-theme="light"] .theme-toggle-btn .icon-moon { display: block; }
|
|
|
|
/* ── Reset ────────────────────────────────────────────────────────────────── */
|
|
*, *::before, *::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--c-bg);
|
|
overflow: hidden;
|
|
user-select: none;
|
|
}
|
|
|
|
button { cursor: pointer; font-family: inherit; }
|
|
input, textarea { font-family: inherit; }
|
|
|
|
/* ── App root ─────────────────────────────────────────────────────────────── */
|
|
.app-root {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ── Ambient blobs ────────────────────────────────────────────────────────── */
|
|
.ambient {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.blob {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(100px);
|
|
will-change: transform;
|
|
}
|
|
|
|
.blob-1 {
|
|
width: 400px; height: 400px;
|
|
background: var(--c-accent);
|
|
opacity: 0.15;
|
|
top: -150px; right: -100px;
|
|
animation: blob-drift 28s infinite alternate ease-in-out;
|
|
}
|
|
|
|
.blob-2 {
|
|
width: 350px; height: 350px;
|
|
background: var(--c-green);
|
|
opacity: 0.10;
|
|
bottom: -100px; left: -100px;
|
|
animation: blob-drift 22s infinite alternate-reverse ease-in-out;
|
|
}
|
|
|
|
@keyframes blob-drift {
|
|
from { transform: translate(0, 0); }
|
|
to { transform: translate(30px, 20px); }
|
|
}
|
|
|
|
/* ── Screen system ────────────────────────────────────────────────────────── */
|
|
.screen {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 2;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0 18px;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transform: translateX(16px);
|
|
transition: opacity var(--t-med), transform var(--t-med);
|
|
}
|
|
|
|
.screen.active {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
transform: translateX(0);
|
|
z-index: 3;
|
|
}
|
|
|
|
/* ── Top bar ──────────────────────────────────────────────────────────────── */
|
|
.topbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 14px 0 12px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.brand-dot {
|
|
width: 7px; height: 7px;
|
|
border-radius: 2px;
|
|
background: var(--c-accent);
|
|
box-shadow: 0 0 10px var(--c-accent);
|
|
transition: background var(--t-med), box-shadow var(--t-med);
|
|
}
|
|
|
|
.brand-dot.connected {
|
|
background: var(--c-green);
|
|
box-shadow: 0 0 14px var(--c-green-glow);
|
|
}
|
|
|
|
.brand-dot.connecting {
|
|
animation: dot-pulse 1.6s infinite ease-in-out;
|
|
}
|
|
|
|
@keyframes dot-pulse {
|
|
0%, 100% { opacity: 1; box-shadow: 0 0 10px var(--c-accent); }
|
|
50% { opacity: 0.4; box-shadow: 0 0 4px var(--c-accent); }
|
|
}
|
|
|
|
.brand-name {
|
|
font-size: 0.78rem;
|
|
font-weight: 700;
|
|
letter-spacing: 3px;
|
|
text-transform: uppercase;
|
|
color: var(--c-txt-2);
|
|
}
|
|
|
|
.topbar-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.topbar-title {
|
|
font-size: 0.78rem;
|
|
font-weight: 600;
|
|
letter-spacing: 1.5px;
|
|
text-transform: uppercase;
|
|
color: var(--c-txt-2);
|
|
}
|
|
|
|
/* ── Pill + icon buttons ──────────────────────────────────────────────────── */
|
|
.pill-btn {
|
|
height: 28px;
|
|
padding: 0 10px;
|
|
border-radius: var(--r-full);
|
|
border: 1px solid var(--c-card-border);
|
|
background: var(--c-card);
|
|
color: var(--c-txt-2);
|
|
font-size: 0.62rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.8px;
|
|
transition: all var(--t-fast);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.pill-btn:hover {
|
|
border-color: var(--c-accent);
|
|
color: var(--c-accent);
|
|
}
|
|
|
|
.icon-btn {
|
|
width: 34px; height: 34px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
border-radius: var(--r-sm);
|
|
border: 1px solid var(--c-card-border);
|
|
background: var(--c-card);
|
|
color: var(--c-txt-2);
|
|
transition: all var(--t-fast);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.icon-btn:hover {
|
|
border-color: rgba(255,255,255,0.12);
|
|
color: var(--c-txt-1);
|
|
background: rgba(255,255,255,0.06);
|
|
}
|
|
|
|
.icon-btn:active { transform: scale(0.93); }
|
|
|
|
/* ── Main stage (home) ────────────────────────────────────────────────────── */
|
|
.stage {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 22px;
|
|
}
|
|
|
|
/* ── Orbit system ─────────────────────────────────────────────────────────── */
|
|
.orbit-wrap {
|
|
position: relative;
|
|
width: 200px; height: 200px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
}
|
|
|
|
.orbit {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
border: 1px solid transparent;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.4s ease, border-color 0.4s ease;
|
|
}
|
|
|
|
.orbit-1 { width: 100%; height: 100%; }
|
|
.orbit-2 { width: 138%; height: 138%; }
|
|
.orbit-3 { width: 172%; height: 172%; }
|
|
|
|
/* Connected state orbits */
|
|
.orbit-wrap.connected .orbit {
|
|
animation: orbit-spin 3.5s linear infinite;
|
|
border-color: rgba(34,211,165,0.2);
|
|
opacity: 1;
|
|
}
|
|
|
|
.orbit-wrap.connected .orbit-2 { animation-duration: 5s; animation-direction: reverse; border-color: rgba(34,211,165,0.12); }
|
|
.orbit-wrap.connected .orbit-3 { animation-duration: 8s; border-color: rgba(34,211,165,0.06); }
|
|
|
|
/* Connecting state orbits */
|
|
.orbit-wrap.connecting .orbit {
|
|
animation: orbit-spin 2s linear infinite;
|
|
border-color: rgba(108,114,255,0.2);
|
|
opacity: 1;
|
|
}
|
|
|
|
.orbit-wrap.connecting .orbit-2 { animation-duration: 3s; animation-direction: reverse; border-color: rgba(108,114,255,0.12); }
|
|
.orbit-wrap.connecting .orbit-3 { animation-duration: 5s; border-color: rgba(108,114,255,0.07); }
|
|
|
|
@keyframes orbit-spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* ── Power button ─────────────────────────────────────────────────────────── */
|
|
.power-btn {
|
|
position: relative;
|
|
z-index: 4;
|
|
width: 110px; height: 110px;
|
|
border-radius: 50%;
|
|
border: 1.5px solid var(--c-card-border);
|
|
background: var(--c-surface);
|
|
color: var(--c-txt-3);
|
|
display: flex; align-items: center; justify-content: center;
|
|
transition: all var(--t-slow);
|
|
box-shadow:
|
|
0 0 0 8px rgba(255,255,255,0.02),
|
|
0 8px 32px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.power-btn:hover {
|
|
border-color: var(--c-accent);
|
|
color: var(--c-accent);
|
|
box-shadow:
|
|
0 0 0 8px var(--c-accent-dim),
|
|
0 0 40px var(--c-accent-glow),
|
|
0 8px 32px rgba(0,0,0,0.4);
|
|
transform: scale(1.04);
|
|
}
|
|
|
|
.power-btn:active { transform: scale(0.96); }
|
|
|
|
.power-btn.connected {
|
|
border-color: var(--c-green);
|
|
color: var(--c-green);
|
|
background: var(--c-green-dim);
|
|
box-shadow:
|
|
0 0 0 8px rgba(34,211,165,0.06),
|
|
0 0 50px var(--c-green-glow),
|
|
0 8px 32px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.power-btn.connecting {
|
|
border-color: var(--c-accent);
|
|
color: var(--c-accent);
|
|
animation: btn-breathe 2s infinite ease-in-out;
|
|
}
|
|
|
|
@keyframes btn-breathe {
|
|
0%, 100% { box-shadow: 0 0 0 8px rgba(108,114,255,0.04), 0 0 20px var(--c-accent-dim), 0 8px 32px rgba(0,0,0,0.4); }
|
|
50% { box-shadow: 0 0 0 8px rgba(108,114,255,0.10), 0 0 50px var(--c-accent-glow), 0 8px 32px rgba(0,0,0,0.3); }
|
|
}
|
|
|
|
.power-icon {
|
|
display: flex; align-items: center; justify-content: center;
|
|
transition: transform var(--t-med);
|
|
}
|
|
|
|
.power-btn:hover .power-icon { transform: scale(1.08); }
|
|
|
|
/* ── Status text ──────────────────────────────────────────────────────────── */
|
|
.status-block {
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
|
|
.status-label {
|
|
font-size: 1.05rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.2px;
|
|
color: var(--c-txt-2);
|
|
transition: color var(--t-med);
|
|
}
|
|
|
|
.status-label.is-connecting { color: var(--c-accent); }
|
|
.status-label.is-connected {
|
|
color: var(--c-green);
|
|
text-shadow: 0 0 24px var(--c-green-glow);
|
|
}
|
|
.status-label.is-error { color: var(--c-red); }
|
|
|
|
.status-sub {
|
|
font-size: 0.72rem;
|
|
color: var(--c-txt-2);
|
|
font-weight: 400;
|
|
letter-spacing: 0.1px;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* ── Connection info ──────────────────────────────────────────────────────── */
|
|
.connection-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 16px;
|
|
width: 100%;
|
|
transition: all var(--t-med);
|
|
}
|
|
|
|
.connection-info.hidden {
|
|
opacity: 0; pointer-events: none; transform: translateY(4px);
|
|
}
|
|
|
|
.server-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 12px 20px;
|
|
border-radius: 30px;
|
|
background: rgba(255,255,255,0.08);
|
|
border: 1px solid rgba(255,255,255,0.15);
|
|
font-size: 0.95rem;
|
|
color: rgba(255,255,255,0.7);
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-weight: 600;
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.ping-test-box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: calc(100% - 64px);
|
|
max-width: 400px;
|
|
padding: 12px 16px;
|
|
background: rgba(255,255,255,0.03);
|
|
border-radius: 20px;
|
|
border: 1px solid rgba(255,255,255,0.06);
|
|
}
|
|
|
|
.ping-test-left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.ping-test-title {
|
|
font-size: 0.62rem;
|
|
font-weight: 700;
|
|
color: rgba(255,255,255,0.38);
|
|
letter-spacing: 0.8px;
|
|
}
|
|
|
|
.ping-test-value {
|
|
font-size: 0.9rem;
|
|
font-weight: 700;
|
|
color: rgba(255,255,255,0.7);
|
|
transition: color var(--t-fast);
|
|
}
|
|
|
|
.ping-test-value.good { color: var(--c-green); }
|
|
.ping-test-value.warn { color: var(--c-amber); }
|
|
.ping-test-value.bad { color: var(--c-red); }
|
|
|
|
.ping-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background: var(--c-accent-dim);
|
|
border: none;
|
|
padding: 8px 12px;
|
|
border-radius: 12px;
|
|
color: var(--c-accent);
|
|
font-size: 0.8rem;
|
|
font-weight: 700;
|
|
transition: all var(--t-fast);
|
|
}
|
|
|
|
.ping-btn:hover {
|
|
background: rgba(108,114,255,0.2);
|
|
transform: scale(1.03);
|
|
}
|
|
.ping-btn:active { transform: scale(0.96); }
|
|
|
|
/* ── Metrics bar ──────────────────────────────────────────────────────────── */
|
|
.metrics-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0;
|
|
padding: 24px 20px;
|
|
flex-shrink: 0;
|
|
background: rgba(255,255,255,0.04);
|
|
border-top: 1px solid rgba(255,255,255,0.08);
|
|
margin: 0 -18px;
|
|
padding-inline: 18px;
|
|
}
|
|
|
|
.metric {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.metric-sep {
|
|
width: 1px;
|
|
height: 40px;
|
|
background: rgba(255,255,255,0.15);
|
|
flex-shrink: 0;
|
|
margin: 0 4px;
|
|
}
|
|
|
|
.metric-icon {
|
|
width: 36px; height: 36px;
|
|
border-radius: 10px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.down-icon { background: var(--c-green-dim); color: var(--c-green); }
|
|
.up-icon { background: var(--c-accent-dim); color: var(--c-accent); }
|
|
|
|
.metric-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.metric-label {
|
|
font-size: 0.75rem;
|
|
color: rgba(255,255,255,0.54);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.8px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.metric-value {
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--c-txt-1);
|
|
font-family: 'JetBrains Mono', monospace;
|
|
}
|
|
|
|
/* ── Settings screen layout ───────────────────────────────────────────────── */
|
|
.settings-body {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
overflow: hidden;
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
/* ── Import row ───────────────────────────────────────────────────────────── */
|
|
.import-row {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.import-input {
|
|
flex: 1;
|
|
height: 38px;
|
|
padding: 0 12px;
|
|
border-radius: var(--r-sm);
|
|
border: 1px solid var(--c-card-border);
|
|
background: var(--c-card);
|
|
color: var(--c-txt-1);
|
|
font-size: 0.78rem;
|
|
outline: none;
|
|
transition: border-color var(--t-fast);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.import-input:focus { border-color: var(--c-accent); }
|
|
.import-input::placeholder { color: var(--c-txt-3); }
|
|
|
|
.accent-btn {
|
|
height: 38px;
|
|
padding: 0 16px;
|
|
border-radius: var(--r-sm);
|
|
border: none;
|
|
background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
|
|
color: #fff;
|
|
font-size: 0.72rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.3px;
|
|
transition: opacity var(--t-fast), transform var(--t-fast);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.accent-btn:hover { opacity: 0.88; }
|
|
.accent-btn:active { transform: scale(0.96); }
|
|
|
|
/* ── Card (scrollable form) ───────────────────────────────────────────────── */
|
|
.card {
|
|
background: var(--c-card);
|
|
border: 1px solid var(--c-card-border);
|
|
border-radius: var(--r-lg);
|
|
padding: 16px 14px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
|
|
.card.scrollable {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(255,255,255,0.08) transparent;
|
|
}
|
|
|
|
.card.scrollable::-webkit-scrollbar { width: 3px; }
|
|
.card.scrollable::-webkit-scrollbar-track { background: transparent; }
|
|
.card.scrollable::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 10px; }
|
|
|
|
/* ── Form fields ──────────────────────────────────────────────────────────── */
|
|
.field-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
|
|
.field-label {
|
|
font-size: 0.62rem;
|
|
font-weight: 600;
|
|
color: var(--c-txt-2);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.7px;
|
|
}
|
|
|
|
.field-input {
|
|
width: 100%;
|
|
background: rgba(0,0,0,0.25);
|
|
border: 1px solid rgba(255,255,255,0.06);
|
|
border-radius: var(--r-sm);
|
|
padding: 9px 11px;
|
|
color: var(--c-txt-1);
|
|
font-size: 0.82rem;
|
|
outline: none;
|
|
transition: border-color var(--t-fast), box-shadow var(--t-fast);
|
|
}
|
|
|
|
.field-input:focus {
|
|
border-color: var(--c-accent);
|
|
box-shadow: 0 0 0 3px var(--c-accent-dim);
|
|
}
|
|
|
|
.field-input::placeholder { color: var(--c-txt-3); }
|
|
|
|
.field-input.mono {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 0.75rem;
|
|
resize: vertical;
|
|
min-height: 46px;
|
|
max-height: 90px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Input with icon overlay */
|
|
.input-wrap {
|
|
position: relative;
|
|
}
|
|
|
|
.field-input.has-icon { padding-right: 38px; }
|
|
|
|
.peek-btn {
|
|
position: absolute;
|
|
right: 8px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: none;
|
|
border: none;
|
|
color: var(--c-txt-3);
|
|
display: flex; align-items: center;
|
|
padding: 4px;
|
|
border-radius: var(--r-xs);
|
|
transition: color var(--t-fast);
|
|
}
|
|
|
|
.peek-btn:hover { color: var(--c-txt-1); }
|
|
|
|
/* ── Toggle ───────────────────────────────────────────────────────────────── */
|
|
.toggle-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 8px 0;
|
|
border-top: 1px solid rgba(255,255,255,0.04);
|
|
}
|
|
|
|
.toggle-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.toggle-name {
|
|
font-size: 0.82rem;
|
|
font-weight: 500;
|
|
color: var(--c-txt-1);
|
|
}
|
|
|
|
.toggle-hint {
|
|
font-size: 0.62rem;
|
|
color: var(--c-txt-2);
|
|
}
|
|
|
|
.toggle {
|
|
position: relative;
|
|
display: inline-block;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.toggle input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
width: 0; height: 0;
|
|
}
|
|
|
|
.toggle-track {
|
|
display: block;
|
|
width: 40px; height: 22px;
|
|
background: rgba(255,255,255,0.07);
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
border-radius: var(--r-full);
|
|
cursor: pointer;
|
|
position: relative;
|
|
transition: background var(--t-med), border-color var(--t-med);
|
|
}
|
|
|
|
.toggle-thumb {
|
|
position: absolute;
|
|
top: 2px; left: 2px;
|
|
width: 16px; height: 16px;
|
|
border-radius: 50%;
|
|
background: var(--c-txt-2);
|
|
transition: transform var(--t-med), background var(--t-med);
|
|
}
|
|
|
|
.toggle input:checked ~ .toggle-track {
|
|
background: var(--c-accent-dim);
|
|
border-color: var(--c-accent);
|
|
}
|
|
|
|
.toggle input:checked ~ .toggle-track .toggle-thumb {
|
|
transform: translateX(18px);
|
|
background: var(--c-accent);
|
|
}
|
|
|
|
/* ── Section divider ──────────────────────────────────────────────────────── */
|
|
.section-head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
padding-top: 4px;
|
|
border-top: 1px solid rgba(255,255,255,0.05);
|
|
font-size: 0.65rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.8px;
|
|
text-transform: uppercase;
|
|
color: var(--c-txt-2);
|
|
}
|
|
|
|
.section-hint {
|
|
font-size: 0.58rem;
|
|
color: var(--c-txt-3);
|
|
font-weight: 400;
|
|
text-transform: none;
|
|
}
|
|
|
|
|
|
|
|
/* ── Toast ────────────────────────────────────────────────────────────────── */
|
|
.toast {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(60px);
|
|
background: rgba(15,15,26,0.92);
|
|
color: var(--c-txt-1);
|
|
padding: 9px 18px;
|
|
border-radius: var(--r-sm);
|
|
font-size: 0.76rem;
|
|
font-weight: 500;
|
|
border: 1px solid var(--c-card-border);
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
|
|
backdrop-filter: blur(16px);
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
z-index: 100;
|
|
transition: all 320ms cubic-bezier(0.175,0.885,0.32,1.275);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.toast.show {
|
|
opacity: 1;
|
|
transform: translateX(-50%) translateY(0);
|
|
}
|
|
|
|
.toast.is-error { border-color: var(--c-red); color: var(--c-red); }
|
|
.toast.is-ok { border-color: var(--c-green); color: var(--c-green); }
|
|
|
|
/* ── Modal ────────────────────────────────────────────────────────────────── */
|
|
.modal-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 50;
|
|
background: rgba(0,0,0,0.5);
|
|
backdrop-filter: blur(4px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 1;
|
|
transition: opacity var(--t-fast);
|
|
}
|
|
|
|
.modal-overlay.hidden {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.modal-content {
|
|
background: var(--c-surface);
|
|
border: 1px solid var(--c-card-border);
|
|
padding: 20px;
|
|
border-radius: var(--r-md);
|
|
width: 300px;
|
|
box-shadow: 0 10px 40px rgba(0,0,0,0.6);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.modal-steps {
|
|
margin: 2px 0 0 0;
|
|
padding-left: 18px;
|
|
font-size: 0.76rem;
|
|
color: var(--c-txt-2);
|
|
line-height: 1.7;
|
|
}
|
|
.modal-steps li { margin-bottom: 2px; }
|
|
.modal-steps code {
|
|
background: rgba(255,255,255,0.07);
|
|
border-radius: 3px;
|
|
padding: 1px 5px;
|
|
font-family: monospace;
|
|
font-size: 0.74rem;
|
|
word-break: break-all;
|
|
color: var(--c-accent, #a78bfa);
|
|
}
|
|
.modal-actions a.btn {
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
.modal-title {
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
color: var(--c-txt-1);
|
|
}
|
|
|
|
.modal-text {
|
|
font-size: 0.78rem;
|
|
color: var(--c-txt-2);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.modal-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.modal-actions .btn {
|
|
padding: 6px 14px;
|
|
border-radius: var(--r-sm);
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
border: none;
|
|
transition: all var(--t-fast);
|
|
}
|
|
|
|
.modal-actions .btn.secondary {
|
|
background: rgba(255,255,255,0.08);
|
|
color: var(--c-txt-1);
|
|
}
|
|
html[data-theme="light"] .modal-actions .btn.secondary {
|
|
background: rgba(0,0,0,0.08);
|
|
color: var(--c-txt-1);
|
|
}
|
|
|
|
.modal-actions .btn.secondary:hover { background: rgba(255,255,255,0.12); }
|
|
html[data-theme="light"] .modal-actions .btn.secondary:hover { background: rgba(0,0,0,0.12); }
|
|
|
|
.modal-actions .btn.primary {
|
|
background: var(--c-accent);
|
|
color: #fff;
|
|
}
|
|
.modal-actions .btn.primary:hover { background: var(--c-accent-2); }
|