96 lines
1.7 KiB
CSS
96 lines
1.7 KiB
CSS
/* ==========================================================================
|
|
UTILITY CLASSES
|
|
Color utilities, animations, helper classes
|
|
========================================================================== */
|
|
|
|
.bg-bg {
|
|
background-color: var(--color-bg);
|
|
}
|
|
.bg-surface {
|
|
background-color: var(--color-surface);
|
|
}
|
|
|
|
.text-text {
|
|
color: var(--color-text);
|
|
}
|
|
.text-muted {
|
|
color: var(--color-text-muted);
|
|
}
|
|
.text-accent {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.border-border {
|
|
border-color: var(--color-border);
|
|
}
|
|
.border-accent {
|
|
border-color: var(--color-accent);
|
|
}
|
|
|
|
.bg-accent {
|
|
background-color: var(--color-accent);
|
|
}
|
|
.underline-accent {
|
|
text-decoration-color: var(--color-accent);
|
|
}
|
|
|
|
/* Simple fade-up animation */
|
|
@keyframes fade-up {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(8px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.animate-fade-up {
|
|
animation: fade-up 0.45s ease-out both;
|
|
}
|
|
|
|
@keyframes search-panel-in {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translate(-50%, -48%) scale(0.97);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translate(-50%, -50%) scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes search-backdrop-in {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes search-panel-out {
|
|
0% {
|
|
opacity: 1;
|
|
transform: translate(-50%, -50%) scale(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translate(-50%, -48%) scale(0.97);
|
|
}
|
|
}
|
|
|
|
@keyframes search-backdrop-out {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
|
|
@layer components { }
|
|
/* Layout helpers */
|