browser/base/content/aboutDialog.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 @namespace html "http://www.w3.org/1999/xhtml";
   5
   6 #aboutDialog {
   7   /* Set an explicit line-height to avoid discrepancies in 'auto' spacing
   8      across screens with different device DPI, which may cause font metrics
   9      to round differently. */
  10   line-height: 1.5;
  11 }
  12
  13 #aboutDialogContainer {
  14   display: flex;
  15   flex-direction: column;
  16   height: 100%;
  17 }
  18
  19 #leftBox {
  20   background-image: url("chrome://branding/content/about-logo.png");
  21   background-repeat: no-repeat;
  22   background-size: 192px auto;
  23   background-position: center 40px;
  24   /* min-width and min-height create room for the logo; logo is 192px tall w/
  25      40px above it, this leaves 8px on the bottom at the minimum height */
  26   min-width: 210px;
  27   min-height: 240px;
  28   margin-top: 20px;
  29   margin-inline-start: 30px;
  30 }
  31
  32 @media (min-resolution: 2dppx) {
  33   #leftBox {
  34     background-image: url("chrome://branding/content/about-logo@2x.png");
  35   }
  36 }
  37
  38 #rightBox {
  39   background-image: url("chrome://branding/content/about-wordmark.svg");
  40   background-repeat: no-repeat;
  41   background-size: 288px auto;
  42   /* padding-top creates room for the wordmark */
  43   padding-top: 38px;
  44   margin-top: 20px;
  45 }
  46
  47 #rightBox:-moz-locale-dir(rtl) {
  48   background-position: 100% 0;
  49 }
  50
  51 #clientBox {
  52   flex: 1 0 auto;
  53   padding: 10px 0 15px;
  54 }
  55
  56 #bottomBox {
  57   padding: 15px 10px 0;
  58   min-height: 52px;
  59 }
  60
  61 #release {
  62   font-weight: bold;
  63   font-size: 125%;
  64   margin-top: 10px;
  65   margin-inline-start: 0;
  66 }
  67
  68 #version {
  69   font-weight: bold;
  70   margin-inline-start: 0;
  71   user-select: text;
  72   -moz-user-focus: normal;
  73   cursor: text;
  74 }
  75
  76 #version.update {
  77   font-weight: normal;
  78 }
  79
  80 #distribution,
  81 #distributionId {
  82   display: none;
  83   margin-block: 0;
  84 }
  85
  86 .text-blurb {
  87   margin-bottom: 10px;
  88   margin-inline-start: 0;
  89   padding-inline-start: 0;
  90 }
  91
  92 #updateInfo {
  93   display: grid;
  94   grid-row-start: 1;
  95   grid-row-end: 4;
  96   grid-column-start: 2;
  97   grid-column-end: 3;
  98   grid-template-rows: subgrid;
  99   grid-template-columns: subgrid;
 100 }
 101
 102 #updateDeck {
 103   align-items: center;
 104 }
 105
 106 #updateButton {
 107   margin-inline-start: 0;
 108   padding-inline-start: 0;
 109 }
 110
 111 #updateDeck description {
 112   margin: 0;
 113 }
 114
 115 #rightBox {
 116   /* We don't want this box to contribute arbitrarily to the intrinsic size of
 117    * the dialog, so set the width to a reasonable size, but let it flex to take
 118    * all available space. */
 119   width: 430px;
 120   flex: 1 auto;
 121 }
 122
 123 .update-throbber {
 124   width: 16px;
 125   min-height: 16px;
 126   margin-inline-end: 3px;
 127   vertical-align: middle;
 128   content: image-set(url("chrome://global/skin/icons/loading.png"), url("chrome://global/skin/icons/loading@2x.png") 2x);
 129 }
 130
 131 .text-link {
 132   color: #fff !important;
 133   text-decoration: underline;
 134 }
 135
 136 description > .text-link {
 137   margin: 0;
 138   padding: 0;
 139 }
 140
 141 #submit-feedback {
 142   margin-inline-start: .9em;
 143 }
 144
 145 .bottom-link {
 146   text-align: center;
 147   margin: 0 40px;
 148 }
 149
 150 #currentChannel {
 151   margin: 0;
 152   padding: 0;
 153   font-weight: bold;
 154 }
 155
 156 #updateBox {
 157   line-height: normal;
 158   display: grid;
 159 }
 160
 161 #icons {
 162   align-self: center;
 163   grid-row-start: 1;
 164   grid-row-end: 2;
 165   grid-column-start: 1;
 166   grid-column-end: 2;
 167 }
 168
 169 #icons > .icon {
 170   vertical-align: middle;
 171   -moz-context-properties: fill;
 172   margin: 0px 5px;
 173   width: 16px;
 174   height: 16px;
 175 }
 176
 177 #icons:not(.checkingForUpdates, .downloading, .applying, .restarting) > .update-throbber,
 178 #icons:not(.noUpdatesFound) > .noUpdatesFound,
 179 #icons:not(.apply) > .apply {
 180   display: none;
 181 }
 182
 183 #icons > .noUpdatesFound {
 184   fill: #30e60b;
 185 }
 186
 187 #icons > .apply {
 188   fill: white;
 189 }