From f416c27b90a88000c0d0786decc514c044d2e3d1 Mon Sep 17 00:00:00 2001
From: Jo-Philipp Wich <jo@mein.io>
Date: Tue, 7 Feb 2023 09:57:51 +0100
Subject: [PATCH] luci-theme-bootstrap: minor style fixes

 - Apply CSS reset to before/after pseudo elements as well and fix
   resulting shifted offsets
 - Apply focus highlight to select elements too
 - Improve radio button styling

Signed-off-by: Jo-Philipp Wich <jo@mein.io>
---
 .../htdocs/luci-static/bootstrap/cascade.css  | 36 ++++++++++++-------
 1 file 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 {
-- 
2.30.2