| 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 |