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 /* === BEGIN downloads.inc.css === */
7 /*** Panel and outer controls ***/
9 #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent {
14 background-color: transparent;
19 #downloadsPanel:not([hasdownloads]) > #downloadsListBox {
23 #downloadsPanel[hasdownloads] > #emptyDownloads {
33 padding: 8px 38px 8px 12px;
35 -moz-user-focus: normal;
38 #downloadsSummary > .downloadTypeIcon {
39 list-style-image: url("chrome://browser/skin/downloads/download-summary.png");
42 #downloadsSummaryDescription {
48 margin: 4px !important;
52 #downloadsHistory > .button-box {
55 /*** List items and similar elements in the summary ***/
58 richlistitem[type="download"] {
59 height: var(--downloads-item-height);
64 richlistitem[type="download"] {
66 /*border-top: 1px solid var(--downloads-item-border-top-color);*/
67 border-bottom: 1px solid var(--downloads-item-border-bottom-color);
68 background: transparent;
72 richlistitem[type="download"]:first-child {
73 /* border-top: 1px solid transparent;*/
78 /* Prevent flickering when changing states. */
84 list-style-image: url("chrome://global/skin/icons/alert-error.gif");
87 /* We hold .downloadTarget, .downloadProgress and .downloadDetails inside of
88 a vbox with class .downloadContainer. We set the font-size of the entire
89 container to --downloads-item-font-size-factor because:
91 1) This is the size that we want .downloadDetails to be
92 2) The container's width is set by localizers by &downloadDetails.width;,
93 which is a ch unit. Since this is the value that should control the
94 panel width, we apply it to the outer container to constrain
95 .downloadTarget and .downloadProgress.
97 Finally, since we want .downloadTarget's font-size to be at 100% of the
98 font-size of .downloadContainer's parent, we use calc to go from the
99 smaller font-size back to the original font-size.
101 #downloadsSummaryDetails,
103 font-size: calc(100% * var(--downloads-item-font-size-factor));
106 #downloadsSummaryDescription,
108 margin-bottom: var(--downloads-item-target-margin-bottom);
113 font-size: calc(100% / var(--downloads-item-font-size-factor));
116 #downloadsSummaryDetails,
118 margin-top: var(--downloads-item-details-margin-top);
119 opacity: var(--downloads-item-details-opacity);
128 background: transparent;
130 list-style-image: url("chrome://browser/skin/downloads/buttons.png");
133 .downloadButton > .button-box {
138 /* === END downloads.inc.css === */
140 /*** Panel and outer controls ***/
145 #downloadsFooter:hover {
148 #downloadsFooter:hover:active {
151 #downloadsPanel[keyfocus] #downloadsSummary:focus,
152 #downloadsPanel[keyfocus] #downloadsHistory:focus {
153 outline: 1px #008484 dotted;
154 outline-offset: -1px;
157 #downloadsPanel[keyfocus] #downloadsSummary:focus {
158 outline-offset: -5px;
161 #downloadsHistory > .button-box {
162 /* Hide the border so we don't display an inner focus ring. */
166 /*** List items and similar elements in the summary ***/
169 --downloads-item-height: 7em;
170 /*--downloads-item-border-top-color: hsla(0,0%,100%,.3);*/
171 --downloads-item-border-bottom-color: #9C9CFF;
172 --downloads-item-font-size-factor: 0.9;
173 --downloads-item-target-margin-bottom: 6px;
174 --downloads-item-details-margin-top: 0;
175 --downloads-item-details-opacity: 0.6;
178 .downloadButton > .button-box {
179 border: 1px solid transparent;
182 #downloadsPanel[keyfocus] .downloadButton:focus > .button-box {
183 border: 1px dotted #008484;
186 /*** Highlighted list items ***/
188 #downloadsListBox:-moz-focusring > richlistitem[type="download"][selected] {
189 outline: 1px #008484 dotted;
190 outline-offset: -1px;
191 /*-moz-outline-radius: 3px;*/
194 /* #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover { */
195 #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"]:hover {
197 background-color: #794900;
202 #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover:active {
205 /*** Button icons ***/
207 .downloadButton.downloadConfirmBlock,
208 .downloadButton.downloadCancel {
209 -moz-image-region: rect(0px, 16px, 16px, 0px);
211 richlistitem[type="download"]:hover > stack > .downloadButton.downloadConfirmBlock,
212 richlistitem[type="download"]:hover > stack > .downloadButton.downloadConfirmBlock:hover,
213 richlistitem[type="download"]:hover > stack > .downloadButton.downloadConfirmBlock:active,
214 richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel,
215 richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:hover,
216 richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:active {
217 -moz-image-region: rect(0px, 32px, 16px, 16px);
220 .downloadButton.downloadShow {
221 -moz-image-region: rect(16px, 16px, 32px, 0px);
223 richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow,
224 richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow:hover,
225 richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow:active {
226 -moz-image-region: rect(16px, 32px, 32px, 16px);
229 .downloadButton.downloadRetry {
230 -moz-image-region: rect(32px, 16px, 48px, 0px);
232 richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry,
233 richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:hover,
234 richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:active {
235 -moz-image-region: rect(32px, 32px, 48px, 16px);