mirror of
https://github.com/bitcoinresearchkit/brk.git
synced 2026-07-07 17:18:13 -07:00
94 lines
2.0 KiB
CSS
94 lines
2.0 KiB
CSS
#block-details section[data-group="block"] {
|
|
--section-color: var(--cyan);
|
|
|
|
[data-block-box] {
|
|
display: grid;
|
|
gap: 0.5rem;
|
|
min-width: 0;
|
|
border: 1px solid color-mix(in oklch, var(--section-color) 35%, transparent);
|
|
border-radius: 0.25rem;
|
|
padding: 0.75rem;
|
|
|
|
&[data-block-box="tx"] {
|
|
border-color: color-mix(in oklch, var(--orange) 35%, transparent);
|
|
}
|
|
|
|
&[data-block-box="input"] {
|
|
border-color: color-mix(in oklch, var(--yellow) 55%, transparent);
|
|
}
|
|
|
|
&[data-block-box="output"] {
|
|
border-color: color-mix(in oklch, var(--red) 55%, transparent);
|
|
}
|
|
}
|
|
|
|
[data-block-row] {
|
|
display: grid;
|
|
grid-template-columns: minmax(4.5rem, auto) minmax(0, 1fr);
|
|
gap: 0.75rem;
|
|
align-items: center;
|
|
min-width: 0;
|
|
|
|
> span {
|
|
color: var(--section-color);
|
|
font-size: var(--font-size-xs);
|
|
line-height: var(--line-height-xs);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
strong {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
min-width: 0;
|
|
color: var(--section-color);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: var(--font-weight-strong);
|
|
line-height: var(--line-height-sm);
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
[data-block-io] {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
gap: 0.75rem;
|
|
min-width: 0;
|
|
|
|
[data-block-box] {
|
|
align-content: center;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
[data-block-row] {
|
|
grid-template-columns: auto auto;
|
|
justify-content: space-between;
|
|
gap: 0.5rem;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
[data-block-box="tx"] > [data-block-row] {
|
|
> span,
|
|
strong {
|
|
color: var(--orange);
|
|
}
|
|
}
|
|
|
|
:is([data-block-box="input"], [data-block-box="output"]) > [data-block-row] {
|
|
> span,
|
|
strong {
|
|
color: var(--block-box-color);
|
|
}
|
|
}
|
|
|
|
[data-block-box="input"] {
|
|
--block-box-color: var(--yellow);
|
|
}
|
|
|
|
[data-block-box="output"] {
|
|
--block-box-color: var(--red);
|
|
}
|
|
}
|