diff --git a/dashboard/src/scss/components/_VScrollbar.scss b/dashboard/src/scss/components/_VScrollbar.scss new file mode 100644 index 000000000..900a8448e --- /dev/null +++ b/dashboard/src/scss/components/_VScrollbar.scss @@ -0,0 +1,141 @@ +/* 自定义滚动条样式 - 紫色主题 */ + +/* 全局滚动条样式 */ +::-webkit-scrollbar { + width: 10px; + height: 10px; +} + +::-webkit-scrollbar-track { + background: rgba(0, 0, 0, 0.05); + border-radius: 5px; +} + +::-webkit-scrollbar-thumb { + background: rgba(160, 60, 254, 0.75); + border-radius: 5px; + transition: all 0.3s ease; + border: 1px solid rgba(255, 255, 255, 0.2); +} + +::-webkit-scrollbar-thumb:hover { + background: rgba(147, 51, 234, 0.85); + transform: scale(1.05); + box-shadow: 0 2px 8px rgba(147, 51, 234, 0.3); +} + +::-webkit-scrollbar-thumb:active { + background: rgba(147, 51, 234, 0.95); +} + +::-webkit-scrollbar-corner { + background: transparent; +} + +/* 深色主题滚动条样式 */ +.v-theme--PurpleThemeDark { + ::-webkit-scrollbar-track { + background: rgba(255, 255, 255, 0.05); + } + + ::-webkit-scrollbar-thumb { + background: rgba(192, 132, 252, 0.75); + border: 1px solid rgba(0, 0, 0, 0.2); + } + + ::-webkit-scrollbar-thumb:hover { + background: rgba(192, 132, 252, 0.85); + box-shadow: 0 2px 8px rgba(192, 132, 252, 0.4); + } + + ::-webkit-scrollbar-thumb:active { + background: rgba(192, 132, 252, 0.95); + } +} + +/* 细滚动条变体 */ +.thin-scrollbar { + ::-webkit-scrollbar { + width: 8px; + height: 8px; + } + + ::-webkit-scrollbar-thumb { + background: rgba(147, 51, 234, 0.75); + border: none; + } +} + +.v-theme--PurpleThemeDark .thin-scrollbar { + ::-webkit-scrollbar-thumb { + background: rgba(192, 132, 252, 0.75); + } +} + +/* 聊天区域滚动条 */ +.chat-scrollbar { + ::-webkit-scrollbar { + width: 8px; + } + + ::-webkit-scrollbar-track { + background: rgba(147, 51, 234, 0.08); + border-radius: 4px; + } + + ::-webkit-scrollbar-thumb { + background: rgba(147, 51, 234, 0.75); + border-radius: 4px; + border: 1px solid rgba(255, 255, 255, 0.1); + } + + ::-webkit-scrollbar-thumb:hover { + background: rgba(147, 51, 234, 0.85); + } +} + +.v-theme--PurpleThemeDark .chat-scrollbar { + ::-webkit-scrollbar-track { + background: rgba(192, 132, 252, 0.08); + } + + ::-webkit-scrollbar-thumb { + background: rgba(192, 132, 252, 0.75); + border: 1px solid rgba(0, 0, 0, 0.1); + } + + ::-webkit-scrollbar-thumb:hover { + background: rgba(192, 132, 252, 0.85); + } +} + +/* 隐藏滚动条变体 */ +.hidden-scrollbar { + ::-webkit-scrollbar { + width: 0px; + height: 0px; + } + + scrollbar-width: none; + -ms-overflow-style: none; +} + +/* Firefox 兼容性 */ +* { + scrollbar-width: thin; + scrollbar-color: rgba(147, 51, 234, 0.75) rgba(0, 0, 0, 0.05); +} + +.v-theme--PurpleThemeDark * { + scrollbar-color: rgba(192, 132, 252, 0.75) rgba(255, 255, 255, 0.05); +} + +/* 平滑滚动 */ +html { + scroll-behavior: smooth; +} + +/* 移动端触摸滚动优化 */ +* { + -webkit-overflow-scrolling: touch; +} \ No newline at end of file diff --git a/dashboard/src/scss/style.scss b/dashboard/src/scss/style.scss index 60a8b11ff..8371f2b68 100644 --- a/dashboard/src/scss/style.scss +++ b/dashboard/src/scss/style.scss @@ -12,5 +12,6 @@ @import './components/VShadow'; @import './components/VTextField'; @import './components/VTabs'; +@import './components/VScrollbar'; @import './pages/dashboards';