1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/themes/windows/downloads/indicator.css Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,179 @@
1.4 +/* This Source Code Form is subject to the terms of the Mozilla Public
1.5 + * License, v. 2.0. If a copy of the MPL was not distributed with this
1.6 + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
1.7 +
1.8 +/*** Status and progress indicator ***/
1.9 +
1.10 +#downloads-animation-container {
1.11 + min-height: 1px;
1.12 + min-width: 1px;
1.13 + height: 1px;
1.14 + margin-bottom: -1px;
1.15 + /* Makes the outermost animation container element positioned, so that its
1.16 + contents are rendered over the main browser window in the Z order.
1.17 + This is required by the animated event notification. */
1.18 + position: relative;
1.19 + /* The selected tab may overlap #downloads-indicator-notification */
1.20 + z-index: 5;
1.21 +}
1.22 +
1.23 +/*** Main indicator icon ***/
1.24 +
1.25 +#downloads-indicator-icon {
1.26 + background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
1.27 + 0, 198, 18, 180) center no-repeat;
1.28 + min-width: 18px;
1.29 + min-height: 18px;
1.30 +}
1.31 +
1.32 +toolbar[brighttext] #downloads-button:not([attention]) > #downloads-indicator-anchor > #downloads-indicator-icon {
1.33 + background: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"),
1.34 + 0, 198, 18, 180) center no-repeat;
1.35 +}
1.36 +
1.37 +#downloads-button[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
1.38 + background-image: url("chrome://browser/skin/downloads/download-glow.png");
1.39 +}
1.40 +
1.41 +#downloads-button[cui-areatype="menu-panel"][attention] {
1.42 + list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png");
1.43 + -moz-image-region: auto;
1.44 +}
1.45 +
1.46 +%ifdef WINDOWS_AERO
1.47 +@media (-moz-os-version: windows-vista),
1.48 + (-moz-os-version: windows-win7) {
1.49 +%endif
1.50 + #downloads-button[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
1.51 + background-image: url("chrome://browser/skin/downloads/download-glow-XPVista7.png");
1.52 + }
1.53 +
1.54 + #downloads-button[cui-areatype="menu-panel"][attention] {
1.55 + list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel-XPVista7.png");
1.56 + }
1.57 +%ifdef WINDOWS_AERO
1.58 +}
1.59 +%endif
1.60 +
1.61 +/* In the next few rules, we use :not([counter]) as a shortcut that is
1.62 + equivalent to -moz-any([progress], [paused]). */
1.63 +
1.64 +#downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
1.65 + background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
1.66 + 0, 198, 18, 180) center no-repeat;
1.67 + background-size: 12px;
1.68 +}
1.69 +
1.70 +toolbar[brighttext] #downloads-button:not([counter]):not([attention]) > #downloads-indicator-anchor > #downloads-button-progress-area > #downloads-indicator-counter {
1.71 + background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 0, 198, 18, 180);
1.72 +}
1.73 +
1.74 +#downloads-button:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
1.75 + background-image: url("chrome://browser/skin/downloads/download-glow.png");
1.76 +}
1.77 +
1.78 +/*** Download notifications ***/
1.79 +
1.80 +#downloads-indicator-notification {
1.81 + opacity: 0;
1.82 + background-size: 16px;
1.83 + background-position: center;
1.84 + background-repeat: no-repeat;
1.85 + width: 16px;
1.86 + height: 16px;
1.87 +}
1.88 +
1.89 +@keyframes downloadsIndicatorNotificationStartRight {
1.90 + from { opacity: 0; transform: translate(-128px, 128px) scale(8); }
1.91 + 20% { opacity: .85; animation-timing-function: ease-out; }
1.92 + to { opacity: 0; transform: translate(0) scale(1); }
1.93 +}
1.94 +
1.95 +@keyframes downloadsIndicatorNotificationStartLeft {
1.96 + from { opacity: 0; transform: translate(128px, 128px) scale(8); }
1.97 + 20% { opacity: .85; animation-timing-function: ease-out; }
1.98 + to { opacity: 0; transform: translate(0) scale(1); }
1.99 +}
1.100 +
1.101 +#downloads-notification-anchor[notification="start"] > #downloads-indicator-notification {
1.102 + background-image: url("chrome://browser/skin/downloads/download-notification-start.png");
1.103 + animation-name: downloadsIndicatorNotificationStartRight;
1.104 + animation-duration: 1s;
1.105 +}
1.106 +
1.107 +#downloads-notification-anchor[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-notification {
1.108 + animation-name: downloadsIndicatorNotificationStartLeft;
1.109 +}
1.110 +
1.111 +@keyframes downloadsIndicatorNotificationFinish {
1.112 + from { opacity: 0; transform: scale(1); }
1.113 + 20% { opacity: .65; animation-timing-function: ease-in; }
1.114 + to { opacity: 0; transform: scale(8); }
1.115 +}
1.116 +
1.117 +#downloads-notification-anchor[notification="finish"] > #downloads-indicator-notification {
1.118 + background-image: url("chrome://browser/skin/downloads/download-notification-finish.png");
1.119 + animation-name: downloadsIndicatorNotificationFinish;
1.120 + animation-duration: 1s;
1.121 +}
1.122 +
1.123 +/*** Progress bar and text ***/
1.124 +
1.125 +#downloads-indicator-counter {
1.126 + height: 9px;
1.127 + margin: -3px 0px 0px 0px;
1.128 + color: hsl(0,0%,30%);
1.129 + text-shadow: hsla(0,0%,100%,.5) 0 1px;
1.130 + font-size: 9px;
1.131 + line-height: 9px;
1.132 + text-align: center;
1.133 +}
1.134 +
1.135 +toolbar[brighttext] #downloads-indicator-counter {
1.136 + color: white;
1.137 + text-shadow: 0 0 1px rgba(0,0,0,.7),
1.138 + 0 1px 1.5px rgba(0,0,0,.5);
1.139 +}
1.140 +
1.141 +#downloads-indicator-progress {
1.142 + width: 16px;
1.143 + height: 5px;
1.144 + min-width: 0;
1.145 + min-height: 0;
1.146 + margin-top: 1px;
1.147 + margin-bottom: 2px;
1.148 + border-radius: 2px;
1.149 + box-shadow: 0 1px 0 hsla(0,0%,100%,.4);
1.150 +}
1.151 +
1.152 +#downloads-indicator-progress > .progress-bar {
1.153 + -moz-appearance: none;
1.154 + min-width: 0;
1.155 + min-height: 0;
1.156 + /* The background-clip: border-box; and background-image: none; are there to expand the background-color behind the border */
1.157 + background-clip: padding-box, border-box;
1.158 + background-color: rgb(90, 201, 66);
1.159 + background-image: linear-gradient(transparent 1px, rgba(255, 255, 255, 0.4) 1px, rgba(255, 255, 255, 0.4) 2px, transparent 2px), none;
1.160 + border: 1px solid;
1.161 + border-color: rgba(0,43,86,.6) rgba(0,43,86,.4) rgba(0,43,86,.4);
1.162 + border-radius: 2px 0 0 2px;
1.163 +}
1.164 +
1.165 +#downloads-indicator-progress > .progress-remainder {
1.166 + -moz-appearance: none;
1.167 + min-width: 0;
1.168 + min-height: 0;
1.169 + background-image: linear-gradient(#505050, #575757);
1.170 + border: 1px solid;
1.171 + border-color: hsla(0,0%,0%,.6) hsla(0,0%,0%,.4) hsla(0,0%,0%,.4);
1.172 + -moz-border-start: none;
1.173 + border-radius: 0 2px 2px 0;
1.174 +}
1.175 +
1.176 +#downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
1.177 + background-color: rgb(220, 230, 81);
1.178 +}
1.179 +
1.180 +#downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
1.181 + background-image: linear-gradient(#4b5000, #515700);
1.182 +}
