From: Robert Kaiser Date: Fri, 1 Jun 2012 16:58:47 +0000 (+0200) Subject: add download panel 14+ work fine X-Git-Tag: LCARStrek-2.10~2 X-Git-Url: https://git-public.kairo.at/?a=commitdiff_plain;h=64897c3a854fb98e44c6d36c851ac49d72b25c5b;p=themes.git add download panel 14+ work fine --- diff --git a/LCARStrek/browser/downloads/buttons.png b/LCARStrek/browser/downloads/buttons.png new file mode 100644 index 00000000..9850f25d Binary files /dev/null and b/LCARStrek/browser/downloads/buttons.png differ diff --git a/LCARStrek/browser/downloads/download-glow.png b/LCARStrek/browser/downloads/download-glow.png new file mode 100644 index 00000000..fb6f1f08 Binary files /dev/null and b/LCARStrek/browser/downloads/download-glow.png differ diff --git a/LCARStrek/browser/downloads/download-notification.png b/LCARStrek/browser/downloads/download-notification.png new file mode 100644 index 00000000..093b92bc Binary files /dev/null and b/LCARStrek/browser/downloads/download-notification.png differ diff --git a/LCARStrek/browser/downloads/downloads.css b/LCARStrek/browser/downloads/downloads.css new file mode 100644 index 00000000..e91d6f23 --- /dev/null +++ b/LCARStrek/browser/downloads/downloads.css @@ -0,0 +1,269 @@ +/* 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 ***/ + +#downloadsHistory, +#downloadsHistory:-moz-focusring > .button-box { + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; +} + +#downloadsPanel:not([hasdownloads]) > #downloadsHistory, +#downloadsPanel:not([hasdownloads]) > #downloadsHistory:-moz-focusring > .button-box { + border-top-left-radius: 6px; + border-top-right-radius: 6px; +} + +#downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent { + /* Avoid that the arrow overlaps the selection on first item */ + padding-top: 5px; +} + +#downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent { + padding: 0; +} + +#downloadsListBox { + width: 60ch; + background-color: transparent; + padding: 4px; + color: inherit; +} + +#downloadsHistory { + background: inherit; + color: #9C9CFF; + cursor: pointer; +} + +#downloadsHistory > .button-box { + margin: 1em; +} + +/*** List items ***/ + +richlistitem[type="download"] { + height: 7em; + margin: 0; + border-bottom: 1px dotted #9C9CFF; + background: transparent; + padding: 0; + color: inherit; +} + +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; +} + +.downloadInfo { + padding: 8px; + -moz-padding-end: 0; +} + +.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"); +} + +.downloadTarget { + margin-bottom: 6px; + cursor: inherit; +} + +.downloadDetails { + opacity: 0.6; + font-size: 90%; + cursor: inherit; +} + +.downloadButton { + -moz-appearance: none; + min-width: 0; + min-height: 0; + margin: 6px; + border: none; + background: transparent; + padding: 5px; + list-style-image: url("chrome://browser/skin/downloads/buttons.png"); +} + +.downloadButton > .button-box { + padding: 0; +} + +/*** Highlighted list items ***/ + +richlistitem[type="download"][state="1"] > .downloadInfo { + -moz-padding-end: 8px; +} + +richlistitem[type="download"][state="1"] > .downloadInfo:hover { + background-color: #794900; + color: #FFCF00; + cursor: pointer; +} + +/*** Button icons ***/ + +.downloadButton.downloadCancel { + -moz-image-region: rect(0px, 14px, 14px, 0px); +} +.downloadButton.downloadCancel:hover, +.downloadButton.downloadCancel:active { + -moz-image-region: rect(0px, 28px, 14px, 14px); +} + +.downloadButton.downloadShow { + -moz-image-region: rect(14px, 14px, 28px, 0px); +} +.downloadButton.downloadShow:hover, +.downloadButton.downloadShow:active { + -moz-image-region: rect(14px, 28px, 28px, 14px); +} + +.downloadButton.downloadRetry { + -moz-image-region: rect(28px, 14px, 42px, 0px); +} +.downloadButton.downloadRetry:hover, +.downloadButton.downloadRetry:active { + -moz-image-region: rect(28px, 28px, 42px, 14px); +} + +/*** Status and progress indicator ***/ + +#downloads-indicator { + width: 35px; +} + +#downloads-indicator-anchor { + min-width: 18px; + min-height: 18px; + /* 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/Toolbar.png"), + 0, 108, 18, 90) center no-repeat; +} + +#downloads-indicator:hover > #downloads-indicator-anchor > #downloads-indicator-icon, +#downloads-indicator[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-icon { + background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"), + 18, 108, 36, 90) center no-repeat; +} + +#downloads-indicator[attention] > #downloads-indicator-anchor > #downloads-indicator-icon { + background: -moz-image-rect(url("chrome://browser/skin/downloads/download-glow.png"), + 15, 33, 33, 15) center no-repeat; +} + +#downloads-indicator:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { + background: -moz-image-rect(url("chrome://browser/skin/Toolbar.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: -moz-image-rect(url("chrome://browser/skin/downloads/download-glow.png"), + 16, 32, 32, 16); +} + +#downloads-indicator:not([counter]):hover > #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/Toolbar.png"), + 18, 108, 36, 90) center no-repeat; +} + +/*** Event notification ***/ + +#downloads-indicator-notification { + opacity: 0; + background: url("chrome://browser/skin/downloads/download-notification.png") + center no-repeat; + background-size: 16px; +} + +@-moz-keyframes downloadsIndicatorNotificationRight { + from { opacity: 0; -moz-transform: translate(-128px, 128px) scale(8); } + 20% { opacity: .85; -moz-animation-timing-function: ease-out; } + to { opacity: 0; -moz-transform: translate(0) scale(1); } +} + +@-moz-keyframes downloadsIndicatorNotificationLeft { + from { opacity: 0; -moz-transform: translate(128px, 128px) scale(8); } + 20% { opacity: .85; -moz-animation-timing-function: ease-out; } + to { opacity: 0; -moz-transform: translate(0) scale(1); } +} + +#downloads-indicator[notification] > #downloads-indicator-anchor > #downloads-indicator-notification { + -moz-animation-name: downloadsIndicatorNotificationRight; + -moz-animation-duration: 1s; +} + +#downloads-indicator[notification]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-notification { + -moz-animation-name: downloadsIndicatorNotificationLeft; +} + +/*** Progress bar and text ***/ + +#downloads-indicator-counter { + height: 12px; + margin: 0; + color: #FFCF00; + font-size: 10px; + line-height: 10px; + text-align: center; +} + +#downloads-indicator-progress { + width: 24px; + height: 4px; + min-width: 0; + min-height: 0; + margin-top: 1px; + margin-bottom: 2px; + border-radius: 2px; + border: 1px solid #FFCF00; +} + +#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: #000000; + 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: #000000; +}