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