1
0
forked from boos/BoosAPI

style: format CSS keyframes for improved readability

This commit is contained in:
ciat-777
2026-03-12 16:28:00 +08:00
parent 701cd98f73
commit 89f7cddb93
+53 -13
View File
@@ -1034,23 +1034,43 @@ body {
/* ===== Mobile Drawer ===== */ /* ===== Mobile Drawer ===== */
@keyframes drawer-backdrop-in { @keyframes drawer-backdrop-in {
from { opacity: 0; } from {
to { opacity: 1; } opacity: 0;
}
to {
opacity: 1;
}
} }
@keyframes drawer-backdrop-out { @keyframes drawer-backdrop-out {
from { opacity: 1; } from {
to { opacity: 0; } opacity: 1;
}
to {
opacity: 0;
}
} }
@keyframes drawer-slide-in { @keyframes drawer-slide-in {
from { transform: translateX(-100%); } from {
to { transform: translateX(0); } transform: translateX(-100%);
}
to {
transform: translateX(0);
}
} }
@keyframes drawer-slide-out { @keyframes drawer-slide-out {
from { transform: translateX(0); } from {
to { transform: translateX(-100%); } transform: translateX(0);
}
to {
transform: translateX(-100%);
}
} }
.mobile-drawer-root { .mobile-drawer-root {
@@ -1592,6 +1612,7 @@ body {
background: color-mix(in srgb, var(--color-primary) 18%, transparent); background: color-mix(in srgb, var(--color-primary) 18%, transparent);
box-shadow: inset 3px 0 0 color-mix(in srgb, var(--color-primary) 70%, transparent); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--color-primary) 70%, transparent);
} }
100% { 100% {
background: color-mix(in srgb, var(--color-primary) 4%, transparent); background: color-mix(in srgb, var(--color-primary) 4%, transparent);
box-shadow: inset 0 0 0 transparent; box-shadow: inset 0 0 0 transparent;
@@ -1608,6 +1629,7 @@ body {
border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border)); border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border));
background: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg-card)); background: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg-card));
} }
100% { 100% {
box-shadow: 0 0 0 0 transparent; box-shadow: 0 0 0 0 transparent;
border-color: var(--color-border-light); border-color: var(--color-border-light);
@@ -3797,6 +3819,7 @@ textarea {
} }
@media (max-width: 768px) { @media (max-width: 768px) {
/* --- Layout --- */ /* --- Layout --- */
:root { :root {
--topbar-height: 48px; --topbar-height: 48px;
@@ -4563,13 +4586,30 @@ textarea {
} }
@keyframes filter-bar-slide-down { @keyframes filter-bar-slide-down {
from { opacity: 0; max-height: 0; transform: translateY(-4px); } from {
to { opacity: 1; max-height: 600px; transform: translateY(0); } opacity: 0;
max-height: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
max-height: 600px;
transform: translateY(0);
}
} }
@keyframes filter-bar-slide-up { @keyframes filter-bar-slide-up {
from { opacity: 1; max-height: 600px; } from {
to { opacity: 0; max-height: 0; overflow: hidden; } opacity: 1;
max-height: 600px;
}
to {
opacity: 0;
max-height: 0;
overflow: hidden;
}
} }
.route-filter-row { .route-filter-row {
@@ -4678,4 +4718,4 @@ textarea {
.route-card-grid { .route-card-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
} }