mirror of
https://github.com/novnc/noVNC.git
synced 2026-06-04 19:39:39 +00:00
4a0999a34e
Our select elements look more like buttons than they look like text inputs, this means we should use slightly larger padding.
144 lines
3.3 KiB
CSS
144 lines
3.3 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: linear-gradient(to top, rgb(255, 255, 255) 80%, rgb(240, 240, 240));
|
|
}
|
|
|
|
input[type=button],
|
|
input[type=color],
|
|
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: 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 {
|
|
padding-right: 7px;
|
|
padding-left: 7px;
|
|
}
|
|
option {
|
|
color: black;
|
|
background: white;
|
|
}
|
|
|
|
input:not([type]):focus,
|
|
input[type=button]:focus,
|
|
input[type=color]:focus,
|
|
input[type=date]:focus,
|
|
input[type=datetime-local]:focus,
|
|
input[type=email]:focus,
|
|
input[type=month]:focus,
|
|
input[type=number]:focus,
|
|
input[type=password]:focus,
|
|
input[type=reset]:focus,
|
|
input[type=search]:focus,
|
|
input[type=submit]:focus,
|
|
input[type=tel]:focus,
|
|
input[type=text]:focus,
|
|
input[type=time]:focus,
|
|
input[type=url]:focus,
|
|
input[type=week]:focus,
|
|
button:focus,
|
|
select:focus,
|
|
textarea:focus {
|
|
box-shadow: 0px 0px 3px rgba(74, 144, 217, 0.5);
|
|
border-color: rgb(74, 144, 217);
|
|
outline: none;
|
|
}
|
|
|
|
input:not([type]):disabled,
|
|
input[type=button]:disabled,
|
|
input[type=color]:disabled,
|
|
input[type=date]:disabled,
|
|
input[type=datetime-local]:disabled,
|
|
input[type=email]:disabled,
|
|
input[type=month]:disabled,
|
|
input[type=number]:disabled,
|
|
input[type=password]: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 {
|
|
color: rgb(128, 128, 128);
|
|
background: rgb(240, 240, 240);
|
|
}
|
|
|
|
input[type=button]:active,
|
|
input[type=color]: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=reset]:hover:not(:disabled),
|
|
:root:not(.noVNC_touch) input[type=submit]:hover:not(:disabled),
|
|
:root:not(.noVNC_touch) button:hover:not(:disabled),
|
|
:root:not(.noVNC_touch) select:hover:not(:disabled) {
|
|
background: linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250));
|
|
}
|