meshai/dashboard-frontend/src/index.css
Matt Johnson (via Claude) 88554eb252 feat: dashboard visual overhaul — amber/blue/danger accents, Inter + JetBrains Mono, sharp corners, tighter density
- Tailwind config: semantic color tokens (amber/blue/danger), borderRadius all zero except full, Inter + JetBrains Mono font families
- index.css: Google Fonts imports, sharp scrollbar, scanline card texture, amber-glow utility
- Dashboard.tsx: three-color accent system (amber primary, blue informational, danger alerts), Inter for labels/prose, JetBrains Mono strictly for data values, all rounded corners removed, tighter spacing (p-4 cards, gap-4 grids, space-y-2 lists), underline-style tabs with amber active indicator, band condition dot indicators, source status dots remapped to semantic colors, StatCard supports per-instance value coloring, 36px minimum touch targets on interactive elements

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-06-10 07:19:38 +00:00

92 lines
1.7 KiB
CSS

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
background: #0a0e17;
margin: 0;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Custom scrollbar — sharp, no radius */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #0a0e17;
}
::-webkit-scrollbar-thumb {
background: #2d3a4d;
border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
background: #3b4a5d;
}
/* Scanline texture on cards */
.bg-bg-card {
background-image: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(255,255,255,0.008) 2px,
rgba(255,255,255,0.008) 3px
);
}
/* Amber glow utility */
.amber-glow {
box-shadow: 0 0 12px rgba(245,158,11,0.25);
}
/* Data values use JetBrains Mono */
.font-mono {
font-family: 'JetBrains Mono', monospace;
}
/* Pulsing animation for live indicator */
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.animate-pulse-slow {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
/* Toast slide-in animation */
@keyframes slide-in {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.animate-slide-in {
animation: slide-in 0.3s ease-out;
}
/* Line clamp utility */
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}