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 #learn-more-link {
 219   float: right;
 220 }
 221
 222 html[dir='rtl'] #learn-more-link {
 223   float: left;
 224 }
 225
 226 #customize-link,
 227 #use-default-link {
 228   -webkit-transition: opacity 250ms;
 229 }
 230
 231
 232 /* Sign in box. */
 233
 234 .sign-in {
 235   margin: 20px auto;
 236   width: 335px;
 237 }
 238
 239 .signin-box {
 240   background: #f5f5f5;
 241   border: 1px solid #e5e5e5;
 242   padding: 20px 25px 15px;
 243 }
 244
 245 #signin-header {
 246   position: relative;
 247 }
 248
 249 #signin-header h2 {
 250   color: #222;
 251   font-size: 16px;
 252   font-weight: normal;
 253   height: 16px;
 254   line-height: 16px;
 255   margin-top: 0;
 256 }
 257
 258 #signin-header-logo {
 259   background: transparent
 260       url('chrome://resources/images/google-transparent.png') no-repeat;
 261   display: inline-block;
 262   height: 19px;
 263   position: absolute;
 264   right: 0;
 265   top: 1px;
 266   width: 52px;
 267 }
 268
 269 html[dir='rtl'] #signin-header-logo {
 270   left: 0;
 271   right: auto;
 272 }
 273
 274 #email-row,
 275 #email-readonly-row,
 276 #password-row {
 277   margin: 0 0 1.5em;
 278 }
 279
 280 /* Sign in buttons. */
 281
 282 .signin-box input[type=submit] {
 283   -webkit-margin-end: 0.4em;
 284   -webkit-margin-start: 0;
 285   -webkit-transition: all 218ms;
 286   -webkit-user-select: none;
 287   background-image: -webkit-linear-gradient(top, rgb(77, 144, 254),
 288                                                  rgb(71, 135, 237));
 289   border: 1px solid rgb(48, 121, 237);
 290   border-radius: 2px;
 291   color: white;
 292   display: inline-block;
 293   font-size: 13px;
 294   font-weight: bold;
 295   height: 32px;
 296   line-height: 27px;
 297   margin-bottom: 1.2em;
 298   margin-top: 0;
 299   min-width: 54px !important;
 300   padding: 0 8px;
 301 }
 302
 303 .signin-box input[type=submit]:hover {
 304   -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
 305   -webkit-transition: all 0;
 306   background-image: -webkit-linear-gradient(top, rgb(77, 144, 254),
 307                                                  rgb(53, 122, 232));
 308   border-color: rgb(47, 91, 183);
 309   color: white;
 310 }
 311
 312 .signin-box input[type=submit]:focus {
 313   -webkit-box-shadow: inset 0 0 0 1px white;
 314   border-color: rgb(77, 144, 254);
 315   outline: none;
 316   z-index: 4 !important;
 317 }
 318
 319 .signin-box input[type=submit]:active,
 320 .signin-box input[type=submit]:focus:active {
 321   -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
 322 }
 323
 324 .signin-box input[type=submit]:focus:hover {
 325   -webkit-box-shadow: inset 0 0 0 1px white, 0 1px 1px rgba(0, 0, 0, 0.1);
 326 }
 327
 328 .signin-box input[type=submit][disabled],
 329 .signin-box input[type=submit][disabled]:hover,
 330 .signin-box input[type=submit][disabled]:active {
 331   -webkit-box-shadow: none;
 332   background-color: rgb(77, 144, 254);
 333   border: 1px solid rgb(48, 121, 237);
 334   color: white;
 335   opacity: 0.5;
 336 }
 337
 338 /* Sign in text fields. */
 339
 340 .signin-box input[type=text],
 341 .signin-box input[type=password] {
 342   -webkit-border-radius: 1px;
 343   -webkit-box-sizing: border-box;
 344   background-color: white;
 345   border: 1px solid #d9d9d9;
 346   border-top: 1px solid #c0c0c0;
 347   color: #333;
 348   display: inline-block;
 349   font-size: 15px;
 350   height: 32px;
 351   line-height: 27px;
 352   margin-top: 0.5em;
 353   padding-left: 8px;
 354   vertical-align: top;
 355   width: 100%;
 356 }
 357
 358 html[dir='rtl'] .signin-box input[type=text],
 359 html[dir='rtl'] .signin-box input[type=password] {
 360   padding-left: 0;
 361   padding-right: 8px;
 362 }
 363
 364 .signin-box input[type=text]:hover,
 365 .signin-box input[type=password]:hover {
 366   -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 367   border-color: #b9b9b9;
 368   border-top: 1px solid #a0a0a0;
 369 }
 370
 371 .signin-box input[type=text]:focus,
 372 .signin-box input[type=password]:focus {
 373   -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
 374   border-color: rgb(77, 144, 254);
 375   outline: none;
 376 }
 377
 378 .signin-box input[type=text][disabled],
 379 .signin-box input[type=password][disabled] {
 380   -webkit-box-shadow: none;
 381   background: #f5f5f5;
 382   border: 1px solid #e5e5e5;
 383 }
 384
 385 .signin-box input[type=text][disabled]:hover,
 386 .signin-box input[type=password][disabled]:hover {
 387   -webkit-box-shadow: none;
 388 }
 389
 390
 391 /* Sign in links. */
 392
 393 .signin-box .account-link {
 394   color: rgb(17, 85, 204) !important;
 395   text-decoration: none;
 396 }
 397
 398 .signin-box .account-link:visited {
 399   color: rgb(102, 17, 204) !important;
 400   text-decoration: none;
 401 }
 402
 403 .signin-box .account-link:hover {
 404   text-decoration: underline;
 405 }
 406
 407 .signin-box .account-link:active {
 408   color: rgb(209, 72, 54) !important;
 409   text-decoration: underline;
 410 }
 411
 412 /* Sign in text. */
 413
 414 .signin-box strong {
 415   color: #222;
 416   display: block;
 417 }
 418
 419 .signin-box label {
 420   display: block;
 421   font-weight: bold;
 422 }
 423
 424 /* The help links inside the signin box labels should use a normal font. */
 425 .signin-box label a {
 426   font-weight: normal;
 427 }
 428
 429 /* Sign in miscellaneous. */
 430
 431 .signin-box .throbber {
 432   float: right;
 433 }
 434
 435 html[dir='rtl'] .signin-box .throbber {
 436   float: left;
 437 }
 438
 439 #create-account-div {
 440   display: inline-block;
 441 }
 442
 443 .signin-box .errormsg {
 444   color: rgb(221, 75, 57) !important;
 445   font-size: 13px !important;
 446   line-height: 17px;
 447   margin: 0.5em 0 1.5em;
 448 }
 449
 450 .signin-box .help-link {
 451   -webkit-border-radius: 1em;
 452   background: rgb(221, 75, 57);
 453   color: white !important;
 454   display: inline-block;
 455   font-weight: bold;
 456   padding: 0 5px;
 457   position: relative;
 458   text-decoration: none;
 459   top: 0;
 460 }
 461
 462 .signin-box .help-link:visited {
 463   color: white !important;
 464 }
 465
 466 .signin-box .help-link:hover {
 467   color: white !important;
 468   opacity: .7;
 469 }