123 lines
2.2 KiB
CSS
123 lines
2.2 KiB
CSS
@import 'tailwindcss';
|
|
|
|
@config '../tailwind.config.js';
|
|
|
|
@import "./theme.css" layer(theme);
|
|
@import "./_events.css" layer(theme);
|
|
@import "./_events.css" layer(utilities);
|
|
|
|
/*
|
|
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-border, currentcolor);
|
|
}
|
|
}
|
|
|
|
body {
|
|
color: var(--color-foreground);
|
|
background-color: var(--color-background);
|
|
}
|
|
|
|
.bgc {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.bgc::before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: .75rem;
|
|
aspect-ratio: 1;
|
|
margin-right: 0.5em;
|
|
border-radius: .25rem;
|
|
background-color: red;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.bgc-red::before {
|
|
@apply bg-red-500;
|
|
}
|
|
.bgc-orange::before {
|
|
@apply bg-orange-500;
|
|
}
|
|
.bgc-amber::before {
|
|
@apply bg-amber-500;
|
|
}
|
|
.bgc-yellow::before {
|
|
@apply bg-yellow-500;
|
|
}
|
|
.bgc-lime::before {
|
|
@apply bg-lime-500;
|
|
}
|
|
.bgc-green::before {
|
|
@apply bg-green-500;
|
|
}
|
|
.bgc-emerald::before {
|
|
@apply bg-emerald-600;
|
|
}
|
|
.bgc-teal::before {
|
|
@apply bg-teal-600;
|
|
}
|
|
.bgc-cyan::before {
|
|
@apply bg-cyan-600;
|
|
}
|
|
.bgc-sky::before {
|
|
@apply bg-sky-600;
|
|
}
|
|
.bgc-blue::before {
|
|
@apply bg-blue-600;
|
|
}
|
|
.bgc-indigo::before {
|
|
@apply bg-indigo-600;
|
|
}
|
|
.bgc-violet::before {
|
|
@apply bg-violet-600;
|
|
}
|
|
.bgc-purple::before {
|
|
@apply bg-purple-600;
|
|
}
|
|
.bgc-fuchsia::before {
|
|
@apply bg-fuchsia-600;
|
|
}
|
|
.bgc-pink::before {
|
|
@apply bg-pink-600;
|
|
}
|
|
.bgc-rose::before {
|
|
@apply bg-rose-600;
|
|
}
|
|
.bgc-black::before {
|
|
@apply bg-black dark:border-[1px] dark:border-slate-300;
|
|
}
|
|
.bgc-white::before {
|
|
@apply bg-white border-[1px] border-slate-700;
|
|
}
|
|
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
transition: all .5s ease;
|
|
}
|
|
.fade-delay-enter-active,
|
|
.fade-delay-leave-active {
|
|
transition: all .5s ease 1s;
|
|
}
|
|
|
|
.fade-enter-from,
|
|
.fade-leave-to,
|
|
.fade-delay-enter-from,
|
|
.fade-delay-leave-to {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|