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) bottom no-repeat;
9 -moz-context-properties: fill;
10 fill: var(--toolbarbutton-icon-fill-attention);
11 background-size: 18px;
13 /* From javascript side we use animation delay from 0s to -100s to show
14 * corresponding frames needed for progress.
15 * animation-delay is set to a positive value to make nothing shown.
17 animation-play-state: paused;
19 animation-duration: 100s;
20 animation-timing-function: linear;
21 animation-name: indicatorArrowProgress;
24 toolbar[brighttext] #downloads-indicator-progress-icon {
25 animation-name: indicatorArrowProgressDark;
28 @keyframes indicatorArrowProgress {
31 filter: brightness(1.2);
35 filter: brightness(1);
39 @keyframes indicatorArrowProgressDark {
42 filter: brightness(0.7);
46 filter: brightness(1);
50 #downloads-button[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-icon {
51 animation-name: downloadsIndicatorStartJump;
52 /* Upon changing the overall duration below, please keep the delay time of
53 setTimeout() identical in indicator.js for this animation. */
54 animation-duration: 0.5s;
56 animation-iteration-count: 2;
59 @keyframes downloadsIndicatorStartJump {
61 transform: translateY(0);
62 animation-timing-function: ease-out;
65 transform: translateY(-3px);
66 animation-timing-function: ease-in;
69 transform: translateY(0);
72 /* === END indicator.inc.css === */
74 /*** Status and progress indicator ***/
76 #downloads-animation-container {
81 /* Makes the outermost animation container element positioned, so that its
82 contents are rendered over the main browser window in the Z order.
83 This is required by the animated event notification. */
85 /* The selected tab may overlap #downloads-indicator-notification */
89 /*** Main indicator icon ***/
92 --downloads-indicator-image: url("chrome://browser/skin/download.svg");
95 #downloads-indicator-icon {
96 background: var(--downloads-indicator-image) center no-repeat;
97 -moz-context-properties: fill;
98 fill: var(--toolbarbutton-icon-fill);
101 background-size: 18px;
104 #downloads-button:hover > #downloads-indicator-anchor > #downloads-indicator-icon,
105 #downloads-button[open="true"] > #downloads-indicator-anchor > #downloads-indicator-icon,
106 #downloads-button[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-icon {
107 fill: var(--toolbarbutton-icon-fill-inverted);
111 toolbar[brighttext] #downloads-button:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon {
112 /* fill: var(--toolbarbutton-icon-fill-inverted);*/
115 #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
116 #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
122 /* "!important" is necessary to override the rule in toolbarbutton.css */
123 margin-top: -1px !important;
124 margin-right: -2px !important;
127 #downloads-button[cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
132 #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
136 #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
140 #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive,
141 #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive {
145 #downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon {
146 fill: var(--toolbarbutton-icon-fill-attention);
149 #downloads-button[cui-areatype="menu-panel"][attention="success"] {
150 list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png");
151 -moz-image-region: auto;
154 /*** Download notifications ***/
156 #downloads-indicator-notification {
158 background-size: 16px;
159 background-position: center;
160 background-repeat: no-repeat;
165 @keyframes downloadsIndicatorNotificationStartRight {
166 from { opacity: 0; transform: translate(-128px, 128px) scale(8); }
167 20% { opacity: .85; animation-timing-function: ease-out; }
168 to { opacity: 0; transform: translate(0) scale(1); }
171 @keyframes downloadsIndicatorNotificationStartLeft {
172 from { opacity: 0; transform: translate(128px, 128px) scale(8); }
173 20% { opacity: .85; animation-timing-function: ease-out; }
174 to { opacity: 0; transform: translate(0) scale(1); }
177 #downloads-notification-anchor[notification="start"] > #downloads-indicator-notification {
178 background-image: url("chrome://browser/skin/downloads/download-notification-start.png");
179 animation-name: downloadsIndicatorNotificationStartRight;
180 animation-duration: 1s;
183 #downloads-notification-anchor[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-notification {
184 animation-name: downloadsIndicatorNotificationStartLeft;
187 @keyframes downloadsIndicatorNotificationFinish {
188 from { opacity: 0; transform: scale(1); }
189 20% { opacity: .65; animation-timing-function: ease-in; }
190 to { opacity: 0; transform: scale(8); }
193 #downloads-notification-anchor[notification="finish"] > #downloads-indicator-notification {
194 background-image: url("chrome://browser/skin/downloads/download-notification-finish.png");
195 animation-name: downloadsIndicatorNotificationFinish;
196 animation-duration: 1s;
199 toolbar[mode="full"] > #downloads-button > .toolbarbutton-text {