sync both themes with toolkit windows theme changes in Mozilla 51 cycle

[themes.git] / EarlyBlue / global / alerts / alert-common.css

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

/* ===== alert.css =====================================================
  == Shared styles specific to the alerts dialog.
  ======================================================================= */

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

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

#alertBox[animate] {
  animation-timing-function: cubic-bezier(.12,1.23,.48,1.09);
}

#alertBox[animate][clicked] {
  animation-duration: .6s;
  animation-name: alert-zoom-animation;
}

/* This is used if the close button is clicked
   before the animation has finished. */
#alertBox[animate][closing] {
  animation-duration: .6s;
  animation-name: alert-fadeout-animation;
}

#alertBox[animate]:not([clicked]):not([closing]):hover {
  /* !important is necessary because CSS animations have highest
     importance in the cascade with exception to !important rules. */
  opacity: 1 !important;
}

@keyframes alert-animation {
  from {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes alert-zoom-animation {
  to {
    opacity: 0;
  }
}

@keyframes alert-fadeout-animation {
  to {
    opacity: 0;
  }
}

#alertIcon {
  margin-top: 6px;
  margin-inline-start: 8px;
  margin-inline-end: 0;
  margin-bottom: 0;
  width: 16px;
  min-height: 16px;
  max-height: 16px;
}

@media (resolution: 2dppx) {
  #alertIcon {
    image-rendering: -moz-crisp-edges;
  }
}

#alertImage {
  width: 80px;
  height: 80px;
  max-width: 80px;
  max-height: 80px;
  object-fit: scale-down;
  margin: 0 7px 7px;
}

.alertTextBox {
  padding-top: 4px;
  /* The text box width is increased to make up for the lack of image when one
     is not provided. 349px is the text box width when a picture is present,
     255px, plus the width of the image, 80px, and the margins, 7px each. */
  width: 349px;
}

#alertBox[hasImage] > box > #alertTextBox {
  width: 255px;
}

#alertBox:not([hasImage]) > box > #alertTextBox {
  padding-inline-start: 8px;
}

#alertTextLabel {
  padding-inline-end: 8px;
}

.alertTitle {
  -moz-box-flex: 1;
  font-weight: bold;
  padding: 6px 8px 0;
  width: 255px;
}

#alertFooter {
  -moz-box-align: start;
}

#alertBox:not([hasOrigin]) > box > #alertTextBox,
#alertFooter {
  padding-bottom: 5px;
}

#alertSourceLabel {
  -moz-box-flex: 1;
  font-size: 83.334%;
  color: #808080;
}

#alertSettings {
  border-radius: 0px;
  min-width: 0;
  list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities-grayscale");
  margin-inline-end: 0;
  margin-bottom: 0;
}

#alertSettings > .button-box {
  padding: 0;
}

#alertSettings:hover,
#alertSettings[open] {
  list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities-inverted");
}

#alertSettings:hover {
}

#alertSettings[open],
#alertSettings:hover:active {
}

#alertSettings[focusedViaMouse]:-moz-focusring > .button-box {
  border-color: transparent;
}

#alertSettings > .button-box > .button-menu-dropmarker,
#alertSettings > .button-box > .box-inherit > .button-text {
  display: none;
}