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 richlistitem[type="download"] > toolbarseparator {
89 richlistitem[type="download"]:hover > toolbarseparator {
94 -moz-user-focus: normal;
97 #downloadsSummary > .downloadTypeIcon {
98 list-style-image: url("chrome://browser/skin/downloads/download-summary.svg");
101 #downloadsSummaryDescription {
105 /*** List items and similar elements in the summary ***/
108 richlistitem[type="download"] {
109 height: var(--downloads-item-height);
112 richlistitem[type="download"] {
113 border-bottom: 1px solid var(--panel-separator-color);
114 background: transparent;
118 richlistitem[type="download"]:last-child {
128 .downloadBlockedBadge {
130 background: url("chrome://browser/skin/downloads/download-blocked.svg") top right / 16px no-repeat;
133 downloadBlockedBadge:-moz-locale-dir(rtl) {
134 background-position-x: left;
137 richlistitem[type="download"][verdict="PotentiallyUnwanted"] .downloadBlockedBadge {
138 background-image: url("chrome://browser/skin/warning.svg");
141 richlistitem[type="download"][verdict="Uncommon"] .downloadBlockedBadge {
142 background-image: url("chrome://browser/skin/info.svg");
145 /* We hold .downloadTarget, .downloadProgress and .downloadDetails inside of
146 a vbox with class .downloadContainer. We set the font-size of the entire
147 container to --downloads-item-font-size-factor because:
149 1) This is the size that we want .downloadDetails to be
150 2) The container's width is set by localizers by &downloadDetails.width;,
151 which is a ch unit. Since this is the value that should control the
152 panel width, we apply it to the outer container to constrain
153 .downloadTarget and .downloadProgress.
155 Finally, since we want .downloadTarget's font-size to be at 100% of the
156 font-size of .downloadContainer's parent, we use calc to go from the
157 smaller font-size back to the original font-size.
160 font-size: calc(100% * var(--downloads-item-font-size-factor));
161 margin-inline-end: 13px;
164 #downloadsSummaryDescription,
167 font-size: calc(100% / var(--downloads-item-font-size-factor));
170 #downloadsSummaryDetails,
172 opacity: var(--downloads-item-details-opacity);
173 /* Use calc() to keep the height consistent with .downloadTarget, so that the
174 progress bar can be vertically centered. */
175 margin: 4px 0 calc(1em / var(--downloads-item-font-size-factor) - 1em);
178 /* The following rules control which message is shown under the name of the
179 download, using a set of elements that share the class ".downloadDetails".
180 At any given time, only one of these elements is displayed. We use a set of
181 rules to hide the elements that shouldn't be displayed in each case. */
183 /* The full status message is only displayed in the Downloads View. */
184 .downloadDetailsFull {
188 /* When hovering the mouse pointer over the item, instead of the normal message
189 we display a more detailed one. */
190 richlistitem[type="download"]:hover > .downloadMainArea > .downloadContainer > .downloadDetailsNormal,
191 richlistitem[type="download"]:not(:hover) > .downloadMainArea > .downloadContainer > .downloadDetailsHover {
195 /* When hovering the action button in particular, instead of the usual hover
196 message we display the command associated with the button. */
197 richlistitem[type="download"].downloadHoveringButton > .downloadMainArea > .downloadContainer > .downloadDetailsHover,
198 richlistitem[type="download"]:not(.downloadHoveringButton) > .downloadMainArea > .downloadContainer > .downloadButtonLabels {
202 /* When hovering the main area of a finished download whose target exists,
203 instead of the usual hover message we display the "Open File" command. */
204 richlistitem[type="download"][state="1"][exists] > .downloadMainArea:hover > .downloadContainer > .downloadDetailsHover,
205 richlistitem[type="download"]:not([state="1"]) > .downloadMainArea > .downloadContainer > .downloadOpenFile,
206 richlistitem[type="download"]:not([exists]) > .downloadMainArea > .downloadContainer > .downloadOpenFile,
207 .downloadMainArea:not(:hover) > .downloadContainer > .downloadOpenFile {
211 /* When hovering items blocked by Application Reputation, instead of the other
212 hover messages we display the "Show more information" label. */
213 richlistitem[type="download"][verdict] > .downloadMainArea > .downloadContainer > .downloadDetailsHover,
214 richlistitem[type="download"][verdict] > .downloadMainArea > .downloadContainer > .downloadButtonLabels,
215 richlistitem[type="download"]:not([verdict]) > .downloadMainArea > .downloadContainer > .downloadShowMoreInfo,
216 richlistitem[type="download"]:not(:hover) > .downloadMainArea > .downloadContainer > .downloadShowMoreInfo {
220 richlistitem[type="download"][verdict] > toolbarseparator {
228 background: transparent;
233 .downloadButton > .button-box > .button-icon {
237 filter: url("chrome://global/skin/filters.svg#fill");
241 .downloadButton > .button-box > .button-text {
242 margin: 0 !important;
246 richlistitem[type="download"][state="1"][exists] .downloadMainArea:hover,
247 richlistitem[type="download"]:not([verdict]) > .downloadButtonArea:hover,
248 richlistitem[type="download"][verdict]:hover {
249 background-color: var(--arrowpanel-dimmed);
252 richlistitem[type="download"][state="1"][exists] > .downloadMainArea:hover:active,
253 richlistitem[type="download"]:not([verdict]) > .downloadButtonArea:hover:active,
254 richlistitem[type="download"][verdict]:hover:active {
255 background-color: var(--arrowpanel-dimmed-further);
258 richlistitem[type="download"][showingsubview] {
259 background-color: #794900;
261 transition: background-color var(--panelui-subview-transition-duration),
262 color var(--panelui-subview-transition-duration);
265 richlistitem[type="download"][verdict="Malware"]:hover,
266 richlistitem[type="download"][verdict="Malware"]:hover:active,
267 richlistitem[type="download"][verdict="Malware"][showingsubview] {
268 background-color: #FF0000;
272 /*** Button icons ***/
274 .downloadIconCancel > .button-box > .button-icon {
275 list-style-image: url("chrome://browser/skin/panel-icons.svg#cancel");
278 .downloadIconShow > .button-box > .button-icon {
279 list-style-image: url("chrome://browser/skin/panel-icons.svg#folder");
282 .downloadIconRetry > .button-box > .button-icon {
283 list-style-image: url("chrome://browser/skin/panel-icons.svg#retry");
286 .downloadShowBlockedInfo > .button-box > .button-icon {
287 list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-right");
290 .downloadShowBlockedInfo > .button-box > .button-icon:-moz-locale-dir(rtl) {
291 list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-left");
294 /*** Blocked subview ***/
296 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype=main] > .panel-subviews {
297 /* When the main view is showing, the shadow on the left edge of the subview is
298 barely visible on the right edge of the main view, so set it to none. */
302 /* When the subview is showing, turn the download button into an arrow pointing
303 back to the main view. */
304 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton {
308 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton > .button-box > .button-icon {
309 list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-left");
312 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton > .button-box > .button-icon:-moz-locale-dir(rtl) {
313 list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-right");
316 #downloadsPanel-blockedSubview {
317 background-image: url("chrome://browser/skin/warning.svg");
318 background-size: 32px 32px;
319 background-position: 16px 16px;
320 background-repeat: no-repeat;
323 #downloadsPanel-blockedSubview:-moz-locale-dir(rtl) {
324 background-position: calc(100% - 16px) 16px;
327 #downloadsPanel-blockedSubview[verdict=Malware] {
328 background-image: url("chrome://browser/skin/downloads/download-blocked.svg");
331 #downloadsPanel-blockedSubview-title {
334 font-size: calc(100% / var(--downloads-item-font-size-factor));
337 #downloadsPanel-blockedSubview-details1,
338 #downloadsPanel-blockedSubview-details2 {
339 font-size: calc(100% * var(--downloads-item-font-size-factor));
341 opacity: var(--downloads-item-details-opacity);
344 #downloadsPanel-blockedSubview-title,
345 #downloadsPanel-blockedSubview-details1,
346 #downloadsPanel-blockedSubview-details2 {
347 -moz-margin-start: 64px;
348 -moz-margin-end: 16px;
351 /*** Progressmeter ***/
352 /* %include progressmeter.inc.css - this happens as @import at the start of the file */
354 /* === END downloads.inc.css === */
356 /*** Panel and outer controls ***/
358 #downloadsPanel[keyfocus] #downloadsSummary:focus,
359 #downloadsPanel[keyfocus] .downloadsPanelFooterButton:focus {
360 outline: 1px #008484 dotted;
361 outline-offset: -1px;
364 #downloadsPanel[keyfocus] #downloadsSummary:focus {
365 outline-offset: -5px;
368 richlistitem[type="download"][showingsubview] {
369 background-color: Highlight;
370 color: HighlightText;
371 transition: background-color var(--panelui-subview-transition-duration),
372 color var(--panelui-subview-transition-duration);
375 #downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"][exists][verdict="Malware"]:hover,
376 #downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"][exists][verdict="Malware"]:hover:active,
377 richlistitem[type="download"][showingsubview][verdict="Malware"] {
378 background-color: hsl(4, 82%, 47%);
383 /*** List items and similar elements in the summary ***/
386 --downloads-item-height: 5.5em;
387 --downloads-item-font-size-factor: 0.9;
388 --downloads-item-details-opacity: 0.6;
391 .downloadButton > .button-box {
392 border: 1px solid transparent;
395 #downloadsPanel[keyfocus] .downloadButton:focus > .button-box {
396 border: 1px dotted #008484;
399 richlistitem[type="download"][verdict="PotentiallyUnwanted"] .blockedIcon {
400 list-style-image: url("chrome://global/skin/icons/warning.svg");
403 richlistitem[type="download"][verdict="Uncommon"] .blockedIcon {
404 list-style-image: url("chrome://global/skin/icons/info.svg");
407 @media (-moz-windows-default-theme) {
408 richlistitem[type="download"][verdict="Malware"] {
413 /*** Highlighted list items ***/
415 #downloadsListBox:-moz-focusring > richlistitem[type="download"][selected] {
416 outline: 1px #008484 dotted;
417 outline-offset: -1px;
418 /*-moz-outline-radius: 3px;*/