82 lines
2.4 KiB
CSS
82 lines
2.4 KiB
CSS
@import "tailwindcss";
|
|
|
|
@plugin 'tailwind-scrollbar';
|
|
|
|
@theme {
|
|
--color-contrast: rgba(var(--contrast));
|
|
--color-neutral-900: rgba(var(--neutral-900));
|
|
--color-neutral-800: rgba(var(--neutral-800));
|
|
--color-neutral-700: rgba(var(--neutral-700));
|
|
--color-neutral-600: rgba(var(--neutral-600));
|
|
--color-neutral-500: rgba(var(--neutral-500));
|
|
--color-neutral-400: rgba(var(--neutral-400));
|
|
--color-neutral-300: rgba(var(--neutral-300));
|
|
--color-neutral-200: rgba(var(--neutral-200));
|
|
--color-neutral-100: rgba(var(--neutral-100));
|
|
--color-accent-600: rgba(var(--accent-600));
|
|
--color-accent-500: rgba(var(--accent-500));
|
|
--color-accent-400: rgba(var(--accent-400));
|
|
}
|
|
|
|
/*
|
|
The default border color has changed to `currentColor` in Tailwind CSS v4,
|
|
so we've added these compatibility styles to make sure everything still
|
|
looks the same as it did with Tailwind CSS v3.
|
|
|
|
If we ever want to remove these styles, we need to add an explicit border
|
|
color utility to any element that depends on these defaults.
|
|
*/
|
|
@layer base {
|
|
*,
|
|
::after,
|
|
::before,
|
|
::backdrop,
|
|
::file-selector-button {
|
|
border-color: var(--color-gray-200, currentColor);
|
|
}
|
|
}
|
|
|
|
@utility article {
|
|
@apply px-2 sm:px-4 py-4 mb-4 bg-neutral-800/40 w-full mx-auto max-w-4xl rounded-sm;
|
|
}
|
|
|
|
@utility btn-primary {
|
|
@apply bg-accent-500 text-contrast rounded-sm p-2 sm:p-4 hover:bg-accent-400 cursor-pointer transition-colors;
|
|
}
|
|
|
|
@utility btn-secondary {
|
|
@apply bg-neutral-400 text-contrast rounded-sm p-2 sm:p-4 hover:bg-neutral-300 cursor-pointer transition-colors;
|
|
}
|
|
|
|
:root {
|
|
--contrast: 255, 255, 255;
|
|
--neutral-900: 243, 244, 246;
|
|
--neutral-800: 229, 231, 235;
|
|
--neutral-700: 209, 213, 219;
|
|
--neutral-600: 156, 163, 175;
|
|
--neutral-500: 180, 180, 180;
|
|
--neutral-400: 75, 85, 99;
|
|
--neutral-300: 55, 65, 81;
|
|
--neutral-200: 31, 41, 55;
|
|
--neutral-100: 17, 24, 39;
|
|
--accent-400: 132, 204, 22;
|
|
--accent-500: 101, 163, 13;
|
|
--accent-600: 77, 124, 15;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--contrast: 0, 0, 0;
|
|
--neutral-900: 17, 24, 39;
|
|
--neutral-800: 31, 41, 55;
|
|
--neutral-700: 55, 65, 81;
|
|
--neutral-600: 75, 85, 99;
|
|
--neutral-500: 107, 114, 128;
|
|
--neutral-300: 209, 213, 219;
|
|
--neutral-400: 156, 163, 175;
|
|
--neutral-200: 229, 231, 235;
|
|
--accent-600: 101, 163, 13;
|
|
--accent-500: 132, 204, 22;
|
|
--accent-400: 163, 230, 53;
|
|
}
|
|
}
|