Files
stats/apps/dashboard/src/styles/globals.css
Carl-Gerhard Lindesvärd 1665924073 give dark mode some love 🖤
2024-05-31 22:25:07 +02:00

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 */
}