first part of syncing LCARStrek with Firefox 39 windows theme changes
[themes.git] / LCARStrek / browser / downloads / indicator.css
... / ...
CommitLineData
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
5/*** Status and progress indicator ***/
6
7#downloads-animation-container {
8 min-height: 1px;
9 min-width: 1px;
10 height: 1px;
11 margin-bottom: -1px;
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. */
15 position: relative;
16 /* The selected tab may overlap #downloads-indicator-notification */
17 z-index: 5;
18}
19
20/*** Main indicator icon ***/
21
22#downloads-indicator-icon {
23 background: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"),
24 0, 198, 18, 180) center no-repeat;
25 min-width: 18px;
26 min-height: 18px;
27}
28
29#downloads-button:hover > #downloads-indicator-anchor > #downloads-indicator-icon,
30#downloads-button[open="true"] > #downloads-indicator-anchor > #downloads-indicator-icon,
31#downloads-button[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-icon {
32 background: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"),
33 18, 198, 36, 180) center no-repeat;
34 color: #000000;
35}
36
37toolbar[brighttext] #downloads-button:not([attention]) > #downloads-indicator-anchor > #downloads-indicator-icon {
38/* background: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"),
39 0, 108, 18, 90) center no-repeat;*/
40}
41
42#downloads-button[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
43 background-image: url("chrome://browser/skin/downloads/download-glow.png");
44}
45
46#downloads-button[cui-areatype="menu-panel"][attention] {
47 list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png");
48 -moz-image-region: auto;
49}
50
51/* In the next few rules, we use :not([counter]) as a shortcut that is
52 equivalent to -moz-any([progress], [paused]). */
53
54#downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
55 background: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"),
56 0, 198, 18, 180) center no-repeat;
57 background-size: 12px;
58}
59
60#downloads-button:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
61 background-image: url("chrome://browser/skin/downloads/download-glow.png");
62}
63
64#downloads-button:not([counter]):hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
65#downloads-button[open="true"]:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
66#downloads-button:not([counter])[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
67 background: -moz-image-rect(url("chrome://browser/skin/ToolbarFx.png"),
68 18, 198, 36, 180) center no-repeat;
69 background-size: 12px;
70}
71
72/*** Download notifications ***/
73
74#downloads-indicator-notification {
75 opacity: 0;
76 background-size: 16px;
77 background-position: center;
78 background-repeat: no-repeat;
79 width: 16px;
80 height: 16px;
81}
82
83@keyframes downloadsIndicatorNotificationStartRight {
84 from { opacity: 0; transform: translate(-128px, 128px) scale(8); }
85 20% { opacity: .85; animation-timing-function: ease-out; }
86 to { opacity: 0; transform: translate(0) scale(1); }
87}
88
89@keyframes downloadsIndicatorNotificationStartLeft {
90 from { opacity: 0; transform: translate(128px, 128px) scale(8); }
91 20% { opacity: .85; animation-timing-function: ease-out; }
92 to { opacity: 0; transform: translate(0) scale(1); }
93}
94
95#downloads-notification-anchor[notification="start"] > #downloads-indicator-notification {
96 background-image: url("chrome://browser/skin/downloads/download-notification-start.png");
97 animation-name: downloadsIndicatorNotificationStartRight;
98 animation-duration: 1s;
99}
100
101#downloads-notification-anchor[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-notification {
102 animation-name: downloadsIndicatorNotificationStartLeft;
103}
104
105@keyframes downloadsIndicatorNotificationFinish {
106 from { opacity: 0; transform: scale(1); }
107 20% { opacity: .65; animation-timing-function: ease-in; }
108 to { opacity: 0; transform: scale(8); }
109}
110
111#downloads-notification-anchor[notification="finish"] > #downloads-indicator-notification {
112 background-image: url("chrome://browser/skin/downloads/download-notification-finish.png");
113 animation-name: downloadsIndicatorNotificationFinish;
114 animation-duration: 1s;
115}
116
117/*** Progress bar and text ***/
118
119#downloads-indicator-counter {
120 height: 9px;
121 margin: -3px 0 0;
122 color: #FFCF00;
123 font-size: 9px;
124 line-height: 9px;
125 text-align: center;
126}
127
128toolbar[brighttext] #downloads-indicator-counter {
129/* color: white;
130 text-shadow: 0 0 1px rgba(0,0,0,.7),
131 0 1px 1.5px rgba(0,0,0,.5);*/
132}
133
134#downloads-button[counter]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
135#downloads-button[counter][open="true"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
136 color: #000000;
137}
138
139#downloads-indicator-progress {
140 width: 16px;
141 height: 5px;
142 min-width: 0;
143 min-height: 0;
144 margin-top: 1px;
145 margin-bottom: 2px;
146 border-radius: 2px;
147 background-color: #795900;
148}
149
150#downloads-indicator-progress > .progress-bar {
151 -moz-appearance: none;
152 min-width: 0;
153 min-height: 0;
154 background-color: #008484;
155 border-radius: 2px 0 0 2px;
156}
157
158#downloads-indicator-progress > .progress-remainder {
159 min-width: 0;
160 min-height: 0;
161 background-color: #A09090;
162 border-radius: 0 2px 2px 0;
163}
164
165#downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
166 background-color: #8050B0;
167}
168
169#downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
170 background-color: #404048;
171}
172
173toolbar[mode="full"] > #downloads-button > .toolbarbutton-text {
174 margin: 0;
175 text-align: center;
176}