tweaks for making devtools look nicer
[themes.git] / LCARStrek / browser / downloads / downloads.css
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
7 #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent {
8   padding: 0;
9 }
10
11 #downloadsListBox {
12   background-color: transparent;
13   padding: 4px;
14   color: inherit;
15 }
16
17 #downloadsPanel:not([hasdownloads]) > #downloadsListBox {
18   display: none;
19 }
20
21 #downloadsHistory {
22   cursor: pointer;
23   margin: 4px !important;
24 }
25
26 #downloadsPanel[keyfocus] > #downloadsFooter > #downloadsHistory:focus {
27   outline: 1px #008484 dotted;
28   outline-offset: -1px;
29 }
30
31 #downloadsHistory > .button-box {
32   border: none;
33 }
34
35 /*** Downloads Summary and List items ***/
36
37 #downloadsSummary,
38 richlistitem[type="download"] {
39   height: 7em;
40   -moz-padding-end: 0;
41   color: inherit;
42 }
43
44 #downloadsSummary {
45   padding: 8px 38px 8px 12px;
46   cursor: pointer;
47   -moz-user-focus: normal;
48 }
49
50 #downloadsPanel[keyfocus] > #downloadsFooter > #downloadsSummary:focus {
51   outline: 1px #008484 dotted;
52   outline-offset: -5px;
53 }
54
55 #downloadsSummary > .downloadTypeIcon {
56   list-style-image: url("chrome://browser/skin/downloads/download-summary.png");
57 }
58
59 #downloadsSummaryDescription {
60   color: #3333FF;
61 }
62
63 richlistitem[type="download"] {
64   margin: 0;
65   border-bottom: 1px dotted #9C9CFF;
66   background: transparent;
67   padding: 8px;
68 }
69
70 richlistitem[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;
77   /*-moz-outline-radius: 3px;*/
78 }
79
80 .downloadTypeIcon {
81   -moz-margin-end: 8px;
82   /* Prevent flickering when changing states. */
83   height: 32px;
84   width: 32px;
85 }
86
87 .blockedIcon {
88   list-style-image: url("chrome://global/skin/icons/alert-error.gif");
89 }
90
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,
111 .downloadTarget {
112   margin-bottom: 6px;
113   cursor: inherit;
114 }
115
116 .downloadTarget {
117   font-size: calc(100%/0.9);
118 }
119
120 #downloadsSummaryDetails,
121 .downloadDetails {
122   opacity: 0.6;
123   cursor: inherit;
124 }
125
126 .downloadButton {
127   min-width: 0;
128   min-height: 0;
129   margin: 3px;
130 /*  border: none; */
131   background: transparent;
132   padding: 5px;
133   list-style-image: url("chrome://browser/skin/downloads/buttons.png");
134 }
135
136 .downloadButton > .button-box {
137   border: 1px solid transparent;
138   padding: 0;
139 }
140
141 #downloadsPanel[keyfocus] .downloadButton:focus > .button-box {
142   border: 1px dotted #008484;
143 }
144
145 /*** Highlighted list items ***/
146
147 /* #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover { */
148 #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"]:hover {
149   border-radius: 3px;
150   background-color: #794900;
151   color: #FFCF00;
152   cursor: pointer;
153 }
154
155 /*** Button icons ***/
156
157 .downloadButton.downloadCancel {
158   -moz-image-region: rect(0px, 16px, 16px, 0px);
159 }
160 richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel,
161 richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:hover,
162 richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:active {
163   -moz-image-region: rect(0px, 32px, 16px, 16px);
164 }
165
166 .downloadButton.downloadShow {
167   -moz-image-region: rect(16px, 16px, 32px, 0px);
168 }
169 richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow,
170 richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow:hover,
171 richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow:active {
172   -moz-image-region: rect(16px, 32px, 32px, 16px);
173 }
174
175 .downloadButton.downloadRetry {
176   -moz-image-region: rect(32px, 16px, 48px, 0px);
177 }
178 richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry,
179 richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:hover,
180 richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:active {
181   -moz-image-region: rect(32px, 32px, 48px, 16px);
182 }
183
184 /*** Status and progress indicator ***/
185
186 #downloads-indicator-anchor {
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 {
196   background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"),
197                               0, 108, 18, 90) center no-repeat;
198   min-width: 18px;
199   min-height: 18px;
200 }
201
202 #downloads-indicator:hover > #downloads-indicator-anchor > #downloads-indicator-icon,
203 #downloads-indicator[open="true"] > #downloads-indicator-anchor > #downloads-indicator-icon,
204 #downloads-indicator[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-icon {
205   background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"),
206                               18, 108, 36, 90) center no-repeat;
207   color: #000000;
208 }
209
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
215 #downloads-indicator[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
216   background-image: url("chrome://browser/skin/downloads/download-glow.png");
217 }
218
219 /* In the next few rules, we use :not([counter]) as a shortcut that is
220    equivalent to -moz-any([progress], [paused]). */
221
222 #downloads-indicator:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
223   background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"),
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 {
229   background-image: url("chrome://browser/skin/downloads/download-glow.png");
230 }
231
232 #downloads-indicator:not([counter]):hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
233 #downloads-indicator[open="true"]:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
234 #downloads-indicator:not([counter])[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
235   background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"),
236                               18, 108, 36, 90) center no-repeat;
237   background-size: 12px;
238 }
239
240 /*** Download notifications ***/
241
242 #downloads-indicator-notification {
243   opacity: 0;
244   background-size: 16px;
245   background-position: center;
246   background-repeat: no-repeat;
247 }
248
249 @keyframes downloadsIndicatorNotificationStartRight {
250   from { opacity: 0; transform: translate(-128px, 128px) scale(8); }
251   20%  { opacity: .85; animation-timing-function: ease-out; }
252   to   { opacity: 0; transform: translate(0) scale(1); }
253 }
254
255 @keyframes downloadsIndicatorNotificationStartLeft {
256   from { opacity: 0; transform: translate(128px, 128px) scale(8); }
257   20%  { opacity: .85; animation-timing-function: ease-out; }
258   to   { opacity: 0; transform: translate(0) scale(1); }
259 }
260
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;
264   animation-duration: 1s;
265 }
266
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;
281 }
282
283 /*** Progress bar and text ***/
284
285 #downloads-indicator-counter {
286   height: 9px;
287   margin: -3px 0 0;
288   color: #FFCF00;
289   font-size: 9px;
290   line-height: 9px;
291   text-align: center;
292 }
293
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
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
305 #downloads-indicator-progress {
306   width: 16px;
307   height: 5px;
308   min-width: 0;
309   min-height: 0;
310   margin-top: 1px;
311   margin-bottom: 2px;
312   border-radius: 2px;
313   background-color: #795900;
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;
327   background-color: #A09090;
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 {
336   background-color: #404048;
337 }
338
339 toolbar[mode="full"] > #downloads-indicator > .toolbarbutton-text {
340   margin: 0;
341   text-align: center;
342 }