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

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