LCARStrek/browser/downloads/downloads.css

   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 file,
   3  * You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 /* === BEGIN downloads.inc.css === */
   6
   7 /* In the original, this is at the end of the file as a preprocessor-include */
   8 @import url("progressmeter.inc.css");
   9
  10 /*** Panel and outer controls ***/
  11
  12 #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent {
  13   overflow: hidden;
  14   display: block;
  15 }
  16
  17 #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent,
  18 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
  19   padding: 0;
  20 }
  21
  22 #downloadsListBox {
  23   background-color: transparent;
  24   color: inherit;
  25   margin: 0;
  26 }
  27
  28 #emptyDownloads {
  29   padding: 16px 25px;
  30   margin: 0;
  31   /* The panel can be wider than this description after the blocked subview is
  32      shown, so center the text. */
  33   text-align: center;
  34 }
  35
  36 .downloadsPanelFooter {
  37 /*  background-color: var(--arrowpanel-dimmed);
  38   border-top: 1px solid var(--panel-separator-color);*/
  39 }
  40
  41 .downloadsPanelFooter toolbarseparator,
  42 richlistitem[type="download"] > toolbarseparator {
  43   margin: 0;
  44   border: 0;
  45   min-width: 0;
  46 /*  border-left: 1px solid var(--panel-separator-color);
  47   -moz-appearance: none;*/
  48 }
  49
  50 .downloadsPanelFooterButton {
  51   margin: 0;
  52   padding: 0;
  53   min-width: 0;
  54 /*  min-height: 40px;*/
  55   border: none;
  56 }
  57
  58 .downloadsPanelFooterButton:hover {
  59 }
  60
  61 .downloadsPanelFooterButton:hover:active,
  62 .downloadsPanelFooterButton[open="true"] {
  63 }
  64
  65 .downloadsPanelFooterButton[default] {
  66 }
  67
  68 .downloadsPanelFooterButton[default]:hover {
  69 }
  70
  71 .downloadsPanelFooterButton[default]:hover:active {
  72 }
  73
  74 .downloadsPanelFooterButton > .button-box {
  75   padding: 0;
  76   margin: 0;
  77   border: none;
  78 }
  79
  80 #downloadsHistory {
  81   padding-inline-start: 10px;
  82   padding-inline-end: 10px;
  83 }
  84
  85 #downloadsPanel[hasdownloads] #downloadsFooterButtons:not(.downloadsHideDropmarker) > #downloadsHistory {
  86   padding-inline-start: 68px;
  87 }
  88
  89 toolbarseparator.downloadsDropmarkerSplitter {
  90   margin: 7px 0;
  91 }
  92
  93 richlistitem[type="download"] > toolbarseparator {
  94   margin: 10px 0;
  95 }
  96
  97 richlistitem[type="download"]:hover > toolbarseparator,
  98 #downloadsFooter:hover toolbarseparator.downloadsDropmarkerSplitter,
  99 #downloadsFooter[showingdropdown] toolbarseparator {
 100   margin: 0;
 101 }
 102
 103 .downloadsDropmarker {
 104   padding: 0 21px;
 105 }
 106
 107 .downloadsDropmarker > .button-box > hbox {
 108   display: none;
 109 }
 110
 111 .downloadsDropmarker > .button-box > .button-menu-dropmarker {
 112   display: -moz-box;
 113   padding: 0;
 114   margin: 0;
 115 }
 116
 117 .downloadsDropmarker > .button-box > .button-menu-dropmarker > .dropmarker-icon {
 118   width: 16px;
 119   height: 16px;
 120 /*  list-style-image: url("chrome://browser/skin/downloads/menubutton-dropmarker.svg");
 121   filter: url("chrome://global/skin/filters.svg#fill");
 122   fill: currentColor;*/
 123 }
 124
 125 /* Override default icon size which is too small for this dropdown */
 126 .downloadsDropmarker > .button-box > .button-menu-dropmarker {
 127   width: 16px;
 128   height: 16px;
 129 }
 130
 131 #downloadsSummary {
 132   -moz-user-focus: normal;
 133 }
 134
 135 #downloadsSummary > .downloadTypeIcon {
 136   list-style-image: url("chrome://browser/skin/downloads/download-summary.svg");
 137 }
 138
 139 #downloadsSummaryDescription {
 140   color: #3333FF;
 141 }
 142
 143 /*** List items and similar elements in the summary ***/
 144
 145 #downloadsSummary,
 146 richlistitem[type="download"] {
 147   height: var(--downloads-item-height);
 148 }
 149
 150 richlistitem[type="download"] {
 151   border-bottom: 1px solid var(--panel-separator-color);
 152   background: transparent;
 153   color: inherit;
 154 }
 155
 156 richlistitem[type="download"]:last-child {
 157   border-bottom: none;
 158 }
 159
 160 .downloadTypeIcon {
 161   margin: 8px 13px;
 162   width: 32px;
 163   height: 32px;
 164 }
 165
 166 .downloadBlockedBadge {
 167   margin: 0 5px;
 168   background: url("chrome://browser/skin/downloads/download-blocked.svg") top right / 16px no-repeat;
 169 }
 170
 171 downloadBlockedBadge:-moz-locale-dir(rtl) {
 172   background-position-x: left;
 173 }
 174
 175 richlistitem[type="download"][verdict="PotentiallyUnwanted"] .downloadBlockedBadge {
 176   background-image: url("chrome://browser/skin/warning.svg");
 177 }
 178
 179 richlistitem[type="download"][verdict="Uncommon"] .downloadBlockedBadge {
 180   background-image: url("chrome://browser/skin/info.svg");
 181 }
 182
 183 /* We hold .downloadTarget, .downloadProgress and .downloadDetails inside of
 184    a vbox with class .downloadContainer. We set the font-size of the entire
 185    container to --downloads-item-font-size-factor because:
 186
 187    1) This is the size that we want .downloadDetails to be
 188    2) The container's width is set by localizers by &downloadDetails.width;,
 189       which is a ch unit. Since this is the value that should control the
 190       panel width, we apply it to the outer container to constrain
 191       .downloadTarget and .downloadProgress.
 192
 193    Finally, since we want .downloadTarget's font-size to be at 100% of the
 194    font-size of .downloadContainer's parent, we use calc to go from the
 195    smaller font-size back to the original font-size.
 196  */
 197 .downloadContainer {
 198   font-size: calc(100% * var(--downloads-item-font-size-factor));
 199   margin-inline-end: 13px;
 200 }
 201
 202 #downloadsSummaryDescription,
 203 .downloadTarget {
 204   margin: 0;
 205   font-size: calc(100% / var(--downloads-item-font-size-factor));
 206 }
 207
 208 #downloadsSummaryDetails,
 209 .downloadDetails {
 210   opacity: var(--downloads-item-details-opacity);
 211   /* Use calc() to keep the height consistent with .downloadTarget, so that the
 212      progress bar can be vertically centered. */
 213   margin: 4px 0 calc(1em / var(--downloads-item-font-size-factor) - 1em);
 214 }
 215
 216 /* The following rules control which message is shown under the name of the
 217    download, using a set of elements that share the class ".downloadDetails".
 218    At any given time, only one of these elements is displayed. We use a set of
 219    rules to hide the elements that shouldn't be displayed in each case. */
 220
 221 /* The full status message is only displayed in the Downloads View. */
 222 .downloadDetailsFull {
 223   display: none;
 224 }
 225
 226 /* When hovering the mouse pointer over the item, instead of the normal message
 227    we display a more detailed one. */
 228 richlistitem[type="download"]:hover > .downloadMainArea > .downloadContainer > .downloadDetailsNormal,
 229 richlistitem[type="download"]:not(:hover) > .downloadMainArea > .downloadContainer > .downloadDetailsHover {
 230   display: none;
 231 }
 232
 233 /* When hovering the action button in particular, instead of the usual hover
 234    message we display the command associated with the button. */
 235 richlistitem[type="download"].downloadHoveringButton > .downloadMainArea > .downloadContainer > .downloadDetailsHover,
 236 richlistitem[type="download"]:not(.downloadHoveringButton) > .downloadMainArea > .downloadContainer > .downloadButtonLabels {
 237   display: none;
 238 }
 239
 240 /* When hovering the main area of a finished download whose target exists,
 241    instead of the usual hover message we display the "Open File" command. */
 242 richlistitem[type="download"][state="1"][exists] > .downloadMainArea:hover > .downloadContainer > .downloadDetailsHover,
 243 richlistitem[type="download"]:not([state="1"]) > .downloadMainArea > .downloadContainer > .downloadOpenFile,
 244 richlistitem[type="download"]:not([exists]) > .downloadMainArea > .downloadContainer > .downloadOpenFile,
 245 .downloadMainArea:not(:hover) > .downloadContainer > .downloadOpenFile {
 246   display: none;
 247 }
 248
 249 /* When hovering items blocked by Application Reputation, instead of the other
 250    hover messages we display the "Show more information" label. */
 251 richlistitem[type="download"][verdict] > .downloadMainArea > .downloadContainer > .downloadDetailsHover,
 252 richlistitem[type="download"][verdict] > .downloadMainArea > .downloadContainer > .downloadButtonLabels,
 253 richlistitem[type="download"]:not([verdict]) > .downloadMainArea > .downloadContainer > .downloadShowMoreInfo,
 254 richlistitem[type="download"]:not(:hover) > .downloadMainArea > .downloadContainer > .downloadShowMoreInfo {
 255   display: none;
 256 }
 257
 258 richlistitem[type="download"][verdict] > toolbarseparator {
 259   visibility: hidden;
 260 }
 261
 262 .downloadButton {
 263   min-width: 58px;
 264   margin: 0;
 265 /*  border: none; */
 266   background: transparent;
 267   padding: 0;
 268   color: inherit;
 269 }
 270
 271 .downloadButton > .button-box > .button-icon {
 272   width: 16px;
 273   height: 16px;
 274   margin: 1px;
 275   filter: url("chrome://global/skin/filters.svg#fill");
 276   fill: currentColor;
 277 }
 278
 279 .downloadButton > .button-box > .button-text {
 280   margin: 0 !important;
 281   padding: 0;
 282 }
 283
 284 richlistitem[type="download"][state="1"][exists] .downloadMainArea:hover,
 285 richlistitem[type="download"]:not([verdict]) > .downloadButtonArea:hover,
 286 richlistitem[type="download"][verdict]:hover {
 287   background-color: var(--arrowpanel-dimmed);
 288 }
 289
 290 richlistitem[type="download"][state="1"][exists] > .downloadMainArea:hover:active,
 291 richlistitem[type="download"]:not([verdict]) > .downloadButtonArea:hover:active,
 292 richlistitem[type="download"][verdict]:hover:active {
 293   background-color: var(--arrowpanel-dimmed-further);
 294 }
 295
 296 richlistitem[type="download"][showingsubview] {
 297   background-color: #794900;
 298   color: #FFCF00;
 299   transition: background-color var(--panelui-subview-transition-duration),
 300               color var(--panelui-subview-transition-duration);
 301 }
 302
 303 richlistitem[type="download"][verdict="Malware"]:hover,
 304 richlistitem[type="download"][verdict="Malware"]:hover:active,
 305 richlistitem[type="download"][verdict="Malware"][showingsubview] {
 306   background-color: #FF0000;
 307   color: #000000;
 308 }
 309
 310 /*** Button icons ***/
 311
 312 .downloadIconCancel > .button-box > .button-icon {
 313   list-style-image: url("chrome://browser/skin/panel-icons.svg#cancel");
 314 }
 315
 316 .downloadIconShow > .button-box > .button-icon {
 317   list-style-image: url("chrome://browser/skin/panel-icons.svg#folder");
 318 }
 319
 320 .downloadIconRetry > .button-box > .button-icon {
 321   list-style-image: url("chrome://browser/skin/panel-icons.svg#retry");
 322 }
 323
 324 .downloadShowBlockedInfo > .button-box > .button-icon {
 325   list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-right");
 326 }
 327
 328 .downloadShowBlockedInfo > .button-box > .button-icon:-moz-locale-dir(rtl) {
 329   list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-left");
 330 }
 331
 332 /*** Blocked subview ***/
 333
 334 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype=main] > .panel-subviews {
 335   /* When the main view is showing, the shadow on the left edge of the subview is
 336      barely visible on the right edge of the main view, so set it to none. */
 337   box-shadow: none;
 338 }
 339
 340 /* When the subview is showing, turn the download button into an arrow pointing
 341    back to the main view. */
 342 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton {
 343   color: #FFCF00;
 344 }
 345
 346 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton > .button-box > .button-icon {
 347   list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-left");
 348 }
 349
 350 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton > .button-box > .button-icon:-moz-locale-dir(rtl) {
 351   list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-right");
 352 }
 353
 354 #downloadsPanel-blockedSubview {
 355   background-image: url("chrome://browser/skin/warning.svg");
 356   background-size: 32px 32px;
 357   background-position: 16px 16px;
 358   background-repeat: no-repeat;
 359 }
 360
 361 #downloadsPanel-blockedSubview:-moz-locale-dir(rtl) {
 362   background-position: calc(100% - 16px) 16px;
 363 }
 364
 365 #downloadsPanel-blockedSubview[verdict=Malware] {
 366   background-image: url("chrome://browser/skin/downloads/download-blocked.svg");
 367 }
 368
 369 #downloadsPanel-blockedSubview-title {
 370   margin-top: 16px;
 371   margin-bottom: 16px;
 372   font-size: calc(100% / var(--downloads-item-font-size-factor));
 373 }
 374
 375 #downloadsPanel-blockedSubview-details1,
 376 #downloadsPanel-blockedSubview-details2 {
 377   font-size: calc(100% * var(--downloads-item-font-size-factor));
 378   margin-bottom: 16px;
 379   opacity: var(--downloads-item-details-opacity);
 380 }
 381
 382 #downloadsPanel-blockedSubview-title,
 383 #downloadsPanel-blockedSubview-details1,
 384 #downloadsPanel-blockedSubview-details2 {
 385   -moz-margin-start: 64px;
 386   -moz-margin-end: 16px;
 387 }
 388
 389 /*** Progressmeter ***/
 390 /* %include progressmeter.inc.css - this happens as @import at the start of the file */
 391
 392 /* === END downloads.inc.css === */
 393
 394 /*** Panel and outer controls ***/
 395
 396 #downloadsPanel[keyfocus] #downloadsSummary:focus,
 397 #downloadsPanel[keyfocus] .downloadsPanelFooterButton:focus {
 398   outline: 1px #008484 dotted;
 399   outline-offset: -1px;
 400 }
 401
 402 #downloadsPanel[keyfocus] #downloadsSummary:focus {
 403   outline-offset: -5px;
 404 }
 405
 406 richlistitem[type="download"][showingsubview] {
 407   background-color: Highlight;
 408   color: HighlightText;
 409   transition: background-color var(--panelui-subview-transition-duration),
 410               color var(--panelui-subview-transition-duration);
 411 }
 412
 413 #downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"][exists][verdict="Malware"]:hover,
 414 #downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"][exists][verdict="Malware"]:hover:active,
 415 richlistitem[type="download"][showingsubview][verdict="Malware"] {
 416   background-color: hsl(4, 82%, 47%);
 417   color: white;
 418 }
 419
 420
 421 /*** List items and similar elements in the summary ***/
 422
 423 :root {
 424   --downloads-item-height: 5.5em;
 425   --downloads-item-font-size-factor: 0.9;
 426   --downloads-item-details-opacity: 0.6;
 427 }
 428
 429 .downloadButton > .button-box {
 430   border: 1px solid transparent;
 431 }
 432
 433 #downloadsPanel[keyfocus] .downloadButton:focus > .button-box {
 434   border: 1px dotted #008484;
 435 }
 436
 437 richlistitem[type="download"][verdict="PotentiallyUnwanted"] .blockedIcon {
 438   list-style-image: url("chrome://global/skin/icons/warning.svg");
 439 }
 440
 441 richlistitem[type="download"][verdict="Uncommon"] .blockedIcon {
 442   list-style-image: url("chrome://global/skin/icons/information-32.png");
 443 }
 444
 445 @media (-moz-windows-default-theme) {
 446   richlistitem[type="download"][verdict="Malware"] {
 447     color: #FF0000;
 448   }
 449 }
 450
 451 /*** Highlighted list items ***/
 452
 453 #downloadsListBox:-moz-focusring > richlistitem[type="download"][selected] {
 454   outline: 1px #008484 dotted;
 455   outline-offset: -1px;
 456   /*-moz-outline-radius: 3px;*/
 457 }