57cb35d565
Each store is a compact row with a route-colored left accent bar. Tap to bloom open — smooth height animation, route-colored background glow and border highlight, tags/meta/actions revealed. Rows stagger in on load/filter change. No swipe gestures needed. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
61 lines
1.8 KiB
CSS
61 lines
1.8 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--color-surface-950: #070a0f;
|
|
--color-surface-900: #0f1117;
|
|
--color-surface-800: #161b27;
|
|
--color-surface-700: #1e2535;
|
|
--color-surface-600: #28334a;
|
|
--color-surface-500: #334155;
|
|
|
|
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
|
|
}
|
|
|
|
html {
|
|
background-color: #0f1117;
|
|
color: #e2e8f0;
|
|
font-family: var(--font-sans);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
body { margin: 0; }
|
|
|
|
/* Scrollbar */
|
|
::-webkit-scrollbar { width: 6px; height: 6px; }
|
|
::-webkit-scrollbar-track { background: #161b27; }
|
|
::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
|
|
::-webkit-scrollbar-thumb:hover { background: #475569; }
|
|
|
|
/* Glass card */
|
|
.glass {
|
|
background: rgba(22, 27, 39, 0.7);
|
|
backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(255, 255, 255, 0.07);
|
|
}
|
|
|
|
/* Route badge colors */
|
|
.badge-auto { background: rgba(34,197,94,0.15); color: #86efac; border: 1px solid rgba(34,197,94,0.3); }
|
|
.badge-ask { background: rgba(245,158,11,0.15); color: #fcd34d; border: 1px solid rgba(245,158,11,0.3); }
|
|
.badge-verify { background: rgba(59,130,246,0.15); color: #93c5fd; border: 1px solid rgba(59,130,246,0.3); }
|
|
.badge-ignore { background: rgba(107,114,128,0.15);color: #9ca3af; border: 1px solid rgba(107,114,128,0.3); }
|
|
|
|
/* Animations */
|
|
@keyframes fade-in-up {
|
|
from { opacity: 0; transform: translateY(6px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.animate-fade-in { animation: fade-in-up 0.18s ease-out; }
|
|
|
|
@keyframes slide-in {
|
|
from { opacity: 0; transform: translateX(12px); }
|
|
to { opacity: 1; transform: translateX(0); }
|
|
}
|
|
.animate-slide-in { animation: slide-in 0.2s ease-out; }
|
|
|
|
@keyframes row-in {
|
|
from { opacity: 0; transform: translateY(8px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.animate-row-in {
|
|
animation: row-in 0.25s ease-out both;
|
|
}
|