docs/assets/css/global.css

71 lines
1.7 KiB
CSS

/* global styles */
@layer base {
[x-cloak] {
display: none !important;
}
:root {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scrollbar-color: theme(colors.gray.light.400) theme(colors.black / 0.05);
&.dark {
scrollbar-color: theme(colors.gray.dark.800) theme(colors.white / 0.10);
}
}
}
/* utility classes */
@layer utilities {
.link {
@apply text-blue-light underline underline-offset-2 dark:text-blue-dark;
}
.invertible {
@apply dark:hue-rotate-180 dark:invert dark:filter;
}
.sidebar-hover {
@apply hover:bg-gray-light-200 hover:dark:bg-gray-dark-200;
}
.sidebar-underline {
@apply underline decoration-blue-light decoration-4 underline-offset-4 dark:decoration-blue-dark;
}
.bg-pattern-blue {
background-color: theme(colors.white / 50%);
background-image: url('/assets/images/bg-pattern-blue.webp');
background-blend-mode: overlay;
background-size: cover;
background-repeat: none;
.dark & {
background-color: theme(colors.black / 70%);
}
}
.bg-pattern-purple {
background-color: theme(colors.white / 50%);
background-image: url('/assets/images/bg-pattern-purple.webp');
background-blend-mode: overlay;
background-size: cover;
background-repeat: none;
.dark & {
background-color: theme(colors.black / 70%);
}
}
.bg-pattern-verde {
background-color: theme(colors.white / 50%);
background-image: url('/assets/images/bg-pattern-verde.webp');
background-blend-mode: overlay;
background-size: cover;
background-repeat: none;
.dark & {
background-color: theme(colors.black / 70%);
}
}
}