style: add global brand-themed scrollbar styling#1162
style: add global brand-themed scrollbar styling#1162alexchenai wants to merge 2 commits intoVoltAgent:mainfrom
Conversation
Add custom scrollbar styles using VoltAgent's emerald green (#10b981) brand color across the entire documentation website. This replaces the default browser scrollbars with a modern, thin design that supports both light and dark themes. - Add global scrollbar styling for Webkit and Firefox browsers - Update existing TOC scrollbar from generic gray to brand emerald green - Support light mode (subtle gray track) and dark mode (transparent track) - Use 8px width for modern unobtrusive appearance with 4px border-radius - Include smooth hover transitions for better interactivity Closes VoltAgent#1157 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
📝 WalkthroughWalkthroughGlobal custom scrollbar styles were added to Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment Tip CodeRabbit can enforce grammar and style rules using `languagetool`.Configure the |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
website/src/css/custom.css (1)
5438-5445: Dark-mode TOC thumb rules are redundant with default TOC thumb rules.These declarations repeat the same values and can be removed to reduce CSS duplication.
♻️ Optional cleanup
-/* Dark mode TOC scrollbar */ -[data-theme="dark"] .tableOfContents::-webkit-scrollbar-thumb { - background-color: rgba(16, 185, 129, 0.3); -} - -[data-theme="dark"] .tableOfContents::-webkit-scrollbar-thumb:hover { - background-color: rgba(16, 185, 129, 0.5); -}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/css/custom.css` around lines 5438 - 5445, The dark-mode TOC scrollbar thumb rules are redundant with the default TOC thumb rules; remove the duplicate selectors and declarations that target [data-theme="dark"] .tableOfContents::-webkit-scrollbar-thumb and its :hover variant so only the shared/default .tableOfContents::-webkit-scrollbar-thumb and .tableOfContents::-webkit-scrollbar-thumb:hover rules remain, keeping visual behavior unchanged and eliminating CSS duplication.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@website/src/css/custom.css`:
- Around line 5429-5435: The TOC scrollbar thumb selectors
".tableOfContents::-webkit-scrollbar-thumb" and
".tableOfContents::-webkit-scrollbar-thumb:hover" use border-radius: 10px but
the design spec requires 4px; update both selectors to use border-radius: 4px so
the thumb and its hover state match the 4px radius requirement.
- Around line 5395-5418: The theme-based scrollbar rules miss the root element
because descendant selectors are used; update selectors so they target the
element with the data-theme attribute itself (not only its descendants): replace
`[data-theme="light"] *` with `[data-theme="light"]` and `[data-theme="dark"] *`
with `[data-theme="dark"]`, and remove the space before pseudo-elements so `
[data-theme="light"] ::-webkit-scrollbar-track` and similar become
`[data-theme="light"]::-webkit-scrollbar-track` (and likewise for dark) so the
page/viewport scrollbar receives the intended styles.
---
Nitpick comments:
In `@website/src/css/custom.css`:
- Around line 5438-5445: The dark-mode TOC scrollbar thumb rules are redundant
with the default TOC thumb rules; remove the duplicate selectors and
declarations that target [data-theme="dark"]
.tableOfContents::-webkit-scrollbar-thumb and its :hover variant so only the
shared/default .tableOfContents::-webkit-scrollbar-thumb and
.tableOfContents::-webkit-scrollbar-thumb:hover rules remain, keeping visual
behavior unchanged and eliminating CSS duplication.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: a7998704-4238-4a8f-bf09-1ed09a246943
📒 Files selected for processing (1)
website/src/css/custom.css
| .tableOfContents::-webkit-scrollbar-thumb { | ||
| background-color: rgba(107, 114, 128, 0.3); | ||
| background-color: rgba(16, 185, 129, 0.3); | ||
| border-radius: 10px; | ||
| } | ||
|
|
||
| .tableOfContents::-webkit-scrollbar-thumb:hover { | ||
| background-color: rgba(107, 114, 128, 0.5); | ||
| background-color: rgba(16, 185, 129, 0.5); |
There was a problem hiding this comment.
TOC thumb radius does not match the 4px design spec.
Line 5431 still uses border-radius: 10px; spec/objective calls for 4px.
🎯 Proposed fix
.tableOfContents::-webkit-scrollbar-thumb {
background-color: rgba(16, 185, 129, 0.3);
- border-radius: 10px;
+ border-radius: 4px;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .tableOfContents::-webkit-scrollbar-thumb { | |
| background-color: rgba(107, 114, 128, 0.3); | |
| background-color: rgba(16, 185, 129, 0.3); | |
| border-radius: 10px; | |
| } | |
| .tableOfContents::-webkit-scrollbar-thumb:hover { | |
| background-color: rgba(107, 114, 128, 0.5); | |
| background-color: rgba(16, 185, 129, 0.5); | |
| .tableOfContents::-webkit-scrollbar-thumb { | |
| background-color: rgba(16, 185, 129, 0.3); | |
| border-radius: 4px; | |
| } | |
| .tableOfContents::-webkit-scrollbar-thumb:hover { | |
| background-color: rgba(16, 185, 129, 0.5); |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@website/src/css/custom.css` around lines 5429 - 5435, The TOC scrollbar thumb
selectors ".tableOfContents::-webkit-scrollbar-thumb" and
".tableOfContents::-webkit-scrollbar-thumb:hover" use border-radius: 10px but
the design spec requires 4px; update both selectors to use border-radius: 4px so
the thumb and its hover state match the 4px radius requirement.
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
No issues found across 1 file
Since this is your first cubic review, here's how it works:
- cubic automatically reviews your code and comments on bugs and improvements
- Teach cubic by replying to its comments. cubic learns from your replies and gets better over time
- Add one-off context when rerunning by tagging
@cubic-dev-aiwith guidance or docs links (includingllms.txt) - Ask questions if you need clarification on any suggestion
- Fix theme selectors to target root element scrollbar (not just descendants) by adding selectors without space before pseudo-elements - Fix TOC thumb border-radius from 10px to 4px to match design spec
1 participant
Summary
Fixes #1157 — Adds custom scrollbar styling across the entire VoltAgent documentation website using the brand emerald green color (
#10b981).Changes
::-webkit-scrollbar) and Firefox (scrollbar-width,scrollbar-color) global scrollbar rules using emerald green (rgba(16, 185, 129, 0.3)) with smooth hover transitionsrgba(243, 244, 246, 0.5)), dark mode uses a transparent track — both with emerald green thumbs.tableOfContentsscrollbar from generic gray (rgba(107, 114, 128, ...)) to brand-consistent emerald greenDesign Specs (from issue)
rgba(16, 185, 129, 0.3)rgba(16, 185, 129, 0.5)rgba(243, 244, 246, 0.5)Test plan
🤖 Generated with Claude Code
Summary by cubic
Adds global brand-themed scrollbars across the docs, using emerald green thumbs with light/dark track support for a cleaner, consistent look. Closes #1157.
New Features
::-webkit-scrollbar,scrollbar-width/color) with emerald green thumbs and hover.Bug Fixes
Written for commit dbd9dcd. Summary will update on new commits.
Summary by CodeRabbit