Polish UI design with sleeker components and vivid magical animations (#172)
This commit is contained in:
Alexander Whitestone
committed by
GitHub
GitHub
parent
9e56fad342
commit
0b91e45d90
@@ -13,8 +13,8 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet" />
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
|
||||
<link rel="icon" href="/static/favicon.svg" type="image/svg+xml" />
|
||||
<link rel="stylesheet" href="/static/style.css?v=5" />
|
||||
<link rel="stylesheet" href="/static/css/mission-control.css?v=1" />
|
||||
<link rel="stylesheet" href="/static/style.css?v=6" />
|
||||
<link rel="stylesheet" href="/static/css/mission-control.css?v=2" />
|
||||
{% block extra_styles %}{% endblock %}
|
||||
<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.3/dist/htmx.min.js" crossorigin="anonymous"></script>
|
||||
<script>
|
||||
@@ -151,10 +151,113 @@
|
||||
<!-- Toast container -->
|
||||
<div class="mc-toast-container" id="toast-container"></div>
|
||||
|
||||
<!-- Magical floating particles canvas -->
|
||||
<canvas id="magic-particles" aria-hidden="true"></canvas>
|
||||
|
||||
<main class="mc-main">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
<script>
|
||||
// ── Magical floating particles ──
|
||||
(function() {
|
||||
var canvas = document.getElementById('magic-particles');
|
||||
if (!canvas) return;
|
||||
var ctx = canvas.getContext('2d');
|
||||
var particles = [];
|
||||
var PARTICLE_COUNT = 40;
|
||||
var raf;
|
||||
|
||||
function resize() {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
}
|
||||
resize();
|
||||
window.addEventListener('resize', resize);
|
||||
|
||||
var colors = [
|
||||
{ r: 168, g: 85, b: 247 }, // purple
|
||||
{ r: 124, g: 58, b: 237 }, // violet
|
||||
{ r: 192, g: 132, b: 252 }, // light purple
|
||||
{ r: 249, g: 115, b: 22 }, // orange
|
||||
{ r: 237, g: 224, b: 255 }, // white-purple
|
||||
];
|
||||
|
||||
function createParticle() {
|
||||
var c = colors[Math.floor(Math.random() * colors.length)];
|
||||
return {
|
||||
x: Math.random() * canvas.width,
|
||||
y: Math.random() * canvas.height,
|
||||
vx: (Math.random() - 0.5) * 0.3,
|
||||
vy: (Math.random() - 0.5) * 0.3,
|
||||
r: Math.random() * 2.2 + 0.5,
|
||||
alpha: Math.random() * 0.4 + 0.05,
|
||||
alphaDir: (Math.random() - 0.5) * 0.008,
|
||||
color: c,
|
||||
phase: Math.random() * Math.PI * 2,
|
||||
drift: Math.random() * 0.2 + 0.05
|
||||
};
|
||||
}
|
||||
|
||||
for (var i = 0; i < PARTICLE_COUNT; i++) {
|
||||
particles.push(createParticle());
|
||||
}
|
||||
|
||||
var time = 0;
|
||||
function draw() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
time += 0.003;
|
||||
|
||||
for (var i = 0; i < particles.length; i++) {
|
||||
var p = particles[i];
|
||||
p.x += p.vx + Math.sin(time + p.phase) * p.drift;
|
||||
p.y += p.vy + Math.cos(time + p.phase) * p.drift;
|
||||
p.alpha += p.alphaDir;
|
||||
|
||||
if (p.alpha <= 0.02 || p.alpha >= 0.45) p.alphaDir *= -1;
|
||||
p.alpha = Math.max(0.02, Math.min(0.45, p.alpha));
|
||||
|
||||
if (p.x < -20) p.x = canvas.width + 20;
|
||||
if (p.x > canvas.width + 20) p.x = -20;
|
||||
if (p.y < -20) p.y = canvas.height + 20;
|
||||
if (p.y > canvas.height + 20) p.y = -20;
|
||||
|
||||
// Glow
|
||||
var grad = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.r * 6);
|
||||
grad.addColorStop(0, 'rgba(' + p.color.r + ',' + p.color.g + ',' + p.color.b + ',' + (p.alpha * 0.6) + ')');
|
||||
grad.addColorStop(1, 'rgba(' + p.color.r + ',' + p.color.g + ',' + p.color.b + ',0)');
|
||||
ctx.fillStyle = grad;
|
||||
ctx.beginPath();
|
||||
ctx.arc(p.x, p.y, p.r * 6, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
|
||||
// Core
|
||||
ctx.fillStyle = 'rgba(' + p.color.r + ',' + p.color.g + ',' + p.color.b + ',' + p.alpha + ')';
|
||||
ctx.beginPath();
|
||||
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
raf = requestAnimationFrame(draw);
|
||||
}
|
||||
|
||||
// Only run when tab is visible
|
||||
function onVis() {
|
||||
if (document.hidden) {
|
||||
cancelAnimationFrame(raf);
|
||||
} else {
|
||||
draw();
|
||||
}
|
||||
}
|
||||
document.addEventListener('visibilitychange', onVis);
|
||||
draw();
|
||||
|
||||
// Respect reduced motion preference
|
||||
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
|
||||
cancelAnimationFrame(raf);
|
||||
canvas.style.display = 'none';
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
<script>
|
||||
// Clock
|
||||
function updateClock() {
|
||||
|
||||
@@ -21,11 +21,11 @@
|
||||
}
|
||||
.mc-toast {
|
||||
pointer-events: auto;
|
||||
background: rgba(17, 8, 32, 0.94);
|
||||
backdrop-filter: blur(14px);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(12, 6, 24, 0.94);
|
||||
backdrop-filter: blur(20px) saturate(1.3);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(1.3);
|
||||
border: 1px solid rgba(124, 58, 237, 0.12);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 10px 16px;
|
||||
font-family: var(--font);
|
||||
font-size: 12px;
|
||||
@@ -33,12 +33,13 @@
|
||||
letter-spacing: 0.04em;
|
||||
line-height: 1.5;
|
||||
opacity: 0;
|
||||
transform: translateX(40px);
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
transform: translateX(40px) scale(0.96);
|
||||
transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.mc-toast.show {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
transform: translateX(0) scale(1);
|
||||
}
|
||||
.mc-toast.info { border-left: 3px solid var(--green); }
|
||||
.mc-toast.warn { border-left: 3px solid var(--amber); }
|
||||
@@ -74,9 +75,33 @@
|
||||
background: var(--text-dim);
|
||||
transition: background 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
.mc-conn-dot.green { background: var(--green); box-shadow: 0 0 6px var(--green); }
|
||||
.mc-conn-dot.amber { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
|
||||
.mc-conn-dot.red { background: var(--red); box-shadow: 0 0 6px var(--red); }
|
||||
.mc-conn-dot.green {
|
||||
background: var(--green);
|
||||
box-shadow: 0 0 6px var(--green);
|
||||
animation: connPulseGreen 2s ease-in-out infinite;
|
||||
}
|
||||
.mc-conn-dot.amber {
|
||||
background: var(--amber);
|
||||
box-shadow: 0 0 6px var(--amber);
|
||||
animation: connPulseAmber 1.5s ease-in-out infinite;
|
||||
}
|
||||
.mc-conn-dot.red {
|
||||
background: var(--red);
|
||||
box-shadow: 0 0 6px var(--red);
|
||||
animation: connPulseRed 1s ease-in-out infinite;
|
||||
}
|
||||
@keyframes connPulseGreen {
|
||||
0%, 100% { box-shadow: 0 0 6px var(--green); }
|
||||
50% { box-shadow: 0 0 10px var(--green), 0 0 18px rgba(0, 232, 122, 0.25); }
|
||||
}
|
||||
@keyframes connPulseAmber {
|
||||
0%, 100% { box-shadow: 0 0 6px var(--amber); }
|
||||
50% { box-shadow: 0 0 10px var(--amber), 0 0 18px rgba(255, 184, 0, 0.25); }
|
||||
}
|
||||
@keyframes connPulseRed {
|
||||
0%, 100% { box-shadow: 0 0 6px var(--red); }
|
||||
50% { box-shadow: 0 0 12px var(--red), 0 0 22px rgba(255, 68, 85, 0.3); }
|
||||
}
|
||||
|
||||
|
||||
/* ── Briefing ─────────────────────────────────────────────── */
|
||||
@@ -565,8 +590,8 @@
|
||||
color: var(--text-bright);
|
||||
font-family: var(--font);
|
||||
font-size: 16px;
|
||||
padding: 10px 12px;
|
||||
min-height: 44px;
|
||||
padding: 14px 16px;
|
||||
min-height: 56px;
|
||||
}
|
||||
.mobile-chat-input input:focus {
|
||||
outline: none;
|
||||
@@ -771,8 +796,8 @@
|
||||
color: var(--text-bright);
|
||||
font-family: var(--font);
|
||||
font-size: 16px;
|
||||
padding: 10px 12px;
|
||||
min-height: 44px;
|
||||
padding: 14px 16px;
|
||||
min-height: 56px;
|
||||
}
|
||||
.local-chat-input input:focus {
|
||||
outline: none;
|
||||
|
||||
302
static/style.css
302
static/style.css
@@ -40,6 +40,20 @@
|
||||
--radius-lg: 14px;
|
||||
--radius-xl: 20px;
|
||||
|
||||
/* ── Shadow tokens ── */
|
||||
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
--shadow-glow-purple: 0 0 20px rgba(124, 58, 237, 0.15);
|
||||
--shadow-glow-orange: 0 0 20px rgba(249, 115, 22, 0.12);
|
||||
|
||||
/* ── Transition tokens ── */
|
||||
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
--ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
--transition-fast: 0.15s var(--ease-out-expo);
|
||||
--transition-med: 0.25s var(--ease-out-expo);
|
||||
--transition-slow: 0.4s var(--ease-out-expo);
|
||||
|
||||
/* ── Glass effect ── */
|
||||
--glass-bg: rgba(17, 8, 32, 0.72);
|
||||
--glass-blur: 16px;
|
||||
@@ -83,13 +97,66 @@ body {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a { color: var(--purple); }
|
||||
/* ── Vivid magical background animation layer ─────── */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
background:
|
||||
radial-gradient(ellipse 600px 400px at 20% 30%, rgba(124, 58, 237, 0.18) 0%, transparent 70%),
|
||||
radial-gradient(ellipse 500px 500px at 80% 70%, rgba(249, 115, 22, 0.12) 0%, transparent 70%),
|
||||
radial-gradient(ellipse 400px 300px at 60% 20%, rgba(168, 85, 247, 0.10) 0%, transparent 70%);
|
||||
animation: auroraShift 20s ease-in-out infinite alternate;
|
||||
}
|
||||
body::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
background:
|
||||
radial-gradient(ellipse 350px 350px at 40% 60%, rgba(124, 58, 237, 0.12) 0%, transparent 70%),
|
||||
radial-gradient(ellipse 450px 300px at 75% 35%, rgba(192, 132, 252, 0.08) 0%, transparent 70%);
|
||||
animation: auroraShift2 25s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes auroraShift {
|
||||
0% { transform: translate(0, 0) scale(1); opacity: 0.7; }
|
||||
33% { transform: translate(3%, -2%) scale(1.05); opacity: 1; }
|
||||
66% { transform: translate(-2%, 3%) scale(0.97); opacity: 0.8; }
|
||||
100% { transform: translate(1%, -1%) scale(1.02); opacity: 0.9; }
|
||||
}
|
||||
@keyframes auroraShift2 {
|
||||
0% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 0.5; }
|
||||
50% { transform: translate(-3%, 2%) scale(1.08) rotate(1deg); opacity: 0.9; }
|
||||
100% { transform: translate(2%, -3%) scale(0.95) rotate(-1deg); opacity: 0.6; }
|
||||
}
|
||||
|
||||
/* Ensure all content sits above the animated background */
|
||||
.mc-header, .mc-main, .mc-mobile-overlay, .mc-mobile-menu,
|
||||
.mc-toast-container { position: relative; z-index: 1; }
|
||||
|
||||
/* ── Magical particle canvas ─────────────────────── */
|
||||
#magic-particles {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0.85;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
body::before, body::after, #magic-particles { display: none !important; }
|
||||
}
|
||||
|
||||
a { color: var(--purple); transition: color var(--transition-fast); }
|
||||
a:hover { color: var(--orange); }
|
||||
|
||||
/* Smooth page transitions */
|
||||
.mc-main { animation: fadeUp 0.3s ease-out; }
|
||||
.mc-main { animation: fadeUp 0.4s var(--ease-out-expo); }
|
||||
@keyframes fadeUp {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
from { opacity: 0; transform: translateY(12px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@@ -98,12 +165,13 @@ a:hover { color: var(--orange); }
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 24px;
|
||||
padding-top: max(12px, env(safe-area-inset-top));
|
||||
background: rgba(17, 8, 32, 0.86);
|
||||
backdrop-filter: blur(14px);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 10px 24px;
|
||||
padding-top: max(10px, env(safe-area-inset-top));
|
||||
background: rgba(8, 4, 18, 0.82);
|
||||
backdrop-filter: blur(20px) saturate(1.4);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(1.4);
|
||||
border-bottom: 1px solid rgba(124, 58, 237, 0.12);
|
||||
box-shadow: 0 1px 24px rgba(124, 58, 237, 0.08), 0 1px 0 rgba(124, 58, 237, 0.06);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
@@ -117,8 +185,13 @@ a:hover { color: var(--orange); }
|
||||
letter-spacing: 0.15em;
|
||||
text-shadow: 0 0 18px rgba(168, 85, 247, 0.55), 0 0 40px rgba(168, 85, 247, 0.25);
|
||||
text-decoration: none;
|
||||
animation: titleGlow 4s ease-in-out infinite alternate;
|
||||
}
|
||||
.mc-title:hover { color: var(--text-bright); text-decoration: none; }
|
||||
@keyframes titleGlow {
|
||||
0% { text-shadow: 0 0 18px rgba(168, 85, 247, 0.55), 0 0 40px rgba(168, 85, 247, 0.25); }
|
||||
100% { text-shadow: 0 0 24px rgba(168, 85, 247, 0.75), 0 0 60px rgba(168, 85, 247, 0.35), 0 0 80px rgba(124, 58, 237, 0.15); }
|
||||
}
|
||||
.mc-subtitle {
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
@@ -127,9 +200,15 @@ a:hover { color: var(--orange); }
|
||||
}
|
||||
.mc-time {
|
||||
font-size: 14px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--orange);
|
||||
letter-spacing: 0.1em;
|
||||
text-shadow: 0 0 10px rgba(249, 115, 22, 0.4);
|
||||
animation: clockPulse 2s ease-in-out infinite alternate;
|
||||
}
|
||||
@keyframes clockPulse {
|
||||
0% { text-shadow: 0 0 10px rgba(249, 115, 22, 0.4); }
|
||||
100% { text-shadow: 0 0 16px rgba(249, 115, 22, 0.6), 0 0 30px rgba(249, 115, 22, 0.2); }
|
||||
}
|
||||
.mc-test-link {
|
||||
font-size: 9px;
|
||||
@@ -137,13 +216,19 @@ a:hover { color: var(--orange); }
|
||||
color: var(--text-dim);
|
||||
letter-spacing: 0.2em;
|
||||
text-decoration: none;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 2px;
|
||||
padding: 3px 8px;
|
||||
transition: border-color 0.15s, color 0.15s;
|
||||
border: 1px solid rgba(59, 26, 92, 0.4);
|
||||
border-radius: 3px;
|
||||
padding: 4px 10px;
|
||||
transition: border-color var(--transition-fast), color var(--transition-fast),
|
||||
background var(--transition-fast), box-shadow var(--transition-fast);
|
||||
touch-action: manipulation;
|
||||
}
|
||||
.mc-test-link:hover { border-color: var(--purple); color: var(--purple); }
|
||||
.mc-test-link:hover {
|
||||
border-color: var(--purple);
|
||||
color: var(--purple);
|
||||
background: rgba(168, 85, 247, 0.06);
|
||||
box-shadow: 0 0 8px rgba(168, 85, 247, 0.1);
|
||||
}
|
||||
|
||||
/* ── Named link colors ───────────────────────────── */
|
||||
.mc-link-thinking { color: #c084fc; }
|
||||
@@ -157,25 +242,33 @@ a:hover { color: var(--orange); }
|
||||
cursor: pointer;
|
||||
}
|
||||
.mc-dropdown-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
top: calc(100% + 8px);
|
||||
right: 0;
|
||||
background: rgba(17, 8, 32, 0.96);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
padding: 8px 0;
|
||||
background: rgba(12, 6, 24, 0.96);
|
||||
backdrop-filter: blur(24px) saturate(1.3);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(1.3);
|
||||
border: 1px solid rgba(124, 58, 237, 0.15);
|
||||
border-radius: 6px;
|
||||
padding: 6px 0;
|
||||
min-width: 160px;
|
||||
z-index: 150;
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(124, 58, 237, 0.06);
|
||||
/* Animated fade + slide */
|
||||
display: flex;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-4px);
|
||||
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
|
||||
}
|
||||
.mc-nav-dropdown:hover .mc-dropdown-menu,
|
||||
.mc-nav-dropdown.open .mc-dropdown-menu {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
.mc-dropdown-menu .mc-test-link {
|
||||
display: block;
|
||||
@@ -251,12 +344,13 @@ a:hover { color: var(--orange); }
|
||||
right: -280px;
|
||||
width: 280px;
|
||||
height: 100%;
|
||||
background: rgba(17, 8, 32, 0.96);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
border-left: 1px solid var(--border);
|
||||
background: rgba(12, 6, 24, 0.96);
|
||||
backdrop-filter: blur(28px) saturate(1.4);
|
||||
-webkit-backdrop-filter: blur(28px) saturate(1.4);
|
||||
border-left: 1px solid rgba(124, 58, 237, 0.12);
|
||||
box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5);
|
||||
z-index: 200;
|
||||
transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: right 0.35s var(--ease-out-expo);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: max(12px, env(safe-area-inset-top));
|
||||
@@ -343,18 +437,21 @@ a:hover { color: var(--orange); }
|
||||
/* ── Panel / Card overrides ──────────────────────── */
|
||||
.mc-panel {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(var(--glass-blur));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur));
|
||||
backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-sm);
|
||||
transition: border-color 0.2s ease;
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-md), var(--shadow-glow-purple);
|
||||
transition: border-color var(--transition-med), box-shadow var(--transition-med),
|
||||
transform var(--transition-fast);
|
||||
}
|
||||
.mc-panel:hover {
|
||||
border-color: rgba(124, 58, 237, 0.3);
|
||||
border-color: rgba(124, 58, 237, 0.32);
|
||||
box-shadow: var(--shadow-lg), 0 0 28px rgba(124, 58, 237, 0.12);
|
||||
}
|
||||
.mc-panel-header {
|
||||
background: rgba(24, 10, 45, 0.90);
|
||||
border-bottom: 1px solid var(--border);
|
||||
border-bottom: 1px solid rgba(59, 26, 92, 0.4);
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: var(--text-dim);
|
||||
@@ -366,10 +463,16 @@ a:hover { color: var(--orange); }
|
||||
/* ── Agent Card ──────────────────────────────────── */
|
||||
.mc-agent-card {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 12px;
|
||||
background: rgba(24, 10, 45, 0.82);
|
||||
transition: border-color 0.2s, transform 0.15s;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: border-color var(--transition-med), transform var(--transition-fast),
|
||||
box-shadow var(--transition-med);
|
||||
}
|
||||
.mc-agent-card:hover {
|
||||
border-color: rgba(124, 58, 237, 0.25);
|
||||
box-shadow: var(--shadow-md), 0 0 16px rgba(124, 58, 237, 0.08);
|
||||
}
|
||||
.mc-agent-card:active {
|
||||
transform: scale(0.98);
|
||||
@@ -381,9 +484,22 @@ a:hover { color: var(--orange); }
|
||||
flex-shrink: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
.status-dot.green { background: var(--green); box-shadow: 0 0 6px var(--green); }
|
||||
.status-dot.amber { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
|
||||
.status-dot.red { background: var(--red); box-shadow: 0 0 6px var(--red); }
|
||||
.status-dot.green { background: var(--green); box-shadow: 0 0 6px var(--green); animation: dotPulse 2s ease-in-out infinite; }
|
||||
.status-dot.amber { background: var(--amber); box-shadow: 0 0 6px var(--amber); animation: dotPulseAmber 2s ease-in-out infinite; }
|
||||
.status-dot.red { background: var(--red); box-shadow: 0 0 6px var(--red); animation: dotPulseRed 1.5s ease-in-out infinite; }
|
||||
|
||||
@keyframes dotPulse {
|
||||
0%, 100% { box-shadow: 0 0 6px var(--green); }
|
||||
50% { box-shadow: 0 0 12px var(--green), 0 0 20px rgba(0, 232, 122, 0.3); }
|
||||
}
|
||||
@keyframes dotPulseAmber {
|
||||
0%, 100% { box-shadow: 0 0 6px var(--amber); }
|
||||
50% { box-shadow: 0 0 12px var(--amber), 0 0 20px rgba(255, 184, 0, 0.3); }
|
||||
}
|
||||
@keyframes dotPulseRed {
|
||||
0%, 100% { box-shadow: 0 0 6px var(--red); }
|
||||
50% { box-shadow: 0 0 12px var(--red), 0 0 20px rgba(255, 68, 85, 0.3); }
|
||||
}
|
||||
|
||||
.agent-name {
|
||||
font-size: 14px;
|
||||
@@ -407,7 +523,13 @@ a:hover { color: var(--orange); }
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
margin-bottom: 10px;
|
||||
transition: border-color 0.2s, transform 0.15s;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: border-color var(--transition-med), transform var(--transition-fast),
|
||||
box-shadow var(--transition-med);
|
||||
}
|
||||
.agent-card:hover {
|
||||
border-color: rgba(124, 58, 237, 0.28);
|
||||
box-shadow: var(--shadow-md), 0 0 16px rgba(124, 58, 237, 0.08);
|
||||
}
|
||||
.agent-card:active { transform: scale(0.98); }
|
||||
.agent-avatar {
|
||||
@@ -422,6 +544,7 @@ a:hover { color: var(--orange); }
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 0 12px rgba(168, 85, 247, 0.25);
|
||||
}
|
||||
.agent-info { flex: 1; min-width: 0; }
|
||||
.agent-info .agent-name {
|
||||
@@ -479,13 +602,19 @@ a:hover { color: var(--orange); }
|
||||
.msg-body {
|
||||
background: rgba(24, 10, 45, 0.80);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 10px 12px;
|
||||
line-height: 1.65;
|
||||
line-height: 1.7;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
box-shadow: var(--shadow-sm);
|
||||
animation: msgAppear 0.3s var(--ease-out-expo);
|
||||
}
|
||||
.chat-message.user .msg-body { border-color: var(--border-glow); }
|
||||
@keyframes msgAppear {
|
||||
from { opacity: 0; transform: translateY(6px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.chat-message.user .msg-body { border-color: rgba(124, 58, 237, 0.35); box-shadow: var(--shadow-sm), 0 0 12px rgba(124, 58, 237, 0.06); }
|
||||
.chat-message.agent .msg-body { border-left: 3px solid var(--purple); }
|
||||
.chat-message.error-msg .msg-body { border-left: 3px solid var(--red); color: var(--red); }
|
||||
|
||||
@@ -575,65 +704,84 @@ a:hover { color: var(--orange); }
|
||||
.mc-input {
|
||||
background: rgba(8, 4, 18, 0.75) !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
border-radius: 3px !important;
|
||||
border-radius: var(--radius-md) !important;
|
||||
color: var(--text-bright) !important;
|
||||
font-family: var(--font) !important;
|
||||
font-size: 13px !important;
|
||||
transition: border-color var(--transition-fast), box-shadow var(--transition-med) !important;
|
||||
min-height: 48px;
|
||||
padding: 12px 14px !important;
|
||||
}
|
||||
.mc-input:focus {
|
||||
border-color: var(--border-glow) !important;
|
||||
box-shadow: 0 0 0 1px var(--border-glow), 0 0 10px rgba(124, 58, 237, 0.25) !important;
|
||||
box-shadow: 0 0 0 1px var(--border-glow), 0 0 14px rgba(124, 58, 237, 0.2), 0 0 30px rgba(124, 58, 237, 0.06) !important;
|
||||
}
|
||||
.mc-input::placeholder { color: var(--text-dim) !important; }
|
||||
|
||||
/* Larger touch-friendly input on tablets / stylus devices */
|
||||
@media (pointer: coarse), (hover: none) {
|
||||
.mc-input, .mobile-chat-input input, .local-chat-input input {
|
||||
min-height: 56px;
|
||||
font-size: 16px !important;
|
||||
padding: 14px 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mc-btn-send {
|
||||
background: var(--border-glow);
|
||||
background: linear-gradient(135deg, var(--border-glow), #9333ea);
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-bright);
|
||||
font-family: var(--font);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
padding: 8px 18px;
|
||||
letter-spacing: 0.12em;
|
||||
transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.1s;
|
||||
transition: background var(--transition-fast), color var(--transition-fast),
|
||||
box-shadow var(--transition-med), transform 0.1s;
|
||||
touch-action: manipulation;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 0 12px rgba(124, 58, 237, 0.2);
|
||||
}
|
||||
.mc-btn-send:hover {
|
||||
background: var(--orange);
|
||||
background: linear-gradient(135deg, var(--orange), #f59e0b);
|
||||
color: #080412;
|
||||
box-shadow: 0 0 14px rgba(249, 115, 22, 0.45);
|
||||
box-shadow: 0 0 20px rgba(249, 115, 22, 0.45), 0 0 40px rgba(249, 115, 22, 0.15);
|
||||
}
|
||||
.mc-btn-send:active { transform: scale(0.96); }
|
||||
|
||||
/* ── Buttons (generic) ──────────────────────────── */
|
||||
.btn-primary {
|
||||
background: var(--border-glow) !important;
|
||||
border-color: var(--border-glow) !important;
|
||||
background: linear-gradient(135deg, var(--border-glow), #9333ea) !important;
|
||||
border-color: transparent !important;
|
||||
color: var(--text-bright) !important;
|
||||
font-family: var(--font);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.06em;
|
||||
transition: background 0.15s, box-shadow 0.2s, transform 0.1s;
|
||||
border-radius: var(--radius-md);
|
||||
transition: background var(--transition-fast), box-shadow var(--transition-med), transform 0.1s;
|
||||
box-shadow: 0 0 10px rgba(124, 58, 237, 0.15);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: var(--purple) !important;
|
||||
box-shadow: 0 0 16px rgba(168, 85, 247, 0.4);
|
||||
background: linear-gradient(135deg, var(--purple), #7c3aed) !important;
|
||||
box-shadow: 0 0 20px rgba(168, 85, 247, 0.35), 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.btn-primary:active { transform: scale(0.97); }
|
||||
|
||||
.btn-secondary {
|
||||
background: rgba(59, 26, 92, 0.3) !important;
|
||||
border-color: var(--border) !important;
|
||||
background: rgba(59, 26, 92, 0.25) !important;
|
||||
border-color: rgba(59, 26, 92, 0.5) !important;
|
||||
color: var(--text) !important;
|
||||
font-family: var(--font);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.06em;
|
||||
border-radius: var(--radius-md);
|
||||
transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-med);
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
background: rgba(59, 26, 92, 0.5) !important;
|
||||
background: rgba(59, 26, 92, 0.45) !important;
|
||||
border-color: var(--purple) !important;
|
||||
box-shadow: 0 0 12px rgba(168, 85, 247, 0.12);
|
||||
}
|
||||
|
||||
/* ── Grid utilities (used across pages) ────────── */
|
||||
@@ -650,6 +798,14 @@ a:hover { color: var(--orange); }
|
||||
border-radius: var(--radius-md);
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: border-color var(--transition-med), box-shadow var(--transition-med),
|
||||
transform var(--transition-fast);
|
||||
}
|
||||
.stat:hover {
|
||||
border-color: rgba(124, 58, 237, 0.28);
|
||||
box-shadow: var(--shadow-md), var(--shadow-glow-purple);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.stat-value {
|
||||
font-size: 1.6rem;
|
||||
@@ -657,6 +813,7 @@ a:hover { color: var(--orange); }
|
||||
color: var(--text-bright);
|
||||
font-family: var(--font);
|
||||
line-height: 1.2;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.stat-label {
|
||||
font-size: 0.7rem;
|
||||
@@ -713,15 +870,20 @@ a:hover { color: var(--orange); }
|
||||
/* ── Card enhancements (Bootstrap cards in theme) ── */
|
||||
.card {
|
||||
background: var(--glass-bg) !important;
|
||||
backdrop-filter: blur(var(--glass-blur));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur));
|
||||
backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
|
||||
border: 1px solid var(--glass-border) !important;
|
||||
border-radius: var(--radius-md) !important;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: var(--shadow-md);
|
||||
transition: border-color var(--transition-med), box-shadow var(--transition-med);
|
||||
}
|
||||
.card:hover {
|
||||
border-color: rgba(124, 58, 237, 0.25) !important;
|
||||
}
|
||||
.card-header {
|
||||
background: rgba(24, 10, 45, 0.90) !important;
|
||||
border-bottom: 1px solid var(--border) !important;
|
||||
border-bottom: 1px solid rgba(59, 26, 92, 0.4) !important;
|
||||
padding: 14px 16px;
|
||||
}
|
||||
.card-title {
|
||||
@@ -738,14 +900,22 @@ a:hover { color: var(--orange); }
|
||||
/* ── HTMX Loading ────────────────────────────────── */
|
||||
.htmx-indicator { display: none; }
|
||||
.htmx-request .htmx-indicator,
|
||||
.htmx-request.htmx-indicator { display: inline-block; color: var(--amber); animation: blink 0.8s infinite; }
|
||||
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
|
||||
.htmx-request.htmx-indicator {
|
||||
display: inline-block;
|
||||
color: var(--amber);
|
||||
animation: shimmerLoad 1.2s ease-in-out infinite;
|
||||
}
|
||||
@keyframes shimmerLoad {
|
||||
0% { opacity: 1; text-shadow: 0 0 4px rgba(255, 184, 0, 0.3); }
|
||||
50% { opacity: 0.3; text-shadow: 0 0 8px rgba(255, 184, 0, 0.6); }
|
||||
100% { opacity: 1; text-shadow: 0 0 4px rgba(255, 184, 0, 0.3); }
|
||||
}
|
||||
|
||||
/* ── Scrollbar ───────────────────────────────────── */
|
||||
::-webkit-scrollbar { width: 4px; }
|
||||
::-webkit-scrollbar { width: 5px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: var(--border-glow); }
|
||||
::-webkit-scrollbar-thumb { background: rgba(59, 26, 92, 0.6); border-radius: 4px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: var(--border-glow); box-shadow: 0 0 4px rgba(124, 58, 237, 0.3); }
|
||||
|
||||
/* ── Nav tabs (Bootstrap override) ───────────────── */
|
||||
.nav-tabs {
|
||||
|
||||
Reference in New Issue
Block a user