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 {
44 /* border-left: 1px solid var(--panel-separator-color);
45 -moz-appearance: none;*/
48 .downloadsPanelFooterButton {
52 /* min-height: 40px;*/
56 .downloadsPanelFooterButton:hover {
59 .downloadsPanelFooterButton:hover:active,
60 .downloadsPanelFooterButton[open="true"] {
63 .downloadsPanelFooterButton[default] {
66 .downloadsPanelFooterButton[default]:hover {
69 .downloadsPanelFooterButton[default]:hover:active {
72 .downloadsPanelFooterButton > .button-box {
79 padding-inline-start: 10px;
80 padding-inline-end: 10px;
83 #downloadsPanel[hasdownloads] #downloadsFooterButtons:not(.downloadsHideDropmarker) > #downloadsHistory {
84 padding-inline-start: 68px;
87 toolbarseparator.downloadsDropmarkerSplitter {
91 #downloadsFooter:hover toolbarseparator.downloadsDropmarkerSplitter,
92 #downloadsFooter[showingdropdown] toolbarseparator {
96 .downloadsDropmarker {
100 .downloadsDropmarker > .button-box > hbox {
104 .downloadsDropmarker > .button-box > .button-menu-dropmarker {
110 .downloadsDropmarker > .button-box > .button-menu-dropmarker > .dropmarker-icon {
113 /* list-style-image: url("chrome://browser/skin/downloads/menubutton-dropmarker.svg");
114 filter: url("chrome://browser/skin/filters.svg#fill");
115 fill: currentColor;*/
118 /* Override default icon size which is too small for this dropdown */
119 .downloadsDropmarker > .button-box > .button-menu-dropmarker {
127 -moz-user-focus: normal;
130 #downloadsSummary > .downloadTypeIcon {
131 list-style-image: url("chrome://browser/skin/downloads/download-summary.svg");
134 #downloadsSummaryDescription {
138 /*** List items and similar elements in the summary ***/
141 richlistitem[type="download"] {
142 height: var(--downloads-item-height);
143 padding-inline-end: 0;
147 richlistitem[type="download"] {
149 /*border-top: 1px solid var(--downloads-item-border-top-color);*/
150 border-bottom: 1px solid var(--downloads-item-border-bottom-color);
151 background: transparent;
155 richlistitem[type="download"]:first-child {
156 /* border-top: 1px solid transparent;*/
161 margin-inline-end: 12px;
163 margin-inline-start: 0;
168 .downloadBlockedBadge {
170 background: url("chrome://browser/skin/downloads/download-blocked.svg") top right / 16px no-repeat;
173 downloadBlockedBadge:-moz-locale-dir(rtl) {
174 background-position-x: left;
177 richlistitem[type="download"][verdict="PotentiallyUnwanted"] .downloadBlockedBadge {
178 background-image: url("chrome://browser/skin/warning.svg");
181 richlistitem[type="download"][verdict="Uncommon"] .downloadBlockedBadge {
182 background-image: url("chrome://browser/skin/info.svg");
185 /* We hold .downloadTarget, .downloadProgress and .downloadDetails inside of
186 a vbox with class .downloadContainer. We set the font-size of the entire
187 container to --downloads-item-font-size-factor because:
189 1) This is the size that we want .downloadDetails to be
190 2) The container's width is set by localizers by &downloadDetails.width;,
191 which is a ch unit. Since this is the value that should control the
192 panel width, we apply it to the outer container to constrain
193 .downloadTarget and .downloadProgress.
195 Finally, since we want .downloadTarget's font-size to be at 100% of the
196 font-size of .downloadContainer's parent, we use calc to go from the
197 smaller font-size back to the original font-size.
199 #downloadsSummaryDetails,
201 font-size: calc(100% * var(--downloads-item-font-size-factor));
204 #downloadsSummaryDescription,
206 margin-bottom: var(--downloads-item-target-margin-bottom);
211 font-size: calc(100% / var(--downloads-item-font-size-factor));
214 #downloadsSummaryDetails,
216 margin-top: var(--downloads-item-details-margin-top);
217 opacity: var(--downloads-item-details-opacity);
226 background: transparent;
228 list-style-image: url("chrome://browser/skin/downloads/buttons.png");
231 .downloadButton > .button-box {
235 /*** Blocked subview ***/
237 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype=main] > .panel-subviews {
238 /* When the main view is showing, the shadow on the left edge of the subview is
239 barely visible on the right edge of the main view, so set it to none. */
243 /* When the subview is showing, turn the download button into an arrow pointing
244 back to the main view. */
245 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton {
246 list-style-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
249 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton:-moz-locale-dir(rtl) {
250 list-style-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
253 #downloadsPanel-blockedSubview {
254 background-image: url("chrome://browser/skin/warning.svg");
255 background-size: 32px 32px;
256 background-position: 16px 16px;
257 background-repeat: no-repeat;
260 #downloadsPanel-blockedSubview:-moz-locale-dir(rtl) {
261 background-position: calc(100% - 16px) 16px;
264 #downloadsPanel-blockedSubview[verdict=Malware] {
265 background-image: url("chrome://browser/skin/downloads/download-blocked.svg");
268 #downloadsPanel-blockedSubview-title {
271 font-size: calc(100% / var(--downloads-item-font-size-factor));
274 #downloadsPanel-blockedSubview-details1,
275 #downloadsPanel-blockedSubview-details2 {
276 font-size: calc(100% * var(--downloads-item-font-size-factor));
278 opacity: var(--downloads-item-details-opacity);
281 #downloadsPanel-blockedSubview-title,
282 #downloadsPanel-blockedSubview-details1,
283 #downloadsPanel-blockedSubview-details2 {
284 -moz-margin-start: 64px;
285 -moz-margin-end: 16px;
288 /* === END downloads.inc.css === */
290 /*** Panel and outer controls ***/
295 #downloadsSummary:hover {
298 #downloadsSummary:hover:active {
301 #downloadsPanel[keyfocus] #downloadsSummary:focus,
302 #downloadsPanel[keyfocus] .downloadsPanelFooterButton:focus {
303 outline: 1px #008484 dotted;
304 outline-offset: -1px;
307 #downloadsPanel[keyfocus] #downloadsSummary:focus {
308 outline-offset: -5px;
311 richlistitem[type="download"][showingsubview] {
312 background-color: Highlight;
313 color: HighlightText;
314 transition: background-color var(--panelui-subview-transition-duration),
315 color var(--panelui-subview-transition-duration);
318 #downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"][exists][verdict="Malware"]:hover,
319 #downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"][exists][verdict="Malware"]:hover:active,
320 richlistitem[type="download"][showingsubview][verdict="Malware"] {
321 background-color: hsl(4, 82%, 47%);
326 /*** List items and similar elements in the summary ***/
329 --downloads-item-height: 7em;
330 /*--downloads-item-border-top-color: hsla(0,0%,100%,.3);*/
331 --downloads-item-border-bottom-color: #9C9CFF;
332 --downloads-item-font-size-factor: 0.9;
333 --downloads-item-target-margin-bottom: 6px;
334 --downloads-item-details-margin-top: 0;
335 --downloads-item-details-opacity: 0.6;
338 .downloadButton > .button-box {
339 border: 1px solid transparent;
342 #downloadsPanel[keyfocus] .downloadButton:focus > .button-box {
343 border: 1px dotted #008484;
346 richlistitem[type="download"][verdict="PotentiallyUnwanted"] .blockedIcon {
347 list-style-image: url("chrome://global/skin/icons/warning.svg");
350 richlistitem[type="download"][verdict="Uncommon"] .blockedIcon {
351 list-style-image: url("chrome://global/skin/icons/information-32.png");
354 /*** Highlighted list items ***/
356 #downloadsListBox:-moz-focusring > richlistitem[type="download"][selected] {
357 outline: 1px #008484 dotted;
358 outline-offset: -1px;
359 /*-moz-outline-radius: 3px;*/
362 /* #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover { */
363 #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"]:hover {
365 background-color: #794900;
370 #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover:active {
373 /*** Button icons ***/
375 .downloadButton.downloadIconCancel {
376 -moz-image-region: rect(0px, 16px, 16px, 0px);
378 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconCancel,
379 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconCancel:hover,
380 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconCancel:active {
381 -moz-image-region: rect(0px, 32px, 16px, 16px);
384 .downloadButton.downloadIconShow {
385 -moz-image-region: rect(16px, 16px, 32px, 0px);
387 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconShow,
388 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconShow:hover,
389 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconShow:active {
390 -moz-image-region: rect(16px, 32px, 32px, 16px);
393 .downloadButton.downloadIconRetry {
394 -moz-image-region: rect(32px, 16px, 48px, 0px);
396 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconRetry,
397 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconRetry:hover,
398 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconRetry:active {
399 -moz-image-region: rect(32px, 32px, 48px, 16px);
402 .downloadButton.downloadShowBlockedInfo {
403 -moz-image-region: rect(48px, 16px, 64px, 0px);
405 richlistitem[type="download"]:hover .downloadButton.downloadShowBlockedInfo,
406 richlistitem[type="download"]:hover .downloadButton.downloadShowBlockedInfo:hover,
407 richlistitem[type="download"]:hover .downloadButton.downloadShowBlockedInfo:active {
408 /* -moz-image-region: rect(48px, 32px, 64px, 16px);*/
411 .downloadButton.downloadShowBlockedInfo:-moz-locale-dir(rtl) {
412 -moz-image-region: rect(64px, 16px, 80px, 0px);
414 richlistitem[type="download"]:hover .downloadButton.downloadShowBlockedInfo:-moz-locale-dir(rtl),
415 richlistitem[type="download"]:hover .downloadButton.downloadShowBlockedInfo:hover:-moz-locale-dir(rtl),
416 richlistitem[type="download"]:hover .downloadButton.downloadShowBlockedInfo:active:-moz-locale-dir(rtl) {
417 /* -moz-image-region: rect(64px, 32px, 80px, 16px);*/