/* 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/. */
@namespace html "http://www.w3.org/1999/xhtml";

#aboutDialog {
  /* Set an explicit line-height to avoid discrepancies in 'auto' spacing
     across screens with different device DPI, which may cause font metrics
     to round differently. */
  line-height: 1.5;
}

#aboutDialogContainer {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#leftBox {
  background-image: url("chrome://branding/content/about-logo.png");
  background-repeat: no-repeat;
  background-size: 192px auto;
  background-position: center 40px;
  /* min-width and min-height create room for the logo; logo is 192px tall w/
     40px above it, this leaves 8px on the bottom at the minimum height */
  min-width: 210px;
  min-height: 240px;
  margin-top: 20px;
  margin-inline-start: 30px;
}

@media (min-resolution: 2dppx) {
  #leftBox {
    background-image: url("chrome://branding/content/about-logo@2x.png");
  }
}

#rightBox {
  background-image: url("chrome://branding/content/about-wordmark.svg");
  background-repeat: no-repeat;
  background-size: 288px auto;
  /* padding-top creates room for the wordmark */
  padding-top: 38px;
  margin-top: 20px;
}

#rightBox:-moz-locale-dir(rtl) {
  background-position: 100% 0;
}

#clientBox {
  flex: 1 0 auto;
  padding: 10px 0 15px;
}

#bottomBox {
  padding: 15px 10px 0;
  min-height: 52px;
}

#release {
  font-weight: bold;
  font-size: 125%;
  margin-top: 10px;
  margin-inline-start: 0;
}

#version {
  font-weight: bold;
  margin-inline-start: 0;
  user-select: text;
  -moz-user-focus: normal;
  cursor: text;
}

#version.update {
  font-weight: normal;
}

#distribution,
#distributionId {
  display: none;
  margin-block: 0;
}

.text-blurb {
  margin-bottom: 10px;
  margin-inline-start: 0;
  padding-inline-start: 0;
}

#updateInfo {
  display: grid;
  grid-row-start: 1;
  grid-row-end: 4;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-template-rows: subgrid;
  grid-template-columns: subgrid;
}

#updateDeck {
  align-items: center;
}

#updateButton {
  margin-inline-start: 0;
  padding-inline-start: 0;
}

#updateDeck description {
  margin: 0;
}

#rightBox {
  /* We don't want this box to contribute arbitrarily to the intrinsic size of
   * the dialog, so set the width to a reasonable size, but let it flex to take
   * all available space. */
  width: 430px;
  flex: 1 auto;
}

.update-throbber {
  width: 16px;
  min-height: 16px;
  margin-inline-end: 3px;
  vertical-align: middle;
  content: image-set(url("chrome://global/skin/icons/loading.png"), url("chrome://global/skin/icons/loading@2x.png") 2x);
}

.text-link {
  color: #fff !important;
  text-decoration: underline;
}

description > .text-link {
  margin: 0;
  padding: 0;
}

#submit-feedback {
  margin-inline-start: .9em;
}

.bottom-link {
  text-align: center;
  margin: 0 40px;
}

#currentChannel {
  margin: 0;
  padding: 0;
  font-weight: bold;
}

#updateBox {
  line-height: normal;
  display: grid;
}

#icons {
  align-self: center;
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 2;
}

#icons > .icon {
  vertical-align: middle;
  -moz-context-properties: fill;
  margin: 0px 5px;
  width: 16px;
  height: 16px;
}

#icons:not(.checkingForUpdates, .downloading, .applying, .restarting) > .update-throbber,
#icons:not(.noUpdatesFound) > .noUpdatesFound,
#icons:not(.apply) > .apply {
  display: none;
}

#icons > .noUpdatesFound {
  fill: #30e60b;
}

#icons > .apply {
  fill: white;
}