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);
60 padding-inline-end: 0;
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;*/
77 margin-inline-end: 8px;
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 richlistitem[type="download"][verdict="PotentiallyUnwanted"] .blockedIcon {
187 list-style-image: url("chrome://global/skin/icons/warning.svg");
190 richlistitem[type="download"][verdict="Uncommon"] .blockedIcon {
191 list-style-image: url("chrome://global/skin/icons/information-32.png");
194 /*** Highlighted list items ***/
196 #downloadsListBox:-moz-focusring > richlistitem[type="download"][selected] {
197 outline: 1px #008484 dotted;
198 outline-offset: -1px;
199 /*-moz-outline-radius: 3px;*/
202 /* #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover { */
203 #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"]:hover {
205 background-color: #794900;
210 #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover:active {
213 /*** Button icons ***/
215 .downloadButton.downloadIconCancel {
216 -moz-image-region: rect(0px, 16px, 16px, 0px);
218 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconCancel,
219 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconCancel:hover,
220 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconCancel:active {
221 -moz-image-region: rect(0px, 32px, 16px, 16px);
224 .downloadButton.downloadIconShow {
225 -moz-image-region: rect(16px, 16px, 32px, 0px);
227 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconShow,
228 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconShow:hover,
229 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconShow:active {
230 -moz-image-region: rect(16px, 32px, 32px, 16px);
233 .downloadButton.downloadIconRetry {
234 -moz-image-region: rect(32px, 16px, 48px, 0px);
236 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconRetry,
237 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconRetry:hover,
238 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconRetry:active {
239 -moz-image-region: rect(32px, 32px, 48px, 16px);