OLD | NEW |
1 /* | 1 /* |
2 * Copyright (c) 2011 The Chromium Authors. All rights reserved. | 2 * Copyright (c) 2011 The Chromium Authors. All rights reserved. |
3 * Use of this source code is governed by a BSD-style license that can be | 3 * Use of this source code is governed by a BSD-style license that can be |
4 * found in the LICENSE file. | 4 * found in the LICENSE file. |
5 */ | 5 */ |
6 | 6 |
7 body { | 7 body { |
8 margin: 0; | 8 margin: 0; |
9 -webkit-user-select: none; | 9 -webkit-user-select: none; |
10 font-family: Open Sans,Droid Sans Fallback,sans-serif; | 10 font-family: Open Sans,Droid Sans Fallback,sans-serif; |
(...skipping 228 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
239 position: absolute; | 239 position: absolute; |
240 top: 0px; | 240 top: 0px; |
241 left: 0px; | 241 left: 0px; |
242 overflow: hidden; | 242 overflow: hidden; |
243 height: 100%; | 243 height: 100%; |
244 display: -webkit-box; | 244 display: -webkit-box; |
245 -webkit-box-orient: horizontal; | 245 -webkit-box-orient: horizontal; |
246 -webkit-box-pack: left; | 246 -webkit-box-pack: left; |
247 | 247 |
248 max-width: 100%; | 248 max-width: 100%; |
249 -webkit-transition: max-width 0.5s ease-in-out; | 249 -webkit-transition: max-width 500ms ease-in-out; |
250 z-index: 0; | 250 z-index: 0; |
251 } | 251 } |
252 | 252 |
253 .gallery .toolbar .ribbon[inactive] { | 253 .gallery .toolbar .ribbon[inactive] { |
254 z-index: -1; | 254 z-index: -1; |
255 } | 255 } |
256 | 256 |
257 .gallery[editing] .toolbar .ribbon { | 257 .gallery[editing] .toolbar .ribbon { |
258 max-width: 0; | 258 max-width: 0; |
259 } | 259 } |
260 | 260 |
261 .gallery .ribbon-image { | 261 .gallery .ribbon-image { |
262 display: -webkit-box; | 262 display: -webkit-box; |
263 -webkit-box-orient: horizontal; | 263 -webkit-box-orient: horizontal; |
264 -webkit-box-pack: center; | 264 -webkit-box-pack: center; |
265 -webkit-box-align: center; | 265 -webkit-box-align: center; |
266 overflow: hidden; | 266 overflow: hidden; |
267 cursor: pointer; | 267 cursor: pointer; |
268 width: 47px; | 268 width: 47px; |
269 height: 47px; | 269 height: 47px; |
270 margin: 2px; | 270 margin: 2px; |
271 border: 2px solid rgba(255,255,255,0); /* transparent white */ | 271 border: 2px solid rgba(255,255,255,0); /* transparent white */ |
272 | 272 |
273 margin-left: 2px; | 273 margin-left: 2px; |
274 -webkit-transition: opacity 0.2s linear; | 274 -webkit-transition: opacity 200ms linear; |
275 } | 275 } |
276 | 276 |
277 .gallery .ribbon-image[inactive] { | 277 .gallery .ribbon-image[inactive] { |
278 opacity: 0; | 278 opacity: 0; |
279 pointer-events: none; | 279 pointer-events: none; |
280 } | 280 } |
281 | 281 |
282 .gallery .ribbon-image[selected] { | 282 .gallery .ribbon-image[selected] { |
283 border: 2px solid rgba(255,233,168,1); | 283 border: 2px solid rgba(255,233,168,1); |
284 } | 284 } |
285 | 285 |
286 .gallery .image-wrapper { | 286 .gallery .image-wrapper { |
287 position: relative; | 287 position: relative; |
288 overflow: hidden; | 288 overflow: hidden; |
289 width: 45px; | 289 width: 45px; |
290 height: 45px; | 290 height: 45px; |
291 border: 1px solid rgba(0,0,0,0); /* transparent black */ | 291 border: 1px solid rgba(0,0,0,0); /* transparent black */ |
292 } | 292 } |
293 | 293 |
294 .gallery .toolbar .fade { | 294 .gallery .toolbar .fade { |
295 background-repeat: no-repeat; | 295 background-repeat: no-repeat; |
296 background-position: center center; | 296 background-position: center center; |
297 position: absolute; | 297 position: absolute; |
298 z-index: 10; | 298 z-index: 10; |
299 width: 55px; | 299 width: 55px; |
300 height: 100%; | 300 height: 100%; |
301 pointer-events: none; | 301 pointer-events: none; |
302 opacity: 0; | 302 opacity: 0; |
303 -webkit-transition: opacity 0.2s linear; | 303 -webkit-transition: opacity 200ms linear; |
304 } | 304 } |
305 | 305 |
306 .gallery .toolbar .fade[active] { | 306 .gallery .toolbar .fade[active] { |
307 opacity: 1; | 307 opacity: 1; |
308 } | 308 } |
309 | 309 |
310 .gallery[editing] .toolbar .fade[active] { | 310 .gallery[editing] .toolbar .fade[active] { |
311 opacity: 0; | 311 opacity: 0; |
312 } | 312 } |
313 | 313 |
(...skipping 11 matching lines...) Expand all Loading... |
325 position: absolute; | 325 position: absolute; |
326 overflow: hidden; | 326 overflow: hidden; |
327 pointer-events: none; | 327 pointer-events: none; |
328 right: 0; | 328 right: 0; |
329 width: 75%; | 329 width: 75%; |
330 height: 55px; | 330 height: 55px; |
331 color: white; | 331 color: white; |
332 display: -webkit-box; | 332 display: -webkit-box; |
333 -webkit-box-orient: horizontal; | 333 -webkit-box-orient: horizontal; |
334 -webkit-box-pack: center; | 334 -webkit-box-pack: center; |
335 -webkit-transition: width 0.5s ease-in-out; | 335 -webkit-transition: width 500ms ease-in-out; |
336 } | 336 } |
337 | 337 |
338 .gallery[editing] .toolbar .edit-bar { | 338 .gallery[editing] .toolbar .edit-bar { |
339 width: 100%; | 339 width: 100%; |
340 } | 340 } |
341 | 341 |
342 .gallery .edit-main { | 342 .gallery .edit-main { |
343 display: -webkit-box; | 343 display: -webkit-box; |
344 -webkit-box-orient: horizontal; | 344 -webkit-box-orient: horizontal; |
345 opacity: 0; | 345 opacity: 0; |
346 -webkit-transition: opacity 0.25s ease-in-out; | 346 -webkit-transition: opacity 250ms ease-in-out; |
347 } | 347 } |
348 | 348 |
349 .gallery[editing] .edit-main { | 349 .gallery[editing] .edit-main { |
350 pointer-events: auto; | 350 pointer-events: auto; |
351 opacity: 1.0; | 351 opacity: 1.0; |
352 } | 352 } |
353 | 353 |
354 .gallery > .toolbar .button { | 354 .gallery > .toolbar .button { |
355 -webkit-box-flex: 0; | 355 -webkit-box-flex: 0; |
356 padding: 0px 10px 0px 35px; | 356 padding: 0px 10px 0px 35px; |
(...skipping 302 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
659 top: 0; | 659 top: 0; |
660 opacity: 0; | 660 opacity: 0; |
661 } | 661 } |
662 | 662 |
663 .gallery .share-menu { | 663 .gallery .share-menu { |
664 position: absolute; | 664 position: absolute; |
665 right: 10px; | 665 right: 10px; |
666 bottom: 60px; | 666 bottom: 60px; |
667 background-color: white; | 667 background-color: white; |
668 opacity: 1.0; | 668 opacity: 1.0; |
669 -webkit-transition: opacity 0.5s ease-in-out; | 669 -webkit-transition: opacity 500ms ease-in-out; |
670 padding: 8px; | 670 padding: 8px; |
671 display: -webkit-box; | 671 display: -webkit-box; |
672 -webkit-box-orient: vertical; | 672 -webkit-box-orient: vertical; |
673 -webkit-box-align: stretch; | 673 -webkit-box-align: stretch; |
674 -webkit-box-pack: start; | 674 -webkit-box-pack: start; |
675 border: 1px solid #7f7f7f; | 675 border: 1px solid #7f7f7f; |
676 -webkit-border-radius: 1px; | 676 -webkit-border-radius: 1px; |
677 } | 677 } |
678 | 678 |
679 .gallery .share-menu .bubble-point { | 679 .gallery .share-menu .bubble-point { |
(...skipping 24 matching lines...) Expand all Loading... |
704 } | 704 } |
705 | 705 |
706 .gallery .share-menu > div:hover { | 706 .gallery .share-menu > div:hover { |
707 background-color: rgba(240,240,240,1); | 707 background-color: rgba(240,240,240,1); |
708 } | 708 } |
709 | 709 |
710 .gallery .share-menu > div > img { | 710 .gallery .share-menu > div > img { |
711 margin-right: 5px; | 711 margin-right: 5px; |
712 display: block; | 712 display: block; |
713 } | 713 } |
OLD | NEW |