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