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