monadical/opencode
13
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

Revert "feat(ui): Smooth fading out on scroll, style fixes (#11683)"

Browse Source 
This reverts commit e445dc0746.
This commit is contained in:
Adam
2026-02-02 11:37:50 -06:00
parent dfd5f38408
commit 2f76b49df3
10 changed files with 43 additions and 482 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
packages/ui/src/components/list.css
View File

@@ -1,7 +1,25 @@
@property --bottom-fade {
syntax: "<length>";
inherits: false;
initial-value: 0px;
}
@keyframes scroll {
0% {
--bottom-fade: 20px;
}
90% {
--bottom-fade: 20px;
}
100% {
--bottom-fade: 0;
}
}
[data-component="list"] {
display: flex;
flex-direction: column;
gap: 8px;
gap: 12px;
overflow: hidden;
padding: 0 12px;
@@ -19,9 +37,7 @@
flex-shrink: 0;
background-color: transparent;
opacity: 0.5;
transition-property: opacity;
transition-duration: var(--transition-duration);
transition-timing-function: var(--transition-easing);
transition: opacity 0.15s ease;
&:hover:not(:disabled),
&:focus-visible:not(:disabled),
@@ -72,9 +88,7 @@
height: 20px;
background-color: transparent;
opacity: 0.5;
transition-property: opacity;
transition-duration: var(--transition-duration);
transition-timing-function: var(--transition-easing);
transition: opacity 0.15s ease;
&:hover:not(:disabled),
&:focus-visible:not(:disabled),
@@ -117,6 +131,15 @@
gap: 12px;
overflow-y: auto;
overscroll-behavior: contain;
mask: linear-gradient(to bottom, #ffff calc(100% - var(--bottom-fade)), #0000);
animation: scroll;
animation-timeline: --scroll;
scroll-timeline: --scroll y;
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
[data-slot="list-empty-state"] {
display: flex;
@@ -192,9 +215,7 @@
background: linear-gradient(to bottom, var(--surface-raised-stronger-non-alpha), transparent);
pointer-events: none;
opacity: 0;
transition-property: opacity;
transition-duration: var(--transition-duration);
transition-timing-function: var(--transition-easing);
transition: opacity 0.15s ease;
}
&[data-stuck="true"]::after {
@@ -230,22 +251,17 @@
align-items: center;
justify-content: center;
flex-shrink: 0;
aspect-ratio: 1 / 1;
aspect-ratio: 1/1;
[data-component="icon"] {
color: var(--icon-strong-base);
}
}
[name="check"] {
color: var(--icon-strong-base);
}
[data-slot="list-item-active-icon"] {
display: none;
align-items: center;
justify-content: center;
flex-shrink: 0;
aspect-ratio: 1 / 1;
aspect-ratio: 1/1;
[data-component="icon"] {
color: var(--icon-strong-base);
}