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