The Tor Browser: browser/metro/theme/browser.css@7e26c7da4463 (annotated)

browser/metro/theme/browser.css@7e26c7da4463 (annotated)

browser/metro/theme/browser.css

Wed, 31 Dec 2014 06:55:50 +0100

author: Michael Schloh von Bennewitz <michael@schloh.com>
date: Wed, 31 Dec 2014 06:55:50 +0100
changeset 2: 7e26c7da4463
permissions: -rw-r--r--

Added tag UPSTREAM_283F7C6 for changeset ca08bd8f51b2

 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 %filter substitution
 %include defines.inc
 %define forward_transition_length 200ms
 %define forward_spacing 50px
 /* Tab/StartUI tray ======================================================== */
 #tray {
   transition: transform @metro_animation_duration@ @metro_animation_easing@;
   transform: translateY(-@tabs_height@);
   width: 100%;
 }
 #tray {
   position: fixed;
 }
 #tray[expanded]:not([viewstate="snapped"]) {
   transform: none;
 }
 /* Tabs -------------------------------------------------------------------- */
 #tabs-container {
   background: @panel_dark_color@ @panel_dark_background@;
   padding: 0;
   -moz-padding-start: @metro_spacing_normal@;
   width: 100%;
 }
 #tabs {
   -moz-padding-start: 0;
 }
 #tabs .tabs-list {
   display: block;
   -moz-user-focus: ignore;
   padding: 0;
   background-color: transparent;
   margin: 0;
   overflow: auto;
 }
 .tabs-scrollbox > .scrollbutton-up[collapsed],
 .tabs-scrollbox > .scrollbutton-down[collapsed],
 #tabs[input="imprecise"] > .tabs-scrollbox > .scrollbutton-up,
 #tabs[input="imprecise"] > .tabs-scrollbox > .scrollbutton-down {
   visibility: hidden !important;
   pointer-events: none;
 }
 #tabs > .tabs-scrollbox > .scrollbutton-down:-moz-locale-dir(rtl),
 #tabs > .tabs-scrollbox > .scrollbutton-up {
   list-style-image: url("images/tab-arrows.png") !important;
   -moz-image-region: rect(15px 58px 63px 14px) !important;
   padding-right: 15px;
   width: @tabs_scrollarrow_width@;
 }
 #tabs > .tabs-scrollbox > .scrollbutton-down:hover:-moz-locale-dir(rtl),
 #tabs > .tabs-scrollbox > .scrollbutton-up:hover {
   -moz-image-region: rect(14px 102px 62px 58px) !important;
 }
 #tabs > .tabs-scrollbox > .scrollbutton-down:active:-moz-locale-dir(rtl),
 #tabs > .tabs-scrollbox > .scrollbutton-up:active {
   -moz-image-region: rect(14px 152px 62px 108px) !important;
 }
 #tabs > .tabs-scrollbox > .scrollbutton-down[disabled]:-moz-locale-dir(rtl),
 #tabs > .tabs-scrollbox > .scrollbutton-up[disabled] {
   -moz-image-region: rect(15px 196px 63px 152px) !important;
 }
 #tabs > .tabs-scrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
 #tabs > .tabs-scrollbox > .scrollbutton-down {
   list-style-image: url("images/tab-arrows.png") !important;
   -moz-image-region: rect(73px 58px 121px 14px) !important;
   padding-left: 15px;
   width: @tabs_scrollarrow_width@;
 }
 #tabs > .tabs-scrollbox > .scrollbutton-up:hover:-moz-locale-dir(rtl),
 #tabs > .tabs-scrollbox > .scrollbutton-down:hover {
   -moz-image-region: rect(72px 102px 120px 58px) !important;
 }
 #tabs > .tabs-scrollbox > .scrollbutton-up:active:-moz-locale-dir(rtl),
 #tabs > .tabs-scrollbox > .scrollbutton-down:active {
   -moz-image-region: rect(72px 152px 120px 108px) !important;
 }
 #tabs > .tabs-scrollbox > .scrollbutton-up[disabled]:-moz-locale-dir(rtl),
 #tabs > .tabs-scrollbox > .scrollbutton-down[disabled] {
   -moz-image-region: rect(73px 196px 121px 152px) !important;
 }
 .tabs-scrollbox > .scrollbutton-up:not([disabled]):not([collapsed]):-moz-locale-dir(rtl)::after {
   right: calc(@tabs_scrollarrow_width@ + @metro_spacing_normal@);
 }
 .tabs-scrollbox > .scrollbutton-down:not([disabled]):not([collapsed]):-moz-locale-dir(rtl)::before {
   right: auto;
   left: calc(@tabs_scrollarrow_width@ + @newtab_button_width@);
 }
 .tabs-scrollbox > .scrollbutton-up:not([disabled]):not([collapsed])::after {
   content: "";
   visibility: visible;
   display: block;
   background-color: rgb(90, 91, 95);
   position: absolute;
   top: 0;
   left: calc(@tabs_scrollarrow_width@ + @metro_spacing_normal@); /* .scrollbutton-up width + #tabs-container left padding */
   width: 1px;
   height: @tabs_height@;
 }
 .tabs-scrollbox > .scrollbutton-down:not([disabled]):not([collapsed])::before {
   content: "";
   visibility: visible;
   display: block;
   background-color: rgb(90, 91, 95);
   position: absolute;
   top: 0;
   right: calc(@tabs_scrollarrow_width@ + @newtab_button_width@); /* .scrollbutton-down width + #newtab-button width */
   width: 1px;
   height: @tabs_height@;
 }
 /* Hack for bug 965550 */
 .tabs-scrollbox > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
   -moz-padding-start: calc(2 * @tabs_scrollarrow_width@);
   -moz-margin-start: calc(-2 * @tabs_scrollarrow_width@);
 }
 #tabs-container[viewstate="snapped"] {
   visibility: hidden;
 }
 @-moz-keyframes open-documenttab {
 % {
     opacity: 0;
     transform: scale(0, 0);
   }
 % {
     opacity: 1;
     transform: scale(1, 1);
   }
 }
 @-moz-keyframes close-documenttab {
 % {
     opacity: 1;
     transform: scale(1, 1);
   }
 % {
     opacity: 0;
     transform: scale(0, 0);
   }
 }
 .documenttab-container {
   animation: open-documenttab 0.4s ease-out;
 }
 documenttab[closing] > .documenttab-container {
   animation: close-documenttab 0.4s ease-out;
   animation-fill-mode: forwards;
 }
 .documenttab-favicon {
   visibility: collapse;
 }
 .documenttab-thumbnail {
   margin: @metro_spacing_normal@ @metro_spacing_snormal@;
   background: white none center top no-repeat;
   background-size: cover;
   min-width: @thumbnail_width@;
   width: @thumbnail_width@;
   height: @thumbnail_height@;
 }
 #tray:not([expanded]) .documenttab-thumbnail {
   background-image: none!important;
 }
 /* TODO: Decide how and where to display private tabs.
  * For now, display them in the main tab strip but hide the thumbnail. */
 documenttab[private] .documenttab-thumbnail {
   background-color: purple;
 }
 .documenttab-title {
   margin: @metro_spacing_normal@ @metro_spacing_snormal@;
   margin-top: 0;
   font-size: @metro_font_normal@;
   width: @thumbnail_width@;
   padding: 4px @metro_spacing_snormal@ 8px;
   background: #000;
   opacity: 0.95;
   color: #fff;
   box-shadow: 0 0 @metro_spacing_snormal@ rgba(0, 0, 0, 0.25);
 }
 .documenttab-crop {
   background: transparent url("chrome://browser/skin/images/tab-crop.png") 50% 50% no-repeat;
 }
 .documenttab-selection {
   background: transparent -moz-image-rect(url("chrome://browser/skin/images/tab-overlay.png"), 0%, 100%, 50%, 0%) 50% 50% no-repeat;
 }
 documenttab[selected] .documenttab-selection {
   background: transparent -moz-image-rect(url("chrome://browser/skin/images/tab-overlay.png"), 50%, 100%, 100%, 0%) 50% 50% no-repeat;
 }
 .documenttab-crop:-moz-locale-dir(rtl),
 .documenttab-selection:-moz-locale-dir(rtl),
 documenttab[selected] .documenttab-selection:-moz-locale-dir(rtl) {
   transform: scaleX(-1);
 }
 .documenttab-close {
   background: none !important;
   padding: @metro_spacing_small@ !important;
   margin-top: @metro_spacing_snormal@;
   -moz-margin-end: @metro_spacing_xsmall@;
   border-color: transparent !important;
   list-style-image: url("chrome://browser/skin/images/closetab-default.png");
 }
 .documenttab-close > .button-box > .button-text {
   display: none;
 }
 #tabs-controls {
   -moz-box-align: start;
   -moz-box-orient: vertical;
 }
 #newtab-button {
   list-style-image: url(chrome://browser/skin/images/newtab-default.png);
   /* Add some extra padding for a larger target */
   padding: 18px 20px 30px 20px;
   width: @newtab_button_width@;
 }
 /* Start UI ----------------------------------------------------------------- */
 #urlbar-autocomplete[viewstate="snapped"],
 #urlbar-autocomplete[viewstate="portrait"]{
   -moz-box-orient: vertical;
 }
 #autocomplete-overlay {
   display: none;
   background-color: black;
   opacity: .3;
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
 }
 #stack[autocomplete] > #page > #content-viewport > #autocomplete-overlay {
   display: -moz-box;
 }
 /* Browser Content Areas ==================================================== */
 /* a 'margin-top' is applied dynamically in ContentAreaObserver */
 #browsers {
   background: white;
   transition-property: margin-top;
   transition-duration: .3s;
   transition-timing-function: ease-in-out;
 }
 #browsers browser {
   /* unset padding-bottom immediately */
   transition-duration: 0s;
   transition-delay:    0s;
   transition-property: padding-bottom;
 }
 /* Selection overlay and monocles */
 #page,
 .selection-overlay {
   -moz-stack-sizing: ignore;
 }
 .selection-overlay {
   pointer-events: none;
 }
 .selection-overlay:-moz-focusring {
   outline: 0 !important;
 }
 .selection-overlay-hidden {
   display: none;
 }
 .selectionhandle {
   background-image: url("chrome://browser/skin/images/selection-monocle.png");
   background-repeat: no-repeat;
   background-size: 18px 18px;
   padding: 0px;
   margin-top: -19px;
   margin-left: -9px;
   pointer-events: auto;
 }
 @media (min-resolution: @min_res_140pc@) {
   /* Load 140% image when scaled by 140% */
   .selectionhandle {
     background-image: url("chrome://browser/skin/images/selection-monocle@1.4x.png");
   }
 }
 @media (min-resolution: @min_res_180pc@) {
   /* Load 180% image when scaled by 180% */
   .selectionhandle {
     background-image: url("chrome://browser/skin/images/selection-monocle@1.8x.png");
   }
 }
 /* content scrollbars */
 .scroller {
   opacity: 0;
   background-color: rgba(0, 0, 0, 0.4) !important;
   -moz-border-top-colors: none !important;
   -moz-border-bottom-colors: none !important;
   -moz-border-right-colors: none !important;
   -moz-border-left-colors: none !important;
   border-radius: @border_radius_tiny@;
   border: @border_width_tiny@ solid rgba(255, 255, 255, 0.4) !important;
 }
 .scroller[panning] {
   opacity: 1;
 }
 .scroller[orient="vertical"] {
   min-width: @scroller_thickness@;
   width: @scroller_thickness@;
   min-height: @scroller_minimum@;
 }
 .scroller[orient="horizontal"] {
   min-height: @scroller_thickness@;
   height: @scroller_thickness@;
   min-width: @scroller_minimum@;
 }
 /* overlay buttons */
 .overlay-button {
   position: fixed;
   top: 50%;
   margin-top: -65px;
   width: 118px;
   height: 118px;
   background-color: hsla(210,30%,10%,.2);
   background-size: 60px;
   background-repeat: no-repeat;
   background-origin: padding-box;
   background-clip: padding-box;
   border: 6px solid hsla(0,0%,100%,.7);
   border-radius: 50%;
   box-shadow: 0 0 0 1px hsla(0,0%,0%,.04),
 0 9px 0 hsla(0,0%,0%,.1);
   transition-property: left, right, transform, background-position,
                        background-color, background-size, border-color,
                        visibility, box-shadow, top;
   transition-duration: 550ms;
   transition-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
 }
 #overlay-back {
   background-image: url(chrome://browser/skin/images/overlay-back.png);
 }
 #overlay-plus {
   background-image: url(chrome://browser/skin/images/overlay-plus.png);
 }
 @media (min-resolution: @min_res_140pc@) {
   #overlay-back {
     background-image: url(chrome://browser/skin/images/overlay-back@1.4x.png);
   }
   #overlay-plus {
     background-image: url(chrome://browser/skin/images/overlay-plus@1.4x.png);
   }
 }
 @media (min-resolution: @min_res_180pc@) {
   #overlay-back {
     background-image: url(chrome://browser/skin/images/overlay-back@1.8x.png);
   }
   #overlay-plus {
     background-image: url(chrome://browser/skin/images/overlay-plus@1.8x.png);
   }
 }
 #overlay-back:-moz-locale-dir(ltr),
 #overlay-plus:-moz-locale-dir(rtl) {
   left: -70px;
   background-position: right 6px center;
 }
 #overlay-plus:-moz-locale-dir(ltr) {
   right: -70px;
   background-position: left 6px center;
 }
 #stack[viewstate="snapped"] > .overlay-button,
 #stack[keyboardVisible] > .overlay-button,
 #stack[autocomplete] > .overlay-button,
 #stack[fullscreen] > .overlay-button,
 #appbar[visible] ~ .overlay-button,
 .overlay-button[disabled] {
   box-shadow: none;
   visibility: collapse;
 }
 #stack[keyboardVisible] > #overlay-back:-moz-locale-dir(ltr),
 #stack[keyboardVisible] > #overlay-plus:-moz-locale-dir(rtl),
 #stack[autocomplete] > #overlay-back:-moz-locale-dir(ltr),
 #stack[autocomplete] > #overlay-plus:-moz-locale-dir(rtl),
 #stack[fullscreen] > #overlay-back:-moz-locale-dir(ltr),
 #stack[fullscreen] > #overlay-plus:-moz-locale-dir(rtl),
 #appbar[visible] ~ #overlay-back:-moz-locale-dir(ltr),
 #appbar[visible] ~ #overlay-plus:-moz-locale-dir(rtl),
 #overlay-back[disabled]:-moz-locale-dir(ltr),
 #overlay-plus[disabled]:-moz-locale-dir(rtl) {
   transform: translateX(-60px);
 }
 #stack[keyboardVisible] > #overlay-plus:-moz-locale-dir(ltr),
 #stack[keyboardVisible] > #overlay-back:-moz-locale-dir(rtl),
 #stack[autocomplete] > #overlay-plus:-moz-locale-dir(ltr),
 #stack[autocomplete] > #overlay-back:-moz-locale-dir(rtl),
 #stack[fullscreen] > #overlay-plus:-moz-locale-dir(ltr),
 #stack[fullscreen] > #overlay-back:-moz-locale-dir(rtl),
 #appbar[visible] ~ #overlay-plus:-moz-locale-dir(ltr),
 #appbar[visible] ~ #overlay-back:-moz-locale-dir(rtl),
 #overlay-plus[disabled]:-moz-locale-dir(ltr),
 #overlay-back[disabled]:-moz-locale-dir(rtl) {
   transform: translateX(60px);
 }
 .overlay-button:hover {
   background-color: hsla(210,30%,10%,.4);
   background-size: 90px;
   border-color: hsla(0,0%,100%,.9);
 }
 #overlay-back:-moz-locale-dir(ltr):hover,
 #overlay-plus:-moz-locale-dir(rtl):hover {
   background-position: right 12px center;
   transform: translateX(40px) scale(1.2);
 }
 #overlay-plus:-moz-locale-dir(ltr):hover {
   background-position: left 12px center;
   transform: translateX(-40px) scale(1.2);
 }
 #overlay-back:-moz-locale-dir(rtl):hover {
   transform: translateX(-40px) scale(1.2) scaleX(-1);
 }
 #overlay-back:-moz-locale-dir(rtl) {
   transform: scaleX(-1);
   right: -70px;
   background-position: right 9px center;
 }
 #overlay-back[mousedrag],
 #overlay-plus[mousedrag] {
   transition-property: left, right, transform, background-position,
                        background-color, background-size, border-color,
                        visibility, box-shadow;
 }
 /* Navigation bar ========================================================== */
 /* Most appbars are hidden by default, but we want to keep #navbar visible so
  * we can show the progress bar at all times.  Instead, we hide only the
  * toolbar portion of the navbar. */
 #navbar {
   visibility: visible;
 }
 #navbar:not([hiding]):not([visible]) > #toolbar-overlay {
   visibility: hidden;
 }
 #content-viewport[navbar="visible"] .active-tab-notificationbox:not([count="0"]):not([notificationsVisible="false"]) {
   padding-bottom: @toolbar_height@;
 }
 /* Progress meter ---------------------------------------------------------- */
 #progress-container {
   display: block;
   position: absolute;
   top: -@progress_height@;
   height: @progress_height@;
   width: 100%;
   background-color: hsla(210,5%,80%,1);
   box-shadow: 0 1px 0 hsla(210,5%,50%,.1) inset;
   -moz-user-focus: ignore;
 }
 #progress-container[startpage] {
   visibility: collapse;
 }
 #progress-control {
   display: block;
   height: @progress_height@;
   background-image: -moz-linear-gradient(left, hsla(200,100%,83%,.5),
                                          hsla(200,100%,83%,0)),
                     -moz-linear-gradient(top, #1ab2ff, #0091ff);
   border-right: 1px solid #0082e5;
   transition: width .3s ease-in;
   -moz-user-focus: ignore;
 }
 #progress-control:-moz-dir(rtl) {
   transform: scaleX(-1);
 }
 #progress-control[fade] {
   opacity: 0;
   transition: width .3s ease-in, .5s opacity ease-in;
 }
 /* Toolbar ----------------------------------------------------------------- */
 #toolbar-overlay {
   background-color: @panel_light_color@;
 }
 #urlbar-autocomplete {
   padding-top: 0;
 }
 #toolbar {
   padding: 0 @toolbar_horizontal_padding@;
 }
 #toolbar[viewstate="snapped"] {
   padding: 0 @toolbar_snapped_horizontal_padding@;
 }
 #toolbar[viewstate="snapped"] > toolbarbutton {
   margin: 0 @toolbar_snapped_horizontal_spacing@;
 }
 /* Combined back/forward buttons */
 #back-button {
   list-style-image: url(chrome://browser/skin/images/navbar-back.png);
   position: relative;
   z-index: 1;
   transition: opacity @forward_transition_length@ ease-out;
 }
 #back-button:-moz-locale-dir(rtl),
 #forward-button:-moz-locale-dir(rtl) {
   transform: scaleX(-1);
 }
 #back-button[disabled] {
   visibility: visible;
   opacity: 0.5;
 }
 #forward-button {
   list-style-image: url(chrome://browser/skin/images/navbar-forward.png);
   transition: margin @forward_transition_length@ ease-out,
               visibility @forward_transition_length@ ease-out,
               opacity @forward_transition_length@ ease-out;
 }
 #forward-button[disabled] {
   -moz-margin-start: -@forward_spacing@ !important;
   visibility: hidden;
   opacity: 0;
   pointer-events: none;
 }
 @media (min-resolution: @min_res_140pc@) {
   #back-button {
     list-style-image: url(chrome://browser/skin/images/navbar-back@1.4x.png);
   }
   #forward-button {
     list-style-image: url(chrome://browser/skin/images/navbar-forward@1.4x.png);
   }
 }
 @media (min-resolution: @min_res_180pc@) {
   #back-button {
     list-style-image: url(chrome://browser/skin/images/navbar-back@1.8x.png);
   }
   #forward-button {
     list-style-image: url(chrome://browser/skin/images/navbar-forward@1.8x.png);
   }
 }
 /* URL bar */
 #urlbar {
   border: @metro_border_thick@ solid @urlbar_border_color@;
   margin: 0 @toolbar_horizontal_spacing@;
   padding: 0;
   background-color: @field_background_color@;
   overflow: hidden;
 }
 #urlbar[editing] {
   border-color: @metro_orange@;
 }
 /* Identity widget */
 #identity-icon {
   margin: 0;
   padding: 0 @metro_spacing_snormal@;
   list-style-image: url("chrome://browser/skin/images/identity-icons-generic.png");
 }
 #identity-box.verifiedDomain > #identity-icon {
   list-style-image: url("chrome://browser/skin/images/identity-icons-https.png");
 }
 #identity-box.verifiedIdentity > #identity-icon {
   list-style-image: url("chrome://browser/skin/images/identity-icons-https-ev.png");
 }
 #toolbar[startpage] > #urlbar:not([autocomplete]) > #identity-box > #identity-icon {
   list-style-image: url("chrome://browser/skin/images/icons-identity-firefox.png");
 }
 #urlbar[autocomplete] > #identity-box > #identity-icon {
   list-style-image: url("chrome://browser/skin/images/icon-autocomplete-search.png");
 }
 /* Main URL textbox */
 #urlbar-edit {
   margin: 0 !important;
   min-height: @urlbar_edit_height@;
   -moz-appearance: none !important;
   border-radius: 0;
   border: 0 none !important;
   padding: 0 !important;
 }
 #urlbar-edit > hbox > .textbox-input-box > .textbox-input:invalid {
   /* Hide error glow around the address bar that shows by default
    * when URLs are made invalid by trmming. */
   box-shadow: none !important;
 }
 /* Combined stop-reload button */
 .urlbar-button {
   margin: 0;
   -moz-image-region: rect(0px, 30px, 30px, 0px);
 }
 .urlbar-button:hover:not(:active) {
   -moz-image-region: rect(0px, 60px, 30px, 30px);
   background-color: #dedfdf;
 }
 .urlbar-button:active {
   -moz-image-region: rect(0px, 90px, 30px, 60px);
   background-color: #6d7073;
 }
 .urlbar-button  > .toolbarbutton-icon {
   width: 30px;
   height: 30px;
 }
 #go-button {
   list-style-image: url(chrome://browser/skin/images/urlbar-go.png)
 }
 #reload-button {
   list-style-image: url(chrome://browser/skin/images/urlbar-reload.png);
 }
 #stop-button {
   list-style-image: url(chrome://browser/skin/images/urlbar-stop.png);
 }
 @media (min-resolution: @min_res_140pc@) {
   .urlbar-button {
     -moz-image-region: rect(0px, 42px, 42px, 0px);
   }
   .urlbar-button:hover:not(:active) {
     -moz-image-region: rect(0px, 84px, 42px, 42px);
   }
   .urlbar-button:active {
     -moz-image-region: rect(0px, 126px, 42px, 84px);
   }
   #go-button {
     list-style-image: url(chrome://browser/skin/images/urlbar-go@1.4x.png)
   }
   #reload-button {
     list-style-image: url(chrome://browser/skin/images/urlbar-reload@1.4x.png);
   }
   #stop-button {
     list-style-image: url(chrome://browser/skin/images/urlbar-stop@1.4x.png);
   }
   #toolbar[startpage] > #urlbar:not([autocomplete]) > #identity-box > #identity-icon {
     list-style-image: url("chrome://browser/skin/images/icons-identity-firefox@1.4x.png");
   }
   #urlbar[autocomplete] > #identity-box > #identity-icon {
     list-style-image: url("chrome://browser/skin/images/icon-autocomplete-search@1.4x.png");
   }
 }
 @media (min-resolution: @min_res_180pc@) {
   .urlbar-button {
     -moz-image-region: rect(0px, 54px, 54px, 0px);
   }
   .urlbar-button:hover:not(:active) {
     -moz-image-region: rect(0px, 108px, 54px, 54px);
   }
   .urlbar-button:active {
     -moz-image-region: rect(0px, 162px, 54px, 108px);
   }
   #go-button {
     list-style-image: url(chrome://browser/skin/images/urlbar-go@1.8x.png)
   }
   #reload-button {
     list-style-image: url(chrome://browser/skin/images/urlbar-reload@1.8x.png);
   }
   #stop-button {
     list-style-image: url(chrome://browser/skin/images/urlbar-stop@1.8x.png);
   }
   #toolbar[startpage] > #urlbar:not([autocomplete]) > #identity-box > #identity-icon {
     list-style-image: url("chrome://browser/skin/images/icons-identity-firefox@1.8x.png");
   }
   #urlbar[autocomplete] > #identity-box > #identity-icon {
     list-style-image: url("chrome://browser/skin/images/icon-autocomplete-search@1.8x.png");
   }
 }
 /* navbar edit button: one button out of three - when editing: go, when !editing,
    loading: stop, when !editing, !loading: reload */
 #go-button, #reload-button, #stop-button  {
   visibility: collapse;
 }
 #urlbar[editing] > #go-button,
 #urlbar:not([editing])[loading] > #stop-button,
 #urlbar:not([editing]):not([loading]) > #reload-button {
   visibility: visible;
 }
 /* Contextual toolbar controls */
 #toolbar-context-autocomplete,
 .hide-on-start,
 #toolbar-context-page {
   transition-property: opacity, visibility;
   transition-duration: @forward_transition_length@;
   transition-timing-function: @metro_animation_easing@;
 }
 #toolbar-contextual:not([autocomplete]) #toolbar-context-autocomplete,
 #toolbar-contextual[startpage] .hide-on-start,
 #toolbar-contextual[autocomplete] #toolbar-context-page {
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
 }
 #toolbar[viewstate="snapped"] #toolbar-contextual {
   visibility: collapse;
 }
 #download-progress:not([progress]) {
   visibility: collapse;
 }
 #download-progress {
   list-style-image: url(chrome://browser/skin/images/navbar-download.png);
 }
 #download-progress[progress="100"] {
   list-style-image: url(chrome://browser/skin/images/navbar-download-finished.png);
 }
 #pin-button {
   list-style-image: url(chrome://browser/skin/images/navbar-pin.png);
 }
 #star-button {
   list-style-image: url(chrome://browser/skin/images/navbar-star.png);
 }
 #menu-button {
   list-style-image: url(chrome://browser/skin/images/navbar-menu.png);
 }
 #close-button {
   list-style-image: url(chrome://browser/skin/images/navbar-close.png);
 }
 @media (min-resolution: @min_res_140pc@) {
   #download-progress {
     list-style-image: url(chrome://browser/skin/images/navbar-download@1.4x.png);
   }
   #download-progress[progress="100"] {
     list-style-image: url(chrome://browser/skin/images/navbar-download-finished@1.4x.png);
   }
   #pin-button {
     list-style-image: url(chrome://browser/skin/images/navbar-pin@1.4x.png);
   }
   #star-button {
     list-style-image: url(chrome://browser/skin/images/navbar-star@1.4x.png);
   }
   #menu-button {
     list-style-image: url(chrome://browser/skin/images/navbar-menu@1.4x.png);
   }
   #close-button {
     list-style-image: url(chrome://browser/skin/images/navbar-close@1.4x.png);
   }
 }
 @media (min-resolution: @min_res_180pc@) {
   #download-progress {
     list-style-image: url(chrome://browser/skin/images/navbar-download@1.8x.png);
   }
   #download-progress[progress="100"] {
     list-style-image: url(chrome://browser/skin/images/navbar-download-finished@1.8x.png);
   }
   #pin-button {
     list-style-image: url(chrome://browser/skin/images/navbar-pin@1.8x.png);
   }
   #star-button {
     list-style-image: url(chrome://browser/skin/images/navbar-star@1.8x.png);
   }
   #menu-button {
     list-style-image: url(chrome://browser/skin/images/navbar-menu@1.8x.png);
   }
   #close-button {
     list-style-image: url(chrome://browser/skin/images/navbar-close@1.8x.png);
   }
 }
 /* Panel UI ================================================================ */
 #panel-container {
   padding: 60px 40px;
 }
 #panel-container[viewstate="snapped"] .canSnapTiles .richgrid-item-content {
   -moz-box-orient: horizontal;
 }
 #panel-close-button {
   -moz-margin-end: 40px;
   list-style-image: url(chrome://browser/skin/images/navbar-back.png);
   -moz-box-pack: center;
 }
 #panel-close-button:-moz-locale-dir(rtl) {
   transform: scaleX(-1);
 }
 @media (min-resolution: @min_res_140pc@) {
   #panel-close-button {
     list-style-image: url(chrome://browser/skin/images/navbar-back@1.4x.png);
   }
 }
 @media (min-resolution: @min_res_180pc@) {
   #panel-close-button {
     list-style-image: url(chrome://browser/skin/images/navbar-back@1.8x.png);
   }
 }
 #panel-items {
   padding-top: 20px;
   -moz-padding-start: 88px;
 }
 #panel-container[viewstate="snapped"] #panel-items {
   padding-left: 0px;
 }
 /* Console Section - Panel UI ---------------------------------------------- */
 #console-filter-warnings,
 #console-filter-messages {
   visibility: visible;
 }
 @media (max-width: 499px) {
   #console-filter-warnings,
   #console-filter-messages {
     visibility: collapse;
   }
 }
 .console-error-msg,
 .console-msg-text {
   white-space: pre-wrap;
 }
 /* Find bar ================================================================ */
 #findbar {
   background-color: @metro_orange@;
   padding: 0;
 }
 #findbar > toolbar {
   min-height: @findbar_height@ !important;
 }
 #findbar-textbox {
   border: none !important;
   width: 20em;
 }
 /* Override the default box ordering and make the find textbox appear to the
    right of the icon */
 #findbar-textbox input {
   -moz-box-ordinal-group: 2
 }
 #findbar-textbox[status="1"] { /* Ci.nsITypeAheadFind.FIND_NOTFOUND */
   background: rgb(255,200,200);
 }
 #findbar-textbox:hover:active {
   background: #8db8d8;
 }
 .textbox-search-icon {
   list-style-image: url("chrome://browser/skin/images/search-glass-30.png");
   -moz-image-region: auto;
 }
 #findbar-previous-button {
   -moz-image-region: rect(0px, 400px, 40px, 360px);
 }
 #findbar-previous-button:hover:not(:active) {
   -moz-image-region: rect(40px, 400px, 80px, 360px);
 }
 #findbar-previous-button:active {
   -moz-image-region: rect(80px, 400px, 120px, 360px);
 }
 #findbar-next-button {
   -moz-image-region: rect(0px, 440px, 40px, 400px);
 }
 #findbar-next-button:hover:not(:active) {
   -moz-image-region: rect(40px, 440px, 80px, 400px);
 }
 #findbar-next-button:active {
   -moz-image-region: rect(80px, 440px, 120px, 400px);
 }
 #findbar-close-button {
   -moz-image-region: rect(0px, 480px, 40px, 440px);
 }
 #findbar-close-button:hover:not(:active) {
   -moz-image-region: rect(40px, 480px, 80px, 440px);
 }
 #findbar-close-button:active {
   -moz-image-region: rect(80px, 480px, 120px, 440px);
 }
 /* Contextual appbar ======================================================= */
 #contextualactions-tray {
   background-color: @metro_orange@;
 }
 #contextualactions-tray > toolbarbutton {
   opacity: 1;
 }
 #contextualactions-tray > toolbarbutton[fade] {
   opacity: 0;
 }
 #contextualactions-tray > toolbarbutton:not([immediate]) {
   transition-property: opacity;
   transition-duration: .3s;
   transition-timing-function: ease-in;
   transition-delay: 80ms;
 }
 #contextualactions-tray > toolbarbutton > .toolbarbutton-text {
   color: white;
 }
 #pin-selected-button {
   list-style-image: url(chrome://browser/skin/images/navbar-contextual-pin.png);
 }
 #unpin-selected-button {
   list-style-image: url(chrome://browser/skin/images/navbar-contextual-unpin.png);
 }
 #hide-selected-button {
   list-style-image: url(chrome://browser/skin/images/navbar-contextual-hide.png);
 }
 #delete-selected-button {
   list-style-image: url(chrome://browser/skin/images/navbar-contextual-delete.png);
 }
 #clear-selected-button {
   list-style-image: url(chrome://browser/skin/images/navbar-contextual-clear.png);
 }
 #restore-selected-button {
   list-style-image: url(chrome://browser/skin/images/navbar-contextual-restore.png);
 }
 @media (min-resolution: @min_res_140pc@) {
   #pin-selected-button {
     list-style-image: url(chrome://browser/skin/images/navbar-contextual-pin@1.4x.png);
   }
   #unpin-selected-button {
     list-style-image: url(chrome://browser/skin/images/navbar-contextual-unpin@1.4x.png);
   }
   #hide-selected-button {
     list-style-image: url(chrome://browser/skin/images/navbar-contextual-hide@1.4x.png);
   }
   #delete-selected-button {
     list-style-image: url(chrome://browser/skin/images/navbar-contextual-delete@1.4x.png);
   }
   #clear-selected-button {
     list-style-image: url(chrome://browser/skin/images/navbar-contextual-clear@1.4x.png);
   }
   #restore-selected-button {
     list-style-image: url(chrome://browser/skin/images/navbar-contextual-restore@1.4x.png);
   }
 }
 @media (min-resolution: @min_res_180pc@) {
   #pin-selected-button {
     list-style-image: url(chrome://browser/skin/images/navbar-contextual-pin@1.8x.png);
   }
   #unpin-selected-button {
     list-style-image: url(chrome://browser/skin/images/navbar-contextual-unpin@1.8x.png);
   }
   #hide-selected-button {
     list-style-image: url(chrome://browser/skin/images/navbar-contextual-hide@1.8x.png);
   }
   #delete-selected-button {
     list-style-image: url(chrome://browser/skin/images/navbar-contextual-delete@1.8x.png);
   }
   #clear-selected-button {
     list-style-image: url(chrome://browser/skin/images/navbar-contextual-clear@1.8x.png);
   }
   #restore-selected-button {
     list-style-image: url(chrome://browser/skin/images/navbar-contextual-restore@1.8x.png);
   }
 }
 /* Download notifications ======================================================= */
 .download-filename-text {
   font-weight: bold;
 }
 .download-host-text {
   font-weight: bold;
 }
 /* Autoscroll popup ======================================================== */
 .autoscroller {
   height: 28px;
   width: 28px;
   border: none;
   margin: -14px;
   padding: 0;
   background-image: url("chrome://browser/skin/images/autoscroll.png");
   background-color: transparent;
   position: fixed;
   visibility: hidden;
   background-repeat: no-repeat;
   background-origin: padding-box;
   background-clip: padding-box;
   background-position: right top;
   -moz-appearance: none;
 }
 .autoscroller[scrolldir="NS"] {
   background-position: right center;
 }
 .autoscroller[scrolldir="EW"] {
   background-position: right bottom;
 }
 /* Flyouts ================================================================= */
 /* don't add a margin to the very top settings entry in flyouts */
 flyoutpanel > settings:first-child {
   margin-top: 0px;
 }
 /* Sync flyout pane -------------------------------------------------------- */
 #sync-flyoutpanel {
   font-size: @metro_font_normal@;
   font-weight: 400;
 }
 #sync-flyoutpanel button {
   font-weight: 700;
 }
 #sync-flyoutpanel .syncHeader {
   font-weight: 600;
 }
 #sync-flyoutpanel .syncSecondaryText {
   font-weight: 100;
   font-size: @metro_font_snormal@;
 }
 #sync-flyoutpanel .syncInstructionText {
   font-style: italic;
 }
 .syncThrobber .progressBall {
    margin: 2px;
    width: 22px;
    height: 22px;
  }
 .syncThrobber .progressBallInner {
   width: 5px;
   height: 5px;
   border-radius: 3px;
 }
 #sync-flyoutpanel .syncErrorText {
   color: red;
 }
 #sync-flyoutpanel textbox {
   margin: @metro_spacing_small@;
   padding: @metro_spacing_xsmall@ @metro_spacing_snormal@;
   background: @field_background_color@;
   border: @metro_border_thick@ solid @field_mid_foreground_color@ !important;
   color: @field_foreground_color@;
 }
 #sync-setup-throbber {
   margin-top: 15px;
   margin-left: 25px;
 }
 #sync-connected-device {
   width: 200px;
 }
 #sync-manualsetup-failure {
   width: 200px;
 }
 #sync-flyoutpanel .syncJPAKECode {
   margin: @metro_spacing_small@;
   padding: @metro_spacing_xsmall@ @metro_spacing_snormal@;
   background: @field_background_color@;
   border: @metro_border_thick@ solid @field_mid_foreground_color@ !important;
   color: @field_foreground_color@;
   display: block !important;
   font-size: @metro_font_large@ !important;
   font-weight: 600;
   letter-spacing: 0.4em;
   text-align: center;
   width: 175px;
 }
 #sync-connected-device {
   margin-bottom: 0px;
   padding-bottom: 0px;
 }
 #sync-connected-lastSynced {
   margin-top: 0px;
   padding-top: 0px;
 }
 #sync-connected-throbber {
   margin-top: 12px;
   margin-left: 15px;
 }
 /* About flyout pane ------------------------------------------------------- */
 /* Colors are defined in /browser/branding/<dir>/content/metro-about.css */
 #about-flyoutpanel {
   background-image: url('chrome://branding/content/metro-about-footer.png');
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: right bottom;
 }
 #about-flyoutpanel .text-link {
   color: inherit;
 }
 #about-flyoutpanel > .flyoutpanel-wrapper > .flyoutpanel-header,
 #about-flyoutpanel > .flyoutpanel-wrapper > .flyoutpanel-contents {
   background-color: inherit;
   border: none;
 }
 #about-policy-label {
   padding: 1.5em @metro_spacing_large@;
   margin: 1em -@metro_spacing_large@;
 }
 #about-version-label {
  margin-top: 11pt;
 }
 #currentChannel {
   margin: 0;
   padding: 0;
   font-weight: bold;
 }
 /* Preferences flyout pane ------------------------------------------------- */
 /* Lay out each <setting> in a single row */
 setting {
   min-height: @touch_row@; /* row size */
   -moz-box-align: center;
   -moz-box-orient: horizontal;
 }
 /* ...except for some exceptions */
 .setting-expanded {
   -moz-box-align: start;
   -moz-box-orient: vertical;
 }
 setting > vbox {
   -moz-box-flex: 1;
 }
 settings {
   margin-top: 32px;
 }
 .settings-title {
   font-weight: bold;
 }
 /* <setting> elements that are not in a <settings> group get special treatment */
 #prefs-flyoutpanel > setting,
 #sync-flyoutpanel > setting {
   margin-top: 16px;
 }
 #prefs-flyoutpanel > setting .preferences-title {
   font-weight: bold;
 }
 setting[type="integer"] > .preferences-alignment,
 setting[type="string"] > .preferences-alignment {
   -moz-box-flex: 3;
 }
 setting[type="file"] > .preferences-alignment,
 setting[type="directory"] > .preferences-alignment {
   -moz-box-align: center;
 }
 /* Removes the left side title vbox on radio setting */
 setting[type="radio"] > vbox {
   display: none;
 }
 #prefs-homepage-options, #prefs-homepage-popup {
   min-width: 200px;
 }
 .options-box {
   -moz-margin-start: 28px;  /* sized based on the 32px addon image */
 }
 .options-box > setting:last-child {
   border-bottom: 0;
 }
 .preferences-description {
   font-size: @font_small@ !important;
   color: grey;
 }
 .preferences-description:empty {
   display: none;
 }
 /* Clear private data prefs */
 /* hide subitems when other data checkbox is not checked */
 #prefs-privdata-other:not([checked]) + #prefs-privdata-subitems {
   display: none;
 }
 #prefs-privdata-subitems {
   display: block;
   padding-left: @metro_spacing_xnormal@;
   font-size: @metro_font_snormal@;
 }
 /* arrange sub-items in two columns */
 .privdata-subitem-item {
   display: inline-block;
   vertical-align: middle;
   margin: 0;
   width: 50%;
 }
 #clear-notification {
   max-height: 25px;
 }
 #clearprivacythrobber {
   max-width: 25px;
   max-height: 25px;
 }
 #clearprivacythrobber .progressContainer {
   width: 25px;
   height: 25px;
 }
 #clearprivacythrobber .progressBall {
   margin: 2px;
   width: 22px;
   height: 22px;
 }
 #clear-notification-done {
   font-weight: bold;
 }

The Tor Browser / annotate

browser/metro/theme/browser.css@7e26c7da4463 (annotated)

browser/metro/theme/browser.css