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