| OLD | NEW |
|---|
| (Empty) |
| 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 .nofocus:focus { | |
| 19 outline: none; | |
| 20 } | |
| 21 | |
| 22 #managed-user-creation .step-controls { | |
| 23 -webkit-padding-end: 20px; | |
| 24 align-items: center; | |
| 25 bottom: 20px; | |
| 26 display: flex; | |
| 27 justify-content: space-between; | |
| 28 } | |
| 29 | |
| 30 #managed-user-creation .controls-links { | |
| 31 align-items: center; | |
| 32 display: flex; | |
| 33 justify-content: flex-start; | |
| 34 } | |
| 35 | |
| 36 #managed-user-creation .controls-buttons { | |
| 37 align-items: center; | |
| 38 display: flex; | |
| 39 justify-content: flex-end; | |
| 40 } | |
| 41 | |
| 42 #managed-user-creation .logo-padded-text { | |
| 43 padding: 0 17px 0; | |
| 44 } | |
| 45 | |
| 46 #managed-user-creation .marketing { | |
| 47 background-color: green; | |
| 48 height: 344px; | |
| 49 } | |
| 50 | |
| 51 #managed-user-creation .below-marketing { | |
| 52 font-size: 12px; | |
| 53 line-height: 18px; | |
| 54 max-height: 184px; | |
| 55 overflow-x: auto; | |
| 56 } | |
| 57 | |
| 58 #managed-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 #managed-user-creation .page-no-marketing { | |
| 76 height: 470px; | |
| 77 padding: 70px 17px 0; | |
| 78 } | |
| 79 | |
| 80 #managed-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 #managed-user-creation .page-title-explanation { | |
| 92 color: rgb(150, 150, 150); | |
| 93 font-size: 12px; | |
| 94 } | |
| 95 | |
| 96 #managed-user-creation .page-title.inline { | |
| 97 -webkit-margin-end: 1ex; | |
| 98 display: inline-block; | |
| 99 } | |
| 100 | |
| 101 #managed-user-creation .page-title-explanation.inline { | |
| 102 display: inline; | |
| 103 } | |
| 104 | |
| 105 #managed-user-creation .page-title.centred { | |
| 106 text-align: center; | |
| 107 } | |
| 108 | |
| 109 #managed-user-creation .page-title-explanation.centred { | |
| 110 text-align: center; | |
| 111 } | |
| 112 | |
| 113 #managed-user-creation-intro-title { | |
| 114 font-size: x-large; | |
| 115 text-align: center; | |
| 116 } | |
| 117 | |
| 118 #managed-user-creation-intro-placeholder { | |
| 119 background-color: gray; | |
| 120 font-size: x-large; | |
| 121 height: 150px; | |
| 122 text-align: center; | |
| 123 } | |
| 124 | |
| 125 #managed-user-creation-intro .below-marketing { | |
| 126 margin: 20px 21px 2px 40px; | |
| 127 } | |
| 128 | |
| 129 #managed-user-creation-intro-alternate-text { | |
| 130 margin-bottom: 12px; | |
| 131 margin-top: 12px; | |
| 132 } | |
| 133 | |
| 134 #managed-user-creation-intro-text-3 { | |
| 135 margin-top: 12px; | |
| 136 } | |
| 137 | |
| 138 #managed-user-creation-created .below-marketing { | |
| 139 margin: 20px 40px 0; | |
| 140 } | |
| 141 | |
| 142 #managed-user-creation-created-text-1 { | |
| 143 max-width: 600px; | |
| 144 word-wrap: break-word; | |
| 145 } | |
| 146 | |
| 147 #managed-user-creation-created-text-2 { | |
| 148 margin-top: 20px; | |
| 149 max-width: 600px; | |
| 150 word-wrap: break-word; | |
| 151 } | |
| 152 | |
| 153 #managed-user-creation-created-text-3 { | |
| 154 margin-top: 20px; | |
| 155 } | |
| 156 | |
| 157 #managed-user-creation-password-block, | |
| 158 #managed-user-creation-password-title { | |
| 159 margin-top: 10px; | |
| 160 } | |
| 161 | |
| 162 #managed-user-creation-name-block { | |
| 163 margin-bottom: 20px; | |
| 164 margin-top: 10px; | |
| 165 } | |
| 166 | |
| 167 input.managed-user-creation-manager-password, | |
| 168 #managed-user-creation-name, | |
| 169 #managed-user-creation-password { | |
| 170 padding: 4px 6px; | |
| 171 } | |
| 172 #managed-user-creation-password-confirm { | |
| 173 margin-top: 12px; | |
| 174 padding: 4px 6px; | |
| 175 } | |
| 176 | |
| 177 #managed-user-creation-name-error { | |
| 178 visibility: hidden; | |
| 179 } | |
| 180 | |
| 181 #managed-user-creation-name-error.error { | |
| 182 color: rgb(207, 93, 70); | |
| 183 padding-left: 28px; | |
| 184 visibility: visible; | |
| 185 } | |
| 186 | |
| 187 #managed-user-creation-managers-block { | |
| 188 -webkit-flex-direction: column; | |
| 189 display: -webkit-flex; | |
| 190 height: 100%; | |
| 191 } | |
| 192 | |
| 193 #managed-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 #managed-user-creation .hidden-on-import { | |
| 205 display: none; | |
| 206 } | |
| 207 | |
| 208 #managed-user-creation-error { | |
| 209 padding: 175px 120px 0; | |
| 210 text-align: center; | |
| 211 } | |
| 212 | |
| 213 #managed-user-creation-error .error-icon { | |
| 214 -webkit-margin-after: 50px; | |
| 215 } | |
| 216 | |
| 217 #managed-user-creation-error .error-message-paragraph { | |
| 218 -webkit-margin-after: 40px; | |
| 219 -webkit-margin-before: 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 .managed-user-creation-manager-info-block { | |
| 261 float: left; | |
| 262 min-height: 32px; | |
| 263 } | |
| 264 | |
| 265 .manager-pod .managed-user-creation-manager-image { | |
| 266 border: 1px solid gray; | |
| 267 display: inline-block; | |
| 268 height: 30px; | |
| 269 width: 30px; | |
| 270 } | |
| 271 | |
| 272 .manager-pod .managed-user-creation-manager-info { | |
| 273 display: inline-block; | |
| 274 margin: 0 8px; | |
| 275 min-height: 32px; | |
| 276 } | |
| 277 | |
| 278 .manager-pod .managed-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 .managed-user-creation-manager-email { | |
| 289 color: #666; | |
| 290 font-size: small; | |
| 291 max-height: 16px; | |
| 292 } | |
| 293 | |
| 294 .manager-pod .managed-user-creation-manager-name { | |
| 295 color: #000; | |
| 296 font-size: small; | |
| 297 max-height: 16px; | |
| 298 } | |
| 299 | |
| 300 #managed-user-creation-status { | |
| 301 margin: 4px 10px; | |
| 302 } | |
| 303 | |
| 304 #managed-user-creation-status .error { | |
| 305 color: rgb(207, 93, 70); | |
| 306 } | |
| 307 | |
| 308 #managed-user-creation-status .spinner-wrapper { | |
| 309 -webkit-margin-start: 3px; | |
| 310 display: -webkit-inline-box; | |
| 311 margin-top: 3px; | |
| 312 vertical-align: top; | |
| 313 } | |
| 314 | |
| 315 #managed-user-creation-status .id-text { | |
| 316 display: -webkit-inline-box; | |
| 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 .managed-user-creation-manager-email { | |
| 338 color: #fff; | |
| 339 } | |
| 340 | |
| 341 .manager-pod.focused .managed-user-creation-manager-name { | |
| 342 color: #fff; | |
| 343 } | |
| 344 | |
| 345 #managed-user-creation-import-pane { | |
| 346 border: 1px solid #c8c8c8; | |
| 347 height: 400px; | |
| 348 overflow-x: hidden; | |
| 349 overflow-y: auto; | |
| 350 } | |
| 351 | |
| 352 #managed-user-creation-import .page-title-explanation { | |
| 353 padding-bottom: 10px; | |
| 354 padding-top: 6px; | |
| 355 } | |
| 356 | |
| 357 .manager-pod .password-error, | |
| 358 #managed-user-creation .password-error, | |
| 359 #managed-user-creation .duplicate-name { | |
| 360 border: 1px solid red !important; | |
| 361 } | |
| 362 | |
| 363 #managed-user-creation-image-picker { | |
| 364 margin-top: 16px; | |
| 365 } | |
| 366 | |
| 367 #managed-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 #managed-user-creation-image-grid img { | |
| 380 background-color: white; | |
| 381 height: 50px; | |
| 382 vertical-align: middle; | |
| 383 width: 50px; | |
| 384 } | |
| 385 | |
| 386 #managed-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 #managed-user-creation-image-grid [selected] { | |
| 395 border: 2px solid rgb(0, 102, 204); | |
| 396 padding: 2px; | |
| 397 } | |
| 398 | |
| 399 #managed-user-creation-image-preview { | |
| 400 float: right; | |
| 401 margin: 4px; | |
| 402 max-width: 220px; | |
| 403 position: relative; | |
| 404 } | |
| 405 | |
| 406 html[dir=rtl] #managed-user-creation-image-preview { | |
| 407 float: left; | |
| 408 } | |
| 409 | |
| 410 #managed-user-creation-image-preview-img { | |
| 411 display: block; | |
| 412 max-height: 220px; | |
| 413 max-width: 220px; | |
| 414 } | |
| 415 | |
| 416 #managed-user-creation-image-preview-img.animated-transform { | |
| 417 -webkit-transition: -webkit-transform 200ms linear; | |
| 418 } | |
| 419 | |
| 420 .camera.live #managed-user-creation-image-preview-img { | |
| 421 display: none; | |
| 422 } | |
| 423 | |
| 424 .camera.flip-x #managed-user-creation-image-preview-img { | |
| 425 -webkit-transform: rotateY(180deg); | |
| 426 } | |
| 427 | |
| 428 .default-image #managed-user-creation-image-preview-img { | |
| 429 background: white; | |
| 430 border: solid 1px #cacaca; | |
| 431 border-radius: 4px; | |
| 432 padding: 2px; | |
| 433 } | |
| 434 | |
| 435 .managed-user-creation-image-stream-area { | |
| 436 display: none; | |
| 437 padding: 0; | |
| 438 position: relative; | |
| 439 } | |
| 440 | |
| 441 .camera.live .managed-user-creation-image-stream-area { | |
| 442 display: block; | |
| 443 } | |
| 444 | |
| 445 #managed-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 #managed-user-creation-image-stream-crop { | |
| 454 -webkit-transform: rotateY(180deg); | |
| 455 } | |
| 456 | |
| 457 .managed-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 .managed-user-creation-image-stream { | |
| 467 visibility: visible; | |
| 468 } | |
| 469 | |
| 470 #managed-user-creation-image-preview-caption { | |
| 471 color: dimGray; | |
| 472 font-size: smaller; | |
| 473 margin: 8px 4px; | |
| 474 } | |
| 475 | |
| 476 .camera #managed-user-creation-image-preview-caption { | |
| 477 display: none; | |
| 478 } | |
| 479 | |
| 480 #managed-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] #managed-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) #managed-user-creation-flip-photo, | |
| 505 .camera.phototaken:not(.animation) #managed-user-creation-flip-photo { | |
| 506 opacity: 0.75; | |
| 507 } | |
| 508 | |
| 509 #managed-user-creation-discard-photo, | |
| 510 #managed-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) #managed-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 #managed-user-creation-take-photo { | |
| 525 background: url('chrome://theme/IDR_USER_IMAGE_CAPTURE') | |
| 526 no-repeat center -1px; | |
| 527 display: block; | |
| 528 } | |
| 529 | |
| 530 #managed-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 .managed-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) .managed-user-creation-image-stream-area .spinner { | |
| 550 display: block; | |
| 551 } | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 403343002:
Rename "managed (mode|user)" to "supervised user" (part 8) (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src