| OLD | NEW |
| 1 /* Copyright (c) 2014 The Chromium Authors. All rights reserved. | 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 | 2 * Use of this source code is governed by a BSD-style license that can be |
| 3 * found in the LICENSE file. */ | 3 * found in the LICENSE file. */ |
| 4 | 4 |
| 5 body { | 5 body { |
| 6 -webkit-user-select: none; | 6 -webkit-user-select: none; |
| 7 font-size: 84%; | 7 font-size: 84%; |
| 8 margin: 0; | 8 margin: 0; |
| 9 } | 9 } |
| 10 | 10 |
| (...skipping 138 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 149 } | 149 } |
| 150 } | 150 } |
| 151 | 151 |
| 152 /* Toolbar */ | 152 /* Toolbar */ |
| 153 | 153 |
| 154 .gallery > .header, | 154 .gallery > .header, |
| 155 .gallery > .toolbar { | 155 .gallery > .toolbar { |
| 156 -webkit-box-align: stretch; | 156 -webkit-box-align: stretch; |
| 157 -webkit-box-orient: horizontal; | 157 -webkit-box-orient: horizontal; |
| 158 -webkit-box-pack: start; | 158 -webkit-box-pack: start; |
| 159 background-color: rgba(30, 30, 30, 0.8); |
| 159 display: flex; | 160 display: flex; |
| 160 left: 0; | 161 left: 0; |
| 161 opacity: 0; | 162 opacity: 0; |
| 162 padding: 0 10px; | 163 padding: 0 10px; |
| 163 pointer-events: none; | 164 pointer-events: none; |
| 164 position: absolute; | 165 position: absolute; |
| 165 right: 0; | 166 right: 0; |
| 166 transition: opacity 300ms ease; | 167 transition: opacity 300ms ease; |
| 167 } | 168 } |
| 168 | 169 |
| 169 .gallery > .header { | 170 .gallery > .header { |
| 170 -webkit-app-region: drag; | 171 -webkit-app-region: drag; |
| 171 -webkit-box-align: center; | 172 -webkit-box-align: center; |
| 172 -webkit-box-pack: end; | 173 -webkit-box-pack: end; |
| 173 background-color: rgba(30, 30, 30, 0.8); | |
| 174 border-bottom: 1px solid rgba(50, 50, 50, 0.8); | 174 border-bottom: 1px solid rgba(50, 50, 50, 0.8); |
| 175 display: -webkit-box; | 175 display: -webkit-box; |
| 176 height: 45px; | 176 height: 45px; |
| 177 top: 0; | 177 top: 0; |
| 178 } | 178 } |
| 179 | 179 |
| 180 .gallery > .toolbar { | |
| 181 background-color: rgba(40, 42, 45, 0.9); | |
| 182 } | |
| 183 | |
| 184 .gallery .header button { | 180 .gallery .header button { |
| 185 -webkit-app-region: no-drag; | 181 -webkit-app-region: no-drag; |
| 186 } | 182 } |
| 187 | 183 |
| 188 .gallery > .toolbar { | 184 .gallery > .toolbar { |
| 189 border-top: 1px solid rgba(50, 50, 50, 0.8); | 185 border-top: 1px solid rgba(50, 50, 50, 0.8); |
| 190 height: 55px; | 186 height: 55px; |
| 191 overflow: hidden; | 187 overflow: hidden; |
| 192 } | 188 } |
| 193 | 189 |
| 194 .gallery > .toolbar.top { | 190 .gallery > .toolbar.top { |
| 195 top: 45px; /* Header height. */ | 191 top: 45px; /* Header height. */ |
| 196 } | 192 } |
| 197 | 193 |
| 198 .gallery > .toolbar.bottom { | 194 .gallery > .toolbar.bottom { |
| 199 bottom: 0; | 195 bottom: 0; |
| 200 } | 196 } |
| 201 | 197 |
| 202 .gallery > .toolbar.bottom > .slide-mode-toolbar { | |
| 203 left: 0; | |
| 204 opacity: 1; | |
| 205 position: absolute; | |
| 206 visibility: visible; | |
| 207 width: 100%; | |
| 208 } | |
| 209 | |
| 210 .gallery > .toolbar.bottom > .edit-mode-toolbar { | |
| 211 left: 0; | |
| 212 opacity: 0; | |
| 213 position: absolute; | |
| 214 visibility: hidden; | |
| 215 width: 100%; | |
| 216 } | |
| 217 | |
| 218 .gallery[editing] > .toolbar.bottom > .slide-mode-toolbar { | |
| 219 opacity: 0; | |
| 220 visibility: hidden; | |
| 221 } | |
| 222 | |
| 223 .gallery[editing] > .toolbar.bottom > .edit-mode-toolbar { | |
| 224 opacity: 1; | |
| 225 visibility: visible; | |
| 226 } | |
| 227 | |
| 228 .gallery[tools]:not([slideshow]) > .header, | 198 .gallery[tools]:not([slideshow]) > .header, |
| 229 .gallery[tools]:not([slideshow]) > .toolbar { | 199 .gallery[tools]:not([slideshow]) > .toolbar { |
| 230 opacity: 1; | 200 opacity: 1; |
| 231 pointer-events: auto; | 201 pointer-events: auto; |
| 232 } | 202 } |
| 233 | 203 |
| 234 /* Hide immediately when entering the slideshow. */ | 204 /* Hide immediately when entering the slideshow. */ |
| 235 .gallery[tools][slideshow] > .toolbar { | 205 .gallery[tools][slideshow] > .toolbar { |
| 236 transition-duration: 0ms; | 206 transition-duration: 0ms; |
| 237 } | 207 } |
| (...skipping 117 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 355 outline: none; | 325 outline: none; |
| 356 overflow: hidden; | 326 overflow: hidden; |
| 357 padding: 0 3px; | 327 padding: 0 3px; |
| 358 position: absolute; | 328 position: absolute; |
| 359 text-overflow: ellipsis; | 329 text-overflow: ellipsis; |
| 360 top: 15px; | 330 top: 15px; |
| 361 white-space: nowrap; | 331 white-space: nowrap; |
| 362 width: 100%; | 332 width: 100%; |
| 363 } | 333 } |
| 364 | 334 |
| 335 .gallery[editing] .filename-spacer .namebox { |
| 336 height: 21px; |
| 337 top: 5px; |
| 338 } |
| 339 |
| 365 .gallery .filename-spacer .namebox[disabled] { | 340 .gallery .filename-spacer .namebox[disabled] { |
| 366 -webkit-user-select: none; | 341 -webkit-user-select: none; |
| 367 cursor: default; | 342 cursor: default; |
| 368 } | 343 } |
| 369 | 344 |
| 370 .gallery .filename-spacer .namebox:not([disabled]):not(:focus):hover { | 345 .gallery .filename-spacer .namebox:not([disabled]):not(:focus):hover { |
| 371 background-color: rgba(48, 48, 48, 1.0); | 346 background-color: rgba(48, 48, 48, 1.0); |
| 372 } | 347 } |
| 373 | 348 |
| 374 .gallery .filename-spacer .namebox:focus { | 349 .gallery .filename-spacer .namebox:focus { |
| 375 background-color: white; | 350 background-color: white; |
| 376 color: black; | 351 color: black; |
| 377 cursor: text; | 352 cursor: text; |
| 378 } | 353 } |
| 379 | 354 |
| 355 .gallery .filename-spacer .options { |
| 356 -webkit-box-align: center; |
| 357 -webkit-box-orient: horizontal; |
| 358 -webkit-box-pack: start; |
| 359 display: -webkit-box; |
| 360 height: 0; |
| 361 opacity: 0; |
| 362 top: 50px; |
| 363 visibility: hidden; |
| 364 } |
| 365 |
| 366 .gallery[editing] .filename-spacer .options { |
| 367 height: auto; |
| 368 opacity: 1; |
| 369 top: 28px; |
| 370 visibility: visible; |
| 371 } |
| 372 |
| 373 .gallery .filename-spacer .saved, |
| 374 .gallery .filename-spacer .overwrite-original { |
| 375 cursor: inherit; |
| 376 font-size: 90%; |
| 377 margin-left: 3px; |
| 378 margin-right: 18px; |
| 379 opacity: 0; |
| 380 pointer-events: none; |
| 381 transition: all linear 120ms; |
| 382 } |
| 383 |
| 384 .gallery[editing] .filename-spacer .saved { |
| 385 color: white; |
| 386 opacity: 0.5; |
| 387 } |
| 388 |
| 389 .gallery[editing] .filename-spacer .overwrite-original, |
| 390 .gallery[editing] .filename-spacer .overwrite-original > * { |
| 391 cursor: pointer; |
| 392 opacity: 1; |
| 393 pointer-events: auto; |
| 394 } |
| 395 |
| 396 .gallery[editing] .overwrite-original[disabled] { |
| 397 opacity: 0.5; |
| 398 } |
| 399 |
| 400 .gallery[editing] .overwrite-original[disabled], |
| 401 .gallery[editing] .overwrite-original[disabled] > * { |
| 402 cursor: default; |
| 403 pointer-events: none; |
| 404 } |
| 405 |
| 406 .gallery .filename-spacer .saved[highlighted] { |
| 407 transform: scaleX(1.1) scaleY(1.1) rotate(0); |
| 408 opacity: 1; |
| 409 } |
| 410 |
| 380 /* Bubble */ | 411 /* Bubble */ |
| 381 | 412 |
| 382 .gallery .toolbar .bubble { | 413 .gallery .toolbar .bubble { |
| 383 bottom: 65px; | 414 bottom: 65px; |
| 384 font-size: 85%; | 415 font-size: 85%; |
| 385 left: 50px; | 416 left: 50px; |
| 386 position: absolute; | 417 position: absolute; |
| 387 width: 220px; | 418 width: 220px; |
| 388 } | 419 } |
| 389 | 420 |
| 390 .gallery:not([editing]) .toolbar .bubble { | 421 .gallery:not([editing]) .toolbar .bubble { |
| 391 display: none; | 422 display: none; |
| 392 } | 423 } |
| 393 | 424 |
| 394 /* Middle spacer */ | 425 /* Middle spacer */ |
| 395 | 426 |
| 396 .gallery .middle-spacer { | 427 .gallery .middle-spacer { |
| 397 align-items: center; | 428 align-items: center; |
| 398 display: flex; | 429 display: flex; |
| 399 flex: 1 0 auto; | 430 flex: 1 0 auto; |
| 400 flex-direction: column; | 431 flex-direction: column; |
| 401 } | 432 } |
| 402 | 433 |
| 403 /* Toolbar buttons */ | 434 /* Toolbar buttons */ |
| 404 | 435 |
| 405 .gallery .button-spacer { | 436 .gallery .button-spacer { |
| 406 align-items: center; | |
| 407 display: flex; | 437 display: flex; |
| 408 flex: none; | 438 flex: none; |
| 409 justify-content: flex-end; | 439 justify-content: flex-end; |
| 410 width: 252px; /* 42px button x 6 */ | 440 width: 252px; /* 42px button x 6 */ |
| 411 } | 441 } |
| 412 | 442 |
| 413 /* Thumbnails */ | 443 /* Thumbnails */ |
| 414 | 444 |
| 415 .gallery .ribbon-spacer { | 445 .gallery .ribbon-spacer { |
| 416 height: 55px; | 446 height: 55px; |
| 447 margin-bottom: -55px; |
| 417 } | 448 } |
| 418 | 449 |
| 419 .gallery .toolbar .ribbon { | 450 .gallery .toolbar .ribbon { |
| 420 height: 100%; | 451 height: 100%; |
| 421 margin: 0 auto; | |
| 422 overflow: hidden; | 452 overflow: hidden; |
| 423 transition: opacity 180ms linear, visibility 0ms linear; | 453 transition: opacity 180ms linear, visibility 0ms linear; |
| 424 white-space: nowrap; | 454 white-space: nowrap; |
| 425 z-index: 0; | 455 z-index: 0; |
| 426 } | 456 } |
| 427 | 457 |
| 428 .gallery[editing] .toolbar .ribbon { | 458 .gallery[editing] .toolbar .ribbon { |
| 429 opacity: 0; | 459 opacity: 0; |
| 430 transition-delay: 0ms, 180ms; | 460 transition-delay: 0ms, 180ms; |
| 431 visibility: hidden; | 461 visibility: hidden; |
| (...skipping 49 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 481 } | 511 } |
| 482 | 512 |
| 483 .gallery .image-wrapper > img { | 513 .gallery .image-wrapper > img { |
| 484 position: absolute; | 514 position: absolute; |
| 485 } | 515 } |
| 486 | 516 |
| 487 .gallery .image-wrapper > img:not(.cached) { | 517 .gallery .image-wrapper > img:not(.cached) { |
| 488 -webkit-animation: fadeIn 500ms ease-in; | 518 -webkit-animation: fadeIn 500ms ease-in; |
| 489 } | 519 } |
| 490 | 520 |
| 491 /* Editor toolbar. */ | 521 /* Editor buttons */ |
| 492 | 522 |
| 493 .gallery .edit-mode-toolbar .options { | 523 .gallery .edit-bar-spacer { |
| 494 align-items: center; | 524 -webkit-box-align: center; |
| 495 display: flex; | 525 -webkit-box-orient: horizontal; |
| 526 -webkit-box-pack: center; |
| 527 display: -webkit-box; |
| 496 height: 100%; | 528 height: 100%; |
| 529 left: 280px; |
| 497 opacity: 0; | 530 opacity: 0; |
| 498 position: absolute; | 531 right: 280px; |
| 532 transition: opacity 180ms linear, visibility 0ms linear 180ms; |
| 499 visibility: hidden; | 533 visibility: hidden; |
| 500 width: 100%; | 534 margin-bottom: -55px; |
| 501 } | 535 } |
| 502 | 536 |
| 503 .gallery .edit-mode-toolbar .edit-bar-spacer { | 537 .gallery .toolbar .edit-main { |
| 504 display: block; | 538 -webkit-box-orient: horizontal; |
| 505 height: 100%; | 539 -webkit-box-pack: center; |
| 506 opacity: 0; | |
| 507 transition: opacity 180ms linear, visibility 0ms linear 180ms; | |
| 508 visibility: hidden; | |
| 509 } | |
| 510 | |
| 511 .gallery[editing] .edit-mode-toolbar .options { | |
| 512 opacity: 1; | |
| 513 visibility: visible; | |
| 514 } | |
| 515 | |
| 516 .gallery .edit-mode-toolbar .saved, | |
| 517 .gallery .edit-mode-toolbar .overwrite-original { | |
| 518 cursor: inherit; | |
| 519 font-size: 90%; | |
| 520 opacity: 0; | |
| 521 pointer-events: none; | |
| 522 transition: all linear 120ms; | |
| 523 } | |
| 524 | |
| 525 .gallery .edit-mode-toolbar .overwrite-original { | |
| 526 -webkit-margin-start: 16px; | |
| 527 align-items: center; | |
| 528 display: flex; | |
| 529 } | |
| 530 | |
| 531 .gallery .edit-mode-toolbar .saved { | |
| 532 -webkit-margin-start: 14px; | |
| 533 } | |
| 534 | |
| 535 .gallery .edit-mode-toolbar .overwrite-original > input { | |
| 536 float: left; | |
| 537 margin: 0; | |
| 538 } | |
| 539 | |
| 540 .gallery .edit-mode-toolbar .overwrite-original > .label { | |
| 541 -webkit-margin-start: 8px; | |
| 542 color: white; | 540 color: white; |
| 543 float: left; | 541 display: -webkit-box; |
| 544 } | |
| 545 | |
| 546 .gallery[editing] .edit-mode-toolbar .saved { | |
| 547 color: white; | |
| 548 opacity: 0.5; | |
| 549 } | |
| 550 | |
| 551 .gallery[editing] .edit-mode-toolbar .overwrite-original, | |
| 552 .gallery[editing] .edit-mode-toolbar .overwrite-original > * { | |
| 553 cursor: pointer; | |
| 554 opacity: 1; | |
| 555 pointer-events: auto; | |
| 556 } | |
| 557 | |
| 558 .gallery[editing] .overwrite-original[disabled] { | |
| 559 opacity: 0.5; | |
| 560 } | |
| 561 | |
| 562 .gallery[editing] .overwrite-original[disabled], | |
| 563 .gallery[editing] .overwrite-original[disabled] > * { | |
| 564 cursor: default; | |
| 565 pointer-events: none; | |
| 566 } | |
| 567 | |
| 568 .gallery .edit-mode-toolbar .saved[highlighted] { | |
| 569 transform: scaleX(1.1) scaleY(1.1) rotate(0); | |
| 570 opacity: 1; | |
| 571 } | |
| 572 | |
| 573 /* Editor buttons. */ | |
| 574 | |
| 575 .gallery .toolbar .edit-main { | |
| 576 align-items: center; | |
| 577 color: white; | |
| 578 display: flex; | |
| 579 height: 55px; | 542 height: 55px; |
| 580 justify-content: center; | |
| 581 overflow: visible; | 543 overflow: visible; |
| 582 } | 544 } |
| 583 | 545 |
| 584 .gallery[editing] .edit-bar-spacer { | 546 .gallery[editing] .edit-bar-spacer { |
| 585 opacity: 1.0; | 547 opacity: 1.0; |
| 586 pointer-events: auto; | 548 pointer-events: auto; |
| 587 transition-delay: 100ms, 100ms; | 549 transition-delay: 100ms, 100ms; |
| 588 visibility: visible; | 550 visibility: visible; |
| 589 } | 551 } |
| 590 | 552 |
| (...skipping 12 matching lines...) Expand all Loading... |
| 603 flex: none; | 565 flex: none; |
| 604 opacity: 0.99; /* Workaround for http://crosbug.com/21065 */ | 566 opacity: 0.99; /* Workaround for http://crosbug.com/21065 */ |
| 605 padding: 1px; /* Instead of a border. */ | 567 padding: 1px; /* Instead of a border. */ |
| 606 position: relative; | 568 position: relative; |
| 607 z-index: 10; | 569 z-index: 10; |
| 608 } | 570 } |
| 609 | 571 |
| 610 .gallery .header button, | 572 .gallery .header button, |
| 611 .gallery .toolbar button { | 573 .gallery .toolbar button { |
| 612 height: 40px; | 574 height: 40px; |
| 575 margin: 6px 0; |
| 613 min-width: 40px; /* Reset. */ | 576 min-width: 40px; /* Reset. */ |
| 614 width: 40px; | 577 width: 40px; |
| 615 } | 578 } |
| 616 | 579 |
| 617 .gallery .header button { | |
| 618 margin: 6px 0; | |
| 619 } | |
| 620 | |
| 621 .gallery .toolbar button:focus { | 580 .gallery .toolbar button:focus { |
| 622 z-index: 11; | 581 z-index: 11; |
| 623 } | 582 } |
| 624 | 583 |
| 625 /* By default, labels are hidden. */ | 584 /* By default, labels are hidden. */ |
| 626 .gallery > .toolbar button span { | 585 .gallery > .toolbar button span { |
| 627 display: none; | 586 display: none; |
| 628 } | 587 } |
| 629 | 588 |
| 630 /* Show labels if there is enough space. */ | 589 /* Show labels if there is enough space. */ |
| (...skipping 777 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 1408 background-color: rgba(255, 0, 0, 0.3); | 1367 background-color: rgba(255, 0, 0, 0.3); |
| 1409 } | 1368 } |
| 1410 | 1369 |
| 1411 .debug-me .load-target-external-metadata::before { | 1370 .debug-me .load-target-external-metadata::before { |
| 1412 background-color: rgba(0, 255, 0, 0.3); | 1371 background-color: rgba(0, 255, 0, 0.3); |
| 1413 } | 1372 } |
| 1414 | 1373 |
| 1415 .debug-me .load-target-file-entry::before { | 1374 .debug-me .load-target-file-entry::before { |
| 1416 background-color: rgba(0, 0, 255, 0.3); | 1375 background-color: rgba(0, 0, 255, 0.3); |
| 1417 } | 1376 } |
| OLD | NEW |