second and final part of syncing LCARStrek with Firefox 54 browser windows theme...
[themes.git] / LCARStrek / browser / downloads / indicator.css
CommitLineData
cf264274
RK
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/. */
4
38bd4bf1
RK
5/* === BEGIN indicator.inc.css === */
6
7#downloads-indicator-progress-icon {
8 background: var(--downloads-indicator-image-attention) bottom no-repeat;
9 background-size: 18px;
10 margin-top: 18px;
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.
14 */
15 animation-play-state: paused;
16 animation-delay: 1s;
17 animation-duration: 100s;
18 animation-timing-function: linear;
19 animation-name: indicatorArrowProgress;
20}
21/*
22toolbar[brighttext] #downloads-indicator-progress-icon {
23 background-image: var(--downloads-indicator-image-attention-inverted);
24 animation-name: indicatorArrowProgressDark;
25}
26*/
27@keyframes indicatorArrowProgress {
28 0% {
29 margin-top: 12px;
30 filter: brightness(1.2);
31 }
32 100% {
33 margin-top: 2px;
34 filter: brightness(1);
35 }
36}
37/*
38@keyframes indicatorArrowProgressDark {
39 0% {
40 margin-top: 12px;
41 filter: brightness(0.7);
42 }
43 100% {
44 margin-top: 2px;
45 filter: brightness(1);
46 }
47}
48*/
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;
54 animation-delay: 1s;
55 animation-iteration-count: 2;
56}
57
58@keyframes downloadsIndicatorStartJump {
59 0% {
60 transform: translateY(0);
61 animation-timing-function: ease-out;
62 }
63 50% {
64 transform: translateY(-3px);
65 animation-timing-function: ease-in;
66 }
67 100% {
68 transform: translateY(0);
69 }
70}
71/* === END indicator.inc.css === */
72
cf264274
RK
73/*** Status and progress indicator ***/
74
3a0880a9
RK
75#downloads-animation-container {
76 min-height: 1px;
77 min-width: 1px;
78 height: 1px;
79 margin-bottom: -1px;
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. */
cf264274 83 position: relative;
3a0880a9
RK
84 /* The selected tab may overlap #downloads-indicator-notification */
85 z-index: 5;
cf264274
RK
86}
87
88/*** Main indicator icon ***/
89
c9b0a396
RK
90/*@media not all and (min-resolution: 1.1dppx) {*/
91 #downloads-button {
38bd4bf1
RK
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);*/
2e389898 97 }
c9b0a396 98/*}*/
2e389898
RK
99
100
cf264274 101#downloads-indicator-icon {
38bd4bf1 102 background: var(--downloads-indicator-image) center no-repeat;
2e389898
RK
103 width: 18px;
104 height: 18px;
105 background-size: 18px;
cf264274
RK
106}
107
00f971bc
RK
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 {
38bd4bf1 111 background-image: var(--downloads-indicator-image-hover);
cf264274
RK
112 color: #000000;
113}
114
7c1e433b 115toolbar[brighttext] #downloads-button:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon {
38bd4bf1 116/* background-image: var(--downloads-indicator-image-inverted); */
cf264274
RK
117}
118
7c1e433b
RK
119#downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
120#downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
121 display: -moz-box;
d23bf94a
RK
122 height: 8px;
123 width: 8px;
124 min-width: 0;
125 border-radius: 50%;
126 /* "!important" is necessary to override the rule in toolbarbutton.css */
127 margin-top: -1px !important;
128 margin-right: -2px !important;
129}
130
131#downloads-button[cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
132 height: 7px;
133 width: 7px;
7c1e433b
RK
134}
135
136#downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
d23bf94a 137 background: #FF0000;
7c1e433b
RK
138}
139
140#downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
d23bf94a 141 background: #FFCF00;
7c1e433b
RK
142}
143
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 {
146 filter: none;
147}
148
149#downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon {
38bd4bf1 150 background-image: var(--downloads-indicator-image-attention);
cf264274
RK
151}
152
7c1e433b 153#downloads-button[cui-areatype="menu-panel"][attention="success"] {
45dc7657
RK
154 list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png");
155 -moz-image-region: auto;
156}
157
cf264274
RK
158/* In the next few rules, we use :not([counter]) as a shortcut that is
159 equivalent to -moz-any([progress], [paused]). */
160
00f971bc 161#downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
38bd4bf1 162 background: var(--downloads-indicator-image) center no-repeat;
cf264274
RK
163 background-size: 12px;
164}
165
7c1e433b 166#downloads-button:not([counter])[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
38bd4bf1 167 background-image: var(--downloads-indicator-image-attention);
cf264274
RK
168}
169
00f971bc
RK
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,
7c1e433b 172#downloads-button:not([counter])[attention="success"]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
38bd4bf1 173 background-image: var(--downloads-indicator-image-hover);
cf264274
RK
174 background-size: 12px;
175}
176
177/*** Download notifications ***/
178
179#downloads-indicator-notification {
180 opacity: 0;
181 background-size: 16px;
182 background-position: center;
183 background-repeat: no-repeat;
3a0880a9
RK
184 width: 16px;
185 height: 16px;
cf264274
RK
186}
187
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); }
192}
193
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); }
198}
199
3a0880a9 200#downloads-notification-anchor[notification="start"] > #downloads-indicator-notification {
cf264274
RK
201 background-image: url("chrome://browser/skin/downloads/download-notification-start.png");
202 animation-name: downloadsIndicatorNotificationStartRight;
203 animation-duration: 1s;
204}
205
3a0880a9 206#downloads-notification-anchor[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-notification {
cf264274
RK
207 animation-name: downloadsIndicatorNotificationStartLeft;
208}
209
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); }
214}
215
3a0880a9 216#downloads-notification-anchor[notification="finish"] > #downloads-indicator-notification {
cf264274
RK
217 background-image: url("chrome://browser/skin/downloads/download-notification-finish.png");
218 animation-name: downloadsIndicatorNotificationFinish;
219 animation-duration: 1s;
220}
221
222/*** Progress bar and text ***/
223
224#downloads-indicator-counter {
225 height: 9px;
226 margin: -3px 0 0;
227 color: #FFCF00;
228 font-size: 9px;
229 line-height: 9px;
230 text-align: center;
231}
232
589b5528 233toolbar[brighttext] #downloads-indicator-counter {
cf264274
RK
234/* color: white;
235 text-shadow: 0 0 1px rgba(0,0,0,.7),
236 0 1px 1.5px rgba(0,0,0,.5);*/
237}
238
00f971bc
RK
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 {
cf264274
RK
241 color: #000000;
242}
243
244#downloads-indicator-progress {
245 width: 16px;
246 height: 5px;
247 min-width: 0;
248 min-height: 0;
249 margin-top: 1px;
250 margin-bottom: 2px;
251 border-radius: 2px;
252 background-color: #795900;
253}
254
255#downloads-indicator-progress > .progress-bar {
256 -moz-appearance: none;
257 min-width: 0;
258 min-height: 0;
259 background-color: #008484;
260 border-radius: 2px 0 0 2px;
261}
262
263#downloads-indicator-progress > .progress-remainder {
264 min-width: 0;
265 min-height: 0;
266 background-color: #A09090;
267 border-radius: 0 2px 2px 0;
268}
269
00f971bc 270#downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
cf264274
RK
271 background-color: #8050B0;
272}
273
00f971bc 274#downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
cf264274
RK
275 background-color: #404048;
276}
277
3a0880a9 278toolbar[mode="full"] > #downloads-button > .toolbarbutton-text {
cf264274
RK
279 margin: 0;
280 text-align: center;
281}