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 | ||
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 | } |