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 {
16 #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent,
17 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
22 background-color: transparent;
30 /* The panel can be wider than this description after the blocked subview is
31 shown, so center the text. */
35 .downloadsPanelFooter {
36 /* background-color: var(--arrowpanel-dimmed);
37 border-top: 1px solid var(--panel-separator-color);*/
40 .downloadsPanelFooter toolbarseparator,
41 richlistitem[type="download"] > toolbarseparator {
45 /* border-left: 1px solid var(--panel-separator-color);
46 -moz-appearance: none;*/
49 .downloadsPanelFooterButton {
53 /* min-height: 40px;*/
57 .downloadsPanelFooterButton:hover {
60 .downloadsPanelFooterButton:hover:active,
61 .downloadsPanelFooterButton[open="true"] {
64 .downloadsPanelFooterButton[default] {
67 .downloadsPanelFooterButton[default]:hover {
70 .downloadsPanelFooterButton[default]:hover:active {
73 .downloadsPanelFooterButton > .button-box {
80 padding-inline-start: 10px;
81 padding-inline-end: 10px;
84 richlistitem[type="download"] > toolbarseparator {
88 richlistitem[type="download"]:hover > toolbarseparator {
93 -moz-user-focus: normal;
96 #downloadsSummary > .downloadTypeIcon {
97 list-style-image: url("chrome://browser/skin/downloads/download-summary.svg");
100 #downloadsSummaryDescription {
104 /*** List items and similar elements in the summary ***/
107 richlistitem[type="download"] {
108 height: var(--downloads-item-height);
111 richlistitem[type="download"] {
112 border-bottom: 1px solid var(--panel-separator-color);
113 background: transparent;
117 richlistitem[type="download"]:last-child {
127 .downloadBlockedBadge {
129 background: url("chrome://browser/skin/downloads/download-blocked.svg") top right / 16px no-repeat;
132 downloadBlockedBadge:-moz-locale-dir(rtl) {
133 background-position-x: left;
136 richlistitem[type="download"][verdict="PotentiallyUnwanted"] .downloadBlockedBadge {
137 background-image: url("chrome://browser/skin/warning.svg");
140 richlistitem[type="download"][verdict="Uncommon"] .downloadBlockedBadge {
141 background-image: url("chrome://browser/skin/info.svg");
144 /* We hold .downloadTarget, .downloadProgress and .downloadDetails inside of
145 a vbox with class .downloadContainer. We set the font-size of the entire
146 container to --downloads-item-font-size-factor because:
148 1) This is the size that we want .downloadDetails to be
149 2) The container's width is set by localizers by &downloadDetails.width;,
150 which is a ch unit. Since this is the value that should control the
151 panel width, we apply it to the outer container to constrain
152 .downloadTarget and .downloadProgress.
154 Finally, since we want .downloadTarget's font-size to be at 100% of the
155 font-size of .downloadContainer's parent, we use calc to go from the
156 smaller font-size back to the original font-size.
159 font-size: calc(100% * var(--downloads-item-font-size-factor));
160 margin-inline-end: 13px;
163 #downloadsSummaryDescription,
166 font-size: calc(100% / var(--downloads-item-font-size-factor));
169 #downloadsSummaryDetails,
171 opacity: var(--downloads-item-details-opacity);
172 /* Use calc() to keep the height consistent with .downloadTarget, so that the
173 progress bar can be vertically centered. */
174 margin: 4px 0 calc(1em / var(--downloads-item-font-size-factor) - 1em);
177 /* The following rules control which message is shown under the name of the
178 download, using a set of elements that share the class ".downloadDetails".
179 At any given time, only one of these elements is displayed. We use a set of
180 rules to hide the elements that shouldn't be displayed in each case. */
182 /* The full status message is only displayed in the Downloads View. */
183 .downloadDetailsFull {
187 /* When hovering the mouse pointer over the item, instead of the normal message
188 we display a more detailed one. */
189 richlistitem[type="download"]:hover > .downloadMainArea > .downloadContainer > .downloadDetailsNormal,
190 richlistitem[type="download"]:not(:hover) > .downloadMainArea > .downloadContainer > .downloadDetailsHover {
194 /* When hovering the action button in particular, instead of the usual hover
195 message we display the command associated with the button. */
196 richlistitem[type="download"].downloadHoveringButton > .downloadMainArea > .downloadContainer > .downloadDetailsHover,
197 richlistitem[type="download"]:not(.downloadHoveringButton) > .downloadMainArea > .downloadContainer > .downloadButtonLabels {
201 /* When hovering the main area of a finished download whose target exists,
202 instead of the usual hover message we display the "Open File" command. */
203 richlistitem[type="download"][state="1"][exists] > .downloadMainArea:hover > .downloadContainer > .downloadDetailsHover,
204 richlistitem[type="download"]:not([state="1"]) > .downloadMainArea > .downloadContainer > .downloadOpenFile,
205 richlistitem[type="download"]:not([exists]) > .downloadMainArea > .downloadContainer > .downloadOpenFile,
206 .downloadMainArea:not(:hover) > .downloadContainer > .downloadOpenFile {
210 /* When hovering items blocked by Application Reputation, instead of the other
211 hover messages we display the "Show more information" label. */
212 richlistitem[type="download"][verdict] > .downloadMainArea > .downloadContainer > .downloadDetailsHover,
213 richlistitem[type="download"][verdict] > .downloadMainArea > .downloadContainer > .downloadButtonLabels,
214 richlistitem[type="download"]:not([verdict]) > .downloadMainArea > .downloadContainer > .downloadShowMoreInfo,
215 richlistitem[type="download"]:not(:hover) > .downloadMainArea > .downloadContainer > .downloadShowMoreInfo {
219 richlistitem[type="download"][verdict] > toolbarseparator {
227 background: transparent;
232 .downloadButton > .button-box > .button-icon {
236 -moz-context-properties: fill;
240 .downloadButton > .button-box > .button-text {
241 margin: 0 !important;
245 richlistitem[type="download"][state="1"][exists] .downloadMainArea:hover,
246 richlistitem[type="download"]:not([verdict]) > .downloadButtonArea:hover,
247 richlistitem[type="download"][verdict]:hover {
248 background-color: var(--arrowpanel-dimmed);
251 richlistitem[type="download"][state="1"][exists] > .downloadMainArea:hover:active,
252 richlistitem[type="download"]:not([verdict]) > .downloadButtonArea:hover:active,
253 richlistitem[type="download"][verdict]:hover:active {
254 background-color: var(--arrowpanel-dimmed-further);
257 richlistitem[type="download"][showingsubview] {
258 background-color: #794900;
260 transition: background-color var(--panelui-subview-transition-duration),
261 color var(--panelui-subview-transition-duration);
264 richlistitem[type="download"][verdict="Malware"]:hover,
265 richlistitem[type="download"][verdict="Malware"]:hover:active,
266 richlistitem[type="download"][verdict="Malware"][showingsubview] {
267 background-color: #FF0000;
271 /*** Button icons ***/
273 .downloadIconCancel > .button-box > .button-icon {
274 list-style-image: url("chrome://browser/skin/panel-icon-cancel.svg");
277 .downloadIconShow > .button-box > .button-icon {
278 list-style-image: url("chrome://browser/skin/panel-icon-folder.svg");
281 .downloadIconRetry > .button-box > .button-icon {
282 list-style-image: url("chrome://browser/skin/panel-icon-retry.svg");
285 .downloadShowBlockedInfo > .button-box > .button-icon {
286 list-style-image: url("chrome://browser/skin/panel-icon-arrow-right.svg");
289 .downloadShowBlockedInfo > .button-box > .button-icon:-moz-locale-dir(rtl) {
290 list-style-image: url("chrome://browser/skin/panel-icon-arrow-left.svg");
293 /*** Blocked subview ***/
295 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype=main] > .panel-subviews {
296 /* When the main view is showing, the shadow on the left edge of the subview is
297 barely visible on the right edge of the main view, so set it to none. */
301 /* When the subview is showing, turn the download button into an arrow pointing
302 back to the main view. */
303 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton {
307 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton > .button-box > .button-icon {
308 list-style-image: url("chrome://browser/skin/panel-icon-arrow-left.svg");
311 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton > .button-box > .button-icon:-moz-locale-dir(rtl) {
312 list-style-image: url("chrome://browser/skin/panel-icon-arrow-right.svg");
315 #downloadsPanel-blockedSubview {
316 background-image: url("chrome://browser/skin/warning.svg");
317 background-size: 32px 32px;
318 background-position: 16px 16px;
319 background-repeat: no-repeat;
322 #downloadsPanel-blockedSubview:-moz-locale-dir(rtl) {
323 background-position: calc(100% - 16px) 16px;
326 #downloadsPanel-blockedSubview[verdict=Malware] {
327 background-image: url("chrome://browser/skin/downloads/download-blocked.svg");
330 #downloadsPanel-blockedSubview-title {
333 font-size: calc(100% / var(--downloads-item-font-size-factor));
336 #downloadsPanel-blockedSubview-details1,
337 #downloadsPanel-blockedSubview-details2 {
338 font-size: calc(100% * var(--downloads-item-font-size-factor));
340 opacity: var(--downloads-item-details-opacity);
343 #downloadsPanel-blockedSubview-title,
344 #downloadsPanel-blockedSubview-details1,
345 #downloadsPanel-blockedSubview-details2 {
346 -moz-margin-start: 64px;
347 -moz-margin-end: 16px;
350 /*** Progressmeter ***/
351 /* %include progressmeter.inc.css - this happens as @import at the start of the file */
353 /* === END downloads.inc.css === */
355 /*** Panel and outer controls ***/
357 #downloadsPanel[keyfocus] #downloadsSummary:focus,
358 #downloadsPanel[keyfocus] .downloadsPanelFooterButton:focus {
359 outline: 1px #008484 dotted;
360 outline-offset: -1px;
363 #downloadsPanel[keyfocus] #downloadsSummary:focus {
364 outline-offset: -5px;
367 richlistitem[type="download"][showingsubview] {
368 background-color: Highlight;
369 color: HighlightText;
370 transition: background-color var(--panelui-subview-transition-duration),
371 color var(--panelui-subview-transition-duration);
374 #downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"][exists][verdict="Malware"]:hover,
375 #downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"][exists][verdict="Malware"]:hover:active,
376 richlistitem[type="download"][showingsubview][verdict="Malware"] {
377 background-color: hsl(4, 82%, 47%);
382 /*** List items and similar elements in the summary ***/
385 --downloads-item-height: 5.5em;
386 --downloads-item-font-size-factor: 0.9;
387 --downloads-item-details-opacity: 0.6;
390 .downloadButton > .button-box {
391 border: 1px solid transparent;
394 #downloadsPanel[keyfocus] .downloadButton:focus > .button-box {
395 border: 1px dotted #008484;
398 richlistitem[type="download"][verdict="PotentiallyUnwanted"] .blockedIcon {
399 list-style-image: url("chrome://global/skin/icons/warning.svg");
402 richlistitem[type="download"][verdict="Uncommon"] .blockedIcon {
403 list-style-image: url("chrome://global/skin/icons/info.svg");
406 @media (-moz-windows-default-theme) {
407 richlistitem[type="download"][verdict="Malware"] {
412 /*** Highlighted list items ***/
414 #downloadsListBox:-moz-focusring > richlistitem[type="download"][selected] {
415 outline: 1px #008484 dotted;
416 outline-offset: -1px;
417 /*-moz-outline-radius: 3px;*/