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 | ||
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 | ||
7729765c RK |
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 | ||
d471380e RK |
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 | } |