indicator.css (8141B)
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 /*** Status and progress indicator ***/ 6 7 #downloads-indicator-anchor { 8 min-width: 16px; 9 min-height: 16px; 10 -moz-context-properties: fill, fill-opacity; 11 list-style-image: url("chrome://browser/skin/downloads/downloads.svg"); 12 } 13 14 #downloads-button[progress] > .toolbarbutton-badge-stack > #downloads-indicator-anchor > #downloads-indicator-icon, 15 #downloads-button[animate][notification] > .toolbarbutton-badge-stack > #downloads-indicator-anchor > #downloads-indicator-icon { 16 visibility: hidden; 17 } 18 19 #wrapper-downloads-button > #downloads-button > .toolbarbutton-badge-stack > #downloads-indicator-anchor > #downloads-indicator-icon { 20 visibility: visible; 21 } 22 23 #downloads-button[attention="success"] > .toolbarbutton-badge-stack > #downloads-indicator-anchor > #downloads-indicator-icon { 24 fill: var(--toolbarbutton-icon-fill-attention); 25 fill-opacity: 1; 26 } 27 28 /* Hide the default icon, show the anchor instead. */ 29 :not(toolbarpaletteitem[place="palette"]) > #downloads-button > .toolbarbutton-badge-stack > .toolbarbutton-icon, 30 toolbarpaletteitem[place="palette"] > #downloads-button > .toolbarbutton-badge-stack > #downloads-indicator-anchor { 31 display: none; 32 } 33 34 #downloads-button > .toolbarbutton-badge-stack > .toolbarbutton-animatable-box { 35 pointer-events: none; 36 -moz-context-properties: fill, fill-opacity, stroke; 37 grid-area: initial; 38 top: calc(50% - 10px); /* Vertically center the 20px tall animatable image */ 39 left: calc(50% - 10px); /* Horizontally center the 20px wide animatable image */ 40 width: 20px; /* Width of each frame within the SVG sprite */ 41 height: 20px; /* Height of each frame within the SVG sprite */ 42 /* Animation is not directional and shouldn't be reversed in RTL */ 43 direction: ltr; 44 /* Revert to the xul.css user agent stylesheet's z-index value (auto) for 45 stack children, to ensure the badge (the last child of the stack) appears in 46 front of the animatable boxes */ 47 z-index: revert; 48 } 49 50 /* Hide progress and state animations in customize mode */ 51 toolbarpaletteitem > #downloads-button > .toolbarbutton-badge-stack > .toolbarbutton-animatable-box, 52 toolbarpaletteitem > #downloads-button > .toolbarbutton-badge-stack > #downloads-indicator-progress-outer { 53 display: none; 54 } 55 56 #downloads-indicator-start-box > .toolbarbutton-animatable-image, 57 #downloads-indicator-finish-box > .toolbarbutton-animatable-image { 58 visibility: hidden; 59 } 60 61 /* Button progress indication */ 62 #downloads-button > .toolbarbutton-badge-stack > #downloads-indicator-progress-outer { 63 visibility: hidden; 64 top: calc(50% - 9px); /* Vertically center the 18px tall animatable image */ 65 left: calc(50% - 9px); /* Horizontally center the 18px wide animatable image */ 66 width: 18px; 67 height: 18px; 68 border-radius: var(--border-radius-circle); 69 border: 1px solid currentColor; 70 display: flex; 71 align-items: center; 72 justify-content: center; 73 } 74 75 #downloads-button[progress]:not([notification]) > .toolbarbutton-badge-stack > #downloads-indicator-progress-outer { 76 visibility: visible; 77 } 78 79 #downloads-indicator-progress-inner { 80 --download-progress-pcent: 0%; 81 82 width: 14px; 83 height: 14px; 84 /* 85 From javascript side we update the --download-progress-pcent variable to show the current progress 86 */ 87 background: conic-gradient(var(--toolbarbutton-icon-fill-attention) var(--download-progress-pcent), transparent var(--download-progress-pcent)); 88 border-radius: var(--border-radius-circle); 89 } 90 91 /*** Status badges ***/ 92 93 #downloads-button[attention="info"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, 94 #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, 95 #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { 96 display: block; 97 box-shadow: none; 98 /* "!important" is necessary to override the rule in toolbarbutton.css */ 99 margin: -7px 0 0 !important; 100 margin-inline-end: -4px !important; 101 min-width: 12px; 102 min-height: 12px; 103 -moz-context-properties: fill; 104 background-size: 12px; 105 } 106 107 #downloads-button[attention="info"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { 108 background: url(chrome://browser/skin/notification-fill-12.svg) no-repeat center; 109 fill: var(--panel-banner-item-info-icon-bgcolor); 110 } 111 112 #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { 113 background: url(chrome://global/skin/icons/warning-fill-12.svg) no-repeat center; 114 fill: var(--warning-icon-bgcolor); 115 } 116 117 #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { 118 background: url(chrome://browser/skin/notification-fill-12.svg) no-repeat center; 119 fill: light-dark(rgb(226, 40, 80), rgb(255, 132, 138)); 120 } 121 122 #downloads-button[animate] > .toolbarbutton-badge-stack > .toolbarbutton-badge { 123 /* Don't display the badge until after the animation has cleared. */ 124 display: none; 125 } 126 127 /*** Download notifications (transitions between downloading states) ***/ 128 129 #downloads-indicator-start-image { 130 --anim-steps: 16; 131 132 list-style-image: url("chrome://browser/skin/downloads/notification-start-animation.svg"); 133 width: calc(20px * (var(--anim-steps) + 1)); 134 height: 20px; 135 136 fill: currentColor; 137 fill-opacity: 1; 138 stroke: currentColor; 139 140 /* initial state for animation */ 141 transform: translateX(0); 142 } 143 #downloads-button[attention="success"] > .toolbarbutton-badge-stack > #downloads-indicator-start-box > #downloads-indicator-start-image { 144 /* Match the download icon color in the initial animation frames 145 to the current color of the indicator */ 146 stroke: var(--toolbarbutton-icon-fill-attention); 147 } 148 #downloads-button[washidden] > .toolbarbutton-badge-stack > #downloads-indicator-start-box > #downloads-indicator-start-image { 149 /* Hide the download icon in the first few animation frames, when the button was just un-hidden */ 150 stroke: transparent; 151 } 152 153 #downloads-button[animate][notification="start"] > .toolbarbutton-badge-stack > #downloads-indicator-start-box > #downloads-indicator-start-image { 154 visibility: visible; 155 /* Upon changing the animation-duration below, please keep the 156 setTimeout() identical in indicator.js#_showNotification. 157 */ 158 animation-name: downloadsButtonNotification; 159 animation-duration: calc(var(--anim-steps) * 16.667ms); 160 animation-timing-function: steps(var(--anim-steps)); 161 162 /* end state for animation: */ 163 transform: translateX(calc(var(--anim-steps) * -20px)); 164 } 165 166 #downloads-indicator-finish-image { 167 --anim-frames: 26; 168 --anim-steps: calc(var(--anim-frames) + 100); /* Add 100 frames for doing the pause in the middle */ 169 170 fill: var(--toolbarbutton-icon-fill-attention); 171 fill-opacity: 1; 172 stroke: var(--toolbarbutton-icon-fill-attention); 173 174 list-style-image: url("chrome://browser/skin/downloads/notification-finish-animation.svg"); 175 width: calc(20px * (var(--anim-frames) + 1)); 176 height: 20px; 177 178 /* initial state for animation */ 179 transform: translateX(0); 180 } 181 #downloads-button[open] > .toolbarbutton-badge-stack > #downloads-indicator-finish-box > #downloads-indicator-finish-image { 182 stroke: currentColor; 183 } 184 185 #downloads-button[animate][notification="finish"] > .toolbarbutton-badge-stack > #downloads-indicator-finish-box > #downloads-indicator-finish-image { 186 visibility: visible; 187 animation-name: downloadsButtonFinishedNotification; 188 animation-duration: calc(var(--anim-steps) * 16.667ms); 189 190 /* end state for animation: */ 191 transform: translateX(calc(var(--anim-frames) * -20px)); 192 } 193 194 @keyframes downloadsButtonNotification { 195 from { 196 transform: translateX(0); 197 } 198 } 199 200 @keyframes downloadsButtonFinishedNotification { 201 from { 202 animation-timing-function: steps(18); 203 transform: translateX(0); 204 } 205 14.28% { 206 /* 18th frame (18/126) */ 207 transform: translateX(calc(18 * -20px)); 208 } 209 93.65% { 210 /* Wait 100 frames of time, but resume from 18th frame (118/126) */ 211 animation-timing-function: steps(8); 212 transform: translateX(calc(18 * -20px)); 213 } 214 }