path: root/arc-firefox-theme/chrome/browser/downloads/downloads.css

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */



/*** Panel and outer controls ***/

#downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent {
  overflow: hidden;
  display: block;
}

#downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent,
#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
  padding: 0;
}

#downloadsListBox {
  background: transparent;
  padding: 4px;
  color: inherit;
  -moz-appearance: none;
  margin: 0;
  border: none;
}

#emptyDownloads {
  padding: 16px 25px;
  margin: 0;
  /* The panel can be wider than this description after the blocked subview is
     shown, so center the text. */
  text-align: center;
}

.downloadsPanelFooter {
  background-color: var(--arrowpanel-dimmed);
  border-top: 1px solid var(--panel-separator-color);
}

.downloadsPanelFooter toolbarseparator {
  margin: 0;
  border: 0;
  min-width: 0;
  border-left: 1px solid var(--panel-separator-color);
  -moz-appearance: none;
}

.downloadsPanelFooterButton {
  -moz-appearance: none;
  background-color: transparent;
  color: inherit;
  margin: 0;
  padding: 0;
  min-width: 0;
  min-height: 40px;
  border: none;
}

.downloadsPanelFooterButton:hover {
  outline: 1px solid var(--arrowpanel-dimmed);
  background-color: var(--arrowpanel-dimmed);
}

.downloadsPanelFooterButton:hover:active,
.downloadsPanelFooterButton[open="true"] {
  outline: 1px solid var(--arrowpanel-dimmed-further);
  background-color: var(--arrowpanel-dimmed-further);
  box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
}

.downloadsPanelFooterButton[default] {
  background-color: #0996f8;
  color: white;
}

.downloadsPanelFooterButton[default]:hover {
  background-color: #0675d3;
}

.downloadsPanelFooterButton[default]:hover:active {
  background-color: #0568ba;
}

.downloadsPanelFooterButton > .button-box {
  padding: 0;
  margin: 0;
  border: none;
}

#downloadsHistory {
  padding-inline-start: 10px;
  padding-inline-end: 10px;
}

#downloadsPanel[hasdownloads] #downloadsFooterButtons:not(.downloadsHideDropmarker) > #downloadsHistory {
  padding-inline-start: 68px;
}

toolbarseparator.downloadsDropmarkerSplitter {
  margin: 7px 0;
}

#downloadsFooter:hover toolbarseparator.downloadsDropmarkerSplitter,
#downloadsFooter[showingdropdown] toolbarseparator {
  margin: 0;
}

.downloadsDropmarker {
  padding: 0 21px;
}

.downloadsDropmarker > .button-box > hbox {
  display: none;
}

.downloadsDropmarker > .button-box > .button-menu-dropmarker {
  /* This is to override the linux !important */
  -moz-appearance: none !important;
  display: -moz-box;
  padding: 0;
  margin: 0;
}

.downloadsDropmarker > .button-box > .button-menu-dropmarker > .dropmarker-icon {
  width: 16px;
  height: 16px;
  list-style-image: url("chrome://browser/skin/downloads/menubutton-dropmarker.svg");
  filter: url("chrome://browser/skin/filters.svg#fill");
  fill: currentColor;
}

/* Override default icon size which is too small for this dropdown */
.downloadsDropmarker > .button-box > .button-menu-dropmarker {
  width: 16px;
  height: 16px;
}

#downloadsSummary {
  padding: 0 12px;
  cursor: pointer;
  -moz-user-focus: normal;
}

#downloadsSummary > .downloadTypeIcon {
  list-style-image: url("chrome://browser/skin/downloads/download-summary.svg");
}

#downloadsSummaryDescription {
  color: -moz-nativehyperlinktext;
}

/*** List items and similar elements in the summary ***/

#downloadsSummary,
richlistitem[type="download"] {
  height: var(--downloads-item-height);
  padding-inline-end: 0;
  color: inherit;
}

richlistitem[type="download"] {
  margin: 0;
  border-top: 1px solid var(--downloads-item-border-top-color);
  border-bottom: 1px solid var(--downloads-item-border-bottom-color);
  background: transparent;
  padding: 8px;
}

richlistitem[type="download"]:first-child {
  border-top: 1px solid transparent;
}

richlistitem[type="download"]:last-child {
  border-bottom: 1px solid transparent;
}

.downloadTypeIcon {
  margin-top: 8px;
  margin-inline-end: 12px;
  margin-bottom: 8px;
  margin-inline-start: 0;
  width: 32px;
  height: 32px;
}

.downloadBlockedBadge {
  margin: 0 4px;
  background: url("chrome://browser/skin/downloads/download-blocked.svg") top right / 16px no-repeat;
}

