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 /*@media not all and (min-resolution: 1.1dppx) {*/
24 --downloads-indicator-icon: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"), 0, 198, 18, 180);
25 --downloads-indicator-icon-hover: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"), 18, 198, 36, 180);
26 --downloads-indicator-icon-attention: url("chrome://browser/skin/downloads/download-glow.png");
31 #downloads-indicator-icon {
32 background: var(--downloads-indicator-icon) center no-repeat;
35 background-size: 18px;
38 #downloads-button:hover > #downloads-indicator-anchor > #downloads-indicator-icon,
39 #downloads-button[open="true"] > #downloads-indicator-anchor > #downloads-indicator-icon,
40 #downloads-button[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-icon {
41 background-image: var(--downloads-indicator-icon-hover);
45 toolbar[brighttext] #downloads-button:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon {
46 /* background-image: var(--downloads-indicator-icon-inverted); */
49 #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
50 #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
54 background-size: contain;
57 /* filter: drop-shadow(0 1px 0 hsla(206, 50%, 10%, .15));*/
60 #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
61 background: #FF0000 url("chrome://browser/skin/update-badge-failed.svg") no-repeat center;
64 #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
65 background: #FFCF00 url("chrome://browser/skin/update-badge-failed.svg") no-repeat center;
68 #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive,
69 #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive {
73 #downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon {
74 background-image: var(--downloads-indicator-icon-attention);
77 #downloads-button[cui-areatype="menu-panel"][attention="success"] {
78 list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png");
79 -moz-image-region: auto;
82 /* In the next few rules, we use :not([counter]) as a shortcut that is
83 equivalent to -moz-any([progress], [paused]). */
85 #downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
86 background: var(--downloads-indicator-icon) center no-repeat;
87 background-size: 12px;
90 #downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
91 background-image: var(--downloads-indicator-icon-attention);
94 #downloads-button:not([counter]):hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
95 #downloads-button[open="true"]:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
96 #downloads-button:not([counter])[attention="success"]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
97 background-image: var(--downloads-indicator-icon-hover);
98 background-size: 12px;
101 /*** Download notifications ***/
103 #downloads-indicator-notification {
105 background-size: 16px;
106 background-position: center;
107 background-repeat: no-repeat;
112 @keyframes downloadsIndicatorNotificationStartRight {
113 from { opacity: 0; transform: translate(-128px, 128px) scale(8); }
114 20% { opacity: .85; animation-timing-function: ease-out; }
115 to { opacity: 0; transform: translate(0) scale(1); }
118 @keyframes downloadsIndicatorNotificationStartLeft {
119 from { opacity: 0; transform: translate(128px, 128px) scale(8); }
120 20% { opacity: .85; animation-timing-function: ease-out; }
121 to { opacity: 0; transform: translate(0) scale(1); }
124 #downloads-notification-anchor[notification="start"] > #downloads-indicator-notification {
125 background-image: url("chrome://browser/skin/downloads/download-notification-start.png");
126 animation-name: downloadsIndicatorNotificationStartRight;
127 animation-duration: 1s;
130 #downloads-notification-anchor[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-notification {
131 animation-name: downloadsIndicatorNotificationStartLeft;
134 @keyframes downloadsIndicatorNotificationFinish {
135 from { opacity: 0; transform: scale(1); }
136 20% { opacity: .65; animation-timing-function: ease-in; }
137 to { opacity: 0; transform: scale(8); }
140 #downloads-notification-anchor[notification="finish"] > #downloads-indicator-notification {
141 background-image: url("chrome://browser/skin/downloads/download-notification-finish.png");
142 animation-name: downloadsIndicatorNotificationFinish;
143 animation-duration: 1s;
146 /*** Progress bar and text ***/
148 #downloads-indicator-counter {
157 toolbar[brighttext] #downloads-indicator-counter {
159 text-shadow: 0 0 1px rgba(0,0,0,.7),
160 0 1px 1.5px rgba(0,0,0,.5);*/
163 #downloads-button[counter]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
164 #downloads-button[counter][open="true"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
168 #downloads-indicator-progress {
176 background-color: #795900;
179 #downloads-indicator-progress > .progress-bar {
180 -moz-appearance: none;
183 background-color: #008484;
184 border-radius: 2px 0 0 2px;
187 #downloads-indicator-progress > .progress-remainder {
190 background-color: #A09090;
191 border-radius: 0 2px 2px 0;
194 #downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
195 background-color: #8050B0;
198 #downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
199 background-color: #404048;
202 toolbar[mode="full"] > #downloads-button > .toolbarbutton-text {