157 lines
3.6 KiB
CSS
157 lines
3.6 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--highlight: 220, 84%, 53%; /* #2266ec */
|
|
|
|
--def-100: 210 40% 98%; /* #F0F4F9 */
|
|
--def-200: 210 40% 96.1%; /* #E7ECF2 */
|
|
--def-300: 210 15.14% 89.41%; /* #DDE3E9 */
|
|
--def-400: 210 9.08% 75.05%; /* #B3BDC7 */
|
|
|
|
--background: 0 0% 100%; /* #FFFFFF */
|
|
--foreground: 222.2 84% 4.9%; /* #0C162A */
|
|
|
|
--card: 0 0% 100%; /* #FFFFFF */
|
|
--card-foreground: 222.2 84% 4.9%; /* #0C162A */
|
|
|
|
--popover: 0 0% 100%; /* #FFFFFF */
|
|
--popover-foreground: 222.2 84% 4.9%; /* #0C162A */
|
|
|
|
--primary: 222.2 47.4% 11.2%; /* #163049 */
|
|
--primary-foreground: 210 40% 98%; /* #F0F4F9 */
|
|
|
|
--secondary: 210 40% 96.1%; /* #E7ECF2 */
|
|
--secondary-foreground: 222.2 47.4% 11.2%; /* #163049 */
|
|
|
|
--muted: 210 40% 96.1%; /* #E7ECF2 */
|
|
--muted-foreground: 215.4 16.3% 46.9%; /* #798290 */
|
|
|
|
--accent: 210 40% 96.1%; /* #E7ECF2 */
|
|
--accent-foreground: 222.2 47.4% 11.2%; /* #163049 */
|
|
|
|
--destructive: 0 84.2% 60.2%; /* #F2677D */
|
|
--destructive-foreground: 0 100% 97.25%; /* #F8F9FB */
|
|
|
|
--border: 214.3 31.8% 91.4%; /* #E8EBF1 */
|
|
--input: 214.3 31.8% 91.4%; /* #E8EBF1 */
|
|
--ring: 212.73deg 26.83% 83.92%; /* #CDD6E2 */
|
|
|
|
--radius: 0.5rem;
|
|
}
|
|
|
|
.dark {
|
|
--highlight: 221.44 100% 62.04%;
|
|
|
|
--def-100: 0 0% 8%; /* #0f0f0f */
|
|
--def-200: 0 0% 13.12%; /* #212121 */
|
|
--def-300: 0 0% 15.1%; /* #262626 */
|
|
--def-400: 0 0% 25.23%; /* #404040 */
|
|
|
|
--background: 0 0% 12.02%; /* #1e1e1e */
|
|
--foreground: 0 0% 98%; /* #fafafa */
|
|
|
|
--card: 0 0% 10%; /* #1a1a1a */
|
|
--card-foreground: 0 0% 98%; /* #fafafa */
|
|
|
|
--popover: 0 0% 10%; /* #1a1a1a */
|
|
--popover-foreground: 0 0% 98%; /* #fafafa */
|
|
|
|
--primary: 0 0% 98%; /* #fafafa */
|
|
--primary-foreground: 0 0% 11.2%; /* #1c1c1c */
|
|
|
|
--secondary: 0 0% 15.1%; /* #262626 */
|
|
--secondary-foreground: 0 0% 98%; /* #fafafa */
|
|
|
|
--muted: 0 0% 15.1%; /* #262626 */
|
|
--muted-foreground: 0 0% 65%; /* #fafafa */
|
|
|
|
--accent: 0 0% 15.1%; /* #262626 */
|
|
--accent-foreground: 0 0% 98%; /* #fafafa */
|
|
|
|
--destructive: 0 0% 30.6%; /* #4e4e4e */
|
|
--destructive-foreground: 0 0% 98%; /* #fafafa */
|
|
|
|
--border: 0 0% 15.1%; /* #262626 */
|
|
--input: 0 0% 15.1%; /* #262626 */
|
|
--ring: 0 0% 83.9%; /* #d6d6d6 */
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
body {
|
|
@apply bg-card text-foreground;
|
|
}
|
|
|
|
.h1 {
|
|
@apply text-3xl font-medium;
|
|
}
|
|
|
|
.h2 {
|
|
@apply text-xl font-medium;
|
|
}
|
|
|
|
.h3 {
|
|
@apply text-lg font-medium;
|
|
}
|
|
|
|
.h4 {
|
|
@apply font-medium;
|
|
}
|
|
|
|
.ellipsis {
|
|
@apply overflow-hidden text-ellipsis whitespace-nowrap;
|
|
}
|
|
|
|
.shine {
|
|
background-repeat: no-repeat;
|
|
background-position:
|
|
-120px -120px,
|
|
0 0;
|
|
background-image: linear-gradient(
|
|
0 0,
|
|
rgba(255, 255, 255, 0.2) 0%,
|
|
rgba(255, 255, 255, 0.2) 37%,
|
|
rgba(255, 255, 255, 0.8) 45%,
|
|
rgba(255, 255, 255, 0) 50%
|
|
);
|
|
background-size:
|
|
250% 250%,
|
|
100% 100%;
|
|
transition: background-position 0s ease;
|
|
}
|
|
|
|
.shine:hover {
|
|
background-position:
|
|
0 0,
|
|
0 0;
|
|
transition-duration: 0.5s;
|
|
}
|
|
|
|
.card {
|
|
@apply border border-border bg-card;
|
|
}
|
|
}
|
|
|
|
/* Rechart */
|
|
|
|
.recharts-wrapper .recharts-cartesian-grid-horizontal line:first-child,
|
|
.recharts-wrapper .recharts-cartesian-grid-horizontal line:last-child {
|
|
stroke-opacity: 0;
|
|
}
|
|
|
|
.hide-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* Hide scrollbar for IE, Edge and Firefox */
|
|
.hide-scrollbar {
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
scrollbar-width: none; /* Firefox */
|
|
}
|