mirror of
https://github.com/aljazceru/opencode.git
synced 2026-01-02 23:45:03 +01:00
feat(web): add scroll to last message button
Add intelligent floating scroll button for long conversations that: - Only appears when scrolling down (direction-aware) - Auto-hides after 3 seconds of inactivity - Stays visible on hover to prevent accidental disappearance - Uses consistent design patterns with repo styling - Includes proper accessibility features 🤖 Generated with [opencode](https://opencode.ai) Co-Authored-By: Jeremy Osih <osih.jeremy@gmail.com> Co-Authored-By: opencode <noreply@opencode.ai>
This commit is contained in:
@@ -760,3 +760,38 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scrollButton {
|
||||
position: fixed;
|
||||
bottom: 2rem;
|
||||
right: 2rem;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-radius: 0.25rem;
|
||||
border: 1px solid var(--sl-color-divider);
|
||||
background-color: var(--sl-color-bg-surface);
|
||||
color: var(--sl-color-text-secondary);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.15s ease, opacity 0.5s ease;
|
||||
z-index: 100;
|
||||
appearance: none;
|
||||
opacity: 1;
|
||||
|
||||
&:hover {
|
||||
color: var(--sl-color-text);
|
||||
border-color: var(--sl-color-hairline);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user