browser/themes/linux/downloads/downloads.css@6474c204b198
browser/themes/linux/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 > .panel-arrowcontainer > .panel-arrowcontent {
8 padding: 0;
9 }
11 #downloadsListBox {
12 background: transparent;
13 padding: 4px;
14 color: inherit;
15 }
17 #downloadsPanel:not([hasdownloads]) > #downloadsListBox {
18 display: none;
19 }
21 #downloadsPanel[hasdownloads] > #emptyDownloads {
22 display: none;
23 }
25 #emptyDownloads {
26 padding: 10px 20px;
27 max-width: 40ch;
28 }
30 #downloadsHistory {
31 background: transparent;
32 color: -moz-nativehyperlinktext;
33 cursor: pointer;
34 }
36 #downloadsFooter {
37 border-top: 1px solid ThreeDShadow;
38 background-image: linear-gradient(hsla(0,0%,0%,.15), hsla(0,0%,0%,.08) 6px);
39 }
41 #downloadsHistory > .button-box {
42 margin: 1em;
43 }
45 #downloadsPanel[keyfocus] > #downloadsFooter > #downloadsHistory:focus > .button-box {
46 outline: 1px -moz-dialogtext dotted;
47 }
49 /*** Downloads Summary and List items ***/
51 #downloadsSummary,
52 richlistitem[type="download"] {
53 height: 6em;
54 -moz-padding-end: 0;
55 color: inherit;
56 }
58 #downloadsSummary {
59 padding: 8px 38px 8px 12px;
60 cursor: pointer;
61 -moz-user-focus: normal;
62 }
64 #downloadsPanel[keyfocus] > #downloadsFooter > #downloadsSummary:focus {
65 outline: 1px -moz-dialogtext dotted;
66 outline-offset: -5px;
67 }
69 #downloadsSummary > .downloadTypeIcon {
70 list-style-image: url("chrome://browser/skin/downloads/download-summary.png");
71 }
73 #downloadsSummaryDescription {
74 color: -moz-nativehyperlinktext;
75 }
77 richlistitem[type="download"] {
78 margin: 0;
79 border-top: 1px solid hsla(0,0%,100%,.2);
80 border-bottom: 1px solid hsla(0,0%,0%,.15);
81 background: transparent;
82 padding: 8px;
83 }
85 richlistitem[type="download"]:first-child {
86 border-top: 1px solid transparent;
87 }
89 richlistitem[type="download"]:last-child {
90 border-bottom: 1px solid transparent;
91 }
93 #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"][selected] {
94 outline: 1px -moz-dialogtext dotted;
95 outline-offset: -1px;
96 }
98 .downloadTypeIcon {
99 -moz-margin-end: 8px;
100 /* Prevent flickering when changing states. */
101 min-height: 32px;
102 min-width: 32px;
103 }
105 .blockedIcon {
106 list-style-image: url("chrome://global/skin/icons/Error.png");
107 }
109 /* We hold .downloadTarget, .downloadProgress and .downloadDetails inside of
110 a vbox with class .downloadContainer. We set the font-size of the entire
111 container to 90% because:
113 1) This is the size that we want .downloadDetails to be
114 2) The container's width is set by localizers by &downloadDetails.width;,
115 which is a ch unit. Since this is the value that should control the
116 panel width, we apply it to the outer container to constrain
117 .downloadTarget and .downloadProgress.
119 Finally, since we want .downloadTarget's font-size to be at 100% of the
120 font-size of .downloadContainer's parent, we use calc to go from the
121 smaller font-size back to the original font-size.
122 */
124 #downloadsSummaryDetails,
125 .downloadContainer {
126 font-size: 90%;
127 }
129 #downloadsSummaryDescription,
130 .downloadTarget {
131 margin-bottom: 7px;
132 cursor: inherit;
133 }
135 .downloadTarget {
136 font-size: calc(100%/0.9);
137 }
139 #downloadsSummaryDetails,
140 .downloadDetails {
141 margin-top: 1px;
142 opacity: 0.6;
143 cursor: inherit;
144 }
146 .downloadButton {
147 -moz-appearance: none;
148 min-width: 0;
149 min-height: 0;
150 margin: 3px;
151 border: none;
152 background: transparent;
153 padding: 5px;
154 list-style-image: url("chrome://browser/skin/downloads/buttons.png");
155 }
157 .downloadButton > .button-box {
158 padding: 0;
159 }
161 .downloadButton:focus > .button-box {
162 outline: 1px -moz-dialogtext dotted;
163 }
165 /*** Highlighted list items ***/
167 #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover {
168 border-radius: 3px;
169 border-top: 1px solid hsla(0,0%,100%,.3);
170 border-bottom: 1px solid hsla(0,0%,0%,.2);
171 background-color: Highlight;
172 background-image: linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,100%,0));
173 color: HighlightText;
174 cursor: pointer;
175 }
177 /*** Button icons ***/
179 .downloadButton.downloadCancel {
180 -moz-image-region: rect(0px, 16px, 16px, 0px);
181 }
182 richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel {
183 -moz-image-region: rect(0px, 32px, 16px, 16px);
184 }
185 richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:hover {
186 -moz-image-region: rect(0px, 48px, 16px, 32px);
187 }
188 richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:active {
189 -moz-image-region: rect(0px, 64px, 16px, 48px);
190 }
192 .downloadButton.downloadShow {
193 -moz-image-region: rect(16px, 16px, 32px, 0px);
194 }
195 #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow {
196 -moz-image-region: rect(16px, 96px, 32px, 80px);
197 }
198 #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:hover {
199 -moz-image-region: rect(16px, 112px, 32px, 96px);
200 }
201 #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:active {
202 -moz-image-region: rect(16px, 128px, 32px, 112px);
203 }
205 .downloadButton.downloadRetry {
206 -moz-image-region: rect(32px, 16px, 48px, 0px);
207 }
208 richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry {
209 -moz-image-region: rect(32px, 32px, 48px, 16px);
210 }
211 richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:hover {
212 -moz-image-region: rect(32px, 48px, 48px, 32px);
213 }
214 richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:active {
215 -moz-image-region: rect(32px, 64px, 48px, 48px);
216 }
