Add War Room voice meeting, fix chat overlay, and ship 5 cyan UI themes.
Voice Room lets humans talk with agents via Whisper/TTS; chat typing no longer blocked by a full-screen overlay, attachments/avatars are larger, and Settings exposes five vivid mid-dark cyan/blue themes for the whole cockpit.
This commit is contained in:
Aissa
@@ -0,0 +1,180 @@
|
||||
/* Foodlinkk UI themes — colorful cyan/blue family, mid-dark, vivid accents */
|
||||
/* Applied via <html data-theme="..."> (localStorage key: flk-theme) */
|
||||
|
||||
html[data-theme="ocean"] {
|
||||
--bg-root: #07131f;
|
||||
--bg-surface: #0c1c2e;
|
||||
--bg-elevated: #123049;
|
||||
--bg-hover: #183a58;
|
||||
--border-subtle: #1f4b6e;
|
||||
--border-strong: #2d6a96;
|
||||
--text-primary: #eef9ff;
|
||||
--text-secondary: #b6e3f7;
|
||||
--text-muted: #7eb6d4;
|
||||
--text-body: #d5effc;
|
||||
--accent-cyan: #22d3ee;
|
||||
--accent-cyan-dim: rgba(34, 211, 238, 0.22);
|
||||
--accent-purple: #67e8f9;
|
||||
--accent-purple-dim: rgba(103, 232, 249, 0.18);
|
||||
--accent-amber: #38bdf8;
|
||||
--accent-amber-dim: rgba(56, 189, 248, 0.2);
|
||||
--accent-green: #2dd4bf;
|
||||
--accent-green-dim: rgba(45, 212, 191, 0.2);
|
||||
--accent-red: #fb7185;
|
||||
--accent-red-dim: rgba(251, 113, 133, 0.18);
|
||||
--shadow-panel: 0 8px 32px rgba(8, 47, 73, 0.55);
|
||||
--flk-theme-glow: rgba(34, 211, 238, 0.35);
|
||||
}
|
||||
|
||||
html[data-theme="aurora"] {
|
||||
--bg-root: #0a1020;
|
||||
--bg-surface: #121a32;
|
||||
--bg-elevated: #1a2550;
|
||||
--bg-hover: #243266;
|
||||
--border-subtle: #3347a0;
|
||||
--border-strong: #4f6dff;
|
||||
--text-primary: #f0f4ff;
|
||||
--text-secondary: #c7d2fe;
|
||||
--text-muted: #9db0f5;
|
||||
--text-body: #dde4ff;
|
||||
--accent-cyan: #22d3ee;
|
||||
--accent-cyan-dim: rgba(34, 211, 238, 0.2);
|
||||
--accent-purple: #a78bfa;
|
||||
--accent-purple-dim: rgba(167, 139, 250, 0.22);
|
||||
--accent-amber: #818cf8;
|
||||
--accent-amber-dim: rgba(129, 140, 248, 0.22);
|
||||
--accent-green: #34d399;
|
||||
--accent-green-dim: rgba(52, 211, 153, 0.2);
|
||||
--accent-red: #f472b6;
|
||||
--accent-red-dim: rgba(244, 114, 182, 0.2);
|
||||
--shadow-panel: 0 8px 32px rgba(49, 46, 129, 0.5);
|
||||
--flk-theme-glow: rgba(167, 139, 250, 0.4);
|
||||
}
|
||||
|
||||
html[data-theme="neon"] {
|
||||
--bg-root: #050b14;
|
||||
--bg-surface: #0a1628;
|
||||
--bg-elevated: #10243f;
|
||||
--bg-hover: #163255;
|
||||
--border-subtle: #1a4d6e;
|
||||
--border-strong: #06b6d4;
|
||||
--text-primary: #ecfeff;
|
||||
--text-secondary: #a5f3fc;
|
||||
--text-muted: #67e8f9;
|
||||
--text-body: #cffafe;
|
||||
--accent-cyan: #06b6d4;
|
||||
--accent-cyan-dim: rgba(6, 182, 212, 0.28);
|
||||
--accent-purple: #e879f9;
|
||||
--accent-purple-dim: rgba(232, 121, 249, 0.2);
|
||||
--accent-amber: #22d3ee;
|
||||
--accent-amber-dim: rgba(34, 211, 238, 0.25);
|
||||
--accent-green: #4ade80;
|
||||
--accent-green-dim: rgba(74, 222, 128, 0.22);
|
||||
--accent-red: #ff6bcb;
|
||||
--accent-red-dim: rgba(255, 107, 203, 0.22);
|
||||
--shadow-panel: 0 0 40px rgba(6, 182, 212, 0.18);
|
||||
--flk-theme-glow: rgba(6, 182, 212, 0.45);
|
||||
}
|
||||
|
||||
html[data-theme="glacier"] {
|
||||
--bg-root: #0b1522;
|
||||
--bg-surface: #122033;
|
||||
--bg-elevated: #1a2f4a;
|
||||
--bg-hover: #223b5a;
|
||||
--border-subtle: #2a5078;
|
||||
--border-strong: #3b82f6;
|
||||
--text-primary: #f0f9ff;
|
||||
--text-secondary: #bae6fd;
|
||||
--text-muted: #7dd3fc;
|
||||
--text-body: #e0f2fe;
|
||||
--accent-cyan: #38bdf8;
|
||||
--accent-cyan-dim: rgba(56, 189, 248, 0.22);
|
||||
--accent-purple: #60a5fa;
|
||||
--accent-purple-dim: rgba(96, 165, 250, 0.2);
|
||||
--accent-amber: #7dd3fc;
|
||||
--accent-amber-dim: rgba(125, 211, 252, 0.2);
|
||||
--accent-green: #2dd4bf;
|
||||
--accent-green-dim: rgba(45, 212, 191, 0.2);
|
||||
--accent-red: #fb7185;
|
||||
--accent-red-dim: rgba(251, 113, 133, 0.18);
|
||||
--shadow-panel: 0 8px 28px rgba(30, 64, 175, 0.35);
|
||||
--flk-theme-glow: rgba(56, 189, 248, 0.35);
|
||||
}
|
||||
|
||||
html[data-theme="cobalt"] {
|
||||
--bg-root: #08101c;
|
||||
--bg-surface: #0f1a2e;
|
||||
--bg-elevated: #172642;
|
||||
--bg-hover: #1f3256;
|
||||
--border-subtle: #274878;
|
||||
--border-strong: #3b82f6;
|
||||
--text-primary: #eff6ff;
|
||||
--text-secondary: #bfdbfe;
|
||||
--text-muted: #93c5fd;
|
||||
--text-body: #dbeafe;
|
||||
--accent-cyan: #22d3ee;
|
||||
--accent-cyan-dim: rgba(34, 211, 238, 0.2);
|
||||
--accent-purple: #818cf8;
|
||||
--accent-purple-dim: rgba(129, 140, 248, 0.22);
|
||||
--accent-amber: #fbbf24;
|
||||
--accent-amber-dim: rgba(251, 191, 36, 0.18);
|
||||
--accent-green: #34d399;
|
||||
--accent-green-dim: rgba(52, 211, 153, 0.2);
|
||||
--accent-red: #f87171;
|
||||
--accent-red-dim: rgba(248, 113, 113, 0.18);
|
||||
--shadow-panel: 0 10px 36px rgba(37, 99, 235, 0.28);
|
||||
--flk-theme-glow: rgba(59, 130, 246, 0.4);
|
||||
}
|
||||
|
||||
/* Soft global accents when a theme is active */
|
||||
html[data-theme] body {
|
||||
background:
|
||||
radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--accent-cyan) 18%, transparent), transparent 60%),
|
||||
radial-gradient(900px 500px at 100% 0%, color-mix(in srgb, var(--accent-purple) 14%, transparent), transparent 55%),
|
||||
var(--bg-root);
|
||||
}
|
||||
html[data-theme] .sidebar,
|
||||
html[data-theme] .app-sidebar {
|
||||
border-right-color: color-mix(in srgb, var(--accent-cyan) 35%, var(--border-subtle));
|
||||
box-shadow: inset -1px 0 0 color-mix(in srgb, var(--accent-cyan) 15%, transparent);
|
||||
}
|
||||
html[data-theme] .btn-pulse,
|
||||
html[data-theme] .btn-primary {
|
||||
box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-cyan) 40%, transparent),
|
||||
0 8px 24px color-mix(in srgb, var(--accent-cyan) 22%, transparent);
|
||||
}
|
||||
html[data-theme] .panel,
|
||||
html[data-theme] .hm-neo {
|
||||
border-color: color-mix(in srgb, var(--accent-cyan) 22%, var(--border-subtle));
|
||||
}
|
||||
|
||||
/* Settings theme cards */
|
||||
.flk-theme-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 0.85rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.flk-theme-card {
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 14px;
|
||||
padding: 0.85rem;
|
||||
background: var(--bg-elevated);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
color: inherit;
|
||||
transition: border-color .15s, transform .15s, box-shadow .15s;
|
||||
}
|
||||
.flk-theme-card:hover { transform: translateY(-2px); border-color: var(--accent-cyan); }
|
||||
.flk-theme-card.is-active {
|
||||
border-color: var(--accent-cyan);
|
||||
box-shadow: 0 0 0 2px var(--accent-cyan-dim), 0 12px 28px rgba(0,0,0,.35);
|
||||
}
|
||||
.flk-theme-swatch {
|
||||
height: 52px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 0.65rem;
|
||||
border: 1px solid rgba(255,255,255,0.12);
|
||||
}
|
||||
.flk-theme-card strong { display: block; margin-bottom: 0.15rem; }
|
||||
.flk-theme-card small { opacity: 0.75; line-height: 1.35; display: block; }
|
||||
Reference in New Issue
Block a user