diff --git a/src/assets/stylus/button.styl b/src/assets/stylus/button.styl index 47ead59..ff9ad50 100644 --- a/src/assets/stylus/button.styl +++ b/src/assets/stylus/button.styl @@ -1,42 +1,39 @@ -#app { - .el-button { - /*--el-button-text-color oklch(72% .19 231.6) !important; - --el-button-bg-color oklch(0.96 0.03 224.26) !important; - --el-button-border-color: oklch(0.96 0.03 224.26) !important; - - --el-button-hover-text-color: oklch(72% .19 231.6) !important; - --el-button-hover-bg-color: oklch(0.96 0.03 224.26) !important; - --el-button-hover-border-color: oklch(0.96 0.03 224.26) !important;*/ - } - - .el-button--default { - --el-button-text-color #5D87FF !important; - --el-button-bg-color #FFFFFF !important; - --el-button-border-color: #5D87FF !important; - - --el-button-hover-text-color #5D87FF !important; - --el-button-hover-bg-color #EEF3FF !important; - --el-button-hover-border-color: #5D87FF !important; - } - - .el-button--primary { - --el-button-text-color #FFFFFF !important; - --el-button-bg-color #5D87FF !important; - --el-button-border-color: #5D87FF !important; - - --el-button-hover-text-color: #FFFFFF !important; - --el-button-hover-bg-color: #8DABFF !important; - --el-button-hover-border-color: #8DABFF !important; - } - - .el-button--danger { - --el-button-text-color #FFFFFF !important; - --el-button-bg-color rgb(255, 130, 132) !important; - --el-button-border-color: rgb(255, 130, 132) !important; - - --el-button-hover-text-color: #FFFFFF !important; - --el-button-hover-bg-color: rgb(255, 130, 132) !important; - --el-button-hover-border-color: rgb(255, 130, 132) !important; - } +.el-button { + /*--el-button-text-color oklch(72% .19 231.6) !important; + --el-button-bg-color oklch(0.96 0.03 224.26) !important; + --el-button-border-color: oklch(0.96 0.03 224.26) !important; + --el-button-hover-text-color: oklch(72% .19 231.6) !important; + --el-button-hover-bg-color: oklch(0.96 0.03 224.26) !important; + --el-button-hover-border-color: oklch(0.96 0.03 224.26) !important;*/ +} + +.el-button--default { + --el-button-text-color #5D87FF !important; + --el-button-bg-color #FFFFFF !important; + --el-button-border-color: #5D87FF !important; + + --el-button-hover-text-color #5D87FF !important; + --el-button-hover-bg-color #EEF3FF !important; + --el-button-hover-border-color: #5D87FF !important; +} + +.el-button--primary { + --el-button-text-color #FFFFFF !important; + --el-button-bg-color #5D87FF !important; + --el-button-border-color: #5D87FF !important; + + --el-button-hover-text-color: #FFFFFF !important; + --el-button-hover-bg-color: #8DABFF !important; + --el-button-hover-border-color: #8DABFF !important; +} + +.el-button--danger { + --el-button-text-color #FFFFFF !important; + --el-button-bg-color rgb(255, 130, 132) !important; + --el-button-border-color: rgb(255, 130, 132) !important; + + --el-button-hover-text-color: #FFFFFF !important; + --el-button-hover-bg-color: rgb(255, 130, 132) !important; + --el-button-hover-border-color: rgb(255, 130, 132) !important; } diff --git a/src/assets/stylus/dropdownmenu.styl b/src/assets/stylus/dropdownmenu.styl new file mode 100644 index 0000000..83b07ee --- /dev/null +++ b/src/assets/stylus/dropdownmenu.styl @@ -0,0 +1,15 @@ +.el-dropdown-menu { + padding 5px !important + box-sizing border-box + + .el-dropdown-menu__item { + border-radius var(--el-border-radius-base) + } + + .el-dropdown-menu__item:not(.is-disabled):focus, + .el-dropdown-menu__item:not(.is-disabled):hover { + --el-dropdown-menuItem-hover-fill: #F2F4F5 !important; + --el-dropdown-menuItem-hover-color: #323251 !important; + } +} + diff --git a/src/assets/stylus/index.styl b/src/assets/stylus/index.styl index 8bff194..d4ed573 100644 --- a/src/assets/stylus/index.styl +++ b/src/assets/stylus/index.styl @@ -1,6 +1,7 @@ @import "root.styl" @import "button.styl" @import "menu.styl" +@import "dropdownmenu.styl" // 优化 Element Plus 组件库默认样式 // -------------------------------- 修改 el-size=default 组件默认高度 start -------------------------------- @@ -10,11 +11,6 @@ } -.el-button:focus-visible { - outline none !important - outline-offset unset !important - transition none !important -} // circle 按钮宽度优化 .el-button--default.is-circle { diff --git a/src/assets/stylus/menu.styl b/src/assets/stylus/menu.styl index 16c2877..23558a1 100644 --- a/src/assets/stylus/menu.styl +++ b/src/assets/stylus/menu.styl @@ -1,40 +1,38 @@ -#app { - .el-menu-item.is-active { - background-color #EEF3FF !important - color #5D87FF !important +.el-menu-item.is-active { + background-color #EEF3FF !important + color #5D87FF !important - &::after { - height: 100%; - } + &::after { + height: 100%; } - - .el-menu-item { - position relative !important - transition: background-color, color .3s ease-in-out !important; - border-radius 4px !important - - &::after { - content: ''; - position: absolute; - top: 0; - right: 0; - width: 4px; - height: 0; - background-color: #1C6EFF; - transition height 0.3s ease-in-out - } - } - - .el-sub-menu__title, - .el-menu-item { - height: 42px !important; - line-height: 42px !important; - margin-left: 8px !important; - margin-right: 8px !important; - - &:hover { - background-color: #F2F4F5 !important; - } - } - } + +.el-menu-item { + position relative !important + transition: background-color, color .3s ease-in-out !important; + border-radius 4px !important + + &::after { + content: ''; + position: absolute; + top: 0; + right: 0; + width: 4px; + height: 0; + background-color: #1C6EFF; + transition height 0.3s ease-in-out + } +} + +.el-sub-menu__title, +.el-menu-item { + height: 42px !important; + line-height: 42px !important; + margin-left: 8px !important; + margin-right: 8px !important; + + &:hover { + background-color: #F2F4F5 !important; + } +} + diff --git a/src/assets/stylus/root.styl b/src/assets/stylus/root.styl index f9a4464..bcc432c 100644 --- a/src/assets/stylus/root.styl +++ b/src/assets/stylus/root.styl @@ -1,4 +1,4 @@ -#app { +body { --custom-radius: 9px; --main-color: #5D87FF; --el-color-primary: #5D87FF !important; @@ -14,8 +14,15 @@ --el-border-radius-base: 4px !important; --el-messagebox-border-radius: 8px !important; + --el-border-color-light #EAEBF1 !important; .region .el-radio-button__original-radio:checked + .el-radio-button__inner { color: var(--theme-color) !important; } } + +:focus-visible { + outline none !important + outline-offset unset !important + transition none !important +} diff --git a/src/pages/a-frame/AAvatar.vue b/src/pages/a-frame/AAvatar.vue index 4c4b971..605b77c 100644 --- a/src/pages/a-frame/AAvatar.vue +++ b/src/pages/a-frame/AAvatar.vue @@ -36,7 +36,7 @@ function logoutHandler() {