| 1 | /* |
| 2 | * noVNC general input element CSS |
| 3 | * Copyright (C) 2022 The noVNC Authors |
| 4 | * noVNC is licensed under the MPL 2.0 (see LICENSE.txt) |
| 5 | * This file is licensed under the 2-Clause BSD license (see LICENSE.txt). |
| 6 | */ |
| 7 | |
| 8 | /* |
| 9 | * Common for all inputs |
| 10 | */ |
| 11 | input, input::file-selector-button, button, select, textarea { |
| 12 | /* Respect standard font settings */ |
| 13 | font: inherit; |
| 14 | |
| 15 | /* Disable default rendering */ |
| 16 | appearance: none; |
| 17 | background: none; |
| 18 | |
| 19 | padding: 5px; |
| 20 | border: 1px solid rgb(192, 192, 192); |
| 21 | border-radius: 5px; |
| 22 | color: black; |
| 23 | --bg-gradient: linear-gradient(to top, rgb(255, 255, 255) 80%, rgb(240, 240, 240)); |
| 24 | background-image: var(--bg-gradient); |
| 25 | } |
| 26 | |
| 27 | /* |
| 28 | * Buttons |
| 29 | */ |
| 30 | input[type=button], |
| 31 | input[type=color], |
| 32 | input[type=image], |
| 33 | input[type=reset], |
| 34 | input[type=submit], |
| 35 | input::file-selector-button, |
| 36 | button, |
| 37 | select { |
| 38 | border-bottom-width: 2px; |
| 39 | |
| 40 | /* This avoids it jumping around when :active */ |
| 41 | vertical-align: middle; |
| 42 | margin-top: 0; |
| 43 | |
| 44 | padding-left: 20px; |
| 45 | padding-right: 20px; |
| 46 | |
| 47 | /* Disable Chrome's touch tap highlight */ |
| 48 | -webkit-tap-highlight-color: transparent; |
| 49 | } |
| 50 | |
| 51 | /* |
| 52 | * Select dropdowns |
| 53 | */ |
| 54 | select { |
| 55 | --select-arrow: url('data:image/svg+xml;utf8, \ |
| 56 | <svg width="8" height="6" version="1.1" viewBox="0 0 8 6" \ |
| 57 | xmlns="http://www.w3.org/2000/svg"> \ |
| 58 | <path d="m6.5 1.5 -2.5 3 -2.5 -3 5 0" stroke-width="3" \ |
| 59 | stroke="rgb(31,31,31)" fill="none" \ |
| 60 | stroke-linecap="round" stroke-linejoin="round" /> \ |
| 61 | </svg>'); |
| 62 | background-image: var(--select-arrow), var(--bg-gradient); |
| 63 | background-position: calc(100% - 7px), left top; |
| 64 | background-repeat: no-repeat; |
| 65 | padding-right: calc(2*7px + 8px); |
| 66 | padding-left: 7px; |
| 67 | } |
| 68 | /* FIXME: :active isn't set when the <select> is opened in Firefox: |
| 69 | https://bugzilla.mozilla.org/show_bug.cgi?id=1805406 */ |
| 70 | select:active { |
| 71 | /* Rotated arrow */ |
| 72 | background-image: url('data:image/svg+xml;utf8, \ |
| 73 | <svg width="8" height="6" version="1.1" viewBox="0 0 8 6" \ |
| 74 | xmlns="http://www.w3.org/2000/svg" transform="rotate(180)" > \ |
| 75 | <path d="m6.5 1.5 -2.5 3 -2.5 -3 5 0" stroke-width="3" \ |
| 76 | stroke="rgb(31,31,31)" fill="none" \ |
| 77 | stroke-linecap="round" stroke-linejoin="round" /> \ |
| 78 | </svg>'), var(--bg-gradient); |
| 79 | } |
| 80 | option { |
| 81 | color: black; |
| 82 | background: white; |
| 83 | } |
| 84 | |
| 85 | /* |
| 86 | * Checkboxes |
| 87 | */ |
| 88 | input[type=checkbox] { |
| 89 | display: inline-flex; |
| 90 | justify-content: center; |
| 91 | align-items: center; |
| 92 | background-color: white; |
| 93 | background-image: unset; |
| 94 | border: 1px solid dimgrey; |
| 95 | border-radius: 3px; |
| 96 | width: 13px; |
| 97 | height: 13px; |
| 98 | padding: 0; |
| 99 | margin-right: 6px; |
| 100 | vertical-align: bottom; |
| 101 | transition: 0.2s background-color linear; |
| 102 | } |
| 103 | input[type=checkbox]:checked { |
| 104 | background-color: rgb(110, 132, 163); |
| 105 | border-color: rgb(110, 132, 163); |
| 106 | } |
| 107 | input[type=checkbox]:checked::after { |
| 108 | content: ""; |
| 109 | display: block; /* width & height doesn't work on inline elements */ |
| 110 | width: 3px; |
| 111 | height: 7px; |
| 112 | border: 1px solid white; |
| 113 | border-width: 0 2px 2px 0; |
| 114 | transform: rotate(40deg) translateY(-1px); |
| 115 | } |
| 116 | |
| 117 | /* |
| 118 | * Radiobuttons |
| 119 | */ |
| 120 | input[type=radio] { |
| 121 | border-radius: 50%; |
| 122 | border: 1px solid dimgrey; |
| 123 | width: 12px; |
| 124 | height: 12px; |
| 125 | padding: 0; |
| 126 | margin-right: 6px; |
| 127 | transition: 0.2s border linear; |
| 128 | } |
| 129 | input[type=radio]:checked { |
| 130 | border: 6px solid rgb(110, 132, 163); |
| 131 | } |
| 132 | |
| 133 | /* |
| 134 | * Range sliders |
| 135 | */ |
| 136 | input[type=range] { |
| 137 | border: unset; |
| 138 | border-radius: 3px; |
| 139 | height: 20px; |
| 140 | padding: 0; |
| 141 | background: transparent; |
| 142 | } |
| 143 | /* -webkit-slider.. & -moz-range.. cant be in selector lists: |
| 144 | https://bugs.chromium.org/p/chromium/issues/detail?id=1154623 */ |
| 145 | input[type=range]::-webkit-slider-runnable-track { |
| 146 | background-color: rgb(110, 132, 163); |
| 147 | height: 6px; |
| 148 | border-radius: 3px; |
| 149 | } |
| 150 | input[type=range]::-moz-range-track { |
| 151 | background-color: rgb(110, 132, 163); |
| 152 | height: 6px; |
| 153 | border-radius: 3px; |
| 154 | } |
| 155 | input[type=range]::-webkit-slider-thumb { |
| 156 | appearance: none; |
| 157 | width: 18px; |
| 158 | height: 20px; |
| 159 | border-radius: 5px; |
| 160 | background-color: white; |
| 161 | border: 1px solid dimgray; |
| 162 | margin-top: -7px; |
| 163 | } |
| 164 | input[type=range]::-moz-range-thumb { |
| 165 | appearance: none; |
| 166 | width: 18px; |
| 167 | height: 20px; |
| 168 | border-radius: 5px; |
| 169 | background-color: white; |
| 170 | border: 1px solid dimgray; |
| 171 | margin-top: -7px; |
| 172 | } |
| 173 | |
| 174 | /* |
| 175 | * File choosers |
| 176 | */ |
| 177 | input[type=file] { |
| 178 | background-image: none; |
| 179 | border: none; |
| 180 | } |
| 181 | input::file-selector-button { |
| 182 | margin-right: 6px; |
| 183 | } |
| 184 | |
| 185 | /* |
| 186 | * Hover |
| 187 | */ |
| 188 | input[type=button]:hover, |
| 189 | input[type=color]:hover, |
| 190 | input[type=image]:hover, |
| 191 | input[type=reset]:hover, |
| 192 | input[type=submit]:hover, |
| 193 | input::file-selector-button:hover, |
| 194 | button:hover { |
| 195 | background-image: linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250)); |
| 196 | } |
| 197 | select:hover { |
| 198 | background-image: var(--select-arrow), |
| 199 | linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250)); |
| 200 | background-position: calc(100% - 7px), left top; |
| 201 | background-repeat: no-repeat; |
| 202 | } |
| 203 | @media (any-pointer: coarse) { |
| 204 | /* We don't want a hover style after touch input */ |
| 205 | input[type=button]:hover, |
| 206 | input[type=color]:hover, |
| 207 | input[type=image]:hover, |
| 208 | input[type=reset]:hover, |
| 209 | input[type=submit]:hover, |
| 210 | input::file-selector-button:hover, |
| 211 | button:hover { |
| 212 | background-image: var(--bg-gradient); |
| 213 | } |
| 214 | select:hover { |
| 215 | background-image: var(--select-arrow), var(--bg-gradient); |
| 216 | } |
| 217 | } |
| 218 | |
| 219 | /* |
| 220 | * Active (clicked) |
| 221 | */ |
| 222 | input[type=button]:active, |
| 223 | input[type=color]:active, |
| 224 | input[type=image]:active, |
| 225 | input[type=reset]:active, |
| 226 | input[type=submit]:active, |
| 227 | input::file-selector-button:active, |
| 228 | button:active, |
| 229 | select:active { |
| 230 | border-bottom-width: 1px; |
| 231 | margin-top: 1px; |
| 232 | } |
| 233 | |
| 234 | /* |
| 235 | * Focus (tab) |
| 236 | */ |
| 237 | input:focus-visible, |
| 238 | input:focus-visible::file-selector-button, |
| 239 | button:focus-visible, |
| 240 | select:focus-visible, |
| 241 | textarea:focus-visible { |
| 242 | outline: 2px solid rgb(74, 144, 217); |
| 243 | outline-offset: 1px; |
| 244 | } |
| 245 | input[type=file]:focus-visible { |
| 246 | outline: none; /* We outline the button instead of the entire element */ |
| 247 | } |
| 248 | |
| 249 | /* |
| 250 | * Disabled |
| 251 | */ |
| 252 | input:disabled, |
| 253 | input:disabled::file-selector-button, |
| 254 | button:disabled, |
| 255 | select:disabled, |
| 256 | textarea:disabled { |
| 257 | opacity: 0.4; |
| 258 | } |
| 259 | input[type=button]:disabled, |
| 260 | input[type=color]:disabled, |
| 261 | input[type=image]:disabled, |
| 262 | input[type=reset]:disabled, |
| 263 | input[type=submit]:disabled, |
| 264 | input:disabled::file-selector-button, |
| 265 | button:disabled, |
| 266 | select:disabled { |
| 267 | background-image: var(--bg-gradient); |
| 268 | border-bottom-width: 2px; |
| 269 | margin-top: 0; |
| 270 | } |
| 271 | input[type=file]:disabled { |
| 272 | background-image: none; |
| 273 | } |
| 274 | select:disabled { |
| 275 | background-image: var(--select-arrow), var(--bg-gradient); |
| 276 | } |
| 277 | input[type=image]:disabled { |
| 278 | /* See Firefox bug: |
| 279 | https://bugzilla.mozilla.org/show_bug.cgi?id=1798304 */ |
| 280 | cursor: default; |
| 281 | } |