From: Robert Kaiser Date: Fri, 26 Jul 2013 23:23:41 +0000 (+0200) Subject: add new download indicator file so that newer versions (25, maybe even 24) don't... X-Git-Tag: LCARStrek-2.20~1 X-Git-Url: https://git-public.kairo.at/?a=commitdiff_plain;h=cf264274ec0604c0d8308477bb9f0609cfa8c562;p=themes.git add new download indicator file so that newer versions (25, maybe even 24) don't look bad --- diff --git a/LCARStrek/browser/downloads/indicator.css b/LCARStrek/browser/downloads/indicator.css new file mode 100644 index 00000000..c42bdfa1 --- /dev/null +++ b/LCARStrek/browser/downloads/indicator.css @@ -0,0 +1,163 @@ +/* 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/. */ + +/*** 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; +} + +toolbar[mode="full"] > #downloads-indicator > .toolbarbutton-text { + margin: 0; + text-align: center; +}