/* 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/. */ /* === BEGIN downloads.inc.css === */ /*** Panel and outer controls ***/ #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent { padding: 0; } #downloadsListBox { background-color: transparent; padding: 4px; color: inherit; } #downloadsPanel:not([hasdownloads]) > #downloadsListBox { display: none; } #downloadsPanel[hasdownloads] > #emptyDownloads { display: none; } #emptyDownloads { padding: 10px 20px; max-width: 40ch; } #downloadsSummary { padding: 8px 38px 8px 12px; cursor: pointer; -moz-user-focus: normal; } #downloadsSummary > .downloadTypeIcon { list-style-image: url("chrome://browser/skin/downloads/download-summary.png"); } #downloadsSummaryDescription { color: #3333FF; } #downloadsHistory { cursor: pointer; margin: 4px !important; color: #3333FF; } #downloadsHistory > .button-box { } /*** List items and similar elements in the summary ***/ #downloadsSummary, richlistitem[type="download"] { height: var(--downloads-item-height); -moz-padding-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;*/ } .downloadTypeIcon { -moz-margin-end: 8px; /* Prevent flickering when changing states. */ height: 32px; width: 32px; } .blockedIcon { list-style-image: url("chrome://global/skin/icons/alert-error.gif"); } /* 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 { 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; } /* === END downloads.inc.css === */ /*** Panel and outer controls ***/ #downloadsFooter { } #downloadsFooter:hover { } #downloadsFooter:hover:active { } #downloadsPanel[keyfocus] #downloadsSummary:focus, #downloadsPanel[keyfocus] #downloadsHistory:focus { outline: 1px #008484 dotted; outline-offset: -1px; } #downloadsPanel[keyfocus] #downloadsSummary:focus { outline-offset: -5px; } #downloadsHistory > .button-box { /* Hide the border so we don't display an inner focus ring. */ border: none; } /*** List items and similar elements in the summary ***/ :root { --downloads-item-height: 7em; /*--downloads-item-border-top-color: hsla(0,0%,100%,.3);*/ --downloads-item-border-bottom-color: #9C9CFF; --downloads-item-font-size-factor: 0.9; --downloads-item-target-margin-bottom: 6px; --downloads-item-details-margin-top: 0; --downloads-item-details-opacity: 0.6; } .downloadButton > .button-box { border: 1px solid transparent; } #downloadsPanel[keyfocus] .downloadButton:focus > .button-box { border: 1px dotted #008484; } richlistitem[type="download"][verdict="PotentiallyUnwanted"] .blockedIcon { list-style-image: url("chrome://global/skin/icons/warning.svg"); } richlistitem[type="download"][verdict="Uncommon"] .blockedIcon { list-style-image: url("chrome://global/skin/icons/information-32.png"); } /*** Highlighted list items ***/ #downloadsListBox:-moz-focusring > richlistitem[type="download"][selected] { outline: 1px #008484 dotted; outline-offset: -1px; /*-moz-outline-radius: 3px;*/ } /* #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover { */ #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"]:hover { border-radius: 3px; background-color: #794900; color: #FFCF00; cursor: pointer; } #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover:active { } /*** Button icons ***/ .downloadButton.downloadIconCancel { -moz-image-region: rect(0px, 16px, 16px, 0px); } richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconCancel, richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconCancel:hover, richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconCancel:active { -moz-image-region: rect(0px, 32px, 16px, 16px); } .downloadButton.downloadIconShow { -moz-image-region: rect(16px, 16px, 32px, 0px); } richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconShow, richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconShow:hover, richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconShow:active { -moz-image-region: rect(16px, 32px, 32px, 16px); } .downloadButton.downloadIconRetry { -moz-image-region: rect(32px, 16px, 48px, 0px); } richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconRetry, richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconRetry:hover, richlistitem[type="download"]:hover > stack > .downloadButton.downloadIconRetry:active { -moz-image-region: rect(32px, 32px, 48px, 16px); }