🎨 style(table): customize table scrollbar appearance

Enhance table scrollbar visual design with lighter and thinner styling for better user experience.

Changes:
- Add custom scrollbar styling for .semi-table-body
- Set scrollbar dimensions to 6px width/height
- Apply lighter color using rgba(var(--semi-grey-2), 0.3) with 30% opacity
- Add hover effect with 50% opacity for better interaction feedback
- Use 2px border radius for smoother appearance
- Keep scrollbar track transparent for clean look
- Utilize Semi Design color variables for theme consistency

The new scrollbar design provides a more elegant and less intrusive horizontal scrolling experience across all data tables.
This commit is contained in:
Apple\Apple
2025-06-07 02:51:38 +08:00
parent 2100d32bab
commit 83d58848bc
8 changed files with 221 additions and 216 deletions

View File

@@ -339,6 +339,25 @@ code {
}
/* ==================== 滚动条样式统一管理 ==================== */
/* 表格滚动条样式 */
.semi-table-body::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.semi-table-body::-webkit-scrollbar-thumb {
background: rgba(var(--semi-grey-2), 0.3);
border-radius: 2px;
}
.semi-table-body::-webkit-scrollbar-thumb:hover {
background: rgba(var(--semi-grey-2), 0.5);
}
.semi-table-body::-webkit-scrollbar-track {
background: transparent;
}
/* 隐藏模型设置区域的滚动条 */
.model-settings-scroll::-webkit-scrollbar,
.thinking-content-scroll::-webkit-scrollbar,