1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved. 2 * Use of this source code is governed by a BSD-style license that can be 3 * found in the LICENSE file. */ 4 5 body { 6 -webkit-user-select: none; 7 font-family: Open Sans, Droid Sans Fallback, sans-serif; 8 font-size: 84%; 9 margin: 0; 10 } 11 12 .gallery, 13 .gallery .content { 14 bottom: 0; 15 left: 0; 16 overflow: hidden; 17 position: absolute; 18 right: 0; 19 top: 0; 20 } 21 22 /* Common background for both mosaic and slide mode. */ 23 .gallery .content { 24 background-color: black; 25 } 26 27 /* Close button */ 28 29 /* We actually want (left,top) to be (0,0) but for some weird reason 30 this triggers :hover style on page reload which is ugly. */ 31 .gallery > .back-button { 32 cursor: pointer; 33 left: 1px; 34 position: absolute; 35 top: 1px; 36 z-index: 200; 37 } 38 39 /* The close icon is in a nested div so that its opacity can be manipulated 40 independently from its parent (which can be dimmed when the crop frame 41 overlaps it) */ 42 .gallery > .back-button div { 43 background-image: -webkit-image-set( 44 url('../images/gallery/back_to_files.png') 1x, 45 url('../images/gallery/2x/back_to_files.png') 2x); 46 background-position: center center; 47 background-repeat: no-repeat; 48 height: 40px; 49 opacity: 0; 50 width: 64px; 51 } 52 53 .gallery[tools] > .back-button div { 54 opacity: 0.5; 55 } 56 57 .gallery[tools] > .back-button div:hover { 58 opacity: 1; 59 } 60 61 /* Image container and canvas elements */ 62 63 .gallery .image-container { 64 cursor: none; /* Only visible when the toolbar is active */ 65 height: 100%; 66 position: absolute; 67 width: 100%; 68 } 69 70 .gallery[tools][locked] *, 71 .gallery[tools][locked] .image-container[cursor] { 72 cursor: wait; 73 } 74 75 .gallery[tools] .image-container[cursor='default'] { 76 cursor: default; 77 } 78 79 .gallery[tools] .image-container[cursor='move'] { 80 cursor: -webkit-image-set( 81 url('../images/gallery/cursor_move.png') 1x, 82 url('../images/gallery/2x/cursor_move.png') 2x) 15 15; 83 } 84 85 .gallery[tools] .image-container[cursor='crop'] { 86 cursor: -webkit-image-set( 87 url('../images/gallery/cursor_crop.png') 1x, 88 url('../images/gallery/2x/cursor_crop.png') 2x) 15 15; 89 } 90 91 .gallery[tools] .image-container[cursor='n-resize'], 92 .gallery[tools] .image-container[cursor='s-resize'] { 93 cursor: -webkit-image-set( 94 url('../images/gallery/cursor_updown.png') 1x, 95 url('../images/gallery/2x/cursor_updown.png') 2x) 15 15; 96 } 97 98 .gallery[tools] .image-container[cursor='e-resize'], 99 .gallery[tools] .image-container[cursor='w-resize'] { 100 cursor: -webkit-image-set( 101 url('../images/gallery/cursor_leftright.png') 1x, 102 url('../images/gallery/2x/cursor_leftright.png') 2x) 15 15; 103 } 104 105 .gallery[tools] .image-container[cursor='nw-resize'], 106 .gallery[tools] .image-container[cursor='se-resize'] { 107 cursor: -webkit-image-set( 108 url('../images/gallery/cursor_nwse.png') 1x, 109 url('../images/gallery/2x/cursor_nwse.png') 2x) 15 15; 110 } 111 112 .gallery[tools] .image-container[cursor='ne-resize'], 113 .gallery[tools] .image-container[cursor='sw-resize'] { 114 cursor: -webkit-image-set( 115 url('../images/gallery/cursor_swne.png') 1x, 116 url('../images/gallery/2x/cursor_swne.png') 2x) 15 15; 117 } 118 119 .gallery .image-container > .image { 120 pointer-events: none; 121 position: absolute; 122 /* Duration and timing function are set in Javascript. */ 123 transition-property: -webkit-transform, opacity; 124 } 125 126 .gallery .image-container > .image[fade] { 127 opacity: 0; 128 } 129 130 /* Full resolution image is invisible unless printing. */ 131 .gallery .image-container > canvas.fullres { 132 display: none; 133 } 134 135 @media print { 136 /* Do not print anything but the image content. */ 137 .gallery > :not(.content) { 138 display: none !important; 139 } 140 141 /* Center the printed image. */ 142 .gallery .image-container { 143 -webkit-box-align: center; 144 -webkit-box-orient: horizontal; 145 -webkit-box-pack: center; 146 display: -webkit-box; 147 } 148 149 /* Do not print the screen resolution image. */ 150 .gallery .image-container > canvas.image { 151 display: none !important; 152 } 153 154 /* Print the full resolution image instead. */ 155 .gallery .image-container > canvas.fullres { 156 display: block !important; 157 max-height: 100%; 158 max-width: 100%; 159 } 160 161 /* Print video at the center of the page */ 162 .gallery .image-container > video.image { 163 position: auto !important; 164 } 165 } 166 167 /* Toolbar */ 168 169 .gallery > .header, 170 .gallery > .toolbar { 171 -webkit-box-align: stretch; 172 -webkit-box-orient: horizontal; 173 -webkit-box-pack: start; 174 background-color: rgba(30, 30, 30, 0.8); 175 display: -webkit-box; 176 left: 0; 177 opacity: 0; 178 padding: 0 10px; 179 pointer-events: none; 180 position: absolute; 181 right: 0; 182 transition: opacity 300ms ease; 183 } 184 185 .gallery > .header { 186 -webkit-box-align: center; 187 -webkit-box-pack: end; 188 border-bottom: 1px solid rgba(50, 50, 50, 0.8); 189 display: -webkit-box; 190 height: 45px; 191 top: 0; 192 } 193 194 .gallery > .toolbar { 195 border-top: 1px solid rgba(50, 50, 50, 0.8); 196 bottom: 0; 197 height: 55px; 198 min-width: 800px; 199 } 200 201 .gallery[tools]:not([slideshow]) > .header, 202 .gallery[tools]:not([slideshow]) > .toolbar { 203 opacity: 1; 204 pointer-events: auto; 205 } 206 207 /* Hide immediately when entering the slideshow. */ 208 .gallery[tools][slideshow] > .toolbar { 209 transition-duration: 0; 210 } 211 212 .gallery[tools][locked] > .toolbar { 213 pointer-events: none; 214 } 215 216 .gallery .arrow-box { 217 -webkit-box-align: center; 218 -webkit-box-orient: horizontal; 219 -webkit-box-pack: center; 220 display: -webkit-box; 221 height: 100%; 222 pointer-events: none; 223 position: absolute; 224 width: 100%; 225 z-index: 100; 226 } 227 228 .gallery .arrow-box .arrow { 229 opacity: 0; 230 pointer-events: none; 231 } 232 233 .gallery .arrow-box .arrow-spacer { 234 -webkit-box-flex: 1; 235 pointer-events: none; 236 } 237 238 .gallery[tools] .arrow-box[active] .arrow { 239 cursor: pointer; 240 opacity: 1; 241 pointer-events: auto; 242 } 243 244 /* The arrow icons are in nested divs so that their opacity can be manipulated 245 * independently from their parent (which can be dimmed when the crop frame 246 * overlaps it) */ 247 .gallery .arrow div { 248 background-position: center center; 249 background-repeat: no-repeat; 250 height: 193px; 251 opacity: 0; 252 width: 105px; 253 } 254 255 .gallery[tools] .arrow-box[active] .arrow div { 256 opacity: 0.25; 257 } 258 259 .gallery[tools] .arrow-box[active] .arrow div:hover { 260 opacity: 1; 261 } 262 263 .gallery .arrow.left div { 264 background-image: -webkit-image-set( 265 url('../images/gallery/arrow_left.png') 1x, 266 url('../images/gallery/2x/arrow_left.png') 2x); 267 } 268 269 .gallery .arrow.right div { 270 background-image: -webkit-image-set( 271 url('../images/gallery/arrow_right.png') 1x, 272 url('../images/gallery/2x/arrow_right.png') 2x); 273 } 274 275 /* Special behavior on mouse drag. 276 Redundant .gallery attributes included to make the rules more specific */ 277 278 /* Everything but the image container should become mouse-transparent */ 279 .gallery[tools][editing][mousedrag] * { 280 pointer-events: none; 281 } 282 283 .gallery[tools][editing][mousedrag] .image-container { 284 pointer-events: auto; 285 } 286 287 /* The editor marks elements with 'dimmed' attribute to get them out of the way 288 of the crop frame */ 289 .gallery[tools][editing] [dimmed], 290 .gallery[tools][editing] [dimmed] * { 291 pointer-events: none; 292 } 293 294 .gallery[tools][editing] [dimmed] { 295 opacity: 0.2; 296 } 297 298 /* Filename */ 299 300 .gallery .filename-spacer { 301 position: relative; 302 width: 270px; 303 } 304 305 .gallery .filename-spacer > * { 306 background-color: transparent; 307 overflow: hidden; 308 position: absolute; 309 transition: visibility 0 linear 180ms, all 180ms linear; 310 width: 260px; 311 } 312 313 .gallery .filename-spacer * { 314 color: white; 315 } 316 317 .gallery .filename-spacer .namebox { 318 height: 22px; 319 top: 15px; 320 } 321 322 .gallery[editing] .filename-spacer .namebox { 323 height: 21px; 324 top: 5px; 325 } 326 327 328 .gallery .filename-spacer .namebox { 329 background-color: transparent; 330 border: none; 331 box-sizing: border-box; 332 cursor: pointer; 333 display: block; 334 font-size: 120%; 335 outline: none; 336 overflow: hidden; 337 padding: 0 3px; 338 position: absolute; 339 text-overflow: ellipsis; 340 white-space: nowrap; 341 } 342 343 .gallery .filename-spacer .namebox[disabled] { 344 -webkit-user-select: none; 345 cursor: default; 346 } 347 348 .gallery .filename-spacer .namebox:not([disabled]):not(:focus):hover { 349 background-color: rgba(48, 48, 48, 1.0); 350 } 351 352 .gallery .filename-spacer .namebox:focus { 353 background-color: white; 354 color: black; 355 cursor: text; 356 } 357 358 .gallery .filename-spacer .options { 359 -webkit-box-align: center; 360 -webkit-box-orient: horizontal; 361 -webkit-box-pack: start; 362 display: -webkit-box; 363 opacity: 0; 364 top: 50px; 365 visibility: hidden; 366 } 367 368 .gallery[editing] .filename-spacer .options { 369 opacity: 1; 370 top: 28px; 371 visibility: visible; 372 } 373 374 .gallery .filename-spacer .saved, 375 .gallery .filename-spacer .overwrite-original { 376 cursor: inherit; 377 font-size: 90%; 378 margin-left: 3px; 379 margin-right: 18px; 380 opacity: 0; 381 pointer-events: none; 382 transition: all linear 120ms; 383 } 384 385 .gallery[editing] .filename-spacer .saved { 386 color: white; 387 opacity: 0.5; 388 } 389 390 .gallery[editing] .filename-spacer .overwrite-original, 391 .gallery[editing] .filename-spacer .overwrite-original > * { 392 cursor: pointer; 393 opacity: 1; 394 pointer-events: auto; 395 } 396 397 .gallery[editing] .options[saved] .overwrite-original { 398 opacity: 0.5; 399 } 400 401 .gallery[editing] .options[saved] .overwrite-original, 402 .gallery[editing] .options[saved] .overwrite-original > * { 403 cursor: default; 404 pointer-events: none; 405 } 406 407 .gallery .filename-spacer .overwrite-original input { 408 margin-bottom: -2px; 409 margin-right: 6px; 410 } 411 412 .gallery .filename-spacer .saved[highlighted] { 413 -webkit-transform: scaleX(1.1) scaleY(1.1) rotate(0); 414 opacity: 1; 415 } 416 417 /* Bubble */ 418 .gallery .toolbar .bubble { 419 bottom: 65px; 420 font-size: 85%; 421 left: 50px; 422 position: absolute; 423 width: 220px; 424 } 425 426 .gallery:not([editing]) .toolbar .bubble { 427 display: none; 428 } 429 430 /* Toolbar buttons */ 431 432 .gallery .button-spacer { 433 -webkit-box-flex: 1; 434 display: -webkit-box; 435 } 436 437 /* Thumbnails */ 438 439 .gallery .ribbon-spacer { 440 -webkit-box-align: center; 441 -webkit-box-orient: horizontal; 442 -webkit-box-pack: center; 443 display: -webkit-box; 444 height: 100%; 445 left: 280px; 446 position: absolute; 447 right: 280px; 448 } 449 450 .gallery .toolbar .ribbon { 451 -webkit-box-flex: 0; 452 -webkit-box-orient: horizontal; 453 -webkit-box-pack: start; 454 display: -webkit-box; 455 height: 100%; 456 overflow: hidden; 457 transition: opacity 180ms linear, visibility 0 linear; 458 z-index: 0; 459 } 460 461 .gallery[editing] .toolbar .ribbon { 462 opacity: 0; 463 transition-delay: 0, 180ms; 464 visibility: hidden; 465 } 466 467 .gallery .ribbon-image { 468 -webkit-box-align: center; 469 -webkit-box-orient: horizontal; 470 -webkit-box-pack: center; 471 border: 2px solid rgba(255, 255, 255, 0); /* transparent white */ 472 cursor: pointer; 473 display: -webkit-box; 474 height: 47px; 475 margin: 2px; 476 overflow: hidden; 477 transition: all 180ms linear; 478 width: 47px; 479 } 480 481 .ribbon-image[vanishing='smooth'] { 482 border-left-width: 0; 483 border-right-width: 0; 484 margin-left: 0; 485 margin-right: 0; 486 width: 0; 487 } 488 489 .gallery .ribbon-image[selected] { 490 border: 2px solid rgba(255, 233, 168, 1); 491 } 492 493 .gallery .toolbar .ribbon.fade-left { 494 -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, 495 rgba(0, 0, 0, 1) 40px); 496 } 497 498 .gallery .toolbar .ribbon.fade-right { 499 -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0, 500 rgba(0, 0, 0, 1) 40px); 501 } 502 503 .gallery .toolbar .ribbon.fade-left.fade-right { 504 -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, 505 rgba(0, 0, 0, 1) 40px, 506 rgba(0, 0, 0, 1) 230px, 507 rgba(0, 0, 0, 0) 100%); 508 } 509 510 .gallery .image-wrapper { 511 background-size: 45px 45px; 512 border: 1px solid rgba(0, 0, 0, 0); /* transparent black */ 513 height: 45px; 514 overflow: hidden; 515 position: relative; 516 width: 45px; 517 } 518 519 .gallery .image-wrapper > img { 520 position: absolute; 521 } 522 523 .gallery .image-wrapper > img:not(.cached) { 524 -webkit-animation: fadeIn 500ms ease-in; 525 } 526 527 /* Editor buttons */ 528 529 .gallery .edit-bar-spacer { 530 -webkit-box-align: center; 531 -webkit-box-orient: horizontal; 532 -webkit-box-pack: center; 533 display: -webkit-box; 534 height: 100%; 535 left: 280px; 536 opacity: 0; 537 position: absolute; 538 right: 280px; 539 transition: opacity 180ms linear, visibility 0 linear 180ms; 540 visibility: hidden; 541 } 542 543 .gallery .toolbar .edit-main { 544 -webkit-box-orient: horizontal; 545 -webkit-box-pack: center; 546 color: white; 547 display: -webkit-box; 548 height: 55px; 549 overflow: visible; 550 } 551 552 .gallery[editing] .edit-bar-spacer { 553 opacity: 1.0; 554 pointer-events: auto; 555 transition-delay: 100ms, 100ms; 556 visibility: visible; 557 } 558 559 .gallery .header button, 560 .gallery .toolbar button, 561 .gallery .header button[disabled], 562 .gallery .toolbar button[disabled] { 563 -webkit-box-align: center; 564 -webkit-box-flex: 0; 565 -webkit-box-orient: horizontal; 566 -webkit-box-pack: end; 567 background-color: rgba(0, 0, 0, 0); 568 background-position: center; 569 background-repeat: no-repeat; 570 border: none; 571 box-shadow: none; 572 color: white; 573 cursor: pointer; 574 display: -webkit-box; 575 opacity: 0.99; /* Workaround for http://crosbug.com/21065 */ 576 padding: 1px; /* Instead of a border. */ 577 position: relative; 578 z-index: 10; 579 } 580 581 .gallery .header button, 582 .gallery .toolbar button { 583 height: 40px; 584 margin: 6px 0; 585 min-width: 40px; /* Reset. */ 586 width: 40px; 587 } 588 589 /* By default, labels are hidden. */ 590 .gallery > .toolbar button span { 591 display: none; 592 } 593 594 /* Show labels if there is enough space. */ 595 @media (min-width: 1050px) { 596 597 .gallery .edit-main button, 598 .gallery .edit-main button[disabled] { 599 background-position: 5px center; 600 min-width: 0; /* Reset. */ 601 padding: 0 10px 0 35px; 602 width: auto; 603 } 604 605 .gallery > .toolbar button span { 606 display: inline; 607 } 608 609 } 610 611 .gallery .header button:hover, 612 .gallery .toolbar button:hover { 613 background-color: rgba(31, 31, 31, 1); 614 color: white; 615 } 616 617 .gallery .header button:active, 618 .gallery .toolbar button:active, 619 .gallery .header button[pressed], 620 .gallery .toolbar button[pressed], 621 .gallery .header button[pressed]:hover, 622 .gallery .toolbar button[pressed]:hover { 623 background-color: rgba(240, 240, 240, 1); 624 color: black; 625 } 626 627 .gallery > .toolbar button.autofix { 628 background-image: -webkit-image-set( 629 url('../images/gallery/icon_autofix.png') 1x, 630 url('../images/gallery/2x/icon_autofix.png') 2x); 631 } 632 633 .gallery > .toolbar button.autofix:active, 634 .gallery > .toolbar button.autofix[pressed] { 635 background-image: -webkit-image-set( 636 url('../images/gallery/icon_autofix_selected.png') 1x, 637 url('../images/gallery/2x/icon_autofix_selected.png') 2x); 638 } 639 640 .gallery > .toolbar button.crop { 641 background-image: -webkit-image-set( 642 url('../images/gallery/icon_crop.png') 1x, 643 url('../images/gallery/2x/icon_crop.png') 2x); 644 } 645 646 .gallery > .toolbar button.crop:active, 647 .gallery > .toolbar button.crop[pressed] { 648 background-image: -webkit-image-set( 649 url('../images/gallery/icon_crop_selected.png') 1x, 650 url('../images/gallery/2x/icon_crop_selected.png') 2x); 651 } 652 653 .gallery > .toolbar button.exposure { 654 background-image: -webkit-image-set( 655 url('../images/gallery/icon_brightness.png') 1x, 656 url('../images/gallery/2x/icon_brightness.png') 2x); 657 } 658 659 .gallery > .toolbar button.exposure:active, 660 .gallery > .toolbar button.exposure[pressed] { 661 background-image: -webkit-image-set( 662 url('../images/gallery/icon_brightness_selected.png') 1x, 663 url('../images/gallery/2x/icon_brightness_selected.png') 2x); 664 } 665 666 .gallery > .toolbar button.rotate_right { 667 background-image: -webkit-image-set( 668 url('../images/gallery/icon_rotate.png') 1x, 669 url('../images/gallery/2x/icon_rotate.png') 2x); 670 } 671 672 .gallery > .toolbar button.rotate_right:active, 673 .gallery > .toolbar button.rotate_right[pressed] { 674 background-image: -webkit-image-set( 675 url('../images/gallery/icon_rotate_selected.png') 1x, 676 url('../images/gallery/2x/icon_rotate_selected.png') 2x); 677 } 678 679 .gallery > .toolbar button.rotate_left { 680 background-image: -webkit-image-set( 681 url('../images/gallery/icon_rotate_left.png') 1x, 682 url('../images/gallery/2x/icon_rotate_left.png') 2x); 683 } 684 685 .gallery > .toolbar button.rotate_left:active, 686 .gallery > .toolbar button.rotate_left[pressed] { 687 background-image: -webkit-image-set( 688 url('../images/gallery/icon_rotate_left_selected.png') 1x, 689 url('../images/gallery/2x/icon_rotate_left_selected.png') 2x); 690 } 691 692 .gallery > .toolbar button.undo { 693 background-image: -webkit-image-set( 694 url('../images/gallery/icon_undo.png') 1x, 695 url('../images/gallery/2x/icon_undo.png') 2x); 696 } 697 698 .gallery > .toolbar button.undo:active, 699 .gallery > .toolbar button.undo[pressed] { 700 background-image: -webkit-image-set( 701 url('../images/gallery/icon_undo_selected.png') 1x, 702 url('../images/gallery/2x/icon_undo_selected.png') 2x); 703 } 704 705 .gallery > .toolbar button.redo { 706 background-image: -webkit-image-set( 707 url('../images/gallery/icon_redo.png') 1x, 708 url('../images/gallery/2x/icon_redo.png') 2x); 709 position: absolute; /* Exclude from center-packing*/ 710 } 711 712 .gallery > .toolbar button.redo:active, 713 .gallery > .toolbar button.redo[pressed] { 714 background-image: -webkit-image-set( 715 url('../images/gallery/icon_redo_selected.png') 1x, 716 url('../images/gallery/2x/icon_redo_selected.png') 2x); 717 } 718 719 .gallery > .toolbar button[disabled] { 720 opacity: 0.5; 721 pointer-events: none; 722 } 723 724 .gallery > .toolbar button[hidden] { 725 display: none; 726 } 727 728 .gallery[mode='slide'] > .toolbar > button.mode { 729 background-image: -webkit-image-set( 730 url('../images/gallery/icon_mosaic.png') 1x, 731 url('../images/gallery/2x/icon_mosaic.png') 2x); 732 } 733 734 .gallery[mode='slide'] > .toolbar > button.mode:active { 735 background-image: -webkit-image-set( 736 url('../images/gallery/icon_mosaic_selected.png') 1x, 737 url('../images/gallery/2x/icon_mosaic_selected.png') 2x); 738 } 739 740 .gallery[mode='mosaic'] > .toolbar > button.mode { 741 background-image: -webkit-image-set( 742 url('../images/gallery/icon_1up.png') 1x, 743 url('../images/gallery/2x/icon_1up.png') 2x); 744 } 745 746 .gallery[mode='mosaic'] > .toolbar > button.mode:active { 747 background-image: -webkit-image-set( 748 url('../images/gallery/icon_1up_selected.png') 1x, 749 url('../images/gallery/2x/icon_1up_selected.png') 2x); 750 } 751 752 .gallery > .toolbar > button.slideshow { 753 background-image: -webkit-image-set( 754 url('../images/gallery/icon_slideshow.png') 1x, 755 url('../images/gallery/2x/icon_slideshow.png') 2x); 756 } 757 758 .gallery > .toolbar > button.slideshow:active, 759 .gallery > .toolbar > button.slideshow[pressed] { 760 background-image: -webkit-image-set( 761 url('../images/gallery/icon_slideshow_selected.png') 1x, 762 url('../images/gallery/2x/icon_slideshow_selected.png') 2x); 763 } 764 765 .gallery > .toolbar > button.delete { 766 background-image: -webkit-image-set( 767 url('../images/gallery/icon_delete.png') 1x, 768 url('../images/gallery/2x/icon_delete.png') 2x); 769 } 770 771 .gallery > .toolbar > button.delete:active { 772 background-image: -webkit-image-set( 773 url('../images/gallery/icon_delete_selected.png') 1x, 774 url('../images/gallery/2x/icon_delete_selected.png') 2x); 775 } 776 777 .gallery > .toolbar > button.edit { 778 background-image: -webkit-image-set( 779 url('../images/gallery/icon_edit.png') 1x, 780 url('../images/gallery/2x/icon_edit.png') 2x); 781 } 782 783 .gallery > .toolbar > button.edit:active, 784 .gallery > .toolbar > button.edit[pressed] { 785 background-image: -webkit-image-set( 786 url('../images/gallery/icon_edit_selected.png') 1x, 787 url('../images/gallery/2x/icon_edit_selected.png') 2x); 788 } 789 790 .gallery > .toolbar > button.print { 791 background-image: -webkit-image-set( 792 url('../images/gallery/icon_print.png') 1x, 793 url('../images/gallery/2x/icon_print.png') 2x); 794 } 795 796 .gallery > .toolbar > button.print:active, 797 .gallery > .toolbar > button.print[pressed] { 798 background-image: -webkit-image-set( 799 url('../images/gallery/icon_print_selected.png') 1x, 800 url('../images/gallery/2x/icon_print_selected.png') 2x); 801 } 802 803 .gallery > .toolbar > button.share { 804 background-image: -webkit-image-set( 805 url('../images/gallery/icon_share.png') 1x, 806 url('../images/gallery/2x/icon_share.png') 2x); 807 } 808 809 .gallery > .toolbar > button.share:active, 810 .gallery > .toolbar > button.share[pressed] { 811 background-image: -webkit-image-set( 812 url('../images/gallery/icon_share_selected.png') 1x, 813 url('../images/gallery/2x/icon_share_selected.png') 2x); 814 } 815 816 .gallery[error] > .toolbar button.edit, 817 .gallery[error] > .toolbar button.share { 818 opacity: 0.7; 819 pointer-events: none; 820 } 821 822 .gallery > .toolbar > button.share[disabled] { 823 display: none; 824 } 825 826 /* Secondary toolbar (mode-specific tools) */ 827 828 .gallery .edit-modal { 829 -webkit-box-orient: horizontal; 830 -webkit-box-pack: center; 831 bottom: 80px; 832 display: -webkit-box; 833 height: 40px; 834 pointer-events: none; 835 position: absolute; 836 width: 100%; 837 } 838 839 .gallery .edit-modal-wrapper[hidden] { 840 display: none; 841 } 842 843 .gallery .edit-modal-wrapper { 844 -webkit-box-align: center; 845 -webkit-box-orient: horizontal; 846 -webkit-box-pack: center; 847 background-color: rgba(0, 0, 0, 0.75); 848 color: white; 849 display: -webkit-box; 850 padding-right: 5px; 851 pointer-events: auto; 852 } 853 854 .gallery .edit-modal .label { 855 -webkit-box-align: center; 856 -webkit-box-orient: horizontal; 857 background-position: 20px center; 858 background-repeat: no-repeat; 859 display: -webkit-box; 860 height: 20px; 861 padding-left: 50px; 862 padding-right: 10px; 863 } 864 865 .gallery .edit-modal .label.brightness { 866 background-image: -webkit-image-set( 867 url('../images/gallery/icon_brightness.png') 1x, 868 url('../images/gallery/2x/icon_brightness.png') 2x); 869 } 870 871 .gallery .edit-modal .label.contrast { 872 background-image: -webkit-image-set( 873 url('../images/gallery/icon_contrast.png') 1x, 874 url('../images/gallery/2x/icon_contrast.png') 2x); 875 height: 24px; 876 margin-left: 15px; 877 } 878 879 .gallery .edit-modal .range { 880 -webkit-appearance: none !important; 881 height: 3px; 882 margin-right: 10px; 883 margin-top: 1px; 884 } 885 886 .gallery .edit-modal .range::-webkit-slider-thumb { 887 -webkit-appearance: none; 888 background-image: -webkit-image-set( 889 url('../images/gallery/slider_thumb.png') 1x, 890 url('../images/gallery/2x/slider_thumb.png') 2x); 891 height: 29px; 892 width: 16px; 893 } 894 895 /* Crop frame */ 896 897 .gallery .crop-overlay { 898 -webkit-box-orient: vertical; 899 display: -webkit-box; 900 pointer-events: none; 901 position: absolute; 902 } 903 904 .gallery .crop-overlay .shadow { 905 background-color: rgba(0, 0, 0, 0.65); 906 } 907 908 .gallery .crop-overlay .middle-box { 909 -webkit-box-flex: 1; 910 -webkit-box-orient: horizontal; 911 display: -webkit-box; 912 } 913 914 .gallery .crop-frame { 915 -webkit-box-flex: 1; 916 display: -webkit-box; 917 position: relative; 918 } 919 920 .gallery .crop-frame div { 921 background-color: rgba(255, 255, 255, 1); 922 box-shadow: 0 0 3px rgba(0, 0, 0, 0.75); 923 position: absolute; 924 } 925 926 .gallery .crop-frame .horizontal { 927 height: 1px; 928 left: 7px; 929 right: 7px; 930 } 931 932 .gallery .crop-frame .horizontal.top { 933 top: 0; 934 } 935 936 .gallery .crop-frame .horizontal.bottom { 937 bottom: 0; 938 } 939 940 .gallery .crop-frame .vertical { 941 bottom: 7px; 942 top: 7px; 943 width: 1px; 944 } 945 946 .gallery .crop-frame .vertical.left { 947 left: 0; 948 } 949 950 .gallery .crop-frame .vertical.right { 951 right: 0; 952 } 953 954 .gallery .crop-frame .corner { 955 border-radius: 6px; 956 height: 13px; 957 width: 13px; 958 } 959 960 .gallery .crop-frame .corner.left { 961 left: -6px; 962 } 963 964 .gallery .crop-frame .corner.right { 965 right: -6px; 966 } 967 968 .gallery .crop-frame .corner.top { 969 top: -6px; 970 } 971 972 .gallery .crop-frame .corner.bottom { 973 bottom: -6px; 974 } 975 976 /* Prompt/notification panel */ 977 978 .gallery .prompt-wrapper { 979 -webkit-box-orient: horizontal; 980 -webkit-box-pack: center; 981 display: -webkit-box; 982 height: 100%; 983 pointer-events: none; 984 position: absolute; 985 width: 100%; 986 } 987 988 .gallery .prompt-wrapper[pos=top] { 989 -webkit-box-align: start; 990 } 991 992 .gallery .prompt-wrapper[pos=center] { 993 -webkit-box-align: center; 994 } 995 996 .gallery .prompt-wrapper[pos=center] .back-button { 997 display: none; 998 } 999 1000 .gallery .prompt-wrapper > div.dimmable { 1001 opacity: 1; 1002 transition: opacity 220ms ease; 1003 } 1004 1005 .gallery .prompt { 1006 -webkit-box-align: center; 1007 -webkit-box-orient: horizontal; 1008 background-color: rgba(0, 0, 0, 0.8); 1009 color: white; 1010 display: -webkit-box; 1011 font-size: 120%; 1012 height: 40px; 1013 opacity: 0; 1014 padding: 0 20px; 1015 position: relative; 1016 top: 5px; 1017 transition: all 180ms ease; 1018 } 1019 1020 .gallery .prompt[state='fadein'] { 1021 opacity: 1; 1022 top: 0; 1023 } 1024 1025 .gallery .prompt[state='fadeout'] { 1026 opacity: 0; 1027 top: 0; 1028 } 1029 1030 .gallery .prompt-wrapper[pos=top] .prompt { 1031 padding-right: 10px; 1032 } 1033 1034 .gallery .prompt .back-button { 1035 background-image: -webkit-image-set( 1036 url('../images/gallery/butterbar_close_button.png') 1x, 1037 url('../images/gallery/2x/butterbar_close_button.png') 2x); 1038 background-position: center center; 1039 background-repeat: no-repeat; 1040 height: 16px; 1041 margin-left: 16px; 1042 opacity: 0.65; 1043 pointer-events: auto; 1044 width: 16px; 1045 } 1046 1047 .gallery .prompt .back-button:hover { 1048 background-color: rgba(81, 81, 81, 1); 1049 opacity: 1.0; 1050 } 1051 1052 .gallery .share-menu { 1053 -webkit-box-align: stretch; 1054 -webkit-box-orient: vertical; 1055 -webkit-box-pack: start; 1056 background-color: white; 1057 border: 1px solid #7f7f7f; 1058 border-radius: 1px; 1059 bottom: 60px; 1060 display: -webkit-box; 1061 opacity: 1.0; 1062 padding: 8px; 1063 position: absolute; 1064 right: 10px; 1065 transition: opacity 500ms ease-in-out; 1066 } 1067 1068 .gallery .share-menu .bubble-point { 1069 background-image: -webkit-image-set( 1070 url('../images/gallery/bubble_point.png') 1x, 1071 url('../images/gallery/2x/bubble_point.png') 2x); 1072 background-position: center top; 1073 background-repeat: no-repeat; 1074 bottom: -8px; 1075 height: 8px; 1076 padding: 0; 1077 position: absolute; 1078 right: 20px; 1079 width: 20px; 1080 } 1081 1082 .gallery .share-menu[hidden] { 1083 bottom: -100%; /* offscreen so that 'dimmed' attribute does not show it*/ 1084 opacity: 0; 1085 pointer-events: none; 1086 } 1087 1088 .gallery .share-menu > .item { 1089 background-color: rgba(0, 0, 0, 0); 1090 background-position: 5px center; 1091 background-repeat: no-repeat; 1092 cursor: pointer; 1093 padding: 5px; 1094 padding-left: 26px; 1095 } 1096 1097 .gallery .share-menu > .item:hover { 1098 background-color: rgba(240, 240, 240, 1); 1099 } 1100 1101 .gallery .share-menu > div > img { 1102 display: block; 1103 margin-right: 5px; 1104 } 1105 1106 /* Load spinner and error banner */ 1107 1108 .gallery .spinner { 1109 background-image: url('../images/common/spinner_white.svg'); 1110 background-size: 100%; 1111 height: 32px; 1112 left: 50%; 1113 margin-left: -16px; 1114 margin-top: -16px; 1115 opacity: 0.5; 1116 position: absolute; 1117 top: 50%; 1118 width: 32px; 1119 } 1120 1121 .gallery:not([spinner]) .spinner { 1122 display: none; 1123 } 1124 1125 .gallery .error-banner { 1126 -webkit-box-align: center; 1127 -webkit-box-orient: horizontal; 1128 -webkit-box-pack: center; 1129 background-color: rgba(24, 24, 24, 1); 1130 background-image: -webkit-image-set( 1131 url('../images/media/error.png') 1x, 1132 url('../images/media/2x/error.png') 2x); 1133 background-position: 25px center; 1134 background-repeat: no-repeat; 1135 color: white; 1136 display: -webkit-box; 1137 height: 54px; 1138 padding-left: 70px; 1139 padding-right: 35px; 1140 } 1141 1142 .gallery:not([error]) .error-banner { 1143 display: none; 1144 } 1145 1146 /* Video playback support. */ 1147 1148 .gallery video { 1149 height: 100%; 1150 position: absolute; 1151 width: 100%; 1152 } 1153 1154 .gallery .video-controls-spacer { 1155 -webkit-box-align: center; 1156 -webkit-box-orient: horizontal; 1157 -webkit-box-pack: center; 1158 bottom: 60px; /* Just above the toolbar */ 1159 display: -webkit-box; 1160 height: 30px; 1161 left: 0; 1162 opacity: 0; 1163 pointer-events: none; 1164 position: absolute; 1165 right: 0; 1166 } 1167 1168 .gallery[video] .video-controls-spacer { 1169 /* Animate opacity on 'tools' attribute toggle. */ 1170 /* Change opacity immediately on 'video' attribute change. */ 1171 transition: opacity 280ms ease; 1172 } 1173 1174 .gallery[video][tools] .video-controls-spacer { 1175 opacity: 1; 1176 } 1177 1178 .gallery .video-controls { 1179 display: none; 1180 max-width: 800px; 1181 } 1182 1183 .gallery[video] .video-controls { 1184 -webkit-box-flex: 1; 1185 display: -webkit-box; 1186 } 1187 1188 .gallery[video] > .toolbar .edit-main { 1189 display: none; 1190 } 1191 1192 /* Mosaic view. */ 1193 .mosaic { 1194 bottom: 55px; /* Toolbar height. */ 1195 left: 0; 1196 overflow-x: scroll; 1197 overflow-y: hidden; 1198 position: absolute; 1199 right: 0; 1200 top: 0; 1201 1202 /* transition-duration is set in Javascript. */ 1203 transition-property: -webkit-transform; 1204 transition-timing-function: linear; 1205 } 1206 1207 .mosaic::-webkit-scrollbar { 1208 background: transparent; 1209 } 1210 1211 .mosaic::-webkit-scrollbar-thumb { 1212 background: rgb(31, 31, 31); 1213 } 1214 1215 .gallery:not([mode='mosaic']) .mosaic::-webkit-scrollbar-thumb { 1216 background: transparent; 1217 } 1218 1219 .mosaic-tile { 1220 position: absolute; 1221 /* Tile's zoom factor is animated on hover. We apply the transform to 1222 the entire tile so that the image outline is included into the animation. */ 1223 transition: -webkit-transform 150ms linear; 1224 } 1225 1226 /* Mosaic tile's opacity is controlled by |visible| attribute which changes 1227 separately from .gallery[mode] */ 1228 .mosaic:not([visible]) .mosaic-tile .img-border { 1229 opacity: 0; 1230 } 1231 1232 /* Animate tile's opacity, except for the selected tile which should show/hide 1233 instantly (this looks better when zooming to/from the slide mode). */ 1234 .mosaic-tile:not([selected]) .img-border { 1235 transition: opacity 350ms linear; 1236 } 1237 1238 /* Must be in sync with mosaic_mode.js. 1239 Mosaic.Layout.SPACING should be equal to 1240 top + bottom + border-top-width + border-bottom-width AND 1241 left + right + border-left-width + border-right-width */ 1242 .mosaic-tile .img-border { 1243 border: 1px solid black; /* Space between the outline and the image. */ 1244 bottom: 4px; 1245 left: 4px; 1246 outline: 2px solid transparent; 1247 overflow: hidden; 1248 position: absolute; 1249 right: 4px; 1250 top: 4px; 1251 } 1252 1253 /* Selected and hover state are only visible when zoom transition is over. */ 1254 .mosaic[visible='normal'] .mosaic-tile[selected] .img-border { 1255 outline-color: rgb(51, 153, 255); 1256 } 1257 1258 .mosaic[visible='normal'].hover-visible .mosaic-tile:hover { 1259 -webkit-transform: scale(1.05); 1260 z-index: 50; 1261 } 1262 1263 .mosaic[visible='normal'].hover-visible 1264 .mosaic-tile:hover:not([selected]) .img-border { 1265 outline-color: rgb(182, 212, 252); 1266 } 1267 1268 .mosaic-tile .img-wrapper { 1269 bottom: 0; 1270 left: 0; 1271 position: absolute; 1272 right: 0; 1273 top: 0; 1274 } 1275 1276 .mosaic-tile .img-wrapper[generic-thumbnail], 1277 .mosaic-tile .img-wrapper.animated:not([generic-thumbnail]) 1278 canvas:not(.cached) { 1279 -webkit-animation: fadeIn ease-in 1; 1280 -webkit-animation-duration: 500ms; 1281 -webkit-animation-fill-mode: forwards; 1282 } 1283 1284 @-webkit-keyframes fadeIn { 1285 from { 1286 opacity: 0; 1287 } 1288 to { 1289 opacity: 1; 1290 } 1291 } 1292 1293 /* In order to do mode animated transitions smoothly we keep both mosaic and 1294 image-container but transparent. */ 1295 .gallery:not([mode='mosaic']) .mosaic, 1296 .gallery:not([mode='slide']) .image-container { 1297 pointer-events: none; 1298 } 1299 1300 .gallery:not([mode='slide']) .ribbon, 1301 .gallery:not([mode='slide']) .arrow-box { 1302 opacity: 0; 1303 pointer-events: none; 1304 } 1305 1306 /* Temporary. Remove this along with the delete confirmation dialog 1307 when Undo delete is implemented. */ 1308 .cr-dialog-shield { 1309 background-color: black; 1310 } 1311 1312 /* Slideshow controls */ 1313 1314 .slideshow-toolbar { 1315 -webkit-box-align: center; 1316 -webkit-box-orient: horizontal; 1317 -webkit-box-pack: center; 1318 bottom: 0; 1319 display: none; 1320 left: 0; 1321 padding-bottom: 6px; 1322 pointer-events: none; 1323 position: absolute; 1324 right: 0; 1325 } 1326 1327 .gallery[tools][slideshow] .slideshow-toolbar { 1328 display: -webkit-box; 1329 } 1330 1331 .slideshow-toolbar > div { 1332 background-position: center; 1333 background-repeat: no-repeat; 1334 height: 68px; 1335 opacity: 0.5; 1336 pointer-events: auto; 1337 width: 68px; 1338 } 1339 1340 .slideshow-toolbar > div:hover { 1341 opacity: 1; 1342 } 1343 1344 .slideshow-toolbar > .slideshow-play { 1345 background-image: -webkit-image-set( 1346 url('../images/gallery/slideshow-play.png') 1x, 1347 url('../images/gallery/2x/slideshow-play.png') 2x); 1348 margin-right: -2px; 1349 } 1350 1351 .gallery[slideshow='playing'] .slideshow-toolbar > .slideshow-play { 1352 background-image: -webkit-image-set( 1353 url('../images/gallery/slideshow-pause.png') 1x, 1354 url('../images/gallery/2x/slideshow-pause.png') 2x); 1355 } 1356 1357 .slideshow-toolbar > .slideshow-end { 1358 background-image: -webkit-image-set( 1359 url('../images/gallery/slideshow-end.png') 1x, 1360 url('../images/gallery/2x/slideshow-end.png') 2x); 1361 margin-left: -2px; 1362 } 1363 1364 .gallery > .header > button { 1365 height: 27px; 1366 min-width: 29px; 1367 width: 29px; 1368 } 1369 1370 .gallery > .header > .maximize-button { 1371 background-image: -webkit-image-set( 1372 url('../images/files/ui/topbar_button_maximize.png') 1x, 1373 url('../images/files/ui/2x/topbar_button_maximize.png') 2x); 1374 } 1375 1376 .gallery > .header > .close-button { 1377 background-image: -webkit-image-set( 1378 url('../images/files/ui/topbar_button_close.png') 1x, 1379 url('../images/files/ui/2x/topbar_button_close.png') 2x); 1380 } 1381