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 |