downloads.css (10031B)
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 /*** Panel and outer controls ***/ 6 7 #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent { 8 padding: 0; 9 } 10 11 #downloadsPanel:not([hasdownloads]) > #downloadsListBox { 12 display: none; 13 } 14 15 #downloadsPanel[hasdownloads] > #emptyDownloads { 16 display: none; 17 } 18 19 #emptyDownloads { 20 padding: 10px 20px; 21 max-width: 40ch; 22 } 23 24 #downloadsFooter { 25 background: #181411; 26 border-top: 1px solid rgb(64,64,64); 27 } 28 29 #downloadsHistory { 30 background: transparent; 31 color: #bfbbb6; 32 cursor: pointer; 33 } 34 35 #downloadsPanel[keyfocus] > #downloadsFooter > #downloadsHistory:focus { 36 outline: 1px rgb(64,64,64) dotted; 37 outline-offset: -1px; 38 } 39 40 #downloadsHistory > .button-box { 41 border: none; 42 margin: 1em; 43 } 44 45 /*** Downloads Summary and List items ***/ 46 47 #downloadsSummary, 48 richlistitem[type="download"] { 49 height: 7em; 50 padding-inline-end: 0; 51 color: inherit; 52 } 53 54 #downloadsSummary { 55 padding: 8px 38px 8px 12px; 56 cursor: pointer; 57 -moz-user-focus: normal; 58 } 59 60 #downloadsPanel[keyfocus] > #downloadsFooter > #downloadsSummary:focus { 61 outline: 1px rgb(64,64,64) dotted; 62 outline-offset: -5px; 63 } 64 65 #downloadsSummary > .downloadTypeIcon { 66 list-style-image: url("chrome://browser/skin/downloads/download-summary.png"); 67 } 68 69 #downloadsSummaryDescription { 70 color: -moz-nativehyperlinktext; 71 } 72 73 richlistitem[type="download"] { 74 margin: 0; 75 border-bottom: 1px solid rgb(64,64,64); 76 background: #181411; 77 padding: 8px; 78 } 79 80 richlistitem[type="download"]:first-child { 81 border-top: 1px solid transparent; 82 } 83 84 @media (-moz-windows-default-theme) { 85 richlistitem[type="download"]:last-child { 86 border-bottom: 1px solid transparent; 87 } 88 } 89 90 .downloadTypeIcon { 91 margin-inline-end: 8px; 92 /* Prevent flickering when changing states. */ 93 height: 32px; 94 width: 32px; 95 } 96 97 .blockedIcon { 98 list-style-image: url("chrome://global/skin/icons/error-16.svg"); 99 } 100 101 /* We hold .downloadTarget, .downloadDisplayName, .downloadProgress and 102 .downloadDetails inside of a vbox with class .downloadContainer. 103 We set the font-size of the entire container to 90% because: 104 105 1) This is the size that we want .downloadDetails to be 106 2) The container's width is set by localizers by &downloadDetails.width;, 107 which is a ch unit. Since this is the value that should control the 108 panel width, we apply it to the outer container to constrain 109 .downloadTarget/.downloadDisplayName and .downloadProgress. 110 111 Finally, since we want .downloadTarget/.downloadDisplayName's font-size 112 to be at 100% of the font-size of .downloadContainer's parent, 113 we use calc to go from the smaller font-size back to the original font-size. 114 */ 115 #downloadsSummaryDetails, 116 .downloadContainer { 117 font-size: 90%; 118 } 119 120 #downloadsSummaryDescription, 121 .downloadTarget, 122 .downloadDisplayName { 123 margin-bottom: 6px; 124 cursor: inherit; 125 } 126 127 .downloadTarget, 128 .downloadDisplayName { 129 font-size: calc(100%/0.9); 130 } 131 132 #downloadsSummaryDetails, 133 .downloadDetails { 134 opacity: 0.6; 135 cursor: inherit; 136 } 137 138 .downloadButton { 139 -moz-appearance: none; 140 min-width: 0; 141 min-height: 0; 142 margin: 3px; 143 border: none; 144 background: transparent; 145 padding: 5px; 146 } 147 148 .downloadButton > .button-box { 149 border: 1px solid transparent; 150 padding: 0; 151 } 152 153 #downloadsPanel[keyfocus] .downloadButton:focus > .button-box { 154 border: 1px dotted rgb(64,64,64); 155 } 156 157 /*** Highlighted list items ***/ 158 159 #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover { 160 color: #bfbbb6; 161 background-color: #181411; 162 } 163 164 /*** Button icons ***/ 165 166 .downloadButton.downloadCancel { 167 list-style-image: url("chrome://browser/skin/downloads/buttons.svg#cancel-normal"); 168 } 169 .downloadButton.downloadCancel:hover { 170 list-style-image: url("chrome://browser/skin/downloads/buttons.svg#cancel"); 171 } 172 .downloadButton.downloadCancel:active { 173 list-style-image: url("chrome://browser/skin/downloads/buttons.svg#cancel-active"); 174 } 175 176 .downloadButton.downloadShow { 177 list-style-image: url("chrome://browser/skin/downloads/buttons.svg#show-normal"); 178 } 179 .downloadButton.downloadShow:hover { 180 list-style-image: url("chrome://browser/skin/downloads/buttons.svg#show"); 181 } 182 .downloadButton.downloadShow:active { 183 list-style-image: url("chrome://browser/skin/downloads/buttons.svg#show-active"); 184 } 185 186 .downloadButton.downloadRetry { 187 list-style-image: url("chrome://browser/skin/downloads/buttons.svg#retry-normal"); 188 } 189 .downloadButton.downloadRetry:hover { 190 list-style-image: url("chrome://browser/skin/downloads/buttons.svg#retry"); 191 } 192 .downloadButton.downloadRetry:active { 193 list-style-image: url("chrome://browser/skin/downloads/buttons.svg#retry-active"); 194 } 195 196 /*** Status and progress indicator ***/ 197 198 #downloads-indicator-anchor { 199 /* Makes the outermost stack element positioned, so that its contents are 200 rendered over the main browser window in the Z order. This is required by 201 the animated event notification. */ 202 position: relative; 203 } 204 205 /*** Main indicator icon ***/ 206 207 #downloads-indicator-icon { 208 background: -moz-image-rect(var(--toolbarbutton-image), 209 0, 108, 18, 90) center no-repeat; 210 min-width: 18px; 211 min-height: 18px; 212 } 213 214 toolbar:not([brighttext]) #downloads-indicator-icon { 215 background: -moz-image-rect(var(--toolbarbutton-inverted-image), 216 0, 108, 18, 90) center no-repeat; 217 } 218 219 #downloads-indicator[attention] > #downloads-indicator-anchor > #downloads-indicator-icon { 220 background-image: url("chrome://browser/skin/toolbar/downloads.svg#highlight"); 221 } 222 223 /* In the next few rules, we use :not([counter]) as a shortcut that is 224 equivalent to -moz-any([progress], [paused]). */ 225 226 #downloads-indicator:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { 227 background: -moz-image-rect(var(--toolbarbutton-image), 228 0, 108, 18, 90) center no-repeat; 229 background-size: 12px; 230 } 231 232 #downloads-indicator:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { 233 background-image: url("chrome://browser/skin/toolbar/downloads.svg#highlight"); 234 } 235 236 /*** Download notifications ***/ 237 238 #downloads-indicator-notification { 239 opacity: 0; 240 background-size: 16px; 241 background-position: center; 242 background-repeat: no-repeat; 243 } 244 245 @keyframes downloadsIndicatorNotificationStartRight { 246 from { opacity: 0; transform: translate(-128px, 128px) scale(8); } 247 20% { opacity: .85; animation-timing-function: ease-out; } 248 to { opacity: 0; transform: translate(0) scale(1); } 249 } 250 251 @keyframes downloadsIndicatorNotificationStartLeft { 252 from { opacity: 0; transform: translate(128px, 128px) scale(8); } 253 20% { opacity: .85; animation-timing-function: ease-out; } 254 to { opacity: 0; transform: translate(0) scale(1); } 255 } 256 257 #downloads-indicator[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-notification { 258 background-image: url("chrome://browser/skin/downloads/download-notification-start.png"); 259 animation-name: downloadsIndicatorNotificationStartRight; 260 animation-duration: 1s; 261 } 262 263 #downloads-indicator[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-notification { 264 animation-name: downloadsIndicatorNotificationStartLeft; 265 } 266 267 @keyframes downloadsIndicatorNotificationFinish { 268 from { opacity: 0; transform: scale(1); } 269 20% { opacity: .65; animation-timing-function: ease-in; } 270 to { opacity: 0; transform: scale(8); } 271 } 272 273 #downloads-indicator[notification="finish"] > #downloads-indicator-anchor > #downloads-indicator-notification { 274 background-image: url("chrome://browser/skin/downloads/download-notification-finish.png"); 275 animation-name: downloadsIndicatorNotificationFinish; 276 animation-duration: 1s; 277 } 278 279 /*** Progress bar and text ***/ 280 281 #downloads-indicator-counter { 282 height: 9px; 283 margin: -3px 0px 0px 0px; 284 color: white; 285 text-shadow: 0 0 1px rgba(0,0,0,.7), 286 0 1px 1.5px rgba(0,0,0,.5); 287 font-size: 9px; 288 line-height: 9px; 289 text-align: center; 290 } 291 292 toolbar:not([brighttext]) #downloads-indicator-counter { 293 color: hsl(0,0%,30%); 294 text-shadow: hsla(0,0%,100%,.5) 0 1px; 295 } 296 297 #downloads-indicator-progress { 298 width: 16px; 299 height: 5px; 300 min-width: 0; 301 min-height: 0; 302 margin-top: 1px; 303 margin-bottom: 2px; 304 border-radius: 2px; 305 box-shadow: 0 1px 0 hsla(0,0%,100%,.4); 306 } 307 308 #downloads-indicator-progress > .progress-bar { 309 -moz-appearance: none; 310 min-width: 0; 311 min-height: 0; 312 /* The background-clip: border-box; and background-image: none; are there to expand the background-color behind the border */ 313 background-clip: padding-box, border-box; 314 background-color: rgb(90, 201, 66); 315 background-image: linear-gradient(transparent 1px, rgba(255, 255, 255, 0.4) 1px, rgba(255, 255, 255, 0.4) 2px, transparent 2px), none; 316 border: 1px solid; 317 border-color: rgba(0,43,86,.6) rgba(0,43,86,.4) rgba(0,43,86,.4); 318 border-radius: 2px 0 0 2px; 319 } 320 321 #downloads-indicator-progress > .progress-remainder { 322 -moz-appearance: none; 323 min-width: 0; 324 min-height: 0; 325 background-image: linear-gradient(#505050, #575757); 326 border: 1px solid; 327 border-color: hsla(0,0%,0%,.6) hsla(0,0%,0%,.4) hsla(0,0%,0%,.4); 328 border-inline-start: none; 329 border-radius: 0 2px 2px 0; 330 } 331 332 #downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar { 333 background-color: rgb(220, 230, 81); 334 } 335 336 #downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder { 337 background-image: linear-gradient(#4b5000, #515700); 338 } 339 340 toolbar[mode="full"] > #downloads-indicator > .toolbarbutton-text { 341 margin: 0; 342 text-align: center; 343 } 344 345 #downloads-indicator-counter { 346 margin-bottom: -1px; 347 } 348