tweaks for making devtools look nicer
[themes.git] / LCARStrek / browser / downloads / downloads.css
CommitLineData
64897c3a
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 file,
3 * You can obtain one at http://mozilla.org/MPL/2.0/. */
4
5/*** Panel and outer controls ***/
6
64897c3a
RK
7#downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent {
8 padding: 0;
9}
10
11#downloadsListBox {
64897c3a
RK
12 background-color: transparent;
13 padding: 4px;
14 color: inherit;
15}
16
990cba4b
RK
17#downloadsPanel:not([hasdownloads]) > #downloadsListBox {
18 display: none;
19}
20
64897c3a 21#downloadsHistory {
64897c3a 22 cursor: pointer;
5968ec68
RK
23 margin: 4px !important;
24}
25
26#downloadsPanel[keyfocus] > #downloadsFooter > #downloadsHistory:focus {
27 outline: 1px #008484 dotted;
28 outline-offset: -1px;
64897c3a
RK
29}
30
31#downloadsHistory > .button-box {
5968ec68 32 border: none;
64897c3a
RK
33}
34
990cba4b 35/*** Downloads Summary and List items ***/
64897c3a 36
990cba4b 37#downloadsSummary,
64897c3a
RK
38richlistitem[type="download"] {
39 height: 7em;
990cba4b
RK
40 -moz-padding-end: 0;
41 color: inherit;
42}
43
44#downloadsSummary {
45 padding: 8px 38px 8px 12px;
46 cursor: pointer;
5968ec68
RK
47 -moz-user-focus: normal;
48}
49
50#downloadsPanel[keyfocus] > #downloadsFooter > #downloadsSummary:focus {
51 outline: 1px #008484 dotted;
52 outline-offset: -5px;
990cba4b
RK
53}
54
55#downloadsSummary > .downloadTypeIcon {
5968ec68 56 list-style-image: url("chrome://browser/skin/downloads/download-summary.png");
990cba4b
RK
57}
58
59#downloadsSummaryDescription {
5968ec68 60 color: #3333FF;
990cba4b
RK
61}
62
63richlistitem[type="download"] {
64897c3a
RK
64 margin: 0;
65 border-bottom: 1px dotted #9C9CFF;
66 background: transparent;
fcfb76ce 67 padding: 8px;
64897c3a
RK
68}
69
70richlistitem[type="download"]:first-child {
71/* border-top: 1px solid transparent;*/
72}
73
74#downloadsListBox:-moz-focusring > richlistitem[type="download"][selected] {
75 outline: 1px #008484 dotted;
76 outline-offset: -1px;
b8384c33 77 /*-moz-outline-radius: 3px;*/
64897c3a
RK
78}
79
64897c3a
RK
80.downloadTypeIcon {
81 -moz-margin-end: 8px;
82 /* Prevent flickering when changing states. */
a6757852
RK
83 height: 32px;
84 width: 32px;
64897c3a
RK
85}
86
87.blockedIcon {
88 list-style-image: url("chrome://global/skin/icons/alert-error.gif");
89}
90
5968ec68
RK
91/* We hold .downloadTarget, .downloadProgress and .downloadDetails inside of
92 a vbox with class .downloadContainer. We set the font-size of the entire
93 container to 90% because:
94
95 1) This is the size that we want .downloadDetails to be
96 2) The container's width is set by localizers by &downloadDetails.width;,
97 which is a ch unit. Since this is the value that should control the
98 panel width, we apply it to the outer container to constrain
99 .downloadTarget and .downloadProgress.
100
101 Finally, since we want .downloadTarget's font-size to be at 100% of the
102 font-size of .downloadContainer's parent, we use calc to go from the
103 smaller font-size back to the original font-size.
104 */
105#downloadsSummaryDetails,
106.downloadContainer {
107 font-size: 90%;
108}
109
110#downloadsSummaryDescription,
64897c3a
RK
111.downloadTarget {
112 margin-bottom: 6px;
113 cursor: inherit;
114}
115
5968ec68
RK
116.downloadTarget {
117 font-size: calc(100%/0.9);
118}
119
120#downloadsSummaryDetails,
64897c3a
RK
121.downloadDetails {
122 opacity: 0.6;
64897c3a
RK
123 cursor: inherit;
124}
125
126.downloadButton {
64897c3a
RK
127 min-width: 0;
128 min-height: 0;
5968ec68
RK
129 margin: 3px;
130/* border: none; */
64897c3a
RK
131 background: transparent;
132 padding: 5px;
133 list-style-image: url("chrome://browser/skin/downloads/buttons.png");
134}
135
136.downloadButton > .button-box {
5968ec68 137 border: 1px solid transparent;
64897c3a
RK
138 padding: 0;
139}
140
5968ec68
RK
141#downloadsPanel[keyfocus] .downloadButton:focus > .button-box {
142 border: 1px dotted #008484;
143}
144
64897c3a
RK
145/*** Highlighted list items ***/
146
ed1a91c6 147/* #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover { */
e75098eb 148#downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"]:hover {
5968ec68 149 border-radius: 3px;
64897c3a
RK
150 background-color: #794900;
151 color: #FFCF00;
152 cursor: pointer;
153}
154
155/*** Button icons ***/
156
157.downloadButton.downloadCancel {
fcfb76ce 158 -moz-image-region: rect(0px, 16px, 16px, 0px);
64897c3a 159}
5968ec68
RK
160richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel,
161richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:hover,
162richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:active {
fcfb76ce 163 -moz-image-region: rect(0px, 32px, 16px, 16px);
64897c3a
RK
164}
165
166.downloadButton.downloadShow {
fcfb76ce 167 -moz-image-region: rect(16px, 16px, 32px, 0px);
64897c3a 168}
5968ec68
RK
169richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow,
170richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow:hover,
171richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow:active {
fcfb76ce 172 -moz-image-region: rect(16px, 32px, 32px, 16px);
64897c3a
RK
173}
174
175.downloadButton.downloadRetry {
fcfb76ce 176 -moz-image-region: rect(32px, 16px, 48px, 0px);
64897c3a 177}
5968ec68
RK
178richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry,
179richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:hover,
180richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:active {
fcfb76ce 181 -moz-image-region: rect(32px, 32px, 48px, 16px);
64897c3a
RK
182}
183
184/*** Status and progress indicator ***/
185
64897c3a 186#downloads-indicator-anchor {
64897c3a
RK
187 /* Makes the outermost stack element positioned, so that its contents are
188 rendered over the main browser window in the Z order. This is required by
189 the animated event notification. */
190 position: relative;
191}
192
193/*** Main indicator icon ***/
194
195#downloads-indicator-icon {
a736ce46 196 background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"),
64897c3a 197 0, 108, 18, 90) center no-repeat;
b8384c33
RK
198 min-width: 18px;
199 min-height: 18px;
64897c3a
RK
200}
201
202#downloads-indicator:hover > #downloads-indicator-anchor > #downloads-indicator-icon,
7b928026 203#downloads-indicator[open="true"] > #downloads-indicator-anchor > #downloads-indicator-icon,
64897c3a 204#downloads-indicator[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-icon {
a736ce46 205 background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"),
64897c3a 206 18, 108, 36, 90) center no-repeat;
e75098eb 207 color: #000000;
64897c3a
RK
208}
209
5968ec68
RK
210#downloads-indicator-icon:-moz-lwtheme-brighttext {
211/* background: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"),
212 0, 108, 18, 90) center no-repeat;*/
213}
214
64897c3a 215#downloads-indicator[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
990cba4b 216 background-image: url("chrome://browser/skin/downloads/download-glow.png");
64897c3a
RK
217}
218
5968ec68
RK
219/* In the next few rules, we use :not([counter]) as a shortcut that is
220 equivalent to -moz-any([progress], [paused]). */
221
64897c3a 222#downloads-indicator:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
a736ce46 223 background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"),
64897c3a
RK
224 0, 108, 18, 90) center no-repeat;
225 background-size: 12px;
226}
227
228#downloads-indicator:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
990cba4b 229 background-image: url("chrome://browser/skin/downloads/download-glow.png");
64897c3a
RK
230}
231
232#downloads-indicator:not([counter]):hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
e75098eb 233#downloads-indicator[open="true"]:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
64897c3a 234#downloads-indicator:not([counter])[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
a736ce46 235 background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"),
64897c3a 236 18, 108, 36, 90) center no-repeat;
e75098eb 237 background-size: 12px;
64897c3a
RK
238}
239
5968ec68 240/*** Download notifications ***/
64897c3a
RK
241
242#downloads-indicator-notification {
243 opacity: 0;
64897c3a 244 background-size: 16px;
5968ec68
RK
245 background-position: center;
246 background-repeat: no-repeat;
64897c3a
RK
247}
248
5968ec68 249@keyframes downloadsIndicatorNotificationStartRight {
71a617ff 250 from { opacity: 0; transform: translate(-128px, 128px) scale(8); }
c29b709d 251 20% { opacity: .85; animation-timing-function: ease-out; }
71a617ff 252 to { opacity: 0; transform: translate(0) scale(1); }
64897c3a
RK
253}
254
5968ec68 255@keyframes downloadsIndicatorNotificationStartLeft {
71a617ff 256 from { opacity: 0; transform: translate(128px, 128px) scale(8); }
c29b709d 257 20% { opacity: .85; animation-timing-function: ease-out; }
71a617ff 258 to { opacity: 0; transform: translate(0) scale(1); }
64897c3a
RK
259}
260
5968ec68
RK
261#downloads-indicator[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-notification {
262 background-image: url("chrome://browser/skin/downloads/download-notification-start.png");
263 animation-name: downloadsIndicatorNotificationStartRight;
c29b709d 264 animation-duration: 1s;
64897c3a
RK
265}
266
5968ec68
RK
267#downloads-indicator[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-notification {
268 animation-name: downloadsIndicatorNotificationStartLeft;
269}
270
271@keyframes downloadsIndicatorNotificationFinish {
272 from { opacity: 0; transform: scale(1); }
273 20% { opacity: .65; animation-timing-function: ease-in; }
274 to { opacity: 0; transform: scale(8); }
275}
276
277#downloads-indicator[notification="finish"] > #downloads-indicator-anchor > #downloads-indicator-notification {
278 background-image: url("chrome://browser/skin/downloads/download-notification-finish.png");
279 animation-name: downloadsIndicatorNotificationFinish;
280 animation-duration: 1s;
64897c3a
RK
281}
282
283/*** Progress bar and text ***/
284
285#downloads-indicator-counter {
990cba4b
RK
286 height: 9px;
287 margin: -3px 0 0;
64897c3a 288 color: #FFCF00;
990cba4b
RK
289 font-size: 9px;
290 line-height: 9px;
64897c3a
RK
291 text-align: center;
292}
293
5968ec68
RK
294#downloads-indicator-counter:-moz-lwtheme-brighttext {
295/* color: white;
296 text-shadow: 0 0 1px rgba(0,0,0,.7),
297 0 1px 1.5px rgba(0,0,0,.5);*/
298}
299
e75098eb
RK
300#downloads-indicator[counter]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
301#downloads-indicator[counter][open="true"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
302 color: #000000;
303}
304
64897c3a 305#downloads-indicator-progress {
fcfb76ce 306 width: 16px;
990cba4b 307 height: 5px;
64897c3a
RK
308 min-width: 0;
309 min-height: 0;
310 margin-top: 1px;
311 margin-bottom: 2px;
312 border-radius: 2px;
fcfb76ce 313 background-color: #795900;
64897c3a
RK
314}
315
316#downloads-indicator-progress > .progress-bar {
317 -moz-appearance: none;
318 min-width: 0;
319 min-height: 0;
320 background-color: #008484;
321 border-radius: 2px 0 0 2px;
322}
323
324#downloads-indicator-progress > .progress-remainder {
325 min-width: 0;
326 min-height: 0;
5968ec68 327 background-color: #A09090;
64897c3a
RK
328 border-radius: 0 2px 2px 0;
329}
330
331#downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
332 background-color: #8050B0;
333}
334
335#downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
5968ec68 336 background-color: #404048;
64897c3a 337}
6adbc9a6
RK
338
339toolbar[mode="full"] > #downloads-indicator > .toolbarbutton-text {
340 margin: 0;
341 text-align: center;
342}