diff options
Diffstat (limited to 'browser/themes/shared/downloads')
10 files changed, 1119 insertions, 0 deletions
diff --git a/browser/themes/shared/downloads/allDownloadsView.inc.css b/browser/themes/shared/downloads/allDownloadsView.inc.css new file mode 100644 index 0000000000..bbe678fde9 --- /dev/null +++ b/browser/themes/shared/downloads/allDownloadsView.inc.css @@ -0,0 +1,98 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import "chrome://browser/skin/downloads/progressmeter.css"; +@import "chrome://browser/skin/downloads/download-blockedStates.css"; + +/*** View and outer controls ***/ + +#downloadsListBox { + margin: 0; +} + +/*** List items ***/ + +#downloadsListBox > richlistitem { + min-height: 4.5em; +} + +.downloadTypeIcon { + margin: 8px 13px; + width: 32px; + height: 32px; +} + +.downloadTarget { + margin: 0; +} + +.downloadDetails { + opacity: 0.7; + font-size: 95%; + /* Use calc() to keep the height consistent with .downloadTarget, so that the + progress bar can be vertically centered. */ + margin: 4px 0 calc(1em / 0.95 - 1em); +} + +.downloadDetailsHover, +.downloadDetailsButtonHover { + display: none; +} + +.downloadButton { + appearance: none; + -moz-box-align: center; + background: transparent; + min-width: 0; + min-height: 0; + margin: 0; + border: none; + color: inherit; + padding: 0 12px; +} + +.downloadButton > .button-box { + padding: 8px; + border-radius: 4px; +} + +.downloadButton > .button-box > .button-icon { + width: 16px; + height: 16px; + margin: 0; + -moz-context-properties: fill; + fill: currentColor; +} + +.downloadButton > .button-box > .button-text { + display: none; +} + +.downloadButton:hover > .button-box { + background-color: color-mix(in srgb, currentColor 15%, transparent); +} + +.downloadButton:hover:active > .button-box { + background-color: color-mix(in srgb, currentColor 30%, transparent); +} + +/*** Button icons ***/ + +.downloadIconCancel > .button-box > .button-icon { + list-style-image: url("chrome://global/skin/icons/close.svg"); +} + +.downloadIconShow > .button-box > .button-icon { + list-style-image: url("chrome://global/skin/icons/folder.svg"); +} + +@media (-moz-platform: macos) { + .downloadIconShow > .button-box > .button-icon { + list-style-image: url("chrome://global/skin/icons/search-glass.svg"); + } +} + +.downloadIconRetry > .button-box > .button-icon { + list-style-image: url("chrome://global/skin/icons/reload.svg"); +} diff --git a/browser/themes/shared/downloads/contentAreaDownloadsView.css b/browser/themes/shared/downloads/contentAreaDownloadsView.css new file mode 100644 index 0000000000..c2e27b1d08 --- /dev/null +++ b/browser/themes/shared/downloads/contentAreaDownloadsView.css @@ -0,0 +1,27 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import url("chrome://global/skin/in-content/common.css"); + +#contentAreaDownloadsView { + padding: 18px; +} + +#downloadsListBox:empty { + border-color: transparent; + background-color: transparent; +} + +.downloadButton:not([disabled="true"]):hover, +.downloadButton:not([disabled="true"]):hover:active, +.downloadButton:not([disabled]):hover:active { + background: transparent; + border: none; +} + +#downloadsListEmptyDescription { + margin: 1em; + text-align: center; + color: var(--in-content-deemphasized-text); +} diff --git a/browser/themes/shared/downloads/download-blockedStates.css b/browser/themes/shared/downloads/download-blockedStates.css new file mode 100644 index 0000000000..7a68a381c0 --- /dev/null +++ b/browser/themes/shared/downloads/download-blockedStates.css @@ -0,0 +1,62 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +.downloadBlockedBadge { + background-repeat: no-repeat; + width: 16px; + height: 16px; + margin: 0; + margin-inline: 16px; +} + +#downloadsPanel-blockedSubview[verdict="Insecure"] .downloadsPanel-blockedSubview-image, +#downloadsPanel-blockedSubview[verdict="Malware"] .downloadsPanel-blockedSubview-image, +#downloadsListBox > richlistitem[verdict="Insecure"] .downloadBlockedBadge, +#downloadsListBox > richlistitem[verdict="Malware"] .downloadBlockedBadge { + background-image: url("chrome://global/skin/icons/error.svg"); + -moz-context-properties: fill; + fill: #e22850; +} + +:root[lwt-popup-brighttext] #downloadsPanel-blockedSubview[verdict="Insecure"] .downloadsPanel-blockedSubview-image, +:root[lwt-popup-brighttext] #downloadsListBox > richlistitem[verdict="Insecure"] .downloadBlockedBadge, +:root[lwt-popup-brighttext] #downloadsPanel-blockedSubview[verdict="Malware"] .downloadsPanel-blockedSubview-image, +:root[lwt-popup-brighttext] #downloadsListBox > richlistitem[verdict="Malware"] .downloadBlockedBadge { + fill: #FF9AA2; +} + +#downloadsPanel-blockedSubview[verdict="Uncommon"] .downloadsPanel-blockedSubview-image, +#downloadsListBox > richlistitem[verdict="Uncommon"] .downloadBlockedBadge { + -moz-context-properties: fill; + fill: #0090ED; + background-image: url("chrome://global/skin/icons/info-filled.svg"); +} + +:root[lwt-popup-brighttext] #downloadsPanel-blockedSubview[verdict="Uncommon"] .downloadsPanel-blockedSubview-image, +:root[lwt-popup-brighttext] #downloadsListBox > richlistitem[verdict="Uncommon"] .downloadBlockedBadge { + fill: #80EBFF; +} + +.downloadsPanel-blockedSubview-image { + width: 16px; + background-repeat: no-repeat; + margin-inline-end: 25px; +} + +.downloadsPanel-blockedSubview-title-box { + margin-block: 21.5px 0; +} + +#downloadsPanel-blockedSubview-title { + -moz-box-flex: 1; +} + +#downloadsPanel-blockedSubview[verdict="PotentiallyUnwanted"] .downloadsPanel-blockedSubview-image, +#downloadsPanel-blockedSubview[verdict="DownloadSpam"] .downloadsPanel-blockedSubview-image, +#downloadsListBox > richlistitem[verdict="PotentiallyUnwanted"] .downloadBlockedBadge, +#downloadsListBox > richlistitem[verdict="DownloadSpam"] .downloadBlockedBadge { + -moz-context-properties: fill; + fill: #ffbf00; + background-image: url("chrome://global/skin/icons/warning.svg"); +} diff --git a/browser/themes/shared/downloads/download-summary.svg b/browser/themes/shared/downloads/download-summary.svg new file mode 100644 index 0000000000..c10ee95fcb --- /dev/null +++ b/browser/themes/shared/downloads/download-summary.svg @@ -0,0 +1,11 @@ +<?xml version="1.0"?> +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> +<svg xmlns="http://www.w3.org/2000/svg" + width="32" height="32" viewBox="0 0 32 32"> + <path fill="#fff" d="M26.2,31.4H6.8c-1.8,0-3.4-1.5-3.4-3.3V3.8c0-1.8,1.6-3.3,3.4-3.3H23l5.6,6.4V28C28.7,29.9,28,31.4,26.2,31.4z" /> + <path fill="#939393" d="M26.2,31.9H6.8c-2,0-3.8-1.7-3.8-3.8V3.8C3,1.7,4.8,0,6.8,0h16.4L29,6.7v21.4C29,30.2,28.2,31.9,26.2,31.9z M6.8,1C5.2,1,4,2.3,4,3.8V28c0,1.6,1.4,3,2.9,3h19.2c1.6,0,2-1.5,2-3V7.1L22.7,1C22.7,1,6.8,1,6.8,1z" /> + <path fill="#4c4c4c" d="M22.5,18.2L17,23.6c-0.3,0.3-0.6,0.4-1.1,0.4c-0.3,0-0.8-0.1-1.1-0.4l-5.5-5.4c-0.5-0.5-0.4-1.1,0.4-1.1H13 v-5.9c0-0.5,0.4-1,1-1h3.9c0.5,0,1,0.4,1,1v5.9h3.1C22.8,17.2,23,17.6,22.5,18.2z" /> + <polygon fill="#939393" points="27,9 21,9 21,1.9 22,1.9 22,8 27,8" /> +</svg> diff --git a/browser/themes/shared/downloads/downloads.inc.css b/browser/themes/shared/downloads/downloads.inc.css new file mode 100644 index 0000000000..64c3253bfb --- /dev/null +++ b/browser/themes/shared/downloads/downloads.inc.css @@ -0,0 +1,271 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +@import "chrome://browser/skin/downloads/progressmeter.css"; +@import "chrome://browser/skin/downloads/download-blockedStates.css"; + +/*** Panel and outer controls ***/ + +#downloadsListBox { + background: transparent; + color: inherit; + appearance: none; + border: 0; + margin: 0; + /* We have an explicit width set by l10n, but we still want to fill our + * container if it's wider. */ + min-width: 100%; +} + +@media not (prefers-contrast) { + #downloadsListBox[disabled] { + opacity: var(--downloads-item-disabled-opacity) !important; + } +} + +@media (prefers-contrast) { + #downloadsListBox[disabled] { + color: GrayText; + } +} + +#emptyDownloads { + padding: 1.5em 8px 2.1em; + margin: 0; + pointer-events: none; +} + +#downloadsListBox > richlistitem { + /* Leave space for the 32x32 icon with 16px vertical padding, and/or + * the text in the item, with the same padding, whichever is bigger: */ + min-height: max(48px, calc(16px + 2em)); + padding-inline-end: 4px; + margin: 0 0 8px; + border-radius: 4px; +} + +.downloadMainArea { + padding-block: 8px; + padding-inline-start: 4px; + border-radius: 4px; + min-width: 0; +} + +.downloadContainer { + min-width: 0; +} + +#downloadsListBox > richlistitem[state="1"][exists].hoveringMainArea:hover, +#downloadsListBox > richlistitem.openWhenFinished.hoveringMainArea:hover, +#downloadsListBox > richlistitem[verdict]:hover, +#downloadsListBox > richlistitem.openWhenFinished:hover, +.downloadsPanelFooterButton:hover { + background-color: var(--panel-item-hover-bgcolor); +} + +#downloadsListBox > richlistitem[state="1"][exists].hoveringMainArea:hover:active, +#downloadsListBox > richlistitem.openWhenFinished.hoveringMainArea:hover:active, +#downloadsListBox > richlistitem[verdict]:hover:active, +.downloadsPanelFooterButton[open="true"] { + background-color: var(--panel-item-active-bgcolor); +} + +#downloadsListBox:focus-visible > richlistitem[selected], +#downloadsListBox[force-focus-visible]:focus > richlistitem[selected], +.downloadButton:focus-visible, +#downloadsSummary:focus-visible, +.downloadsPanelFooterButton:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-inset); +} + +#downloadsListBox > richlistitem[verdict="Insecure"] .downloadDetails, +#downloadsListBox > richlistitem[verdict="Malware"] .downloadDetails { + color: #C50042; + /* The details text usually gets an opacity reduction, but for the error + states we disable that, because it would reduce the contrast too much. */ + opacity: inherit; +} + +:root[lwt-popup-brighttext] #downloadsListBox > richlistitem[verdict="Insecure"] .downloadDetails, +:root[lwt-popup-brighttext] #downloadsListBox > richlistitem[verdict="Malware"] .downloadDetails { + color: #FF848B; +} + +.downloadTypeIcon { + margin-inline-end: 0.7em; +} + +#downloadsPanel-blockedSubview-buttons { + margin-top: 1.5em; +} + +#downloadsSummary { + background: var(--arrowpanel-dimmed); + border-top: 1px solid var(--panel-separator-color); + /* Reserve the same space as the button and separator in download items. */ + padding-inline-end: 59px; + -moz-user-focus: normal; +} + +#downloadsSummary > .downloadTypeIcon { + list-style-image: url("chrome://browser/skin/downloads/download-summary.svg"); +} + +#downloadsSummaryDescription { + color: -moz-nativehyperlinktext; +} + +:root[lwt-popup-brighttext] #downloadsSummaryDescription { + color: #75baff; /* --blue-30 */ +} + +/*** List items and similar elements in the summary ***/ +#downloadsSummary { + min-height: var(--downloads-item-height); +} + +#downloadsListBox > richlistitem { + background: transparent; + color: inherit; +} + +#downloadsListBox > richlistitem:last-child { + margin-bottom: 0; +} + +.downloadTypeIcon { + width: 32px; + height: 32px; +} + +#downloadsSummaryDescription, +.downloadTarget { + margin: 0; +} + +#downloadsSummaryDetails, +.downloadDetails { + font-size: calc(100% * var(--downloads-item-font-size-factor)); + opacity: var(--downloads-item-details-opacity); + /* Use calc() to keep the height consistent with .downloadTarget, so that the + progress bar can be vertically centered. */ + margin: 4px 0 calc(1em / var(--downloads-item-font-size-factor) - 1em); +} + +/* When hovering the mouse pointer over the item, instead of the normal message + we display a more detailed one. For blocked downloads the entire area shows + the hover message, for other downloads only the main area does. */ +#downloadsListBox > richlistitem[verdict]:hover > .downloadMainArea > .downloadContainer > .downloadDetailsNormal, +#downloadsListBox > richlistitem[verdict]:not(:hover) > .downloadMainArea > .downloadContainer > .downloadDetailsHover, +.downloadMainArea:hover > .downloadContainer > .downloadDetailsNormal, +#downloadsListBox > richlistitem:not([verdict]) > .downloadMainArea:not(:hover) > .downloadContainer > .downloadDetailsHover { + display: none; +} + +/* When hovering the action button in particular, instead of the usual hover + message we display the command associated with the button. */ +#downloadsListBox > richlistitem.downloadHoveringButton > .downloadMainArea > .downloadContainer > .downloadDetailsNormal, +#downloadsListBox > richlistitem.downloadHoveringButton > .downloadMainArea > .downloadContainer > .downloadDetailsHover, +#downloadsListBox > richlistitem:not(.downloadHoveringButton) > .downloadMainArea > .downloadContainer > .downloadDetailsButtonHover { + display: none; +} + +.downloadButton { + appearance: none; + min-width: 32px; + height: 32px; + margin: 0; + margin-inline-start: 4px; + border: 1px solid transparent; + padding: 0; + background: transparent; + color: inherit; + border-radius: 4px; + --button-hover-bgcolor: var(--panel-item-hover-bgcolor); + --button-hover-color: inherit; + --button-active-bgcolor: var(--panel-item-active-bgcolor); + --button-active-color: inherit; +} + +.downloadButton > .button-box > .button-icon { + width: 16px; + height: 16px; + margin: 1px; + -moz-context-properties: fill; + fill: currentColor; +} + +.downloadButton > .button-box > .button-text { + margin: 0 !important; + padding: 0; +} + +@media (prefers-contrast) { + .downloadButton { + background-color: ButtonFace; + color: ButtonText; + border-color: currentColor; + --button-hover-bgcolor: SelectedItem; + --button-hover-color: SelectedItemText; + --button-active-bgcolor: ButtonFace; + --button-active-color: ButtonText; + } +} + +.downloadButton:hover:not(:active) { + background-color: var(--button-hover-bgcolor); + color: var(--button-hover-color); + border-color: var(--button-hover-bgcolor); +} +.downloadButton:hover:active { + background-color: var(--button-active-bgcolor); + color: var(--button-active-color); +} + +/*** Button icons ***/ + +.downloadIconCancel > .button-box > .button-icon { + list-style-image: url("chrome://global/skin/icons/close.svg"); +} + +.downloadIconShow > .button-box > .button-icon { + list-style-image: url("chrome://global/skin/icons/folder.svg"); +} + +@media (-moz-platform: macos) { + .downloadIconShow > .button-box > .button-icon { + list-style-image: url("chrome://global/skin/icons/search-glass.svg"); + } +} + +.downloadIconRetry > .button-box > .button-icon { + list-style-image: url("chrome://global/skin/icons/reload.svg"); +} + +.downloadIconSubviewArrow > .button-box > .button-icon { + list-style-image: url("chrome://global/skin/icons/arrow-left.svg"); +} + +.downloadIconSubviewArrow > .button-box > .button-icon:-moz-locale-dir(ltr) { + list-style-image: url("chrome://global/skin/icons/arrow-right.svg"); +} + +/*** Blocked subview ***/ +#downloadsPanel-blockedSubview-title { + font-size: calc(100% * var(--downloads-item-font-size-factor)); + margin-bottom: 1.5em; +} + +#downloadsPanel-blockedSubview-details1, +#downloadsPanel-blockedSubview-details2 { + font-size: calc(100% * var(--downloads-item-font-size-factor)); + margin-bottom: 0.5em; + opacity: var(--downloads-item-details-opacity); +} + +/*** Toolbarseparator ***/ +#downloadsFooterButtons > toolbarseparator { + margin-inline: 0; +} diff --git a/browser/themes/shared/downloads/downloads.svg b/browser/themes/shared/downloads/downloads.svg new file mode 100644 index 0000000000..a62f31b7e7 --- /dev/null +++ b/browser/themes/shared/downloads/downloads.svg @@ -0,0 +1,7 @@ +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity"> + <path d="M8.25.625a.625.625 0 0 0-1.25 0l0 8.323-3.308-3.309a.626.626 0 0 0-.885.885L7.285 11l.681 0 4.477-4.476a.626.626 0 0 0-.885-.885L8.25 8.947l0-8.322z"/> + <path d="M12.25 15a2 2 0 0 0 2-2l0-1.375a.625.625 0 0 0-1.25 0l0 1.525-.6.6-9.55 0-.6-.6 0-1.525a.625.625 0 0 0-1.25 0L1 13a2 2 0 0 0 2 2l9.25 0z"/> +</svg> diff --git a/browser/themes/shared/downloads/indicator.css b/browser/themes/shared/downloads/indicator.css new file mode 100644 index 0000000000..875023f841 --- /dev/null +++ b/browser/themes/shared/downloads/indicator.css @@ -0,0 +1,211 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/*** Status and progress indicator ***/ +#downloads-button { + --download-progress-pcent: 0%; +} + +#downloads-indicator-anchor { + min-width: 16px; + min-height: 16px; + -moz-context-properties: fill, fill-opacity; + list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); +} + +#downloads-button[progress] > .toolbarbutton-badge-stack > #downloads-indicator-anchor > #downloads-indicator-icon, +#downloads-button[animate][notification] > .toolbarbutton-badge-stack > #downloads-indicator-anchor > #downloads-indicator-icon { + visibility: hidden; +} + +#wrapper-downloads-button > #downloads-button > .toolbarbutton-badge-stack > #downloads-indicator-anchor > #downloads-indicator-icon { + visibility: visible; +} + +#downloads-button[attention="success"] > .toolbarbutton-badge-stack > #downloads-indicator-anchor > #downloads-indicator-icon { + fill: var(--toolbarbutton-icon-fill-attention); + fill-opacity: 1; +} + +#downloads-button > .toolbarbutton-badge-stack > .toolbarbutton-animatable-box { + pointer-events: none; + -moz-context-properties: fill, fill-opacity, stroke; + grid-area: initial; + top: calc(50% - 10px); /* Vertically center the 20px tall animatable image */ + left: calc(50% - 10px); /* Horizontally center the 20px wide animatable image */ + width: 20px; /* Width of each frame within the SVG sprite */ + height: 20px; /* Height of each frame within the SVG sprite */ + /* Animation is not directional and shouldn't be reversed in RTL */ + direction: ltr; + /* Revert to the xul.css user agent stylesheet's z-index value (auto) for + stack children, to ensure the badge (the last child of the stack) appears in + front of the animatable boxes */ + z-index: revert; +} + +/* Hide progress and state animations in customize mode */ +toolbarpaletteitem > #downloads-button > .toolbarbutton-badge-stack > .toolbarbutton-animatable-box, +toolbarpaletteitem > #downloads-button > .toolbarbutton-badge-stack > #downloads-indicator-progress-outer { + display: none; +} + +#downloads-indicator-start-box > .toolbarbutton-animatable-image, +#downloads-indicator-finish-box > .toolbarbutton-animatable-image { + visibility: hidden; +} + +/* Button progress indication */ +#downloads-button > .toolbarbutton-badge-stack > #downloads-indicator-progress-outer { + visibility: hidden; + top: calc(50% - 9px); /* Vertically center the 18px tall animatable image */ + left: calc(50% - 9px); /* Horizontally center the 18px wide animatable image */ + width: 18px; + height: 18px; + border-radius: 50%; + border: 1px solid currentColor; + display: flex; + align-items: center; + justify-content: center; +} + +#downloads-button[progress]:not([notification]) > .toolbarbutton-badge-stack > #downloads-indicator-progress-outer { + visibility: visible; +} + +#downloads-indicator-progress-inner { + width: 14px; + height: 14px; + /* + From javascript side we update the --download-progress-pcent variable to show the current progress + */ + background: conic-gradient(var(--toolbarbutton-icon-fill-attention) var(--download-progress-pcent), transparent var(--download-progress-pcent)); + border-radius: 50%; +} + +/*** Status badges ***/ + +#downloads-button[attention="info"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +#downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + display: block; + box-shadow: none; + /* "!important" is necessary to override the rule in toolbarbutton.css */ + margin: -7px 0 0 !important; + margin-inline-end: -4px !important; + min-width: 12px; + min-height: 12px; + -moz-context-properties: fill; + background-size: 12px; +} + +#downloads-button[attention="info"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: url(chrome://browser/skin/notification-fill-12.svg) no-repeat center; + fill: var(--panel-banner-item-info-icon-bgcolor); +} + +#downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: url(chrome://global/skin/icons/warning-fill-12.svg) no-repeat center; + fill: var(--warning-icon-bgcolor); +} + +#downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + background: url(chrome://browser/skin/notification-fill-12.svg) no-repeat center; + fill: rgb(226,40,80); +} + +toolbar[brighttext] #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + fill: rgb(255,132,138); +} + +#downloads-button[animate] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + /* Don't display the badge until after the animation has cleared. */ + display: none; +} + +/*** Download notifications (transitions between downloading states) ***/ + +#downloads-indicator-start-image { + --anim-steps: 16; + + list-style-image: url("chrome://browser/skin/downloads/notification-start-animation.svg"); + width: calc(20px * (var(--anim-steps) + 1)); + height: 20px; + + fill: currentColor; + fill-opacity: 1; + stroke: currentColor; + + /* initial state for animation */ + transform: translateX(0); +} +#downloads-button[attention="success"] > .toolbarbutton-badge-stack > #downloads-indicator-start-box > #downloads-indicator-start-image { + /* Match the download icon color in the initial animation frames + to the current color of the indicator */ + stroke: var(--toolbarbutton-icon-fill-attention); +} +#downloads-button[washidden] > .toolbarbutton-badge-stack > #downloads-indicator-start-box > #downloads-indicator-start-image { + /* Hide the download icon in the first few animation frames, when the button was just un-hidden */ + stroke: transparent; +} + +#downloads-button[animate][notification="start"] > .toolbarbutton-badge-stack > #downloads-indicator-start-box > #downloads-indicator-start-image { + visibility: visible; + /* Upon changing the animation-duration below, please keep the + setTimeout() identical in indicator.js#_showNotification. + */ + animation-name: downloadsButtonNotification; + animation-duration: calc(var(--anim-steps) * 16.667ms); + animation-timing-function: steps(var(--anim-steps)); + + /* end state for animation: */ + transform: translateX(calc(var(--anim-steps) * -20px)); +} + +#downloads-indicator-finish-image { + --anim-frames: 26; + --anim-steps: calc(var(--anim-frames) + 100); /* Add 100 frames for doing the pause in the middle */ + + fill: var(--toolbarbutton-icon-fill-attention); + fill-opacity: 1; + stroke: var(--toolbarbutton-icon-fill-attention); + + list-style-image: url("chrome://browser/skin/downloads/notification-finish-animation.svg"); + width: calc(20px * (var(--anim-frames) + 1)); + height: 20px; + + /* initial state for animation */ + transform: translateX(0); +} +#downloads-button[open] > .toolbarbutton-badge-stack > #downloads-indicator-finish-box > #downloads-indicator-finish-image { + stroke: currentColor; +} + +#downloads-button[animate][notification="finish"] > .toolbarbutton-badge-stack > #downloads-indicator-finish-box > #downloads-indicator-finish-image { + visibility: visible; + animation-name: downloadsButtonFinishedNotification; + animation-duration: calc(var(--anim-steps) * 16.667ms); + + /* end state for animation: */ + transform: translateX(calc(var(--anim-frames) * -20px)); +} + +@keyframes downloadsButtonNotification { + from { + transform: translateX(0); + } +} + +@keyframes downloadsButtonFinishedNotification { + from { + animation-timing-function: steps(18); + transform: translateX(0); + } + 14.28% { /* 18th frame (18/126) */ + transform: translateX(calc(18 * -20px)); + } + 93.65% { /* Wait 100 frames of time, but resume from 18th frame (118/126) */ + animation-timing-function: steps(8); + transform: translateX(calc(18 * -20px)); + } +} diff --git a/browser/themes/shared/downloads/notification-finish-animation.svg b/browser/themes/shared/downloads/notification-finish-animation.svg new file mode 100644 index 0000000000..cef56f13f8 --- /dev/null +++ b/browser/themes/shared/downloads/notification-finish-animation.svg @@ -0,0 +1,193 @@ +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="540" height="20"> + <defs> + <path fill="context-stroke" d="M10.109 2.55a.618.618 0 0 0-.207-.39.641.641 0 0 0-.418-.16.636.636 0 0 0-.625.55c0 0 0 8.45 0 8.45 0 0-3.31-3.36-3.31-3.36a.633.633 0 0 0-.88 0 .606.606 0 0 0-.187.44.62.62 0 0 0 .187.44c0 0 4.47 4.48 4.47 4.48 0 0 .72 0 .72 0 0 0 4.47-4.48 4.47-4.48a.604.604 0 0 0 0-.88.633.633 0 0 0-.88 0c0 0-3.34 3.36-3.34 3.36 0 0 0-8.45 0-8.45z" id="ab"/> + <path fill="context-stroke" d="M14.125 17a2 2 0 0 0 2-2c0 0 0-1.45 0-1.45a.625.625 0 0 0-.209-.39.632.632 0 0 0-.416-.16.636.636 0 0 0-.625.55c0 0 0 1.6 0 1.6 0 0-.601.6-.601.6 0 0-9.549 0-9.549 0 0 0-.6-.6-.6-.6 0 0 0-1.6 0-1.6A.638.638 0 0 0 3.5 13a.636.636 0 0 0-.625.55c0 0 0 1.45 0 1.45a2 2 0 0 0 2 2c0 0 9.25 0 9.25 0z" id="aa"/> + <path stroke="context-fill" stroke-width="1.8" d="M5.838 8.706c0 0 3.487 3.488 3.487 3.488 0 0 4.387-5.175 4.387-5.175" fill="none" id="i"/> + <path fill="#15141A" d="M-1.17 3c0 0-2.65-2.64-2.65-2.64a.625.625 0 0 1-.161-.7.638.638 0 0 1 .351-.35.625.625 0 0 1 .496.011.625.625 0 0 1 .204.149c0 0 2.07 2.08 2.07 2.08 0 0 3.79-3.8 3.79-3.8a.63.63 0 0 1 .89.89C3.82-1.36-.55 3-.55 3c0 0-.62 0-.62 0z" id="d"/> + <path stroke="context-fill" stroke-linecap="round" d="M9.991 1.6a8.4 8.4 0 1 1 0 16.8 8.4 8.4 0 0 1 0-16.8z" fill="none" stroke-width="1.05" id="c"/> + <path fill="context-fill" d="M0-4.752a4.753 4.753 0 1 0 .001 9.505A4.753 4.753 0 0 0 0-4.752z" id="b"/> + <path fill="none" stroke="context-fill" stroke-linecap="round" d="M0-8A8 8 0 1 1 0 8 8 8 0 0 1 0-8z" id="a"/> + </defs> + <svg viewBox="0 0 20 20" width="20" height="20"> + <use transform="matrix(1.05 0 0 1.05 9.991 10)" href="#a"/> + <use transform="matrix(1.35 0 0 1.35 10 10)" href="#b"/> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="20"> + <use transform="matrix(1.05 0 0 1.05 9.991 10)" href="#a"/> + <use transform="matrix(1.35 0 0 1.35 10 10)" href="#b"/> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="40"> + <use transform="matrix(1.05 0 0 1.05 9.991 10)" href="#a"/> + <use transform="matrix(1.35 0 0 1.35 10 10)" href="#b"/> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="60"> + <use transform="matrix(1.05 0 0 1.05 9.991 10)" href="#a"/> + <use transform="matrix(1.35 0 0 1.35 10 10)" href="#b"/> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="80"> + <use transform="matrix(1.05 0 0 1.05 9.991 10)" href="#a"/> + <use transform="matrix(1.35 0 0 1.35 10 10)" href="#b"/> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="100"> + <use transform="matrix(1.05 0 0 1.05 9.991 10)" href="#a"/> + <use transform="matrix(1.35 0 0 1.35 10 10)" href="#b"/> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="120"> + <use transform="matrix(1.05 0 0 1.05 9.991 10)" href="#a"/> + <use transform="matrix(1.35 0 0 1.35 10 10)" href="#b"/> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="140"> + <use transform="matrix(1.05 0 0 1.05 9.991 10)" href="#a"/> + <use transform="matrix(1.35 0 0 1.35 10 10)" href="#b"/> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="160"> + <use transform="matrix(1.05 0 0 1.05 9.991 10)" href="#a"/> + <use transform="translate(10 10) scale(1.20948)" href="#b"/> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="180"> + <use transform="matrix(1.05 0 0 1.05 9.991 10)" href="#a"/> + <use transform="translate(10 10) scale(.8747)" href="#b"/> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="200"> + <use transform="matrix(1.05 0 0 1.05 9.991 10)" href="#a"/> + <use transform="translate(10 10) scale(.4753)" href="#b"/> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="220"> + <use transform="matrix(1.05 0 0 1.05 9.991 10)" href="#a"/> + <use transform="translate(10 10) scale(.14052)" href="#b"/> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="240"> + <use fill="none" stroke-width="1.05" href="#c"/> + <use transform="matrix(0 0 0 0 10 10)" href="#b"/> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="260"> + <use fill="none" stroke-width="1.05" href="#c"/> + <use transform="matrix(0 0 0 0 10 10)" href="#b"/> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="280"> + <defs> + <mask id="e" mask-type="alpha"> + <use fill="#15141A" transform="translate(10 10)" href="#d"/> + </mask> + </defs> + <use fill="none" stroke-width="1.05" href="#c"/> + <use transform="matrix(0 0 0 0 10 10)" href="#b"/> + <g style="display:block" mask="url(#e)"> + <path stroke="context-fill" stroke-width="1.8" d="M5.838 8.706c0 0 1.927 1.928 2.916 2.918" fill="none"/> + </g> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="300"> + <defs> + <mask id="f" mask-type="alpha"> + <use fill="#15141A" transform="translate(10 10)" href="#d"/> + </mask> + </defs> + <use fill="none" stroke-width="1.05" href="#c"/> + <use transform="matrix(0 0 0 0 10 10)" href="#b"/> + <g style="display:block" mask="url(#f)"> + <path stroke="context-fill" stroke-width="1.8" d="M5.838 8.706c0 0 3.487 3.488 3.487 3.488 0 0 .802-.945 1.72-2.028" fill="none"/> + </g> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="320"> + <defs> + <mask id="g" mask-type="alpha"> + <use fill="#15141A" transform="translate(10 10)" href="#d"/> + </mask> + </defs> + <use fill="none" stroke-width="1.05" href="#c"/> + <use transform="matrix(0 0 0 0 10 10)" href="#b"/> + <g style="display:block" mask="url(#g)"> + <path stroke="context-fill" stroke-width="1.8" d="M5.838 8.706c0 0 3.487 3.488 3.487 3.488 0 0 2.335-2.755 3.6-4.244" fill="none"/> + </g> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="340"> + <defs> + <mask id="h" mask-type="alpha"> + <use fill="#15141A" transform="translate(10 10)" href="#d"/> + </mask> + </defs> + <use fill="none" stroke-width="1.05" href="#c"/> + <use transform="matrix(0 0 0 0 10 10)" href="#b"/> + <g style="display:block" mask="url(#h)"> + <use stroke="context-fill" stroke-width="1.8" fill="none" href="#i"/> + </g> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="360"> + <defs> + <mask id="W" mask-type="alpha"> + <use fill="#15141A" transform="translate(10 10)" href="#d"/> + </mask> + </defs> + <use fill="none" stroke-width="1.05" href="#c"/> + <use transform="matrix(0 0 0 0 10 10)" href="#b"/> + <g style="display:block" mask="url(#W)"> + <use stroke="context-fill" stroke-width="1.8" fill="none" href="#i"/> + </g> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="380"> + <defs> + <mask id="X" mask-type="alpha"> + <use fill="#15141A" transform="translate(10 10)" href="#d"/> + </mask> + </defs> + <use fill="none" stroke-width="1.05" href="#c"/> + <use transform="matrix(0 0 0 0 10 10)" href="#b"/> + <g style="display:block" mask="url(#X)"> + <use stroke="context-fill" stroke-width="1.8" fill="none" href="#i"/> + </g> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="400"> + <defs> + <mask id="Y" mask-type="alpha"> + <use fill="#15141A" transform="translate(10 10)" href="#d"/> + </mask> + </defs> + <use fill="none" opacity=".74" stroke-width="1.05" href="#c"/> + <path fill="context-fill" d="M9.752 9.485a.046.046 0 0 0-.016-.03.048.048 0 0 0-.03-.011.047.047 0 0 0-.047.04c0 0 0 .627 0 .627 0 0-.245-.249-.245-.249a.047.047 0 0 0-.076.015.046.046 0 0 0 .01.05c0 0 .332.333.332.333 0 0 .053 0 .053 0 0 0 .332-.333.332-.333a.045.045 0 0 0 0-.065.047.047 0 0 0-.066 0c0 0-.247.25-.247.25 0 0 0-.627 0-.627z" opacity=".3"/> + <g mask="url(#Y)"> + <path stroke="context-fill" stroke-width="1.67" d="M6.146 8.802c0 0 3.23 3.23 3.23 3.23 0 0 4.061-4.792 4.061-4.792" fill="none"/> + </g> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="420"> + <defs> + <mask id="Z" mask-type="alpha"> + <use fill="#15141A" transform="translate(10 10)" href="#d"/> + </mask> + </defs> + <use fill="none" opacity=".26" stroke-width="1.05" href="#c"/> + <path fill="context-stroke" d="M10.465 18.111a.519.519 0 0 0 .52-.519c0 0 0-.376 0-.376a.164.164 0 0 0-.162-.143.165.165 0 0 0-.163.143c0 0 0 .415 0 .415 0 0-.156.156-.156.156 0 0-2.476 0-2.476 0 0 0-.156-.156-.156-.156 0 0 0-.415 0-.415a.163.163 0 0 0-.27-.101.16.16 0 0 0-.054.101c0 0 0 .376 0 .376a.519.519 0 0 0 .518.519c0 0 2.4 0 2.4 0z"/> + <path fill="context-stroke" d="M9.423 7.697a.16.16 0 0 0-.054-.1.166.166 0 0 0-.108-.042.165.165 0 0 0-.162.142c0 0 0 2.192 0 2.192 0 0-.859-.871-.859-.871a.164.164 0 0 0-.264.052.16.16 0 0 0 .036.176c0 0 1.16 1.162 1.16 1.162 0 0 .186 0 .186 0 0 0 1.16-1.162 1.16-1.162a.157.157 0 0 0 0-.228.164.164 0 0 0-.229 0c0 0-.866.871-.866.871 0 0 0-2.192 0-2.192z" opacity=".7"/> + <g style="display:block" mask="url(#Z)"> + <path stroke="context-fill" stroke-width="1.33" d="M6.917 9.041c0 0 2.583 2.584 2.583 2.584 0 0 3.25-3.833 3.25-3.833" fill="none"/> + </g> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="440"> + <use fill="none" opacity=".26" stroke-width="1.05" href="#c"/> + <use transform="matrix(0 0 0 0 10 10)" href="#b"/> + <path fill="context-stroke" d="M11.655 17.75a1 1 0 0 0 1-1c0 0 0-.725 0-.725a.316.316 0 0 0-.313-.275.318.318 0 0 0-.312.275c0 0 0 .8 0 .8 0 0-.301.3-.301.3 0 0-4.775 0-4.775 0 0 0-.3-.3-.3-.3 0 0 0-.8 0-.8a.314.314 0 0 0-.52-.195.31.31 0 0 0-.104.195c0 0 0 .725 0 .725a1 1 0 0 0 1 1c0 0 4.625 0 4.625 0z"/> + <path fill="context-stroke" d="M9.646 6.025a.31.31 0 0 0-.104-.195.32.32 0 0 0-.209-.08.318.318 0 0 0-.312.275c0 0 0 4.225 0 4.225 0 0-1.655-1.68-1.655-1.68a.317.317 0 0 0-.509.1.308.308 0 0 0 .069.34c0 0 2.235 2.24 2.235 2.24 0 0 .36 0 .36 0 0 0 2.235-2.24 2.235-2.24a.302.302 0 0 0 0-.44.317.317 0 0 0-.44 0c0 0-1.67 1.68-1.67 1.68 0 0 0-4.225 0-4.225z"/> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="460"> + <use fill="none" opacity=".26" stroke-width="1.05" href="#c"/> + <path fill="context-stroke" d="M12.844 17.389a1.482 1.482 0 0 0 1.48-1.481c0 0 0-1.074 0-1.074a.468.468 0 0 0-.463-.407.471.471 0 0 0-.462.407c0 0 0 1.185 0 1.185 0 0-.445.444-.445.444 0 0-7.073 0-7.073 0 0 0-.444-.444-.444-.444 0 0 0-1.185 0-1.185a.466.466 0 0 0-.772-.289.459.459 0 0 0-.154.289c0 0 0 1.074 0 1.074a1.481 1.481 0 0 0 1.482 1.481c0 0 6.85 0 6.85 0z"/> + <path fill="context-stroke" d="M9.869 4.353a.458.458 0 0 0-.153-.29.475.475 0 0 0-.31-.118.47.47 0 0 0-.463.408c0 0 0 6.258 0 6.258 0 0-2.451-2.489-2.451-2.489a.469.469 0 0 0-.754.15.456.456 0 0 0 .102.502c0 0 3.31 3.318 3.31 3.318 0 0 .534 0 .534 0 0 0 3.31-3.318 3.31-3.318a.447.447 0 0 0 0-.652.469.469 0 0 0-.651 0c0 0-2.474 2.489-2.474 2.489 0 0 0-6.258 0-6.258z"/> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="480"> + <use fill="none" opacity=".26" stroke-width="1.05" href="#c"/> + <path fill="context-stroke" d="M13.759 17.111a1.852 1.852 0 0 0 1.851-1.851c0 0 0-1.343 0-1.343a.585.585 0 0 0-.579-.51.59.59 0 0 0-.578.51c0 0 0 1.481 0 1.481 0 0-.556.556-.556.556 0 0-8.841 0-8.841 0 0 0-.556-.556-.556-.556 0 0 0-1.481 0-1.481a.591.591 0 0 0-.579-.51.59.59 0 0 0-.578.51c0 0 0 1.343 0 1.343a1.851 1.851 0 0 0 1.852 1.851c0 0 8.564 0 8.564 0z"/> + <path fill="context-stroke" d="M10.04 3.065a.572.572 0 0 0-.191-.36.593.593 0 0 0-.387-.149.589.589 0 0 0-.579.51c0 0 0 7.823 0 7.823 0 0-3.065-3.111-3.065-3.111a.586.586 0 0 0-.814 0 .561.561 0 0 0-.173.407.574.574 0 0 0 .173.408c0 0 4.138 4.147 4.138 4.147 0 0 .667 0 .667 0 0 0 4.138-4.147 4.138-4.147a.559.559 0 0 0 0-.815.586.586 0 0 0-.814 0c0 0-3.093 3.11-3.093 3.11 0 0 0-7.823 0-7.823z"/> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="500"> + <use fill="none" opacity=".26" stroke-width="1.05" href="#c"/> + <use fill="context-stroke" href="#aa"/> + <use fill="context-stroke" href="#ab"/> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="520"> + <use fill="context-fill" opacity=".26" stroke-width="1.05" href="#c"/> + <use fill="context-stroke" href="#aa"/> + <use fill="context-stroke" href="#ab"/> + </svg> +</svg> diff --git a/browser/themes/shared/downloads/notification-start-animation.svg b/browser/themes/shared/downloads/notification-start-animation.svg new file mode 100644 index 0000000000..14e3061657 --- /dev/null +++ b/browser/themes/shared/downloads/notification-start-animation.svg @@ -0,0 +1,144 @@ +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> +<svg xmlns="http://www.w3.org/2000/svg" width="340" height="20"> + <defs> + <path d="M14.441 17a2 2 0 0 0 2-2c0 0 0-1.45 0-1.45a.625.625 0 0 0-.209-.39.632.632 0 0 0-.416-.16.636.636 0 0 0-.625.55c0 0 0 1.6 0 1.6 0 0-.601.6-.601.6 0 0-9.549 0-9.549 0 0 0-.6-.6-.6-.6 0 0 0-1.6 0-1.6a.638.638 0 0 0-.625-.55.636.636 0 0 0-.625.55c0 0 0 1.45 0 1.45a2 2 0 0 0 2 2c0 0 9.25 0 9.25 0z" id="tray"/> + </defs> + <defs> + <path stroke-linecap="round" stroke="context-fill" d="M4.869 16.933A8.624 8.624 0 0 1 9.875 1.376M10 1.375A8.624 8.624 0 0 1 18.625 10 8.624 8.624 0 0 1 10 18.625a8.59 8.59 0 0 1-5.131-1.692" fill="none" stroke-width="1.15" id="q"/> + <path fill="#fff" d="M2.688 12.75c0 0 0 5.562 0 5.562 0 0 .062 0 .062 0 0 0 0-5.562 0-5.562 0 0-.062 0-.062 0" id="h"/> + </defs> + <svg viewBox="0 0 20 20" width="20" height="20"> + <use fill="context-stroke" href="#tray"/> + <path fill="context-stroke" d="M10.109 2.55a.618.618 0 0 0-.207-.39.641.641 0 0 0-.418-.16.636.636 0 0 0-.625.55c0 0 0 8.45 0 8.45 0 0-3.31-3.36-3.31-3.36a.633.633 0 0 0-.88 0 .606.606 0 0 0-.187.44.62.62 0 0 0 .187.44c0 0 4.47 4.48 4.47 4.48 0 0 .72 0 .72 0 0 0 4.47-4.48 4.47-4.48a.604.604 0 0 0 0-.88.633.633 0 0 0-.88 0c0 0-3.34 3.36-3.34 3.36 0 0 0-8.45 0-8.45z"/> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="20"> + <defs> + <clipPath id="b"> + <path fill="#fff" d="M2.688 12.75c0 0 0 5.562 0 5.562 0 0 13.41 0 13.41 0 0 0 0-5.562 0-5.562 0 0-13.41 0-13.41 0"/> + </clipPath> + </defs> + <g clip-path="url(#b)"> + <use fill="context-stroke" href="#tray"/> + </g> + <path fill="context-stroke" d="M10.1 2.621a.612.612 0 0 0-.205-.386.634.634 0 0 0-.414-.158.63.63 0 0 0-.619.544c0 0 0 8.364 0 8.364 0 0-3.276-3.326-3.276-3.326a.627.627 0 0 0-.87 0 .6.6 0 0 0-.186.436.614.614 0 0 0 .185.435c0 0 4.424 4.434 4.424 4.434 0 0 .713 0 .713 0 0 0 4.424-4.434 4.424-4.434a.597.597 0 0 0 0-.87.627.627 0 0 0-.87 0c0 0-3.307 3.325-3.307 3.325 0 0 0-8.364 0-8.364z"/> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="40"> + <defs> + <clipPath id="c"> + <path fill="#fff" d="M2.688 12.75c0 0 0 5.562 0 5.562 0 0 11.167 0 11.167 0 0 0 0-5.562 0-5.562 0 0-11.167 0-11.167 0"/> + </clipPath> + </defs> + <g clip-path="url(#c)"> + <use fill="context-stroke" href="#tray"/> + </g> + <path fill="context-stroke" d="M10.064 2.889a.588.588 0 0 0-.197-.371.61.61 0 0 0-.398-.152.605.605 0 0 0-.594.523c0 0 0 8.038 0 8.038 0 0-3.149-3.196-3.149-3.196a.602.602 0 0 0-.837 0 .577.577 0 0 0-.178.418.59.59 0 0 0 .178.419c0 0 4.252 4.261 4.252 4.261 0 0 .685 0 .685 0 0 0 4.252-4.261 4.252-4.261a.574.574 0 0 0 0-.837.602.602 0 0 0-.837 0c0 0-3.177 3.196-3.177 3.196 0 0 0-8.038 0-8.038z"/> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="60"> + <defs> + <clipPath id="d"> + <path fill="#fff" d="M2.688 12.75c0 0 0 5.562 0 5.562 0 0 8.7 0 8.7 0 0 0 0-5.562 0-5.562 0 0-8.7 0-8.7 0"/> + </clipPath> + </defs> + <g clip-path="url(#d)"> + <use fill="context-stroke" href="#tray"/> + </g> + <path fill="context-stroke" d="M9.974 3.56a.528.528 0 0 0-.177-.333.548.548 0 0 0-.357-.136.543.543 0 0 0-.534.47c0 0 0 7.22 0 7.22 0 0-2.829-2.87-2.829-2.87a.541.541 0 0 0-.752 0 .518.518 0 0 0-.16.376.53.53 0 0 0 .16.376c0 0 3.82 3.828 3.82 3.828 0 0 .616 0 .616 0 0 0 3.82-3.828 3.82-3.828a.516.516 0 0 0 0-.753.541.541 0 0 0-.752 0c0 0-2.855 2.872-2.855 2.872 0 0 0-7.221 0-7.221z"/> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="80"> + <defs> + <clipPath id="e"> + <path fill="#fff" d="M2.688 12.75c0 0 0 5.562 0 5.562 0 0 6.174 0 6.174 0 0 0 0-5.562 0-5.562 0 0-6.174 0-6.174 0"/> + </clipPath> + </defs> + <path stroke-linecap="round" stroke="context-fill" d="M4.869 16.933a8.628 8.628 0 0 1-1.38-1.275" fill="none" stroke-width="1.15"/> + <g clip-path="url(#e)"> + <use fill="context-stroke" href="#tray"/> + </g> + <path fill="context-stroke" d="M9.759 5.18a.384.384 0 0 0-.13-.242.398.398 0 0 0-.259-.1.395.395 0 0 0-.388.342c0 0 0 5.252 0 5.252 0 0-2.058-2.088-2.058-2.088a.393.393 0 0 0-.632.125.383.383 0 0 0 .085.422c0 0 2.779 2.784 2.779 2.784 0 0 .447 0 .447 0 0 0 2.778-2.784 2.778-2.784a.375.375 0 0 0 0-.547.393.393 0 0 0-.547 0c0 0-2.075 2.088-2.075 2.088 0 0 0-5.252 0-5.252z"/> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="100"> + <defs> + <clipPath id="f"> + <path fill="#fff" d="M2.688 12.75c0 0 0 5.562 0 5.562 0 0 3.707 0 3.707 0 0 0 0-5.562 0-5.562 0 0-3.707 0-3.707 0"/> + </clipPath> + </defs> + <path stroke-linecap="round" stroke="context-fill" d="M4.869 16.933a8.648 8.648 0 0 1-3.016-4.091" fill="none" stroke-width="1.15"/> + <g clip-path="url(#f)"> + <use fill="context-stroke" href="#tray"/> + </g> + <path fill="context-stroke" d="M9.51 7.041a.219.219 0 0 0-.073-.138.227.227 0 0 0-.148-.056.225.225 0 0 0-.22.194c0 0 0 2.99 0 2.99 0 0-1.172-1.189-1.172-1.189a.224.224 0 0 0-.36.071.218.218 0 0 0 .05.24c0 0 1.58 1.585 1.58 1.585 0 0 .255 0 .255 0 0 0 1.581-1.585 1.581-1.585a.213.213 0 0 0 0-.311.224.224 0 0 0-.31 0c0 0-1.182 1.189-1.182 1.189 0 0 0-2.99 0-2.99z"/> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="120"> + <defs> + <clipPath id="g"> + <path fill="#fff" d="M2.688 12.75c0 0 0 5.562 0 5.562 0 0 1.464 0 1.464 0 0 0 0-5.562 0-5.562 0 0-1.464 0-1.464 0"/> + </clipPath> + </defs> + <path stroke-linecap="round" stroke="context-fill" d="M4.869 16.933A8.612 8.612 0 0 1 1.375 10a8.58 8.58 0 0 1 1.569-4.961" fill="none" stroke-width="1.15"/> + <g clip-path="url(#g)"> + <use fill="context-stroke" href="#tray"/> + </g> + <path fill="context-stroke" d="M9.375 8.06a.128.128 0 0 0-.043-.08.133.133 0 0 0-.087-.034.132.132 0 0 0-.13.114c0 0 0 1.75 0 1.75 0 0-.685-.695-.685-.695a.131.131 0 0 0-.21.041.128.128 0 0 0 .028.141c0 0 .926.928.926.928 0 0 .149 0 .149 0 0 0 .926-.928.926-.928a.125.125 0 0 0 0-.182.131.131 0 0 0-.182 0c0 0-.692.696-.692.696 0 0 0-1.75 0-1.75z"/> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="140"> + <defs> + <clipPath id="i"> + <use fill="#fff" href="#h"/> + </clipPath> + </defs> + <path stroke-linecap="round" stroke="context-fill" d="M4.869 16.933A8.624 8.624 0 0 1 9.875 1.376M10 1.375a8.623 8.623 0 0 1 7.542 4.437" fill="none" stroke-width="1.15"/> + <path fill="context-stroke" d="M9.296 8.65a.076.076 0 0 0-.025-.047.078.078 0 0 0-.051-.02.078.078 0 0 0-.077.067c0 0 0 1.033 0 1.033 0 0-.404-.41-.404-.41a.077.077 0 0 0-.125.024.075.075 0 0 0 .017.083c0 0 .547.548.547.548 0 0 .088 0 .088 0 0 0 .546-.548.546-.548a.074.074 0 0 0 0-.107.077.077 0 0 0-.107 0c0 0-.409.41-.409.41 0 0 0-1.033 0-1.033z"/> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="160"> + <defs> + <clipPath id="j"> + <use fill="#fff" href="#h"/> + </clipPath> + </defs> + <path stroke-linecap="round" stroke="context-fill" d="M4.869 16.933A8.624 8.624 0 0 1 9.875 1.376M10 1.375A8.624 8.624 0 0 1 18.625 10c0 1.918-.626 3.69-1.685 5.122" fill="none" stroke-width="1.15"/> + <path fill="context-stroke" d="M9.247 9.02a.043.043 0 0 0-.014-.028.044.044 0 0 0-.03-.011.044.044 0 0 0-.042.038c0 0 0 .585 0 .585 0 0-.23-.233-.23-.233a.044.044 0 0 0-.07.014.043.043 0 0 0 .01.047c0 0 .309.31.309.31 0 0 .05 0 .05 0 0 0 .31-.31.31-.31a.042.042 0 0 0 0-.06.044.044 0 0 0-.062 0c0 0-.23.232-.23.232 0 0 0-.585 0-.585z"/> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="180"> + <defs> + <clipPath id="k"> + <use fill="#fff" href="#h"/> + </clipPath> + </defs> + <path stroke-linecap="round" stroke="context-fill" d="M4.869 16.933A8.624 8.624 0 0 1 9.875 1.376M10 1.375A8.624 8.624 0 0 1 18.625 10a8.626 8.626 0 0 1-5.747 8.133" fill="none" stroke-width="1.15"/> + <g clip-path="url(#k)"> + <use fill="context-fill" href="#tray"/> + </g> + <path fill="context-stroke" d="M9.216 9.254a.022.022 0 0 0-.008-.014.023.023 0 0 0-.014-.006.023.023 0 0 0-.022.02c0 0 0 .3 0 .3 0 0-.118-.12-.118-.12a.022.022 0 0 0-.036.007.022.022 0 0 0 .005.024c0 0 .158.16.158.16 0 0 .026 0 .026 0 0 0 .158-.16.158-.16a.021.021 0 0 0 0-.031.022.022 0 0 0-.03 0c0 0-.12.12-.12.12 0 0 0-.3 0-.3z"/> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="200"> + <path stroke-linecap="round" stroke="context-fill" d="M4.869 16.933A8.624 8.624 0 0 1 9.875 1.376M10 1.375A8.624 8.624 0 0 1 18.625 10a8.624 8.624 0 0 1-8.865 8.622" fill="none" stroke-width="1.15"/> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="220"> + <defs> + <clipPath id="m"> + <use fill="#fff" href="#h"/> + </clipPath> + </defs> + <path stroke-linecap="round" stroke="context-fill" d="M4.869 16.933A8.624 8.624 0 0 1 9.875 1.376M10 1.375A8.624 8.624 0 0 1 18.625 10 8.624 8.624 0 0 1 10 18.625c-.8 0-1.574-.11-2.31-.313" fill="none" stroke-width="1.15"/> + <g clip-path="url(#m)"> + <use fill="context-fill" href="#tray"/> + </g> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="240"> + <path stroke-linecap="round" stroke="context-fill" d="M4.869 16.933A8.624 8.624 0 0 1 9.875 1.376M10 1.375A8.624 8.624 0 0 1 18.625 10 8.624 8.624 0 0 1 10 18.625a8.582 8.582 0 0 1-3.633-.8" fill="none" stroke-width="1.15"/> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="260"> + <path stroke-linecap="round" stroke="context-fill" d="M4.869 16.933A8.624 8.624 0 0 1 9.875 1.376M10 1.375A8.624 8.624 0 0 1 18.625 10 8.624 8.624 0 0 1 10 18.625a8.578 8.578 0 0 1-4.444-1.232" fill="none" stroke-width="1.15"/> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="280"> + <path stroke-linecap="round" stroke="context-fill" d="M4.869 16.933A8.624 8.624 0 0 1 9.875 1.376M10 1.375A8.624 8.624 0 0 1 18.625 10 8.624 8.624 0 0 1 10 18.625a8.586 8.586 0 0 1-4.912-1.534" fill="none" stroke-width="1.15"/> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="300"> + <use stroke-linecap="round" stroke="context-fill" fill="none" stroke-width="1.15" href="#q"/> + </svg> + <svg viewBox="0 0 20 20" width="20" height="20" x="320"> + <use stroke-linecap="round" stroke="context-fill" fill="none" stroke-width="1.15" href="#q"/> + </svg> +</svg> diff --git a/browser/themes/shared/downloads/progressmeter.css b/browser/themes/shared/downloads/progressmeter.css new file mode 100644 index 0000000000..892cea7135 --- /dev/null +++ b/browser/themes/shared/downloads/progressmeter.css @@ -0,0 +1,95 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/*** Common-styled progressmeter ***/ + +:root { + --download-progress-fill-color: AccentColor; + --download-progress-paused-color: GrayText; + --download-progress-flare-color: rgba(255,255,255,0.75); +} + +/* download progress bar is used in contexts which are not LightweightThemeConsumers and + do not get the lwt- theme variables. So we duplicate the fallbacks here. */ +:root:-moz-lwtheme { + --download-progress-fill-color: var(--lwt-toolbarbutton-icon-fill-attention, rgb(0,97,224)); +} + +@media (prefers-color-scheme: dark) { + :root:-moz-lwtheme { + --download-progress-fill-color: var(--lwt-toolbarbutton-icon-fill-attention, rgb(0,221,255)); + } + #contentAreaDownloadsView { + --download-progress-fill-color: var(--in-content-item-selected); + } +} + +:root[lwt-popup-brighttext] panel, +toolbar[brighttext]:-moz-lwtheme { + --download-progress-fill-color: var(--lwt-toolbarbutton-icon-fill-attention, rgb(0,221,255)); +} + +/* + * Styling "html:progress" is limited by the fact that a number of properties + * are intentionally locked at the UA stylesheet level. We have to use a border + * instead of an outline because the latter would be drawn over the progress + * bar and we cannot change its z-index. This means we have to use a negative + * margin, except when the value is zero, and adjust the width calculation for + * the indeterminate state. + */ + +.downloadProgress { + appearance: none; + display: -moz-box; + margin-block: 5px 1px; + /* This value is kinda odd, it's used to align with the edge of the badge, + * if shown, which is inside the edge of the image (the image gets 16px + * margin). */ + margin-inline-end: 18px; + border: none; + height: 4px; + border-radius: 2px; + background-color: color-mix(in srgb, currentColor 15%, transparent); +} + +/* Ensure we have contrast in selected download items */ +#downloadsListBox.allDownloadsListBox richlistitem[selected] .downloadProgress::-moz-progress-bar { + --download-progress-fill-color: currentColor; + --download-progress-flare-color: AccentColor; +} + +.downloadProgress::-moz-progress-bar { + appearance: none; + background-color: var(--download-progress-fill-color); + border-radius: 2px; +} + +.downloadProgress[paused]::-moz-progress-bar { + background-color: var(--download-progress-paused-color); +} + +.downloadProgress:indeterminate::-moz-progress-bar { + width: calc(100% + 2px); + /* Make a white reflecting animation. + Create a gradient with 2 identical patterns, and enlarge the size to 200%. + This allows us to animate background-position with percentage. */ + background-color: var(--download-progress-fill-color); + background-image: linear-gradient(90deg, transparent 0%, + var(--download-progress-flare-color) 25%, + transparent 50%, + var(--download-progress-flare-color) 75%, + transparent 100%); + background-blend-mode: normal; + background-size: 200% 100%; + animation: downloadProgressSlideX 1.5s linear infinite; +} + +@keyframes downloadProgressSlideX { + 0% { + background-position: 0 0; + } + 100% { + background-position: -100% 0; + } +} |
