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 | ||
38bd4bf1 RK |
5 | /* === BEGIN indicator.inc.css === */ |
6 | ||
7 | #downloads-indicator-progress-icon { | |
1b1f3d09 RK |
8 | background: var(--downloads-indicator-image) bottom no-repeat; |
9 | -moz-context-properties: fill; | |
10 | fill: var(--toolbarbutton-icon-fill-attention); | |
38bd4bf1 RK |
11 | background-size: 18px; |
12 | margin-top: 18px; | |
13 | /* From javascript side we use animation delay from 0s to -100s to show | |
14 | * corresponding frames needed for progress. | |
15 | * animation-delay is set to a positive value to make nothing shown. | |
16 | */ | |
17 | animation-play-state: paused; | |
18 | animation-delay: 1s; | |
19 | animation-duration: 100s; | |
20 | animation-timing-function: linear; | |
21 | animation-name: indicatorArrowProgress; | |
22 | } | |
23 | /* | |
24 | toolbar[brighttext] #downloads-indicator-progress-icon { | |
38bd4bf1 RK |
25 | animation-name: indicatorArrowProgressDark; |
26 | } | |
27 | */ | |
28 | @keyframes indicatorArrowProgress { | |
29 | 0% { | |
30 | margin-top: 12px; | |
31 | filter: brightness(1.2); | |
32 | } | |
33 | 100% { | |
34 | margin-top: 2px; | |
35 | filter: brightness(1); | |
36 | } | |
37 | } | |
38 | /* | |
39 | @keyframes indicatorArrowProgressDark { | |
40 | 0% { | |
41 | margin-top: 12px; | |
42 | filter: brightness(0.7); | |
43 | } | |
44 | 100% { | |
45 | margin-top: 2px; | |
46 | filter: brightness(1); | |
47 | } | |
48 | } | |
49 | */ | |
50 | #downloads-button[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-icon { | |
51 | animation-name: downloadsIndicatorStartJump; | |
52 | /* Upon changing the overall duration below, please keep the delay time of | |
53 | setTimeout() identical in indicator.js for this animation. */ | |
54 | animation-duration: 0.5s; | |
55 | animation-delay: 1s; | |
56 | animation-iteration-count: 2; | |
57 | } | |
58 | ||
59 | @keyframes downloadsIndicatorStartJump { | |
60 | 0% { | |
61 | transform: translateY(0); | |
62 | animation-timing-function: ease-out; | |
63 | } | |
64 | 50% { | |
65 | transform: translateY(-3px); | |
66 | animation-timing-function: ease-in; | |
67 | } | |
68 | 100% { | |
69 | transform: translateY(0); | |
70 | } | |
71 | } | |
72 | /* === END indicator.inc.css === */ | |
73 | ||
cf264274 RK |
74 | /*** Status and progress indicator ***/ |
75 | ||
3a0880a9 RK |
76 | #downloads-animation-container { |
77 | min-height: 1px; | |
78 | min-width: 1px; | |
79 | height: 1px; | |
80 | margin-bottom: -1px; | |
81 | /* Makes the outermost animation container element positioned, so that its | |
82 | contents are rendered over the main browser window in the Z order. | |
83 | This is required by the animated event notification. */ | |
cf264274 | 84 | position: relative; |
3a0880a9 RK |
85 | /* The selected tab may overlap #downloads-indicator-notification */ |
86 | z-index: 5; | |
cf264274 RK |
87 | } |
88 | ||
89 | /*** Main indicator icon ***/ | |
90 | ||
1b1f3d09 RK |
91 | #downloads-button { |
92 | --downloads-indicator-image: url("chrome://browser/skin/download.svg"); | |
93 | } | |
2e389898 | 94 | |
cf264274 | 95 | #downloads-indicator-icon { |
38bd4bf1 | 96 | background: var(--downloads-indicator-image) center no-repeat; |
1b1f3d09 RK |
97 | -moz-context-properties: fill; |
98 | fill: var(--toolbarbutton-icon-fill); | |
2e389898 RK |
99 | width: 18px; |
100 | height: 18px; | |
101 | background-size: 18px; | |
cf264274 RK |
102 | } |
103 | ||
00f971bc RK |
104 | #downloads-button:hover > #downloads-indicator-anchor > #downloads-indicator-icon, |
105 | #downloads-button[open="true"] > #downloads-indicator-anchor > #downloads-indicator-icon, | |
106 | #downloads-button[attention]:hover > #downloads-indicator-anchor > #downloads-indicator-icon { | |
1b1f3d09 | 107 | fill: var(--toolbarbutton-icon-fill-inverted); |
cf264274 RK |
108 | color: #000000; |
109 | } | |
110 | ||
7c1e433b | 111 | toolbar[brighttext] #downloads-button:not([attention="success"]) > #downloads-indicator-anchor > #downloads-indicator-icon { |
1b1f3d09 | 112 | /* fill: var(--toolbarbutton-icon-fill-inverted);*/ |
cf264274 RK |
113 | } |
114 | ||
7c1e433b RK |
115 | #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, |
116 | #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { | |
117 | display: -moz-box; | |
d23bf94a RK |
118 | height: 8px; |
119 | width: 8px; | |
120 | min-width: 0; | |
121 | border-radius: 50%; | |
122 | /* "!important" is necessary to override the rule in toolbarbutton.css */ | |
123 | margin-top: -1px !important; | |
124 | margin-right: -2px !important; | |
125 | } | |
126 | ||
127 | #downloads-button[cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { | |
128 | height: 7px; | |
129 | width: 7px; | |
7c1e433b RK |
130 | } |
131 | ||
132 | #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { | |
d23bf94a | 133 | background: #FF0000; |
7c1e433b RK |
134 | } |
135 | ||
136 | #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { | |
d23bf94a | 137 | background: #FFCF00; |
7c1e433b RK |
138 | } |
139 | ||
140 | #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive, | |
141 | #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive { | |
142 | filter: none; | |
143 | } | |
144 | ||
145 | #downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon { | |
1b1f3d09 | 146 | fill: var(--toolbarbutton-icon-fill-attention); |
cf264274 RK |
147 | } |
148 | ||
7c1e433b | 149 | #downloads-button[cui-areatype="menu-panel"][attention="success"] { |
45dc7657 RK |
150 | list-style-image: url("chrome://browser/skin/downloads/download-glow-menuPanel.png"); |
151 | -moz-image-region: auto; | |
152 | } | |
153 | ||
cf264274 RK |
154 | /*** Download notifications ***/ |
155 | ||
156 | #downloads-indicator-notification { | |
157 | opacity: 0; | |
158 | background-size: 16px; | |
159 | background-position: center; | |
160 | background-repeat: no-repeat; | |
3a0880a9 RK |
161 | width: 16px; |
162 | height: 16px; | |
cf264274 RK |
163 | } |
164 | ||
165 | @keyframes downloadsIndicatorNotificationStartRight { | |
166 | from { opacity: 0; transform: translate(-128px, 128px) scale(8); } | |
167 | 20% { opacity: .85; animation-timing-function: ease-out; } | |
168 | to { opacity: 0; transform: translate(0) scale(1); } | |
169 | } | |
170 | ||
171 | @keyframes downloadsIndicatorNotificationStartLeft { | |
172 | from { opacity: 0; transform: translate(128px, 128px) scale(8); } | |
173 | 20% { opacity: .85; animation-timing-function: ease-out; } | |
174 | to { opacity: 0; transform: translate(0) scale(1); } | |
175 | } | |
176 | ||
3a0880a9 | 177 | #downloads-notification-anchor[notification="start"] > #downloads-indicator-notification { |
cf264274 RK |
178 | background-image: url("chrome://browser/skin/downloads/download-notification-start.png"); |
179 | animation-name: downloadsIndicatorNotificationStartRight; | |
180 | animation-duration: 1s; | |
181 | } | |
182 | ||
3a0880a9 | 183 | #downloads-notification-anchor[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-notification { |
cf264274 RK |
184 | animation-name: downloadsIndicatorNotificationStartLeft; |
185 | } | |
186 | ||
187 | @keyframes downloadsIndicatorNotificationFinish { | |
188 | from { opacity: 0; transform: scale(1); } | |
189 | 20% { opacity: .65; animation-timing-function: ease-in; } | |
190 | to { opacity: 0; transform: scale(8); } | |
191 | } | |
192 | ||
3a0880a9 | 193 | #downloads-notification-anchor[notification="finish"] > #downloads-indicator-notification { |
cf264274 RK |
194 | background-image: url("chrome://browser/skin/downloads/download-notification-finish.png"); |
195 | animation-name: downloadsIndicatorNotificationFinish; | |
196 | animation-duration: 1s; | |
197 | } | |
198 | ||
3a0880a9 | 199 | toolbar[mode="full"] > #downloads-button > .toolbarbutton-text { |
cf264274 RK |
200 | margin: 0; |
201 | text-align: center; | |
202 | } |