The Tor Browser / file comparison
comparison: layout/style/forms.css
layout/style/forms.css
- branch
- TOR_BUG_9701
- changeset 3
- 141e0f1194b1
equal
deleted
inserted
replaced
| -1:000000000000 | 0:c2a77b8fdbcc |
|---|---|
| 1 /* This Source Code Form is subject to the terms of the Mozilla Public | |
| 2 * License, v. 2.0. If a copy of the MPL was not distributed with this | |
| 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ | |
| 4 | |
| 5 /** | |
| 6 Styles for old GFX form widgets | |
| 7 **/ | |
| 8 | |
| 9 | |
| 10 @namespace url(http://www.w3.org/1999/xhtml); /* set default namespace to HTML */ | |
| 11 @namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); | |
| 12 | |
| 13 *|*::-moz-fieldset-content { | |
| 14 display: block; | |
| 15 unicode-bidi: inherit; | |
| 16 text-overflow: inherit; | |
| 17 overflow: inherit; | |
| 18 padding: inherit; | |
| 19 height: 100%; /* Need this so percentage heights of kids work right */ | |
| 20 } | |
| 21 | |
| 22 /* miscellaneous form elements */ | |
| 23 | |
| 24 fieldset > legend { | |
| 25 padding-left: 2px; | |
| 26 padding-right: 2px; | |
| 27 width: -moz-fit-content; | |
| 28 } | |
| 29 | |
| 30 legend { | |
| 31 display: block; | |
| 32 } | |
| 33 | |
| 34 fieldset { | |
| 35 display: block; | |
| 36 margin-left: 2px; | |
| 37 margin-right: 2px; | |
| 38 padding: 0.35em 0.625em 0.75em; | |
| 39 border: 2px groove ThreeDFace; | |
| 40 } | |
| 41 | |
| 42 label { | |
| 43 cursor: default; | |
| 44 } | |
| 45 | |
| 46 /* default inputs, text inputs, and selects */ | |
| 47 | |
| 48 /* Note: Values in nsNativeTheme IsWidgetStyled function | |
| 49 need to match textfield background/border values here */ | |
| 50 | |
| 51 input { | |
| 52 -moz-appearance: textfield; | |
| 53 /* The sum of border-top, border-bottom, padding-top, padding-bottom | |
| 54 must be the same here, for buttons, and for <select> (including its | |
| 55 internal padding magic) */ | |
| 56 padding: 1px; | |
| 57 border: 2px inset ThreeDFace; | |
| 58 background-color: -moz-Field; | |
| 59 color: -moz-FieldText; | |
| 60 font: -moz-field; | |
| 61 text-rendering: optimizeLegibility; | |
| 62 line-height: normal; | |
| 63 text-align: start; | |
| 64 text-transform: none; | |
| 65 word-spacing: normal; | |
| 66 letter-spacing: normal; | |
| 67 cursor: text; | |
| 68 -moz-binding: url("chrome://global/content/platformHTMLBindings.xml#inputFields"); | |
| 69 text-indent: 0; | |
| 70 -moz-user-select: text; | |
| 71 text-shadow: none; | |
| 72 overflow-clip-box: content-box; | |
| 73 } | |
| 74 | |
| 75 input > .anonymous-div, | |
| 76 input::-moz-placeholder { | |
| 77 word-wrap: normal !important; | |
| 78 /* Make the line-height equal to the available height */ | |
| 79 line-height: -moz-block-height; | |
| 80 } | |
| 81 | |
| 82 @-moz-document url-prefix(chrome://) { | |
| 83 input.uri-element-right-align:-moz-locale-dir(rtl) { | |
| 84 direction: ltr !important; | |
| 85 text-align: right !important; | |
| 86 } | |
| 87 | |
| 88 /* Make sure that the location bar's alignment in RTL mode changes according | |
| 89 to the input box direction if the user switches the text direction using | |
| 90 cmd_switchTextDirection (which applies a dir attribute to the <input>). */ | |
| 91 input.uri-element-right-align[dir=ltr]:-moz-locale-dir(rtl) { | |
| 92 text-align: left !important; | |
| 93 } | |
| 94 } | |
| 95 | |
| 96 textarea { | |
| 97 margin: 1px 0 1px 0; | |
| 98 border: 2px inset ThreeDFace; | |
| 99 /* The 1px horizontal padding is for parity with Win/IE */ | |
| 100 padding: 0px 1px; | |
| 101 background-color: -moz-Field; | |
| 102 color: -moz-FieldText; | |
| 103 font: medium -moz-fixed; | |
| 104 text-rendering: optimizeLegibility; | |
| 105 text-align: start; | |
| 106 text-transform: none; | |
| 107 word-spacing: normal; | |
| 108 letter-spacing: normal; | |
| 109 vertical-align: text-bottom; | |
| 110 cursor: text; | |
| 111 resize: both; | |
| 112 -moz-binding: url("chrome://global/content/platformHTMLBindings.xml#textAreas"); | |
| 113 -moz-appearance: textfield-multiline; | |
| 114 text-indent: 0; | |
| 115 -moz-user-select: text; | |
| 116 text-shadow: none; | |
| 117 word-wrap: break-word; | |
| 118 overflow-clip-box: content-box; | |
| 119 } | |
| 120 | |
| 121 textarea > scrollbar { | |
| 122 cursor: default; | |
| 123 } | |
| 124 | |
| 125 textarea > .anonymous-div, | |
| 126 input > .anonymous-div, | |
| 127 input::-moz-placeholder, | |
| 128 textarea::-moz-placeholder { | |
| 129 white-space: pre; | |
| 130 overflow: auto; | |
| 131 border: 0px !important; | |
| 132 padding: inherit !important; | |
| 133 margin: 0px; | |
| 134 text-decoration: inherit; | |
| 135 -moz-text-decoration-color: inherit; | |
| 136 -moz-text-decoration-style: inherit; | |
| 137 display: inline-block; | |
| 138 ime-mode: inherit; | |
| 139 resize: inherit; | |
| 140 -moz-control-character-visibility: visible; | |
| 141 overflow-clip-box: inherit; | |
| 142 } | |
| 143 | |
| 144 textarea > .anonymous-div.wrap, | |
| 145 input > .anonymous-div.wrap { | |
| 146 white-space: pre-wrap; | |
| 147 } | |
| 148 textarea > .anonymous-div.inherit-overflow, | |
| 149 input > .anonymous-div.inherit-overflow { | |
| 150 overflow: inherit; | |
| 151 } | |
| 152 | |
| 153 input::-moz-placeholder, | |
| 154 textarea::-moz-placeholder { | |
| 155 /* | |
| 156 * Changing display to inline can leads to broken behaviour and will assert. | |
| 157 */ | |
| 158 display: inline-block !important; | |
| 159 | |
| 160 /* | |
| 161 * Changing resize would display a broken behaviour and will assert. | |
| 162 */ | |
| 163 resize: none !important; | |
| 164 | |
| 165 overflow: hidden !important; | |
| 166 | |
| 167 /* | |
| 168 * The placeholder should be ignored by pointer otherwise, we might have some | |
| 169 * unexpected behavior like the resize handle not being selectable. | |
| 170 */ | |
| 171 pointer-events: none !important; | |
| 172 | |
| 173 opacity: 0.54; | |
| 174 } | |
| 175 | |
| 176 textarea::-moz-placeholder { | |
| 177 white-space: pre-wrap !important; | |
| 178 } | |
| 179 | |
| 180 input:-moz-read-write, | |
| 181 textarea:-moz-read-write { | |
| 182 -moz-user-modify: read-write !important; | |
| 183 } | |
| 184 | |
| 185 select { | |
| 186 margin: 0; | |
| 187 border-color: ThreeDFace; | |
| 188 background-color: -moz-Combobox; | |
| 189 color: -moz-ComboboxText; | |
| 190 font: -moz-list; | |
| 191 /* | |
| 192 * Note that the "UA !important" tests in | |
| 193 * layout/style/test/test_animations.html depend on this rule, because | |
| 194 * they need some UA !important rule to test. If this changes, use a | |
| 195 * different one there. | |
| 196 */ | |
| 197 line-height: normal !important; | |
| 198 white-space: nowrap !important; | |
| 199 word-wrap: normal !important; | |
| 200 text-align: start; | |
| 201 cursor: default; | |
| 202 box-sizing: border-box; | |
| 203 -moz-user-select: none; | |
| 204 -moz-appearance: menulist; | |
| 205 border-width: 2px; | |
| 206 border-style: inset; | |
| 207 text-indent: 0; | |
| 208 overflow: -moz-hidden-unscrollable; | |
| 209 text-shadow: none; | |
| 210 /* No text-decoration reaching inside, by default */ | |
| 211 display: inline-block; | |
| 212 page-break-inside: avoid; | |
| 213 overflow-clip-box: padding-box !important; /* bug 992447 */ | |
| 214 } | |
| 215 | |
| 216 /* Need the "select[size][multiple]" selector to override the settings on | |
| 217 'select[size="1"]', eg if one has <select size="1" multiple> */ | |
| 218 | |
| 219 select[size], | |
| 220 select[multiple], | |
| 221 select[size][multiple] { | |
| 222 /* Different alignment and padding for listbox vs combobox */ | |
| 223 background-color: -moz-Field; | |
| 224 color: -moz-FieldText; | |
| 225 vertical-align: text-bottom; | |
| 226 padding: 1px 0 1px 0; | |
| 227 -moz-appearance: listbox; | |
| 228 } | |
| 229 | |
| 230 select[size="0"], | |
| 231 select[size="1"] { | |
| 232 /* Except this is not a listbox */ | |
| 233 background-color: -moz-Combobox; | |
| 234 color: -moz-ComboboxText; | |
| 235 vertical-align: baseline; | |
| 236 padding: 0; | |
| 237 -moz-appearance: menulist; | |
| 238 } | |
| 239 | |
| 240 select > button { | |
| 241 width: 12px; | |
| 242 height: 12px; | |
| 243 white-space: nowrap; | |
| 244 position: static !important; | |
| 245 background-image: url("arrow.gif") !important; | |
| 246 background-repeat: no-repeat !important; | |
| 247 background-position: center !important; | |
| 248 -moz-appearance: menulist-button; | |
| 249 | |
| 250 /* Make sure to size correctly if the combobox has a non-auto height. */ | |
| 251 height: 100% ! important; | |
| 252 box-sizing: border-box ! important; | |
| 253 | |
| 254 /* | |
| 255 Make sure to align properly with the display frame. Note that we | |
| 256 want the baseline of the combobox to match the baseline of the | |
| 257 display frame, so the dropmarker is what gets the vertical-align. | |
| 258 */ | |
| 259 vertical-align: top !important; | |
| 260 } | |
| 261 | |
| 262 select > button:active { | |
| 263 background-image: url("arrowd.gif") !important; | |
| 264 } | |
| 265 | |
| 266 select:empty { | |
| 267 width: 2.5em; | |
| 268 } | |
| 269 | |
| 270 *|*::-moz-display-comboboxcontrol-frame { | |
| 271 overflow: -moz-hidden-unscrollable; | |
| 272 /* This top/bottom padding plus the combobox top/bottom border need to | |
| 273 add up to the top/bottom borderpadding of text inputs and buttons */ | |
| 274 padding-top: 1px; | |
| 275 padding-bottom: 1px; | |
| 276 -moz-padding-start: 4px; | |
| 277 -moz-padding-end: 0; | |
| 278 color: inherit; | |
| 279 white-space: nowrap; | |
| 280 text-align: inherit; | |
| 281 -moz-user-select: none; | |
| 282 /* Make sure to size correctly if the combobox has a non-auto height. */ | |
| 283 height: 100% ! important; | |
| 284 box-sizing: border-box ! important; | |
| 285 line-height: -moz-block-height; | |
| 286 } | |
| 287 | |
| 288 option { | |
| 289 display: block; | |
| 290 float: none !important; | |
| 291 position: static !important; | |
| 292 min-height: 1em; | |
| 293 line-height: normal !important; | |
| 294 -moz-user-select: none; | |
| 295 text-indent: 0; | |
| 296 white-space: nowrap !important; | |
| 297 word-wrap: normal !important; | |
| 298 } | |
| 299 | |
| 300 select > option { | |
| 301 padding-top : 0; | |
| 302 padding-bottom: 0; | |
| 303 -moz-padding-start: 3px; | |
| 304 -moz-padding-end: 5px; | |
| 305 } | |
| 306 | |
| 307 option:checked { | |
| 308 background-color: -moz-html-cellhighlight !important; | |
| 309 color: -moz-html-cellhighlighttext !important; | |
| 310 } | |
| 311 | |
| 312 select:focus > option:checked, | |
| 313 select:focus > optgroup > option:checked { | |
| 314 background-color: Highlight ! important; | |
| 315 color: HighlightText ! important; | |
| 316 } | |
| 317 | |
| 318 optgroup { | |
| 319 display: block; | |
| 320 float: none !important; | |
| 321 position: static !important; | |
| 322 font: -moz-list; | |
| 323 line-height: normal !important; | |
| 324 font-style: italic; | |
| 325 font-weight: bold; | |
| 326 font-size: inherit; | |
| 327 -moz-user-select: none; | |
| 328 text-indent: 0; | |
| 329 white-space: nowrap !important; | |
| 330 word-wrap: normal !important; | |
| 331 } | |
| 332 | |
| 333 optgroup > option { | |
| 334 -moz-padding-start: 20px; | |
| 335 font-style: normal; | |
| 336 font-weight: normal; | |
| 337 } | |
| 338 | |
| 339 optgroup:before { | |
| 340 display: block; | |
| 341 content: attr(label); | |
| 342 } | |
| 343 | |
| 344 *|*::-moz-dropdown-list { | |
| 345 z-index: 2147483647; | |
| 346 background-color: inherit; | |
| 347 -moz-user-select: none; | |
| 348 position: static !important; | |
| 349 float: none !important; | |
| 350 | |
| 351 /* | |
| 352 * We can't change the padding here, because that would affect our | |
| 353 * intrinsic width, since we scroll. But at the same time, we want | |
| 354 * to make sure that our left border+padding matches the left | |
| 355 * border+padding of a combobox so that our scrollbar will line up | |
| 356 * with the dropmarker. So set our left border to 2px. | |
| 357 */ | |
| 358 border: 1px outset black !important; | |
| 359 border-left-width: 2px ! important; | |
| 360 } | |
| 361 | |
| 362 input:disabled, | |
| 363 textarea:disabled, | |
| 364 option:disabled, | |
| 365 optgroup:disabled, | |
| 366 select:disabled:disabled /* Need the pseudo-class twice to have the specificity | |
| 367 be at least the same as select[size][multiple] above */ | |
| 368 { | |
| 369 -moz-user-input: disabled; | |
| 370 color: GrayText; | |
| 371 background-color: ThreeDFace; | |
| 372 cursor: inherit; | |
| 373 } | |
| 374 | |
| 375 input:disabled, | |
| 376 textarea:disabled { | |
| 377 cursor: default; | |
| 378 } | |
| 379 | |
| 380 option:disabled, | |
| 381 optgroup:disabled { | |
| 382 background-color: transparent; | |
| 383 } | |
| 384 | |
| 385 /* hidden inputs */ | |
| 386 input[type="hidden"] { | |
| 387 -moz-appearance: none; | |
| 388 display: none !important; | |
| 389 padding: 0; | |
| 390 border: 0; | |
| 391 cursor: auto; | |
| 392 -moz-user-focus: ignore; | |
| 393 -moz-binding: none; | |
| 394 } | |
| 395 | |
| 396 /* image buttons */ | |
| 397 input[type="image"] { | |
| 398 -moz-appearance: none; | |
| 399 padding: 0; | |
| 400 border: none; | |
| 401 background-color: transparent; | |
| 402 font-family: sans-serif; | |
| 403 font-size: small; | |
| 404 cursor: pointer; | |
| 405 -moz-binding: none; | |
| 406 } | |
| 407 | |
| 408 input[type="image"]:disabled { | |
| 409 cursor: inherit; | |
| 410 } | |
| 411 | |
| 412 input[type="image"]:-moz-focusring { | |
| 413 /* Don't specify the outline-color, we should always use initial value. */ | |
| 414 outline: 1px dotted; | |
| 415 } | |
| 416 | |
| 417 /* file selector */ | |
| 418 input[type="file"] { | |
| 419 display: inline-block; | |
| 420 white-space: nowrap; | |
| 421 overflow: hidden; | |
| 422 overflow-clip-box: padding-box; | |
| 423 color: inherit; | |
| 424 | |
| 425 /* Revert rules which apply on all inputs. */ | |
| 426 -moz-appearance: none; | |
| 427 -moz-binding: none; | |
| 428 cursor: default; | |
| 429 | |
| 430 border: none; | |
| 431 background-color: transparent; | |
| 432 padding: 0; | |
| 433 } | |
| 434 | |
| 435 input[type="file"] > xul|label { | |
| 436 min-width: 12em; | |
| 437 -moz-padding-start: 5px; | |
| 438 | |
| 439 color: inherit; | |
| 440 font-size: inherit; | |
| 441 letter-spacing: inherit; | |
| 442 | |
| 443 /* | |
| 444 * Force the text to have LTR directionality. Otherwise filenames containing | |
| 445 * RTL characters will be reordered with chaotic results. | |
| 446 */ | |
| 447 direction: ltr !important; | |
| 448 } | |
| 449 | |
| 450 /* button part of file selector */ | |
| 451 input[type="file"] > button[type="button"] { | |
| 452 height: inherit; | |
| 453 font-size: inherit; | |
| 454 letter-spacing: inherit; | |
| 455 cursor: inherit; | |
| 456 } | |
| 457 | |
| 458 /* colored part of the color selector button */ | |
| 459 input[type="color"]:-moz-system-metric(color-picker-available)::-moz-color-swatch { | |
| 460 width: 100%; | |
| 461 height: 100%; | |
| 462 min-width: 3px; | |
| 463 min-height: 3px; | |
| 464 margin-left: auto; | |
| 465 margin-right: auto; | |
| 466 box-sizing: border-box; | |
| 467 border: 1px solid grey; | |
| 468 display: block; | |
| 469 } | |
| 470 | |
| 471 /* Try to make RTL <input type='file'> look nicer. */ | |
| 472 /* TODO: use text-align: match-parent when bug 645642 is fixed. */ | |
| 473 input[type="file"]:-moz-dir(rtl) > xul|label { | |
| 474 -moz-padding-start: 0px; | |
| 475 padding-right: 5px; | |
| 476 text-align: right; | |
| 477 } | |
| 478 | |
| 479 /* radio buttons */ | |
| 480 input[type="radio"] { | |
| 481 -moz-appearance: radio; | |
| 482 margin: 3px 3px 0px 5px; | |
| 483 border-radius: 100% !important; | |
| 484 } | |
| 485 | |
| 486 /* check boxes */ | |
| 487 input[type="checkbox"] { | |
| 488 -moz-appearance: checkbox; | |
| 489 margin: 3px 3px 3px 4px; | |
| 490 border-radius: 0 !important; | |
| 491 } | |
| 492 | |
| 493 /* common features of radio buttons and check boxes */ | |
| 494 | |
| 495 /* NOTE: The width, height, border-width, and padding here must all | |
| 496 add up the way nsFormControlFrame::GetIntrinsic(Width|Height) | |
| 497 expects them to, or they will not come out with total width equal | |
| 498 to total height on sites that set their 'width' or 'height' to 'auto'. | |
| 499 (Should we maybe set !important on width and height, then?) */ | |
| 500 input[type="radio"], | |
| 501 input[type="checkbox"] { | |
| 502 box-sizing: border-box; | |
| 503 width: 13px; | |
| 504 height: 13px; | |
| 505 cursor: default; | |
| 506 padding: 0 !important; | |
| 507 -moz-binding: none; | |
| 508 /* same colors as |input| rule, but |!important| this time. */ | |
| 509 background-color: -moz-Field ! important; | |
| 510 color: -moz-FieldText ! important; | |
| 511 border: 2px inset ThreeDFace ! important; | |
| 512 } | |
| 513 | |
| 514 input[type="radio"]:disabled, | |
| 515 input[type="radio"]:disabled:active, | |
| 516 input[type="radio"]:disabled:hover, | |
| 517 input[type="radio"]:disabled:hover:active, | |
| 518 input[type="checkbox"]:disabled, | |
| 519 input[type="checkbox"]:disabled:active, | |
| 520 input[type="checkbox"]:disabled:hover, | |
| 521 input[type="checkbox"]:disabled:hover:active { | |
| 522 padding: 1px; | |
| 523 border: 1px inset ThreeDShadow ! important; | |
| 524 /* same as above, but !important */ | |
| 525 color: GrayText ! important; | |
| 526 background-color: ThreeDFace ! important; | |
| 527 cursor: inherit; | |
| 528 } | |
| 529 | |
| 530 input[type="checkbox"]:-moz-focusring, | |
| 531 input[type="radio"]:-moz-focusring { | |
| 532 border-style: groove !important; | |
| 533 } | |
| 534 | |
| 535 input[type="checkbox"]:hover:active, | |
| 536 input[type="radio"]:hover:active { | |
| 537 background-color: ThreeDFace ! important; | |
| 538 border-style: inset !important; | |
| 539 } | |
| 540 | |
| 541 /* buttons */ | |
| 542 | |
| 543 /* Note: Values in nsNativeTheme IsWidgetStyled function | |
| 544 need to match button background/border values here */ | |
| 545 | |
| 546 /* Non text-related properties for buttons: these ones are shared with | |
| 547 input[type="color"] */ | |
| 548 button, | |
| 549 input[type="color"]:-moz-system-metric(color-picker-available), | |
| 550 input[type="reset"], | |
| 551 input[type="button"], | |
| 552 input[type="submit"] { | |
| 553 -moz-appearance: button; | |
| 554 /* The sum of border-top, border-bottom, padding-top, padding-bottom | |
| 555 must be the same here, for text inputs, and for <select>. For | |
| 556 buttons, make sure to include the -moz-focus-inner border/padding. */ | |
| 557 padding: 0px 6px 0px 6px; | |
| 558 border: 2px outset ButtonFace; | |
| 559 background-color: ButtonFace; | |
| 560 cursor: default; | |
| 561 box-sizing: border-box; | |
| 562 -moz-user-select: none; | |
| 563 -moz-binding: none; | |
| 564 } | |
| 565 | |
| 566 /* Text-related properties for buttons: these ones are not shared with | |
| 567 input[type="color"] */ | |
| 568 button, | |
| 569 input[type="reset"], | |
| 570 input[type="button"], | |
| 571 input[type="submit"] { | |
| 572 color: ButtonText; | |
| 573 font: -moz-button; | |
| 574 line-height: normal; | |
| 575 white-space: pre; | |
| 576 text-align: center; | |
| 577 text-shadow: none; | |
| 578 overflow-clip-box: padding-box; | |
| 579 } | |
| 580 | |
| 581 input[type="color"]:-moz-system-metric(color-picker-available) { | |
| 582 width: 64px; | |
| 583 height: 23px; | |
| 584 } | |
| 585 | |
| 586 button { | |
| 587 /* Buttons should lay out like "normal" html, mostly */ | |
| 588 white-space: inherit; | |
| 589 text-indent: 0; | |
| 590 /* But no text-decoration reaching inside, by default */ | |
| 591 display: inline-block; | |
| 592 } | |
| 593 | |
| 594 *|*::-moz-button-content { | |
| 595 display: block; | |
| 596 } | |
| 597 | |
| 598 button:hover, | |
| 599 input[type="color"]:-moz-system-metric(color-picker-available):hover, | |
| 600 input[type="reset"]:hover, | |
| 601 input[type="button"]:hover, | |
| 602 input[type="submit"]:hover { | |
| 603 background-color: -moz-buttonhoverface; | |
| 604 } | |
| 605 | |
| 606 button:hover, | |
| 607 input[type="reset"]:hover, | |
| 608 input[type="button"]:hover, | |
| 609 input[type="submit"]:hover { | |
| 610 color: -moz-buttonhovertext; | |
| 611 } | |
| 612 | |
| 613 button:active:hover, | |
| 614 input[type="color"]:-moz-system-metric(color-picker-available):active:hover, | |
| 615 input[type="reset"]:active:hover, | |
| 616 input[type="button"]:active:hover, | |
| 617 input[type="submit"]:active:hover { | |
| 618 padding: 0px 5px 0px 7px; | |
| 619 border-style: inset; | |
| 620 background-color: ButtonFace; | |
| 621 } | |
| 622 | |
| 623 button:active:hover, | |
| 624 input[type="reset"]:active:hover, | |
| 625 input[type="button"]:active:hover, | |
| 626 input[type="submit"]:active:hover { | |
| 627 color: ButtonText; | |
| 628 } | |
| 629 | |
| 630 button::-moz-focus-inner, | |
| 631 input[type="color"]:-moz-system-metric(color-picker-available)::-moz-focus-inner, | |
| 632 input[type="reset"]::-moz-focus-inner, | |
| 633 input[type="button"]::-moz-focus-inner, | |
| 634 input[type="submit"]::-moz-focus-inner, | |
| 635 input[type="file"] > button[type="button"]::-moz-focus-inner { | |
| 636 padding: 0px 2px 0px 2px; | |
| 637 border: 1px dotted transparent; | |
| 638 } | |
| 639 | |
| 640 button:-moz-focusring::-moz-focus-inner, | |
| 641 input[type="color"]:-moz-system-metric(color-picker-available):-moz-focusring::-moz-focus-inner, | |
| 642 input[type="reset"]:-moz-focusring::-moz-focus-inner, | |
| 643 input[type="button"]:-moz-focusring::-moz-focus-inner, | |
| 644 input[type="submit"]:-moz-focusring::-moz-focus-inner, | |
| 645 input[type="file"] > button[type="button"]:-moz-focusring::-moz-focus-inner { | |
| 646 border-color: ButtonText; | |
| 647 } | |
| 648 | |
| 649 button:disabled:active, button:disabled, | |
| 650 input[type="color"]:-moz-system-metric(color-picker-available):disabled:active, | |
| 651 input[type="color"]:-moz-system-metric(color-picker-available):disabled, | |
| 652 input[type="reset"]:disabled:active, | |
| 653 input[type="reset"]:disabled, | |
| 654 input[type="button"]:disabled:active, | |
| 655 input[type="button"]:disabled, | |
| 656 select:disabled > button, | |
| 657 select:disabled > button, | |
| 658 input[type="submit"]:disabled:active, | |
| 659 input[type="submit"]:disabled { | |
| 660 /* The sum of border-top, border-bottom, padding-top, padding-bottom | |
| 661 must be the same here and for text inputs */ | |
| 662 padding: 0px 6px 0px 6px; | |
| 663 border: 2px outset ButtonFace; | |
| 664 cursor: inherit; | |
| 665 } | |
| 666 | |
| 667 button:disabled:active, button:disabled, | |
| 668 input[type="reset"]:disabled:active, | |
| 669 input[type="reset"]:disabled, | |
| 670 input[type="button"]:disabled:active, | |
| 671 input[type="button"]:disabled, | |
| 672 select:disabled > button, | |
| 673 select:disabled > button, | |
| 674 input[type="submit"]:disabled:active, | |
| 675 input[type="submit"]:disabled { | |
| 676 color: GrayText; | |
| 677 } | |
| 678 | |
| 679 /* | |
| 680 * Make form controls inherit 'unicode-bidi' transparently as required by | |
| 681 * their various anonymous descendants and pseudo-elements: | |
| 682 * | |
| 683 * <textarea> and <input type="text">: | |
| 684 * inherit into the XULScroll frame with class 'anonymous-div' which is a | |
| 685 * child of the text control. | |
| 686 * | |
| 687 * Buttons (either <button>, <input type="submit">, <input type="button"> | |
| 688 * or <input type="reset">) | |
| 689 * inherit into the ':-moz-button-content' pseudo-element. | |
| 690 * | |
| 691 * <select>: | |
| 692 * inherit into the ':-moz-display-comboboxcontrol-frame' pseudo-element and | |
| 693 * the <optgroup>'s ':before' pseudo-element, which is where the label of | |
| 694 * the <optgroup> gets displayed. The <option>s don't use anonymous boxes, | |
| 695 * so they need no special rules. | |
| 696 */ | |
| 697 textarea > .anonymous-div, | |
| 698 input > .anonymous-div, | |
| 699 input::-moz-placeholder, | |
| 700 textarea::-moz-placeholder, | |
| 701 *|*::-moz-button-content, | |
| 702 *|*::-moz-display-comboboxcontrol-frame, | |
| 703 optgroup:before { | |
| 704 unicode-bidi: inherit; | |
| 705 text-overflow: inherit; | |
| 706 } | |
| 707 | |
| 708 /** | |
| 709 * Set default style for invalid elements. | |
| 710 */ | |
| 711 :not(output):-moz-ui-invalid { | |
| 712 box-shadow: 0 0 1.5px 1px red; | |
| 713 } | |
| 714 | |
| 715 :not(output):-moz-ui-invalid:-moz-focusring { | |
| 716 box-shadow: 0 0 2px 2px rgba(255,0,0,0.4); | |
| 717 } | |
| 718 | |
| 719 output:-moz-ui-invalid { | |
| 720 color: red; | |
| 721 } | |
| 722 | |
| 723 @media print { | |
| 724 input, textarea, select, button { | |
| 725 -moz-user-input: none !important; | |
| 726 } | |
| 727 | |
| 728 input[type="file"] { height: 2em; } | |
| 729 } | |
| 730 | |
| 731 progress { | |
| 732 -moz-appearance: progressbar; | |
| 733 display: inline-block; | |
| 734 vertical-align: -0.2em; | |
| 735 | |
| 736 /* Default style in case of there is -moz-appearance: none; */ | |
| 737 border: 2px solid; | |
| 738 /* #e6e6e6 is a light gray. */ | |
| 739 -moz-border-top-colors: ThreeDShadow #e6e6e6; | |
| 740 -moz-border-right-colors: ThreeDHighlight #e6e6e6; | |
| 741 -moz-border-bottom-colors: ThreeDHighlight #e6e6e6; | |
| 742 -moz-border-left-colors: ThreeDShadow #e6e6e6; | |
| 743 background-color: #e6e6e6; | |
| 744 } | |
| 745 | |
| 746 ::-moz-progress-bar { | |
| 747 /* Prevent styling that would change the type of frame we construct. */ | |
| 748 display: inline-block ! important; | |
| 749 float: none ! important; | |
| 750 position: static ! important; | |
| 751 overflow: visible ! important; | |
| 752 box-sizing: border-box ! important; | |
| 753 | |
| 754 -moz-appearance: progresschunk; | |
| 755 height: 100%; | |
| 756 width: 100%; | |
| 757 | |
| 758 /* Default style in case of there is -moz-appearance: none; */ | |
| 759 background-color: #0064b4; /* blue */ | |
| 760 } | |
| 761 | |
| 762 meter { | |
| 763 -moz-appearance: meterbar; | |
| 764 display: inline-block; | |
| 765 vertical-align: -0.2em; | |
| 766 | |
| 767 background: linear-gradient(#e6e6e6, #e6e6e6, #eeeeee 20%, #cccccc 45%, #cccccc 55%); | |
| 768 } | |
| 769 | |
| 770 ::-moz-meter-bar { | |
| 771 /* Block styles that would change the type of frame we construct. */ | |
| 772 display: inline-block ! important; | |
| 773 float: none ! important; | |
| 774 position: static ! important; | |
| 775 overflow: visible ! important; | |
| 776 | |
| 777 -moz-appearance: meterchunk; | |
| 778 height: 100%; | |
| 779 width: 100%; | |
| 780 } | |
| 781 | |
| 782 :-moz-meter-optimum::-moz-meter-bar { | |
| 783 /* green. */ | |
| 784 background: linear-gradient(#ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%); | |
| 785 } | |
| 786 :-moz-meter-sub-optimum::-moz-meter-bar { | |
| 787 /* orange. */ | |
| 788 background: linear-gradient(#fe7, #fe7, #ffc 20%, #db3 45%, #db3 55%); | |
| 789 } | |
| 790 :-moz-meter-sub-sub-optimum::-moz-meter-bar { | |
| 791 /* red. */ | |
| 792 background: linear-gradient(#f77, #f77, #fcc 20%, #d44 45%, #d44 55%); | |
| 793 } | |
| 794 | |
| 795 input[type=range] { | |
| 796 -moz-appearance: range; | |
| 797 display: inline-block; | |
| 798 width: 12em; | |
| 799 height: 1.3em; | |
| 800 margin: 0 0.7em; | |
| 801 /* Override some rules that apply on all input types: */ | |
| 802 cursor: default; | |
| 803 background: none; | |
| 804 border: none; | |
| 805 -moz-binding: none; /* we don't want any of platformHTMLBindings.xml#inputFields */ | |
| 806 /* Prevent nsFrame::HandlePress setting mouse capture to this element. */ | |
| 807 -moz-user-select: none ! important; | |
| 808 } | |
| 809 | |
| 810 input[type=range][orient=vertical] { | |
| 811 width: 1.3em; | |
| 812 height: 12em; | |
| 813 } | |
| 814 | |
| 815 /** | |
| 816 * Ideally we'd also require :-moz-focusring here, but that doesn't currently | |
| 817 * work. Instead we only use the -moz-focus-outer border style if | |
| 818 * NS_EVENT_STATE_FOCUSRING is set (the check is in | |
| 819 * nsRangeFrame::BuildDisplayList). | |
| 820 */ | |
| 821 input[type=range]::-moz-focus-outer { | |
| 822 border: 1px dotted black; | |
| 823 } | |
| 824 | |
| 825 /** | |
| 826 * Layout handles positioning of this pseudo-element specially (so that content | |
| 827 * authors can concentrate on styling the thumb without worrying about the | |
| 828 * logic to position it). Specifically the 'margin', 'top' and 'left' | |
| 829 * properties are ignored. | |
| 830 * | |
| 831 * If content authors want to have a vertical range, they will also need to | |
| 832 * set the width/height of this pseudo-element. | |
| 833 */ | |
| 834 input[type=range]::-moz-range-track { | |
| 835 /* Prevent styling that would change the type of frame we construct. */ | |
| 836 display: inline-block !important; | |
| 837 float: none !important; | |
| 838 position: static !important; | |
| 839 border: none; | |
| 840 border-top: solid 0.1em lightgrey; | |
| 841 border-bottom: solid 0.1em lightgrey; | |
| 842 background-color: grey; | |
| 843 width: 100%; | |
| 844 height: 0.2em; | |
| 845 /* Prevent nsFrame::HandlePress setting mouse capture to this element. */ | |
| 846 -moz-user-select: none ! important; | |
| 847 } | |
| 848 | |
| 849 input[type=range][orient=vertical]::-moz-range-track { | |
| 850 border-top: none; | |
| 851 border-bottom: none; | |
| 852 border-left: solid 0.1em lightgrey; | |
| 853 border-right: solid 0.1em lightgrey; | |
| 854 width: 0.2em; | |
| 855 height: 100%; | |
| 856 } | |
| 857 | |
| 858 /** | |
| 859 * Layout handles positioning of this pseudo-element specially (so that content | |
| 860 * authors can concentrate on styling this pseudo-element without worrying | |
| 861 * about the logic to position it). Specifically the 'margin', 'top' and 'left' | |
| 862 * properties are ignored. Additionally, if the range is horizontal, the width | |
| 863 * property is ignored, and if the range range is vertical, the height property | |
| 864 * is ignored. | |
| 865 */ | |
| 866 input[type=range]::-moz-range-progress { | |
| 867 /* Prevent styling that would change the type of frame we construct. */ | |
| 868 display: inline-block !important; | |
| 869 float: none !important; | |
| 870 position: static !important; | |
| 871 /* Since one of width/height will be ignored, this just sets the "other" | |
| 872 dimension. | |
| 873 */ | |
| 874 width: 0.2em; | |
| 875 height: 0.2em; | |
| 876 /* Prevent nsFrame::HandlePress setting mouse capture to this element. */ | |
| 877 -moz-user-select: none ! important; | |
| 878 } | |
| 879 | |
| 880 /** | |
| 881 * Layout handles positioning of this pseudo-element specially (so that content | |
| 882 * authors can concentrate on styling the thumb without worrying about the | |
| 883 * logic to position it). Specifically the 'margin', 'top' and 'left' | |
| 884 * properties are ignored. | |
| 885 */ | |
| 886 input[type=range]::-moz-range-thumb { | |
| 887 /* Native theming is atomic for range. Set -moz-appearance on the range | |
| 888 * to get rid of it. The thumb's -moz-appearance is fixed. | |
| 889 */ | |
| 890 -moz-appearance: range-thumb !important; | |
| 891 /* Prevent styling that would change the type of frame we construct. */ | |
| 892 display: inline-block !important; | |
| 893 float: none !important; | |
| 894 position: static !important; | |
| 895 width: 1em; | |
| 896 height: 1em; | |
| 897 border: 0.1em solid grey; | |
| 898 border-radius: 0.5em; | |
| 899 background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><linearGradient id='g' x2='0' y2='100%'><stop stop-color='%23ddd'/><stop offset='100%' stop-color='white'/></linearGradient><rect fill='url(%23g)' width='100%' height='100%'/></svg>"); | |
| 900 /* Prevent nsFrame::HandlePress setting mouse capture to this element. */ | |
| 901 -moz-user-select: none ! important; | |
| 902 } | |
| 903 | |
| 904 /* As a temporary workaround until bug 677302 the rule for input[type=number] | |
| 905 * has moved to number-control.css | |
| 906 */ | |
| 907 | |
| 908 input[type=number]::-moz-number-wrapper { | |
| 909 /* Prevent styling that would change the type of frame we construct. */ | |
| 910 display: flex; | |
| 911 float: none !important; | |
| 912 position: static !important; | |
| 913 height: 100%; | |
| 914 } | |
| 915 | |
| 916 input[type=number]::-moz-number-text { | |
| 917 -moz-appearance: none; | |
| 918 /* work around autofocus bug 939248 on initial load */ | |
| 919 -moz-user-modify: read-write; | |
| 920 /* This pseudo-element is also an 'input' element (nested inside and | |
| 921 * distinct from the <input type=number> element) so we need to prevent the | |
| 922 * explicit setting of 'text-align' by the general CSS rule for 'input' | |
| 923 * above. We want to inherit its value from its <input type=number> | |
| 924 * ancestor, not have that general CSS rule reset it. | |
| 925 */ | |
| 926 text-align: inherit; | |
| 927 flex: 1; | |
| 928 padding: 0; | |
| 929 border: 0; | |
| 930 margin: 0; | |
| 931 } | |
| 932 | |
| 933 input[type=number]::-moz-number-spin-box { | |
| 934 display: flex; | |
| 935 flex-direction: column; | |
| 936 %ifdef XP_WIN | |
| 937 /* The Window's Theme's spin buttons have a very narrow minimum width, so | |
| 938 * make it something reasonable: | |
| 939 */ | |
| 940 width: 16px; | |
| 941 %endif | |
| 942 height: 0; | |
| 943 align-self: center; | |
| 944 justify-content: center; | |
| 945 } | |
| 946 | |
| 947 input[type=number]::-moz-number-spin-up { | |
| 948 -moz-appearance: spinner-upbutton; | |
| 949 display: block; /* bug 926670 */ | |
| 950 flex: none; | |
| 951 cursor: default; | |
| 952 /* Style for when native theming is off: */ | |
| 953 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="5"><path d="M1,4 L3,0 5,4" fill="dimgrey"/></svg>'); | |
| 954 background-repeat: no-repeat; | |
| 955 background-position: center bottom; | |
| 956 border: 1px solid darkgray; | |
| 957 border-bottom: none; | |
| 958 border-top-left-radius: 4px; | |
| 959 border-top-right-radius: 4px; | |
| 960 } | |
| 961 | |
| 962 input[type=number]::-moz-number-spin-down { | |
| 963 -moz-appearance: spinner-downbutton; | |
| 964 display: block; /* bug 926670 */ | |
| 965 flex: none; | |
| 966 cursor: default; | |
| 967 /* Style for when native theming is off: */ | |
| 968 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="5"><path d="M1,1 L3,5 5,1" fill="dimgrey"/></svg>'); | |
| 969 background-repeat: no-repeat; | |
| 970 background-position: center top; | |
| 971 border: 1px solid darkgray; | |
| 972 border-top: none; | |
| 973 border-bottom-left-radius: 4px; | |
| 974 border-bottom-right-radius: 4px; | |
| 975 } | |
| 976 | |
| 977 input[type="number"] > div > div > div:hover { | |
| 978 /* give some indication of hover state for the up/down buttons */ | |
| 979 background-color: lightblue; | |
| 980 } |
