clone/opencode
1
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-05-03 11:16:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Transitions, spacing, scroll fade, prompt area update (#11168)

Browse Source 
Co-authored-by: Github Action <action@github.com>
Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com>
Co-authored-by: aaroniker <4730431+aaroniker@users.noreply.github.com>
This commit is contained in:
Aaron Iker
2026-01-30 18:57:49 +01:00
committed by GitHub
parent 1bbe84ed8d
commit 20619a6a26
70 changed files with 5836 additions and 4807 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
packages/ui/src/components/scroll-fade.css Normal file
View File

@@ -0,0 +1,122 @@
[data-component="scroll-fade"] {
overflow: auto;
overscroll-behavior: contain;
scrollbar-width: none;
box-sizing: border-box;
color: inherit;
font: inherit;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
&[data-direction="horizontal"] {
overflow-x: auto;
overflow-y: hidden;
/* Both fades */
&[data-fade-start][data-fade-end] {
mask-image: linear-gradient(
to right,
transparent,
black var(--scroll-fade-start),
black calc(100% - var(--scroll-fade-end)),
transparent
);
-webkit-mask-image: linear-gradient(
to right,
transparent,
black var(--scroll-fade-start),
black calc(100% - var(--scroll-fade-end)),
transparent
);
}
/* Only start fade */
&[data-fade-start]:not([data-fade-end]) {
mask-image: linear-gradient(
to right,
transparent,
black var(--scroll-fade-start),
black 100%
);
-webkit-mask-image: linear-gradient(
to right,
transparent,
black var(--scroll-fade-start),
black 100%
);
}
/* Only end fade */
&:not([data-fade-start])[data-fade-end] {
mask-image: linear-gradient(
to right,
black 0%,
black calc(100% - var(--scroll-fade-end)),
transparent
);
-webkit-mask-image: linear-gradient(
to right,
black 0%,
black calc(100% - var(--scroll-fade-end)),
transparent
);
}
}
&[data-direction="vertical"] {
overflow-y: auto;
overflow-x: hidden;
&[data-fade-start][data-fade-end] {
mask-image: linear-gradient(
to bottom,
transparent,
black var(--scroll-fade-start),
black calc(100% - var(--scroll-fade-end)),
transparent
);
-webkit-mask-image: linear-gradient(
to bottom,
transparent,
black var(--scroll-fade-start),
black calc(100% - var(--scroll-fade-end)),
transparent
);
}
/* Only start fade */
&[data-fade-start]:not([data-fade-end]) {
mask-image: linear-gradient(
to bottom,
transparent,
black var(--scroll-fade-start),
black 100%
);
-webkit-mask-image: linear-gradient(
to bottom,
transparent,
black var(--scroll-fade-start),
black 100%
);
}
/* Only end fade */
&:not([data-fade-start])[data-fade-end] {
mask-image: linear-gradient(
to bottom,
black 0%,
black calc(100% - var(--scroll-fade-end)),
transparent
);
-webkit-mask-image: linear-gradient(
to bottom,
black 0%,
black calc(100% - var(--scroll-fade-end)),
transparent
);
}
}
}