mirror of
https://github.com/bitcoinresearchkit/brk.git
synced 2026-04-25 15:19:58 -07:00
102 lines
2.5 KiB
CSS
102 lines
2.5 KiB
CSS
#explorer {
|
|
width: 100%;
|
|
|
|
--cube: 4.5rem;
|
|
|
|
#chain {
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
gap: calc(var(--cube) * 0.66);
|
|
padding: 2rem;
|
|
|
|
.cube {
|
|
cursor: pointer;
|
|
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);
|
|
transition:
|
|
color,
|
|
background-color,
|
|
border-color,
|
|
outline-color,
|
|
text-decoration-color,
|
|
fill,
|
|
stroke,
|
|
opacity,
|
|
box-shadow,
|
|
transform,
|
|
translate,
|
|
scale,
|
|
rotate,
|
|
filter,
|
|
-webkit-backdrop-filter,
|
|
backdrop-filter,
|
|
display,
|
|
content-visibility,
|
|
overlay,
|
|
pointer-events;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-duration: 50ms;
|
|
user-select: none;
|
|
&:hover {
|
|
--face-color: var(--inv-border-color);
|
|
color: var(--background-color);
|
|
}
|
|
&:active {
|
|
--face-color: var(--orange);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|