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 /* === BEGIN indicator.inc.css === */
7 #downloads-indicator-progress-icon {
8 background: var(--downloads-indicator-image-attention) bottom no-repeat;
11 /* From javascript side we use animation delay from 0s to -100s to show
12 * corresponding frames needed for progress.
13 * animation-delay is set to a positive value to make nothing shown.
15 animation-play-state: paused;
17 animation-duration: 100s;
18 animation-timing-function: linear;
19 animation-name: indicatorArrowProgress;
22 toolbar[brighttext] #downloads-indicator-progress-icon {
23 background-image: var(--downloads-indicator-image-attention-inverted);
24 animation-name: indicatorArrowProgressDark;
27 @keyframes indicatorArrowProgress {
30 filter: brightness(1.2);
34 filter: brightness(1);
38 @keyframes indicatorArrowProgressDark {
41 filter: brightness(0.7);
45 filter: brightness(1);
49 #downloads-button[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-icon {
50 animation-name: downloadsIndicatorStartJump;
51 /* Upon changing the overall duration below, please keep the delay time of
52 setTimeout() identical in indicator.js for this animation. */
53 animation-duration: 0.5s;
55 animation-iteration-count: 2;
58 @keyframes downloadsIndicatorStartJump {
60 transform: translateY(0);
61 animation-timing-function: ease-out;
64 transform: translateY(-3px);
65 animation-timing-function: ease-in;
68 transform: translateY(0);
71 /* === END indicator.inc.css === */
73 /*** Status and progress indicator ***/
75 #downloads-animation-container {
80 /* Makes the outermost animation container element positioned, so that its
81 contents are rendered over the main browser window in the Z order.
82 This is required by the animated event notification. */
84 /* The selected tab may overlap #downloads-indicator-notification */
88 /*** Main indicator icon ***/
90 /*@media not all and (min-resolution: 1.1dppx) {*/
92 --downloads-indicator-image: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"), 0, 198, 18, 180);
93 --downloads-indicator-image-hover: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"), 18, 198, 36, 180);
94 --downloads-indicator-image-attention: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"), 36, 198, 54, 180);
95 /* --downloads-indicator-image-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 0, 198, 18, 180);
96 --downloads-indicator-image-attention-inverted: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 18, 198, 36, 180);*/
101 #downloads-indicator-icon {
102 background: var(--downloads-indicator-image) center no-repeat;
105 background-size: 18px;
108 #downloads-button:hover > #downloads-indicator-anchor > #downloads-indicator-icon,
109 #downloads-button[open="true"] > #downloads-indicator-anchor > #downloads-indicator-icon,
110 #downloads-button[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-icon {
111 background-image: var(--downloads-indicator-image-hover);
115 toolbar[brighttext] #downloads-button:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon {
116 /* background-image: var(--downloads-indicator-image-inverted); */
119 #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
120 #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
126 /* "!important" is necessary to override the rule in toolbarbutton.css */
127 margin-top: -1px !important;
128 margin-right: -2px !important;
131 #downloads-button[cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
136 #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
140 #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
144 #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive,
145 #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive {
149 #downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon {
150 background-image: var(--downloads-indicator-image-attention);
153 #downloads-button[cui-areatype="menu-panel"][attention="success"] {
154 list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png");
155 -moz-image-region: auto;
158 /* In the next few rules, we use :not([counter]) as a shortcut that is
159 equivalent to -moz-any([progress], [paused]). */
161 #downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
162 background: var(--downloads-indicator-image) center no-repeat;
163 background-size: 12px;
166 #downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
167 background-image: var(--downloads-indicator-image-attention);
170 #downloads-button:not([counter]):hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
171 #downloads-button[open="true"]:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
172 #downloads-button:not([counter])[attention="success"]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
173 background-image: var(--downloads-indicator-image-hover);
174 background-size: 12px;
177 /*** Download notifications ***/
179 #downloads-indicator-notification {
181 background-size: 16px;
182 background-position: center;
183 background-repeat: no-repeat;
188 @keyframes downloadsIndicatorNotificationStartRight {
189 from { opacity: 0; transform: translate(-128px, 128px) scale(8); }
190 20% { opacity: .85; animation-timing-function: ease-out; }
191 to { opacity: 0; transform: translate(0) scale(1); }
194 @keyframes downloadsIndicatorNotificationStartLeft {
195 from { opacity: 0; transform: translate(128px, 128px) scale(8); }
196 20% { opacity: .85; animation-timing-function: ease-out; }
197 to { opacity: 0; transform: translate(0) scale(1); }
200 #downloads-notification-anchor[notification="start"] > #downloads-indicator-notification {
201 background-image: url("chrome://browser/skin/downloads/download-notification-start.png");
202 animation-name: downloadsIndicatorNotificationStartRight;
203 animation-duration: 1s;
206 #downloads-notification-anchor[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-notification {
207 animation-name: downloadsIndicatorNotificationStartLeft;
210 @keyframes downloadsIndicatorNotificationFinish {
211 from { opacity: 0; transform: scale(1); }
212 20% { opacity: .65; animation-timing-function: ease-in; }
213 to { opacity: 0; transform: scale(8); }
216 #downloads-notification-anchor[notification="finish"] > #downloads-indicator-notification {
217 background-image: url("chrome://browser/skin/downloads/download-notification-finish.png");
218 animation-name: downloadsIndicatorNotificationFinish;
219 animation-duration: 1s;
222 /*** Progress bar and text ***/
224 #downloads-indicator-counter {
233 toolbar[brighttext] #downloads-indicator-counter {
235 text-shadow: 0 0 1px rgba(0,0,0,.7),
236 0 1px 1.5px rgba(0,0,0,.5);*/
239 #downloads-button[counter]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
240 #downloads-button[counter][open="true"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
244 #downloads-indicator-progress {
252 background-color: #795900;
255 #downloads-indicator-progress > .progress-bar {
256 -moz-appearance: none;
259 background-color: #008484;
260 border-radius: 2px 0 0 2px;
263 #downloads-indicator-progress > .progress-remainder {
266 background-color: #A09090;
267 border-radius: 0 2px 2px 0;
270 #downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
271 background-color: #8050B0;
274 #downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
275 background-color: #404048;
278 toolbar[mode="full"] > #downloads-button > .toolbarbutton-text {