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://browser/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 richlistitem[type="download"][verdict] > toolbarseparator {
 217   visibility: hidden;
 218 }
 219
 220 .downloadButton {
 221   min-width: 58px;
 222   margin: 0;
 223 /*  border: none; */
 224   background: transparent;
 225   padding: 0;
 226   color: inherit;
 227 }
 228
 229 .downloadButton > .button-box > .button-icon {
 230   width: 16px;
 231   height: 16px;
 232   margin: 1px;
 233   filter: url("chrome://browser/skin/filters.svg#fill");
 234   fill: currentColor;
 235 }
 236
 237 .downloadButton > .button-box > .button-text {
 238   margin: 0 !important;
 239   padding: 0;
 240 }
 241
 242 richlistitem[type="download"][state="1"][exists] .downloadMainArea:hover,
 243 richlistitem[type="download"]:not([verdict]) > .downloadButtonArea:hover,
 244 richlistitem[type="download"][verdict]:hover {
 245   background-color: var(--arrowpanel-dimmed);
 246 }
 247
 248 richlistitem[type="download"][state="1"][exists] > .downloadMainArea:hover:active,
 249 richlistitem[type="download"]:not([verdict]) > .downloadButtonArea:hover:active,
 250 richlistitem[type="download"][verdict]:hover:active {
 251   background-color: var(--arrowpanel-dimmed-further);
 252 }
 253
 254 richlistitem[type="download"][showingsubview] {
 255   background-color: #794900;
 256   color: #FFCF00;
 257   transition: background-color var(--panelui-subview-transition-duration),
 258               color var(--panelui-subview-transition-duration);
 259 }
 260
 261 richlistitem[type="download"][verdict="Malware"]:hover,
 262 richlistitem[type="download"][verdict="Malware"]:hover:active,
 263 richlistitem[type="download"][verdict="Malware"][showingsubview] {
 264   background-color: #FF0000;
 265   color: #000000;
 266 }
 267
 268 /*** Button icons ***/
 269
 270 .downloadIconCancel > .button-box > .button-icon {
 271   list-style-image: url("chrome://browser/skin/panel-icons.svg#cancel");
 272 }
 273
 274 .downloadIconShow > .button-box > .button-icon {
 275   list-style-image: url("chrome://browser/skin/panel-icons.svg#folder");
 276 }
 277
 278 .downloadIconRetry > .button-box > .button-icon {
 279   list-style-image: url("chrome://browser/skin/panel-icons.svg#retry");
 280 }
 281
 282 .downloadShowBlockedInfo > .button-box > .button-icon {
 283   list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-right");
 284 }
 285
 286 .downloadShowBlockedInfo > .button-box > .button-icon:-moz-locale-dir(rtl) {
 287   list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-left");
 288 }
 289
 290 /*** Blocked subview ***/
 291
 292 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype=main] > .panel-subviews {
 293   /* When the main view is showing, the shadow on the left edge of the subview is
 294      barely visible on the right edge of the main view, so set it to none. */
 295   box-shadow: none;
 296 }
 297
 298 /* When the subview is showing, turn the download button into an arrow pointing
 299    back to the main view. */
 300 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton {
 301   color: #FFCF00;
 302 }
 303
 304 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton > .button-box > .button-icon {
 305   list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-left");
 306 }
 307
 308 #downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton > .button-box > .button-icon:-moz-locale-dir(rtl) {
 309   list-style-image: url("chrome://browser/skin/panel-icons.svg#arrow-right");
 310 }
 311
 312 #downloadsPanel-blockedSubview {
 313   background-image: url("chrome://browser/skin/warning.svg");
 314   background-size: 32px 32px;
 315   background-position: 16px 16px;
 316   background-repeat: no-repeat;
 317 }
 318
 319 #downloadsPanel-blockedSubview:-moz-locale-dir(rtl) {
 320   background-position: calc(100% - 16px) 16px;
 321 }
 322
 323 #downloadsPanel-blockedSubview[verdict=Malware] {
 324   background-image: url("chrome://browser/skin/downloads/download-blocked.svg");
 325 }
 326
 327 #downloadsPanel-blockedSubview-title {
 328   margin-top: 16px;
 329   margin-bottom: 16px;
 330   font-size: calc(100% / var(--downloads-item-font-size-factor));
 331 }
 332
 333 #downloadsPanel-blockedSubview-details1,
 334 #downloadsPanel-blockedSubview-details2 {
 335   font-size: calc(100% * var(--downloads-item-font-size-factor));
 336   margin-bottom: 16px;
 337   opacity: var(--downloads-item-details-opacity);
 338 }
 339
 340 #downloadsPanel-blockedSubview-title,
 341 #downloadsPanel-blockedSubview-details1,
 342 #downloadsPanel-blockedSubview-details2 {
 343   -moz-margin-start: 64px;
 344   -moz-margin-end: 16px;
 345 }
 346
 347 /*** Progressmeter ***/
 348 /* %include progressmeter.inc.css - this happens as @import at the start of the file */
 349
 350 /* === END downloads.inc.css === */
 351
 352 /*** Panel and outer controls ***/
 353
 354 #downloadsPanel[keyfocus] #downloadsSummary:focus,
 355 #downloadsPanel[keyfocus] .downloadsPanelFooterButton:focus {
 356   outline: 1px #008484 dotted;
 357   outline-offset: -1px;
 358 }
 359
 360 #downloadsPanel[keyfocus] #downloadsSummary:focus {
 361   outline-offset: -5px;
 362 }
 363
 364 richlistitem[type="download"][showingsubview] {
 365   background-color: Highlight;
 366   color: HighlightText;
 367   transition: background-color var(--panelui-subview-transition-duration),
 368               color var(--panelui-subview-transition-duration);
 369 }
 370
 371 #downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"][exists][verdict="Malware"]:hover,
 372 #downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"][exists][verdict="Malware"]:hover:active,
 373 richlistitem[type="download"][showingsubview][verdict="Malware"] {
 374   background-color: hsl(4, 82%, 47%);
 375   color: white;
 376 }
 377
 378
 379 /*** List items and similar elements in the summary ***/
 380
 381 :root {
 382   --downloads-item-height: 5.5em;
 383   --downloads-item-font-size-factor: 0.9;
 384   --downloads-item-details-opacity: 0.6;
 385 }
 386
 387 .downloadButton > .button-box {
 388   border: 1px solid transparent;
 389 }
 390
 391 #downloadsPanel[keyfocus] .downloadButton:focus > .button-box {
 392   border: 1px dotted #008484;
 393 }
 394
 395 richlistitem[type="download"][verdict="PotentiallyUnwanted"] .blockedIcon {
 396   list-style-image: url("chrome://global/skin/icons/warning.svg");
 397 }
 398
 399 richlistitem[type="download"][verdict="Uncommon"] .blockedIcon {
 400   list-style-image: url("chrome://global/skin/icons/information-32.png");
 401 }
 402
 403 @media (-moz-windows-default-theme) {
 404   richlistitem[type="download"][verdict="Malware"] {
 405     color: #FF0000;
 406   }
 407 }
 408
 409 /*** Highlighted list items ***/
 410
 411 #downloadsListBox:-moz-focusring > richlistitem[type="download"][selected] {
 412   outline: 1px #008484 dotted;
 413   outline-offset: -1px;
 414   /*-moz-outline-radius: 3px;*/
 415 }