browser/themes/osx/downloads/downloads.css@6474c204b198
browser/themes/osx/downloads/downloads.css
Wed, 31 Dec 2014 06:09:35 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:09:35 +0100
- changeset 0
- 6474c204b198
- permissions
- -rw-r--r--
Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.
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/. */
5 /*** Panel and outer controls ***/
7 #downloadsPanel {
8 margin-top: -1px;
9 }
11 #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent {
12 padding: 0;
13 }
15 #downloadsListBox {
16 background: transparent;
17 padding: 4px;
18 color: inherit;
19 }
21 #downloadsPanel:not([hasdownloads]) > #downloadsListBox {
22 display: none;
23 }
25 #downloadsPanel[hasdownloads] > #emptyDownloads {
26 display: none;
27 }
29 #emptyDownloads {
30 padding: 10px 20px;
31 max-width: 40ch;
32 }
34 #downloadsFooter {
35 border-bottom-left-radius: 4px;
36 border-bottom-right-radius: 4px;
37 }
39 #downloadsHistory {
40 background: transparent;
41 color: hsl(210,100%,75%);
42 cursor: pointer;
43 }
45 #downloadsFooter {
46 background: #e5e5e5;
47 border-top: 1px solid hsla(0,0%,0%,.1);
48 box-shadow: 0 -1px hsla(0,0%,100%,.5) inset, 0 1px 1px hsla(0,0%,0%,.03) inset;
49 }
51 #downloadsHistory > .button-box {
52 color: #808080;
53 margin: 1em;
54 }
56 #downloadsPanel[keyfocus] > #downloadsFooter > #downloadsSummary:focus,
57 #downloadsPanel[keyfocus] > #downloadsFooter > #downloadsHistory:focus {
58 outline: 2px -moz-mac-focusring solid;
59 outline-offset: -2px;
60 -moz-outline-radius-bottomleft: 4px;
61 -moz-outline-radius-bottomright: 4px;
62 }
64 /*** Downloads Summary and List items ***/
66 #downloadsSummary,
67 richlistitem[type="download"] {
68 height: 7em;
69 -moz-padding-end: 0;
70 color: inherit;
71 }
73 #downloadsSummary {
74 padding: 8px 38px 8px 12px;
75 cursor: pointer;
76 -moz-user-focus: normal;
77 }
79 #downloadsSummary > .downloadTypeIcon {
80 list-style-image: url("chrome://browser/skin/downloads/download-summary.png");
81 }
83 @media (min-resolution: 2dppx) {
84 #downloadsSummary > .downloadTypeIcon {
85 list-style-image: url("chrome://browser/skin/downloads/download-summary@2x.png");
86 }
87 }
89 #downloadsSummaryDescription {
90 color: -moz-nativehyperlinktext;
91 }
93 richlistitem[type="download"] {
94 margin: 0;
95 border-top: 1px solid hsla(0,0%,100%,.07);
96 border-bottom: 1px solid hsla(0,0%,0%,.2);
97 background: transparent;
98 padding: 8px;
99 }
101 richlistitem[type="download"]:first-child {
102 border-top: 1px solid transparent;
103 }
105 richlistitem[type="download"]:last-child {
106 border-bottom: 1px solid transparent;
107 }
109 .downloadTypeIcon {
110 -moz-margin-end: 8px;
111 /* Prevent flickering when changing states. */
112 height: 32px;
113 width: 32px;
114 }
116 .blockedIcon {
117 list-style-image: url("chrome://global/skin/icons/Error.png");
118 }
120 /* We hold .downloadTarget, .downloadProgress and .downloadDetails inside of
121 a vbox with class .downloadContainer. We set the font-size of the entire
122 container to 95% because:
124 1) This is the size that we want .downloadDetails to be
125 2) The container's width is set by localizers by &downloadDetails.width;,
126 which is a ch unit. Since this is the value that should control the
127 panel width, we apply it to the outer container to constrain
128 .downloadTarget and .downloadProgress.
130 Finally, since we want .downloadTarget's font-size to be at 100% of the
131 font-size of .downloadContainer's parent, we use calc to go from the
132 smaller font-size back to the original font-size.
133 */
134 #downloadsSummaryDetails,
135 .downloadContainer {
136 font-size: 95%;
137 }
139 #downloadsSummaryDescription,
140 .downloadTarget {
141 margin-bottom: 6px;
142 cursor: inherit;
143 }
145 .downloadTarget {
146 font-size: calc(100%/0.95);
147 }
149 #downloadsSummaryDetails,
150 .downloadDetails {
151 opacity: 0.7;
152 cursor: inherit;
153 }
155 .downloadButton {
156 -moz-appearance: none;
157 min-width: 0;
158 min-height: 0;
159 margin: 3px;
160 border: none;
161 background: transparent;
162 padding: 5px;
163 list-style-image: url("chrome://browser/skin/downloads/buttons.png");
164 }
166 .downloadButton:focus > .button-box {
167 outline: 2px -moz-mac-focusring solid;
168 outline-offset: -2px;
169 }
171 .downloadButton > .button-box {
172 padding: 0;
173 }
175 /*** Highlighted list items ***/
177 #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"][selected],
178 #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover {
179 border-radius: 3px;
180 border-top: 1px solid hsla(0,0%,100%,.2);
181 border-bottom: 1px solid hsla(0,0%,0%,.4);
182 background-color: Highlight;
183 color: HighlightText;
184 }
186 #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover {
187 cursor: pointer;
188 }
190 /*** Button icons ***/
192 .downloadButton.downloadCancel {
193 -moz-image-region: rect(0px, 16px, 16px, 0px);
194 }
195 richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel {
196 -moz-image-region: rect(0px, 32px, 16px, 16px);
197 }
198 richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:hover {
199 -moz-image-region: rect(0px, 48px, 16px, 32px);
200 }
201 richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:active {
202 -moz-image-region: rect(0px, 64px, 16px, 48px);
203 }
204 #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"][selected] > stack > .downloadButton.downloadCancel {
205 -moz-image-region: rect(0px, 80px, 16px, 64px);
206 }
207 #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadCancel {
208 -moz-image-region: rect(0px, 96px, 16px, 80px);
209 }
210 #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadCancel:hover {
211 -moz-image-region: rect(0px, 112px, 16px, 96px);
212 }
213 #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadCancel:active {
214 -moz-image-region: rect(0px, 128px, 16px, 112px);
215 }
217 .downloadButton.downloadShow {
218 -moz-image-region: rect(16px, 16px, 32px, 0px);
219 }
220 #downloadsPanel[keyfocus] > #downloadsListBox > richlistitem[type="download"][state="1"]:hover:not[selected] > stack > .downloadButton.downloadShow {
221 -moz-image-region: rect(16px, 32px, 32px, 16px);
222 }
223 #downloadsPanel[keyfocus] > #downloadsListBox > richlistitem[type="download"][state="1"]:hover:not[selected] > stack > .downloadButton.downloadShow:hover {
224 -moz-image-region: rect(16px, 48px, 32px, 32px);
225 }
226 #downloadsPanel[keyfocus] > #downloadsListBox > richlistitem[type="download"][state="1"]:hover:not[selected] > stack > .downloadButton.downloadShow:active {
227 -moz-image-region: rect(16px, 64px, 32px, 48px);
228 }
229 #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"][selected] > stack > .downloadButton.downloadShow {
230 -moz-image-region: rect(16px, 80px, 32px, 64px);
231 }
232 #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow,
233 #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadShow {
234 -moz-image-region: rect(16px, 96px, 32px, 80px);
235 }
236 #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:hover,
237 #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadShow:hover {
238 -moz-image-region: rect(16px, 112px, 32px, 96px);
239 }
240 #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:active,
241 #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadShow:active {
242 -moz-image-region: rect(16px, 128px, 32px, 112px);
243 }
245 .downloadButton.downloadRetry {
246 -moz-image-region: rect(32px, 16px, 48px, 0px);
247 }
248 richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry {
249 -moz-image-region: rect(32px, 32px, 48px, 16px);
250 }
251 richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:hover {
252 -moz-image-region: rect(32px, 48px, 48px, 32px);
253 }
254 richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:active {
255 -moz-image-region: rect(32px, 64px, 48px, 48px);
256 }
257 #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"][selected] > stack > .downloadButton.downloadRetry {
258 -moz-image-region: rect(32px, 80px, 48px, 64px);
259 }
260 #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadRetry {
261 -moz-image-region: rect(32px, 96px, 48px, 80px);
262 }
263 #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadRetry:hover {
264 -moz-image-region: rect(32px, 112px, 48px, 96px);
265 }
266 #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadRetry:active {
267 -moz-image-region: rect(32px, 128px, 48px, 112px);
268 }
270 @media (min-resolution: 2dppx) {
271 .downloadButton {
272 list-style-image: url("chrome://browser/skin/downloads/buttons@2x.png");
273 }
274 .downloadButton > .button-box > .button-icon {
275 width: 16px;
276 height: 16px;
277 }
279 .downloadButton.downloadCancel {
280 -moz-image-region: rect(0px, 32px, 32px, 0px);
281 }
282 richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel {
283 -moz-image-region: rect(0px, 64px, 32px, 32px);
284 }
285 richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:hover {
286 -moz-image-region: rect(0px, 96px, 32px, 64px);
287 }
288 richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:active {
289 -moz-image-region: rect(0px, 128px, 32px, 96px);
290 }
291 #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"][selected] > stack > .downloadButton.downloadCancel {
292 -moz-image-region: rect(0px, 160px, 32px, 128px);
293 }
294 #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadCancel {
295 -moz-image-region: rect(0px, 192px, 32px, 160px);
296 }
297 #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadCancel:hover {
298 -moz-image-region: rect(0px, 224px, 32px, 192px);
299 }
300 #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadCancel:active {
301 -moz-image-region: rect(0px, 256px, 32px, 224px);
302 }
304 .downloadButton.downloadShow {
305 -moz-image-region: rect(32px, 32px, 64px, 0px);
306 }
307 #downloadsPanel[keyfocus] > #downloadsListBox > richlistitem[type="download"][state="1"]:hover:not[selected] > stack > .downloadButton.downloadShow {
308 -moz-image-region: rect(32px, 64px, 64px, 32px);
309 }
310 #downloadsPanel[keyfocus] > #downloadsListBox > richlistitem[type="download"][state="1"]:hover:not[selected] > stack > .downloadButton.downloadShow:hover {
311 -moz-image-region: rect(32px, 96px, 64px, 64px);
312 }
313 #downloadsPanel[keyfocus] > #downloadsListBox > richlistitem[type="download"][state="1"]:hover:not[selected] > stack > .downloadButton.downloadShow:active {
314 -moz-image-region: rect(32px, 128px, 64px, 96px);
315 }
316 #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"][selected] > stack > .downloadButton.downloadShow {
317 -moz-image-region: rect(32px, 160px, 64px, 128px);
318 }
319 #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow,
320 #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadShow {
321 -moz-image-region: rect(32px, 192px, 64px, 160px);
322 }
323 #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:hover,
324 #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadShow:hover {
325 -moz-image-region: rect(32px, 224px, 64px, 192px);
326 }
327 #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:active,
328 #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadShow:active {
329 -moz-image-region: rect(32px, 256px, 64px, 224px);
330 }
332 .downloadButton.downloadRetry {
333 -moz-image-region: rect(64px, 32px, 96px, 0px);
334 }
335 richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry {
336 -moz-image-region: rect(64px, 64px, 96px, 32px);
337 }
338 richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:hover {
339 -moz-image-region: rect(64px, 96px, 96px, 64px);
340 }
341 richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:active {
342 -moz-image-region: rect(64px, 128px, 96px, 96px);
343 }
344 #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"][selected] > stack > .downloadButton.downloadRetry {
345 -moz-image-region: rect(64px, 160px, 96px, 128px);
346 }
347 #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadRetry {
348 -moz-image-region: rect(64px, 192px, 96px, 160px);
349 }
350 #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadRetry:hover {
351 -moz-image-region: rect(64px, 224px, 96px, 192px);
352 }
353 #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadRetry:active {
354 -moz-image-region: rect(64px, 256px, 96px, 224px);
355 }
356 }
