src/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 #encryption-section-message {
 109   color: gray;
 110   margin-bottom: 5px;
 111 }
 112
 113 #basic-encryption-body,
 114 #full-encryption-body {
 115   display: table;
 116 }
 117
 118 #passphrase-input {
 119   margin-bottom: 5px;
 120   margin-top: 5px;
 121 }
 122
 123 #incorrect-passphrase {
 124   margin-top: 5px;
 125 }
 126
 127 #sync-setup-overlay * .error {
 128   color: red;
 129 }
 130
 131 .overlay-warning {
 132   background: white;
 133   border: 2px solid #888;
 134   border-radius: 8px;
 135   box-shadow: 0.2em 0.2em 0.5em #888;
 136   left: 25px;
 137   padding: 15px;
 138   position: absolute;
 139   right: 25px;
 140   top: 100px;
 141 }
 142
 143 #cancel-warning-header {
 144   font-weight: bold;
 145   margin-bottom: 8px;
 146 }
 147
 148 .overlay-warning input {
 149   float: right;
 150   margin-left: 5px;
 151   margin-top: 12px;
 152 }
 153
 154 #sync-passphrase-warning {
 155   margin-bottom: 5px;
 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 #password-row {
 186   margin-bottom: 0;
 187   margin-top: 2px;
 188 }
 189
 190 #action-area {
 191   margin: 1em 0;
 192 }
 193
 194 #sign-in {
 195   margin: 0;
 196 }
 197
 198 #sync-setup-configure {
 199   background: white;
 200 }
 201
 202 #choose-data-types-form {
 203   -webkit-user-select: none;
 204 }
 205
 206 #chooseDataTypesRadio {
 207   vertical-align: top;
 208 }
 209
 210 #chooseDataTypes > div {
 211   display: inline-block;
 212 }
 213
 214 .sync-data-types {
 215   margin-left: 5px;
 216 }
 217
 218 .sync-configuration-errors {
 219   margin-top: 5px;
 220 }
 221
 222 .sync-configuration-error {
 223   background-color: rgb(238, 185, 57);
 224   border-radius: 4px;
 225   font-weight: bold;
 226   margin-left: auto;
 227   margin-right: auto;
 228   padding: 1px 10px;
 229   text-align: center;
 230   width: 80%;
 231 }
 232
 233 #learn-more-link {
 234   float: right;
 235 }
 236
 237 html[dir='rtl'] #learn-more-link {
 238   float: left;
 239 }
 240
 241 #customize-link,
 242 #use-default-link {
 243   -webkit-transition: opacity 250ms;
 244 }
 245
 246
 247 /* Sign in box. */
 248
 249 .sign-in {
 250   margin: 20px auto;
 251   width: 335px;
 252 }
 253
 254 .signin-box {
 255   background: #f5f5f5;
 256   border: 1px solid #e5e5e5;
 257   padding: 20px 25px 15px;
 258 }
 259
 260 #signin-header {
 261   position: relative;
 262 }
 263
 264 #signin-header h2 {
 265   color: #222;
 266   font-size: 16px;
 267   font-weight: normal;
 268   height: 16px;
 269   line-height: 16px;
 270   margin-top: 0;
 271 }
 272
 273 #signin-header-logo {
 274   background: transparent
 275       url('chrome://resources/images/google-transparent.png') no-repeat;
 276   display: inline-block;
 277   height: 19px;
 278   position: absolute;
 279   right: 0;
 280   top: 1px;
 281   width: 52px;
 282 }
 283
 284 html[dir='rtl'] #signin-header-logo {
 285   left: 0;
 286   right: auto;
 287 }
 288
 289 #email-row,
 290 #email-readonly-row,
 291 #password-row {
 292   margin: 0 0 1.5em;
 293 }
 294
 295 /* Sign in buttons. */
 296
 297 .signin-box input[type=submit] {
 298   -webkit-margin-end: 0.4em;
 299   -webkit-margin-start: 0;
 300   -webkit-transition: all 218ms;
 301   -webkit-user-select: none;
 302   background-image: -webkit-linear-gradient(top, rgb(77, 144, 254),
 303                                                  rgb(71, 135, 237));
 304   border: 1px solid rgb(48, 121, 237);
 305   border-radius: 2px;
 306   color: white;
 307   display: inline-block;
 308   font-size: 13px;
 309   font-weight: bold;
 310   height: 32px;
 311   line-height: 27px;
 312   margin-bottom: 1.2em;
 313   margin-top: 0;
 314   min-width: 54px !important;
 315   padding: 0 8px;
 316 }
 317
 318 .signin-box input[type=submit]:hover {
 319   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
 320   -webkit-transition: all 0;
 321   background-image: -webkit-linear-gradient(top, rgb(77, 144, 254),
 322                                                  rgb(53, 122, 232));
 323   border-color: rgb(47, 91, 183);
 324   color: white;
 325 }
 326
 327 .signin-box input[type=submit]:focus {
 328   -webkit-box-shadow: inset 0 0 0 1px white;
 329   border-color: rgb(77, 144, 254);
 330   outline: none;
 331   z-index: 4 !important;
 332 }
 333
 334 .signin-box input[type=submit]:active,
 335 .signin-box input[type=submit]:focus:active {
 336   -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
 337 }
 338
 339 .signin-box input[type=submit]:focus:hover {
 340   -webkit-box-shadow: inset 0 0 0 1px white, 0 1px 1px rgba(0, 0, 0, 0.1);
 341 }
 342
 343 .signin-box input[type=submit][disabled],
 344 .signin-box input[type=submit][disabled]:hover,
 345 .signin-box input[type=submit][disabled]:active {
 346   -webkit-box-shadow: none;
 347   background-color: rgb(77, 144, 254);
 348   border: 1px solid rgb(48, 121, 237);
 349   color: white;
 350   opacity: 0.5;
 351 }
 352
 353 /* Sign in text fields. */
 354
 355 .signin-box input[type=text],
 356 .signin-box input[type=password] {
 357   -webkit-border-radius: 1px;
 358   -webkit-box-sizing: border-box;
 359   background-color: white;
 360   border: 1px solid #d9d9d9;
 361   border-top: 1px solid #c0c0c0;
 362   color: #333;
 363   display: inline-block;
 364   font-size: 15px;
 365   height: 32px;
 366   line-height: 27px;
 367   margin-top: 0.5em;
 368   padding-left: 8px;
 369   vertical-align: top;
 370   width: 100%;
 371 }
 372
 373 html[dir='rtl'] .signin-box input[type=text],
 374 html[dir='rtl'] .signin-box input[type=password] {
 375   padding-left: 0;
 376   padding-right: 8px;
 377 }
 378
 379 .signin-box input[type=text]:hover,
 380 .signin-box input[type=password]:hover {
 381   -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 382   border-color: #b9b9b9;
 383   border-top: 1px solid #a0a0a0;
 384 }
 385
 386 .signin-box input[type=text]:focus,
 387 .signin-box input[type=password]:focus {
 388   -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
 389   border-color: rgb(77, 144, 254);
 390   outline: none;
 391 }
 392
 393 .signin-box input[type=text][disabled],
 394 .signin-box input[type=password][disabled] {
 395   -webkit-box-shadow: none;
 396   background: #f5f5f5;
 397   border: 1px solid #e5e5e5;
 398 }
 399
 400 .signin-box input[type=text][disabled]:hover,
 401 .signin-box input[type=password][disabled]:hover {
 402   -webkit-box-shadow: none;
 403 }
 404
 405
 406 /* Sign in links. */
 407
 408 .signin-box .account-link {
 409   color: rgb(17, 85, 204) !important;
 410   text-decoration: none;
 411 }
 412
 413 .signin-box .account-link:visited {
 414   color: rgb(102, 17, 204) !important;
 415   text-decoration: none;
 416 }
 417
 418 .signin-box .account-link:hover {
 419   text-decoration: underline;
 420 }
 421
 422 .signin-box .account-link:active {
 423   color: rgb(209, 72, 54) !important;
 424   text-decoration: underline;
 425 }
 426
 427 /* Sign in text. */
 428
 429 .signin-box strong {
 430   color: #222;
 431   display: block;
 432 }
 433
 434 .signin-box label {
 435   display: block;
 436   font-weight: bold;
 437 }
 438
 439 /* The help links inside the signin box labels should use a normal font. */
 440 .signin-box label a {
 441   font-weight: normal;
 442 }
 443
 444 /* Sign in miscellaneous. */
 445
 446 .signin-box .throbber {
 447   float: right;
 448 }
 449
 450 html[dir='rtl'] .signin-box .throbber {
 451   float: left;
 452 }
 453
 454 #create-account-div {
 455   display: inline-block;
 456 }
 457
 458 .signin-box .errormsg {
 459   color: rgb(221, 75, 57) !important;
 460   font-size: 13px !important;
 461   line-height: 17px;
 462   margin: 0.5em 0 1.5em;
 463 }
 464
 465 .signin-box .help-link {
 466   -webkit-border-radius: 1em;
 467   background: rgb(221, 75, 57);
 468   color: white !important;
 469   display: inline-block;
 470   font-weight: bold;
 471   padding: 0 5px;
 472   position: relative;
 473   text-decoration: none;
 474   top: 0;
 475 }
 476
 477 .signin-box .help-link:visited {
 478   color: white !important;
 479 }
 480
 481 .signin-box .help-link:hover {
 482   color: white !important;
 483   opacity: .7;
 484 }