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