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/indicator.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 'browser/themes/shared/downloads/indicator.css')
-rw-r--r-- | browser/themes/shared/downloads/indicator.css | 209 |
1 files changed, 209 insertions, 0 deletions
diff --git a/browser/themes/shared/downloads/indicator.css b/browser/themes/shared/downloads/indicator.css new file mode 100644 index 0000000000..a401126a2f --- /dev/null +++ b/browser/themes/shared/downloads/indicator.css @@ -0,0 +1,209 @@ +/* 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-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 { + --download-progress-pcent: 0%; + + 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)); + } +} |