.downloadBlockedBadge:-moz-locale-dir(rtl) {
  background-position-x: left;
}

richlistitem[type="download"][verdict="PotentiallyUnwanted"] .downloadBlockedBadge {
  background-image: url("chrome://browser/skin/warning.svg");
}

richlistitem[type="download"][verdict="Uncommon"] .downloadBlockedBadge {
  background-image: url("chrome://browser/skin/info.svg");
}

/* We hold .downloadTarget, .downloadProgress and .downloadDetails inside of
   a vbox with class .downloadContainer. We set the font-size of the entire
   container to --downloads-item-font-size-factor because:

   1) This is the size that we want .downloadDetails to be
   2) The container's width is set by localizers by &downloadDetails.width;,
      which is a ch unit. Since this is the value that should control the
      panel width, we apply it to the outer container to constrain
      .downloadTarget and .downloadProgress.

   Finally, since we want .downloadTarget's font-size to be at 100% of the
   font-size of .downloadContainer's parent, we use calc to go from the
   smaller font-size back to the original font-size.
 */
#downloadsSummaryDetails,
.downloadContainer {
  font-size: calc(100% * var(--downloads-item-font-size-factor));
}

#downloadsSummaryDescription,
.downloadTarget {
  margin-bottom: var(--downloads-item-target-margin-bottom);
  cursor: inherit;
}

.downloadTarget {
  font-size: calc(100% / var(--downloads-item-font-size-factor));
}

#downloadsSummaryDetails,
.downloadDetails {
  margin-top: var(--downloads-item-details-margin-top);
  opacity: var(--downloads-item-details-opacity);
  cursor: inherit;
}

.downloadButton {
  -moz-appearance: none;
  min-width: 0;
  min-height: 0;
  margin: 3px;
  border: none;
  background: transparent;
  padding: 5px;
  list-style-image: url("chrome://browser/skin/downloads/buttons.png");
}

.downloadButton > .button-box {
  padding: 0;
}


/*** Blocked subview ***/

#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype=main] > .panel-subviews {
  /* When the main view is showing, the shadow on the left edge of the subview is
     barely visible on the right edge of the main view, so set it to none. */
  box-shadow: none;
}

/* When the subview is showing, turn the download button into an arrow pointing
   back to the main view. */
#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton {
  list-style-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
}

#downloadsPanel-multiView > .panel-viewcontainer > .panel-viewstack[viewtype="subview"] .download-state[showingsubview] .downloadButton:-moz-locale-dir(rtl) {
  list-style-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
}

#downloadsPanel-blockedSubview {
  background-image: url("chrome://browser/skin/warning.svg");
  background-size: 32px 32px;
  background-position: 16px 16px;
  background-repeat: no-repeat;
}

#downloadsPanel-blockedSubview:-moz-locale-dir(rtl) {
  background-position: calc(100% - 16px) 16px;
}

#downloadsPanel-blockedSubview[verdict=Malware] {
  background-image: url("chrome://browser/skin/downloads/download-blocked.svg");
}

#downloadsPanel-blockedSubview-title {
  margin-top: 16px;
  margin-bottom: 16px;
  font-size: calc(100% / var(--downloads-item-font-size-factor));
}

#downloadsPanel-blockedSubview-details1,
#downloadsPanel-blockedSubview-details2 {
  font-size: calc(100% * var(--downloads-item-font-size-factor));
  margin-bottom: 16px;
  opacity: var(--downloads-item-details-opacity);
}

#downloadsPanel-blockedSubview-title,
#downloadsPanel-blockedSubview-details1,
#downloadsPanel-blockedSubview-details2 {
  -moz-margin-start: 64px;
  -moz-margin-end: 16px;
}

/*** Panel and outer controls ***/

#downloadsPanel[keyfocus] #downloadsSummary:focus,
#downloadsPanel[keyfocus] .downloadsPanelFooterButton:focus {
  outline: 1px -moz-dialogtext dotted;
  outline-offset: -5px;
}

/*** List items and similar elements in the summary ***/

:root {
  --downloads-item-height: 6em;
  --downloads-item-border-top-color: hsla(0,0%,100%,.2);
  --downloads-item-border-bottom-color: hsla(0,0%,0%,.15);
  --downloads-item-font-size-factor: 0.9;
  --downloads-item-target-margin-bottom: 7px;
  --downloads-item-details-margin-top: 1px;
  --downloads-item-details-opacity: 0.6;
}

.downloadButton:focus > .button-box {
  outline: 1px -moz-dialogtext dotted;
}

