Optimize drop-down menu style, adjust inner margins and borders to im…

…prove user experience
jerrykuku · Dec 22, 2024 · 98478b7 · 98478b7
1 parent 30a47db
commit 98478b7
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/htdocs/luci-static/argon/css/cascade.css b/htdocs/luci-static/argon/css/cascade.css
diff --git a/less/cascade.less b/less/cascade.less
@@ -313,6 +313,7 @@ select,
 .cbi-dropdown {
   width: inherit;
   cursor: default;
+  padding-right: 1rem;
 }
 
 select:not([multiple="multiple"]):focus,
@@ -1655,8 +1656,6 @@ tr > th,
   gap: 0px;
 
   input {
-    border-bottom-right-radius: 0;
-    border-top-right-radius: 0;
     border-right-width: 0;
     margin-right: 0;
   }
@@ -2448,6 +2447,10 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
   min-height: 2.1875rem;
 }
 
+.cbi-dropdown.btn > ul:not(.dropdown), .cbi-dropdown.cbi-button > ul:not(.dropdown){
+  margin: 0 0 0 0.75rem!important;
+}
+
 .cbi-dropdown[placeholder*="select"] {
   max-width: 25rem;
   height: auto;
@@ -2471,6 +2474,11 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
 
 }
 
+.cbi-dropdown.cbi-button-apply,
+.cbi-dropdown.cbi-button-action{
+  padding: 0;
+}
+
 .cbi-button-apply > ul.preview {
   display: none;
 
@@ -2501,10 +2509,12 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
   flex-grow: 0;
   flex-shrink: 0;
   justify-content: center;
-  padding: 0 .25em;
-  cursor: default;
+  padding: 0 .375rem;
+  cursor: pointer;
   text-align: center;
   outline: 0;
+  border-left: thin solid #ccc;
+  margin-left: 0.5rem;
 }
 
 .cbi-dropdown > .more,
@@ -2835,8 +2845,7 @@ body.modal-overlay-active #modal_overlay {
 }
 
 #view {
-  border-radius: 0.25rem;
-  overflow: hidden;
+  border-radius: 0.25rem; 
 
   & > .spinning {
     position: fixed;