45 lines
1.4 KiB
CSS
45 lines
1.4 KiB
CSS
/* Nav */
|
|
@utility nav-base {
|
|
@apply border border-neutral-100 dark:border-stone-500/20
|
|
bg-neutral-100 dark:bg-neutral-800
|
|
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;
|
|
}
|