jcarr
/
noVNC
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add styling for input[type=range] 

This makes them fit in better in our settings GUI, especially when it
comes to coloring.
This commit is contained in:
Samuel Mannehed 2022-12-07 14:33:46 +01:00
parent f820ec86f0
commit 8c961ab7c6
1 changed files with 40 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
app/styles/input.css
View File

@ -114,6 +114,43 @@ input[type=checkbox]:checked::after {
transform: rotate(40deg); transform: rotate(40deg);
} }
input[type=range] {
appearance: none;
border-radius: 3px;
height: 20px;
background: transparent;
}
/* -webkit-slider.. & -moz-range.. cant be in selector lists:
https://bugs.chromium.org/p/chromium/issues/detail?id=1154623 */
input[type=range]::-webkit-slider-runnable-track {
background-color: rgb(110, 132, 163);
height: 6px;
border-radius: 3px;
}
input[type=range]::-moz-range-track {
background-color: rgb(110, 132, 163);
height: 6px;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
appearance: none;
width: 18px;
height: 20px;
border-radius: 5px;
background-color: white;
border: 1px solid dimgray;
margin-top: -7px;
}
input[type=range]::-moz-range-thumb {
appearance: none;
width: 18px;
height: 20px;
border-radius: 5px;
background-color: white;
border: 1px solid dimgray;
margin-top: -7px;
}
input:not([type]):focus, input:not([type]):focus,
input[type=button]:focus, input[type=button]:focus,
input[type=color]:focus, input[type=color]:focus,
@ -133,6 +170,7 @@ input[type=time]:focus,
input[type=url]:focus, input[type=url]:focus,
input[type=week]:focus, input[type=week]:focus,
input[type=checkbox]:focus, input[type=checkbox]:focus,
input[type=range]:focus,
button:focus, button:focus,
select:focus, select:focus,
textarea:focus { textarea:focus {
@ -165,7 +203,8 @@ textarea:disabled {
color: rgb(128, 128, 128); color: rgb(128, 128, 128);
background: rgb(240, 240, 240); background: rgb(240, 240, 240);
} }
input[type=checkbox]:disabled { input[type=checkbox]:disabled,
input[type=range]:disabled {
opacity: 0.4; opacity: 0.4;
} }