mirror of
https://github.com/bitcoinresearchkit/brk.git
synced 2026-04-24 06:39:58 -07:00
70 lines
1.7 KiB
CSS
70 lines
1.7 KiB
CSS
#explorer {
|
|
width: 100%;
|
|
|
|
--cube: 4.5rem;
|
|
|
|
#chain {
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
gap: calc(var(--cube) * 0.66);
|
|
padding: 2rem;
|
|
|
|
.cube {
|
|
width: var(--cube);
|
|
height: var(--cube);
|
|
overflow: hidden;
|
|
font-size: var(--font-size-sm);
|
|
line-height: var(--line-height-sm);
|
|
--face-color: var(--border-color);
|
|
color: var(--color);
|
|
|
|
.face {
|
|
transform-origin: 0 0;
|
|
position: absolute;
|
|
width: var(--cube);
|
|
height: var(--cube);
|
|
padding: 0.1rem;
|
|
}
|
|
|
|
.right {
|
|
background-color: oklch(from var(--face-color) calc(l - 0.05) c h);
|
|
transform: rotate(-30deg) skewX(-30deg)
|
|
translate(calc(var(--cube) * 1.3), calc(var(--cube) * 1.725))
|
|
scaleY(0.864);
|
|
}
|
|
|
|
.top {
|
|
background-color: oklch(from var(--face-color) calc(l + 0.05) c h);
|
|
transform: rotate(30deg) skew(-30deg)
|
|
translate(calc(var(--cube) * 0.99), calc(var(--cube) * -0.265))
|
|
scaleY(0.864);
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
display: flex;
|
|
font-weight: 900;
|
|
text-transform: uppercase;
|
|
font-size: var(--font-size-xs);
|
|
line-height: var(--line-height-xs);
|
|
}
|
|
|
|
.left {
|
|
font-size: var(--font-size-xs);
|
|
line-height: var(--line-height-xs);
|
|
background-color: var(--face-color);
|
|
transform: rotate(30deg) skewX(30deg)
|
|
translate(calc(var(--cube) * 0.3), calc(var(--cube) * 0.6))
|
|
scaleY(0.864);
|
|
}
|
|
|
|
.fees {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
}
|