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