src/chrome/browser/resources/chromeos/login/screen_supervised_user_creation.css

   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
   3  * found in the LICENSE file.
   4  *
   5  * This is the stylesheet used by the Locally managed user creation flow screen.
   6  */
   7
   8 #supervised-user-creation {
   9   height: 609px; /* Same size as GAIA sign in screen.*/
  10   padding: 0 0;  /* Some screens have elements right next to borders. */
  11   width: 722px;
  12 }
  13
  14 #supervised-user-creation .step-contents {
  15   height: 100%;
  16 }
  17
  18 #supervised-user-creation .nofocus:focus {
  19   outline: none;
  20 }
  21
  22 #supervised-user-creation .step-controls {
  23   -webkit-padding-end: 20px;
  24   align-items: center;
  25   bottom: 20px;
  26   display: flex;
  27   justify-content: flex-end;
  28 }
  29
  30 #supervised-user-creation .controls-links {
  31   align-items: center;
  32   display: flex;
  33   justify-content: flex-start;
  34 }
  35
  36 #supervised-user-creation .controls-buttons {
  37   align-items: center;
  38   display: flex;
  39   justify-content: flex-end;
  40 }
  41
  42 #supervised-user-creation .logo-padded-text {
  43   padding: 0 17px 0;
  44 }
  45
  46 #supervised-user-creation .marketing {
  47   background-color: green;
  48   height: 344px;
  49 }
  50
  51 #supervised-user-creation .below-marketing {
  52   font-size: 12px;
  53   line-height: 18px;
  54   max-height: 184px;
  55   overflow-x: auto;
  56 }
  57
  58 #supervised-user-creation .button-link {
  59   font-size: small;
  60   padding: 0 20px;
  61 }
  62
  63 .below-marketing::-webkit-scrollbar {
  64   width: 8px;
  65 }
  66
  67 .below-marketing::-webkit-scrollbar-track-piece {
  68   background: #eee;
  69 }
  70
  71 .below-marketing::-webkit-scrollbar-thumb {
  72   background: #888;
  73 }
  74
  75 #supervised-user-creation .page-no-marketing {
  76   height: 470px;
  77   padding: 70px 17px 0;
  78 }
  79
  80 #supervised-user-creation .page-title {
  81   color: #000;
  82   font-size: 15px;
  83   line-height: 24px;
  84 }
  85
  86 .below-marketing strong {
  87   color: #000;
  88   font-weight: bold;
  89 }
  90
  91 #supervised-user-creation .page-title-explanation {
  92   color: rgb(150, 150, 150);
  93   font-size: 12px;
  94 }
  95
  96 #supervised-user-creation .page-title.inline {
  97   -webkit-margin-end: 1ex;
  98   display: inline-block;
  99 }
 100
 101 #supervised-user-creation .page-title-explanation.inline {
 102   display: inline;
 103 }
 104
 105 #supervised-user-creation .page-title.centred {
 106   text-align: center;
 107 }
 108
 109 #supervised-user-creation .page-title-explanation.centred {
 110   text-align: center;
 111 }
 112
 113 #supervised-user-creation-intro-title {
 114   font-size: x-large;
 115   text-align: center;
 116 }
 117
 118 #supervised-user-creation-intro-placeholder {
 119   background-color: gray;
 120   font-size: x-large;
 121   height: 150px;
 122   text-align: center;
 123 }
 124
 125 #supervised-user-creation-intro .below-marketing {
 126   margin: 20px 21px 2px 40px;
 127 }
 128
 129 #supervised-user-creation-intro-alternate-text {
 130   margin-bottom: 12px;
 131   margin-top: 12px;
 132 }
 133
 134 #supervised-user-creation-intro-text-3 {
 135   margin-top: 12px;
 136 }
 137
 138 #supervised-user-creation-created .below-marketing {
 139   margin: 20px 40px 0;
 140 }
 141
 142 #supervised-user-creation-created-text-1 {
 143   max-width: 600px;
 144   word-wrap: break-word;
 145 }
 146
 147 #supervised-user-creation-created-text-2 {
 148   margin-top: 20px;
 149   max-width: 600px;
 150   word-wrap: break-word;
 151 }
 152
 153 #supervised-user-creation-created-text-3 {
 154   margin-top: 20px;
 155 }
 156
 157 #supervised-user-creation-password-block,
 158 #supervised-user-creation-password-title {
 159   margin-top: 10px;
 160 }
 161
 162 #supervised-user-creation-name-block {
 163   margin-bottom: 20px;
 164   margin-top: 10px;
 165 }
 166
 167 input.supervised-user-creation-manager-password,
 168 #supervised-user-creation-name,
 169 #supervised-user-creation-password {
 170   padding: 4px 6px;
 171 }
 172 #supervised-user-creation-password-confirm {
 173   margin-top: 12px;
 174   padding: 4px 6px;
 175 }
 176
 177 #supervised-user-creation-name-error {
 178   visibility: hidden;
 179 }
 180
 181 #supervised-user-creation-name-error.error {
 182   color: rgb(207, 93, 70);
 183   padding-left: 28px;
 184   visibility: visible;
 185 }
 186
 187 #supervised-user-creation-managers-block {
 188   display: flex;
 189   flex-direction: column;
 190   height: 100%;
 191 }
 192
 193 #supervised-user-creation-managers-pane {
 194   border: 1px solid #c8c8c8;
 195   height: 100%;
 196   margin-top: 20px;
 197   overflow-x: hidden;
 198   overflow-y: auto;
 199 }
 200
 201 /* This class will be set for elements with hide-on-import class by JS when
 202  * page is used in 'import' mode
 203  */
 204 #supervised-user-creation .hidden-on-import {
 205   display: none;
 206 }
 207
 208 #supervised-user-creation-error {
 209   padding: 175px 120px 0;
 210   text-align: center;
 211 }
 212
 213 #supervised-user-creation-error .error-icon {
 214   margin-bottom: 50px;
 215 }
 216
 217 #supervised-user-creation-error  .error-message-paragraph {
 218   margin-bottom: 40px;
 219   margin-top: 30px;
 220 }
 221
 222 .screen-control-button {
 223   margin-left: 10px !important;
 224 }
 225
 226 .import-pod {
 227   height: 32px;
 228   opacity: 0.8;
 229   padding: 20px;
 230   width: 646px;
 231 }
 232
 233 .import-pod .import-pod-name {
 234   color: #000;
 235   display: inline-block;
 236   height: 32px;
 237   max-height: 32px;
 238   padding-top: 6px;
 239   vertical-align: top;
 240 }
 241
 242 .import-pod.imported .import-pod-name {
 243   color: rgb(141, 141, 141);
 244 }
 245
 246 .import-pod .import-pod-image {
 247   border: 1px solid gray;
 248   display: inline;
 249   height: 30px;
 250   width: 30px;
 251 }
 252
 253 .manager-pod {
 254   height: 32px;
 255   opacity: 0.8;
 256   padding: 20px;
 257   width: 646px;
 258 }
 259
 260 .manager-pod .supervised-user-creation-manager-info-block {
 261   float: left;
 262   min-height: 32px;
 263 }
 264
 265 .manager-pod .supervised-user-creation-manager-image {
 266   border: 1px solid gray;
 267   display: inline-block;
 268   height: 30px;
 269   width: 30px;
 270 }
 271
 272 .manager-pod .supervised-user-creation-manager-info {
 273   display: inline-block;
 274   margin: 0 8px;
 275   min-height: 32px;
 276 }
 277
 278 .manager-pod .supervised-user-creation-manager-info-text {
 279   display: inline-block;
 280   min-height: 32px;
 281   vertical-align: top;
 282 }
 283
 284 .manager-pod .password-block {
 285   float: right;
 286 }
 287
 288 .manager-pod .supervised-user-creation-manager-email {
 289   color: #666;
 290   font-size: small;
 291   max-height: 16px;
 292 }
 293
 294 .manager-pod .supervised-user-creation-manager-name {
 295   color: #000;
 296   font-size: small;
 297   max-height: 16px;
 298 }
 299
 300 #supervised-user-creation-status {
 301   margin: 4px 10px;
 302 }
 303
 304 #supervised-user-creation-status .error {
 305   color: rgb(207, 93, 70);
 306 }
 307
 308 #supervised-user-creation-status .spinner-wrapper {
 309   -webkit-margin-start: 3px;
 310   display: inline-flex;
 311   margin-top: 3px;
 312   vertical-align: top;
 313 }
 314
 315 #supervised-user-creation-status .id-text {
 316   display: inline-flex;
 317   margin-top: 1px;
 318   max-width: 480px;
 319   vertical-align: baseline;
 320 }
 321
 322 .manager-pod.focused {
 323   background-color: rgb(66, 129, 244);
 324   opacity: 1;
 325 }
 326
 327 .import-pod.imported.focused {
 328   background-color: rgb(238, 238, 238);
 329   opacity: 1;
 330 }
 331
 332 .import-pod.focused {
 333   background-color: rgb(66, 129, 244);
 334   opacity: 1;
 335 }
 336
 337 .manager-pod.focused .supervised-user-creation-manager-email {
 338   color: #fff;
 339 }
 340
 341 .manager-pod.focused .supervised-user-creation-manager-name {
 342   color: #fff;
 343 }
 344
 345 #supervised-user-creation-import-pane {
 346   border: 1px solid #c8c8c8;
 347   height: 400px;
 348   overflow-x: hidden;
 349   overflow-y: auto;
 350 }
 351
 352 #supervised-user-creation-import .page-title-explanation {
 353   padding-bottom: 10px;
 354   padding-top: 6px;
 355 }
 356
 357 .manager-pod .password-error,
 358 #supervised-user-creation .password-error,
 359 #supervised-user-creation .duplicate-name {
 360   border: 1px solid red !important;
 361 }
 362
 363 #supervised-user-creation-image-picker {
 364   margin-top: 16px;
 365 }
 366
 367 #supervised-user-creation-image-grid {
 368   -webkit-user-drag: none;
 369   -webkit-user-select: none;
 370   display: inline-block;
 371   height: 264px;
 372   margin: 0;
 373   outline: none;
 374   overflow: hidden;
 375   padding: 0;
 376   width: 400px;
 377 }
 378
 379 #supervised-user-creation-image-grid img {
 380   background-color: white;
 381   height: 50px;
 382   vertical-align: middle;
 383   width: 50px;
 384 }
 385
 386 #supervised-user-creation-image-grid > li {
 387   border: 1px solid rgba(0, 0, 0, 0.15);
 388   border-radius: 4px;
 389   display: inline-block;
 390   margin: 4px;
 391   padding: 3px;
 392 }
 393
 394 #supervised-user-creation-image-grid [selected] {
 395   border: 2px solid rgb(0, 102, 204);
 396   padding: 2px;
 397 }
 398
 399 #supervised-user-creation-image-preview {
 400   float: right;
 401   margin: 4px;
 402   max-width: 220px;
 403   position: relative;
 404 }
 405
 406 html[dir=rtl] #supervised-user-creation-image-preview {
 407   float: left;
 408 }
 409
 410 #supervised-user-creation-image-preview-img {
 411   display: block;
 412   max-height: 220px;
 413   max-width: 220px;
 414 }
 415
 416 #supervised-user-creation-image-preview-img.animated-transform {
 417   -webkit-transition: -webkit-transform 200ms linear;
 418 }
 419
 420 .camera.live #supervised-user-creation-image-preview-img {
 421   display: none;
 422 }
 423
 424 .camera.flip-x #supervised-user-creation-image-preview-img {
 425   -webkit-transform: rotateY(180deg);
 426 }
 427
 428 .default-image #supervised-user-creation-image-preview-img {
 429   background: white;
 430   border: solid 1px #cacaca;
 431   border-radius: 4px;
 432   padding: 2px;
 433 }
 434
 435 .supervised-user-creation-image-stream-area {
 436   display: none;
 437   padding: 0;
 438   position: relative;
 439 }
 440
 441 .camera.live .supervised-user-creation-image-stream-area {
 442   display: block;
 443 }
 444
 445 #supervised-user-creation-image-stream-crop {
 446   -webkit-transition: -webkit-transform 200ms linear;
 447   height: 220px;
 448   overflow: hidden;
 449   position: relative;
 450   width: 220px;
 451 }
 452
 453 .flip-x #supervised-user-creation-image-stream-crop {
 454   -webkit-transform: rotateY(180deg);
 455 }
 456
 457 .supervised-user-creation-image-stream {
 458   border: solid 1px #cacaca;
 459   height: 220px;
 460   /* Center image for 4:3 aspect ratio. */
 461   left: -16.6%;
 462   position: absolute;
 463   visibility: hidden;
 464 }
 465
 466 .online .supervised-user-creation-image-stream {
 467   visibility: visible;
 468 }
 469
 470 #supervised-user-creation-image-preview-caption {
 471   color: dimGray;
 472   font-size: smaller;
 473   margin: 8px 4px;
 474 }
 475
 476 .camera #supervised-user-creation-image-preview-caption {
 477   display: none;
 478 }
 479
 480 #supervised-user-creation-flip-photo {
 481   -webkit-transition: opacity 75ms linear;
 482   background: url('chrome://theme/IDR_MIRROR_FLIP') no-repeat;
 483   border: none;
 484   bottom: 44px;  /* 8px + image bottom. */
 485   display: block;
 486   height: 32px;
 487   opacity: 0;
 488   position: absolute;
 489   right: 8px;
 490   width: 32px;
 491 }
 492
 493 /* TODO(merkulova): remove when webkit crbug.com/126479 is fixed. */
 494 .flip-trick {
 495   -webkit-transform: translateZ(1px);
 496 }
 497
 498 html[dir=rtl] #supervised-user-creation-flip-photo {
 499   left: 8px;
 500   right: auto;
 501 }
 502
 503 /* "Flip photo" button is hidden during flip animation. */
 504 .camera.online:not(.animation) #supervised-user-creation-flip-photo,
 505 .camera.phototaken:not(.animation) #supervised-user-creation-flip-photo {
 506   opacity: 0.75;
 507 }
 508
 509 #supervised-user-creation-discard-photo,
 510 #supervised-user-creation-take-photo {
 511   display: none;
 512   height: 25px;
 513   margin: 4px 1px;
 514   padding: 0;
 515   width: 220px;
 516 }
 517
 518 .camera:not(.live) #supervised-user-creation-discard-photo {
 519   background: url('chrome://theme/IDR_USER_IMAGE_RECYCLE')
 520       no-repeat center center;
 521   display: block;
 522 }
 523
 524 .camera.live.online #supervised-user-creation-take-photo {
 525   background: url('chrome://theme/IDR_USER_IMAGE_CAPTURE')
 526       no-repeat center -1px;
 527   display: block;
 528 }
 529
 530 #supervised-user-creation-image-preview .perspective-box {
 531   -webkit-perspective: 600px;
 532    border: solid 1px #cacaca;
 533    border-radius: 4px;
 534    padding: 2px;
 535    width: 220px;
 536 }
 537
 538 .supervised-user-creation-image-stream-area .spinner {
 539   display: none;
 540   height: 44px;
 541   left: 50%;
 542   margin-left: -22px;
 543   margin-top: -22px;
 544   position: absolute;
 545   top: 50%;
 546   width: 44px;
 547 }
 548
 549 .camera.live:not(.online) .supervised-user-creation-image-stream-area .spinner {
 550   display: block;
 551 }