diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
index f87bc52902..ff489b47cc 100644
--- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
+++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
@@ -154,7 +154,7 @@
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
-* {
+*, *::before, *::after {
margin: 0;
padding: 0;
border: 0;
@@ -652,12 +652,18 @@ select,
white-space: nowrap;
}
-.cbi-value-field > .cbi-checkbox {
+.cbi-value-field > .cbi-checkbox,
+.cbi-value-field > div > .cbi-radio {
height: 30px;
- display: flex;
+ display: inline-flex;
align-items: center;
}
+.cbi-radio {
+ cursor: pointer;
+ gap: .125em;
+}
+
.cbi-select {
padding: 0;
position: relative;
@@ -754,8 +760,8 @@ input[type="radio"]::after {
input[type="checkbox"]::before,
input[type="radio"]::before {
- top: -1px;
- left: -1px;
+ top: 0;
+ left: 0;
width: 14px;
height: 14px;
background: linear-gradient(var(--background-color-high), var(--background-color-low));
@@ -785,7 +791,7 @@ input[type="radio"]:checked::after {
}
input[type="radio"]:checked:after {
- --checkmark-icon: url("data:image/svg+xml,");
+ --checkmark-icon: url("data:image/svg+xml,");
}
input[type="checkbox"].cbi-input-invalid,
@@ -814,7 +820,7 @@ input[type="radio"].cbi-input-invalid {
.cbi-dynlist > .item,
input[type="checkbox"]::before,
input[type="radio"]::before,
-input, button, textarea {
+input, button, textarea, select {
transition: border linear 0.2s, box-shadow linear 0.2s;
box-shadow: inset 0 1px 3px hsla(var(--border-color-low-hsl), .01);
}
@@ -827,7 +833,7 @@ input, button, textarea {
.cbi-dynlist > .item:focus,
input[type="checkbox"]:focus::before,
input[type="radio"]:focus::before,
-input:focus, button:hover, textarea:focus {
+input:focus, button:hover, textarea:focus, select:focus {
--focus-color-rgb: 82, 168, 236;
outline: 0;
@@ -1225,7 +1231,7 @@ a.menu:after {
outline: none;
}
-.tabs > li > a:focus, .cbi-tabmenu > li > a:focus {
+.tabs > li > a:focus-visible, .cbi-tabmenu > li > a:focus-visible {
text-decoration: underline;
}
@@ -1242,12 +1248,16 @@ a.menu:after {
content: attr(data-errors);
background: #c43c35;
color: #fff;
- min-width: 12px;
- line-height: 14px;
- border-radius: 7px;
+ height: 16px;
+ min-width: 16px;
+ border-radius: 8px;
text-align: center;
margin: 0 5px 0 0;
- padding: 1px 2px;
+ padding: 3px 2px 1px 2px;
+ display: inline-flex;
+ flex-direction: column;
+ justify-content: center;
+ font-size: 12px;
}
.cbi-tabmenu.map {