ospab
/
ostp
mirror of https://github.com/ospab/ostp.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

design: professional GUI redesign — minimal dark theme 

Complete visual overhaul:
- Replaced vibrant/gaming aesthetic with enterprise-grade minimal design
- Darker, more muted color palette (bg: #0a0a0f, accent: #7c83ff)
- Reduced border/glow intensity for cleaner look
- Thinner power button border (solid 2px instead of thick radial gradient)
- Subtler ambient background effects (lower opacity, slower animation)
- More compact spacing and typography
- Smooth screen transitions (translateX instead of translateY)
- Refined toggle switches and form elements
- Consistent border-radius and padding system
This commit is contained in:
ospab 2026-05-17 16:39:20 +03:00
parent e20e4f2533
commit e8a92059d2
2 changed files with 343 additions and 325 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

667
ostp-gui/src/styles.css
View File

@ -1,30 +1,42 @@
/* OSTP Mobile Premium Theme */ /* ═══════════════════════════════════════════════════════════════════════════
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono&display=swap'); OSTP Client — Professional Edition
Design System: Minimal Dark with Accent Highlights
═══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400&display=swap');
:root { :root {
--bg-gradient-1: #0c0c14; --bg-primary: #0a0a0f;
--bg-gradient-2: #151626; --bg-secondary: #12121a;
--accent-primary: #6366f1; /* Indigo */ --bg-card: #16161f;
--accent-glow: rgba(99, 102, 241, 0.4); --bg-card-hover: #1c1c28;
--accent-success: #10b981; /* Emerald */ --bg-input: #0e0e16;
--accent-success-glow: rgba(16, 185, 129, 0.4);
--accent-danger: #ef4444; --border-subtle: rgba(255, 255, 255, 0.05);
--border-default: rgba(255, 255, 255, 0.08);
--glass-bg: rgba(255, 255, 255, 0.03); --border-focus: rgba(124, 131, 255, 0.4);
--glass-border: rgba(255, 255, 255, 0.07);
--glass-highlight: rgba(255, 255, 255, 0.1); --accent: #7c83ff;
--accent-dim: rgba(124, 131, 255, 0.15);
--text-primary: #f8fafc; --accent-glow: rgba(124, 131, 255, 0.25);
--text-secondary: #94a3b8; --success: #34d399;
--success-dim: rgba(52, 211, 153, 0.12);
font-family: 'Inter', sans-serif; --success-glow: rgba(52, 211, 153, 0.25);
--warning: #fbbf24;
--danger: #f87171;
--text-primary: #e8eaed;
--text-secondary: #6b7280;
--text-tertiary: #4b5563;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
color: var(--text-primary); color: var(--text-primary);
background: var(--bg-gradient-1); background: var(--bg-primary);
overflow: hidden; overflow: hidden;
user-select: none; user-select: none;
-webkit-font-smoothing: antialiased;
} }
* { *, *::before, *::after {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -34,110 +46,99 @@ body {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
display: flex; display: flex;
align-items: center; background: var(--bg-primary);
justify-content: center;
background: radial-gradient(circle at top right, #1c1c36, var(--bg-gradient-1));
} }
/* ─── Layout ─────────────────────────────────────────────────────────────── */
.app-container { .app-container {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: var(--bg-gradient-1);
}
/* Mesh Gradient Background Particles */
.mesh-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
overflow: hidden; overflow: hidden;
} }
.mesh-bg::before, .mesh-bg::after { /* ─── Ambient Background ─────────────────────────────────────────────────── */
content: '';
.mesh-bg {
position: absolute; position: absolute;
width: 300px; inset: 0;
height: 300px; z-index: 0;
border-radius: 50%; overflow: hidden;
filter: blur(80px); pointer-events: none;
opacity: 0.15;
animation: float 20s infinite alternate ease-in-out;
} }
.mesh-bg::before { .mesh-bg::before {
background: var(--accent-primary); content: '';
top: -50px; position: absolute;
left: -50px; width: 500px;
height: 500px;
border-radius: 50%;
background: var(--accent);
filter: blur(160px);
opacity: 0.04;
top: -200px;
right: -100px;
animation: ambient-drift 30s infinite alternate ease-in-out;
} }
.mesh-bg::after { .mesh-bg::after {
background: #ec4899; /* Pink */ content: '';
bottom: -50px; position: absolute;
right: -50px; width: 400px;
animation-delay: -10s; height: 400px;
border-radius: 50%;
background: var(--success);
filter: blur(140px);
opacity: 0.03;
bottom: -150px;
left: -100px;
animation: ambient-drift 25s infinite alternate-reverse ease-in-out;
} }
@keyframes float { @keyframes ambient-drift {
0% { transform: translate(0, 0) scale(1); } 0% { transform: translate(0, 0); }
100% { transform: translate(80px, 50px) scale(1.2); } 100% { transform: translate(40px, 30px); }
} }
.blur-overlay { .blur-overlay {
position: absolute; position: absolute;
top: 0; inset: 0;
left: 0;
right: 0;
bottom: 0;
backdrop-filter: blur(2px);
z-index: 1; z-index: 1;
pointer-events: none;
} }
/* Glassmorphism Utility */ /* ─── Screen System ──────────────────────────────────────────────────────── */
.glass {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
/* Screen Management */
.screen { .screen {
position: absolute; position: absolute;
top: 0; inset: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2; z-index: 2;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 20px; padding: 16px 20px;
pointer-events: none; pointer-events: none;
opacity: 0; opacity: 0;
transform: translateY(20px); transform: translateX(20px);
transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); transition: opacity 0.35s ease, transform 0.35s ease;
} }
.screen.active { .screen.active {
pointer-events: auto; pointer-events: auto;
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateX(0);
z-index: 3; z-index: 3;
} }
/* App Header */ /* ─── Header ─────────────────────────────────────────────────────────────── */
.app-header { .app-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-top: 15px; padding: 8px 0 16px;
margin-bottom: 30px;
z-index: 10; z-index: 10;
} }
@ -148,345 +149,360 @@ body {
} }
.logo-icon { .logo-icon {
width: 12px; width: 8px;
height: 12px; height: 8px;
border-radius: 3px; border-radius: 2px;
background: linear-gradient(135deg, var(--accent-primary), #a78bfa); background: var(--accent);
box-shadow: 0 0 15px var(--accent-glow); box-shadow: 0 0 12px var(--accent-glow);
} }
h1 { h1 {
font-size: 1.2rem; font-size: 0.95rem;
font-weight: 700; font-weight: 600;
letter-spacing: 1px; letter-spacing: 2px;
text-transform: uppercase;
color: var(--text-secondary);
} }
h2 { h2 {
font-size: 1.1rem; font-size: 0.9rem;
font-weight: 600; font-weight: 600;
} letter-spacing: 1px;
/* Buttons */
.icon-btn {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
color: var(--text-secondary); color: var(--text-secondary);
width: 40px; text-transform: uppercase;
height: 40px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.icon-btn:hover {
background: var(--glass-highlight);
color: var(--text-primary);
transform: translateY(-1px);
}
.icon-btn:active {
transform: translateY(1px);
} }
.header-actions { .header-actions {
display: flex; display: flex;
gap: 8px; gap: 6px;
align-items: center; align-items: center;
} }
/* ─── Buttons ────────────────────────────────────────────────────────────── */
.icon-btn {
background: transparent;
border: 1px solid var(--border-default);
color: var(--text-secondary);
width: 36px;
height: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
}
.icon-btn:hover {
background: var(--bg-card);
color: var(--text-primary);
border-color: var(--border-focus);
}
.icon-btn:active { transform: scale(0.95); }
.lang-btn { .lang-btn {
font-size: 0.7rem; font-size: 0.65rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.5px; letter-spacing: 0.5px;
min-width: 40px;
} }
.lang-btn span { .lang-btn span {
font-family: 'Inter', sans-serif; font-family: 'Inter', sans-serif;
font-size: 0.65rem;
} }
/* Main Content & Central Power Button */ /* ─── Main Content ───────────────────────────────────────────────────────── */
.main-content { .main-content {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: space-around; justify-content: center;
padding-bottom: 40px; gap: 32px;
padding-bottom: 24px;
} }
/* ─── Power Button ───────────────────────────────────────────────────────── */
.power-button-container { .power-button-container {
position: relative; position: relative;
width: 180px; width: 160px;
height: 180px; height: 160px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.power-btn { .power-btn {
width: 140px; width: 120px;
height: 140px; height: 120px;
border-radius: 50%; border-radius: 50%;
border: none; border: 2px solid var(--border-default);
background: radial-gradient(circle at 30% 30%, #2e304e, #161726); background: var(--bg-secondary);
box-shadow:
0 10px 25px -5px rgba(0, 0, 0, 0.5),
inset 0 1px 1px rgba(255, 255, 255, 0.1);
cursor: pointer; cursor: pointer;
z-index: 5; z-index: 5;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: var(--text-secondary); color: var(--text-tertiary);
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
} }
.power-btn:hover { .power-btn:hover {
transform: scale(1.03); border-color: var(--accent);
color: var(--text-primary); color: var(--accent);
box-shadow: 0 0 30px var(--accent-dim);
} }
.power-btn:active { .power-btn:active { transform: scale(0.93); }
transform: scale(0.95);
}
.power-icon { .power-icon {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: filter 0.4s ease;
} }
/* Active/Connecting/Disconnected styling for power btn */
.power-btn.connected { .power-btn.connected {
background: radial-gradient(circle at 30% 30%, #10b981, #065f46); border-color: var(--success);
color: white; background: var(--success-dim);
box-shadow: color: var(--success);
0 0 40px var(--accent-success-glow), box-shadow: 0 0 40px var(--success-glow), 0 4px 24px rgba(0, 0, 0, 0.3);
0 10px 25px -5px rgba(6, 95, 70, 0.5),
inset 0 1px 1px rgba(255, 255, 255, 0.3);
} }
.power-btn.connecting { .power-btn.connecting {
background: radial-gradient(circle at 30% 30%, var(--accent-primary), #3730a3); border-color: var(--accent);
color: white; color: var(--accent);
animation: pulse-button 1.5s infinite alternate; animation: connecting-pulse 2s infinite ease-in-out;
} }
@keyframes pulse-button { @keyframes connecting-pulse {
0% { box-shadow: 0 0 10px var(--accent-glow); } 0%, 100% { box-shadow: 0 0 8px var(--accent-dim); }
100% { box-shadow: 0 0 35px var(--accent-glow); } 50% { box-shadow: 0 0 28px var(--accent-glow); }
} }
/* Outer pulsing rings */ /* ─── Pulse Rings ────────────────────────────────────────────────────────── */
.pulse-ring { .pulse-ring {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 50%; border-radius: 50%;
border: 1px solid var(--glass-border); border: 1px solid transparent;
opacity: 0; opacity: 0;
z-index: 1; z-index: 1;
} }
.power-button-container.connected .pulse-ring { .power-button-container.connected .pulse-ring {
animation: ripple 3s linear infinite; animation: ring-expand 3.5s linear infinite;
border-color: var(--accent-success); border-color: var(--success);
} }
.power-button-container.connecting .pulse-ring { .power-button-container.connecting .pulse-ring {
animation: ripple 2s linear infinite; animation: ring-expand 2s linear infinite;
border-color: var(--accent-primary); border-color: var(--accent);
} }
.delay-1 { .delay-1 { animation-delay: 1.2s !important; }
animation-delay: 1s !important;
@keyframes ring-expand {
0% { transform: scale(0.8); opacity: 0.5; }
100% { transform: scale(1.6); opacity: 0; }
} }
@keyframes ripple { /* ─── Status Display ─────────────────────────────────────────────────────── */
0% {
transform: scale(0.7);
opacity: 0.6;
}
100% {
transform: scale(1.4);
opacity: 0;
}
}
/* Status display text */
.status-display { .status-display {
text-align: center; text-align: center;
margin-top: 10px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 6px;
} }
#status-text { #status-text {
font-size: 1.4rem; font-size: 1.1rem;
font-weight: 600; font-weight: 600;
letter-spacing: 0.5px; letter-spacing: 0.3px;
transition: color 0.3s ease; transition: color 0.3s ease;
} }
.status-disconnected { color: var(--text-secondary); } .status-disconnected { color: var(--text-secondary); }
.status-connecting { color: var(--accent-primary); } .status-connecting { color: var(--accent); }
.status-connected { .status-connected {
color: var(--accent-success); color: var(--success);
text-shadow: 0 0 20px var(--accent-success-glow); text-shadow: 0 0 20px var(--success-glow);
} }
.subtext { .subtext {
font-size: 0.85rem; font-size: 0.75rem;
color: var(--text-secondary); color: var(--text-tertiary);
font-weight: 300; font-weight: 400;
letter-spacing: 0.2px;
} }
/* Metrics Panel */ /* ─── Metrics ────────────────────────────────────────────────────────────── */
.metrics-grid { .metrics-grid {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 15px; gap: 10px;
width: 100%; width: 100%;
max-width: 320px; max-width: 300px;
} }
.metric-card { .metric-card {
border-radius: 16px; background: var(--bg-card);
padding: 15px; border: 1px solid var(--border-subtle);
border-radius: 14px;
padding: 14px;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 10px;
transition: border-color 0.2s;
} }
.metric-card:hover { border-color: var(--border-default); }
.metric-icon { .metric-icon {
width: 32px; width: 30px;
height: 32px; height: 30px;
border-radius: 10px; border-radius: 8px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-shrink: 0;
} }
.metric-icon.down { .metric-icon.down {
background: rgba(16, 185, 129, 0.1); background: var(--success-dim);
color: var(--accent-success); color: var(--success);
} }
.metric-icon.up { .metric-icon.up {
background: rgba(99, 102, 241, 0.1); background: var(--accent-dim);
color: var(--accent-primary); color: var(--accent);
} }
.metric-data { .metric-data {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 2px; gap: 1px;
min-width: 0;
} }
.metric-label { .metric-label {
font-size: 0.75rem; font-size: 0.65rem;
color: var(--text-secondary); color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 500;
} }
.metric-value { .metric-value {
font-size: 0.95rem; font-size: 0.85rem;
font-weight: 600; font-weight: 600;
font-variant-numeric: tabular-nums;
} }
/* Settings Editor Section */ /* ─── Settings Screen ────────────────────────────────────────────────────── */
.settings-content { .settings-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
gap: 20px; gap: 12px;
overflow: hidden; overflow: hidden;
padding-bottom: 20px; padding-bottom: 12px;
} }
.import-container {
background: var(--bg-card);
border: 1px solid var(--border-subtle);
border-radius: 12px;
padding: 8px;
display: flex;
gap: 8px;
}
.import-container input {
flex: 1;
background: var(--bg-input);
border: 1px solid var(--border-subtle);
border-radius: 8px;
padding: 8px 12px;
font-size: 0.78rem;
color: var(--text-primary);
outline: none;
transition: border-color 0.2s;
}
.import-container input:focus { border-color: var(--border-focus); }
.small-btn {
background: var(--accent);
border: none;
color: white;
font-weight: 600;
font-size: 0.7rem;
padding: 0 14px;
border-radius: 8px;
cursor: pointer;
transition: opacity 0.2s;
letter-spacing: 0.3px;
}
.small-btn:hover { opacity: 0.85; }
.small-btn:active { transform: scale(0.97); }
.editor-container { .editor-container {
flex: 1; flex: 1;
border-radius: 16px; background: var(--bg-card);
padding: 20px 15px; border: 1px solid var(--border-subtle);
border-radius: 14px;
padding: 16px 14px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 18px; gap: 14px;
overflow: hidden; overflow: hidden;
} }
.editor-container.scrollable { .editor-container.scrollable {
overflow-y: auto; overflow-y: auto;
padding-right: 8px; scrollbar-width: thin;
scrollbar-color: var(--border-default) transparent;
} }
/* Custom Scrollbar */ .editor-container::-webkit-scrollbar { width: 4px; }
.editor-container::-webkit-scrollbar { .editor-container::-webkit-scrollbar-track { background: transparent; }
width: 5px;
}
.editor-container::-webkit-scrollbar-track {
background: transparent;
}
.editor-container::-webkit-scrollbar-thumb { .editor-container::-webkit-scrollbar-thumb {
background: var(--glass-border); background: var(--border-default);
border-radius: 10px; border-radius: 10px;
} }
.import-container { /* ─── Form Elements ──────────────────────────────────────────────────────── */
border-radius: 14px;
padding: 10px;
display: flex;
gap: 10px;
}
.import-container input {
flex: 1;
background: rgba(0, 0, 0, 0.2);
border: 1px solid var(--glass-border);
border-radius: 10px;
padding: 8px 12px;
font-size: 0.8rem;
color: #fff;
outline: none;
}
.small-btn {
background: var(--accent-primary);
border: none;
color: white;
font-weight: 600;
font-size: 0.75rem;
padding: 0 14px;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
}
.small-btn:hover { opacity: 0.9; }
.form-group { .form-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 6px; gap: 5px;
} }
.form-group.row-align { .form-group.row-align {
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 8px 0; padding: 10px 0;
border-top: 1px solid var(--glass-border); border-top: 1px solid var(--border-subtle);
} }
.form-group label { .form-group label {
font-size: 0.75rem; font-size: 0.68rem;
font-weight: 600; font-weight: 500;
color: var(--text-secondary); color: var(--text-secondary);
letter-spacing: 0.3px; letter-spacing: 0.5px;
text-transform: uppercase; text-transform: uppercase;
} }
@ -494,49 +510,55 @@ h2 {
.form-group input[type="password"], .form-group input[type="password"],
.form-group textarea { .form-group textarea {
width: 100%; width: 100%;
background: rgba(0, 0, 0, 0.15); background: var(--bg-input);
border: 1px solid var(--glass-border); border: 1px solid var(--border-subtle);
border-radius: 10px; border-radius: 8px;
padding: 11px 14px; padding: 10px 12px;
color: white; color: var(--text-primary);
font-size: 0.9rem; font-size: 0.82rem;
transition: all 0.3s; transition: border-color 0.2s;
outline: none; outline: none;
font-family: inherit; font-family: inherit;
} }
.form-group textarea { .form-group textarea {
resize: vertical; resize: vertical;
min-height: 56px; min-height: 48px;
max-height: 120px; max-height: 100px;
font-family: 'JetBrains Mono', 'Courier New', monospace; font-family: 'JetBrains Mono', monospace;
font-size: 0.8rem; font-size: 0.75rem;
line-height: 1.4; line-height: 1.5;
} }
.form-group input:focus, .form-group input:focus,
.form-group textarea:focus { .form-group textarea:focus {
border-color: var(--accent-primary); border-color: var(--border-focus);
background: rgba(0, 0, 0, 0.25); }
.form-group input::placeholder,
.form-group textarea::placeholder {
color: var(--text-tertiary);
} }
.section-divider { .section-divider {
margin-top: 8px; margin-top: 4px;
padding-top: 15px; padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.1); border-top: 1px solid var(--border-subtle);
font-size: 0.85rem; font-size: 0.72rem;
font-weight: 600; font-weight: 600;
letter-spacing: 0.3px; letter-spacing: 0.5px;
color: var(--text-primary); color: var(--text-secondary);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: baseline; align-items: baseline;
text-transform: uppercase;
} }
.divider-hint { .divider-hint {
font-size: 0.65rem; font-size: 0.6rem;
color: var(--text-secondary); color: var(--text-tertiary);
font-weight: 400; font-weight: 400;
text-transform: none;
} }
.label-stack { .label-stack {
@ -546,120 +568,109 @@ h2 {
} }
.toggle-label { .toggle-label {
font-size: 0.9rem; font-size: 0.82rem;
font-weight: 500; font-weight: 500;
color: var(--text-primary);
} }
.toggle-subtext { .toggle-subtext {
font-size: 0.7rem; font-size: 0.65rem;
color: var(--text-secondary); color: var(--text-tertiary);
} }
/* Switch CSS Styling */ /* ─── Toggle Switch ──────────────────────────────────────────────────────── */
.switch { .switch {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 46px; width: 42px;
height: 26px; height: 24px;
flex-shrink: 0; flex-shrink: 0;
} }
.switch input { .switch input { opacity: 0; width: 0; height: 0; }
opacity: 0;
width: 0;
height: 0;
}
.slider { .slider {
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
top: 0; inset: 0;
left: 0; background: var(--bg-input);
right: 0; border: 1px solid var(--border-default);
bottom: 0; transition: all 0.3s ease;
background-color: rgba(255,255,255,0.1);
transition: .4s;
border: 1px solid var(--glass-border);
} }
.slider:before { .slider::before {
position: absolute; position: absolute;
content: ""; content: "";
height: 18px; height: 16px;
width: 18px; width: 16px;
left: 3px; left: 3px;
bottom: 3px; bottom: 3px;
background-color: white; background: var(--text-secondary);
transition: .4s; transition: all 0.3s ease;
} }
input:checked + .slider { input:checked + .slider {
background-color: var(--accent-primary); background: var(--accent-dim);
border-color: var(--accent-primary); border-color: var(--accent);
} }
input:focus + .slider { input:checked + .slider::before {
box-shadow: 0 0 1px var(--accent-primary); transform: translateX(18px);
background: var(--accent);
} }
input:checked + .slider:before { .slider.round { border-radius: 24px; }
transform: translateX(20px); .slider.round::before { border-radius: 50%; }
}
.slider.round { /* ─── Action Buttons ─────────────────────────────────────────────────────── */
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.actions-container { .actions-container {
display: flex; display: flex;
justify-content: center; justify-content: center;
padding-top: 4px;
} }
.primary-btn { .primary-btn {
width: 100%; width: 100%;
max-width: 280px; max-width: 280px;
padding: 14px; padding: 12px;
border-radius: 12px; border-radius: 10px;
border: 1px solid var(--accent-primary); border: 1px solid var(--accent);
background: linear-gradient(135deg, var(--accent-primary), #4338ca); background: var(--accent-dim);
color: white; color: var(--accent);
font-weight: 600; font-weight: 600;
font-size: 0.95rem; font-size: 0.82rem;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.2s ease;
box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3); letter-spacing: 0.3px;
} }
.primary-btn:hover { .primary-btn:hover {
box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5); background: var(--accent);
transform: translateY(-1px); color: white;
} }
.primary-btn:active { .primary-btn:active { transform: scale(0.98); }
transform: translateY(1px);
} /* ─── Toast ──────────────────────────────────────────────────────────────── */
/* Toast Notifications */
.toast { .toast {
position: fixed; position: fixed;
bottom: 30px; bottom: 24px;
left: 50%; left: 50%;
transform: translateX(-50%) translateY(100px); transform: translateX(-50%) translateY(80px);
background: #1e293b; background: var(--bg-card);
color: var(--text-primary); color: var(--text-primary);
padding: 12px 24px; padding: 10px 20px;
border-radius: 50px; border-radius: 8px;
font-size: 0.85rem; font-size: 0.78rem;
font-weight: 500; font-weight: 500;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
border: 1px solid var(--glass-border); border: 1px solid var(--border-default);
pointer-events: none; pointer-events: none;
opacity: 0; opacity: 0;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
z-index: 100; z-index: 100;
} }
@ -667,3 +678,9 @@ input:checked + .slider:before {
transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0);
opacity: 1; opacity: 1;
} }
/* ─── Glass utility (kept for backward compatibility) ────────────────────── */
.glass {
background: var(--bg-card);
border: 1px solid var(--border-subtle);
}

1
ostp-wiki Submodule

@ -0,0 +1 @@
Subproject commit 6848a83bc2ffee584e89d51fde67d3a94133308c