diff options
Diffstat (limited to 'browser/themes/shared/downloads')
7 files changed, 640 insertions, 0 deletions
diff --git a/browser/themes/shared/downloads/allDownloadsViewOverlay.inc.css b/browser/themes/shared/downloads/allDownloadsViewOverlay.inc.css new file mode 100644 index 000000000..bdb8b7df8 --- /dev/null +++ b/browser/themes/shared/downloads/allDownloadsViewOverlay.inc.css @@ -0,0 +1,131 @@ +/* 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/. */ + +%filter substitution + +%define item richlistitem.download +%define itemFocused @item@[selected] + +/*** View and outer controls ***/ + +#downloadsRichListBox { + /** The default listbox appearance comes with an unwanted margin. **/ + -moz-appearance: none; + margin: 0; +} + +/*** List items ***/ + +#downloadsRichListBox > richlistitem.download { + height: var(--downloads-item-height); +} + +.downloadTypeIcon { + margin: 8px 13px; + width: 32px; + height: 32px; +} + +.downloadBlockedBadge { + margin: 0 5px; + background: url("chrome://browser/skin/downloads/download-blocked.svg") top right / 16px no-repeat; +} + +.downloadBlockedBadge:-moz-locale-dir(rtl) { + background-position-x: left; +} + +@item@[verdict="PotentiallyUnwanted"] .downloadBlockedBadge { + background-image: url("chrome://browser/skin/warning.svg"); +} + +@item@[verdict="Uncommon"] .downloadBlockedBadge { + background-image: url("chrome://browser/skin/info.svg"); +} + +@item@ > toolbarseparator { + display: none; +} + +.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); +} + +.downloadButton { + -moz-appearance: none; + -moz-box-align: center; + background: transparent; + min-width: 0; + min-height: 0; + margin: 0; + border: none; + color: inherit; + padding: 0 18px; +} + +.downloadButton > .button-box { + -moz-appearance: none; + padding: 2px !important; + border-radius: 50%; +} + +.downloadButton > .button-box > .button-icon { + width: 16px; + height: 16px; + margin: 0; + filter: url("chrome://browser/skin/filters.svg#fill"); + fill: currentColor; +} + +.downloadButton > .button-box > .button-text { + display: none; +} + +.downloadButton:hover > .button-box { + background-color: graytext; + color: -moz-field; +} + +.downloadButton:hover:active > .button-box { + background-color: -moz-fieldtext; +} + +@itemFocused@ > .downloadButtonArea > .downloadButton:hover > .button-box { + background-color: HighlightText; + color: Highlight; +} + +@itemFocused@ > .downloadButtonArea > .downloadButton:hover:active > .button-box { + background-color: -moz-field; + color: -moz-fieldtext; +} + +/*** Button icons ***/ + +.downloadIconCancel > .button-box > .button-icon { + list-style-image: url("chrome://browser/skin/panel-icons.svg#cancel"); +} + +.downloadIconShow > .button-box > .button-icon { +%ifdef XP_MACOSX + list-style-image: url("chrome://browser/skin/panel-icons.svg#magnifier"); +%else + list-style-image: url("chrome://browser/skin/panel-icons.svg#folder"); +%endif +} + +.downloadIconRetry > .button-box > .button-icon { + list-style-image: url("chrome://browser/skin/panel-icons.svg#retry"); +} + +/*** Progressmeter ***/ +%include progressmeter.inc.css diff --git a/browser/themes/shared/downloads/contentAreaDownloadsView.css b/browser/themes/shared/downloads/contentAreaDownloadsView.css new file mode 100644 index 000000000..aef7df1d9 --- /dev/null +++ b/browser/themes/shared/downloads/contentAreaDownloadsView.css @@ -0,0 +1,31 @@ +/* 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; +} + +#downloadsRichListBox: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; +} + +.downloadButton > .button-box { + padding-bottom: 0; +} + +#downloadsListEmptyDescription { + margin: 1em; + text-align: center; + color: GrayText; +} diff --git a/browser/themes/shared/downloads/download-blocked.svg b/browser/themes/shared/downloads/download-blocked.svg new file mode 100644 index 000000000..e73efe99e --- /dev/null +++ b/browser/themes/shared/downloads/download-blocked.svg @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- 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" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"> + <style> + circle { + fill: #D92215; + } + rect { + fill: #fff; + } + </style> + + <circle cx="8" cy="8" r="8" /> + <rect x="3" y="6" width="10" height="4" rx=".5" ry=".5" /> +</svg> diff --git a/browser/themes/shared/downloads/download-summary.svg b/browser/themes/shared/downloads/download-summary.svg new file mode 100644 index 000000000..c10ee95fc --- /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 000000000..b4d670648 --- /dev/null +++ b/browser/themes/shared/downloads/downloads.inc.css @@ -0,0 +1,372 @@ +/* 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/. */ + +%filter substitution + +%define keyfocus #downloadsPanel[keyfocus] +%define notKeyfocus #downloadsPanel:not([keyfocus]) +%define item richlistitem[type="download"] +%define itemFinished @item@[state="1"] +%define itemNotFinished @item@:not([state="1"]) +%define itemFocused #downloadsListBox:focus > @item@[selected] + +/*** Panel and outer controls ***/ + +#downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent { + overflow: hidden; + display: block; +} + +#downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent, +#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews { + padding: 0; +} + +#downloadsListBox { + background: transparent; + color: inherit; + -moz-appearance: none; + margin: 0; +} + +#emptyDownloads { + padding: 16px 25px; + margin: 0; + /* The panel can be wider than this description after the blocked subview is + shown, so center the text. */ + text-align: center; +} + +.downloadsPanelFooter { + background-color: var(--arrowpanel-dimmed); + border-top: 1px solid var(--panel-separator-color); +} + +.downloadsPanelFooter toolbarseparator, +@item@ > toolbarseparator { + margin: 0; + border: 0; + min-width: 0; + border-left: 1px solid var(--panel-separator-color); + -moz-appearance: none; +} + +.downloadsPanelFooterButton { + -moz-appearance: none; + background-color: transparent; + color: inherit; + margin: 0; + padding: 0; + min-width: 0; + min-height: 40px; + border: none; +} + +.downloadsPanelFooterButton:hover { + outline: 1px solid var(--arrowpanel-dimmed); + background-color: var(--arrowpanel-dimmed); +} + +.downloadsPanelFooterButton:hover:active, +.downloadsPanelFooterButton[open="true"] { + outline: 1px solid var(--arrowpanel-dimmed-further); + background-color: var(--arrowpanel-dimmed-further); + box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset; +} + +.downloadsPanelFooterButton[default] { + background-color: #0996f8; + color: white; +} + +.downloadsPanelFooterButton[default]:hover { + background-color: #0675d3; +} + +.downloadsPanelFooterButton[default]:hover:active { + background-color: #0568ba; +} + +.downloadsPanelFooterButton > .button-box { + padding: 0; + margin: 0; + border: none; +} + +#downloadsHistory { + padding-inline-start: 10px; + padding-inline-end: 10px; +} + +#downloadsPanel[hasdownloads] #downloadsFooterButtons:not(.downloadsHideDropmarker) > #downloadsHistory { + padding-inline-start: 68px; +} + +toolbarseparator.downloadsDropmarkerSplitter { + margin: 7px 0; +} + +@item@ > toolbarseparator { + margin: 10px 0; +} + +@item@:hover > toolbarseparator, +#downloadsFooter:hover toolbarseparator.downloadsDropmarkerSplitter, +#downloadsFooter[showingdropdown] toolbarseparator { + margin: 0; +} + +.downloadsDropmarker { + padding: 0 21px; +} + +.downloadsDropmarker > .button-box > hbox { + display: none; +} + +.downloadsDropmarker > .button-box > .button-menu-dropmarker { + /* This is to override the linux !important */ + -moz-appearance: none !important; + display: -moz-box; + padding: 0; + margin: 0; +} + +.downloadsDropmarker > .button-box > .button-menu-dropmarker > .dropmarker-icon { + width: 16px; + height: 16px; + list-style-image: url("chrome://browser/skin/downloads/menubutton-dropmarker.svg"); + filter: url("chrome://browser/skin/filters.svg#fill"); + fill: currentColor; +} + +/* Override default icon size which is too small for this dropdown */ +.downloadsDropmarker > .button-box > .button-menu-dropmarker { + width: 16px; + height: 16px; +} + +#downloadsSummary { + -moz-user-focus: normal; +} + +#downloadsSummary > .downloadTypeIcon { + list-style-image: url("chrome://browser/skin/downloads/download-summary.svg"); +} + +#downloadsSummaryDescription { + color: -moz-nativehyperlinktext; +} + +/*** List items and similar elements in the summary ***/ + +#downloadsSummary, +richlistitem[type="download"] { + height: var(--downloads-item-height); +} + +richlistitem[type="download"] { + border-bottom: 1px solid var(--panel-separator-color); + background: transparent; + color: inherit; +} + +richlistitem[type="download"]:last-child { + border-bottom: none; +} + +.downloadTypeIcon { + margin: 8px 13px; + width: 32px; + height: 32px; +} + +.downloadBlockedBadge { + margin: 0 5px; + background: url("chrome://browser/skin/downloads/download-blocked.svg") top right / 16px no-repeat; +} + +.downloadBlockedBadge:-moz-locale-dir(rtl) { + background-position-x: left; +} + +@item@[verdict="PotentiallyUnwanted"] .downloadBlockedBadge { + background-image: url("chrome://browser/skin/warning.svg"); +} + +@item@[verdict="Uncommon"] .downloadBlockedBadge { + background-image: url("chrome://browser/skin/info.svg"); +} + +/* We hold .downloadTarget, .downloadProgress and .downloadDetails inside of + a vbox with class .downloadContainer. We set the font-size of the entire + container to --downloads-item-font-size-factor because: + + 1) This is the size that we want .downloadDetails to be + 2) The container's width is set by localizers by &downloadDetails.width;, + which is a ch unit. Since this is the value that should control the + panel width, we apply it to the outer container to constrain + .downloadTarget and .downloadProgress. + + Finally, since we want .downloadTarget's font-size to be at 100% of the + font-size of .downloadContainer's parent, we use calc to go from the + smaller font-size back to the original font-size. + */ +.downloadContainer { + font-size: calc(100% * var(--downloads-item-font-size-factor)); + margin-inline-end: 13px; +} + +#downloadsSummaryDescription, +.downloadTarget { + margin: 0; + font-size: calc(100% / var(--downloads-item-font-size-factor)); +} + +#downloadsSummaryDetails, +.downloadDetails { + 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); +} + +@item@[verdict] > toolbarseparator { + visibility: hidden; +} + +.downloadButton { + -moz-appearance: none; + min-width: 58px; + margin: 0; + border: none; + background: transparent; + padding: 0; + color: inherit; +} + +.downloadButton > .button-box > .button-icon { + width: 16px; + height: 16px; + margin: 1px; + filter: url("chrome://browser/skin/filters.svg#fill"); + fill: currentColor; +} + +.downloadButton > .button-box > .button-text { + margin: 0 !important; + padding: 0; +} + +@itemFinished@[exists] .downloadMainArea:hover, +@item@:not([verdict]) > .downloadButtonArea:hover, +@item@[verdict]:hover { + background-color: var(--arrowpanel-dimmed); +} + +@itemFinished@[exists] > .downloadMainArea:hover:active, +@item@:not([verdict]) > .downloadButtonArea:hover:active, +@item@[verdict]:hover:active { + background-color: var(--arrowpanel-dimmed-further); +} + +@item@[showingsubview] { + background-color: Highlight; + color: HighlightText; + transition: background-color var(--panelui-subview-transition-duration), + color var(--panelui-subview-transition-duration); +} + +@item@[verdict="Malware"]:hover, +@item@[verdict="Malware"]:hover:active, +@item@[verdict="Malware"][showingsubview] { + background-color: #aa1b08; + color: white; +} + +/*** Button icons ***/ + +.downloadIconCancel > .button-box > .button-icon { + list-style-image: url("chrome://browser/skin/panel-icons.svg#cancel"); +} + +.downloadIconShow > .button-box > .button-icon { +%ifdef XP_MACOSX + list-style-image: url("chrome://browser/skin/panel-icons.svg#magnifier"); +%else + list-style-image: url("chrome://browser/skin/panel-icons.svg#folder"); +%endif +} + +.downloadIconRetry > .button-box > .button-icon { + list-style-image: url("chrome://browser/skin/panel-icons.svg#retry"); +} + +.downloadShowBlockedInfo > .button-box > .button-icon { + list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-right"); +} + +.downloadShowBlockedInfo > .button-box > .button-icon:-moz-locale-dir(rtl) { + list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-left"); +} + +/*** Blocked subview ***/ + +#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype=main] > .panel-subviews { + /* When the main view is showing, the shadow on the left edge of the subview is + barely visible on the right edge of the main view, so set it to none. */ + box-shadow: none; +} + +/* When the subview is showing, turn the download button into an arrow pointing + back to the main view. */ +#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton { + color: HighlightText; +} + +#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton > .button-box > .button-icon { + list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-left"); +} + +#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton > .button-box > .button-icon:-moz-locale-dir(rtl) { + list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-right"); +} + +#downloadsPanel-blockedSubview { + background-image: url("chrome://browser/skin/warning.svg"); + background-size: 32px 32px; + background-position: 16px 16px; + background-repeat: no-repeat; +} + +#downloadsPanel-blockedSubview:-moz-locale-dir(rtl) { + background-position: calc(100% - 16px) 16px; +} + +#downloadsPanel-blockedSubview[verdict=Malware] { + background-image: url("chrome://browser/skin/downloads/download-blocked.svg"); +} + +#downloadsPanel-blockedSubview-title { + margin-top: 16px; + margin-bottom: 16px; + font-size: calc(100% / var(--downloads-item-font-size-factor)); +} + +#downloadsPanel-blockedSubview-details1, +#downloadsPanel-blockedSubview-details2 { + font-size: calc(100% * var(--downloads-item-font-size-factor)); + margin-bottom: 16px; + opacity: var(--downloads-item-details-opacity); +} + +#downloadsPanel-blockedSubview-title, +#downloadsPanel-blockedSubview-details1, +#downloadsPanel-blockedSubview-details2 { + -moz-margin-start: 64px; + -moz-margin-end: 16px; +} + +/*** Progressmeter ***/ +%include progressmeter.inc.css diff --git a/browser/themes/shared/downloads/menubutton-dropmarker.svg b/browser/themes/shared/downloads/menubutton-dropmarker.svg new file mode 100644 index 000000000..76af113a7 --- /dev/null +++ b/browser/themes/shared/downloads/menubutton-dropmarker.svg @@ -0,0 +1,8 @@ +<?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="16" height="16" viewBox="0 0 16 16"> + <path d="m 2,6 6,6 6,-6 -1.5,-1.5 -4.5,4.5 -4.5,-4.5 z" /> +</svg> diff --git a/browser/themes/shared/downloads/progressmeter.inc.css b/browser/themes/shared/downloads/progressmeter.inc.css new file mode 100644 index 000000000..22e780e09 --- /dev/null +++ b/browser/themes/shared/downloads/progressmeter.inc.css @@ -0,0 +1,70 @@ +/*** Common-styled progressmeter ***/ +.downloadProgress { + height: 8px; + border-radius: 1px; + margin: 4px 0 0; + margin-inline-end: 12px; + + /* for overriding rules in progressmeter.css */ + -moz-appearance: none; + border-style: none; + background-color: transparent; + min-width: initial; + min-height: initial; +} + +.downloadProgress[mode="undetermined"] { + /* for overriding rules on global.css in Linux. */ + -moz-binding: url("chrome://global/content/bindings/progressmeter.xml#progressmeter"); +} + +.downloadProgress > .progress-bar { + background-color: Highlight; + + /* for overriding rules in progressmeter.css */ + -moz-appearance: none; +} + +.downloadProgress[paused="true"] > .progress-bar { + background-color: GrayText; +} + +.downloadProgress[mode="undetermined"] > .progress-bar { + /* Make a white reflecting animation. + Create a gradient with 2 identical pattern, and enlarge the size to 200%. + This allows us to animate background-position with percentage. */ + background-image: linear-gradient(90deg, transparent 0%, + rgba(255,255,255,0.5) 25%, + transparent 50%, + rgba(255,255,255,0.5) 75%, + transparent 100%); + background-blend-mode: lighten; + background-size: 200% 100%; + animation: downloadProgressSlideX 1.5s linear infinite; +} + +.downloadProgress > .progress-remainder { + border: solid ButtonShadow; + border-block-start-width: 1px; + border-block-end-width: 1px; + border-inline-start-width: 0; + border-inline-end-width: 1px; + background-color: ButtonFace; +} + +.downloadProgress[value="0"] > .progress-remainder { + border-width: 1px; +} + +.downloadProgress > .progress-remainder[mode="undetermined"] { + border: none; +} + +@keyframes downloadProgressSlideX { + 0% { + background-position: 0 0; + } + 100% { + background-position: -100% 0; + } +} |
