Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(14)

Side by Side Diff: ui/file_manager/gallery/css/gallery.css

Issue 1173863004: Revert of Move overwrite original checkbox and saved label to bottom toolbar. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 5 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | ui/file_manager/gallery/gallery.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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
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
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
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
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
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 }
OLDNEW
« no previous file with comments | « no previous file | ui/file_manager/gallery/gallery.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698