156 lines
3.8 KiB
CSS
156 lines
3.8 KiB
CSS
:root {
|
|
--color-space-950: #09090b;
|
|
--color-space-900: #0f0f11;
|
|
--color-space-850: #121214;
|
|
--color-space-800: #18181b;
|
|
--color-space-border: #27272a;
|
|
--color-neon-purple: #a855f7;
|
|
--color-neon-green: #22c55e;
|
|
--color-neon-cyan: #06b6d4;
|
|
--color-neon-yellow: #eab308;
|
|
--color-neon-red: #ef4444;
|
|
--color-text-main: #d1d5db; /* gray-300 */
|
|
--color-text-dim: #71717a; /* zinc-400 */
|
|
--color-text-muted: #6b7280; /* gray-500 */
|
|
--color-text-bright: #ffffff;
|
|
|
|
/* Gradient Accents */
|
|
--color-green-400: #4ade80;
|
|
--color-yellow-400: #facc15;
|
|
--color-red-400: #f87171;
|
|
|
|
/* Chart Colors */
|
|
--color-chart-1: #a855f7;
|
|
--color-chart-2: #c084fc;
|
|
--color-chart-3: #e879f9;
|
|
--color-chart-4: #d946ef;
|
|
--color-chart-5: #22c55e;
|
|
--color-chart-6: #4ade80;
|
|
--color-chart-7: #86efac;
|
|
--color-chart-8: #10b981;
|
|
--color-chart-9: #06b6d4;
|
|
--color-chart-10: #f59e0b;
|
|
--color-chart-11: #ef4444;
|
|
--color-chart-12: #ec4899;
|
|
--color-chart-13: #8b5cf6;
|
|
--color-chart-14: #14b8a6;
|
|
--color-chart-15: #f97316;
|
|
--color-chart-16: #6366f1;
|
|
}
|
|
|
|
[x-cloak] {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Custom Scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
@apply bg-space-800 rounded-full;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
@apply bg-space-border;
|
|
}
|
|
|
|
/* Animations */
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(5px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.4s ease-out forwards;
|
|
}
|
|
|
|
/* Utility */
|
|
.glass-panel {
|
|
background: theme('colors.space.900 / 70%');
|
|
backdrop-filter: blur(12px);
|
|
border: 1px solid theme('colors.white / 8%');
|
|
}
|
|
|
|
.nav-item.active {
|
|
background: linear-gradient(90deg, theme('colors.neon.purple / 15%') 0%, transparent 100%);
|
|
@apply border-l-4 border-neon-purple text-white;
|
|
}
|
|
|
|
.nav-item {
|
|
@apply border-l-4 border-transparent transition-all duration-200;
|
|
}
|
|
|
|
.progress-gradient-success::-webkit-progress-value {
|
|
background-image: linear-gradient(to right, var(--color-neon-green), var(--color-green-400));
|
|
}
|
|
|
|
.progress-gradient-warning::-webkit-progress-value {
|
|
background-image: linear-gradient(to right, var(--color-neon-yellow), var(--color-yellow-400));
|
|
}
|
|
|
|
.progress-gradient-error::-webkit-progress-value {
|
|
background-image: linear-gradient(to right, var(--color-neon-red), var(--color-red-400));
|
|
}
|
|
|
|
/* Dashboard Grid */
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
/* Tooltip Customization */
|
|
.tooltip:before {
|
|
@apply bg-space-800 border border-space-border text-gray-200 font-mono text-xs;
|
|
}
|
|
|
|
.tooltip-left:before {
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Refactored Global Utilities */
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
/* View Containers */
|
|
.view-container {
|
|
@apply max-w-7xl mx-auto p-6 space-y-6 animate-fade-in;
|
|
}
|
|
|
|
/* Section Headers */
|
|
.section-header {
|
|
@apply flex justify-between items-center mb-6;
|
|
}
|
|
.section-title {
|
|
@apply text-2xl font-bold text-white tracking-tight;
|
|
}
|
|
.section-desc {
|
|
@apply text-gray-500 text-sm;
|
|
}
|
|
|
|
/* Component Unification */
|
|
.standard-table {
|
|
@apply table w-full border-separate border-spacing-0;
|
|
}
|
|
.standard-table thead {
|
|
@apply bg-space-900/50 text-gray-500 font-mono text-xs uppercase border-b border-space-border;
|
|
}
|
|
.standard-table tbody tr {
|
|
@apply hover:bg-white/5 transition-colors border-b border-space-border/30 last:border-0;
|
|
} |