The Tor Browser / file revision

 /* 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/. */

 /* Global Skin ------------------------------------------------------------- */

 @import url(chrome://global/skin/);

 %filter substitution

 %include defines.inc

 /* Typography & General Styling -------------------------------------------- */

 ::-moz-selection {

   color: white;

   background-color: @metro_orange@;

 }

 :root {

   font-family: "Segoe UI", sans-serif !important;

   font-size: @font_normal@;

 }

 .text-link {

   color: @metro_orange@;

   text-decoration: none;

 }

 textbox,

 menulist {

   -moz-appearance: none;

   min-width: @field_sizing@; /* button size */

   min-height: @field_sizing@; /* button size */

   margin: @metro_spacing_small@;

   padding: @metro_spacing_xsmall@ @metro_spacing_small@;

   font-size: @metro_font_normal@;

   font-weight: normal !important;

   color: @field_foreground_color@;

   background: @field_background_color@;

   border: @metro_border_thick@ solid @field_foreground_color@ !important;

   border-radius: 0;

 }

 textbox[disabled],

 menulist[disabled] {

   border-color: @field_disabled_foreground_color@ !important;

   color: @field_disabled_foreground_color@;

 }

 menulist:not([disabled]):hover:active {

   color: @field_background_color@;

   background: @field_foreground_color@;

 }

 /* Button ------------------------------------------------------------------ */

 button {

   -moz-appearance: none;

   border: 1px solid;

   font-size: @metro_font_normal@;

   font-weight: normal;

   margin: @metro_spacing_small@;

   min-width: @field_sizing@;

   min-height: 32px;

   padding: 3px 16px;

 }

 /* Non-default button colors */

 button {

   background: linear-gradient(to bottom, hsl(210, 5%, 89%), hsl(210, 5%, 87%));

   border-color: hsl(220, 5%, 86%);

   color: hsl(0, 0%, 10%);

 }

 button:not([disabled]):hover {

   background: linear-gradient(to bottom, hsl(210, 5%, 75%), hsl(210, 5%, 73%));

   border-color: hsl(210, 5%, 71%);

   color: hsl(0, 0%, 10%);

 }

 /* Default button colors */

 button[default],

 .notification-button-default {

   background: linear-gradient(to bottom, hsl(35, 100%, 50%), hsl(30, 100%, 50%));

   border-color: hsl(30, 100%, 48%);

   color: white;

 }

 button[default]:not([disabled]):hover,

 .notification-button-default:not([disabled]):hover {

   background: linear-gradient(to bottom, hsl(25, 100%, 47%), hsl(25, 100%, 45%));

   border-color: hsl(25, 100%, 43%);

   color: white;

 }

 /* Pushed button colors (both default and non-default */

 /* Note: these need enough specificity to override all the :hover rules above. */

 button:not([disabled]):hover:active,

 button:not([disabled])[checked="true"],

 button[default]:not([disabled])[checked="true"],

 .notification-button-default:not([disabled])[checked="true"] {

   background: linear-gradient(to bottom, hsl(210, 5%, 28%), hsl(210, 5%, 25%));

   border-color: hsl(216, 4%, 27%);

   color: white;

 }

 /* Disabled button colors (both default and non-default */

 button[disabled] {

   background: linear-gradient(to bottom, hsl(210, 3%, 93%), hsl(210, 3%, 92%));

   border-color: hsl(210, 3%, 91%);

   color: hsl(0, 0%, 60%);

 }

 /* Textbox ----------------------------------------------------------------- */

 textbox[isempty="true"] {

   color: @field_mid_foreground_color@;

 }

 spinbuttons {

   border: none;

 }

 .spinbuttons-box {

   border: none;

   -moz-box-orient: horizontal;

   -moz-box-direction: reverse;

 }

 .spinbuttons-down,

 .spinbuttons-up {

   border: none !important;

 }

 .spinbuttons-down {

   list-style-image: url("chrome://browser/skin/images/arrowdown-16.png");

 }

 .spinbuttons-up {

   list-style-image: url("chrome://browser/skin/images/arrowup-16.png");

 }

 /* Menu List --------------------------------------------------------------- */

 menulist {

   -moz-user-focus: ignore;

   padding: @metro_spacing_xsmall@ 0;

   -moz-padding-start: @metro_spacing_small@;

   border-color: @field_disabled_foreground_color@ !important;

 }

 /* Popup Menus ------------------------------------------------------------- */

 .menu-container {

   position: absolute;

   opacity: 0;

 }

 .menu-container[showingfrom="below"] {

   transform: translateY(@metro_spacing_normal@);

 }

 .menu-container[showingfrom="above"] {

   transform: translateY(-@metro_spacing_normal@);

 }

 .menu-container[hiding],

 .menu-container[showing] {

   transition: opacity ease-out 0.2s,

               transform ease-out 0.2s;

 }

 .menu-container[showing] {

   opacity: 1;

   transform: none;

 }

 .menu-popup > richlistbox {

   padding: 3px 0;

   border: #000 solid @metro_border_thick@;

   -moz-appearance: none;

   display: -moz-box;

 }

 .menu-popup > richlistbox > scrollbox {

   width: 100%;

   overflow-x: hidden !important;

 }

 .menu-popup richlistitem {

   width: 100%;

   min-height: @touch_button_small@;

   min-width: @touch_action_minwidth@; /* keep the button from being too narrow */

   border: 0 none;

   -moz-box-align: center;

   font-weight: 600;

 }

 .menu-popup > richlistbox > richlistitem {

   -moz-padding-end: 50px;

 }

 /* Additional styles applied to popups for form <select> elements. */

 #select-container {

   padding: 0;

   position: absolute;

   background-color: transparent;

 }

 #select-commands {

   -moz-appearance: none;

   background-color: white;

   border: #000 solid @metro_border_thick@;

   display: -moz-box;

   -moz-user-focus: ignore;

   -moz-box-align: stretch;

   width: 100%;

 }

 /* ensure click events are dispatched targetting the select option not the label */

 #select-commands > .option-command > label {

   pointer-events: none;

 }

 /* listcell element doesn't have flex="1" so we need to force it */

 .option-command > listcell {

   -moz-box-flex: 1 !important;

 }

 .option-command {

   min-height: @touch_button_small@;

   min-width: @touch_action_minwidth@; /* keep the button from being too narrow */

   border: 0 none;

 }

 .option-command.optgroup {

   font-weight: bold;

   font-style: italic;

   pointer-events: none;

 }

 .select-popup > richlistbox > scrollbox {

   width: 100%;

   overflow-x: hidden !important;

 }

 /* Toolbar Button --------------------------------------------------------- */

 toolbarbutton {

   min-width: @metro_spacing_large@; /* primary button size */

   min-height: @metro_spacing_large@; /* primary button size */

   -moz-appearance: none;

   margin: 0;

   padding: @metro_spacing_xsmall@;

 }

 toolbarbutton:not(.show-text) .toolbarbutton-text {

   display: none;

 }

 .toolbarbutton-icon[label]:not([label=""]),

 .toolbarbutton-icon[type="menu"] {

   -moz-margin-end: @metro_spacing_xsmall@;

 }

 toolbarbutton:not(.show-text) .toolbarbutton-icon,

 toolbarbutton:not([image]) .toolbarbutton-icon,

 toolbarbutton[image=''] .toolbarbutton-icon {

   -moz-margin-end: 0;

 }

 toolbarbutton:hover,

 toolbarbutton:hover:active,

 toolbarbutton[open="true"] {

   border-color: transparent;

 }

 /* Toggleswitch ------------------------------------------------------------ */

 checkbox.toggleswitch {

   margin: @metro_spacing_small@;

   min-height: @metro_spacing_normal@;

   font-weight: bold;

 }

 checkbox.toggleswitch hbox {

   -moz-box-align: center;

 }

 checkbox.toggleswitch:not([checked]) .onlabel,

 checkbox.toggleswitch[checked] .offlabel {

   display: none;

 }

 checkbox.toggleswitch radiogroup {

   border: @metro_border_thick@ solid @field_disabled_foreground_color@;

   -moz-box-orient: horizontal;

 }

 checkbox.toggleswitch radio {

   -moz-appearance: none;

   margin: 0;

   border: 0 none;

   border-radius: 0;

   background: 0 none;

   padding: 0;

   min-height: @metro_spacing_normal@;

   height: @metro_spacing_normal@;

 }

 checkbox.toggleswitch[checked] radio.checkbox-radio-on,

 checkbox.toggleswitch:not([checked]) radio.checkbox-radio-off {

   width: @metro_spacing_normal@;

   min-width: @metro_spacing_normal@;

   background: #000;

   margin: -@metro_border_thick@;

 }

 checkbox.toggleswitch[checked] radio.checkbox-radio-off,

 checkbox.toggleswitch:not([checked]) radio.checkbox-radio-on {

   width: @metro_spacing_xxxnormal@;

   min-width: @metro_spacing_xxxnormal@;

   margin: @metro_border_thin@;

 }

 checkbox.toggleswitch:not([checked]) radio.checkbox-radio-on {

   background: @field_disabled_foreground_color@;

 }

 checkbox.toggleswitch[checked] radio.checkbox-radio-off {

   background: @selected_color@;

 }

 checkbox.toggleswitch[checked] radio:last-child {

   -moz-margin-start: 0;

 }

 checkbox.toggleswitch[checked] radio:first-child {

   -moz-margin-end: 0;

 }

 /* Color Picker ------------------------------------------------------------ */

 colorpicker > panel {

   background-color: #767973;

 }

 colorpicker > vbox {

   background-color: #767973;

 }

 /* Rich List Box ---------------------------------------------------------- */

 richlistbox {

   -moz-user-focus: ignore;

   margin: 0;

 }

 richlistitem {

   -moz-user-focus: ignore;

   min-height: @metro_spacing_normal@; /* row size */

   padding: @metro_spacing_small@;

 }

 richlistitem label.normal,

 richlistitem description.normal,

 richlistitem label.normal-black,

 richlistitem description.normal-black,

 richlistitem label.normal-bold,

 richlistitem description.normal-bold{

   white-space: pre-wrap;

   word-wrap: break-word;

 }

 richlistitem label.normal,

 richlistitem description.normal {

   color: gray;

 }

 richlistitem label.normal-bold,

 richlistitem description.normal-bold {

   font-weight: bold;

 }

 richlistitem[selected],

 richlistitem:not([disabled]):not([selected]):active {

   background-color: @metro_orange@;

   color: #fff;

 }

 richlistitem:not([disabled]):not([selected]):hover {

   background-color: #ccc;

 }

 richlistitem.section-header,

 richlistitem[selected].section-header {

   font-weight: bold;

   color: #000;

   background-color: lightgray;

 }

 richlistitem[selected] .hide-on-select,

 richlistitem .show-on-select {

   visibility: collapse;

 }

 richlistitem[selected] .show-on-select,

 richlistitem .hide-on-select {

   visibility: visible;

 }

 richlistitem[typeName="message"] {

   border-bottom: 0;

 }

 /* Notification box ("info app bar") ---------------------------------------- */

 notification {

   background: hsl(0, 0%, 98%);

   border-bottom: 1px solid hsla(0, 0%, 0%, .07);

   box-shadow: 0 0 10px hsla(0, 0%, 0%, .1);

   min-height: 64px;

 }

 notificationbox[count="0"] .notification-layer,

 notificationbox[count="1"] .notification-layer,

 notificationbox[count="2"] .notification-layer[anonid="layer2"] {

   visibility: collapse;

 }

 notificationbox[count="2"] .notification-layer[anonid="layer1"],

 notificationbox[count="3"] .notification-layer[anonid="layer1"],

 notificationbox[count="3"] .notification-layer[anonid="layer2"] {

   visibility: visible;

 }

 .notification-layer {

   border: @metro_border_thin@ solid @field_disabled_foreground_color@;

   border-bottom: none;

   height:5px

 }

 .notification-inner {

   border-style: none;

   border: @metro_border_thin@ solid @field_disabled_foreground_color@;

 }

 .notification-button {

   -moz-margin-start: 0;

   -moz-margin-end: 20px;

 }

 .messageImage {

   width: 32px;

   height: 32px;

   -moz-margin-start: 40px;

   -moz-margin-end: 16px;

 }

 /* If there is no image set, collapse the image but keep the starting margin */

 .messageImage:not([src]) {

   width: 0;

   -moz-margin-end: 0;

 }

 .messageText {

   margin: 0;

 }

 .messageCloseButton {

   list-style-image: url("chrome://browser/skin/images/infobar-close.png");

   padding: 0;

   -moz-margin-start: 0;

   -moz-margin-end: 40px;

   -moz-image-region: rect(0, 40px, 40px, 0);

 }

 .messageCloseButton > .toolbarbutton-icon {

   margin: 0;

 }

 .messageCloseButton:hover {

   -moz-image-region: rect(0, 80px, 40px, 40px);

 }

 .messageCloseButton:hover:active {

   -moz-image-region: rect(0, 120px, 40px, 80px);

 }

 .notification-link {

   /* Make the link take up all the space before the buttons. */

   -moz-box-flex: 9999;

 }

 /* ensure the notification children pick up snapped-view box property overrides */

 .notification-button.box-inherit {

   -moz-margin-start: inherit;

   -moz-margin-end: inherit;

   width: inherit;

   display: inherit;

   overflow: inherit;

 }

 @media (max-width: 330px) {

   /* notifications need layout tweaks in narrow viewport

    */

   .notification-button {

       display: block;

       width: calc(100% - 40px);

       overflow: visible;

       -moz-margin-start: 40px;

       -moz-margin-end: 0;

   }

   .notification-inner {

     display: block;

     padding: @metro_spacing_xnormal@;

   }

   .notification-inner > [anonid="details"] {

     display: inline-block;

     width: calc(100% - 48px);

   }

   .notification-inner > .messageCloseButton {

     display: inline-block;

     vertical-align: top;

     -moz-margin-start: 8px;

     -moz-margin-end: 0;

   }

   .notification-inner > [anonid="details"] > .messageImage {

     display: inline;

     vertical-align: top;

     -moz-margin-start: 0;

     -moz-margin-end: 8px;

   }

   .notification-inner > [anonid="details"] > .messageText {

     display: inline-block;

     width: calc(100% - 40px);

     overflow: visible;

   }

 }

 /* Prompts ----------------------------------------------------------------- */

 .mainContainer {

   padding: 5vh 10vw;

 }

 .info\.title {

   font-size: @metro_font_large@;

   border-bottom: 1px solid #C7C7C7;

   padding-bottom: @metro_spacing_normal@;

   width: 100%;

   margin-left: 0;

   margin-right: 0;

 }

 .info\.body {

   font-size: @metro_font_normal@;

   padding-bottom: @metro_spacing_normal@;

   height: 100%;

   max-height: 30vh;

   max-width: 55vw;

 }

 .buttonContainer {

   background-color: transparent;

   border: none;

 }

 .buttonContainer > button {

   min-width: @touch_action_minwidth@;

   margin: 5px 0 5px @metro_spacing_xnormal@;

 }

 /* set all the things to display block to allow body to grow with content and

   obey overflow auto. Except on authentication prompts because a grid is used to

   align labels and textboxes. */

 tabmodalprompt:not([promptType="promptUserAndPass"]) .info\.body,

 tabmodalprompt:not([promptType="promptUserAndPass"]) .infoContainer,

 tabmodalprompt:not([promptType="promptUserAndPass"]) .topContainer,

 tabmodalprompt:not([promptType="promptUserAndPass"]) .topContainer > rows > row:not([hidden]),

 tabmodalprompt:not([promptType="promptUserAndPass"]) .topContainer > rows {

   display: block;

 }

 tabmodalprompt:not([promptType="promptUserAndPass"]) .infoContainer {

   overflow: auto;

 }

 .topContainer > rows > row > label {

   margin-left: 0;

 }

 .topContainer > rows > row > checkbox {

   -moz-margin-start: 0;

   -moz-padding-start: 0;

 }

 .topContainer > rows > row > textbox {

   font-size: @metro_font_normal@;

   height: 40px;

   margin: 5px 0;

   width: 100%;

 }

 .topContainer > rows > row > textbox[focused] {

   border-color: @metro_orange@ !important;

 }

 #stack[keyboardVisible] tabmodalprompt > spacer {

   min-height: 20px;

   max-height: 20px;

 }

 #stack[keyboardVisible] tabmodalprompt .info\.body {

   max-height: 15vh;

 }

 @media (max-width: 600px) {

   .mainContainer {

     padding: 5vh 5vw;

     width: 90vw;

   }

   .buttonContainer > button {

     min-width: @touch_action_snapped_minwidth@;

   }

 }

 /*.meta -------------------------------------------------------------------- */

 .meta {

   background-color: @panel_light_color@;

 }

 /* needs to observe the viewstate */

 .meta-section-container {

   padding: 45px 75px 0;

   -moz-box-orient: horizontal;

 }

 .meta-section-container[viewstate="snapped"],

 .meta-section-container[viewstate="portrait"] {

   -moz-box-orient: vertical;

   -moz-box-flex: 1;

 }

 .meta-section-container[viewstate="snapped"] {

   padding: 0;

 }

 .meta-section {

   margin: 0 @metro_spacing_large@;

 }

 .meta-section-container[viewstate="snapped"] > .meta-section {

   margin: 0 @metro_spacing_xnormal@;

 }

 .meta-section-title {

   margin: @metro_spacing_normal@ @tile_side_margin@;

   font-size: @metro_font_large@;

   font-weight: 100;

   cursor: default;

 }

 .meta-section-title.wide-title {

   font-size: @metro_font_xlarge@;

   margin-bottom: calc(40px - @tile_side_margin@);

 }

 .meta-section:not([expanded]) > .meta-section-title.narrow-title:after {

   content: ">";

 }

 .meta-section-container:not([viewstate="snapped"]) .meta-section-title.narrow-title,

 .meta-section-container[viewstate="snapped"] .meta-section-title.wide-title {

   display: none;

 }

 .meta-section-container[viewstate="snapped"] .meta-section-title,

 .meta-section-container[viewstate="snapped"] richgrid {

   margin-top: @metro_spacing_xnormal@;

   padding: 0;

 }

 .meta-section > richgrid {

   opacity: 1;

   transform: translateX(0) translateY(0);

   transition-duration: 367ms;

   transition-delay: 500ms;

   transition-timing-function: @metro_animation_easing@;

 }

 .meta-section:nth-child(2) > richgrid {

   transition-delay: 600ms;

 }

 .meta-section:nth-child(3) > richgrid {

   transition-delay: 700ms;

 }

 .meta-section:nth-child(4) > richgrid {

   transition-delay: 800ms;

 }

 .meta-section > richgrid[fade] {

   opacity: 0;

   transform: translateX(150px) translateY(25px);

 }

 #start-container[viewstate="snapped"] .meta-section > richgrid {

   transition-property: none;

 }

 /* Autocomplete ----------------------------------------------------------------- */

 #urlbar-autocomplete-scroll:not([autocomplete]) {

   transform: translateY(calc(3 * @grid_row_height@ + 64px));

   visibility: collapse;

 }

 #urlbar-autocomplete-scroll[autocomplete] {

   height: calc(3 * @grid_row_height@ + 64px);

   max-height: calc(3 * @grid_row_height@ + 64px);

   transform: translateY(0);

   transition-timing-function: @metro_animation_easing@;

   transition-property: transform;

   transition-duration: @metro_animation_duration@;

   transition-delay: 0s;

   visibility: visible;

 }

 #urlbar-autocomplete-scroll:not([autocomplete]) > .meta-section-container > .meta-section {

   opacity: 0;

 }

 #urlbar-autocomplete > .meta-section {

   opacity: 1;

   transition-property: opacity;

   transition-timing-function: @metro_animation_easing@;

   transition-duration: @metro_animation_duration@;

   transition-delay: 0s;

   visibility: visible;

 }

 #urlbar-autocomplete[nomatch] > .meta-section[anonid="results-container"] {

   opacity: 0;

   visibility: collapse;

 }

 #urlbar-autocomplete richgriditem:not([value]) {

   visibility: collapse;

 }

 /* App bars ----------------------------------------------------------------- */

 appbar {

   display: block;

   position: fixed;

   bottom: 0;

   width: 100%;

   transform: translateY(100%);

   transition: transform @metro_animation_duration@ @metro_animation_easing@;

   font-size: 0;

   visibility: hidden;

 }

 appbar[hiding],

 appbar[visible] {

   visibility: visible;

 }

 appbar[visible] {

   transform: none;

 }

 #stack[keyboardVisible] > appbar {

   /* Slow the bottom up transition since it's impossible to match the system's

      soft keyboard movement. */

   transition: transform @metro_animation_duration@ @metro_animation_easing@,

               bottom @appbar_keyboard_slideup_duration@ @appbar_keyboard_slideup_easing@ @appbar_keyboard_slideup_delay@;

 }

 appbar toolbar {

   -moz-appearance: none;

   -moz-box-align: center;

   border: 0;

   width: 100%;

   min-height: @toolbar_height@;

   font-size: 1rem;

 }

 appbar toolbar toolbarbutton {

   border: 0;

   margin: 0 @toolbar_horizontal_spacing@;

   padding: 0;

   /* Don't inherit background-color from toolbarbutton[checked="true"] */

   background-color: transparent;

 }

 appbar toolbar toolbarbutton[disabled] {

   visibility: collapse;

 }

 appbar toolbar[labelled] {

   min-height: @labelled_toolbar_height@;

 }

 appbar toolbar[labelled] toolbarbutton {

   -moz-box-orient: vertical;

 }

 appbar toolbar[labelled] toolbarbutton > .toolbarbutton-text {

   display: block;

   padding-top: @metro_spacing_small@;

   font-size: 0.75rem;

 }

 /* Sprites */

 .appbar-primary .toolbarbutton-icon,

 .appbar-secondary .toolbarbutton-icon {

   width: 40px;

   height: 40px;

 }

 /* Primary sprite format: one button per sprite.

    States from left to right:

    normal, hover, active/toggled, toggled+hover, toggled+active. */

 .appbar-primary {

   -moz-image-region: rect(0 40px 40px 0);

 }

 .appbar-primary:not([checked]):hover:not(:active):not([disabled]) {

   -moz-image-region: rect(0 80px 40px 40px);

 }

 .appbar-primary:not([checked]):active:not([disabled]),

 .appbar-primary[checked] {

   -moz-image-region: rect(0 120px 40px 80px);

 }

 .appbar-primary[checked]:hover:not(:active):not([disabled]) {

   -moz-image-region: rect(0 160px 40px 120px);

 }

 .appbar-primary[checked]:active:not([disabled]) {

   -moz-image-region: rect(0 200px 40px 160px);

 }

 @media (min-resolution: @min_res_140pc@) {

   .appbar-primary {

     -moz-image-region: rect(0 56px 56px 0);

   }

   .appbar-primary:not([checked]):hover:not(:active):not([disabled]) {

     -moz-image-region: rect(0 112px 56px 56px);

   }

   .appbar-primary:not([checked]):active:not([disabled]),

   .appbar-primary[checked] {

     -moz-image-region: rect(0 168px 56px 112px);

   }

   .appbar-primary[checked]:hover:not(:active):not([disabled]) {

     -moz-image-region: rect(0 224px 56px 168px);

   }

   .appbar-primary[checked]:active:not([disabled]) {

     -moz-image-region: rect(0 280px 56px 224px);

   }

 }

 @media (min-resolution: @min_res_180pc@) {

   .appbar-primary {

     -moz-image-region: rect(0 72px 72px 0);

   }

   .appbar-primary:not([checked]):hover:not(:active):not([disabled]) {

     -moz-image-region: rect(0 144px 72px 72px);

   }

   .appbar-primary:not([checked]):active:not([disabled]),

   .appbar-primary[checked] {

     -moz-image-region: rect(0 216px 72px 144px);

   }

   .appbar-primary[checked]:hover:not(:active):not([disabled]) {

     -moz-image-region: rect(0 288px 72px 216px);

   }

   .appbar-primary[checked]:active:not([disabled]) {

     -moz-image-region: rect(0 360px 72px 288px);

   }

 }

 /* Secondary sprite format: one sprite for everything */

 .appbar-secondary {

   list-style-image: url(chrome://browser/skin/images/appbar-icons.png);

 }

 /* Flyout panels (sidebars) ------------------------------------------------- */

 .flyout-narrow {

   width: 346px;

 }

 /* Some elements don't resize to fit their container properly for some reason.

  * Setting max-width on the element or a child fixes it. */

 .flyout-narrow .flyoutpanel-hack {

   max-width: calc(346px - 2 * 40px);

 }

 .console-row-code {

    padding-top: 2px;

    font-size: small;

 }