browser/metro/theme/browser.css

   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 %filter substitution
   6 %include defines.inc
   7
   8 %define forward_transition_length 200ms
   9 %define forward_spacing 50px
  10
  11 /* Tab/StartUI tray ======================================================== */
  12
  13 #tray {
  14   transition: transform @metro_animation_duration@ @metro_animation_easing@;
  15   transform: translateY(-@tabs_height@);
  16   width: 100%;
  17 }
  18
  19 #tray {
  20   position: fixed;
  21 }
  22
  23 #tray[expanded]:not([viewstate="snapped"]) {
  24   transform: none;
  25 }
  26
  27 /* Tabs -------------------------------------------------------------------- */
  28
  29 #tabs-container {
  30   background: @panel_dark_color@ @panel_dark_background@;
  31   padding: 0;
  32   -moz-padding-start: @metro_spacing_normal@;
  33   width: 100%;
  34 }
  35
  36 #tabs {
  37   -moz-padding-start: 0;
  38 }
  39
  40 #tabs .tabs-list {
  41   display: block;
  42   -moz-user-focus: ignore;
  43   padding: 0;
  44   background-color: transparent;
  45   margin: 0;
  46   overflow: auto;
  47 }
  48
  49 .tabs-scrollbox > .scrollbutton-up[collapsed],
  50 .tabs-scrollbox > .scrollbutton-down[collapsed],
  51 #tabs[input="imprecise"] > .tabs-scrollbox > .scrollbutton-up,
  52 #tabs[input="imprecise"] > .tabs-scrollbox > .scrollbutton-down {
  53   visibility: hidden !important;
  54   pointer-events: none;
  55 }
  56
  57 #tabs > .tabs-scrollbox > .scrollbutton-down:-moz-locale-dir(rtl),
  58 #tabs > .tabs-scrollbox > .scrollbutton-up {
  59   list-style-image: url("images/tab-arrows.png") !important;
  60   -moz-image-region: rect(15px 58px 63px 14px) !important;
  61   padding-right: 15px;
  62   width: @tabs_scrollarrow_width@;
  63 }
  64 #tabs > .tabs-scrollbox > .scrollbutton-down:hover:-moz-locale-dir(rtl),
  65 #tabs > .tabs-scrollbox > .scrollbutton-up:hover {
  66   -moz-image-region: rect(14px 102px 62px 58px) !important;
  67 }
  68 #tabs > .tabs-scrollbox > .scrollbutton-down:active:-moz-locale-dir(rtl),
  69 #tabs > .tabs-scrollbox > .scrollbutton-up:active {
  70   -moz-image-region: rect(14px 152px 62px 108px) !important;
  71 }
  72 #tabs > .tabs-scrollbox > .scrollbutton-down[disabled]:-moz-locale-dir(rtl),
  73 #tabs > .tabs-scrollbox > .scrollbutton-up[disabled] {
  74   -moz-image-region: rect(15px 196px 63px 152px) !important;
  75 }
  76
  77 #tabs > .tabs-scrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
  78 #tabs > .tabs-scrollbox > .scrollbutton-down {
  79   list-style-image: url("images/tab-arrows.png") !important;
  80   -moz-image-region: rect(73px 58px 121px 14px) !important;
  81   padding-left: 15px;
  82   width: @tabs_scrollarrow_width@;
  83 }
  84 #tabs > .tabs-scrollbox > .scrollbutton-up:hover:-moz-locale-dir(rtl),
  85 #tabs > .tabs-scrollbox > .scrollbutton-down:hover {
  86   -moz-image-region: rect(72px 102px 120px 58px) !important;
  87 }
  88 #tabs > .tabs-scrollbox > .scrollbutton-up:active:-moz-locale-dir(rtl),
  89 #tabs > .tabs-scrollbox > .scrollbutton-down:active {
  90   -moz-image-region: rect(72px 152px 120px 108px) !important;
  91 }
  92 #tabs > .tabs-scrollbox > .scrollbutton-up[disabled]:-moz-locale-dir(rtl),
  93 #tabs > .tabs-scrollbox > .scrollbutton-down[disabled] {
  94   -moz-image-region: rect(73px 196px 121px 152px) !important;
  95 }
  96
  97 .tabs-scrollbox > .scrollbutton-up:not([disabled]):not([collapsed]):-moz-locale-dir(rtl)::after {
  98   right: calc(@tabs_scrollarrow_width@ + @metro_spacing_normal@);
  99 }
 100
 101 .tabs-scrollbox > .scrollbutton-down:not([disabled]):not([collapsed]):-moz-locale-dir(rtl)::before {
 102   right: auto;
 103   left: calc(@tabs_scrollarrow_width@ + @newtab_button_width@);
 104 }
 105
 106 .tabs-scrollbox > .scrollbutton-up:not([disabled]):not([collapsed])::after {
 107   content: "";
 108   visibility: visible;
 109   display: block;
 110   background-color: rgb(90, 91, 95);
 111   position: absolute;
 112   top: 0;
 113   left: calc(@tabs_scrollarrow_width@ + @metro_spacing_normal@); /* .scrollbutton-up width + #tabs-container left padding */
 114   width: 1px;
 115   height: @tabs_height@;
 116 }
 117
 118 .tabs-scrollbox > .scrollbutton-down:not([disabled]):not([collapsed])::before {
 119   content: "";
 120   visibility: visible;
 121   display: block;
 122   background-color: rgb(90, 91, 95);
 123   position: absolute;
 124   top: 0;
 125   right: calc(@tabs_scrollarrow_width@ + @newtab_button_width@); /* .scrollbutton-down width + #newtab-button width */
 126   width: 1px;
 127   height: @tabs_height@;
 128 }
 129
 130 /* Hack for bug 965550 */
 131 .tabs-scrollbox > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
 132   -moz-padding-start: calc(2 * @tabs_scrollarrow_width@);
 133   -moz-margin-start: calc(-2 * @tabs_scrollarrow_width@);
 134 }
 135
 136 #tabs-container[viewstate="snapped"] {
 137   visibility: hidden;
 138 }
 139
 140 @-moz-keyframes open-documenttab {
 141   0% {
 142     opacity: 0;
 143     transform: scale(0, 0);
 144   }
 145
 146   100% {
 147     opacity: 1;
 148     transform: scale(1, 1);
 149   }
 150 }
 151
 152 @-moz-keyframes close-documenttab {
 153   0% {
 154     opacity: 1;
 155     transform: scale(1, 1);
 156   }
 157
 158   100% {
 159     opacity: 0;
 160     transform: scale(0, 0);
 161   }
 162 }
 163
 164 .documenttab-container {
 165   animation: open-documenttab 0.4s ease-out;
 166 }
 167
 168 documenttab[closing] > .documenttab-container {
 169   animation: close-documenttab 0.4s ease-out;
 170   animation-fill-mode: forwards;
 171 }
 172
 173 .documenttab-favicon {
 174   visibility: collapse;
 175 }
 176
 177 .documenttab-thumbnail {
 178   margin: @metro_spacing_normal@ @metro_spacing_snormal@;
 179   background: white none center top no-repeat;
 180   background-size: cover;
 181   min-width: @thumbnail_width@;
 182   width: @thumbnail_width@;
 183   height: @thumbnail_height@;
 184 }
 185 #tray:not([expanded]) .documenttab-thumbnail {
 186   background-image: none!important;
 187 }
 188
 189 /* TODO: Decide how and where to display private tabs.
 190  * For now, display them in the main tab strip but hide the thumbnail. */
 191 documenttab[private] .documenttab-thumbnail {
 192   background-color: purple;
 193 }
 194
 195 .documenttab-title {
 196   margin: @metro_spacing_normal@ @metro_spacing_snormal@;
 197   margin-top: 0;
 198   font-size: @metro_font_normal@;
 199   width: @thumbnail_width@;
 200   padding: 4px @metro_spacing_snormal@ 8px;
 201
 202   background: #000;
 203   opacity: 0.95;
 204   color: #fff;
 205   box-shadow: 0 0 @metro_spacing_snormal@ rgba(0, 0, 0, 0.25);
 206 }
 207
 208 .documenttab-crop {
 209   background: transparent url("chrome://browser/skin/images/tab-crop.png") 50% 50% no-repeat;
 210 }
 211
 212 .documenttab-selection {
 213   background: transparent -moz-image-rect(url("chrome://browser/skin/images/tab-overlay.png"), 0%, 100%, 50%, 0%) 50% 50% no-repeat;
 214 }
 215
 216 documenttab[selected] .documenttab-selection {
 217   background: transparent -moz-image-rect(url("chrome://browser/skin/images/tab-overlay.png"), 50%, 100%, 100%, 0%) 50% 50% no-repeat;
 218 }
 219
 220 .documenttab-crop:-moz-locale-dir(rtl),
 221 .documenttab-selection:-moz-locale-dir(rtl),
 222 documenttab[selected] .documenttab-selection:-moz-locale-dir(rtl) {
 223   transform: scaleX(-1);
 224 }
 225
 226 .documenttab-close {
 227   background: none !important;
 228   padding: @metro_spacing_small@ !important;
 229   margin-top: @metro_spacing_snormal@;
 230   -moz-margin-end: @metro_spacing_xsmall@;
 231   border-color: transparent !important;
 232   list-style-image: url("chrome://browser/skin/images/closetab-default.png");
 233 }
 234
 235 .documenttab-close > .button-box > .button-text {
 236   display: none;
 237 }
 238
 239 #tabs-controls {
 240   -moz-box-align: start;
 241   -moz-box-orient: vertical;
 242 }
 243
 244 #newtab-button {
 245   list-style-image: url(chrome://browser/skin/images/newtab-default.png);
 246
 247   /* Add some extra padding for a larger target */
 248   padding: 18px 20px 30px 20px;
 249   width: @newtab_button_width@;
 250 }
 251
 252 /* Start UI ----------------------------------------------------------------- */
 253
 254 #urlbar-autocomplete[viewstate="snapped"],
 255 #urlbar-autocomplete[viewstate="portrait"]{
 256   -moz-box-orient: vertical;
 257 }
 258
 259 #autocomplete-overlay {
 260   display: none;
 261   background-color: black;
 262   opacity: .3;
 263   position: fixed;
 264   top: 0;
 265   left: 0;
 266   right: 0;
 267   bottom: 0;
 268 }
 269
 270 #stack[autocomplete] > #page > #content-viewport > #autocomplete-overlay {
 271   display: -moz-box;
 272 }
 273
 274 /* Browser Content Areas ==================================================== */
 275
 276 /* a 'margin-top' is applied dynamically in ContentAreaObserver */
 277 #browsers {
 278   background: white;
 279   transition-property: margin-top;
 280   transition-duration: .3s;
 281   transition-timing-function: ease-in-out;
 282 }
 283 #browsers browser {
 284   /* unset padding-bottom immediately */
 285   transition-duration: 0s;
 286   transition-delay:    0s;
 287   transition-property: padding-bottom;
 288 }
 289 /* Selection overlay and monocles */
 290 #page,
 291 .selection-overlay {
 292   -moz-stack-sizing: ignore;
 293 }
 294
 295 .selection-overlay {
 296   pointer-events: none;
 297 }
 298
 299 .selection-overlay:-moz-focusring {
 300   outline: 0 !important;
 301 }
 302
 303 .selection-overlay-hidden {
 304   display: none;
 305 }
 306
 307 .selectionhandle {
 308   background-image: url("chrome://browser/skin/images/selection-monocle.png");
 309   background-repeat: no-repeat;
 310   background-size: 18px 18px;
 311   padding: 0px;
 312   margin-top: -19px;
 313   margin-left: -9px;
 314   pointer-events: auto;
 315 }
 316
 317 @media (min-resolution: @min_res_140pc@) {
 318   /* Load 140% image when scaled by 140% */
 319   .selectionhandle {
 320     background-image: url("chrome://browser/skin/images/selection-monocle@1.4x.png");
 321   }
 322 }
 323
 324 @media (min-resolution: @min_res_180pc@) {
 325   /* Load 180% image when scaled by 180% */
 326   .selectionhandle {
 327     background-image: url("chrome://browser/skin/images/selection-monocle@1.8x.png");
 328   }
 329 }
 330
 331 /* content scrollbars */
 332 .scroller {
 333   opacity: 0;
 334   background-color: rgba(0, 0, 0, 0.4) !important;
 335   -moz-border-top-colors: none !important;
 336   -moz-border-bottom-colors: none !important;
 337   -moz-border-right-colors: none !important;
 338   -moz-border-left-colors: none !important;
 339   border-radius: @border_radius_tiny@;
 340   border: @border_width_tiny@ solid rgba(255, 255, 255, 0.4) !important;
 341 }
 342
 343 .scroller[panning] {
 344   opacity: 1;
 345 }
 346
 347 .scroller[orient="vertical"] {
 348   min-width: @scroller_thickness@;
 349   width: @scroller_thickness@;
 350   min-height: @scroller_minimum@;
 351 }
 352
 353 .scroller[orient="horizontal"] {
 354   min-height: @scroller_thickness@;
 355   height: @scroller_thickness@;
 356   min-width: @scroller_minimum@;
 357 }
 358
 359 /* overlay buttons */
 360
 361 .overlay-button {
 362   position: fixed;
 363   top: 50%;
 364   margin-top: -65px;
 365   width: 118px;
 366   height: 118px;
 367   background-color: hsla(210,30%,10%,.2);
 368   background-size: 60px;
 369   background-repeat: no-repeat;
 370   background-origin: padding-box;
 371   background-clip: padding-box;
 372   border: 6px solid hsla(0,0%,100%,.7);
 373   border-radius: 50%;
 374   box-shadow: 0 0 0 1px hsla(0,0%,0%,.04),
 375               0 0 9px 0 hsla(0,0%,0%,.1);
 376   transition-property: left, right, transform, background-position,
 377                        background-color, background-size, border-color,
 378                        visibility, box-shadow, top;
 379   transition-duration: 550ms;
 380   transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
 381 }
 382
 383 #overlay-back {
 384   background-image: url(chrome://browser/skin/images/overlay-back.png);
 385 }
 386
 387 #overlay-plus {
 388   background-image: url(chrome://browser/skin/images/overlay-plus.png);
 389 }
 390
 391 @media (min-resolution: @min_res_140pc@) {
 392   #overlay-back {
 393     background-image: url(chrome://browser/skin/images/overlay-back@1.4x.png);
 394   }
 395
 396   #overlay-plus {
 397     background-image: url(chrome://browser/skin/images/overlay-plus@1.4x.png);
 398   }
 399 }
 400
 401 @media (min-resolution: @min_res_180pc@) {
 402   #overlay-back {
 403     background-image: url(chrome://browser/skin/images/overlay-back@1.8x.png);
 404   }
 405
 406   #overlay-plus {
 407     background-image: url(chrome://browser/skin/images/overlay-plus@1.8x.png);
 408   }
 409 }
 410
 411 #overlay-back:-moz-locale-dir(ltr),
 412 #overlay-plus:-moz-locale-dir(rtl) {
 413   left: -70px;
 414   background-position: right 6px center;
 415 }
 416
 417 #overlay-plus:-moz-locale-dir(ltr) {
 418   right: -70px;
 419   background-position: left 6px center;
 420 }
 421
 422 #stack[viewstate="snapped"] > .overlay-button,
 423 #stack[keyboardVisible] > .overlay-button,
 424 #stack[autocomplete] > .overlay-button,
 425 #stack[fullscreen] > .overlay-button,
 426 #appbar[visible] ~ .overlay-button,
 427 .overlay-button[disabled] {
 428   box-shadow: none;
 429   visibility: collapse;
 430 }
 431
 432 #stack[keyboardVisible] > #overlay-back:-moz-locale-dir(ltr),
 433 #stack[keyboardVisible] > #overlay-plus:-moz-locale-dir(rtl),
 434 #stack[autocomplete] > #overlay-back:-moz-locale-dir(ltr),
 435 #stack[autocomplete] > #overlay-plus:-moz-locale-dir(rtl),
 436 #stack[fullscreen] > #overlay-back:-moz-locale-dir(ltr),
 437 #stack[fullscreen] > #overlay-plus:-moz-locale-dir(rtl),
 438 #appbar[visible] ~ #overlay-back:-moz-locale-dir(ltr),
 439 #appbar[visible] ~ #overlay-plus:-moz-locale-dir(rtl),
 440 #overlay-back[disabled]:-moz-locale-dir(ltr),
 441 #overlay-plus[disabled]:-moz-locale-dir(rtl) {
 442   transform: translateX(-60px);
 443 }
 444
 445 #stack[keyboardVisible] > #overlay-plus:-moz-locale-dir(ltr),
 446 #stack[keyboardVisible] > #overlay-back:-moz-locale-dir(rtl),
 447 #stack[autocomplete] > #overlay-plus:-moz-locale-dir(ltr),
 448 #stack[autocomplete] > #overlay-back:-moz-locale-dir(rtl),
 449 #stack[fullscreen] > #overlay-plus:-moz-locale-dir(ltr),
 450 #stack[fullscreen] > #overlay-back:-moz-locale-dir(rtl),
 451 #appbar[visible] ~ #overlay-plus:-moz-locale-dir(ltr),
 452 #appbar[visible] ~ #overlay-back:-moz-locale-dir(rtl),
 453 #overlay-plus[disabled]:-moz-locale-dir(ltr),
 454 #overlay-back[disabled]:-moz-locale-dir(rtl) {
 455   transform: translateX(60px);
 456 }
 457
 458 .overlay-button:hover {
 459   background-color: hsla(210,30%,10%,.4);
 460   background-size: 90px;
 461   border-color: hsla(0,0%,100%,.9);
 462 }
 463
 464 #overlay-back:-moz-locale-dir(ltr):hover,
 465 #overlay-plus:-moz-locale-dir(rtl):hover {
 466   background-position: right 12px center;
 467   transform: translateX(40px) scale(1.2);
 468 }
 469
 470 #overlay-plus:-moz-locale-dir(ltr):hover {
 471   background-position: left 12px center;
 472   transform: translateX(-40px) scale(1.2);
 473 }
 474
 475 #overlay-back:-moz-locale-dir(rtl):hover {
 476   transform: translateX(-40px) scale(1.2) scaleX(-1);
 477 }
 478
 479 #overlay-back:-moz-locale-dir(rtl) {
 480   transform: scaleX(-1);
 481   right: -70px;
 482   background-position: right 9px center;
 483 }
 484
 485 #overlay-back[mousedrag],
 486 #overlay-plus[mousedrag] {
 487   transition-property: left, right, transform, background-position,
 488                        background-color, background-size, border-color,
 489                        visibility, box-shadow;
 490 }
 491
 492 /* Navigation bar ========================================================== */
 493
 494 /* Most appbars are hidden by default, but we want to keep #navbar visible so
 495  * we can show the progress bar at all times.  Instead, we hide only the
 496  * toolbar portion of the navbar. */
 497 #navbar {
 498   visibility: visible;
 499 }
 500 #navbar:not([hiding]):not([visible]) > #toolbar-overlay {
 501   visibility: hidden;
 502 }
 503
 504 #content-viewport[navbar="visible"] .active-tab-notificationbox:not([count="0"]):not([notificationsVisible="false"]) {
 505   padding-bottom: @toolbar_height@;
 506 }
 507
 508
 509 /* Progress meter ---------------------------------------------------------- */
 510
 511 #progress-container {
 512   display: block;
 513   position: absolute;
 514   top: -@progress_height@;
 515   height: @progress_height@;
 516   width: 100%;
 517   background-color: hsla(210,5%,80%,1);
 518   box-shadow: 0 1px 0 hsla(210,5%,50%,.1) inset;
 519   -moz-user-focus: ignore;
 520 }
 521 #progress-container[startpage] {
 522   visibility: collapse;
 523 }
 524
 525 #progress-control {
 526   display: block;
 527   height: @progress_height@;
 528   background-image: -moz-linear-gradient(left, hsla(200,100%,83%,.5),
 529                                          hsla(200,100%,83%,0)),
 530                     -moz-linear-gradient(top, #1ab2ff, #0091ff);
 531   border-right: 1px solid #0082e5;
 532   transition: width .3s ease-in;
 533   -moz-user-focus: ignore;
 534 }
 535
 536 #progress-control:-moz-dir(rtl) {
 537   transform: scaleX(-1);
 538 }
 539
 540 #progress-control[fade] {
 541   opacity: 0;
 542   transition: width .3s ease-in, .5s opacity ease-in;
 543 }
 544
 545 /* Toolbar ----------------------------------------------------------------- */
 546
 547 #toolbar-overlay {
 548   background-color: @panel_light_color@;
 549 }
 550
 551 #urlbar-autocomplete {
 552   padding-top: 0;
 553 }
 554
 555 #toolbar {
 556   padding: 0 @toolbar_horizontal_padding@;
 557 }
 558
 559 #toolbar[viewstate="snapped"] {
 560   padding: 0 @toolbar_snapped_horizontal_padding@;
 561 }
 562
 563 #toolbar[viewstate="snapped"] > toolbarbutton {
 564   margin: 0 @toolbar_snapped_horizontal_spacing@;
 565 }
 566
 567 /* Combined back/forward buttons */
 568
 569 #back-button {
 570   list-style-image: url(chrome://browser/skin/images/navbar-back.png);
 571   position: relative;
 572   z-index: 1;
 573   transition: opacity @forward_transition_length@ ease-out;
 574 }
 575
 576 #back-button:-moz-locale-dir(rtl),
 577 #forward-button:-moz-locale-dir(rtl) {
 578   transform: scaleX(-1);
 579 }
 580
 581 #back-button[disabled] {
 582   visibility: visible;
 583   opacity: 0.5;
 584 }
 585
 586 #forward-button {
 587   list-style-image: url(chrome://browser/skin/images/navbar-forward.png);
 588   transition: margin @forward_transition_length@ ease-out,
 589               visibility @forward_transition_length@ ease-out,
 590               opacity @forward_transition_length@ ease-out;
 591 }
 592
 593 #forward-button[disabled] {
 594   -moz-margin-start: -@forward_spacing@ !important;
 595   visibility: hidden;
 596   opacity: 0;
 597   pointer-events: none;
 598 }
 599
 600 @media (min-resolution: @min_res_140pc@) {
 601   #back-button {
 602     list-style-image: url(chrome://browser/skin/images/navbar-back@1.4x.png);
 603   }
 604
 605   #forward-button {
 606     list-style-image: url(chrome://browser/skin/images/navbar-forward@1.4x.png);
 607   }
 608 }
 609
 610 @media (min-resolution: @min_res_180pc@) {
 611   #back-button {
 612     list-style-image: url(chrome://browser/skin/images/navbar-back@1.8x.png);
 613   }
 614
 615   #forward-button {
 616     list-style-image: url(chrome://browser/skin/images/navbar-forward@1.8x.png);
 617   }
 618 }
 619
 620 /* URL bar */
 621 #urlbar {
 622   border: @metro_border_thick@ solid @urlbar_border_color@;
 623   margin: 0 @toolbar_horizontal_spacing@;
 624   padding: 0;
 625   background-color: @field_background_color@;
 626   overflow: hidden;
 627 }
 628
 629 #urlbar[editing] {
 630   border-color: @metro_orange@;
 631 }
 632
 633 /* Identity widget */
 634 #identity-icon {
 635   margin: 0;
 636   padding: 0 @metro_spacing_snormal@;
 637   list-style-image: url("chrome://browser/skin/images/identity-icons-generic.png");
 638 }
 639
 640 #identity-box.verifiedDomain > #identity-icon {
 641   list-style-image: url("chrome://browser/skin/images/identity-icons-https.png");
 642 }
 643
 644 #identity-box.verifiedIdentity > #identity-icon {
 645   list-style-image: url("chrome://browser/skin/images/identity-icons-https-ev.png");
 646 }
 647
 648 #toolbar[startpage] > #urlbar:not([autocomplete]) > #identity-box > #identity-icon {
 649   list-style-image: url("chrome://browser/skin/images/icons-identity-firefox.png");
 650 }
 651
 652 #urlbar[autocomplete] > #identity-box > #identity-icon {
 653   list-style-image: url("chrome://browser/skin/images/icon-autocomplete-search.png");
 654 }
 655
 656 /* Main URL textbox */
 657 #urlbar-edit {
 658   margin: 0 !important;
 659   min-height: @urlbar_edit_height@;
 660   -moz-appearance: none !important;
 661   border-radius: 0;
 662   border: 0 none !important;
 663   padding: 0 !important;
 664 }
 665
 666 #urlbar-edit > hbox > .textbox-input-box > .textbox-input:invalid {
 667   /* Hide error glow around the address bar that shows by default
 668    * when URLs are made invalid by trmming. */
 669   box-shadow: none !important;
 670 }
 671
 672 /* Combined stop-reload button */
 673 .urlbar-button {
 674   margin: 0;
 675   -moz-image-region: rect(0px, 30px, 30px, 0px);
 676 }
 677
 678 .urlbar-button:hover:not(:active) {
 679   -moz-image-region: rect(0px, 60px, 30px, 30px);
 680   background-color: #dedfdf;
 681 }
 682
 683 .urlbar-button:active {
 684   -moz-image-region: rect(0px, 90px, 30px, 60px);
 685   background-color: #6d7073;
 686 }
 687
 688 .urlbar-button  > .toolbarbutton-icon {
 689   width: 30px;
 690   height: 30px;
 691 }
 692
 693 #go-button {
 694   list-style-image: url(chrome://browser/skin/images/urlbar-go.png)
 695 }
 696
 697 #reload-button {
 698   list-style-image: url(chrome://browser/skin/images/urlbar-reload.png);
 699 }
 700
 701 #stop-button {
 702   list-style-image: url(chrome://browser/skin/images/urlbar-stop.png);
 703 }
 704
 705 @media (min-resolution: @min_res_140pc@) {
 706   .urlbar-button {
 707     -moz-image-region: rect(0px, 42px, 42px, 0px);
 708   }
 709
 710   .urlbar-button:hover:not(:active) {
 711     -moz-image-region: rect(0px, 84px, 42px, 42px);
 712   }
 713
 714   .urlbar-button:active {
 715     -moz-image-region: rect(0px, 126px, 42px, 84px);
 716   }
 717
 718   #go-button {
 719     list-style-image: url(chrome://browser/skin/images/urlbar-go@1.4x.png)
 720   }
 721
 722   #reload-button {
 723     list-style-image: url(chrome://browser/skin/images/urlbar-reload@1.4x.png);
 724   }
 725
 726   #stop-button {
 727     list-style-image: url(chrome://browser/skin/images/urlbar-stop@1.4x.png);
 728   }
 729
 730   #toolbar[startpage] > #urlbar:not([autocomplete]) > #identity-box > #identity-icon {
 731     list-style-image: url("chrome://browser/skin/images/icons-identity-firefox@1.4x.png");
 732   }
 733
 734   #urlbar[autocomplete] > #identity-box > #identity-icon {
 735     list-style-image: url("chrome://browser/skin/images/icon-autocomplete-search@1.4x.png");
 736   }
 737 }
 738
 739 @media (min-resolution: @min_res_180pc@) {
 740   .urlbar-button {
 741     -moz-image-region: rect(0px, 54px, 54px, 0px);
 742   }
 743
 744   .urlbar-button:hover:not(:active) {
 745     -moz-image-region: rect(0px, 108px, 54px, 54px);
 746   }
 747
 748   .urlbar-button:active {
 749     -moz-image-region: rect(0px, 162px, 54px, 108px);
 750   }
 751
 752   #go-button {
 753     list-style-image: url(chrome://browser/skin/images/urlbar-go@1.8x.png)
 754   }
 755
 756   #reload-button {
 757     list-style-image: url(chrome://browser/skin/images/urlbar-reload@1.8x.png);
 758   }
 759
 760   #stop-button {
 761     list-style-image: url(chrome://browser/skin/images/urlbar-stop@1.8x.png);
 762   }
 763
 764   #toolbar[startpage] > #urlbar:not([autocomplete]) > #identity-box > #identity-icon {
 765     list-style-image: url("chrome://browser/skin/images/icons-identity-firefox@1.8x.png");
 766   }
 767
 768   #urlbar[autocomplete] > #identity-box > #identity-icon {
 769     list-style-image: url("chrome://browser/skin/images/icon-autocomplete-search@1.8x.png");
 770   }
 771 }
 772
 773 /* navbar edit button: one button out of three - when editing: go, when !editing,
 774    loading: stop, when !editing, !loading: reload */
 775
 776 #go-button, #reload-button, #stop-button  {
 777   visibility: collapse;
 778 }
 779
 780 #urlbar[editing] > #go-button,
 781 #urlbar:not([editing])[loading] > #stop-button,
 782 #urlbar:not([editing]):not([loading]) > #reload-button {
 783   visibility: visible;
 784 }
 785
 786 /* Contextual toolbar controls */
 787
 788 #toolbar-context-autocomplete,
 789 .hide-on-start,
 790 #toolbar-context-page {
 791   transition-property: opacity, visibility;
 792   transition-duration: @forward_transition_length@;
 793   transition-timing-function: @metro_animation_easing@;
 794 }
 795
 796 #toolbar-contextual:not([autocomplete]) #toolbar-context-autocomplete,
 797 #toolbar-contextual[startpage] .hide-on-start,
 798 #toolbar-contextual[autocomplete] #toolbar-context-page {
 799   opacity: 0;
 800   visibility: hidden;
 801   pointer-events: none;
 802 }
 803
 804 #toolbar[viewstate="snapped"] #toolbar-contextual {
 805   visibility: collapse;
 806 }
 807
 808 #download-progress:not([progress]) {
 809   visibility: collapse;
 810 }
 811
 812 #download-progress {
 813   list-style-image: url(chrome://browser/skin/images/navbar-download.png);
 814 }
 815
 816 #download-progress[progress="100"] {
 817   list-style-image: url(chrome://browser/skin/images/navbar-download-finished.png);
 818 }
 819
 820 #pin-button {
 821   list-style-image: url(chrome://browser/skin/images/navbar-pin.png);
 822 }
 823
 824 #star-button {
 825   list-style-image: url(chrome://browser/skin/images/navbar-star.png);
 826 }
 827
 828 #menu-button {
 829   list-style-image: url(chrome://browser/skin/images/navbar-menu.png);
 830 }
 831
 832 #close-button {
 833   list-style-image: url(chrome://browser/skin/images/navbar-close.png);
 834 }
 835
 836 @media (min-resolution: @min_res_140pc@) {
 837   #download-progress {
 838     list-style-image: url(chrome://browser/skin/images/navbar-download@1.4x.png);
 839   }
 840
 841   #download-progress[progress="100"] {
 842     list-style-image: url(chrome://browser/skin/images/navbar-download-finished@1.4x.png);
 843   }
 844
 845   #pin-button {
 846     list-style-image: url(chrome://browser/skin/images/navbar-pin@1.4x.png);
 847   }
 848
 849   #star-button {
 850     list-style-image: url(chrome://browser/skin/images/navbar-star@1.4x.png);
 851   }
 852
 853   #menu-button {
 854     list-style-image: url(chrome://browser/skin/images/navbar-menu@1.4x.png);
 855   }
 856
 857   #close-button {
 858     list-style-image: url(chrome://browser/skin/images/navbar-close@1.4x.png);
 859   }
 860 }
 861
 862 @media (min-resolution: @min_res_180pc@) {
 863   #download-progress {
 864     list-style-image: url(chrome://browser/skin/images/navbar-download@1.8x.png);
 865   }
 866
 867   #download-progress[progress="100"] {
 868     list-style-image: url(chrome://browser/skin/images/navbar-download-finished@1.8x.png);
 869   }
 870
 871   #pin-button {
 872     list-style-image: url(chrome://browser/skin/images/navbar-pin@1.8x.png);
 873   }
 874
 875   #star-button {
 876     list-style-image: url(chrome://browser/skin/images/navbar-star@1.8x.png);
 877   }
 878
 879   #menu-button {
 880     list-style-image: url(chrome://browser/skin/images/navbar-menu@1.8x.png);
 881   }
 882
 883   #close-button {
 884     list-style-image: url(chrome://browser/skin/images/navbar-close@1.8x.png);
 885   }
 886 }
 887
 888 /* Panel UI ================================================================ */
 889
 890 #panel-container {
 891   padding: 60px 40px;
 892 }
 893
 894 #panel-container[viewstate="snapped"] .canSnapTiles .richgrid-item-content {
 895   -moz-box-orient: horizontal;
 896 }
 897
 898 #panel-close-button {
 899   -moz-margin-end: 40px;
 900   list-style-image: url(chrome://browser/skin/images/navbar-back.png);
 901   -moz-box-pack: center;
 902 }
 903
 904 #panel-close-button:-moz-locale-dir(rtl) {
 905   transform: scaleX(-1);
 906 }
 907
 908 @media (min-resolution: @min_res_140pc@) {
 909   #panel-close-button {
 910     list-style-image: url(chrome://browser/skin/images/navbar-back@1.4x.png);
 911   }
 912 }
 913
 914 @media (min-resolution: @min_res_180pc@) {
 915   #panel-close-button {
 916     list-style-image: url(chrome://browser/skin/images/navbar-back@1.8x.png);
 917   }
 918 }
 919
 920 #panel-items {
 921   padding-top: 20px;
 922   -moz-padding-start: 88px;
 923 }
 924
 925 #panel-container[viewstate="snapped"] #panel-items {
 926   padding-left: 0px;
 927 }
 928
 929 /* Console Section - Panel UI ---------------------------------------------- */
 930
 931 #console-filter-warnings,
 932 #console-filter-messages {
 933   visibility: visible;
 934 }
 935
 936 @media (max-width: 499px) {
 937   #console-filter-warnings,
 938   #console-filter-messages {
 939     visibility: collapse;
 940   }
 941 }
 942
 943 .console-error-msg,
 944 .console-msg-text {
 945   white-space: pre-wrap;
 946 }
 947
 948 /* Find bar ================================================================ */
 949
 950 #findbar {
 951   background-color: @metro_orange@;
 952   padding: 0;
 953 }
 954
 955 #findbar > toolbar {
 956   min-height: @findbar_height@ !important;
 957 }
 958
 959 #findbar-textbox {
 960   border: none !important;
 961   width: 20em;
 962 }
 963
 964 /* Override the default box ordering and make the find textbox appear to the
 965    right of the icon */
 966 #findbar-textbox input {
 967   -moz-box-ordinal-group: 2
 968 }
 969
 970 #findbar-textbox[status="1"] { /* Ci.nsITypeAheadFind.FIND_NOTFOUND */
 971   background: rgb(255,200,200);
 972 }
 973
 974 #findbar-textbox:hover:active {
 975   background: #8db8d8;
 976 }
 977
 978 .textbox-search-icon {
 979   list-style-image: url("chrome://browser/skin/images/search-glass-30.png");
 980   -moz-image-region: auto;
 981 }
 982
 983 #findbar-previous-button {
 984   -moz-image-region: rect(0px, 400px, 40px, 360px);
 985 }
 986
 987 #findbar-previous-button:hover:not(:active) {
 988   -moz-image-region: rect(40px, 400px, 80px, 360px);
 989 }
 990
 991 #findbar-previous-button:active {
 992   -moz-image-region: rect(80px, 400px, 120px, 360px);
 993 }
 994
 995 #findbar-next-button {
 996   -moz-image-region: rect(0px, 440px, 40px, 400px);
 997 }
 998
 999 #findbar-next-button:hover:not(:active) {
