Files
brk/website_next/explore/block/preview/style.css
T
2026-07-08 11:24:52 +02:00

81 lines
1.6 KiB
CSS

[data-block-preview] {
display: grid;
min-width: 0;
[data-block-preview-figure] {
position: relative;
display: grid;
gap: 0.75rem;
min-width: 0;
}
[data-block-preview-legend] {
display: grid;
gap: 0.5rem;
min-width: 0;
}
[data-block-preview-transaction] {
position: absolute;
top: var(--tx-y, 50%);
left: var(--tx-x, 50%);
z-index: 2;
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
column-gap: 0.5rem;
width: min(24rem, calc(100% - 1rem));
padding: 0.375rem 0.5rem;
border-radius: var(--control-radius);
color: var(--gray);
background: color-mix(in oklch, var(--black) 88%, transparent);
backdrop-filter: blur(0.25rem);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-xs);
pointer-events: none;
transform: translate(-50%, calc(-100% - 0.5rem));
&[data-below] {
transform: translate(-50%, 0.5rem);
}
> div {
display: contents;
}
dt,
dd {
min-width: 0;
}
dt {
color: var(--gray);
text-transform: uppercase;
}
dd {
overflow: hidden;
margin: 0;
color: var(--white);
text-overflow: ellipsis;
white-space: nowrap;
&[aria-busy="true"] {
color: var(--gray);
font-style: italic;
}
}
}
[data-block-preview-status] {
display: grid;
aspect-ratio: 1;
margin: 0;
place-items: center;
color: var(--gray);
font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
text-transform: uppercase;
}
}