STUPID SEXY TIMELINE (#16420)

1 files changed, 92 insertions, 0 deletions

diff --git a/packages/ui/src/components/rolling-results.css b/packages/ui/src/components/rolling-results.css
new file mode 100644
index 000000000..200b2a97e
--- /dev/null
+++ b/packages/ui/src/components/rolling-results.css
@@ -0,0 +1,92 @@
+[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);
+  }
+}