1 files changed, 23 insertions, 13 deletions

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,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><circle cx='10' cy='10' r='8'/></svg>");
+	--checkmark-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><circle cx='10' cy='10' r='7'/></svg>");
 }
 
 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 {