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: #888
  51 }
  52
  53 .below-marketing::-webkit-scrollbar-thumb {
  54   background: #eee
  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 40px 0;
 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-y: auto;
 180 }
 181
 182 /* This class will be set for elements with hide-on-import class by JS when
 183  * page is used in 'import' mode
 184  */
 185 #managed-user-creation .hidden-on-import {
 186   display: none;
 187 }
 188
 189 #managed-user-creation-error {
 190   padding: 175px 120px 0;
 191   text-align: center;
 192 }
 193
 194 #managed-user-creation-error .error-icon {
 195   -webkit-margin-after: 50px;
 196 }
 197
 198 #managed-user-creation-error  .error-message-paragraph {
 199   -webkit-margin-after: 40px;
 200   -webkit-margin-before: 30px;
 201 }
 202
 203 .screen-control-button {
 204   margin-left: 10px !important;
 205 }
 206
 207 .import-pod {
 208   height: 32px;
 209   opacity: 0.8;
 210   padding: 6px;
 211   width: 626px;
 212 }
 213
 214 .import-pod .import-pod-name {
 215   color: #000;
 216   display: inline;
 217   max-height: 30px;
 218   vertical-align: top;
 219 }
 220
 221 .import-pod.imported .import-pod-name {
 222   color: rgb(141, 141, 141);
 223 }
 224
 225 .import-pod .import-pod-image {
 226   border: 1px solid gray;
 227   display: inline;
 228   height: 30px;
 229   width: 30px;
 230 }
 231
 232 .manager-pod {
 233   height: 32px;
 234   opacity: 0.8;
 235   padding: 20px;
 236   width: 646px;
 237 }
 238
 239 .manager-pod .managed-user-creation-manager-info-block {
 240   float: left;
 241   min-height: 32px;
 242 }
 243
 244 .manager-pod .managed-user-creation-manager-image {
 245   border: 1px solid gray;
 246   display: inline-block;
 247   height: 30px;
 248   width: 30px;
 249 }
 250
 251 .manager-pod .managed-user-creation-manager-info {
 252   display: inline-block;
 253   margin: 0 8px;
 254   min-height: 32px;
 255 }
 256
 257 .manager-pod .managed-user-creation-manager-info-text {
 258   display: inline-block;
 259   min-height: 32px;
 260   vertical-align: top;
 261 }
 262
 263 .manager-pod .password-block {
 264   float: right;
 265 }
 266
 267 .manager-pod .managed-user-creation-manager-email {
 268   color: #666;
 269   font-size: small;
 270   max-height: 16px;
 271 }
 272
 273 .manager-pod .managed-user-creation-manager-name {
 274   color: #000;
 275   font-size: small;
 276   max-height: 16px;
 277 }
 278
 279 #managed-user-creation-status {
 280   margin: 4px 10px;
 281 }
 282
 283 #managed-user-creation-status .error {
 284   color: rgb(207, 93, 70);
 285 }
 286
 287 #managed-user-creation-status .spinner-wrapper {
 288   -webkit-margin-start: 3px;
 289   display: -webkit-inline-box;
 290   margin-top: 3px;
 291   vertical-align: top;
 292 }
 293
 294 #managed-user-creation-status .id-text {
 295   display: -webkit-inline-box;
 296   margin-top: 1px;
 297   max-width: 480px;
 298   vertical-align: baseline;
 299 }
 300
 301 .manager-pod.focused {
 302   background-color: rgb(66, 129, 244);
 303   opacity: 1;
 304 }
 305
 306 .import-pod.imported.focused {
 307   background-color: rgb(238, 238, 238);
 308   opacity: 1;
 309 }
 310
 311 .import-pod.focused {
 312   background-color: rgb(66, 129, 244);
 313   opacity: 1;
 314 }
 315
 316 .manager-pod.focused .managed-user-creation-manager-email {
 317   color: #fff;
 318 }
 319
 320 .manager-pod.focused .managed-user-creation-manager-name {
 321   color: #fff;
 322 }
 323
 324 #managed-user-creation-import-pane {
 325   border: 1px solid #c8c8c8;
 326   height: 400px;
 327   overflow-x: hidden;
 328   overflow-y: auto;
 329 }
 330
 331 .manager-pod .password-error,
 332 #managed-user-creation .password-error,
 333 #managed-user-creation .duplicate-name {
 334   border: 1px solid red !important;
 335 }
 336
 337 #managed-user-creation-image-picker {
 338   margin-top: 16px;
 339 }
 340
 341 #managed-user-creation-image-grid {
 342   -webkit-user-drag: none;
 343   -webkit-user-select: none;
 344   display: inline-block;
 345   height: 264px;
 346   margin: 0;
 347   outline: none;
 348   overflow: hidden;
 349   padding: 0;
 350   width: 400px;
 351 }
 352
 353 #managed-user-creation-image-grid img {
 354   background-color: white;
 355   height: 50px;
 356   vertical-align: middle;
 357   width: 50px;
 358 }
 359
 360 #managed-user-creation-image-grid > li {
 361   border: 1px solid rgba(0, 0, 0, 0.15);
 362   border-radius: 4px;
 363   display: inline-block;
 364   margin: 4px;
 365   padding: 3px;
 366 }
 367
 368 #managed-user-creation-image-grid [selected] {
 369   border: 2px solid rgb(0, 102, 204);
 370   padding: 2px;
 371 }
 372
 373 #managed-user-creation-image-preview {
 374   float: right;
 375   margin: 4px;
 376   max-width: 220px;
 377   position: relative;
 378 }
 379
 380 html[dir=rtl] #managed-user-creation-image-preview {
 381   float: left;
 382 }
 383
 384 #managed-user-creation-image-preview-img {
 385   display: block;
 386   max-height: 220px;
 387   max-width: 220px;
 388 }
 389
 390 #managed-user-creation-image-preview-img.animated-transform {
 391   -webkit-transition: -webkit-transform 200ms linear;
 392 }
 393
 394 .camera.live #managed-user-creation-image-preview-img {
 395   display: none;
 396 }
 397
 398 .camera.flip-x #managed-user-creation-image-preview-img {
 399   -webkit-transform: rotateY(180deg);
 400 }
 401
 402 .default-image #managed-user-creation-image-preview-img {
 403   background: white;
 404   border: solid 1px #cacaca;
 405   border-radius: 4px;
 406   padding: 2px;
 407 }
 408
 409 .managed-user-creation-image-stream-area {
 410   display: none;
 411   padding: 0;
 412   position: relative;
 413 }
 414
 415 .camera.live .managed-user-creation-image-stream-area {
 416   display: block;
 417 }
 418
 419 #managed-user-creation-image-stream-crop {
 420   -webkit-transition: -webkit-transform 200ms linear;
 421   height: 220px;
 422   overflow: hidden;
 423   position: relative;
 424   width: 220px;
 425 }
 426
 427 .flip-x #managed-user-creation-image-stream-crop {
 428   -webkit-transform: rotateY(180deg);
 429 }
 430
 431 .managed-user-creation-image-stream {
 432   border: solid 1px #cacaca;
 433   height: 220px;
 434   /* Center image for 4:3 aspect ratio. */
 435   left: -16.6%;
 436   position: absolute;
 437   visibility: hidden;
 438 }
 439
 440 .online .managed-user-creation-image-stream {
 441   visibility: visible;
 442 }
 443
 444 #managed-user-creation-image-preview-caption {
 445   color: dimGray;
 446   font-size: smaller;
 447   margin: 8px 4px;
 448 }
 449
 450 .camera #managed-user-creation-image-preview-caption {
 451   display: none;
 452 }
 453
 454 #managed-user-creation-flip-photo {
 455   -webkit-transition: opacity 75ms linear;
 456   background: url('chrome://theme/IDR_MIRROR_FLIP') no-repeat;
 457   border: none;
 458   bottom: 44px;  /* 8px + image bottom. */
 459   display: block;
 460   height: 32px;
 461   opacity: 0;
 462   position: absolute;
 463   right: 8px;
 464   width: 32px;
 465 }
 466
 467 /* TODO(merkulova): remove when webkit crbug.com/126479 is fixed. */
 468 .flip-trick {
 469   -webkit-transform: translateZ(1px);
 470 }
 471
 472 html[dir=rtl] #managed-user-creation-flip-photo {
 473   left: 8px;
 474   right: auto;
 475 }
 476
 477 /* "Flip photo" button is hidden during flip animation. */
 478 .camera.online:not(.animation) #managed-user-creation-flip-photo,
 479 .camera.phototaken:not(.animation) #managed-user-creation-flip-photo {
 480   opacity: 0.75;
 481 }
 482
 483 #managed-user-creation-discard-photo,
 484 #managed-user-creation-take-photo {
 485   display: none;
 486   height: 25px;
 487   margin: 4px 1px;
 488   padding: 0;
 489   width: 220px;
 490 }
 491
 492 .camera:not(.live) #managed-user-creation-discard-photo {
 493   background: url('chrome://theme/IDR_USER_IMAGE_RECYCLE')
 494       no-repeat center 0;
 495   display: block;
 496 }
 497
 498 .camera.live.online #managed-user-creation-take-photo {
 499   background: url('chrome://theme/IDR_USER_IMAGE_CAPTURE')
 500       no-repeat center -1px;
 501   display: block;
 502 }
 503
 504 #managed-user-creation-image-preview .perspective-box {
 505   -webkit-perspective: 600px;
 506 }
 507
 508 .managed-user-creation-image-stream-area .spinner {
 509   display: none;
 510   height: 44px;
 511   left: 50%;
 512   margin-left: -22px;
 513   margin-top: -22px;
 514   position: absolute;
 515   top: 50%;
 516   width: 44px;
 517 }
 518
 519 .camera.live:not(.online) .managed-user-creation-image-stream-area .spinner {
 520   display: block;
 521 }