EarlyBlue/global/alerts/alert-common.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
   5 /* ===== alert.css =====================================================
   6   == Shared styles specific to the alerts dialog.
   7   ======================================================================= */
   8
   9 @import url("chrome://global/skin/");
  10
  11 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
  12
  13 #alertBox[animate] {
  14   animation-timing-function: cubic-bezier(.12,1.23,.48,1.09);
  15 }
  16
  17 #alertBox[animate][clicked] {
  18   animation-duration: .6s;
  19   animation-name: alert-zoom-animation;
  20 }
  21
  22 /* This is used if the close button is clicked
  23    before the animation has finished. */
  24 #alertBox[animate][closing] {
  25   animation-duration: .6s;
  26   animation-name: alert-fadeout-animation;
  27 }
  28
  29 @keyframes alert-animation {
  30   from {
  31     opacity: 0;
  32   }
  33   5% {
  34     opacity: 1;
  35   }
  36   95% {
  37     opacity: 1;
  38   }
  39   to {
  40     opacity: 0;
  41   }
  42 }
  43
  44 @keyframes alert-zoom-animation {
  45   to {
  46     opacity: 0;
  47   }
  48 }
  49
  50 @keyframes alert-fadeout-animation {
  51   to {
  52     opacity: 0;
  53   }
  54 }
  55
  56 #alertIcon {
  57   margin-top: 6px;
  58   margin-inline-start: 8px;
  59   margin-inline-end: 0;
  60   margin-bottom: 0;
  61   width: 16px;
  62   min-height: 16px;
  63   max-height: 16px;
  64 }
  65
  66 @media (resolution: 2dppx) {
  67   #alertIcon {
  68     image-rendering: -moz-crisp-edges;
  69   }
  70 }
  71
  72 #alertImage {
  73   width: 80px;
  74   height: 80px;
  75   max-width: 80px;
  76   max-height: 80px;
  77   object-fit: scale-down;
  78   margin: 0 7px 7px;
  79 }
  80
  81 .alertTextBox {
  82   padding-top: 4px;
  83   /* The text box width is increased to make up for the lack of image when one
  84      is not provided. 349px is the text box width when a picture is present,
  85      255px, plus the width of the image, 80px, and the margins, 7px each. */
  86   width: 349px;
  87 }
  88
  89 #alertBox[hasImage] > box > #alertTextBox {
  90   width: 255px;
  91 }
  92
  93 #alertBox:not([hasImage]) > box > #alertTextBox {
  94   padding-inline-start: 8px;
  95 }
  96
  97 #alertTextLabel {
  98   padding-inline-end: 8px;
  99 }
 100
 101 .alertTitle {
 102   -moz-box-flex: 1;
 103   font-weight: bold;
 104   padding: 6px 8px 0;
 105   width: 255px;
 106 }
 107
 108 #alertFooter {
 109   -moz-box-align: start;
 110 }
 111
 112 #alertBox:not([hasOrigin]) > box > #alertTextBox,
 113 #alertFooter {
 114   padding-bottom: 5px;
 115 }
 116
 117 #alertSourceLabel {
 118   -moz-box-flex: 1;
 119   font-size: 83.334%;
 120   color: #808080;
 121 }
 122
 123 #alertSettings {
 124   border-radius: 0px;
 125   min-width: 0;
 126   list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities-grayscale");
 127   margin-inline-end: 0;
 128   margin-bottom: 0;
 129 }
 130
 131 #alertSettings > .button-box {
 132   padding: 0;
 133 }
 134
 135 #alertSettings:hover,
 136 #alertSettings[open] {
 137   list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities-inverted");
 138 }
 139
 140 #alertSettings:hover {
 141 }
 142
 143 #alertSettings[open],
 144 #alertSettings:hover:active {
 145 }
 146
 147 #alertSettings[focusedViaMouse]:-moz-focusring > .button-box {
 148   border-color: transparent;
 149 }
 150
 151 #alertSettings > .button-box > .button-menu-dropmarker,
 152 #alertSettings > .button-box > .box-inherit > .button-text {
 153   display: none;
 154 }