perplexity/Timmy-time-dashboard
Archived
1
0
Fork 0
forked from Rockachopa/Timmy-time-dashboard
Code Issues Pull Requests 1 Activity

Polish UI design with sleeker components and vivid magical animations (#172)

Browse Source
This commit is contained in:
Alexander Whitestone
2026-03-11 15:16:04 -04:00
committed by GitHub
parent 9e56fad342
commit 0b91e45d90
3 changed files with 381 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
static/css/mission-control.css
View File

@@ -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;