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 {