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;
27 /* The panel can be wider than this description after the blocked subview is
28 shown, so center the text. */
32 .downloadsPanelFooter {
33 background-color: #000000;
34 border-top: 1px solid #A09090;
37 .downloadsPanelFooter > toolbarseparator {
41 /* border-left: 1px solid hsla(210,4%,10%,.14);
42 -moz-appearance: none !important;*/
45 .downloadsPanelFooterButton {
48 /* min-height: 40px;*/
51 .downloadsPanelFooterButton:hover {
54 .downloadsPanelFooterButton:hover:active {
57 .downloadsPanelFooterButton[default] {
60 .downloadsPanelFooterButton[default]:hover {
63 .downloadsPanelFooterButton[default]:hover:active {
69 -moz-user-focus: normal;
72 #downloadsSummary > .downloadTypeIcon {
73 list-style-image: url("chrome://browser/skin/downloads/download-summary.png");
76 #downloadsSummaryDescription {
80 /*** List items and similar elements in the summary ***/
83 richlistitem[type="download"] {
84 height: var(--downloads-item-height);
85 padding-inline-end: 0;
89 richlistitem[type="download"] {
91 /*border-top: 1px solid var(--downloads-item-border-top-color);*/
92 border-bottom: 1px solid var(--downloads-item-border-bottom-color);
93 background: transparent;
97 richlistitem[type="download"]:first-child {
98 /* border-top: 1px solid transparent;*/
103 margin-inline-end: 12px;
105 margin-inline-start: 0;
110 .downloadBlockedBadge {
112 background: url("chrome://browser/skin/downloads/download-blocked.svg") top right / 16px no-repeat;
115 downloadBlockedBadge:-moz-locale-dir(rtl) {
116 background-position-x: left;
119 richlistitem[type="download"][verdict="PotentiallyUnwanted"] .downloadBlockedBadge {
120 background-image: url("chrome://browser/skin/warning.svg");
123 richlistitem[type="download"][verdict="Uncommon"] .downloadBlockedBadge {
124 background-image: url("chrome://browser/skin/info.svg");
127 /* We hold .downloadTarget, .downloadProgress and .downloadDetails inside of
128 a vbox with class .downloadContainer. We set the font-size of the entire
129 container to --downloads-item-font-size-factor because:
131 1) This is the size that we want .downloadDetails to be
132 2) The container's width is set by localizers by &downloadDetails.width;,
133 which is a ch unit. Since this is the value that should control the
134 panel width, we apply it to the outer container to constrain
135 .downloadTarget and .downloadProgress.
137 Finally, since we want .downloadTarget's font-size to be at 100% of the
138 font-size of .downloadContainer's parent, we use calc to go from the
139 smaller font-size back to the original font-size.
141 #downloadsSummaryDetails,
143 font-size: calc(100% * var(--downloads-item-font-size-factor));
146 #downloadsSummaryDescription,
148 margin-bottom: var(--downloads-item-target-margin-bottom);
153 font-size: calc(100% / var(--downloads-item-font-size-factor));
156 #downloadsSummaryDetails,
158 margin-top: var(--downloads-item-details-margin-top);
159 opacity: var(--downloads-item-details-opacity);
168 background: transparent;
170 list-style-image: url("chrome://browser/skin/downloads/buttons.png");
173 .downloadButton > .button-box {
177 /*** Blocked subview ***/
179 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype=main] > .panel-subviews {
180 /* When the main view is showing, the shadow on the left edge of the subview is
181 barely visible on the right edge of the main view, so set it to none. */
185 /* When the subview is showing, turn the download button into an arrow pointing
186 back to the main view. */
187 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton {
188 list-style-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
191 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton:-moz-locale-dir(rtl) {
192 list-style-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
195 #downloadsPanel-blockedSubview {
196 background-image: url("chrome://browser/skin/warning.svg");
197 background-size: 32px 32px;
198 background-position: 16px 16px;
199 background-repeat: no-repeat;
202 #downloadsPanel-blockedSubview:-moz-locale-dir(rtl) {
203 background-position: calc(100% - 16px) 16px;
206 #downloadsPanel-blockedSubview[verdict=Malware] {
207 background-image: url("chrome://browser/skin/downloads/download-blocked.svg");
210 #downloadsPanel-blockedSubview-title {
213 font-size: calc(100% / var(--downloads-item-font-size-factor));
216 #downloadsPanel-blockedSubview-details1,
217 #downloadsPanel-blockedSubview-details2 {
218 font-size: calc(100% * var(--downloads-item-font-size-factor));
220 opacity: var(--downloads-item-details-opacity);
223 #downloadsPanel-blockedSubview-title,
224 #downloadsPanel-blockedSubview-details1,
225 #downloadsPanel-blockedSubview-details2 {
226 -moz-margin-start: 64px;
227 -moz-margin-end: 16px;
230 /* === END downloads.inc.css === */
232 /*** Panel and outer controls ***/
237 #downloadsSummary:hover {
240 #downloadsSummary:hover:active {
243 #downloadsPanel[keyfocus] #downloadsSummary:focus,
244 #downloadsPanel[keyfocus] .downloadsPanelFooterButton:focus {
245 outline: 1px #008484 dotted;
246 outline-offset: -1px;
249 #downloadsPanel[keyfocus] #downloadsSummary:focus {
250 outline-offset: -5px;
253 .downloadsPanelFooterButton > .button-box {
254 /* Hide the border so we don't display an inner focus ring. */
258 richlistitem[type="download"][showingsubview] {
259 background-color: Highlight;
260 color: HighlightText;
261 transition: background-color var(--panelui-subview-transition-duration),
262 color var(--panelui-subview-transition-duration);
265 #downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"][exists][verdict="Malware"]:hover,
266 #downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"][exists][verdict="Malware"]:hover:active,
267 richlistitem[type="download"][showingsubview][verdict="Malware"] {
268 background-color: hsl(4, 82%, 47%);
273 /*** List items and similar elements in the summary ***/
276 --downloads-item-height: 7em;
277 /*--downloads-item-border-top-color: hsla(0,0%,100%,.3);*/
278 --downloads-item-border-bottom-color: #9C9CFF;
279 --downloads-item-font-size-factor: 0.9;
280 --downloads-item-target-margin-bottom: 6px;
281 --downloads-item-details-margin-top: 0;
282 --downloads-item-details-opacity: 0.6;
285 .downloadButton > .button-box {
286 border: 1px solid transparent;
289 #downloadsPanel[keyfocus] .downloadButton:focus > .button-box {
290 border: 1px dotted #008484;
293 richlistitem[type="download"][verdict="PotentiallyUnwanted"] .blockedIcon {
294 list-style-image: url("chrome://global/skin/icons/warning.svg");
297 richlistitem[type="download"][verdict="Uncommon"] .blockedIcon {
298 list-style-image: url("chrome://global/skin/icons/information-32.png");
301 /*** Highlighted list items ***/
303 #downloadsListBox:-moz-focusring > richlistitem[type="download"][selected] {
304 outline: 1px #008484 dotted;
305 outline-offset: -1px;
306 /*-moz-outline-radius: 3px;*/
309 /* #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover { */
310 #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"]:hover {
312 background-color: #794900;
317 #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover:active {
320 /*** Button icons ***/
322 .downloadButton.downloadIconCancel {
323 -moz-image-region: rect(0px, 16px, 16px, 0px);
325 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconCancel,
326 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconCancel:hover,
327 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconCancel:active {
328 -moz-image-region: rect(0px, 32px, 16px, 16px);
331 .downloadButton.downloadIconShow {
332 -moz-image-region: rect(16px, 16px, 32px, 0px);
334 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconShow,
335 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconShow:hover,
336 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconShow:active {
337 -moz-image-region: rect(16px, 32px, 32px, 16px);
340 .downloadButton.downloadIconRetry {
341 -moz-image-region: rect(32px, 16px, 48px, 0px);
343 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconRetry,
344 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconRetry:hover,
345 richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconRetry:active {
346 -moz-image-region: rect(32px, 32px, 48px, 16px);
349 .downloadButton.downloadShowBlockedInfo {
350 -moz-image-region: rect(48px, 16px, 64px, 0px);
352 richlistitem[type="download"]:hover .downloadButton.downloadShowBlockedInfo,
353 richlistitem[type="download"]:hover .downloadButton.downloadShowBlockedInfo:hover,
354 richlistitem[type="download"]:hover .downloadButton.downloadShowBlockedInfo:active {
355 /* -moz-image-region: rect(48px, 32px, 64px, 16px);*/
358 .downloadButton.downloadShowBlockedInfo:-moz-locale-dir(rtl) {
359 -moz-image-region: rect(64px, 16px, 80px, 0px);
361 richlistitem[type="download"]:hover .downloadButton.downloadShowBlockedInfo:-moz-locale-dir(rtl),
362 richlistitem[type="download"]:hover .downloadButton.downloadShowBlockedInfo:hover:-moz-locale-dir(rtl),
363 richlistitem[type="download"]:hover .downloadButton.downloadShowBlockedInfo:active:-moz-locale-dir(rtl) {
364 /* -moz-image-region: rect(64px, 32px, 80px, 16px);*/