chrome/browser/resources/sync_setup_overlay.css

   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
   3  * found in the LICENSE file. */
   4
   5 /* TODO(jhawkins): Organize these by page. */
   6
   7 #sync-setup-overlay * h4 {
   8   margin: 5px 0;
   9 }
  10
  11 #sync-setup-overlay * form {
  12   -webkit-user-select: none;
  13 }
  14
  15 #sync-setup-overlay * .content-area {
  16   padding: 10px 15px;
  17 }
  18
  19 .action-area-link-container {
  20   -webkit-box-flex: 1;
  21 }
  22
  23 .sync-customize-section-container {
  24   margin: 5px 0 10px 0;
  25 }
  26
  27 #sync-custom-passphrase {
  28   margin: 0 25px;
  29 }
  30
  31 #sync-passphrase-message {
  32   color: gray;
  33 }
  34
  35 .sync-custom-passphrase-input {
  36   margin: 10px 0;
  37 }
  38
  39 #sync-existing-passphrase-container {
  40   background: rgb(255, 242, 158);
  41   border: 1px solid rgb(212, 205, 173);
  42   padding: 10px;
  43 }
  44
  45 #sync-select-container {
  46   margin-bottom: 10px;
  47 }
  48
  49 #sync-instructions-container {
  50   line-height: 1.8em;
  51   margin-bottom: 30px;
  52 }
  53
  54 #choose-data-types-body {
  55   -webkit-column-count: 3;
  56   margin: 10px 0;
  57 }
  58
  59 #choose-data-types-body > .checkbox:first-child {
  60   margin-top: 0;
  61 }
  62
  63 #choose-data-types-body > .checkbox:last-child {
  64   margin-bottom: 0;
  65 }
  66
  67 #sync-setup-overlay {
  68   -webkit-user-select: none;
  69   background-color: white;
  70   margin-bottom: 6px;
  71   margin-top: 6px;
  72   width: 500px;
  73 }
  74
  75 #sync-setup-overlay * a:link {
  76   color: rgb(0, 0, 204);
  77 }
  78
  79 #sync-setup-overlay * a:visited {
  80   color: rgb(85, 26, 139);
  81 }
  82
  83 #sync-setup-overlay * a:active {
  84   color: rgb(255, 0, 0);
  85 }
  86
  87 #sync-setup-overlay * hr {
  88   background-color: #ddd;
  89   border: 0;
  90   height: 1px;
  91   text-align: left;
  92   width: 100%;
  93 }
  94
  95 #sync-setup-overlay * input[type='button'],
  96 #sync-setup-overlay * input[type='submit'] {
  97   min-height: 26px;
  98   min-width: 87px;
  99 }
 100
 101 #email-readonly {
 102   font-size: 15px;
 103   height: 29px;
 104   line-height: 29px;
 105   margin: 0;
 106 }
 107
 108 #passphrase-encryption-message,
 109 #encryption-section-message {
 110   color: gray;
 111   margin-bottom: 5px;
 112 }
 113
 114 #passphrase-input {
 115   margin-bottom: 5px;
 116   margin-top: 5px;
 117 }
 118
 119 #incorrect-passphrase {
 120   margin-top: 5px;
 121 }
 122
 123 #sync-setup-overlay * .error {
 124   color: red;
 125 }
 126
 127 .overlay-warning {
 128   background: white;
 129   border: 2px solid #888;
 130   border-radius: 8px;
 131   box-shadow: 0.2em 0.2em 0.5em #888;
 132   left: 25px;
 133   padding: 15px;
 134   position: absolute;
 135   right: 25px;
 136   top: 100px;
 137 }
 138
 139 #cancel-warning-header {
 140   font-weight: bold;
 141   margin-bottom: 8px;
 142 }
 143
 144 .overlay-warning input {
 145   float: right;
 146   margin-left: 5px;
 147   margin-top: 12px;
 148 }
 149
 150 #sync-passphrase-warning {
 151   margin-bottom: 5px;
 152 }
 153
 154 #gaia-login-form {
 155   margin-bottom: 0;
 156 }
 157
 158 #captcha-div {
 159   background: white;
 160   border: 1px solid #e5e5e5;
 161   overflow: hidden;
 162   padding: 1em 1em;
 163 }
 164
 165 #captcha-wrapper {
 166   background: no-repeat;
 167   background-position: center;
 168   background-size: 200px 70px;
 169   margin: 0 0 1em;
 170 }
 171
 172 #captcha-image {
 173   height: 70px;
 174   width: 200px;
 175 }
 176
 177 #asp-warning-div {
 178   text-align: left;
 179 }
 180
 181 #logging-in-throbber {
 182   margin: 0 10px;
 183 }
 184
 185 #top-blurb-error {
 186   -webkit-transition: margin-top 330ms ease-out, opacity 660ms ease-out;
 187   background: rgb(249, 237, 190);
 188   border: 1px solid rgb(240, 195, 109);
 189   display: block;
 190   font-weight: bold;
 191   line-height: 1.5em;
 192   margin-bottom: 10px;
 193   opacity: 1;
 194   padding: 8px 25px;
 195   position: relative;
 196   text-align: center;
 197 }
 198
 199 #top-blurb-error[hidden] {
 200   display: block;
 201   margin-top: -37px;
 202   opacity: 0;
 203 }
 204
 205 #password-row {
 206   margin-bottom: 0;
 207   margin-top: 2px;
 208 }
 209
 210 #action-area {
 211   margin: 1em 0;
 212 }
 213
 214 #sign-in {
 215   margin: 0;
 216 }
 217
 218 #sync-setup-configure {
 219   background: white;
 220 }
 221
 222 #choose-data-types-form {
 223   -webkit-user-select: none;
 224 }
 225
 226 #chooseDataTypesRadio {
 227   vertical-align: top;
 228 }
 229
 230 #chooseDataTypes > div {
 231   display: inline-block;
 232 }
 233
 234 .sync-data-types {
 235   margin-left: 5px;
 236 }
 237
 238 .sync-configuration-errors {
 239   margin-top: 5px;
 240 }
 241
 242 .sync-configuration-error {
 243   background-color: rgb(238, 185, 57);
 244   border-radius: 4px;
 245   font-weight: bold;
 246   margin-left: auto;
 247   margin-right: auto;
 248   padding: 1px 10px;
 249   text-align: center;
 250   width: 80%;
 251 }
 252
 253 #learn-more-link {
 254   float: right;
 255 }
 256
 257 html[dir='rtl'] #learn-more-link {
 258   float: left;
 259 }
 260
 261 #customize-link,
 262 #use-default-link {
 263   -webkit-transition: opacity 250ms;
 264 }
 265
 266
 267 /* Sign in box. */
 268
 269 .sign-in {
 270   margin: 20px auto;
 271   width: 335px;
 272 }
 273
 274 .signin-box {
 275   background: #f5f5f5;
 276   border: 1px solid #e5e5e5;
 277   padding: 20px 25px 15px;
 278 }
 279
 280 #signin-header {
 281   position: relative;
 282 }
 283
 284 #signin-header h2 {
 285   color: #222;
 286   font-size: 16px;
 287   font-weight: normal;
 288   height: 16px;
 289   line-height: 16px;
 290   margin-top: 0;
 291 }
 292
 293 #signin-header-logo {
 294   background: transparent
 295       url('chrome://resources/images/google-transparent.png') no-repeat;
 296   display: inline-block;
 297   height: 19px;
 298   position: absolute;
 299   right: 0;
 300   top: 1px;
 301   width: 52px;
 302 }
 303
 304 html[dir='rtl'] #signin-header-logo {
 305   left: 0;
 306   right: auto;
 307 }
 308
 309 #email-row,
 310 #email-readonly-row,
 311 #password-row {
 312   margin: 0 0 1.5em;
 313 }
 314
 315 /* Sign in buttons. */
 316
 317 .signin-box input[type=submit] {
 318   -webkit-margin-end: 0.4em;
 319   -webkit-margin-start: 0;
 320   -webkit-transition: all 218ms;
 321   -webkit-user-select: none;
 322   background-image: -webkit-linear-gradient(top, rgb(77, 144, 254),
 323                                                  rgb(71, 135, 237));
 324   border: 1px solid rgb(48, 121, 237);
 325   border-radius: 2px;
 326   color: white;
 327   display: inline-block;
 328   font-size: 13px;
 329   font-weight: bold;
 330   height: 32px;
 331   line-height: 27px;
 332   margin-bottom: 1.2em;
 333   margin-top: 0;
 334   min-width: 54px !important;
 335   padding: 0 8px;
 336 }
 337
 338 .signin-box input[type=submit]:hover {
 339   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
 340   -webkit-transition: all 0;
 341   background-image: -webkit-linear-gradient(top, rgb(77, 144, 254),
 342                                                  rgb(53, 122, 232));
 343   border-color: rgb(47, 91, 183);
 344   color: white;
 345 }
 346
 347 .signin-box input[type=submit]:focus {
 348   -webkit-box-shadow: inset 0 0 0 1px white;
 349   border-color: rgb(77, 144, 254);
 350   outline: none;
 351   z-index: 4 !important;
 352 }
 353
 354 .signin-box input[type=submit]:active,
 355 .signin-box input[type=submit]:focus:active {
 356   -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
 357 }
 358
 359 .signin-box input[type=submit]:focus:hover {
 360   -webkit-box-shadow: inset 0 0 0 1px white, 0 1px 1px rgba(0, 0, 0, 0.1);
 361 }
 362
 363 .signin-box input[type=submit][disabled],
 364 .signin-box input[type=submit][disabled]:hover,
 365 .signin-box input[type=submit][disabled]:active {
 366   -webkit-box-shadow: none;
 367   background-color: rgb(77, 144, 254);
 368   border: 1px solid rgb(48, 121, 237);
 369   color: white;
 370   opacity: 0.5;
 371 }
 372
 373 /* Sign in text fields. */
 374
 375 .signin-box input[type=text],
 376 .signin-box input[type=password] {
 377   -webkit-border-radius: 1px;
 378   -webkit-box-sizing: border-box;
 379   background-color: white;
 380   border: 1px solid #d9d9d9;
 381   border-top: 1px solid #c0c0c0;
 382   color: #333;
 383   display: inline-block;
 384   font-size: 15px;
 385   height: 32px;
 386   line-height: 27px;
 387   margin-top: 0.5em;
 388   padding-left: 8px;
 389   vertical-align: top;
 390   width: 100%;
 391 }
 392
 393 html[dir='rtl'] .signin-box input[type=text],
 394 html[dir='rtl'] .signin-box input[type=password] {
 395   padding-left: 0;
 396   padding-right: 8px;
 397 }
 398
 399 .signin-box input[type=text]:hover,
 400 .signin-box input[type=password]:hover {
 401   -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 402   border-color: #b9b9b9;
 403   border-top: 1px solid #a0a0a0;
 404 }
 405
 406 .signin-box input[type=text]:focus,
 407 .signin-box input[type=password]:focus {
 408   -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
 409   border-color: rgb(77, 144, 254);
 410   outline: none;
 411 }
 412
 413 .signin-box input[type=text][disabled],
 414 .signin-box input[type=password][disabled] {
 415   -webkit-box-shadow: none;
 416   background: #f5f5f5;
 417   border: 1px solid #e5e5e5;
 418 }
 419
 420 .signin-box input[type=text][disabled]:hover,
 421 .signin-box input[type=password][disabled]:hover {
 422   -webkit-box-shadow: none;
 423 }
 424
 425
 426 /* Sign in links. */
 427
 428 .signin-box .account-link {
 429   color: rgb(17, 85, 204) !important;
 430   text-decoration: none;
 431 }
 432
 433 .signin-box .account-link:visited {
 434   color: rgb(102, 17, 204) !important;
 435   text-decoration: none;
 436 }
 437
 438 .signin-box .account-link:hover {
 439   text-decoration: underline;
 440 }
 441
 442 .signin-box .account-link:active {
 443   color: rgb(209, 72, 54) !important;
 444   text-decoration: underline;
 445 }
 446
 447 /* Sign in text. */
 448
 449 .signin-box strong {
 450   color: #222;
 451   display: block;
 452 }
 453
 454 .signin-box label {
 455   display: block;
 456   font-weight: bold;
 457 }
 458
 459 /* The help links inside the signin box labels should use a normal font. */
 460 .signin-box label a {
 461   font-weight: normal;
 462 }
 463
 464 /* Sign in miscellaneous. */
 465
 466 .signin-box .throbber {
 467   float: right;
 468 }
 469
 470 html[dir='rtl'] .signin-box .throbber {
 471   float: left;
 472 }
 473
 474 #create-account-div {
 475   display: inline-block;
 476 }
 477
 478 .signin-box .errormsg {
 479   color: rgb(221, 75, 57) !important;
 480   font-size: 13px !important;
 481   line-height: 17px;
 482   margin: 0.5em 0 1.5em;
 483 }
 484
 485 .signin-box .help-link {
 486   -webkit-border-radius: 1em;
 487   background: rgb(221, 75, 57);
 488   color: white !important;
 489   display: inline-block;
 490   font-weight: bold;
 491   padding: 0 5px;
 492   position: relative;
 493   text-decoration: none;
 494   top: 0;
 495 }
 496
 497 .signin-box .help-link:visited {
 498   color: white !important;
 499 }
 500
 501 .signin-box .help-link:hover {
 502   color: white !important;
 503   opacity: .7;
 504 }