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-indicator-anchor {
8 /* Makes the outermost stack element positioned, so that its contents are
9 rendered over the main browser window in the Z order. This is required by
10 the animated event notification. */
14 /*** Main indicator icon ***/
16 #downloads-indicator-icon {
17 background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"),
18 0, 108, 18, 90) center no-repeat;
23 #downloads-indicator:hover > #downloads-indicator-anchor > #downloads-indicator-icon,
24 #downloads-indicator[open="true"] > #downloads-indicator-anchor > #downloads-indicator-icon,
25 #downloads-indicator[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-icon,
26 #downloads-button:hover > #downloads-indicator-anchor > #downloads-indicator-icon,
27 #downloads-button[open="true"] > #downloads-indicator-anchor > #downloads-indicator-icon,
28 #downloads-button[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-icon {
29 background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"),
30 18, 108, 36, 90) center no-repeat;
34 #downloads-indicator-icon:-moz-lwtheme-brighttext {
35 /* background: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"),
36 0, 108, 18, 90) center no-repeat;*/
39 #downloads-indicator[attention] > #downloads-indicator-anchor > #downloads-indicator-icon,
40 #downloads-button[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
41 background-image: url("chrome://browser/skin/downloads/download-glow.png");
44 /* In the next few rules, we use :not([counter]) as a shortcut that is
45 equivalent to -moz-any([progress], [paused]). */
47 #downloads-indicator:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
48 #downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
49 background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"),
50 0, 108, 18, 90) center no-repeat;
51 background-size: 12px;
54 #downloads-indicator:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
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-indicator:not([counter]):hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
60 #downloads-indicator[open="true"]:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
61 #downloads-indicator:not([counter])[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
62 #downloads-button:not([counter]):hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
63 #downloads-button[open="true"]:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
64 #downloads-button:not([counter])[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
65 background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"),
66 18, 108, 36, 90) center no-repeat;
67 background-size: 12px;
70 /*** Download notifications ***/
72 #downloads-indicator-notification {
74 background-size: 16px;
75 background-position: center;
76 background-repeat: no-repeat;
79 @keyframes downloadsIndicatorNotificationStartRight {
80 from { opacity: 0; transform: translate(-128px, 128px) scale(8); }
81 20% { opacity: .85; animation-timing-function: ease-out; }
82 to { opacity: 0; transform: translate(0) scale(1); }
85 @keyframes downloadsIndicatorNotificationStartLeft {
86 from { opacity: 0; transform: translate(128px, 128px) scale(8); }
87 20% { opacity: .85; animation-timing-function: ease-out; }
88 to { opacity: 0; transform: translate(0) scale(1); }
91 #downloads-indicator[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-notification,
92 #downloads-button[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-notification {
93 background-image: url("chrome://browser/skin/downloads/download-notification-start.png");
94 animation-name: downloadsIndicatorNotificationStartRight;
95 animation-duration: 1s;
98 #downloads-indicator[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-notification,
99 #downloads-button[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-notification {
100 animation-name: downloadsIndicatorNotificationStartLeft;
103 @keyframes downloadsIndicatorNotificationFinish {
104 from { opacity: 0; transform: scale(1); }
105 20% { opacity: .65; animation-timing-function: ease-in; }
106 to { opacity: 0; transform: scale(8); }
109 #downloads-indicator[notification="finish"] > #downloads-indicator-anchor > #downloads-indicator-notification,
110 #downloads-button[notification="finish"] > #downloads-indicator-anchor > #downloads-indicator-notification {
111 background-image: url("chrome://browser/skin/downloads/download-notification-finish.png");
112 animation-name: downloadsIndicatorNotificationFinish;
113 animation-duration: 1s;
116 /*** Progress bar and text ***/
118 #downloads-indicator-counter {
127 #downloads-indicator-counter:-moz-lwtheme-brighttext {
129 text-shadow: 0 0 1px rgba(0,0,0,.7),
130 0 1px 1.5px rgba(0,0,0,.5);*/
133 #downloads-indicator[counter]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
134 #downloads-indicator[counter][open="true"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
135 #downloads-button[counter]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
136 #downloads-button[counter][open="true"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
140 #downloads-indicator-progress {
148 background-color: #795900;
151 #downloads-indicator-progress > .progress-bar {
152 -moz-appearance: none;
155 background-color: #008484;
156 border-radius: 2px 0 0 2px;
159 #downloads-indicator-progress > .progress-remainder {
162 background-color: #A09090;
163 border-radius: 0 2px 2px 0;
166 #downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar,
167 #downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
168 background-color: #8050B0;
171 #downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder,
172 #downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
173 background-color: #404048;
176 toolbar[mode="full"] > #downloads-indicator > .toolbarbutton-text {