mirror of
https://github.com/zotero/zotero.git
synced 2026-08-28 05:25:31 +00:00
8dbc6177ce
* Display the progress bar on macOS integration commands more Avoid displaying before Add/Edit Citations, Add Note and Doc Prefs since that brings Zotero window to the foreground along with the relevant dialog, but display the progress bar after confirming those dialogs, which will bring Zotero to the front, but is still better than no progress indication. Display the progress bar for Refresh, Doc Prefs, Unlink and Add/Edit Bibliography * Fix progress bar indeterminate state not being visible and not working. - Update _progressMeter.scss for fx115+ - Some adjustments/resizing to progress bar display in quick format
83 lines
2.9 KiB
SCSS
83 lines
2.9 KiB
SCSS
//// From https://dxr.mozilla.org/mozilla-esr60/source/browser/themes/shared/downloads/progressmeter.inc.css
|
|
|
|
/* 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);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
#contentAreaDownloadsView {
|
|
--download-progress-fill-color: var(--in-content-item-selected);
|
|
}
|
|
}
|
|
|
|
/*
|
|
* 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: flex;
|
|
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;
|
|
}
|
|
}
|