58 lines
1.3 KiB
CSS
58 lines
1.3 KiB
CSS
.block {
|
|
--header-logo-filter: grayscale(100%);
|
|
--header-logo-opacity: 0;
|
|
--header-logo-top-transform: translate3d(0, 50%, 0);
|
|
--header-logo-bottom-transform: translate3d(0, -50%, 0) rotate(180deg);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.top {
|
|
width: 120px;
|
|
height: 60px;
|
|
filter: var(--header-logo-filter);
|
|
opacity: var(--header-logo-opacity);
|
|
transform: var(--header-logo-top-transform);
|
|
transition: opacity 0.5s ease-in, filter 0.5s ease-in 0.5s,
|
|
transform 0.5s ease-in 0.5s;
|
|
}
|
|
|
|
.top path:first-of-type {
|
|
fill: var(--color-primary);
|
|
}
|
|
|
|
.top path:last-of-type {
|
|
fill: var(--color-secondary);
|
|
}
|
|
|
|
.middle {
|
|
opacity: var(--header-logo-opacity);
|
|
transition: opacity 0.5s ease-in 0.75s;
|
|
}
|
|
|
|
.bottom {
|
|
width: 120px;
|
|
height: 60px;
|
|
filter: var(--header-logo-filter);
|
|
opacity: var(--header-logo-opacity);
|
|
transform: var(--header-logo-bottom-transform);
|
|
transition: opacity 0.5s ease-in, filter 0.5s ease-in 0.5s,
|
|
transform 0.5s ease-in 0.5s;
|
|
}
|
|
|
|
.bottom path:first-of-type {
|
|
fill: var(--color-dark);
|
|
}
|
|
|
|
.bottom path:last-of-type {
|
|
fill: var(--color-secondary);
|
|
}
|
|
|
|
.isvisible {
|
|
--header-logo-filter: none;
|
|
--header-logo-opacity: 1;
|
|
--header-logo-top-transform: translate3d(0, 0, 0);
|
|
--header-logo-bottom-transform: translate3d(0, 0, 0) rotate(180deg);
|
|
}
|