Difuse/luci
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

luci-theme-bootstrap: minor style fixes

Browse source 
- 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>
This commit is contained in:
Jo-Philipp Wich 2023-02-07 09:57:51 +01:00
parent a570e30006
commit f416c27b90
1 changed files with 23 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
View file

@ -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). * 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; margin: 0;
padding: 0; padding: 0;
border: 0; border: 0;
@ -652,12 +652,18 @@ select,
white-space: nowrap; white-space: nowrap;
} }
.cbi-value-field > .cbi-checkbox { .cbi-value-field > .cbi-checkbox,
.cbi-value-field > div > .cbi-radio {
height: 30px; height: 30px;
display: flex; display: inline-flex;
align-items: center; align-items: center;
} }
.cbi-radio {
cursor: pointer;
gap: .125em;
}
.cbi-select { .cbi-select {
padding: 0; padding: 0;
position: relative; position: relative;
@ -754,8 +760,8 @@ input[type="radio"]::after {
input[type="checkbox"]::before, input[type="checkbox"]::before,
input[type="radio"]::before { input[type="radio"]::before {
top: -1px; top: 0;
left: -1px; left: 0;
width: 14px; width: 14px;
height: 14px; height: 14px;
background: linear-gradient(var(--background-color-high), var(--background-color-low)); 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 { 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, input[type="checkbox"].cbi-input-invalid,
@ -814,7 +820,7 @@ input[type="radio"].cbi-input-invalid {
.cbi-dynlist > .item, .cbi-dynlist > .item,
input[type="checkbox"]::before, input[type="checkbox"]::before,
input[type="radio"]::before, input[type="radio"]::before,
input, button, textarea { input, button, textarea, select {
transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s;
box-shadow: inset 0 1px 3px hsla(var(--border-color-low-hsl), .01); box-shadow: inset 0 1px 3px hsla(var(--border-color-low-hsl), .01);
} }
@ -827,7 +833,7 @@ input, button, textarea {
.cbi-dynlist > .item:focus, .cbi-dynlist > .item:focus,
input[type="checkbox"]:focus::before, input[type="checkbox"]:focus::before,
input[type="radio"]: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; --focus-color-rgb: 82, 168, 236;
outline: 0; outline: 0;
@ -1225,7 +1231,7 @@ a.menu:after {
outline: none; 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; text-decoration: underline;
} }
@ -1242,12 +1248,16 @@ a.menu:after {
content: attr(data-errors); content: attr(data-errors);
background: #c43c35; background: #c43c35;
color: #fff; color: #fff;
min-width: 12px; height: 16px;
line-height: 14px; min-width: 16px;
border-radius: 7px; border-radius: 8px;
text-align: center; text-align: center;
margin: 0 5px 0 0; 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 { .cbi-tabmenu.map {