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 #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent,
15 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
20 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 #downloadsPanel[hasdownloads] #downloadsFooterButtons:not(.downloadsHideDropmarker) > #downloadsHistory {
85 padding-inline-start: 68px;
88 toolbarseparator.downloadsDropmarkerSplitter {
92 richlistitem[type="download"] > toolbarseparator {
96 richlistitem[type="download"]:hover > toolbarseparator,
97 #downloadsFooter:hover toolbarseparator.downloadsDropmarkerSplitter,
98 #downloadsFooter[showingdropdown] toolbarseparator {
102 .downloadsDropmarker {
106 .downloadsDropmarker > .button-box > hbox {
110 .downloadsDropmarker > .button-box > .button-menu-dropmarker {
116 .downloadsDropmarker > .button-box > .button-menu-dropmarker > .dropmarker-icon {
119 /* list-style-image: url("chrome://browser/skin/downloads/menubutton-dropmarker.svg");
120 filter: url("chrome://browser/skin/filters.svg#fill");
121 fill: currentColor;*/
124 /* Override default icon size which is too small for this dropdown */
125 .downloadsDropmarker > .button-box > .button-menu-dropmarker {
133 -moz-user-focus: normal;
136 #downloadsSummary > .downloadTypeIcon {
137 list-style-image: url("chrome://browser/skin/downloads/download-summary.svg");
140 #downloadsSummaryDescription {
144 /*** List items and similar elements in the summary ***/
147 richlistitem[type="download"] {
148 height: var(--downloads-item-height);
149 padding-inline-end: 0;
153 richlistitem[type="download"] {
155 border-bottom: 1px solid var(--panel-separator-color);
156 background: transparent;
160 richlistitem[type="download"]:last-child {
164 richlistitem[type="download"] > .downloadMainArea {
170 margin-inline-end: 12px;
172 margin-inline-start: 0;
177 .downloadBlockedBadge {
179 background: url("chrome://browser/skin/downloads/download-blocked.svg") top right / 16px no-repeat;
182 downloadBlockedBadge:-moz-locale-dir(rtl) {
183 background-position-x: left;
186 richlistitem[type="download"][verdict="PotentiallyUnwanted"] .downloadBlockedBadge {
187 background-image: url("chrome://browser/skin/warning.svg");
190 richlistitem[type="download"][verdict="Uncommon"] .downloadBlockedBadge {
191 background-image: url("chrome://browser/skin/info.svg");
194 /* We hold .downloadTarget, .downloadProgress and .downloadDetails inside of
195 a vbox with class .downloadContainer. We set the font-size of the entire
196 container to --downloads-item-font-size-factor because:
198 1) This is the size that we want .downloadDetails to be
199 2) The container's width is set by localizers by &downloadDetails.width;,
200 which is a ch unit. Since this is the value that should control the
201 panel width, we apply it to the outer container to constrain
202 .downloadTarget and .downloadProgress.
204 Finally, since we want .downloadTarget's font-size to be at 100% of the
205 font-size of .downloadContainer's parent, we use calc to go from the
206 smaller font-size back to the original font-size.
208 #downloadsSummaryDetails,
210 font-size: calc(100% * var(--downloads-item-font-size-factor));
213 #downloadsSummaryDescription,
215 margin-bottom: var(--downloads-item-target-margin-bottom);
220 font-size: calc(100% / var(--downloads-item-font-size-factor));
223 #downloadsSummaryDetails,
225 margin-top: var(--downloads-item-details-margin-top);
226 opacity: var(--downloads-item-details-opacity);
230 richlistitem[type="download"][verdict] > toolbarseparator {
238 background: transparent;
243 .downloadButton > .button-box > .button-icon {
247 filter: url("chrome://browser/skin/filters.svg#fill");
251 .downloadButton > .button-box > .button-text {
252 margin: 0 !important;
256 richlistitem[type="download"][state="1"][exists]:hover > .downloadMainArea,
257 richlistitem[type="download"]:not([verdict]):hover > .downloadButtonArea {
258 background-color: var(--arrowpanel-dimmed);
261 richlistitem[type="download"][state="1"][exists] .downloadMainArea:hover,
262 richlistitem[type="download"]:not([verdict]) > .downloadButtonArea:hover,
263 richlistitem[type="download"][verdict]:hover {
264 background-color: var(--arrowpanel-dimmed-further);
267 richlistitem[type="download"][state="1"][exists] > .downloadMainArea:hover:active,
268 richlistitem[type="download"]:not([verdict]) > .downloadButtonArea:hover:active,
269 richlistitem[type="download"][verdict]:hover:active {
270 background-color: var(--arrowpanel-dimmed-even-further);
273 richlistitem[type="download"][showingsubview] {
274 background-color: #794900;
276 transition: background-color var(--panelui-subview-transition-duration),
277 color var(--panelui-subview-transition-duration);
280 richlistitem[type="download"][verdict="Malware"]:hover,
281 richlistitem[type="download"][verdict="Malware"]:hover:active,
282 richlistitem[type="download"][verdict="Malware"][showingsubview] {
283 background-color: #FF0000;
287 richlistitem[type="download"][verdict="Malware"]:hover > .downloadButtonArea > .downloadButton {
291 /*** Button icons ***/
293 .downloadIconCancel > .button-box > .button-icon {
294 list-style-image: url("chrome://browser/skin/panel-icons.svg#cancel");
297 .downloadIconShow > .button-box > .button-icon {
298 list-style-image: url("chrome://browser/skin/panel-icons.svg#folder");
301 .downloadIconRetry > .button-box > .button-icon {
302 list-style-image: url("chrome://browser/skin/panel-icons.svg#retry");
305 .downloadShowBlockedInfo > .button-box > .button-icon {
306 list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-right");
309 .downloadShowBlockedInfo > .button-box > .button-icon:-moz-locale-dir(rtl) {
310 list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-left");
313 /*** Blocked subview ***/
315 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype=main] > .panel-subviews {
316 /* When the main view is showing, the shadow on the left edge of the subview is
317 barely visible on the right edge of the main view, so set it to none. */
321 /* When the subview is showing, turn the download button into an arrow pointing
322 back to the main view. */
323 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton {
327 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton > .button-box > .button-icon {
328 list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-left");
331 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton > .button-box > .button-icon:-moz-locale-dir(rtl) {
332 list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-right");
335 #downloadsPanel-blockedSubview {
336 background-image: url("chrome://browser/skin/warning.svg");
337 background-size: 32px 32px;
338 background-position: 16px 16px;
339 background-repeat: no-repeat;
342 #downloadsPanel-blockedSubview:-moz-locale-dir(rtl) {
343 background-position: calc(100% - 16px) 16px;
346 #downloadsPanel-blockedSubview[verdict=Malware] {
347 background-image: url("chrome://browser/skin/downloads/download-blocked.svg");
350 #downloadsPanel-blockedSubview-title {
353 font-size: calc(100% / var(--downloads-item-font-size-factor));
356 #downloadsPanel-blockedSubview-details1,
357 #downloadsPanel-blockedSubview-details2 {
358 font-size: calc(100% * var(--downloads-item-font-size-factor));
360 opacity: var(--downloads-item-details-opacity);
363 #downloadsPanel-blockedSubview-title,
364 #downloadsPanel-blockedSubview-details1,
365 #downloadsPanel-blockedSubview-details2 {
366 -moz-margin-start: 64px;
367 -moz-margin-end: 16px;
370 /* === END downloads.inc.css === */
372 /*** Panel and outer controls ***/
377 #downloadsSummary:hover {
380 #downloadsSummary:hover:active {
383 #downloadsPanel[keyfocus] #downloadsSummary:focus,
384 #downloadsPanel[keyfocus] .downloadsPanelFooterButton:focus {
385 outline: 1px #008484 dotted;
386 outline-offset: -1px;
389 #downloadsPanel[keyfocus] #downloadsSummary:focus {
390 outline-offset: -5px;
393 richlistitem[type="download"][showingsubview] {
394 background-color: Highlight;
395 color: HighlightText;
396 transition: background-color var(--panelui-subview-transition-duration),
397 color var(--panelui-subview-transition-duration);
400 #downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"][exists][verdict="Malware"]:hover,
401 #downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"][exists][verdict="Malware"]:hover:active,
402 richlistitem[type="download"][showingsubview][verdict="Malware"] {
403 background-color: hsl(4, 82%, 47%);
408 /*** List items and similar elements in the summary ***/
411 --downloads-item-height: 7em;
412 --downloads-item-font-size-factor: 0.9;
413 --downloads-item-target-margin-bottom: 6px;
414 --downloads-item-details-margin-top: 0;
415 --downloads-item-details-opacity: 0.6;
418 .downloadButton > .button-box {
419 border: 1px solid transparent;
422 #downloadsPanel[keyfocus] .downloadButton:focus > .button-box {
423 border: 1px dotted #008484;
426 richlistitem[type="download"][verdict="PotentiallyUnwanted"] .blockedIcon {
427 list-style-image: url("chrome://global/skin/icons/warning.svg");
430 richlistitem[type="download"][verdict="Uncommon"] .blockedIcon {
431 list-style-image: url("chrome://global/skin/icons/information-32.png");
434 @media (-moz-windows-default-theme) {
435 richlistitem[type="download"][verdict="Malware"] {
440 /*** Highlighted list items ***/
442 #downloadsListBox:-moz-focusring > richlistitem[type="download"][selected] {
443 outline: 1px #008484 dotted;
444 outline-offset: -1px;
445 /*-moz-outline-radius: 3px;*/