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