Files
opencode/packages/ui/src/components/rolling-results.css
2026-03-07 05:25:22 -06:00

93 lines
2.2 KiB
CSS

[data-component="rolling-results"] {
--rolling-results-row-height: 22px;
--rolling-results-fixed-height: var(--rolling-results-row-height);
--rolling-results-fixed-gap: 0px;
--rolling-results-row-gap: 0px;
display: block;
width: 100%;
min-width: 0;
[data-slot="rolling-results-viewport"] {
position: relative;
min-width: 0;
height: 0;
overflow: clip;
}
&[data-overflowing="true"]:not([data-scrollable="true"]) [data-slot="rolling-results-window"] {
mask-image: linear-gradient(
to bottom,
transparent 0%,
black var(--rolling-results-fade),
black calc(100% - calc(var(--rolling-results-fade) * 0.5)),
transparent 100%
);
-webkit-mask-image: linear-gradient(
to bottom,
transparent 0%,
black var(--rolling-results-fade),
black calc(100% - calc(var(--rolling-results-fade) * 0.5)),
transparent 100%
);
}
[data-slot="rolling-results-fixed"] {
min-width: 0;
height: var(--rolling-results-fixed-height);
min-height: var(--rolling-results-fixed-height);
display: flex;
align-items: center;
}
[data-slot="rolling-results-window"] {
min-width: 0;
margin-top: var(--rolling-results-fixed-gap);
height: calc(100% - var(--rolling-results-fixed-height) - var(--rolling-results-fixed-gap));
overflow: clip;
}
&[data-scrollable="true"] [data-slot="rolling-results-window"] {
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
}
&[data-scrollable="true"] [data-slot="rolling-results-track"] {
transform: none !important;
will-change: auto;
}
[data-slot="rolling-results-body"] {
min-width: 0;
}
[data-slot="rolling-results-track"] {
display: flex;
min-width: 0;
flex-direction: column;
gap: var(--rolling-results-row-gap);
will-change: transform;
}
[data-slot="rolling-results-row"],
[data-slot="rolling-results-empty"] {
min-width: 0;
height: var(--rolling-results-row-height);
min-height: var(--rolling-results-row-height);
display: flex;
align-items: center;
}
[data-slot="rolling-results-row"] {
color: var(--text-base);
}
[data-slot="rolling-results-empty"] {
color: var(--text-weaker);
}
}