追加:在 [暗色模式] 下,为 [左侧导航主菜单选项卡] 在指针悬浮时[hover] & 选中时[active],添加边框和线条的阴影

-清理多余代码
jerrykuku · May 16, 2023 · 27945e0 · 27945e0
1 parent 4df0c6d
commit 27945e0
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 23 deletions.
diff --git a/htdocs/luci-static/argon/css/cascade.css b/htdocs/luci-static/argon/css/cascade.css
@@ -683,6 +683,7 @@ footer a {
   color: #fff;
   background: #5e72e4;
   background: var(--primary);
+  box-shadow: 0 0 1px #ccc;
 }
 .main .main-left .nav li.slide .menu:hover a,
 .main .main-left .nav li.slide .menu.active a {
@@ -774,6 +775,7 @@ footer a {
   background-color: #5e72e4;
   background-color: var(--primary);
   transition: all 0.2s;
+  box-shadow: 0 0 1px #ccc;
 }
 .main .main-left .nav li.slide .slide-menu li a:hover::after {
   color: #000;

diff --git a/htdocs/luci-static/argon/css/dark.css b/htdocs/luci-static/argon/css/dark.css
@@ -68,27 +68,25 @@ header::after {
   color: #fff !important;
 }
 
-.main .main-left .nav .slide .slide-menu a::after,
-.main .main-left .nav .slide .slide-menu .active a::after {
-  background-color: var(--dark-primary) !important;
-}
-
 .main .main-left .nav .slide .slide-menu li a {
   color: #cccccc;
 }
 
+.main .main-left .nav .slide .slide-menu li a::after {
+  background-color: var(--dark-primary) !important;
+  box-shadow: 0 0 1px #000  !important;
+}
+
 .main .main-left .nav .slide .slide-menu li a:hover {
   background: none !important;
 }
 
+.main .main-left .nav .slide .menu:hover,
 .main .main-left .nav .slide .menu.active {
   background-color: #483d8b !important;
   background-color: var(--dark-primary) !important;
   color: #fff !important;
-}
-
-.main .main-left .nav .slide .menu.active a::after {
-  background-color: #cccccc !important;
+  box-shadow: 0 0 1px #000 !important;
 }
 
 .main .main-left .nav li a {

diff --git a/htdocs/luci-static/argon/less/cascade.less b/htdocs/luci-static/argon/less/cascade.less
@@ -799,6 +799,7 @@ footer {
                             color: #fff;
                             background: #5e72e4;
                             background: var(--primary);
+                            box-shadow: 0 0 1px #ccc;
 
                             a {
                                 color: #000;
@@ -913,6 +914,7 @@ footer {
                                     background-color: #5e72e4;
                                     background-color: var(--primary);
                                     transition: all 0.2s;
+                                    box-shadow: 0 0 1px #ccc;
                                 }
 
                                 &:hover::after {

diff --git a/htdocs/luci-static/argon/less/dark.less b/htdocs/luci-static/argon/less/dark.less
@@ -111,10 +111,6 @@ header::after {
             .slide {
                 .slide-menu {
 
-                    a::after {
-                        background-color: var(--dark-primary) !important;
-                    }
-
                     .active {
                         a {
                             color: #fff !important;
@@ -128,21 +124,27 @@ header::after {
                     li {
                         a {
                             color: #cccccc;
-                        }
 
-                        a:hover {
-                            background: none !important;
+                            &:hover {
+                                background: none !important;
+                            }
+
+                            &::after {
+                                background-color: var(--dark-primary) !important;
+                                box-shadow: 0 0 1px #000  !important;
+                            }
+
                         }
                     }
                 }
 
-                .menu.active {
-                    background-color: #483d8b !important;
-                    background-color: var(--dark-primary) !important;
-                    color: #fff !important;
-
-                    a::after {
-                        background-color: #cccccc !important;
+                .menu {
+                    &:hover,
+                    &.active {
+                        background-color: #483d8b !important;
+                        background-color: var(--dark-primary) !important;
+                        color: #fff !important;
+                        box-shadow: 0 0 1px #000 !important;
                     }
                 }
             }