monadical/opencode
14
0
Fork 0
Code Issues Pull Requests Actions 5 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

98
packages/ui/src/components/resize-handle.css
View File

@@ -1,58 +1,60 @@
[data-component="resize-handle"] {
position: absolute;
z-index: 10;
position: absolute;
z-index: 10;
&::after {
content: "";
position: absolute;
opacity: 0;
transition: opacity 0.15s ease-in-out;
}
&::after {
content: "";
position: absolute;
opacity: 0;
transition-property: opacity;
transition-duration: var(--transition-duration);
transition-timing-function: var(--transition-easing);
}
&:hover::after,
&:active::after {
opacity: 1;
}
&:hover::after,
&:active::after {
opacity: 1;
}
&[data-direction="horizontal"] {
inset-block: 0;
inset-inline-end: 0;
width: 8px;
transform: translateX(50%);
cursor: col-resize;
&[data-direction="horizontal"] {
inset-block: 0;
inset-inline-end: 0;
width: 8px;
transform: translateX(50%);
cursor: col-resize;
&[data-edge="start"] {
inset-inline-start: 0;
inset-inline-end: auto;
transform: translateX(-50%);
}
&[data-edge="start"] {
inset-inline-start: 0;
inset-inline-end: auto;
transform: translateX(-50%);
}
&::after {
width: 3px;
inset-block: 0;
inset-inline-start: 50%;
transform: translateX(-50%);
}
}
&::after {
width: 3px;
inset-block: 0;
inset-inline-start: 50%;
transform: translateX(-50%);
}
}
&[data-direction="vertical"] {
inset-inline: 0;
inset-block-start: 0;
height: 8px;
transform: translateY(-50%);
cursor: row-resize;
&[data-direction="vertical"] {
inset-inline: 0;
inset-block-start: 0;
height: 8px;
transform: translateY(-50%);
cursor: row-resize;
&[data-edge="end"] {
inset-block-start: auto;
inset-block-end: 0;
transform: translateY(50%);
}
&[data-edge="end"] {
inset-block-start: auto;
inset-block-end: 0;
transform: translateY(50%);
}
&::after {
height: 3px;
inset-inline: 0;
inset-block-start: 50%;
transform: translateY(-50%);
}
}
&::after {
height: 3px;
inset-inline: 0;
inset-block-start: 50%;
transform: translateY(-50%);
}
}
}