🎨 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:
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user