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 } 474