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