Commit | Line | Data |
---|---|---|
cf264274 RK |
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/. */ | |
4 | ||
5 | /*** Status and progress indicator ***/ | |
6 | ||
7 | #downloads-indicator-anchor { | |
8 | /* Makes the outermost stack element positioned, so that its contents are | |
9 | rendered over the main browser window in the Z order. This is required by | |
10 | the animated event notification. */ | |
11 | position: relative; | |
12 | } | |
13 | ||
14 | /*** Main indicator icon ***/ | |
15 | ||
16 | #downloads-indicator-icon { | |
17 | background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"), | |
18 | 0, 108, 18, 90) center no-repeat; | |
19 | min-width: 18px; | |
20 | min-height: 18px; | |
21 | } | |
22 | ||
23 | #downloads-indicator:hover > #downloads-indicator-anchor > #downloads-indicator-icon, | |
24 | #downloads-indicator[open="true"] > #downloads-indicator-anchor > #downloads-indicator-icon, | |
00f971bc RK |
25 | #downloads-indicator[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-icon, |
26 | #downloads-button:hover > #downloads-indicator-anchor > #downloads-indicator-icon, | |
27 | #downloads-button[open="true"] > #downloads-indicator-anchor > #downloads-indicator-icon, | |
28 | #downloads-button[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-icon { | |
cf264274 RK |
29 | background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"), |
30 | 18, 108, 36, 90) center no-repeat; | |
31 | color: #000000; | |
32 | } | |
33 | ||
34 | #downloads-indicator-icon:-moz-lwtheme-brighttext { | |
35 | /* background: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), | |
36 | 0, 108, 18, 90) center no-repeat;*/ | |
37 | } | |
38 | ||
00f971bc RK |
39 | #downloads-indicator[attention] > #downloads-indicator-anchor > #downloads-indicator-icon, |
40 | #downloads-button[attention] > #downloads-indicator-anchor > #downloads-indicator-icon { | |
cf264274 RK |
41 | background-image: url("chrome://browser/skin/downloads/download-glow.png"); |
42 | } | |
43 | ||
44 | /* In the next few rules, we use :not([counter]) as a shortcut that is | |
45 | equivalent to -moz-any([progress], [paused]). */ | |
46 | ||
00f971bc RK |
47 | #downloads-indicator:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter, |
48 | #downloads-button:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { | |
cf264274 RK |
49 | background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"), |
50 | 0, 108, 18, 90) center no-repeat; | |
51 | background-size: 12px; | |
52 | } | |
53 | ||
00f971bc RK |
54 | #downloads-indicator:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter, |
55 | #downloads-button:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { | |
cf264274 RK |
56 | background-image: url("chrome://browser/skin/downloads/download-glow.png"); |
57 | } | |
58 | ||
59 | #downloads-indicator:not([counter]):hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter, | |
60 | #downloads-indicator[open="true"]:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter, | |
00f971bc RK |
61 | #downloads-indicator:not([counter])[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter, |
62 | #downloads-button:not([counter]):hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter, | |
63 | #downloads-button[open="true"]:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter, | |
64 | #downloads-button:not([counter])[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { | |
cf264274 RK |
65 | background: -moz-image-rect(url("chrome://browser/skin/FxToolbar.png"), |
66 | 18, 108, 36, 90) center no-repeat; | |
67 | background-size: 12px; | |
68 | } | |
69 | ||
70 | /*** Download notifications ***/ | |
71 | ||
72 | #downloads-indicator-notification { | |
73 | opacity: 0; | |
74 | background-size: 16px; | |
75 | background-position: center; | |
76 | background-repeat: no-repeat; | |
77 | } | |
78 | ||
79 | @keyframes downloadsIndicatorNotificationStartRight { | |
80 | from { opacity: 0; transform: translate(-128px, 128px) scale(8); } | |
81 | 20% { opacity: .85; animation-timing-function: ease-out; } | |
82 | to { opacity: 0; transform: translate(0) scale(1); } | |
83 | } | |
84 | ||
85 | @keyframes downloadsIndicatorNotificationStartLeft { | |
86 | from { opacity: 0; transform: translate(128px, 128px) scale(8); } | |
87 | 20% { opacity: .85; animation-timing-function: ease-out; } | |
88 | to { opacity: 0; transform: translate(0) scale(1); } | |
89 | } | |
90 | ||
00f971bc RK |
91 | #downloads-indicator[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-notification, |
92 | #downloads-button[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-notification { | |
cf264274 RK |
93 | background-image: url("chrome://browser/skin/downloads/download-notification-start.png"); |
94 | animation-name: downloadsIndicatorNotificationStartRight; | |
95 | animation-duration: 1s; | |
96 | } | |
97 | ||
00f971bc RK |
98 | #downloads-indicator[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-notification, |
99 | #downloads-button[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-notification { | |
cf264274 RK |
100 | animation-name: downloadsIndicatorNotificationStartLeft; |
101 | } | |
102 | ||
103 | @keyframes downloadsIndicatorNotificationFinish { | |
104 | from { opacity: 0; transform: scale(1); } | |
105 | 20% { opacity: .65; animation-timing-function: ease-in; } | |
106 | to { opacity: 0; transform: scale(8); } | |
107 | } | |
108 | ||
00f971bc RK |
109 | #downloads-indicator[notification="finish"] > #downloads-indicator-anchor > #downloads-indicator-notification, |
110 | #downloads-button[notification="finish"] > #downloads-indicator-anchor > #downloads-indicator-notification { | |
cf264274 RK |
111 | background-image: url("chrome://browser/skin/downloads/download-notification-finish.png"); |
112 | animation-name: downloadsIndicatorNotificationFinish; | |
113 | animation-duration: 1s; | |
114 | } | |
115 | ||
116 | /*** Progress bar and text ***/ | |
117 | ||
118 | #downloads-indicator-counter { | |
119 | height: 9px; | |
120 | margin: -3px 0 0; | |
121 | color: #FFCF00; | |
122 | font-size: 9px; | |
123 | line-height: 9px; | |
124 | text-align: center; | |
125 | } | |
126 | ||
127 | #downloads-indicator-counter:-moz-lwtheme-brighttext { | |
128 | /* color: white; | |
129 | text-shadow: 0 0 1px rgba(0,0,0,.7), | |
130 | 0 1px 1.5px rgba(0,0,0,.5);*/ | |
131 | } | |
132 | ||
133 | #downloads-indicator[counter]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter, | |
00f971bc RK |
134 | #downloads-indicator[counter][open="true"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter, |
135 | #downloads-button[counter]:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter, | |
136 | #downloads-button[counter][open="true"] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { | |
cf264274 RK |
137 | color: #000000; |
138 | } | |
139 | ||
140 | #downloads-indicator-progress { | |
141 | width: 16px; | |
142 | height: 5px; | |
143 | min-width: 0; | |
144 | min-height: 0; | |
145 | margin-top: 1px; | |
146 | margin-bottom: 2px; | |
147 | border-radius: 2px; | |
148 | background-color: #795900; | |
149 | } | |
150 | ||
151 | #downloads-indicator-progress > .progress-bar { | |
152 | -moz-appearance: none; | |
153 | min-width: 0; | |
154 | min-height: 0; | |
155 | background-color: #008484; | |
156 | border-radius: 2px 0 0 2px; | |
157 | } | |
158 | ||
159 | #downloads-indicator-progress > .progress-remainder { | |
160 | min-width: 0; | |
161 | min-height: 0; | |
162 | background-color: #A09090; | |
163 | border-radius: 0 2px 2px 0; | |
164 | } | |
165 | ||
00f971bc RK |
166 | #downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar, |
167 | #downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar { | |
cf264274 RK |
168 | background-color: #8050B0; |
169 | } | |
170 | ||
00f971bc RK |
171 | #downloads-indicator[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder, |
172 | #downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder { | |
cf264274 RK |
173 | background-color: #404048; |
174 | } | |
175 | ||
176 | toolbar[mode="full"] > #downloads-indicator > .toolbarbutton-text { | |
177 | margin: 0; | |
178 | text-align: center; | |
179 | } |