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>

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 f87bc52902cdc152696f9bed3358ad37d8ff616d..ff489b47cce5d1975a692d668729baeba01037de 100644 (file)
--- 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 {