downloads.inc.css (8598B)
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 @import "chrome://browser/skin/downloads/progressmeter.css"; 6 @import "chrome://browser/skin/downloads/download-blockedStates.css"; 7 8 /*** Panel and outer controls ***/ 9 10 #downloadsHistory { 11 border: 0; 12 } 13 14 #downloadsListBox { 15 background: transparent; 16 color: inherit; 17 appearance: none; 18 border: 0; 19 margin: 0; 20 /* We have an explicit width set by l10n, but we still want to fill our 21 * container if it's wider. */ 22 min-width: 100%; 23 } 24 25 @media not (prefers-contrast) { 26 #downloadsListBox[disabled] { 27 opacity: var(--downloads-item-disabled-opacity) !important; 28 } 29 } 30 31 @media (prefers-contrast) { 32 #downloadsListBox[disabled] { 33 color: GrayText; 34 } 35 } 36 37 #emptyDownloads { 38 padding: 1.5em 8px 2.1em; 39 margin: 0; 40 pointer-events: none; 41 } 42 43 #downloadsListBox > richlistitem { 44 /* Leave space for the 32x32 icon with 16px vertical padding, and/or 45 * the text in the item, with the same padding, whichever is bigger: */ 46 min-height: max(48px, calc(16px + 2em)); 47 padding-inline-end: 4px; 48 margin: 0 0 8px; 49 border-radius: var(--border-radius-small); 50 } 51 52 .downloadMainArea { 53 padding-block: 8px; 54 padding-inline-start: 4px; 55 border-radius: var(--border-radius-small); 56 } 57 58 #downloadsListBox > richlistitem[state="1"][exists].hoveringMainArea:hover, 59 #downloadsListBox > richlistitem.openWhenFinished.hoveringMainArea:hover, 60 #downloadsListBox > richlistitem[verdict]:hover, 61 #downloadsListBox > richlistitem.openWhenFinished:hover, 62 .downloadsPanelFooterButton:hover { 63 color: var(--button-text-color-ghost-hover); 64 background-color: var(--button-background-color-ghost-hover); 65 } 66 67 #downloadsListBox > richlistitem[state="1"][exists].hoveringMainArea:hover:active, 68 #downloadsListBox > richlistitem.openWhenFinished.hoveringMainArea:hover:active, 69 #downloadsListBox > richlistitem[verdict]:hover:active, 70 .downloadsPanelFooterButton[open="true"] { 71 color: var(--button-text-color-ghost-active); 72 background-color: var(--button-background-color-ghost-active); 73 } 74 75 #downloadsListBox:focus-visible > richlistitem[selected], 76 #downloadsListBox[force-focus-visible]:focus > richlistitem[selected], 77 .downloadButton:focus-visible, 78 #downloadsSummary:focus-visible, 79 .downloadsPanelFooterButton:focus-visible { 80 outline: var(--focus-outline); 81 outline-offset: var(--focus-outline-inset); 82 } 83 84 #downloadsListBox > richlistitem[verdict="Insecure"] .downloadDetails, 85 #downloadsListBox > richlistitem[verdict="Malware"] .downloadDetails { 86 color: var(--text-color-error); 87 /* The details text usually gets an opacity reduction, but for the error 88 states we disable that, because it would reduce the contrast too much. */ 89 opacity: inherit; 90 } 91 92 .downloadTypeIcon { 93 margin-inline-end: 0.7em; 94 } 95 96 #downloadsPanel-blockedSubview-buttons { 97 margin-top: 1.5em; 98 } 99 100 #downloadsSummary { 101 background: var(--arrowpanel-dimmed); 102 border-top: 1px solid var(--panel-separator-color); 103 /* Reserve the same space as the button and separator in download items. */ 104 padding-inline-end: 59px; 105 -moz-user-focus: normal; 106 } 107 108 #downloadsSummary > .downloadTypeIcon { 109 list-style-image: url("chrome://browser/skin/downloads/download-summary.svg"); 110 } 111 112 #downloadsSummaryDescription { 113 color: var(--link-color); 114 } 115 116 /*** List items and similar elements in the summary ***/ 117 #downloadsSummary { 118 min-height: var(--downloads-item-height); 119 } 120 121 #downloadsListBox > richlistitem { 122 background: transparent; 123 color: inherit; 124 } 125 126 #downloadsListBox > richlistitem:last-child { 127 margin-bottom: 0; 128 } 129 130 .downloadTypeIcon { 131 width: 32px; 132 height: 32px; 133 } 134 135 #downloadsSummaryDescription, 136 .downloadTarget { 137 margin: 0; 138 } 139 140 #downloadsSummaryDetails, 141 .downloadDetails { 142 font-size: calc(100% * var(--downloads-item-font-size-factor)); 143 opacity: var(--downloads-item-details-opacity); 144 /* Use calc() to keep the height consistent with .downloadTarget, so that the 145 progress bar can be vertically centered. */ 146 margin: 4px 0 calc(1em / var(--downloads-item-font-size-factor) - 1em); 147 } 148 149 /* When hovering the mouse pointer over the item, instead of the normal message 150 we display a more detailed one. For blocked downloads the entire area shows 151 the hover message, for other downloads only the main area does. */ 152 #downloadsListBox > richlistitem[verdict]:hover > .downloadMainArea > .downloadContainer > .downloadDetailsNormal, 153 #downloadsListBox > richlistitem[verdict]:not(:hover) > .downloadMainArea > .downloadContainer > .downloadDetailsHover, 154 .downloadMainArea:hover > .downloadContainer > .downloadDetailsNormal, 155 #downloadsListBox > richlistitem:not([verdict]) > .downloadMainArea:not(:hover) > .downloadContainer > .downloadDetailsHover { 156 display: none; 157 } 158 159 /* When hovering the action button in particular, instead of the usual hover 160 message we display the command associated with the button. */ 161 #downloadsListBox > richlistitem.downloadHoveringButton > .downloadMainArea > .downloadContainer > .downloadDetailsNormal, 162 #downloadsListBox > richlistitem.downloadHoveringButton > .downloadMainArea > .downloadContainer > .downloadDetailsHover, 163 #downloadsListBox > richlistitem:not(.downloadHoveringButton) > .downloadMainArea > .downloadContainer > .downloadDetailsButtonHover { 164 display: none; 165 } 166 167 .downloadButton { 168 appearance: none; 169 min-width: 32px; 170 height: 32px; 171 margin: 0; 172 margin-inline-start: 4px; 173 border: 1px solid transparent; 174 padding: 0; 175 color: var(--button-text-color-ghost); 176 background-color: var(--button-background-color-ghost); 177 border-radius: var(--border-radius-small); 178 --button-background-color-hover: var(--button-background-color-ghost-hover); 179 --button-hover-color: var(--button-text-color-ghost-hover); 180 --button-background-color-active: var(--button-background-color-ghost-acitve); 181 --button-active-color: var(--button-text-color-ghost-active); 182 } 183 184 .downloadButton > .button-box > .button-icon { 185 width: 16px; 186 height: 16px; 187 margin: 1px; 188 -moz-context-properties: fill; 189 fill: currentColor; 190 } 191 192 .downloadButton > .button-box > .button-text { 193 margin: 0 !important; 194 padding: 0; 195 } 196 197 @media (prefers-contrast) { 198 .downloadButton { 199 background-color: ButtonFace; 200 color: ButtonText; 201 border-color: currentColor; 202 --button-background-color-hover: SelectedItem; 203 --button-hover-color: SelectedItemText; 204 --button-background-color-active: ButtonFace; 205 --button-active-color: ButtonText; 206 } 207 } 208 209 .downloadButton:hover:not(:active) { 210 background-color: var(--button-background-color-hover); 211 color: var(--button-hover-color); 212 border-color: var(--button-background-color-hover); 213 } 214 .downloadButton:hover:active { 215 background-color: var(--button-background-color-active); 216 color: var(--button-active-color); 217 } 218 219 /*** Button icons ***/ 220 221 .downloadIconCancel > .button-box > .button-icon { 222 list-style-image: url("chrome://global/skin/icons/close.svg"); 223 } 224 225 .downloadIconShow > .button-box > .button-icon { 226 list-style-image: url("chrome://global/skin/icons/folder.svg"); 227 } 228 229 @media (-moz-platform: macos) { 230 .downloadIconShow > .button-box > .button-icon { 231 list-style-image: url("chrome://global/skin/icons/search-glass.svg"); 232 } 233 } 234 235 .downloadIconRetry > .button-box > .button-icon { 236 list-style-image: url("chrome://global/skin/icons/reload.svg"); 237 } 238 239 .downloadIconSubviewArrow > .button-box > .button-icon { 240 list-style-image: url("chrome://global/skin/icons/arrow-left.svg"); 241 } 242 243 .downloadIconSubviewArrow > .button-box > .button-icon:-moz-locale-dir(ltr) { 244 list-style-image: url("chrome://global/skin/icons/arrow-right.svg"); 245 } 246 247 /*** Blocked subview ***/ 248 #downloadsPanel-blockedSubview-title { 249 font-size: calc(100% * var(--downloads-item-font-size-factor)); 250 margin-bottom: 1.5em; 251 } 252 253 #downloadsPanel-blockedSubview-details1, 254 #downloadsPanel-blockedSubview-details2 { 255 font-size: calc(100% * var(--downloads-item-font-size-factor)); 256 margin-bottom: 0.5em; 257 opacity: var(--downloads-item-details-opacity); 258 } 259 260 /*** Toolbarseparator ***/ 261 #downloadsFooterButtons > toolbarseparator { 262 margin-inline: 0; 263 } 264 265 /*** Delete files in private browsing subview ***/ 266 #downloadsPanel-mainView[showing-private-browsing-choice] > .panel-view-body-unscrollable > #downloadsListBox > richlistitem { 267 display: none; 268 } 269 270 #downloadsPanel-privateBrowsing { 271 padding-inline-start: var(--space-medium); 272 } 273 274 #downloadsPanel-privateBrowsing > .panel-header { 275 text-align: start; 276 } 277 278 #downloadsPanel-privateBrowsing > toolbarseparator { 279 display: none; 280 }