mirror of
https://github.com/novnc/noVNC.git
synced 2026-06-07 21:04:37 +00:00
faf921b023
Use the more specific background-image property when setting linear-gradient backgrounds for input elements. This way we no longer pollute all background related properties. It makes things easier if we need to replace it in some states in the future.
230 lines
5.7 KiB
CSS
230 lines
5.7 KiB
CSS
/*
|
|
* noVNC general input element CSS
|
|
* Copyright (C) 2022 The noVNC Authors
|
|
* noVNC is licensed under the MPL 2.0 (see LICENSE.txt)
|
|
* This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
|
|
*/
|
|
|
|
input, select, textarea {
|
|
/* Respect standard font settings */
|
|
font: inherit;
|
|
}
|
|
|
|
input:not([type]),
|
|
input[type=date],
|
|
input[type=datetime-local],
|
|
input[type=email],
|
|
input[type=month],
|
|
input[type=number],
|
|
input[type=password],
|
|
input[type=search],
|
|
input[type=tel],
|
|
input[type=text],
|
|
input[type=time],
|
|
input[type=url],
|
|
input[type=week],
|
|
textarea {
|
|
/* Disable default rendering */
|
|
appearance: none;
|
|
background: none;
|
|
|
|
padding: 5px;
|
|
border: 1px solid rgb(192, 192, 192);
|
|
border-radius: 5px;
|
|
color: black;
|
|
background-image: linear-gradient(to top, rgb(255, 255, 255) 80%, rgb(240, 240, 240));
|
|
}
|
|
|
|
input[type=button],
|
|
input[type=color],
|
|
input[type=image],
|
|
input[type=reset],
|
|
input[type=submit],
|
|
button,
|
|
select {
|
|
/* Disable default rendering */
|
|
appearance: none;
|
|
background: none;
|
|
|
|
padding: 5px;
|
|
border: 1px solid rgb(192, 192, 192);
|
|
border-bottom-width: 2px;
|
|
border-radius: 5px;
|
|
color: black;
|
|
background-image: linear-gradient(to top, rgb(255, 255, 255), rgb(240, 240, 240));
|
|
|
|
/* This avoids it jumping around when :active */
|
|
vertical-align: middle;
|
|
}
|
|
|
|
input[type=button],
|
|
input[type=color],
|
|
input[type=reset],
|
|
input[type=submit],
|
|
button {
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
select {
|
|
--select-arrow: url('data:image/svg+xml;utf8, \
|
|
<svg width="8" height="6" version="1.1" viewBox="0 0 8 6" \
|
|
xmlns="http://www.w3.org/2000/svg"> \
|
|
<path d="m6.5 1.5 -2.5 3 -2.5 -3 5 0" stroke-width="3" \
|
|
stroke="rgb(31,31,31)" fill="none" \
|
|
stroke-linecap="round" stroke-linejoin="round" /> \
|
|
</svg>');
|
|
background-image: var(--select-arrow),
|
|
linear-gradient(to top, rgb(255, 255, 255), rgb(240, 240, 240));
|
|
background-position: calc(100% - 7px), left top;
|
|
background-repeat: no-repeat;
|
|
padding-right: calc(2*7px + 8px);
|
|
padding-left: 7px;
|
|
}
|
|
|
|
option {
|
|
color: black;
|
|
background: white;
|
|
}
|
|
|
|
input[type=checkbox] {
|
|
position: relative;
|
|
appearance: none;
|
|
border: 1px solid dimgrey;
|
|
border-radius: 3px;
|
|
width: 0.8em;
|
|
height: 0.8em;
|
|
vertical-align: bottom;
|
|
}
|
|
input[type=checkbox]:checked {
|
|
background-color: rgb(110, 132, 163);
|
|
border-color: rgb(110, 132, 163);
|
|
}
|
|
input[type=checkbox]:checked::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 3px;
|
|
width: 3px;
|
|
height: 7px;
|
|
border: 1px solid white;
|
|
border-width: 0 2px 2px 0;
|
|
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-visible,
|
|
input[type=button]:focus-visible,
|
|
input[type=checkbox]:focus-visible,
|
|
input[type=color]:focus-visible,
|
|
input[type=date]:focus-visible,
|
|
input[type=datetime-local]:focus-visible,
|
|
input[type=email]:focus-visible,
|
|
input[type=image]:focus-visible,
|
|
input[type=month]:focus-visible,
|
|
input[type=number]:focus-visible,
|
|
input[type=password]:focus-visible,
|
|
input[type=range]:focus-visible,
|
|
input[type=reset]:focus-visible,
|
|
input[type=search]:focus-visible,
|
|
input[type=submit]:focus-visible,
|
|
input[type=tel]:focus-visible,
|
|
input[type=text]:focus-visible,
|
|
input[type=time]:focus-visible,
|
|
input[type=url]:focus-visible,
|
|
input[type=week]:focus-visible,
|
|
button:focus-visible,
|
|
select:focus-visible,
|
|
textarea:focus-visible {
|
|
outline: 2px solid rgb(74, 144, 217);
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
input:not([type]):disabled,
|
|
input[type=button]:disabled,
|
|
input[type=checkbox]:disabled,
|
|
input[type=color]:disabled,
|
|
input[type=date]:disabled,
|
|
input[type=datetime-local]:disabled,
|
|
input[type=email]:disabled,
|
|
input[type=image]:disabled,
|
|
input[type=month]:disabled,
|
|
input[type=number]:disabled,
|
|
input[type=password]:disabled,
|
|
input[type=range]:disabled,
|
|
input[type=reset]:disabled,
|
|
input[type=search]:disabled,
|
|
input[type=submit]:disabled,
|
|
input[type=tel]:disabled,
|
|
input[type=text]:disabled,
|
|
input[type=time]:disabled,
|
|
input[type=url]:disabled,
|
|
input[type=week]:disabled,
|
|
button:disabled,
|
|
select:disabled,
|
|
textarea:disabled {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
input[type=button]:active,
|
|
input[type=color]:active,
|
|
input[type=image]:active,
|
|
input[type=reset]:active,
|
|
input[type=submit]:active,
|
|
button:active,
|
|
select:active {
|
|
border-bottom-width: 1px;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
:root:not(.noVNC_touch) input[type=button]:hover:not(:disabled),
|
|
:root:not(.noVNC_touch) input[type=color]:hover:not(:disabled),
|
|
:root:not(.noVNC_touch) input[type=image]:hover:not(:disabled),
|
|
:root:not(.noVNC_touch) input[type=reset]:hover:not(:disabled),
|
|
:root:not(.noVNC_touch) input[type=submit]:hover:not(:disabled),
|
|
:root:not(.noVNC_touch) button:hover:not(:disabled) {
|
|
background-image: linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250));
|
|
}
|
|
:root:not(.noVNC_touch) select:hover:not(:disabled) {
|
|
background-image: var(--select-arrow),
|
|
linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250));
|
|
background-position: calc(100% - 7px), left top;
|
|
background-repeat: no-repeat;
|
|
}
|