browser/themes/windows/downloads/indicator.css@6474c204b198
browser/themes/windows/downloads/indicator.css
Wed, 31 Dec 2014 06:09:35 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:09:35 +0100
- changeset 0
- 6474c204b198
- permissions
- -rw-r--r--
Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.
1 /* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
5 /*** Status and progress indicator ***/
7 #downloads-animation-container {
8 min-height: 1px;
9 min-width: 1px;
10 height: 1px;
11 margin-bottom: -1px;
12 /* Makes the outermost animation container element positioned, so that its
13 contents are rendered over the main browser window in the Z order.
14 This is required by the animated event notification. */
15 position: relative;
16 /* The selected tab may overlap #downloads-indicator-notification */
17 z-index: 5;
18 }
20 /*** Main indicator icon ***/
22 #downloads-indicator-icon {
23 background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
24 0, 198, 18, 180) center no-repeat;
25 min-width: 18px;
26 min-height: 18px;
27 }
29 toolbar[brighttext] #downloads-button:not([attention]) > #downloads-indicator-anchor > #downloads-indicator-icon {
30 background: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"),
31 0, 198, 18, 180) center no-repeat;
32 }
34 #downloads-button[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
35 background-image: url("chrome://browser/skin/downloads/download-glow.png");
36 }
38 #downloads-button[cui-areatype="menu-panel"][attention] {
39 list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png");
40 -moz-image-region: auto;
41 }
43 %ifdef WINDOWS_AERO
44 @media (-moz-os-version: windows-vista),
45 (-moz-os-version: windows-win7) {
46 %endif
47 #downloads-button[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
48 background-image: url("chrome://browser/skin/downloads/download-glow-XPVista7.png");
49 }
51 #downloads-button[cui-areatype="menu-panel"][attention] {
52 list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel-XPVista7.png");
53 }
54 %ifdef WINDOWS_AERO
55 }
56 %endif
58 /* In the next few rules, we use :not([counter]) as a shortcut that is
59 equivalent to -moz-any([progress], [paused]). */
61 #downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
62 background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
63 0, 198, 18, 180) center no-repeat;
64 background-size: 12px;
65 }
67 toolbar[brighttext] #downloads-button:not([counter]):not([attention]) > #downloads-indicator-anchor > #downloads-button-progress-area > #downloads-indicator-counter {
68 background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 0, 198, 18, 180);
69 }
71 #downloads-button:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
72 background-image: url("chrome://browser/skin/downloads/download-glow.png");
73 }
75 /*** Download notifications ***/
77 #downloads-indicator-notification {
78 opacity: 0;
79 background-size: 16px;
80 background-position: center;
81 background-repeat: no-repeat;
82 width: 16px;
83 height: 16px;
84 }
86 @keyframes downloadsIndicatorNotificationStartRight {
87 from { opacity: 0; transform: translate(-128px, 128px) scale(8); }
88 20% { opacity: .85; animation-timing-function: ease-out; }
89 to { opacity: 0; transform: translate(0) scale(1); }
90 }
92 @keyframes downloadsIndicatorNotificationStartLeft {
93 from { opacity: 0; transform: translate(128px, 128px) scale(8); }
94 20% { opacity: .85; animation-timing-function: ease-out; }
95 to { opacity: 0; transform: translate(0) scale(1); }
96 }
98 #downloads-notification-anchor[notification="start"] > #downloads-indicator-notification {
99 background-image: url("chrome://browser/skin/downloads/download-notification-start.png");
100 animation-name: downloadsIndicatorNotificationStartRight;
101 animation-duration: 1s;
102 }
104 #downloads-notification-anchor[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-notification {
105 animation-name: downloadsIndicatorNotificationStartLeft;
106 }
108 @keyframes downloadsIndicatorNotificationFinish {
109 from { opacity: 0; transform: scale(1); }
110 20% { opacity: .65; animation-timing-function: ease-in; }
111 to { opacity: 0; transform: scale(8); }
112 }
114 #downloads-notification-anchor[notification="finish"] > #downloads-indicator-notification {
115 background-image: url("chrome://browser/skin/downloads/download-notification-finish.png");
116 animation-name: downloadsIndicatorNotificationFinish;
117 animation-duration: 1s;
118 }
120 /*** Progress bar and text ***/
122 #downloads-indicator-counter {
123 height: 9px;
124 margin: -3px 0px 0px 0px;
125 color: hsl(0,0%,30%);
126 text-shadow: hsla(0,0%,100%,.5) 0 1px;
127 font-size: 9px;
128 line-height: 9px;
129 text-align: center;
130 }
132 toolbar[brighttext] #downloads-indicator-counter {
133 color: white;
134 text-shadow: 0 0 1px rgba(0,0,0,.7),
135 0 1px 1.5px rgba(0,0,0,.5);
136 }
138 #downloads-indicator-progress {
139 width: 16px;
140 height: 5px;
141 min-width: 0;
142 min-height: 0;
143 margin-top: 1px;
144 margin-bottom: 2px;
145 border-radius: 2px;
146 box-shadow: 0 1px 0 hsla(0,0%,100%,.4);
147 }
149 #downloads-indicator-progress > .progress-bar {
150 -moz-appearance: none;
151 min-width: 0;
152 min-height: 0;
153 /* The background-clip: border-box; and background-image: none; are there to expand the background-color behind the border */
154 background-clip: padding-box, border-box;
155 background-color: rgb(90, 201, 66);
156 background-image: linear-gradient(transparent 1px, rgba(255, 255, 255, 0.4) 1px, rgba(255, 255, 255, 0.4) 2px, transparent 2px), none;
157 border: 1px solid;
158 border-color: rgba(0,43,86,.6) rgba(0,43,86,.4) rgba(0,43,86,.4);
159 border-radius: 2px 0 0 2px;
160 }
162 #downloads-indicator-progress > .progress-remainder {
163 -moz-appearance: none;
164 min-width: 0;
165 min-height: 0;
166 background-image: linear-gradient(#505050, #575757);
167 border: 1px solid;
168 border-color: hsla(0,0%,0%,.6) hsla(0,0%,0%,.4) hsla(0,0%,0%,.4);
169 -moz-border-start: none;
170 border-radius: 0 2px 2px 0;
171 }
173 #downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
174 background-color: rgb(220, 230, 81);
175 }
177 #downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
178 background-image: linear-gradient(#4b5000, #515700);
179 }
