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 /* In the original, this is at the end of the file as a preprocessor-include */
8 @import url("progressmeter.inc.css");
10 /*** Panel and outer controls ***/
12 #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent {
17 #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent,
18 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
23 background-color: transparent;
31 /* The panel can be wider than this description after the blocked subview is
32 shown, so center the text. */
36 .downloadsPanelFooter {
37 /* background-color: var(--arrowpanel-dimmed);
38 border-top: 1px solid var(--panel-separator-color);*/
41 .downloadsPanelFooter toolbarseparator,
42 richlistitem[type="download"] > toolbarseparator {
46 /* border-left: 1px solid var(--panel-separator-color);
47 -moz-appearance: none;*/
50 .downloadsPanelFooterButton {
54 /* min-height: 40px;*/
58 .downloadsPanelFooterButton:hover {
61 .downloadsPanelFooterButton:hover:active,
62 .downloadsPanelFooterButton[open="true"] {
65 .downloadsPanelFooterButton[default] {
68 .downloadsPanelFooterButton[default]:hover {
71 .downloadsPanelFooterButton[default]:hover:active {
74 .downloadsPanelFooterButton > .button-box {
81 padding-inline-start: 10px;
82 padding-inline-end: 10px;
85 #downloadsPanel[hasdownloads] #downloadsFooterButtons:not(.downloadsHideDropmarker) > #downloadsHistory {
86 padding-inline-start: 68px;
89 toolbarseparator.downloadsDropmarkerSplitter {
93 richlistitem[type="download"] > toolbarseparator {
97 richlistitem[type="download"]:hover > toolbarseparator,
98 #downloadsFooter:hover toolbarseparator.downloadsDropmarkerSplitter,
99 #downloadsFooter[showingdropdown] toolbarseparator {
103 .downloadsDropmarker {
107 .downloadsDropmarker > .button-box > hbox {
111 .downloadsDropmarker > .button-box > .button-menu-dropmarker {
117 .downloadsDropmarker > .button-box > .button-menu-dropmarker > .dropmarker-icon {
120 /* list-style-image: url("chrome://browser/skin/downloads/menubutton-dropmarker.svg");
121 filter: url("chrome://browser/skin/filters.svg#fill");
122 fill: currentColor;*/
125 /* Override default icon size which is too small for this dropdown */
126 .downloadsDropmarker > .button-box > .button-menu-dropmarker {
132 -moz-user-focus: normal;
135 #downloadsSummary > .downloadTypeIcon {
136 list-style-image: url("chrome://browser/skin/downloads/download-summary.svg");
139 #downloadsSummaryDescription {
143 /*** List items and similar elements in the summary ***/
146 richlistitem[type="download"] {
147 height: var(--downloads-item-height);
150 richlistitem[type="download"] {
151 border-bottom: 1px solid var(--panel-separator-color);
152 background: transparent;
156 richlistitem[type="download"]:last-child {
166 .downloadBlockedBadge {
168 background: url("chrome://browser/skin/downloads/download-blocked.svg") top right / 16px no-repeat;
171 downloadBlockedBadge:-moz-locale-dir(rtl) {
172 background-position-x: left;
175 richlistitem[type="download"][verdict="PotentiallyUnwanted"] .downloadBlockedBadge {
176 background-image: url("chrome://browser/skin/warning.svg");
179 richlistitem[type="download"][verdict="Uncommon"] .downloadBlockedBadge {
180 background-image: url("chrome://browser/skin/info.svg");
183 /* We hold .downloadTarget, .downloadProgress and .downloadDetails inside of
184 a vbox with class .downloadContainer. We set the font-size of the entire
185 container to --downloads-item-font-size-factor because:
187 1) This is the size that we want .downloadDetails to be
188 2) The container's width is set by localizers by &downloadDetails.width;,
189 which is a ch unit. Since this is the value that should control the
190 panel width, we apply it to the outer container to constrain
191 .downloadTarget and .downloadProgress.
193 Finally, since we want .downloadTarget's font-size to be at 100% of the
194 font-size of .downloadContainer's parent, we use calc to go from the
195 smaller font-size back to the original font-size.
198 font-size: calc(100% * var(--downloads-item-font-size-factor));
199 margin-inline-end: 13px;
202 #downloadsSummaryDescription,
205 font-size: calc(100% / var(--downloads-item-font-size-factor));
208 #downloadsSummaryDetails,
210 opacity: var(--downloads-item-details-opacity);
211 /* Use calc() to keep the height consistent with .downloadTarget, so that the
212 progress bar can be vertically centered. */
213 margin: 4px 0 calc(1em / var(--downloads-item-font-size-factor) - 1em);
216 richlistitem[type="download"][verdict] > toolbarseparator {
224 background: transparent;
229 .downloadButton > .button-box > .button-icon {
233 filter: url("chrome://browser/skin/filters.svg#fill");
237 .downloadButton > .button-box > .button-text {
238 margin: 0 !important;
242 richlistitem[type="download"][state="1"][exists] .downloadMainArea:hover,
243 richlistitem[type="download"]:not([verdict]) > .downloadButtonArea:hover,
244 richlistitem[type="download"][verdict]:hover {
245 background-color: var(--arrowpanel-dimmed);
248 richlistitem[type="download"][state="1"][exists] > .downloadMainArea:hover:active,
249 richlistitem[type="download"]:not([verdict]) > .downloadButtonArea:hover:active,
250 richlistitem[type="download"][verdict]:hover:active {
251 background-color: var(--arrowpanel-dimmed-further);
254 richlistitem[type="download"][showingsubview] {
255 background-color: #794900;
257 transition: background-color var(--panelui-subview-transition-duration),
258 color var(--panelui-subview-transition-duration);
261 richlistitem[type="download"][verdict="Malware"]:hover,
262 richlistitem[type="download"][verdict="Malware"]:hover:active,
263 richlistitem[type="download"][verdict="Malware"][showingsubview] {
264 background-color: #FF0000;
268 /*** Button icons ***/
270 .downloadIconCancel > .button-box > .button-icon {
271 list-style-image: url("chrome://browser/skin/panel-icons.svg#cancel");
274 .downloadIconShow > .button-box > .button-icon {
275 list-style-image: url("chrome://browser/skin/panel-icons.svg#folder");
278 .downloadIconRetry > .button-box > .button-icon {
279 list-style-image: url("chrome://browser/skin/panel-icons.svg#retry");
282 .downloadShowBlockedInfo > .button-box > .button-icon {
283 list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-right");
286 .downloadShowBlockedInfo > .button-box > .button-icon:-moz-locale-dir(rtl) {
287 list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-left");
290 /*** Blocked subview ***/
292 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype=main] > .panel-subviews {
293 /* When the main view is showing, the shadow on the left edge of the subview is
294 barely visible on the right edge of the main view, so set it to none. */
298 /* When the subview is showing, turn the download button into an arrow pointing
299 back to the main view. */
300 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton {
304 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton > .button-box > .button-icon {
305 list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-left");
308 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton > .button-box > .button-icon:-moz-locale-dir(rtl) {
309 list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-right");
312 #downloadsPanel-blockedSubview {
313 background-image: url("chrome://browser/skin/warning.svg");
314 background-size: 32px 32px;
315 background-position: 16px 16px;
316 background-repeat: no-repeat;
319 #downloadsPanel-blockedSubview:-moz-locale-dir(rtl) {
320 background-position: calc(100% - 16px) 16px;
323 #downloadsPanel-blockedSubview[verdict=Malware] {
324 background-image: url("chrome://browser/skin/downloads/download-blocked.svg");
327 #downloadsPanel-blockedSubview-title {
330 font-size: calc(100% / var(--downloads-item-font-size-factor));
333 #downloadsPanel-blockedSubview-details1,
334 #downloadsPanel-blockedSubview-details2 {
335 font-size: calc(100% * var(--downloads-item-font-size-factor));
337 opacity: var(--downloads-item-details-opacity);
340 #downloadsPanel-blockedSubview-title,
341 #downloadsPanel-blockedSubview-details1,
342 #downloadsPanel-blockedSubview-details2 {
343 -moz-margin-start: 64px;
344 -moz-margin-end: 16px;
347 /*** Progressmeter ***/
348 /* %include progressmeter.inc.css - this happens as @import at the start of the file */
350 /* === END downloads.inc.css === */
352 /*** Panel and outer controls ***/
354 #downloadsPanel[keyfocus] #downloadsSummary:focus,
355 #downloadsPanel[keyfocus] .downloadsPanelFooterButton:focus {
356 outline: 1px #008484 dotted;
357 outline-offset: -1px;
360 #downloadsPanel[keyfocus] #downloadsSummary:focus {
361 outline-offset: -5px;
364 richlistitem[type="download"][showingsubview] {
365 background-color: Highlight;
366 color: HighlightText;
367 transition: background-color var(--panelui-subview-transition-duration),
368 color var(--panelui-subview-transition-duration);
371 #downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"][exists][verdict="Malware"]:hover,
372 #downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"][exists][verdict="Malware"]:hover:active,
373 richlistitem[type="download"][showingsubview][verdict="Malware"] {
374 background-color: hsl(4, 82%, 47%);
379 /*** List items and similar elements in the summary ***/
382 --downloads-item-height: 5.5em;
383 --downloads-item-font-size-factor: 0.9;
384 --downloads-item-details-opacity: 0.6;
387 .downloadButton > .button-box {
388 border: 1px solid transparent;
391 #downloadsPanel[keyfocus] .downloadButton:focus > .button-box {
392 border: 1px dotted #008484;
395 richlistitem[type="download"][verdict="PotentiallyUnwanted"] .blockedIcon {
396 list-style-image: url("chrome://global/skin/icons/warning.svg");
399 richlistitem[type="download"][verdict="Uncommon"] .blockedIcon {
400 list-style-image: url("chrome://global/skin/icons/information-32.png");
403 @media (-moz-windows-default-theme) {
404 richlistitem[type="download"][verdict="Malware"] {
409 /*** Highlighted list items ***/
411 #downloadsListBox:-moz-focusring > richlistitem[type="download"][selected] {
412 outline: 1px #008484 dotted;
413 outline-offset: -1px;
414 /*-moz-outline-radius: 3px;*/