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 226html[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 273html[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 362html[dir='rtl'] .signin-box input[type=text], 363html[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 439html[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} 474