diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
commit | 36d22d82aa202bb199967e9512281e9a53db42c9 (patch) | |
tree | 105e8c98ddea1c1e4784a60a5a6410fa416be2de /browser/themes/shared/downloads/downloads.inc.css | |
parent | Initial commit. (diff) | |
download | firefox-esr-upstream.tar.xz firefox-esr-upstream.zip |
Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
-rw-r--r-- | browser/themes/shared/downloads/downloads.inc.css | 266 |
1 files changed, 266 insertions, 0 deletions
diff --git a/browser/themes/shared/downloads/downloads.inc.css b/browser/themes/shared/downloads/downloads.inc.css new file mode 100644 index 0000000000..887bb8b60c --- /dev/null +++ b/browser/themes/shared/downloads/downloads.inc.css @@ -0,0 +1,266 @@ +/* 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; +} + +#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; +} |