Merge "Special:Upload should not crash on failing previews"
[mediawiki.git] / resources / lib / oojs-ui / oojs-ui-toolbars-apex.css
blobd781e688065ef2cb367e5314c60d2bab7e1264f1
1 /*!
2 * OOjs UI v0.18.4-fix (d4045dee45)
3 * https://www.mediawiki.org/wiki/OOjs_UI
5 * Copyright 2011–2017 OOjs UI Team and other contributors.
6 * Released under the MIT license
7 * http://oojs.mit-license.org
9 * Date: 2017-01-19T20:22:32Z
11 .oo-ui-popupTool .oo-ui-popupWidget-popup,
12 .oo-ui-popupTool .oo-ui-popupWidget-anchor {
13 z-index: 4;
15 .oo-ui-popupTool .oo-ui-popupWidget {
16 /* @noflip */
17 margin-left: 1.25em;
19 .oo-ui-toolGroupTool > .oo-ui-popupToolGroup {
20 border: 0;
21 border-radius: 0;
22 margin: 0;
24 .oo-ui-toolGroupTool:first-child > .oo-ui-popupToolGroup {
25 border-top-left-radius: 0.3125em;
26 border-bottom-left-radius: 0.3125em;
28 .oo-ui-toolGroupTool:last-child > .oo-ui-popupToolGroup {
29 border-top-right-radius: 0.3125em;
30 border-bottom-right-radius: 0.3125em;
32 .oo-ui-toolGroupTool > .oo-ui-popupToolGroup > .oo-ui-popupToolGroup-handle {
33 height: 1.875em;
34 padding: 0.3125em;
36 .oo-ui-toolGroupTool > .oo-ui-popupToolGroup > .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon {
37 height: 1.875em;
38 width: 1.875em;
40 .oo-ui-toolGroupTool > .oo-ui-popupToolGroup.oo-ui-labelElement > .oo-ui-popupToolGroup-handle .oo-ui-labelElement-label {
41 line-height: 2.1em;
43 .oo-ui-toolGroup {
44 display: inline-block;
45 vertical-align: middle;
46 margin: 0.375em;
47 border-radius: 0.3125em;
48 border: 1px solid transparent;
49 -webkit-transition: border-color 250ms ease;
50 -moz-transition: border-color 250ms ease;
51 transition: border-color 250ms ease;
53 .oo-ui-toolGroup-empty {
54 display: none;
56 .oo-ui-toolGroup .oo-ui-tool-link {
57 text-decoration: none;
58 cursor: pointer;
60 .oo-ui-toolGroup.oo-ui-widget-disabled .oo-ui-tool-link,
61 .oo-ui-toolGroup .oo-ui-widget-disabled > .oo-ui-tool-link {
62 outline: 0;
63 cursor: default;
65 .oo-ui-toolbar-narrow .oo-ui-toolGroup + .oo-ui-toolGroup {
66 margin-left: 0;
68 .oo-ui-toolGroup.oo-ui-widget-enabled:hover {
69 border-color: rgba(0, 0, 0, 0.1);
71 .oo-ui-toolGroup.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-title {
72 color: #000;
74 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool {
75 display: inline-block;
76 position: relative;
77 vertical-align: top;
79 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool > .oo-ui-tool-link {
80 display: block;
82 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool > .oo-ui-tool-link .oo-ui-tool-accel {
83 display: none;
85 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool.oo-ui-iconElement > .oo-ui-tool-link .oo-ui-iconElement-icon {
86 display: inline-block;
87 vertical-align: top;
89 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool.oo-ui-iconElement > .oo-ui-tool-link .oo-ui-tool-title {
90 display: none;
92 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool.oo-ui-iconElement.oo-ui-tool-with-label > .oo-ui-tool-link .oo-ui-tool-title {
93 display: inline;
95 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool {
96 margin: -1px 0 -1px -1px;
97 border: 1px solid transparent;
99 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool:first-child {
100 border-top-left-radius: 0.3125em;
101 border-bottom-left-radius: 0.3125em;
103 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool:last-child {
104 margin-right: -1px;
105 border-top-right-radius: 0.3125em;
106 border-bottom-right-radius: 0.3125em;
108 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool > .oo-ui-tool-link {
109 height: 1.875em;
110 padding: 0.3125em;
112 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool > .oo-ui-tool-link .oo-ui-iconElement-icon {
113 height: 1.875em;
114 width: 1.875em;
116 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool > .oo-ui-tool-link .oo-ui-tool-title {
117 line-height: 2.1em;
119 .oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool.oo-ui-widget-enabled:hover {
120 border-color: rgba(0, 0, 0, 0.2);
122 .oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool.oo-ui-tool-active.oo-ui-widget-enabled {
123 border-color: rgba(0, 0, 0, 0.2);
124 box-shadow: inset 0 0.0875em 0.0875em 0 rgba(0, 0, 0, 0.07);
125 background-color: #f8fbfd;
126 background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0, #F1F7FB), color-stop(100%, #fff));
127 background-image: -webkit-linear-gradient(top, #F1F7FB 0, #fff 100%);
128 background-image: -moz-linear-gradient(top, #F1F7FB 0, #fff 100%);
129 background-image: linear-gradient(to bottom, #F1F7FB 0, #fff 100%);
130 -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff1f7fb', endColorstr='#ffffffff' )";
132 .oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool.oo-ui-tool-active.oo-ui-widget-enabled + .oo-ui-tool-active.oo-ui-widget-enabled {
133 border-left-color: rgba(0, 0, 0, 0.1);
135 .oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool.oo-ui-widget-disabled > .oo-ui-tool-link:focus {
136 outline: 0;
138 .oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool.oo-ui-widget-disabled > .oo-ui-tool-link .oo-ui-tool-title {
139 color: #ccc;
141 .oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool.oo-ui-widget-disabled > .oo-ui-tool-link .oo-ui-iconElement-icon {
142 opacity: 0.2;
144 .oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool.oo-ui-widget-enabled:hover > .oo-ui-tool-link .oo-ui-iconElement-icon {
145 opacity: 1;
147 .oo-ui-barToolGroup.oo-ui-widget-disabled > .oo-ui-toolGroup-tools > .oo-ui-tool:focus {
148 outline: 0;
150 .oo-ui-barToolGroup.oo-ui-widget-disabled > .oo-ui-toolGroup-tools > .oo-ui-tool > .oo-ui-tool-link:focus {
151 outline: 0;
153 .oo-ui-barToolGroup.oo-ui-widget-disabled > .oo-ui-toolGroup-tools > .oo-ui-tool > .oo-ui-tool-link .oo-ui-tool-title {
154 color: #ccc;
156 .oo-ui-barToolGroup.oo-ui-widget-disabled > .oo-ui-toolGroup-tools > .oo-ui-tool > .oo-ui-tool-link .oo-ui-iconElement-icon {
157 opacity: 0.2;
159 .oo-ui-popupToolGroup {
160 position: relative;
161 height: 2.5em;
162 min-width: 2.5em;
164 .oo-ui-popupToolGroup-handle {
165 display: block;
166 cursor: pointer;
168 .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator,
169 .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon {
170 position: absolute;
172 .oo-ui-popupToolGroup.oo-ui-widget-disabled .oo-ui-popupToolGroup-handle {
173 outline: 0;
174 cursor: default;
176 .oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
177 display: none;
178 position: absolute;
179 z-index: 4;
181 .oo-ui-popupToolGroup-active.oo-ui-widget-enabled > .oo-ui-toolGroup-tools {
182 display: block;
184 .oo-ui-popupToolGroup-left > .oo-ui-toolGroup-tools {
185 left: 0;
187 .oo-ui-popupToolGroup-right > .oo-ui-toolGroup-tools {
188 right: 0;
190 .oo-ui-popupToolGroup .oo-ui-tool-link {
191 display: table;
192 width: 100%;
193 vertical-align: middle;
194 white-space: nowrap;
196 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-iconElement-icon,
197 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-accel,
198 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title {
199 display: table-cell;
200 vertical-align: middle;
202 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-accel {
203 text-align: right;
205 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-accel:not( :empty ) {
206 padding-left: 3em;
208 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup {
209 min-width: 1.875em;
211 .oo-ui-popupToolGroup.oo-ui-iconElement {
212 min-width: 3.125em;
214 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup.oo-ui-iconElement {
215 min-width: 2.5em;
217 .oo-ui-popupToolGroup.oo-ui-indicatorElement.oo-ui-iconElement {
218 min-width: 4.375em;
220 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup.oo-ui-indicatorElement.oo-ui-iconElement {
221 min-width: 3.75em;
223 .oo-ui-popupToolGroup.oo-ui-labelElement .oo-ui-popupToolGroup-handle .oo-ui-labelElement-label {
224 line-height: 2.6em;
225 margin: 0 1em;
227 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup.oo-ui-labelElement .oo-ui-popupToolGroup-handle .oo-ui-labelElement-label {
228 margin: 0 0.5em;
230 .oo-ui-popupToolGroup.oo-ui-labelElement.oo-ui-iconElement .oo-ui-popupToolGroup-handle .oo-ui-labelElement-label {
231 margin-left: 3em;
233 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup.oo-ui-labelElement.oo-ui-iconElement .oo-ui-popupToolGroup-handle .oo-ui-labelElement-label {
234 margin-left: 2.5em;
236 .oo-ui-popupToolGroup.oo-ui-labelElement.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle .oo-ui-labelElement-label {
237 margin-right: 2.25em;
239 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup.oo-ui-labelElement.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle .oo-ui-labelElement-label {
240 margin-right: 1.75em;
242 .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator {
243 width: 0.9375em;
244 height: 0.9375em;
245 margin: 0.78125em;
246 top: 0;
247 right: 0;
249 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator {
250 right: -0.3125em;
252 .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon {
253 width: 1.875em;
254 height: 1.875em;
255 margin: 0.3125em;
256 top: 0;
257 left: 0.3125em;
259 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon {
260 left: 0;
262 .oo-ui-popupToolGroup-header {
263 line-height: 2.6em;
264 margin: 0 0.6em;
265 font-weight: bold;
267 .oo-ui-popupToolGroup-active.oo-ui-widget-enabled {
268 border-bottom-left-radius: 0;
269 border-bottom-right-radius: 0;
270 box-shadow: inset 0 0.0875em 0.0875em 0 rgba(0, 0, 0, 0.07);
271 background-color: #f8fbfd;
272 background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0, #F1F7FB), color-stop(100%, #fff));
273 background-image: -webkit-linear-gradient(top, #F1F7FB 0, #fff 100%);
274 background-image: -moz-linear-gradient(top, #F1F7FB 0, #fff 100%);
275 background-image: linear-gradient(to bottom, #F1F7FB 0, #fff 100%);
276 -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff1f7fb', endColorstr='#ffffffff' )";
278 .oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
279 top: 2.5em;
280 margin: 0 -1px;
281 border: 1px solid #ccc;
282 background-color: #fff;
283 box-shadow: 0 0.3125em 1.25em rgba(0, 0, 0, 0.25);
285 .oo-ui-popupToolGroup .oo-ui-tool-link {
286 padding: 0.3125em 0 0.3125em 0.3125em;
288 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-iconElement-icon {
289 height: 1.875em;
290 width: 1.875em;
291 min-width: 1.875em;
293 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title {
294 padding-left: 0.5em;
296 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-accel,
297 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title {
298 line-height: 2em;
300 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-accel {
301 color: #888;
303 .oo-ui-listToolGroup .oo-ui-tool {
304 display: block;
305 -webkit-box-sizing: border-box;
306 -moz-box-sizing: border-box;
307 box-sizing: border-box;
309 .oo-ui-listToolGroup .oo-ui-toolGroup-tools {
310 padding: 0.3125em;
312 .oo-ui-listToolGroup.oo-ui-popupToolGroup-active {
313 border-color: rgba(0, 0, 0, 0.2);
315 .oo-ui-listToolGroup .oo-ui-tool {
316 border: 1px solid transparent;
317 margin: -1px 0;
318 padding: 0 0.625em 0 0;
320 .oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled {
321 border-color: rgba(0, 0, 0, 0.1);
322 box-shadow: inset 0 0.0875em 0.0875em 0 rgba(0, 0, 0, 0.07);
323 background-color: #f8fbfd;
324 background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0, #F1F7FB), color-stop(100%, #fff));
325 background-image: -webkit-linear-gradient(top, #F1F7FB 0, #fff 100%);
326 background-image: -moz-linear-gradient(top, #F1F7FB 0, #fff 100%);
327 background-image: linear-gradient(to bottom, #F1F7FB 0, #fff 100%);
328 -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff1f7fb', endColorstr='#ffffffff' )";
330 .oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled + .oo-ui-tool-active.oo-ui-widget-enabled {
331 border-top-color: rgba(0, 0, 0, 0.1);
333 .oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled:hover {
334 border-color: rgba(0, 0, 0, 0.2);
336 .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover {
337 border-color: rgba(0, 0, 0, 0.2);
339 .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover .oo-ui-tool-link .oo-ui-iconElement-icon {
340 opacity: 1;
342 .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-tool-title {
343 color: #ccc;
345 .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-tool-accel {
346 color: #ddd;
348 .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-iconElement-icon {
349 opacity: 0.2;
351 .oo-ui-listToolGroup.oo-ui-widget-disabled {
352 color: #ccc;
354 .oo-ui-listToolGroup.oo-ui-widget-disabled .oo-ui-indicatorElement-indicator,
355 .oo-ui-listToolGroup.oo-ui-widget-disabled .oo-ui-iconElement-icon {
356 opacity: 0.2;
358 .oo-ui-menuToolGroup {
359 border-color: rgba(0, 0, 0, 0.1);
361 .oo-ui-menuToolGroup .oo-ui-tool {
362 display: block;
364 .oo-ui-menuToolGroup .oo-ui-popupToolGroup-handle {
365 min-width: 10em;
367 .oo-ui-toolbar-narrow .oo-ui-menuToolGroup .oo-ui-popupToolGroup-handle {
368 min-width: 8.125em;
370 .oo-ui-menuToolGroup .oo-ui-toolGroup-tools {
371 padding: 0.3125em 0 0.3125em 0;
373 .oo-ui-menuToolGroup.oo-ui-widget-enabled:hover {
374 border-color: rgba(0, 0, 0, 0.2);
376 .oo-ui-menuToolGroup.oo-ui-popupToolGroup-active {
377 border-color: rgba(0, 0, 0, 0.25);
379 .oo-ui-menuToolGroup .oo-ui-tool {
380 padding: 0 1.25em 0 0.3125em;
382 .oo-ui-menuToolGroup .oo-ui-tool-link .oo-ui-iconElement-icon {
383 background-image: none;
385 .oo-ui-menuToolGroup .oo-ui-tool-active .oo-ui-tool-link .oo-ui-iconElement-icon {
386 background-image: url('themes/apex/images/icons/check.png');
387 background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url('themes/apex/images/icons/check.svg');
388 background-image: linear-gradient(transparent, transparent), /* @embed */ url('themes/apex/images/icons/check.svg');
389 background-image: -o-linear-gradient(transparent, transparent), url('themes/apex/images/icons/check.png');
390 background-size: contain;
391 background-position: center center;
392 background-repeat: no-repeat;
394 .oo-ui-menuToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover {
395 background-color: #e1f3ff;
397 .oo-ui-menuToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-tool-title {
398 color: #ccc;
400 .oo-ui-menuToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-iconElement-icon {
401 opacity: 0.2;
403 .oo-ui-menuToolGroup.oo-ui-widget-disabled {
404 color: #ccc;
405 border-color: rgba(0, 0, 0, 0.05);
407 .oo-ui-menuToolGroup.oo-ui-widget-disabled .oo-ui-indicatorElement-indicator,
408 .oo-ui-menuToolGroup.oo-ui-widget-disabled .oo-ui-iconElement-icon {
409 opacity: 0.2;
411 .oo-ui-toolbar {
412 clear: both;
414 .oo-ui-toolbar-bar {
415 line-height: 1;
416 position: relative;
418 .oo-ui-toolbar-tools,
419 .oo-ui-toolbar-actions,
420 .oo-ui-toolbar-shadow {
421 -webkit-touch-callout: none;
422 -webkit-user-select: none;
423 -moz-user-select: none;
424 -ms-user-select: none;
425 user-select: none;
427 .oo-ui-toolbar-tools {
428 display: inline;
429 white-space: nowrap;
431 .oo-ui-toolbar-narrow .oo-ui-toolbar-tools {
432 white-space: normal;
434 .oo-ui-toolbar-tools .oo-ui-tool {
435 white-space: normal;
437 .oo-ui-toolbar-actions {
438 float: right;
440 .oo-ui-toolbar-actions .oo-ui-toolbar {
441 display: inline-block;
443 .oo-ui-toolbar-actions .oo-ui-popupWidget {
444 -webkit-touch-callout: default;
445 -webkit-user-select: all;
446 -moz-user-select: all;
447 -ms-user-select: all;
448 user-select: all;
450 .oo-ui-toolbar-shadow {
451 background-position: left top;
452 background-repeat: repeat-x;
453 position: absolute;
454 width: 100%;
455 pointer-events: none;
457 .oo-ui-toolbar-bar {
458 border-bottom: 1px solid #ccc;
459 background-color: #f8fbfd;
460 background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0, #fff), color-stop(100%, #F1F7FB));
461 background-image: -webkit-linear-gradient(top, #fff 0, #F1F7FB 100%);
462 background-image: -moz-linear-gradient(top, #fff 0, #F1F7FB 100%);
463 background-image: linear-gradient(to bottom, #fff 0, #F1F7FB 100%);
464 -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffffff', endColorstr='#fff1f7fb' )";
466 .oo-ui-toolbar-bar .oo-ui-toolbar-bar {
467 border: 0;
468 background: none;
470 .oo-ui-toolbar-actions > .oo-ui-buttonElement-framed,
471 .oo-ui-toolbar-actions > .oo-ui-buttonElement-framed:last-child {
472 margin-top: 0.4em;
473 margin-bottom: 0.4em;
474 margin-right: 0.5em;
476 .oo-ui-toolbar-actions > .oo-ui-buttonElement-frameless.oo-ui-labelElement,
477 .oo-ui-toolbar-actions > .oo-ui-buttonElement-frameless:last-child.oo-ui-labelElement {
478 margin: 0;
480 .oo-ui-toolbar-actions > .oo-ui-buttonElement-frameless.oo-ui-labelElement > .oo-ui-buttonElement-button,
481 .oo-ui-toolbar-actions > .oo-ui-buttonElement-frameless:last-child.oo-ui-labelElement > .oo-ui-buttonElement-button {
482 margin: 0;
483 padding: 0 0.3125em;
485 .oo-ui-toolbar-actions > .oo-ui-buttonElement-frameless.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label,
486 .oo-ui-toolbar-actions > .oo-ui-buttonElement-frameless:last-child.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label {
487 margin: 0 1em;
488 line-height: 3.40625em;
490 .oo-ui-toolbar-shadow {
491 background-image: /* @embed */ url(themes/apex/images/toolbar-shadow.png);
492 bottom: -9px;
493 height: 9px;
494 opacity: 0.5;
495 -webkit-transition: opacity 500ms ease;
496 -moz-transition: opacity 500ms ease;
497 transition: opacity 500ms ease;