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