Commit | Line | Data |
---|---|---|
d471380e RK |
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 | ||
689d5552 RK |
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 | ||
d471380e RK |
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 | ||
7729765c RK |
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 | ||
d471380e RK |
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; | |
dbad77ea RK |
132 | list-style-image: url("chrome://mozapps/skin/extensions/utilities.svg"); |
133 | -moz-context-properties: fill; | |
134 | fill: #A09090; | |
d471380e RK |
135 | margin-inline-end: 0; |
136 | margin-bottom: 0; | |
137 | } | |
138 | ||
139 | #alertSettings > .button-box { | |
140 | padding: 0; | |
141 | } | |
142 | ||
143 | #alertSettings:hover, | |
144 | #alertSettings[open] { | |
dbad77ea | 145 | fill: #000000; |
d471380e RK |
146 | } |
147 | ||
148 | #alertSettings:hover { | |
149 | } | |
150 | ||
151 | #alertSettings[open], | |
152 | #alertSettings:hover:active { | |
153 | } | |
154 | ||
155 | #alertSettings[focusedViaMouse]:-moz-focusring > .button-box { | |
156 | border-color: transparent; | |
157 | } | |
158 | ||
159 | #alertSettings > .button-box > .button-menu-dropmarker, | |
160 | #alertSettings > .button-box > .box-inherit > .button-text { | |
161 | display: none; | |
162 | } |