Files
OpenFin/frontend/src/index.css
2026-06-29 09:23:26 +02:00

68 lines
2.3 KiB
CSS

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
body {
@apply bg-dark-900 text-slate-200 font-mono;
font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { @apply bg-dark-800; }
::-webkit-scrollbar-thumb { @apply bg-dark-500 rounded; }
::-webkit-scrollbar-thumb:hover { @apply bg-slate-600; }
}
@layer utilities {
.scrollbar-none {
scrollbar-width: none;
-ms-overflow-style: none;
}
.scrollbar-none::-webkit-scrollbar {
display: none;
}
}
@layer components {
.card {
@apply bg-dark-800 border border-slate-700/40 rounded-lg p-4;
}
.card-sm {
@apply bg-dark-700 border border-slate-700/30 rounded p-3;
}
.badge {
@apply inline-flex items-center px-2 py-0.5 rounded text-xs font-medium;
}
.badge-green { @apply badge bg-emerald-900/50 text-emerald-400 border border-emerald-700/30; }
.badge-red { @apply badge bg-red-900/50 text-red-400 border border-red-700/30; }
.badge-yellow { @apply badge bg-yellow-900/50 text-yellow-400 border border-yellow-700/30; }
.badge-blue { @apply badge bg-blue-900/50 text-blue-400 border border-blue-700/30; }
.badge-orange { @apply badge bg-orange-900/50 text-orange-400 border border-orange-700/30; }
.badge-purple { @apply badge bg-purple-900/50 text-purple-400 border border-purple-700/30; }
.stat-value { @apply text-2xl font-bold text-white; }
.stat-label { @apply text-xs text-slate-500 uppercase tracking-wider; }
.nav-link {
@apply flex items-center gap-2 px-3 py-2 rounded text-sm text-slate-400
hover:bg-dark-600 hover:text-slate-200 transition-colors;
}
.nav-link.active {
@apply bg-dark-600 text-blue-400 border-l-2 border-blue-400;
}
.positive { @apply text-emerald-400; }
.negative { @apply text-red-400; }
.neutral { @apply text-slate-400; }
.input {
@apply bg-dark-700 border border-slate-700/50 rounded text-slate-200 text-sm
px-3 py-1.5 outline-none focus:border-blue-500/60 transition-colors;
color-scheme: dark;
}
.section-title {
@apply text-xs font-semibold text-slate-500 uppercase tracking-widest mb-3;
}
.risk-low { @apply text-emerald-400; }
.risk-medium { @apply text-yellow-400; }
.risk-high { @apply text-orange-400; }
.risk-extreme { @apply text-red-400; }
}