LCARStrek/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 #alertBox[animate]:not([clicked]):not([closing]):hover {
  30   /* !important is necessary because CSS animations have highest
  31      importance in the cascade with exception to !important rules. */
  32   opacity: 1 !important;
  33 }
  34
  35 @keyframes alert-animation {
  36   from {
  37     opacity: 0;
  38   }
  39   5% {
  40     opacity: 1;
  41   }
  42   95% {
  43     opacity: 1;
  44   }
  45   to {
  46     opacity: 0;
  47   }
  48 }
  49
  50 @keyframes alert-zoom-animation {
  51   to {
  52     opacity: 0;
  53   }
  54 }
  55
  56 @keyframes alert-fadeout-animation {
  57   to {
  58     opacity: 0;
  59   }
  60 }
  61
  62 #alertIcon {
  63   margin-top: 6px;
  64   margin-inline-start: 8px;
  65   margin-inline-end: 0;
  66   margin-bottom: 0;
  67   width: 16px;
  68   min-height: 16px;
  69   max-height: 16px;
  70 }
  71
  72 @media (resolution: 2dppx) {
  73   #alertIcon {
  74     image-rendering: -moz-crisp-edges;
  75   }
  76 }
  77
  78 #alertImage {
  79   width: 80px;
  80   height: 80px;
  81   max-width: 80px;
  82   max-height: 80px;
  83   object-fit: scale-down;
  84   margin: 0 7px 7px;
  85 }
  86
  87 .alertTextBox {
  88   padding-top: 4px;
  89   /* The text box width is increased to make up for the lack of image when one
  90      is not provided. 349px is the text box width when a picture is present,
  91      255px, plus the width of the image, 80px, and the margins, 7px each. */
  92   width: 349px;
  93 }
  94
  95 #alertBox[hasImage] > box > #alertTextBox {
  96   width: 255px;
  97 }
  98
  99 #alertBox:not([hasImage]) > box > #alertTextBox {
 100   padding-inline-start: 8px;
 101 }
 102
 103 #alertTextLabel {
 104   padding-inline-end: 8px;
 105 }
 106
 107 .alertTitle {
 108   -moz-box-flex: 1;
 109   font-weight: bold;
 110   padding: 6px 8px 0;
 111   width: 255px;
 112 }
 113
 114 #alertFooter {
 115   -moz-box-align: start;
 116 }
 117
 118 #alertBox:not([hasOrigin]) > box > #alertTextBox,
 119 #alertFooter {
 120   padding-bottom: 5px;
 121 }
 122
 123 #alertSourceLabel {
 124   -moz-box-flex: 1;
 125   font-size: 83.334%;
 126   color: #A09090;
 127 }
 128
 129 #alertSettings {
 130   border-radius: 20px;
 131   min-width: 0;
 132   list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities-grayscale");
 133   margin-inline-end: 0;
 134   margin-bottom: 0;
 135 }
 136
 137 #alertSettings > .button-box {
 138   padding: 0;
 139 }
 140
 141 #alertSettings:hover,
 142 #alertSettings[open] {
 143   list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities-inverted");
 144 }
 145
 146 #alertSettings:hover {
 147 }
 148
 149 #alertSettings[open],
 150 #alertSettings:hover:active {
 151 }
 152
 153 #alertSettings[focusedViaMouse]:-moz-focusring > .button-box {
 154   border-color: transparent;
 155 }
 156
 157 #alertSettings > .button-box > .button-menu-dropmarker,
 158 #alertSettings > .button-box > .box-inherit > .button-text {
 159   display: none;
 160 }