/*** Highlighted list items ***/

#downloadsPanel[keyfocus] #downloadsListBox:focus > richlistitem[type="download"][selected] {
  outline: 1px -moz-dialogtext dotted;
  outline-offset: -1px;
}

#downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"][exists]:hover,
richlistitem[type="download"][showingsubview] {
  border-radius: 3px;
  border-top: 1px solid hsla(0,0%,100%,.3);
  border-bottom: 1px solid hsla(0,0%,0%,.2);
  background-color: Highlight;
  background-image: linear-gradient(hsla(0,0%,100%,.1), transparent);
  color: HighlightText;
  cursor: pointer;
}

#downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"][exists][verdict="Malware"]:hover,
richlistitem[type="download"][showingsubview][verdict="Malware"] {
  background-color: hsl(4, 82%, 47%);
  color: white;
}

/*** Button icons ***/

.downloadButton.downloadIconCancel {
  -moz-image-region: rect(0px, 16px, 16px, 0px);
}
richlistitem[type="download"]:hover .downloadButton.downloadIconCancel {
  -moz-image-region: rect(0px, 32px, 16px, 16px);
}
richlistitem[type="download"]:hover .downloadButton.downloadIconCancel:hover {
  -moz-image-region: rect(0px, 48px, 16px, 32px);
}
richlistitem[type="download"]:hover .downloadButton.downloadIconCancel:active {
  -moz-image-region: rect(0px, 64px, 16px, 48px);
}

.downloadButton.downloadIconShow {
  -moz-image-region: rect(16px, 16px, 32px, 0px);
}
richlistitem[type="download"]:not([state="1"]):hover .downloadButton.downloadIconShow {
  -moz-image-region: rect(16px, 32px, 32px, 16px);
}
richlistitem[type="download"]:not([state="1"]):hover .downloadButton.downloadIconShow:hover {
  -moz-image-region: rect(16px, 48px, 32px, 32px);
}
richlistitem[type="download"]:not([state="1"]):hover .downloadButton.downloadIconShow:active {
  -moz-image-region: rect(16px, 64px, 32px, 48px);
}
#downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"]:hover .downloadButton.downloadIconShow {
  -moz-image-region: rect(16px, 96px, 32px, 80px);
}
#downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"]:hover .downloadButton.downloadIconShow:hover {
  -moz-image-region: rect(16px, 112px, 32px, 96px);
}
#downloadsPanel:not([keyfocus]) richlistitem[type="download"][state="1"]:hover .downloadButton.downloadIconShow:active {
  -moz-image-region: rect(16px, 128px, 32px, 112px);
}

.downloadButton.downloadIconRetry {
  -moz-image-region: rect(32px, 16px, 48px, 0px);
}
richlistitem[type="download"]:hover .downloadButton.downloadIconRetry {
  -moz-image-region: rect(32px, 32px, 48px, 16px);
}
richlistitem[type="download"]:hover .downloadButton.downloadIconRetry:hover {
  -moz-image-region: rect(32px, 48px, 48px, 32px);
}
richlistitem[type="download"]:hover .downloadButton.downloadIconRetry:active {
  -moz-image-region: rect(32px, 64px, 48px, 48px);
}

.downloadButton.downloadShowBlockedInfo {
  -moz-image-region: rect(48px, 16px, 64px, 0px);
}
richlistitem[type="download"]:hover .downloadButton.downloadShowBlockedInfo {
  -moz-image-region: rect(48px, 32px, 64px, 16px);
}
richlistitem[type="download"]:hover .downloadButton.downloadShowBlockedInfo:hover {
  -moz-image-region: rect(48px, 48px, 64px, 32px);
}
richlistitem[type="download"]:hover .downloadButton.downloadShowBlockedInfo:active {
  -moz-image-region: rect(48px, 64px, 64px, 48px);
}

.downloadButton.downloadShowBlockedInfo:-moz-locale-dir(rtl) {
  -moz-image-region: rect(64px, 16px, 80px, 0px);
}
richlistitem[type="download"]:hover .downloadButton.downloadShowBlockedInfo:-moz-locale-dir(rtl) {
  -moz-image-region: rect(64px, 32px, 80px, 16px);
}
richlistitem[type="download"]:hover .downloadButton.downloadShowBlockedInfo:hover:-moz-locale-dir(rtl) {
  -moz-image-region: rect(64px, 48px, 80px, 32px);
}
richlistitem[type="download"]:hover .downloadButton.downloadShowBlockedInfo:active:-moz-locale-dir(rtl) {
  -moz-image-region: rect(64px, 64px, 80px, 48px);
}