mempool/frontend/src/app/components/clock/clock.component.scss

119 lines
2.4 KiB
SCSS
Raw Normal View History

2023-04-15 05:26:18 +09:00
.clock-wrapper {
--clock-width: min(100vw, 100vh);
position: relative;
width: 100vw;
max-width: var(--clock-width);
height: 100vh;
max-height: var(--clock-width);
margin: auto;
}
.title-wrapper {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
.block-height {
font-size: calc(0.2 * var(--clock-width));
padding: 0;
margin: 0;
background: radial-gradient(rgba(0,0,0,0.5), transparent 67%);
padding: calc(0.05 * var(--clock-width)) calc(0.15 * var(--clock-width));
}
}
.block-wrapper {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
.block-sizer {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.fader {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: radial-gradient(transparent 0%, transparent 55%, #11131f 65%, #11131f 100%);
}
.block-cube {
--side-width: calc(0.4 * var(--clock-width));
--half-side: calc(0.2 * var(--clock-width));
--neg-half-side: calc(-0.2 * var(--clock-width));
transform-style: preserve-3d;
animation: block-spin 60s infinite linear;
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: var(--side-width);
height: var(--side-width);
.side {
width: var(--side-width);
height: var(--side-width);
line-height: 100px;
text-align: center;
background: #232838;
display: block;
position: absolute;
}
.side.top {
transform: rotateX(90deg);
margin-top: var(--neg-half-side);
}
.side.bottom {
background: #105fb0;
transform: rotateX(-90deg);
margin-top: var(--half-side);
}
.side.right {
transform: rotateY(90deg);
margin-left: var(--half-side);
}
.side.left {
transform: rotateY(-90deg);
margin-left: var(--neg-half-side);
}
.side.front {
transform: translateZ(var(--half-side));
}
.side.back {
transform: translateZ(var(--neg-half-side));
}
}
}
@keyframes block-spin {
0% {transform: translate(-50%, -50%) rotateX(-20deg) rotateY(0deg);}
100% {transform: translate(-50%, -50%) rotateX(-20deg) rotateY(-360deg);}
}