148 lines
2.8 KiB
CSS
148 lines
2.8 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
--foreground-rgb: 0, 0, 0;
|
|
--background-start-rgb: 214, 219, 220;
|
|
--background-end-rgb: 255, 255, 255;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--foreground-rgb: 255, 255, 255;
|
|
--background-start-rgb: 0, 0, 0;
|
|
--background-end-rgb: 0, 0, 0;
|
|
}
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
max-width: 100vw;
|
|
overflow-x: hidden;
|
|
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
}
|
|
|
|
body {
|
|
color: rgb(var(--foreground-rgb));
|
|
background: linear-gradient(
|
|
to bottom,
|
|
transparent,
|
|
rgb(var(--background-end-rgb))
|
|
)
|
|
rgb(var(--background-start-rgb));
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
html {
|
|
color-scheme: dark;
|
|
}
|
|
}
|
|
|
|
/* Custom scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #c1c1c1;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #a8a8a8;
|
|
}
|
|
|
|
/* Focus styles for accessibility */
|
|
.focus-ring {
|
|
@apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
|
|
}
|
|
|
|
/* Card styles */
|
|
.card {
|
|
@apply bg-white rounded-xl shadow-sm border border-gray-200 p-6;
|
|
}
|
|
|
|
.card-hover {
|
|
@apply transition-all duration-200 hover:shadow-md hover:border-gray-300;
|
|
}
|
|
|
|
/* Button styles */
|
|
.btn-primary {
|
|
@apply bg-primary-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-primary-700 focus-ring transition-colors;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply bg-gray-100 text-gray-900 px-4 py-2 rounded-lg font-medium hover:bg-gray-200 focus-ring transition-colors;
|
|
}
|
|
|
|
.btn-outline {
|
|
@apply border border-gray-300 text-gray-700 px-4 py-2 rounded-lg font-medium hover:bg-gray-50 focus-ring transition-colors;
|
|
}
|
|
|
|
/* Input styles */
|
|
.input {
|
|
@apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent;
|
|
}
|
|
|
|
/* Badge styles */
|
|
.badge {
|
|
@apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
|
|
}
|
|
|
|
.badge-success {
|
|
@apply bg-success-100 text-success-800;
|
|
}
|
|
|
|
.badge-warning {
|
|
@apply bg-warning-100 text-warning-800;
|
|
}
|
|
|
|
.badge-info {
|
|
@apply bg-info-100 text-info-800;
|
|
}
|
|
|
|
.badge-gray {
|
|
@apply bg-gray-100 text-gray-800;
|
|
}
|
|
|
|
/* Loading spinner */
|
|
.spinner {
|
|
@apply animate-spin rounded-full border-2 border-gray-300 border-t-primary-600;
|
|
}
|
|
|
|
/* Skeleton loading */
|
|
.skeleton {
|
|
@apply animate-pulse bg-gray-200 rounded;
|
|
}
|
|
|
|
/* Gradient backgrounds */
|
|
.gradient-primary {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
}
|
|
|
|
.gradient-success {
|
|
background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
|
|
}
|
|
|
|
/* Chart container */
|
|
.chart-container {
|
|
position: relative;
|
|
height: 300px;
|
|
width: 100%;
|
|
} |