追加:自定义[暗色模式]主色调,对已选中单选框[radio:checked] & 已选中复选框[checkbox:checked] 的颜色生效

-为所有输入框[input box],包括单选框[radio] & 复选框[checkbox],在指针悬浮时[hover] 增加边框变色的定位提示,边框颜色跟随自定义主色调
jerrykuku · May 16, 2023 · 39f61a2 · 39f61a2
1 parent 27945e0
commit 39f61a2
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 12 deletions.
diff --git a/htdocs/luci-static/argon/css/cascade.css b/htdocs/luci-static/argon/css/cascade.css
@@ -1106,8 +1106,6 @@ input[type="checkbox"] {
   vertical-align: middle;
 }
 input[type="checkbox"]:checked {
-  border: 1px solid #5e72e4;
-  border: 1px solid var(--primary);
   background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 8 8\'%3e%3cpath fill=\'%23fff\' d=\'M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z\'/%3e%3c/svg%3e') !important;
   background-color: #5e72e4;
   background-color: var(--primary);
@@ -1132,8 +1130,6 @@ ul li .cbi-input-checkbox {
   margin: 0.25rem 0;
 }
 .cbi-input-radio:checked {
-  border: 1px solid #5e72e4;
-  border: 1px solid var(--primary);
   background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'-4 -4 8 8\'%3e%3ccircle r=\'3\' fill=\'%23fff\'/%3e%3c/svg%3e') !important;
   background-color: #5e72e4;
   background-color: var(--primary);
@@ -1803,7 +1799,8 @@ input {
   transition: box-shadow 0.15s ease;
   margin: 0.25rem;
 }
-select:not([multiple="multiple"]):focus,
+select:not([multiple="multiple"]):hover,
+input:hover,
 input:focus {
   border-color: #5e72e4;
   border-color: var(--primary);

diff --git a/htdocs/luci-static/argon/css/dark.css b/htdocs/luci-static/argon/css/dark.css
@@ -131,6 +131,16 @@ input:-webkit-autofill {
   background-color: #3c3c3c !important;
 }
 
+input[type="checkbox"]:checked {
+  background-color: #483d8b !important;
+  background-color: var(--dark-primary) !important;
+}
+
+.cbi-input-radio:checked {
+  background-color: #483d8b !important;
+  background-color: var(--dark-primary) !important;
+}
+
 .cbi-value-field .cbi-input-apply,
 .cbi-button-apply,
 .cbi-button-edit {
@@ -402,7 +412,8 @@ input {
   box-shadow: 0 3px 2px rgba(0,0,0,0.05);
 }
 
-select:not([multiple="multiple"]):focus,
+select:not([multiple="multiple"]):hover,
+input:hover,
 input:focus {
   border-color: #483d8b !important;
   border-color: var(--dark-primary) !important;

diff --git a/htdocs/luci-static/argon/less/cascade.less b/htdocs/luci-static/argon/less/cascade.less
@@ -1315,8 +1315,6 @@ input[type="checkbox"] {
 }
 
 input[type="checkbox"]:checked {
-    border: 1px solid #5e72e4;
-    border: 1px solid var(--primary);
     background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 8 8\'%3e%3cpath fill=\'%23fff\' d=\'M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z\'/%3e%3c/svg%3e') !important;
     background-color: #5e72e4;
     background-color: var(--primary);
@@ -1345,8 +1343,6 @@ ul li .cbi-input-checkbox {
 }
 
 .cbi-input-radio:checked {
-    border: 1px solid #5e72e4;
-    border: 1px solid var(--primary);
     background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'-4 -4 8 8\'%3e%3ccircle r=\'3\' fill=\'%23fff\'/%3e%3c/svg%3e') !important;
     background-color: #5e72e4;
     background-color: var(--primary);
@@ -2169,7 +2165,8 @@ input {
     margin: 0.25rem;
 }
 
-select:not([multiple="multiple"]):focus,
+select:not([multiple="multiple"]):hover,
+input:hover,
 input:focus {
     border-color: #5e72e4;
     border-color: var(--primary);

diff --git a/htdocs/luci-static/argon/less/dark.less b/htdocs/luci-static/argon/less/dark.less
@@ -199,6 +199,16 @@ input:-webkit-autofill {
     background-color: #3c3c3c !important;
 }
 
+input[type="checkbox"]:checked {
+    background-color: #483d8b !important;
+    background-color: var(--dark-primary) !important;
+}
+
+.cbi-input-radio:checked {
+    background-color: #483d8b !important;
+    background-color: var(--dark-primary) !important;
+}
+
 .cbi-value-field .cbi-input-apply,
 .cbi-button-apply,
 .cbi-button-edit {
@@ -476,7 +486,8 @@ input {
     box-shadow: 0 3px 2px rgba(0, 0, 0, .05);
 }
 
-select:not([multiple="multiple"]):focus,
+select:not([multiple="multiple"]):hover,
+input:hover,
 input:focus {
     border-color: #483d8b !important;
     border-color: var(--dark-primary) !important;