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

Side by Side Diff: chrome/browser/resources/chromeos/login/screen_supervised_user_creation.css

Issue 2535573002: Reduce usage of webkit CSS prefixes in chrome/browser/resources (Closed)
Patch Set: rebase Created 3 years, 10 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
OLDNEW
1 /* Copyright 2014 The Chromium Authors. All rights reserved. 1 /* Copyright 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 * This is the stylesheet used by the Locally managed user creation flow screen. 5 * This is the stylesheet used by the Locally managed user creation flow screen.
6 */ 6 */
7 7
8 #supervised-user-creation { 8 #supervised-user-creation {
9 height: 609px; /* Same size as GAIA sign in screen.*/ 9 height: 609px; /* Same size as GAIA sign in screen.*/
10 padding: 0 0; /* Some screens have elements right next to borders. */ 10 padding: 0 0; /* Some screens have elements right next to borders. */
(...skipping 395 matching lines...) Expand 10 before | Expand all | Expand 10 after
406 float: left; 406 float: left;
407 } 407 }
408 408
409 #supervised-user-creation-image-preview-img { 409 #supervised-user-creation-image-preview-img {
410 display: block; 410 display: block;
411 max-height: 220px; 411 max-height: 220px;
412 max-width: 220px; 412 max-width: 220px;
413 } 413 }
414 414
415 #supervised-user-creation-image-preview-img.animated-transform { 415 #supervised-user-creation-image-preview-img.animated-transform {
416 -webkit-transition: -webkit-transform 200ms linear; 416 transition: transform 200ms linear;
417 } 417 }
418 418
419 .camera.live #supervised-user-creation-image-preview-img { 419 .camera.live #supervised-user-creation-image-preview-img {
420 display: none; 420 display: none;
421 } 421 }
422 422
423 .camera.flip-x #supervised-user-creation-image-preview-img { 423 .camera.flip-x #supervised-user-creation-image-preview-img {
424 -webkit-transform: rotateY(180deg); 424 transform: rotateY(180deg);
425 } 425 }
426 426
427 .default-image #supervised-user-creation-image-preview-img { 427 .default-image #supervised-user-creation-image-preview-img {
428 background: white; 428 background: white;
429 border: solid 1px #cacaca; 429 border: solid 1px #cacaca;
430 border-radius: 4px; 430 border-radius: 4px;
431 padding: 2px; 431 padding: 2px;
432 } 432 }
433 433
434 .supervised-user-creation-image-stream-area { 434 .supervised-user-creation-image-stream-area {
435 display: none; 435 display: none;
436 padding: 0; 436 padding: 0;
437 position: relative; 437 position: relative;
438 } 438 }
439 439
440 .camera.live .supervised-user-creation-image-stream-area { 440 .camera.live .supervised-user-creation-image-stream-area {
441 display: block; 441 display: block;
442 } 442 }
443 443
444 #supervised-user-creation-image-stream-crop { 444 #supervised-user-creation-image-stream-crop {
445 -webkit-transition: -webkit-transform 200ms linear;
446 height: 220px; 445 height: 220px;
447 overflow: hidden; 446 overflow: hidden;
448 position: relative; 447 position: relative;
448 transition: transform 200ms linear;
449 width: 220px; 449 width: 220px;
450 } 450 }
451 451
452 .flip-x #supervised-user-creation-image-stream-crop { 452 .flip-x #supervised-user-creation-image-stream-crop {
453 -webkit-transform: rotateY(180deg); 453 transform: rotateY(180deg);
454 } 454 }
455 455
456 .supervised-user-creation-image-stream { 456 .supervised-user-creation-image-stream {
457 border: solid 1px #cacaca; 457 border: solid 1px #cacaca;
458 height: 220px; 458 height: 220px;
459 /* Center image for 4:3 aspect ratio. */ 459 /* Center image for 4:3 aspect ratio. */
460 left: -16.6%; 460 left: -16.6%;
461 position: absolute; 461 position: absolute;
462 visibility: hidden; 462 visibility: hidden;
463 } 463 }
464 464
465 .online .supervised-user-creation-image-stream { 465 .online .supervised-user-creation-image-stream {
466 visibility: visible; 466 visibility: visible;
467 } 467 }
468 468
469 #supervised-user-creation-image-preview-caption { 469 #supervised-user-creation-image-preview-caption {
470 color: dimGray; 470 color: dimGray;
471 font-size: smaller; 471 font-size: smaller;
472 margin: 8px 4px; 472 margin: 8px 4px;
473 } 473 }
474 474
475 .camera #supervised-user-creation-image-preview-caption { 475 .camera #supervised-user-creation-image-preview-caption {
476 display: none; 476 display: none;
477 } 477 }
478 478
479 #supervised-user-creation-flip-photo { 479 #supervised-user-creation-flip-photo {
480 -webkit-transition: opacity 75ms linear;
481 background: url(chrome://theme/IDR_MIRROR_FLIP) no-repeat; 480 background: url(chrome://theme/IDR_MIRROR_FLIP) no-repeat;
482 border: none; 481 border: none;
483 bottom: 44px; /* 8px + image bottom. */ 482 bottom: 44px; /* 8px + image bottom. */
484 display: block; 483 display: block;
485 height: 32px; 484 height: 32px;
486 opacity: 0; 485 opacity: 0;
487 position: absolute; 486 position: absolute;
488 right: 8px; 487 right: 8px;
488 transition: opacity 75ms linear;
489 width: 32px; 489 width: 32px;
490 } 490 }
491 491
492 /* TODO(merkulova): remove when webkit crbug.com/126479 is fixed. */ 492 /* TODO(merkulova): remove when webkit crbug.com/126479 is fixed. */
493 .flip-trick { 493 .flip-trick {
494 -webkit-transform: translateZ(1px); 494 transform: translateZ(1px);
495 } 495 }
496 496
497 html[dir=rtl] #supervised-user-creation-flip-photo { 497 html[dir=rtl] #supervised-user-creation-flip-photo {
498 left: 8px; 498 left: 8px;
499 right: auto; 499 right: auto;
500 } 500 }
501 501
502 /* "Flip photo" button is hidden during flip animation. */ 502 /* "Flip photo" button is hidden during flip animation. */
503 .camera.online:not(.animation) #supervised-user-creation-flip-photo, 503 .camera.online:not(.animation) #supervised-user-creation-flip-photo,
504 .camera.phototaken:not(.animation) #supervised-user-creation-flip-photo { 504 .camera.phototaken:not(.animation) #supervised-user-creation-flip-photo {
(...skipping 15 matching lines...) Expand all
520 display: block; 520 display: block;
521 } 521 }
522 522
523 .camera.live.online #supervised-user-creation-take-photo { 523 .camera.live.online #supervised-user-creation-take-photo {
524 background: url(chrome://theme/IDR_USER_IMAGE_CAPTURE) 524 background: url(chrome://theme/IDR_USER_IMAGE_CAPTURE)
525 no-repeat center -1px; 525 no-repeat center -1px;
526 display: block; 526 display: block;
527 } 527 }
528 528
529 #supervised-user-creation-image-preview .perspective-box { 529 #supervised-user-creation-image-preview .perspective-box {
530 -webkit-perspective: 600px; 530 border: solid 1px #cacaca;
531 border: solid 1px #cacaca; 531 border-radius: 4px;
532 border-radius: 4px; 532 padding: 2px;
533 padding: 2px; 533 perspective: 600px;
534 width: 220px; 534 width: 220px;
535 } 535 }
536 536
537 .supervised-user-creation-image-stream-area .spinner { 537 .supervised-user-creation-image-stream-area .spinner {
538 display: none; 538 display: none;
539 height: 44px; 539 height: 44px;
540 left: 50%; 540 left: 50%;
541 margin-left: -22px; 541 margin-left: -22px;
542 margin-top: -22px; 542 margin-top: -22px;
543 position: absolute; 543 position: absolute;
544 top: 50%; 544 top: 50%;
545 width: 44px; 545 width: 44px;
546 } 546 }
547 547
548 .camera.live:not(.online) .supervised-user-creation-image-stream-area .spinner { 548 .camera.live:not(.online) .supervised-user-creation-image-stream-area .spinner {
549 display: block; 549 display: block;
550 } 550 }
551 551
552 #supervised-user-creation-navigation { 552 #supervised-user-creation-navigation {
553 color: rgba(0, 0, 0, .54); 553 color: rgba(0, 0, 0, .54);
554 left: 0; 554 left: 0;
555 position: absolute; 555 position: absolute;
556 right: 0; 556 right: 0;
557 top: 0; 557 top: 0;
558 z-index: 1; 558 z-index: 1;
559 } 559 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698