| OLD | NEW |
| 1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 /* Copyright (c) 2012 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 Out of the box experience (OOBE) flow, | 5 * This is the stylesheet used by the Out of the box experience (OOBE) flow, |
| 6 * sign in and lock screens. | 6 * sign in and lock screens. |
| 7 */ | 7 */ |
| 8 | 8 |
| 9 html, | 9 html, |
| 10 body { | 10 body { |
| (...skipping 30 matching lines...) Expand all Loading... |
| 41 | 41 |
| 42 #inner-container { | 42 #inner-container { |
| 43 height: 294px; | 43 height: 294px; |
| 44 padding: 20px; | 44 padding: 20px; |
| 45 position: relative; | 45 position: relative; |
| 46 width: 640px; | 46 width: 640px; |
| 47 } | 47 } |
| 48 | 48 |
| 49 #security-info a, | 49 #security-info a, |
| 50 #eula a { | 50 #eula a { |
| 51 color: #006668; | 51 color: rgb(0, 102, 104); |
| 52 text-decoration: none; | 52 text-decoration: none; |
| 53 } | 53 } |
| 54 | 54 |
| 55 #eula #stats-help-link { | 55 #eula #stats-help-link { |
| 56 color: #316ac5; | 56 color: rgb(49, 106, 197); |
| 57 } | 57 } |
| 58 | 58 |
| 59 hr.shadow { | 59 hr.shadow { |
| 60 -webkit-mask: -webkit-linear-gradient(left, rgba(0,0,0,0), | 60 -webkit-mask: -webkit-linear-gradient(left, rgba(0,0,0,0), |
| 61 black 50%, rgba(0,0,0,0)); | 61 black 50%, rgba(0,0,0,0)); |
| 62 border: none; | 62 border: none; |
| 63 opacity: 0.3 | 63 opacity: 0.3 |
| 64 } | 64 } |
| 65 | 65 |
| 66 hr.top { | 66 hr.top { |
| (...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 104 | 104 |
| 105 #header-sections { | 105 #header-sections { |
| 106 display: inline-block; | 106 display: inline-block; |
| 107 height: 30px; | 107 height: 30px; |
| 108 position: relative; | 108 position: relative; |
| 109 } | 109 } |
| 110 | 110 |
| 111 .header-section:before { | 111 .header-section:before { |
| 112 /* Divider in header between product name and title, | 112 /* Divider in header between product name and title, |
| 113 like "[Product name] > [step header]" */ | 113 like "[Product name] > [step header]" */ |
| 114 content: "\00A0\203A\00A0\00A0"; | 114 content: '\00A0\203A\00A0\00A0'; |
| 115 } | 115 } |
| 116 | 116 |
| 117 .header-section { | 117 .header-section { |
| 118 -webkit-transition: left 200ms, opacity 200ms ease-in-out; | 118 -webkit-transition: left 200ms, opacity 200ms ease-in-out; |
| 119 position: absolute; | 119 position: absolute; |
| 120 text-transform: lowercase; | 120 text-transform: lowercase; |
| 121 width: 20em; | 121 width: 20em; |
| 122 } | 122 } |
| 123 | 123 |
| 124 html[dir=rtl] .header-section { | 124 html[dir=rtl] .header-section { |
| (...skipping 76 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 201 height: 8px; | 201 height: 8px; |
| 202 opacity: 0.1; | 202 opacity: 0.1; |
| 203 width: 8px; | 203 width: 8px; |
| 204 } | 204 } |
| 205 | 205 |
| 206 .progdot-active { | 206 .progdot-active { |
| 207 opacity: 0.5; | 207 opacity: 0.5; |
| 208 } | 208 } |
| 209 | 209 |
| 210 .control-with-label { | 210 .control-with-label { |
| 211 margin: 10px 0 10px 0; | 211 -webkit-box-align: start; |
| 212 display: -webkit-box; | 212 display: -webkit-box; |
| 213 -webkit-box-align: start; | 213 margin: 10px 0; |
| 214 } | 214 } |
| 215 | 215 |
| 216 .menu-area { | 216 .menu-area { |
| 217 margin: 5px 5px 5px 5px; | 217 margin: 5px; |
| 218 } | 218 } |
| 219 | 219 |
| 220 .menu-control { | 220 .menu-control { |
| 221 font-family: inherit; | 221 font-family: inherit; |
| 222 line-height: 20px; | 222 line-height: 20px; |
| 223 position: relative; | 223 position: relative; |
| 224 width: 250px; | 224 width: 250px; |
| 225 } | 225 } |
| 226 | 226 |
| 227 .label { | 227 .label { |
| (...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 268 } | 268 } |
| 269 | 269 |
| 270 #user-image-grid img { | 270 #user-image-grid img { |
| 271 background-color: white; | 271 background-color: white; |
| 272 height: 50px; | 272 height: 50px; |
| 273 vertical-align: middle; | 273 vertical-align: middle; |
| 274 width: 50px; | 274 width: 50px; |
| 275 } | 275 } |
| 276 | 276 |
| 277 #user-image-grid [role=listitem] { | 277 #user-image-grid [role=listitem] { |
| 278 border: 1px solid rgba(0, 0, 0, 0.15); |
| 278 border-radius: 4px; | 279 border-radius: 4px; |
| 279 border: 1px solid rgba(0, 0, 0, 0.15); | |
| 280 display: inline-block; | 280 display: inline-block; |
| 281 margin: 4px; | 281 margin: 4px; |
| 282 padding: 3px; | 282 padding: 3px; |
| 283 } | 283 } |
| 284 | 284 |
| 285 #user-image-grid [selected] { | 285 #user-image-grid [selected] { |
| 286 border: 2px solid rgb(0, 102, 204); | 286 border: 2px solid rgb(0, 102, 204); |
| 287 padding: 2px; | 287 padding: 2px; |
| 288 } | 288 } |
| 289 | 289 |
| (...skipping 10 matching lines...) Expand all Loading... |
| 300 top: 3px; | 300 top: 3px; |
| 301 visibility: hidden; | 301 visibility: hidden; |
| 302 width: 50px; | 302 width: 50px; |
| 303 } | 303 } |
| 304 | 304 |
| 305 .profile-image-loading #profile-image .spinner-bg { | 305 .profile-image-loading #profile-image .spinner-bg { |
| 306 visibility: visible; | 306 visibility: visible; |
| 307 } | 307 } |
| 308 | 308 |
| 309 #profile-image .spinner { | 309 #profile-image .spinner { |
| 310 left: 14px; |
| 310 position: absolute; | 311 position: absolute; |
| 311 left: 14px; | |
| 312 top: 14px; | 312 top: 14px; |
| 313 } | 313 } |
| 314 | 314 |
| 315 #user-image-preview { | 315 #user-image-preview { |
| 316 border-radius: 4px; | 316 border-radius: 4px; |
| 317 float: right; | 317 float: right; |
| 318 margin: 4px; | 318 margin: 4px; |
| 319 max-width: 220px; | 319 max-width: 220px; |
| 320 } | 320 } |
| 321 | 321 |
| 322 html[dir=rtl] #user-image-preview { | 322 html[dir=rtl] #user-image-preview { |
| 323 float: left; | 323 float: left; |
| 324 } | 324 } |
| 325 | 325 |
| 326 #user-image-preview-img { | 326 #user-image-preview-img { |
| 327 max-height: 220px; | 327 max-height: 220px; |
| 328 max-width: 220px; | 328 max-width: 220px; |
| 329 } | 329 } |
| 330 | 330 |
| 331 .default-image #user-image-preview-img { | 331 .default-image #user-image-preview-img { |
| 332 background: white; |
| 332 border: solid 1px #cacaca; | 333 border: solid 1px #cacaca; |
| 333 background: white; | |
| 334 } | 334 } |
| 335 | 335 |
| 336 #user-image-preview-caption { | 336 #user-image-preview-caption { |
| 337 color: dimGray; | 337 color: dimGray; |
| 338 font-size: smaller; | 338 font-size: smaller; |
| 339 margin: 8px 4px; | 339 margin: 8px 4px; |
| 340 } | 340 } |
| 341 | 341 |
| 342 #footer { | 342 #footer { |
| 343 height: 28px; /* Same as button height */ | 343 height: 28px; /* Same as button height */ |
| (...skipping 64 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 408 #oobe.eula + #security-info { | 408 #oobe.eula + #security-info { |
| 409 visibility: visible; | 409 visibility: visible; |
| 410 } | 410 } |
| 411 | 411 |
| 412 #update div { | 412 #update div { |
| 413 margin: 6em auto; | 413 margin: 6em auto; |
| 414 width: 32em; | 414 width: 32em; |
| 415 } | 415 } |
| 416 | 416 |
| 417 #update #update-cancel-hint { | 417 #update #update-cancel-hint { |
| 418 color: #a00; | 418 color: rgb(170, 0, 0); |
| 419 left: 50%; | 419 left: 50%; |
| 420 margin: 1em -16em; | 420 margin: 1em -16em; |
| 421 position: absolute; | 421 position: absolute; |
| 422 } | 422 } |
| 423 | 423 |
| 424 #update progress { | 424 #update progress { |
| 425 margin: 13px 0; | 425 margin: 13px 0; |
| 426 width: 380px; | 426 width: 380px; |
| 427 } | 427 } |
| 428 | 428 |
| (...skipping 29 matching lines...) Expand all Loading... |
| 458 | 458 |
| 459 #eulas.one-column #cros-eula-frame { | 459 #eulas.one-column #cros-eula-frame { |
| 460 width: 100%; | 460 width: 100%; |
| 461 } | 461 } |
| 462 | 462 |
| 463 #eulas.one-column #oem-eula { | 463 #eulas.one-column #oem-eula { |
| 464 display: none; | 464 display: none; |
| 465 } | 465 } |
| 466 | 466 |
| 467 #security-info-popup { | 467 #security-info-popup { |
| 468 -webkit-box-shadow: 0 5px 80px #505050; | |
| 469 background: white; | 468 background: white; |
| 469 border: 1px solid rgb(188, 193, 208); |
| 470 border-radius: 2px; | 470 border-radius: 2px; |
| 471 border: 1px solid rgb(188, 193, 208); | 471 box-shadow: 0 5px 80px #505050; |
| 472 min-height: 250px; | 472 min-height: 250px; |
| 473 position: relative; | 473 position: relative; |
| 474 width: 460px; | 474 width: 460px; |
| 475 z-index: 10; | 475 z-index: 10; |
| 476 } | 476 } |
| 477 | 477 |
| 478 #security-info-popup h1 { | 478 #security-info-popup h1 { |
| 479 -webkit-padding-end: 24px; | 479 -webkit-padding-end: 24px; |
| 480 -webkit-user-select: none; | 480 -webkit-user-select: none; |
| 481 background: -webkit-linear-gradient(white, #F8F8F8); | 481 background: -webkit-linear-gradient(white, #F8F8F8); |
| 482 color: #53637d; | 482 color: rgb(83, 99, 125); |
| 483 font-size: 105%; | 483 font-size: 105%; |
| 484 font-weight: bold; | 484 font-weight: bold; |
| 485 margin: 0; | 485 margin: 0; |
| 486 padding: 10px 15px 8px 15px; | 486 padding: 10px 15px 8px 15px; |
| 487 text-shadow: white 0 1px 2px; | 487 text-shadow: white 0 1px 2px; |
| 488 } | 488 } |
| 489 | 489 |
| 490 .popup-content-area { | 490 .popup-content-area { |
| 491 padding: 0 20px 60px 20px; | 491 padding: 0 20px 60px 20px; |
| 492 } | 492 } |
| (...skipping 18 matching lines...) Expand all Loading... |
| 511 } | 511 } |
| 512 | 512 |
| 513 #popup-overlay { | 513 #popup-overlay { |
| 514 -webkit-box-align: center; | 514 -webkit-box-align: center; |
| 515 -webkit-box-pack: center; | 515 -webkit-box-pack: center; |
| 516 -webkit-transition: 250ms opacity; | 516 -webkit-transition: 250ms opacity; |
| 517 background: rgba(255, 255, 255, .75); | 517 background: rgba(255, 255, 255, .75); |
| 518 bottom: 0; | 518 bottom: 0; |
| 519 display: -webkit-box; | 519 display: -webkit-box; |
| 520 left: 0; | 520 left: 0; |
| 521 padding-bottom: 130px; | |
| 522 padding: 20px; | 521 padding: 20px; |
| 523 position: fixed; | 522 position: fixed; |
| 524 right: 0; | 523 right: 0; |
| 525 top: 0; | 524 top: 0; |
| 526 z-index: 5; | 525 z-index: 5; |
| 527 } | 526 } |
| 528 | 527 |
| 529 #enroll-login-screen { | 528 #enroll-login-screen { |
| 530 display: -webkit-box; | 529 display: -webkit-box; |
| 531 width: 630px; | 530 width: 630px; |
| (...skipping 227 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 759 } | 758 } |
| 760 | 759 |
| 761 #notification-area a { | 760 #notification-area a { |
| 762 color: rgb(37, 79, 155); | 761 color: rgb(37, 79, 155); |
| 763 } | 762 } |
| 764 | 763 |
| 765 #notification-area .butter-bar { | 764 #notification-area .butter-bar { |
| 766 margin: 0 auto; | 765 margin: 0 auto; |
| 767 max-width: 850px; | 766 max-width: 850px; |
| 768 } | 767 } |
| OLD | NEW |