1000   -moz-image-region: rect(40px, 440px, 80px, 400px);
1001 }
1002
1003 #findbar-next-button:active {
1004   -moz-image-region: rect(80px, 440px, 120px, 400px);
1005 }
1006
1007 #findbar-close-button {
1008   -moz-image-region: rect(0px, 480px, 40px, 440px);
1009 }
1010
1011 #findbar-close-button:hover:not(:active) {
1012   -moz-image-region: rect(40px, 480px, 80px, 440px);
1013 }
1014
1015 #findbar-close-button:active {
1016   -moz-image-region: rect(80px, 480px, 120px, 440px);
1017 }
1018
1019 /* Contextual appbar ======================================================= */
1020
1021 #contextualactions-tray {
1022   background-color: @metro_orange@;
1023 }
1024
1025 #contextualactions-tray > toolbarbutton {
1026   opacity: 1;
1027 }
1028 #contextualactions-tray > toolbarbutton[fade] {
1029   opacity: 0;
1030 }
1031 #contextualactions-tray > toolbarbutton:not([immediate]) {
1032   transition-property: opacity;
1033   transition-duration: .3s;
1034   transition-timing-function: ease-in;
1035   transition-delay: 80ms;
1036 }
1037 #contextualactions-tray > toolbarbutton > .toolbarbutton-text {
1038   color: white;
1039 }
1040
1041 #pin-selected-button {
1042   list-style-image: url(chrome://browser/skin/images/navbar-contextual-pin.png);
1043 }
1044
1045 #unpin-selected-button {
1046   list-style-image: url(chrome://browser/skin/images/navbar-contextual-unpin.png);
1047 }
1048
1049 #hide-selected-button {
1050   list-style-image: url(chrome://browser/skin/images/navbar-contextual-hide.png);
1051 }
1052
1053 #delete-selected-button {
1054   list-style-image: url(chrome://browser/skin/images/navbar-contextual-delete.png);
1055 }
1056
1057 #clear-selected-button {
1058   list-style-image: url(chrome://browser/skin/images/navbar-contextual-clear.png);
1059 }
1060
1061 #restore-selected-button {
1062   list-style-image: url(chrome://browser/skin/images/navbar-contextual-restore.png);
1063 }
1064
1065 @media (min-resolution: @min_res_140pc@) {
1066   #pin-selected-button {
1067     list-style-image: url(chrome://browser/skin/images/navbar-contextual-pin@1.4x.png);
1068   }
1069
1070   #unpin-selected-button {
1071     list-style-image: url(chrome://browser/skin/images/navbar-contextual-unpin@1.4x.png);
1072   }
1073
1074   #hide-selected-button {
1075     list-style-image: url(chrome://browser/skin/images/navbar-contextual-hide@1.4x.png);
1076   }
1077
1078   #delete-selected-button {
1079     list-style-image: url(chrome://browser/skin/images/navbar-contextual-delete@1.4x.png);
1080   }
1081
1082   #clear-selected-button {
1083     list-style-image: url(chrome://browser/skin/images/navbar-contextual-clear@1.4x.png);
1084   }
1085
1086   #restore-selected-button {
1087     list-style-image: url(chrome://browser/skin/images/navbar-contextual-restore@1.4x.png);
1088   }
1089 }
1090
1091 @media (min-resolution: @min_res_180pc@) {
1092   #pin-selected-button {
1093     list-style-image: url(chrome://browser/skin/images/navbar-contextual-pin@1.8x.png);
1094   }
1095
1096   #unpin-selected-button {
1097     list-style-image: url(chrome://browser/skin/images/navbar-contextual-unpin@1.8x.png);
1098   }
1099
1100   #hide-selected-button {
1101     list-style-image: url(chrome://browser/skin/images/navbar-contextual-hide@1.8x.png);
1102   }
1103
1104   #delete-selected-button {
1105     list-style-image: url(chrome://browser/skin/images/navbar-contextual-delete@1.8x.png);
1106   }
1107
1108   #clear-selected-button {
1109     list-style-image: url(chrome://browser/skin/images/navbar-contextual-clear@1.8x.png);
1110   }
1111
1112   #restore-selected-button {
1113     list-style-image: url(chrome://browser/skin/images/navbar-contextual-restore@1.8x.png);
1114   }
1115 }
1116
1117 /* Download notifications ======================================================= */
1118
1119 .download-filename-text {
1120   font-weight: bold;
1121 }
1122 .download-host-text {
1123   font-weight: bold;
1124 }
1125
1126 /* Autoscroll popup ======================================================== */
1127
1128 .autoscroller {
1129   height: 28px;
1130   width: 28px;
1131   border: none;
1132   margin: -14px;
1133   padding: 0;
1134   background-image: url("chrome://browser/skin/images/autoscroll.png");
1135   background-color: transparent;
1136   position: fixed;
1137   visibility: hidden;
1138   background-repeat: no-repeat;
1139   background-origin: padding-box;
1140   background-clip: padding-box;
1141   background-position: right top;
1142   -moz-appearance: none;
1143 }
1144
1145 .autoscroller[scrolldir="NS"] {
1146   background-position: right center;
1147 }
1148
1149 .autoscroller[scrolldir="EW"] {
1150   background-position: right bottom;
1151 }
1152
1153 /* Flyouts ================================================================= */
1154
1155 /* don't add a margin to the very top settings entry in flyouts */
1156 flyoutpanel > settings:first-child {
1157   margin-top: 0px;
1158 }
1159
1160 /* Sync flyout pane -------------------------------------------------------- */
1161
1162 #sync-flyoutpanel {
1163   font-size: @metro_font_normal@;
1164   font-weight: 400;
1165 }
1166
1167 #sync-flyoutpanel button {
1168   font-weight: 700;
1169 }
1170
1171 #sync-flyoutpanel .syncHeader {
1172   font-weight: 600;
1173 }
1174
1175 #sync-flyoutpanel .syncSecondaryText {
1176   font-weight: 100;
1177   font-size: @metro_font_snormal@;
1178 }
1179
1180 #sync-flyoutpanel .syncInstructionText {
1181   font-style: italic;
1182 }
1183
1184 .syncThrobber .progressBall {
1185    margin: 2px;
1186    width: 22px;
1187    height: 22px;
1188  }
1189
1190 .syncThrobber .progressBallInner {
1191   width: 5px;
1192   height: 5px;
1193   border-radius: 3px;
1194 }
1195
1196 #sync-flyoutpanel .syncErrorText {
1197   color: red;
1198 }
1199
1200 #sync-flyoutpanel textbox {
1201   margin: @metro_spacing_small@;
1202   padding: @metro_spacing_xsmall@ @metro_spacing_snormal@;
1203   background: @field_background_color@;
1204   border: @metro_border_thick@ solid @field_mid_foreground_color@ !important;
1205   color: @field_foreground_color@;
1206 }
1207
1208 #sync-setup-throbber {
1209   margin-top: 15px;
1210   margin-left: 25px;
1211 }
1212
1213 #sync-connected-device {
1214   width: 200px;
1215 }
1216
1217 #sync-manualsetup-failure {
1218   width: 200px;
1219 }
1220
1221 #sync-flyoutpanel .syncJPAKECode {
1222   margin: @metro_spacing_small@;
1223   padding: @metro_spacing_xsmall@ @metro_spacing_snormal@;
1224   background: @field_background_color@;
1225   border: @metro_border_thick@ solid @field_mid_foreground_color@ !important;
1226   color: @field_foreground_color@;
1227   display: block !important;
1228   font-size: @metro_font_large@ !important;
1229   font-weight: 600;
1230   letter-spacing: 0.4em;
1231   text-align: center;
1232   width: 175px;
1233 }
1234
1235 #sync-connected-device {
1236   margin-bottom: 0px;
1237   padding-bottom: 0px;
1238 }
1239
1240 #sync-connected-lastSynced {
1241   margin-top: 0px;
1242   padding-top: 0px;
1243 }
1244
1245 #sync-connected-throbber {
1246   margin-top: 12px;
1247   margin-left: 15px;
1248 }
1249
1250 /* About flyout pane ------------------------------------------------------- */
1251
1252 /* Colors are defined in /browser/branding/<dir>/content/metro-about.css */
1253
1254 #about-flyoutpanel {
1255   background-image: url('chrome://branding/content/metro-about-footer.png');
1256   background-repeat: no-repeat;
1257   background-attachment: fixed;
1258   background-position: right bottom;
1259 }
1260
1261 #about-flyoutpanel .text-link {
1262   color: inherit;
1263 }
1264
1265 #about-flyoutpanel > .flyoutpanel-wrapper > .flyoutpanel-header,
1266 #about-flyoutpanel > .flyoutpanel-wrapper > .flyoutpanel-contents {
1267   background-color: inherit;
1268   border: none;
1269 }
1270
1271 #about-policy-label {
1272   padding: 1.5em @metro_spacing_large@;
1273   margin: 1em -@metro_spacing_large@;
1274 }
1275
1276 #about-version-label {
1277  margin-top: 11pt;
1278 }
1279
1280 #currentChannel {
1281   margin: 0;
1282   padding: 0;
1283   font-weight: bold;
1284 }
1285
1286 /* Preferences flyout pane ------------------------------------------------- */
1287
1288 /* Lay out each <setting> in a single row */
1289 setting {
1290   min-height: @touch_row@; /* row size */
1291   -moz-box-align: center;
1292   -moz-box-orient: horizontal;
1293 }
1294
1295 /* ...except for some exceptions */
1296 .setting-expanded {
1297   -moz-box-align: start;
1298   -moz-box-orient: vertical;
1299 }
1300
1301 setting > vbox {
1302   -moz-box-flex: 1;
1303 }
1304
1305 settings {
1306   margin-top: 32px;
1307 }
1308
1309 .settings-title {
1310   font-weight: bold;
1311 }
1312
1313 /* <setting> elements that are not in a <settings> group get special treatment */
1314 #prefs-flyoutpanel > setting,
1315 #sync-flyoutpanel > setting {
1316   margin-top: 16px;
1317 }
1318
1319 #prefs-flyoutpanel > setting .preferences-title {
1320   font-weight: bold;
1321 }
1322
1323 setting[type="integer"] > .preferences-alignment,
1324 setting[type="string"] > .preferences-alignment {
1325   -moz-box-flex: 3;
1326 }
1327
1328 setting[type="file"] > .preferences-alignment,
1329 setting[type="directory"] > .preferences-alignment {
1330   -moz-box-align: center;
1331 }
1332
1333 /* Removes the left side title vbox on radio setting */
1334 setting[type="radio"] > vbox {
1335   display: none;
1336 }
1337
1338 #prefs-homepage-options, #prefs-homepage-popup {
1339   min-width: 200px;
1340 }
1341
1342 .options-box {
1343   -moz-margin-start: 28px;  /* sized based on the 32px addon image */
1344 }
1345
1346 .options-box > setting:last-child {
1347   border-bottom: 0;
1348 }
1349
1350 .preferences-description {
1351   font-size: @font_small@ !important;
1352   color: grey;
1353 }
1354
1355 .preferences-description:empty {
1356   display: none;
1357 }
1358
1359 /* Clear private data prefs */
1360
1361 /* hide subitems when other data checkbox is not checked */
1362 #prefs-privdata-other:not([checked]) + #prefs-privdata-subitems {
1363   display: none;
1364 }
1365
1366 #prefs-privdata-subitems {
1367   display: block;
1368   padding-left: @metro_spacing_xnormal@;
1369   font-size: @metro_font_snormal@;
1370 }
1371
1372 /* arrange sub-items in two columns */
1373 .privdata-subitem-item {
1374   display: inline-block;
1375   vertical-align: middle;
1376   margin: 0;
1377   width: 50%;
1378 }
1379
1380 #clear-notification {
1381   max-height: 25px;
1382 }
1383
1384 #clearprivacythrobber {
1385   max-width: 25px;
1386   max-height: 25px;
1387 }
1388
1389 #clearprivacythrobber .progressContainer {
1390   width: 25px;
1391   height: 25px;
1392 }
1393
1394 #clearprivacythrobber .progressBall {
1395   margin: 2px;
1396   width: 22px;
1397   height: 22px;
1398 }
1399
1400 #clear-notification-done {
1401   font-weight: bold;
1402 }