diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss index d48ffa319..934349bd1 100644 --- a/nezha-fronted/src/assets/css/common.scss +++ b/nezha-fronted/src/assets/css/common.scss @@ -719,16 +719,6 @@ i.nz-icon-override{ } } -.left-menu{ - .el-menu::-webkit-scrollbar-thumb { - background-color: $--scrollbar-left-menu-background-color; - border-radius: 3px; - } - .el-menu::-webkit-scrollbar-thumb:hover { - background-color: $--scrollbar-left-menu-background-color-hover; - border-radius: 3px; - } -} .el-dialog__header{ color: $--color-text-primary; } diff --git a/nezha-fronted/src/assets/css/components/cli/fileDirectory.scss b/nezha-fronted/src/assets/css/components/cli/fileDirectory.scss index 46c27f3ec..f84a7f254 100644 --- a/nezha-fronted/src/assets/css/components/cli/fileDirectory.scss +++ b/nezha-fronted/src/assets/css/components/cli/fileDirectory.scss @@ -81,15 +81,6 @@ width: calc(100% - 15px); overflow: auto; } - //.file-state-panel-content::-webkit-scrollbar { - // width: 6px; - //} - //.file-directory-content::-webkit-scrollbar-thumb { - // width: 6px; - //} - //.file-directory-content::-webkit-scrollbar-thumb:hover { - // width: 6px; - //} .directory-content-header{ height: 32px; line-height: 32px; diff --git a/nezha-fronted/src/assets/css/components/cli/fileListState.scss b/nezha-fronted/src/assets/css/components/cli/fileListState.scss index 56fd24555..76b4cc415 100644 --- a/nezha-fronted/src/assets/css/components/cli/fileListState.scss +++ b/nezha-fronted/src/assets/css/components/cli/fileListState.scss @@ -9,19 +9,6 @@ background: $--background-color-empty; box-shadow: -2px 1px 4px 0 rgba(0,0,0,0.06), 1px 1px 4px -1px rgba(0,0,0,0.16); border-radius: 2px; - .file-state-panel-content::-webkit-scrollbar { - width: 8px; - } - .file-state-panel-content::-webkit-scrollbar-thumb { - background: rgba(0,0,0,0.16); - border-radius: 4px; - border:none - } - .file-state-panel-content::-webkit-scrollbar-thumb:hover { - background: rgba(0,0,0,0.16); - border-radius: 4px; - border:none - } .file-state-panel-header{ height: 48px; background: $--background-color-empty; @@ -42,6 +29,7 @@ color: $--color-text-primary; } .file-state-panel-content { + box-sizing: border-box; min-height: 50px; max-height: 180px; line-height: 48px; diff --git a/nezha-fronted/src/assets/css/components/common/filterSearch/filterSearch.scss b/nezha-fronted/src/assets/css/components/common/filterSearch/filterSearch.scss index 30e738e09..7efae9989 100644 --- a/nezha-fronted/src/assets/css/components/common/filterSearch/filterSearch.scss +++ b/nezha-fronted/src/assets/css/components/common/filterSearch/filterSearch.scss @@ -16,10 +16,6 @@ line-height: 20px !important; width: 166px !important; } - &::-webkit-scrollbar { - width: 8px; - height: 8px; - } .tag-search__meta, .tag-search__add { margin-right: 10px; diff --git a/nezha-fronted/src/assets/css/components/common/searchBox.scss b/nezha-fronted/src/assets/css/components/common/searchBox.scss index 2006f4142..e6d95c365 100644 --- a/nezha-fronted/src/assets/css/components/common/searchBox.scss +++ b/nezha-fronted/src/assets/css/components/common/searchBox.scss @@ -103,7 +103,6 @@ &::-webkit-scrollbar-thumb { width: 6px; height: 6px; - background-color: $--scrollbar-background-color; border-radius: 3px; cursor: pointer; } diff --git a/nezha-fronted/src/assets/css/components/layout/leftMenu.scss b/nezha-fronted/src/assets/css/components/layout/leftMenu.scss index 87d33b908..a3240fa6d 100644 --- a/nezha-fronted/src/assets/css/components/layout/leftMenu.scss +++ b/nezha-fronted/src/assets/css/components/layout/leftMenu.scss @@ -63,22 +63,24 @@ } } - /*---滚动条默认显示样式--*/ - >.el-menu::-webkit-scrollbar-thumb { - background-color: lighten($--background-color-base, .1); - border-radius: 2px; - border: none; - } - /*---鼠标点击滚动条显示样式--*/ - >.el-menu::-webkit-scrollbar-thumb:hover { - background-color: $--background-color-base; - border-radius: 2px; - } /*---滚动条大小--*/ >.el-menu::-webkit-scrollbar { width: 6px; - height: 14px; + height: 8px; } + /*---滚动条默认显示样式--*/ + >.el-menu::-webkit-scrollbar-thumb { + background-color: $--scrollbar-left-menu-background-color; + border: 2px solid transparent; + border-radius: 4px; + } + /*---鼠标划过滚动条显示样式--*/ + >.el-menu::-webkit-scrollbar-thumb:hover { + background-color: $--scrollbar-left-menu-background-color-hover; + border: 2px solid $--scrollbar-left-menu-background-color-hover; + border-radius: 4px; + } + >.el-menu.header-logo { border-right: none; >.el-menu-item { diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss index 620b97a1a..47b0585c7 100644 --- a/nezha-fronted/src/assets/stylus/main.scss +++ b/nezha-fronted/src/assets/stylus/main.scss @@ -1,26 +1,29 @@ +/*---滚动条大小--*/ +::-webkit-scrollbar { + width: 8px; + height: 8px; +} /*---滚动条默认显示样式--*/ ::-webkit-scrollbar-thumb { background-color: $--scrollbar-background-color; - border-radius: 6px; - border: 2px solid $--background-color-empty; + border: 2px solid transparent; + border-radius: 4px; + background-clip: content-box; } -/*---鼠标点击滚动条显示样式--*/ +/*---鼠标划过滚动条显示样式--*/ ::-webkit-scrollbar-thumb:hover { background-color: $--scrollbar-background-color-hover; - border-radius: 6px; -} -/*---滚动条大小--*/ -::-webkit-scrollbar { - width: 14px; - height: 14px; + border: 2px solid $--scrollbar-background-color-hover; + border-radius: 4px; + background-clip: content-box; } /*---滚动框背景样式--*/ -::-webkit-scrollbar-track-piece { +::-webkit-scrollbar-track { background-color: transparent; } li { - list-style-type: none ; + list-style-type: none; } /* begin--通用*/