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