Commit | Line | Data |
---|---|---|
cf264274 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 | /*** Status and progress indicator ***/ | |
6 | ||
3a0880a9 RK |
7 | #downloads-animation-container { |
8 | min-height: 1px; | |
9 | min-width: 1px; | |
10 | height: 1px; | |
11 | margin-bottom: -1px; | |
12 | /* Makes the outermost animation container element positioned, so that its | |
13 | contents are rendered over the main browser window in the Z order. | |
14 | This is required by the animated event notification. */ | |
cf264274 | 15 | position: relative; |
3a0880a9 RK |
16 | /* The selected tab may overlap #downloads-indicator-notification */ |
17 | z-index: 5; | |
cf264274 RK |
18 | } |
19 | ||
20 | /*** Main indicator icon ***/ | |
21 | ||
c9b0a396 RK |
22 | /*@media not all and (min-resolution: 1.1dppx) {*/ |
23 | #downloads-button { | |
2e389898 RK |
24 | --downloads-indicator-icon: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"), 0, 198, 18, 180); |
25 | --downloads-indicator-icon-hover: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"), 18, 198, 36, 180); | |
26 | --downloads-indicator-icon-attention: url("chrome://browser/skin/downloads/download-glow.png"); | |
27 | } | |
c9b0a396 | 28 | /*}*/ |
2e389898 RK |
29 | |
30 | ||
cf264274 | 31 | #downloads-indicator-icon { |
2e389898 RK |
32 | background: var(--downloads-indicator-icon) center no-repeat; |
33 | width: 18px; | |
34 | height: 18px; | |
35 | background-size: 18px; | |
cf264274 RK |
36 | } |
37 | ||
00f971bc RK |
38 | #downloads-button:hover > #downloads-indicator-anchor > #downloads-indicator-icon, |
39 | #downloads-button[open="true"] > #downloads-indicator-anchor > #downloads-indicator-icon, | |
40 | #downloads-button[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-icon { | |
2e389898 | 41 | background-image: var(--downloads-indicator-icon-hover); |
cf264274 RK |
42 | color: #000000; |
43 | } | |
44 | ||
7c1e433b | 45 | toolbar[brighttext] #downloads-button:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon { |
2e389898 | 46 | /* background-image: var(--downloads-indicator-icon-inverted); */ |
cf264274 RK |
47 | } |
48 | ||
7c1e433b RK |
49 | #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, |
50 | #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { | |
51 | display: -moz-box; | |
d23bf94a RK |
52 | height: 8px; |
53 | width: 8px; | |
54 | min-width: 0; | |
55 | border-radius: 50%; | |
56 | /* "!important" is necessary to override the rule in toolbarbutton.css */ | |
57 | margin-top: -1px !important; | |
58 | margin-right: -2px !important; | |
59 | } | |
60 | ||
61 | #downloads-button[cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { | |
62 | height: 7px; | |
63 | width: 7px; | |
7c1e433b RK |
64 | } |
65 | ||
66 | #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { | |
d23bf94a | 67 | background: #FF0000; |
7c1e433b RK |
68 | } |
69 | ||
70 | #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { | |
d23bf94a | 71 | background: #FFCF00; |
7c1e433b RK |
72 | } |
73 | ||
74 | #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive, | |
75 | #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive { | |
76 | filter: none; | |
77 | } | |
78 | ||
79 | #downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon { | |
2e389898 | 80 | background-image: var(--downloads-indicator-icon-attention); |
cf264274 RK |
81 | } |
82 | ||
7c1e433b | 83 | #downloads-button[cui-areatype="menu-panel"][attention="success"] { |
45dc7657 RK |
84 | list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png"); |
85 | -moz-image-region: auto; | |
86 | } | |
87 | ||
cf264274 RK |
88 | /* In the next few rules, we use :not([counter]) as a shortcut that is |
89 | equivalent to -moz-any([progress], [paused]). */ | |
90 | ||
00f971bc | 91 | #downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { |
2e389898 | 92 | background: var(--downloads-indicator-icon) center no-repeat; |
cf264274 RK |
93 | background-size: 12px; |
94 | } | |
95 | ||
7c1e433b | 96 | #downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { |
2e389898 | 97 | background-image: var(--downloads-indicator-icon-attention); |
cf264274 RK |
98 | } |
99 | ||
00f971bc RK |
100 | #downloads-button:not([counter]):hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter, |
101 | #downloads-button[open="true"]:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter, | |
7c1e433b | 102 | #downloads-button:not([counter])[attention="success"]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { |
2e389898 | 103 | background-image: var(--downloads-indicator-icon-hover); |
cf264274 RK |
104 | background-size: 12px; |
105 | } | |
106 | ||
107 | /*** Download notifications ***/ | |
108 | ||
109 | #downloads-indicator-notification { | |
110 | opacity: 0; | |
111 | background-size: 16px; | |
112 | background-position: center; | |
113 | background-repeat: no-repeat; | |
3a0880a9 RK |
114 | width: 16px; |
115 | height: 16px; | |
cf264274 RK |
116 | } |
117 | ||
118 | @keyframes downloadsIndicatorNotificationStartRight { | |
119 | from { opacity: 0; transform: translate(-128px, 128px) scale(8); } | |
120 | 20% { opacity: .85; animation-timing-function: ease-out; } | |
121 | to { opacity: 0; transform: translate(0) scale(1); } | |
122 | } | |
123 | ||
124 | @keyframes downloadsIndicatorNotificationStartLeft { | |
125 | from { opacity: 0; transform: translate(128px, 128px) scale(8); } | |
126 | 20% { opacity: .85; animation-timing-function: ease-out; } | |
127 | to { opacity: 0; transform: translate(0) scale(1); } | |
128 | } | |
129 | ||
3a0880a9 | 130 | #downloads-notification-anchor[notification="start"] > #downloads-indicator-notification { |
cf264274 RK |
131 | background-image: url("chrome://browser/skin/downloads/download-notification-start.png"); |
132 | animation-name: downloadsIndicatorNotificationStartRight; | |
133 | animation-duration: 1s; | |
134 | } | |
135 | ||
3a0880a9 | 136 | #downloads-notification-anchor[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-notification { |
cf264274 RK |
137 | animation-name: downloadsIndicatorNotificationStartLeft; |
138 | } | |
139 | ||
140 | @keyframes downloadsIndicatorNotificationFinish { | |
141 | from { opacity: 0; transform: scale(1); } | |
142 | 20% { opacity: .65; animation-timing-function: ease-in; } | |
143 | to { opacity: 0; transform: scale(8); } | |
144 | } | |
145 | ||
3a0880a9 | 146 | #downloads-notification-anchor[notification="finish"] > #downloads-indicator-notification { |
cf264274 RK |
147 | background-image: url("chrome://browser/skin/downloads/download-notification-finish.png"); |
148 | animation-name: downloadsIndicatorNotificationFinish; | |
149 | animation-duration: 1s; | |
150 | } | |
151 | ||
152 | /*** Progress bar and text ***/ | |
153 | ||
154 | #downloads-indicator-counter { | |
155 | height: 9px; | |
156 | margin: -3px 0 0; | |
157 | color: #FFCF00; | |
158 | font-size: 9px; | |
159 | line-height: 9px; | |
160 | text-align: center; | |
161 | } | |
162 | ||
589b5528 | 163 | toolbar[brighttext] #downloads-indicator-counter { |
cf264274 RK |
164 | /* color: white; |
165 | text-shadow: 0 0 1px rgba(0,0,0,.7), | |
166 | 0 1px 1.5px rgba(0,0,0,.5);*/ | |
167 | } | |
168 | ||
00f971bc RK |
169 | #downloads-button[counter]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter, |
170 | #downloads-button[counter][open="true"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { | |
cf264274 RK |
171 | color: #000000; |
172 | } | |
173 | ||
174 | #downloads-indicator-progress { | |
175 | width: 16px; | |
176 | height: 5px; | |
177 | min-width: 0; | |
178 | min-height: 0; | |
179 | margin-top: 1px; | |
180 | margin-bottom: 2px; | |
181 | border-radius: 2px; | |
182 | background-color: #795900; | |
183 | } | |
184 | ||
185 | #downloads-indicator-progress > .progress-bar { | |
186 | -moz-appearance: none; | |
187 | min-width: 0; | |
188 | min-height: 0; | |
189 | background-color: #008484; | |
190 | border-radius: 2px 0 0 2px; | |
191 | } | |
192 | ||
193 | #downloads-indicator-progress > .progress-remainder { | |
194 | min-width: 0; | |
195 | min-height: 0; | |
196 | background-color: #A09090; | |
197 | border-radius: 0 2px 2px 0; | |
198 | } | |
199 | ||
00f971bc | 200 | #downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar { |
cf264274 RK |
201 | background-color: #8050B0; |
202 | } | |
203 | ||
00f971bc | 204 | #downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder { |
cf264274 RK |
205 | background-color: #404048; |
206 | } | |
207 | ||
3a0880a9 | 208 | toolbar[mode="full"] > #downloads-button > .toolbarbutton-text { |
cf264274 RK |
209 | margin: 0; |
210 | text-align: center; | |
211 | } |