forked from boos/BoosAPI
style: format CSS keyframes for improved readability
This commit is contained in:
+53
-13
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user