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 file,
3 * You can obtain one at http://mozilla.org/MPL/2.0/. */
5 /*** Panel and outer controls ***/
7 #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent {
8 /* Avoid that the arrow overlaps the selection on first item */
12 #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent {
17 background-color: transparent;
22 #downloadsPanel:not([hasdownloads]) > #downloadsListBox {
27 background: transparent;
32 #downloadsHistory > .button-box {
36 /*** Downloads Summary and List items ***/
39 richlistitem[type="download"] {
46 padding: 8px 38px 8px 12px;
50 #downloadsSummary > .downloadTypeIcon {
53 list-style-image: url("chrome://mozapps/skin/downloads/downloadIcon.png");
56 #downloadsSummaryDescription {
57 color: -moz-nativehyperlinktext;
60 richlistitem[type="download"] {
62 border-bottom: 1px dotted #9C9CFF;
63 background: transparent;
67 richlistitem[type="download"]:first-child {
68 /* border-top: 1px solid transparent;*/
71 #downloadsListBox:-moz-focusring > richlistitem[type="download"][selected] {
72 outline: 1px #008484 dotted;
74 /*-moz-outline-radius: 3px;*/
79 /* Prevent flickering when changing states. */
85 list-style-image: url("chrome://global/skin/icons/alert-error.gif");
100 -moz-appearance: none;
105 background: transparent;
107 list-style-image: url("chrome://browser/skin/downloads/buttons.png");
110 .downloadButton > .button-box {
114 /*** Highlighted list items ***/
116 richlistitem[type="download"][state="1"]:hover {
117 background-color: #794900;
122 /*** Button icons ***/
124 .downloadButton.downloadCancel {
125 -moz-image-region: rect(0px, 16px, 16px, 0px);
127 .downloadButton.downloadCancel:hover,
128 .downloadButton.downloadCancel:active {
129 -moz-image-region: rect(0px, 32px, 16px, 16px);
132 .downloadButton.downloadShow {
133 -moz-image-region: rect(16px, 16px, 32px, 0px);
135 .downloadButton.downloadShow:hover,
136 .downloadButton.downloadShow:active {
137 -moz-image-region: rect(16px, 32px, 32px, 16px);
140 .downloadButton.downloadRetry {
141 -moz-image-region: rect(32px, 16px, 48px, 0px);
143 .downloadButton.downloadRetry:hover,
144 .downloadButton.downloadRetry:active {
145 -moz-image-region: rect(32px, 32px, 48px, 16px);
148 /*** Status and progress indicator ***/
150 #downloads-indicator-anchor {
151 /* Makes the outermost stack element positioned, so that its contents are
152 rendered over the main browser window in the Z order. This is required by
153 the animated event notification. */
157 /*** Main indicator icon ***/
159 #downloads-indicator-icon {
160 background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
161 0, 108, 18, 90) center no-repeat;
166 #downloads-indicator:hover > #downloads-indicator-anchor > #downloads-indicator-icon,
167 #downloads-indicator[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-icon {
168 background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
169 18, 108, 36, 90) center no-repeat;
172 #downloads-indicator[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
173 background-image: url("chrome://browser/skin/downloads/download-glow.png");
176 #downloads-indicator:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
177 background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
178 0, 108, 18, 90) center no-repeat;
179 background-size: 12px;
182 #downloads-indicator:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
183 background-image: url("chrome://browser/skin/downloads/download-glow.png");
186 #downloads-indicator:not([counter]):hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
187 #downloads-indicator:not([counter])[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
188 background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
189 18, 108, 36, 90) center no-repeat;
192 /*** Event notification ***/
194 #downloads-indicator-notification {
196 background: url("chrome://browser/skin/downloads/download-notification.png")
198 background-size: 16px;
201 @keyframes downloadsIndicatorNotificationRight {
202 from { opacity: 0; transform: translate(-128px, 128px) scale(8); }
203 20% { opacity: .85; animation-timing-function: ease-out; }
204 to { opacity: 0; transform: translate(0) scale(1); }
207 @keyframes downloadsIndicatorNotificationLeft {
208 from { opacity: 0; transform: translate(128px, 128px) scale(8); }
209 20% { opacity: .85; animation-timing-function: ease-out; }
210 to { opacity: 0; transform: translate(0) scale(1); }
213 #downloads-indicator[notification] > #downloads-indicator-anchor > #downloads-indicator-notification {
214 animation-name: downloadsIndicatorNotificationRight;
215 animation-duration: 1s;
218 #downloads-indicator[notification]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-notification {
219 animation-name: downloadsIndicatorNotificationLeft;
222 /*** Progress bar and text ***/
224 #downloads-indicator-counter {
233 #downloads-indicator-progress {
241 background-color: #795900;
242 /*border: 1px solid #FFCF00;*/
245 #downloads-indicator-progress > .progress-bar {
246 -moz-appearance: none;
249 background-color: #008484;
250 border-radius: 2px 0 0 2px;
253 #downloads-indicator-progress > .progress-remainder {
256 background-color: #000000;
257 border-radius: 0 2px 2px 0;
260 #downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
261 background-color: #8050B0;
264 #downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
265 background-color: #000000;