progressmeter.css (2760B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 /*** Common-styled progressmeter ***/ 6 7 :root { 8 --download-progress-fill-color: var(--toolbarbutton-icon-fill-attention); 9 --download-progress-paused-color: GrayText; 10 --download-progress-flare-color: rgba(255, 255, 255, 0.75); 11 } 12 13 @media (prefers-color-scheme: dark) { 14 #contentAreaDownloadsView { 15 --download-progress-fill-color: var(--color-accent-primary-selected); 16 } 17 } 18 19 /* 20 * Styling "html:progress" is limited by the fact that a number of properties 21 * are intentionally locked at the UA stylesheet level. We have to use a border 22 * instead of an outline because the latter would be drawn over the progress 23 * bar and we cannot change its z-index. This means we have to use a negative 24 * margin, except when the value is zero, and adjust the width calculation for 25 * the indeterminate state. 26 */ 27 28 .downloadProgress { 29 appearance: none; 30 display: flex; 31 margin-block: 5px 1px; 32 /* This value is kinda odd, it's used to align with the edge of the badge, 33 * if shown, which is inside the edge of the image (the image gets 16px 34 * margin). */ 35 margin-inline-end: 18px; 36 border: none; 37 height: 4px; 38 border-radius: var(--border-radius-xsmall); 39 background-color: color-mix(in srgb, currentColor 15%, transparent); 40 } 41 42 /* Ensure we have contrast in selected download items */ 43 #downloadsListBox.allDownloadsListBox richlistitem[selected] .downloadProgress::-moz-progress-bar { 44 --download-progress-fill-color: currentColor; 45 --download-progress-flare-color: AccentColor; 46 } 47 48 .downloadProgress::-moz-progress-bar { 49 appearance: none; 50 background-color: var(--download-progress-fill-color); 51 border-radius: var(--border-radius-xsmall); 52 } 53 54 .downloadProgress[paused]::-moz-progress-bar { 55 background-color: var(--download-progress-paused-color); 56 } 57 58 .downloadProgress:indeterminate::-moz-progress-bar { 59 width: calc(100% + 2px); 60 /* Make a white reflecting animation. 61 Create a gradient with 2 identical patterns, and enlarge the size to 200%. 62 This allows us to animate background-position with percentage. */ 63 background-color: var(--download-progress-fill-color); 64 background-image: linear-gradient( 65 90deg, 66 transparent 0%, 67 var(--download-progress-flare-color) 25%, 68 transparent 50%, 69 var(--download-progress-flare-color) 75%, 70 transparent 100% 71 ); 72 background-blend-mode: normal; 73 background-size: 200% 100%; 74 animation: downloadProgressSlideX 1.5s linear infinite; 75 } 76 77 @keyframes downloadProgressSlideX { 78 0% { 79 background-position: 0 0; 80 } 81 100% { 82 background-position: -100% 0; 83 } 84 }