45 lines
1.4 KiB
CSS
45 lines
1.4 KiB
CSS
/* Nav */
|
|
@utility nav-base {
|
|
@apply border border-mist-100/20 dark:border-mist-700/20
|
|
bg-mist-100/80 dark:bg-mist-900/40
|
|
shadow-xs dark:shadow-md
|
|
}
|
|
|
|
/* Fade edges of a div */
|
|
@utility mask-fade-edges {
|
|
-webkit-mask-image:
|
|
linear-gradient(to right, transparent, black var(--fade-dist, 1rem), black calc(100% - var(--fade-dist, 1rem)), transparent),
|
|
linear-gradient(to bottom, transparent, black var(--fade-dist, 1rem), black calc(100% - var(--fade-dist, 1rem)), transparent);
|
|
mask-image:
|
|
linear-gradient(to right, transparent, black var(--fade-dist, 1rem), black calc(100% - var(--fade-dist, 1rem)), transparent),
|
|
linear-gradient(to bottom, transparent, black var(--fade-dist, 1rem), black calc(100% - var(--fade-dist, 1rem)), transparent);
|
|
|
|
-webkit-mask-composite: source-in;
|
|
mask-composite: intersect;
|
|
}
|
|
|
|
/* Animations */
|
|
@utility smooth-reveal {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition: opacity 0.8s ease, transform 0.8s ease;
|
|
}
|
|
|
|
@utility smooth-reveal-2 {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition: opacity 0.8s ease, transform 0.8s ease;
|
|
}
|
|
|
|
@utility smooth-reveal-cards {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition: opacity 0.8s ease, transform 0.8s ease;
|
|
}
|
|
|
|
@utility smooth-reveal-fade {
|
|
opacity: 0;
|
|
transform: translateY(0px);
|
|
transition: opacity 1.8s ease, transform 0.8s ease;
|
|
}
|