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 @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 #alertImage {
  57   width: 80px;
  58   height: 80px;
  59   max-width: 80px;
  60   max-height: 80px;
  61   object-fit: scale-down;
  62   margin: 0 7px 7px;
  63 }
  64
  65 .alertTextBox {
  66   padding-top: 4px;
  67   /* The text box width is increased to make up for the lack of image when one
  68      is not provided. 349px is the text box width when a picture is present,
  69      255px, plus the width of the image, 80px, and the margins, 7px each. */
  70   width: 349px;
  71 }
  72
  73 #alertBox[hasImage] > box > #alertTextBox {
  74   width: 255px;
  75 }
  76
  77 #alertBox:not([hasImage]) > box > #alertTextBox {
  78   padding-inline-start: 8px;
  79 }
  80
  81 #alertTextLabel {
  82   padding-inline-end: 8px;
  83 }
  84
  85 .alertTitle {
  86   -moz-box-flex: 1;
  87   font-weight: bold;
  88   padding: 6px 8px 0;
  89   width: 255px;
  90 }
  91
  92 #alertFooter {
  93   -moz-box-align: start;
  94 }
  95
  96 #alertBox:not([hasOrigin]) > box > #alertTextBox,
  97 #alertFooter {
  98   padding-bottom: 5px;
  99 }
 100
 101 #alertSourceLabel {
 102   -moz-box-flex: 1;
 103   font-size: 83.334%;
 104   color: #A09090;
 105 }
 106
 107 #alertSettings {
 108   border-radius: 20px;
 109   min-width: 0;
 110   list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities-grayscale");
 111   margin-inline-end: 0;
 112   margin-bottom: 0;
 113 }
 114
 115 #alertSettings > .button-box {
 116   padding: 0;
 117 }
 118
 119 #alertSettings:hover,
 120 #alertSettings[open] {
 121   list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg#utilities-inverted");
 122 }
 123
 124 #alertSettings:hover {
 125 }
 126
 127 #alertSettings[open],
 128 #alertSettings:hover:active {
 129 }
 130
 131 #alertSettings[focusedViaMouse]:-moz-focusring > .button-box {
 132   border-color: transparent;
 133 }
 134
 135 #alertSettings > .button-box > .button-menu-dropmarker,
 136 #alertSettings > .button-box > .box-inherit > .button-text {
 137   display: none;
 138 }