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