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/. */
5 /*** Status and progress indicator ***/
7 #downloads-animation-container {
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. */
16 /* The selected tab may overlap #downloads-indicator-notification */
20 /*** Main indicator icon ***/
22 #downloads-indicator-icon {
23 background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"),
24 0, 108, 18, 90) center no-repeat;
29 #downloads-button:hover > #downloads-indicator-anchor > #downloads-indicator-icon,
30 #downloads-button[open="true"] > #downloads-indicator-anchor > #downloads-indicator-icon,
31 #downloads-button[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-icon {
32 background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"),
33 18, 108, 36, 90) center no-repeat;
37 #downloads-indicator-icon:-moz-lwtheme-brighttext {
38 /* background: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"),
39 0, 108, 18, 90) center no-repeat;*/
42 #downloads-button[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
43 background-image: url("chrome://browser/skin/downloads/download-glow.png");
46 /* In the next few rules, we use :not([counter]) as a shortcut that is
47 equivalent to -moz-any([progress], [paused]). */
49 #downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
50 background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"),
51 0, 108, 18, 90) center no-repeat;
52 background-size: 12px;
55 #downloads-button:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
56 background-image: url("chrome://browser/skin/downloads/download-glow.png");
59 #downloads-button:not([counter]):hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
60 #downloads-button[open="true"]:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
61 #downloads-button:not([counter])[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
62 background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"),
63 18, 108, 36, 90) center no-repeat;
64 background-size: 12px;
67 /*** Download notifications ***/
69 #downloads-indicator-notification {
71 background-size: 16px;
72 background-position: center;
73 background-repeat: no-repeat;
78 @keyframes downloadsIndicatorNotificationStartRight {
79 from { opacity: 0; transform: translate(-128px, 128px) scale(8); }
80 20% { opacity: .85; animation-timing-function: ease-out; }
81 to { opacity: 0; transform: translate(0) scale(1); }
84 @keyframes downloadsIndicatorNotificationStartLeft {
85 from { opacity: 0; transform: translate(128px, 128px) scale(8); }
86 20% { opacity: .85; animation-timing-function: ease-out; }
87 to { opacity: 0; transform: translate(0) scale(1); }
90 #downloads-notification-anchor[notification="start"] > #downloads-indicator-notification {
91 background-image: url("chrome://browser/skin/downloads/download-notification-start.png");
92 animation-name: downloadsIndicatorNotificationStartRight;
93 animation-duration: 1s;
96 #downloads-notification-anchor[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-notification {
97 animation-name: downloadsIndicatorNotificationStartLeft;
100 @keyframes downloadsIndicatorNotificationFinish {
101 from { opacity: 0; transform: scale(1); }
102 20% { opacity: .65; animation-timing-function: ease-in; }
103 to { opacity: 0; transform: scale(8); }
106 #downloads-notification-anchor[notification="finish"] > #downloads-indicator-notification {
107 background-image: url("chrome://browser/skin/downloads/download-notification-finish.png");
108 animation-name: downloadsIndicatorNotificationFinish;
109 animation-duration: 1s;
112 /*** Progress bar and text ***/
114 #downloads-indicator-counter {
123 #downloads-indicator-counter:-moz-lwtheme-brighttext {
125 text-shadow: 0 0 1px rgba(0,0,0,.7),
126 0 1px 1.5px rgba(0,0,0,.5);*/
129 #downloads-button[counter]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
130 #downloads-button[counter][open="true"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
134 #downloads-indicator-progress {
142 background-color: #795900;
145 #downloads-indicator-progress > .progress-bar {
146 -moz-appearance: none;
149 background-color: #008484;
150 border-radius: 2px 0 0 2px;
153 #downloads-indicator-progress > .progress-remainder {
156 background-color: #A09090;
157 border-radius: 0 2px 2px 0;
160 #downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
161 background-color: #8050B0;
164 #downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
165 background-color: #404048;
168 toolbar[mode="full"] > #downloads-button > .toolbarbutton-text {