/* 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 { padding: 0; } #downloadsListBox { background-color: transparent; padding: 4px; color: inherit; } #downloadsPanel:not([hasdownloads]) > #downloadsListBox { display: none; } #downloadsHistory { cursor: pointer; margin: 4px !important; } #downloadsPanel[keyfocus] > #downloadsFooter > #downloadsHistory:focus { outline: 1px #008484 dotted; outline-offset: -1px; } #downloadsHistory > .button-box { border: none; } /*** Downloads Summary and List items ***/ #downloadsSummary, richlistitem[type="download"] { height: 7em; -moz-padding-end: 0; color: inherit; } #downloadsSummary { padding: 8px 38px 8px 12px; cursor: pointer; -moz-user-focus: normal; } #downloadsPanel[keyfocus] > #downloadsFooter > #downloadsSummary:focus { outline: 1px #008484 dotted; outline-offset: -5px; } #downloadsSummary > .downloadTypeIcon { list-style-image: url("chrome://browser/skin/downloads/download-summary.png"); } #downloadsSummaryDescription { color: #3333FF; } richlistitem[type="download"] { margin: 0; border-bottom: 1px dotted #9C9CFF; background: transparent; padding: 8px; } richlistitem[type="download"]:first-child { /* border-top: 1px solid transparent;*/ } #downloadsListBox:-moz-focusring > richlistitem[type="download"][selected] { outline: 1px #008484 dotted; outline-offset: -1px; /*-moz-outline-radius: 3px;*/ } .downloadTypeIcon { -moz-margin-end: 8px; /* Prevent flickering when changing states. */ min-height: 32px; min-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 90% 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: 90%; } #downloadsSummaryDescription, .downloadTarget { margin-bottom: 6px; cursor: inherit; } .downloadTarget { font-size: calc(100%/0.9); } #downloadsSummaryDetails, .downloadDetails { opacity: 0.6; 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 { border: 1px solid transparent; padding: 0; } #downloadsPanel[keyfocus] .downloadButton:focus > .button-box { border: 1px dotted #008484; } /*** Highlighted list items ***/ #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"]:hover { border-radius: 3px; background-color: #794900; color: #FFCF00; cursor: pointer; } /*** Button icons ***/ .downloadButton.downloadCancel { -moz-image-region: rect(0px, 16px, 16px, 0px); } richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel, richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:hover, richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:active { -moz-image-region: rect(0px, 32px, 16px, 16px); } .downloadButton.downloadShow { -moz-image-region: rect(16px, 16px, 32px, 0px); } richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow, richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow:hover, richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow:active { -moz-image-region: rect(16px, 32px, 32px, 16px); } .downloadButton.downloadRetry { -moz-image-region: rect(32px, 16px, 48px, 0px); } richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry, richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:hover, richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:active { -moz-image-region: rect(32px, 32px, 48px, 16px); } /*** Status and progress indicator ***/ #downloads-indicator-anchor { /* Makes the outermost stack element positioned, so that its contents are rendered over the main browser window in the Z order. This is required by the animated event notification. */ position: relative; } /*** Main indicator icon ***/ #downloads-indicator-icon { background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"), 0, 108, 18, 90) center no-repeat; min-width: 18px; min-height: 18px; } #downloads-indicator:hover > #downloads-indicator-anchor > #downloads-indicator-icon, #downloads-indicator[open="true"] > #downloads-indicator-anchor > #downloads-indicator-icon, #downloads-indicator[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-icon { background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"), 18, 108, 36, 90) center no-repeat; color: #000000; } #downloads-indicator-icon:-moz-lwtheme-brighttext { /* background: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 0, 108, 18, 90) center no-repeat;*/ } #downloads-indicator[attention] > #downloads-indicator-anchor > #downloads-indicator-icon { background-image: url("chrome://browser/skin/downloads/download-glow.png"); } /* In the next few rules, we use :not([counter]) as a shortcut that is equivalent to -moz-any([progress], [paused]). */ #downloads-indicator:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"), 0, 108, 18, 90) center no-repeat; background-size: 12px; } #downloads-indicator:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { background-image: url("chrome://browser/skin/downloads/download-glow.png"); } #downloads-indicator:not([counter]):hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter, #downloads-indicator[open="true"]:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter, #downloads-indicator:not([counter])[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"), 18, 108, 36, 90) center no-repeat; background-size: 12px; } /*** Download notifications ***/ #downloads-indicator-notification { opacity: 0; background-size: 16px; background-position: center; background-repeat: no-repeat; } @keyframes downloadsIndicatorNotificationStartRight { from { opacity: 0; transform: translate(-128px, 128px) scale(8); } 20% { opacity: .85; animation-timing-function: ease-out; } to { opacity: 0; transform: translate(0) scale(1); } } @keyframes downloadsIndicatorNotificationStartLeft { from { opacity: 0; transform: translate(128px, 128px) scale(8); } 20% { opacity: .85; animation-timing-function: ease-out; } to { opacity: 0; transform: translate(0) scale(1); } } #downloads-indicator[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-notification { background-image: url("chrome://browser/skin/downloads/download-notification-start.png"); animation-name: downloadsIndicatorNotificationStartRight; animation-duration: 1s; } #downloads-indicator[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-notification { animation-name: downloadsIndicatorNotificationStartLeft; } @keyframes downloadsIndicatorNotificationFinish { from { opacity: 0; transform: scale(1); } 20% { opacity: .65; animation-timing-function: ease-in; } to { opacity: 0; transform: scale(8); } } #downloads-indicator[notification="finish"] > #downloads-indicator-anchor > #downloads-indicator-notification { background-image: url("chrome://browser/skin/downloads/download-notification-finish.png"); animation-name: downloadsIndicatorNotificationFinish; animation-duration: 1s; } /*** Progress bar and text ***/ #downloads-indicator-counter { height: 9px; margin: -3px 0 0; color: #FFCF00; font-size: 9px; line-height: 9px; text-align: center; } #downloads-indicator-counter:-moz-lwtheme-brighttext { /* color: white; text-shadow: 0 0 1px rgba(0,0,0,.7), 0 1px 1.5px rgba(0,0,0,.5);*/ } #downloads-indicator[counter]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter, #downloads-indicator[counter][open="true"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { color: #000000; } #downloads-indicator-progress { width: 16px; height: 5px; min-width: 0; min-height: 0; margin-top: 1px; margin-bottom: 2px; border-radius: 2px; background-color: #795900; } #downloads-indicator-progress > .progress-bar { -moz-appearance: none; min-width: 0; min-height: 0; background-color: #008484; border-radius: 2px 0 0 2px; } #downloads-indicator-progress > .progress-remainder { min-width: 0; min-height: 0; background-color: #A09090; border-radius: 0 2px 2px 0; } #downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar { background-color: #8050B0; } #downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder { background-color: #404048; }