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

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

browser/metro/theme/platform.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/. */
 /* 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;
 }

The Tor Browser / annotate

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

browser/metro/theme/platform.css