119 lines
1.6 KiB
CSS
119 lines
1.6 KiB
CSS
@property --percent {
|
|
syntax: "<percentage>";
|
|
initial-value: 0%;
|
|
inherits: false;
|
|
}
|
|
|
|
@property --percent-nav-root_transparent {
|
|
syntax: "<percentage>";
|
|
initial-value: 35%;
|
|
inherits: false;
|
|
}
|
|
|
|
@property --percent-nav-root_filled {
|
|
syntax: "<percentage>";
|
|
initial-value: 65%;
|
|
inherits: false;
|
|
}
|
|
|
|
@keyframes pulseGreen {
|
|
0% {
|
|
background-color: hsl(var(--blue) 85% 35% / 0.1);
|
|
color: hsl(var(--blue) 100% 69% / 1);
|
|
}
|
|
|
|
50% {
|
|
background-color: hsl(var(--green) 85% 35% / 0.5);
|
|
color: hsl(var(--green) 100% 69% / 1);
|
|
}
|
|
|
|
100% {
|
|
background-color: hsl(var(--blue) 85% 35% / 0.1);
|
|
color: hsl(var(--blue) 100% 69% / 1);
|
|
}
|
|
}
|
|
|
|
@keyframes slideDown {
|
|
from {
|
|
opacity: 0.001;
|
|
height: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
height: var(--height);
|
|
}
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from {
|
|
opacity: 1;
|
|
height: var(--height);
|
|
}
|
|
|
|
to {
|
|
opacity: 0;
|
|
height: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes percentToFifty {
|
|
from {
|
|
--percent: 0%;
|
|
}
|
|
|
|
to {
|
|
--percent: 50%;
|
|
}
|
|
}
|
|
|
|
@keyframes percentToZero {
|
|
from {
|
|
--percent: 50%;
|
|
}
|
|
|
|
to {
|
|
--percent: 0%;
|
|
}
|
|
}
|
|
|
|
@keyframes percent35To25 {
|
|
from {
|
|
--percent-nav-root_transparent: 35%;
|
|
}
|
|
|
|
to {
|
|
--percent-nav-root_transparent: 25%;
|
|
}
|
|
}
|
|
|
|
@keyframes percent25To35 {
|
|
from {
|
|
--percent-nav-root_transparent: 25%;
|
|
}
|
|
|
|
to {
|
|
--percent-nav-root_transparent: 35%;
|
|
}
|
|
}
|
|
|
|
@keyframes percent65To75 {
|
|
from {
|
|
--percent-nav-root_filled: 65%;
|
|
}
|
|
|
|
to {
|
|
--percent-nav-root_filled: 75%;
|
|
}
|
|
}
|
|
|
|
@keyframes percent75To65 {
|
|
from {
|
|
--percent-nav-root_filled: 75%;
|
|
}
|
|
|
|
to {
|
|
--percent-nav-root_filled: 65%;
|
|
}
|
|
}
|