sync both themes with toolkit windows theme changes in Mozilla 45-48 cycles
[themes.git] / 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 #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: #A09090;
121 }
122
123 #alertSettings {
124   border-radius: 20px;
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 }