| OLD | NEW |
| (Empty) |
| 1 html { | |
| 2 /* This is needed because of chrome://theme/css/new_tab.css */ | |
| 3 height: 100%; | |
| 4 } | |
| 5 | |
| 6 body { | |
| 7 margin: 0; | |
| 8 height: 100%; | |
| 9 overflow: auto; | |
| 10 -webkit-user-select: none; | |
| 11 cursor: default; | |
| 12 } | |
| 13 | |
| 14 html[mode=app-launcher] { | |
| 15 height: auto; | |
| 16 } | |
| 17 | |
| 18 #main { | |
| 19 box-sizing: border-box; | |
| 20 -webkit-transition: width .15s; | |
| 21 margin: 0 auto; | |
| 22 min-height: 100%; | |
| 23 } | |
| 24 | |
| 25 body.loading #main { | |
| 26 /* We start out hidden to prevent glitchiness as the app and most visited | |
| 27 data flows in. */ | |
| 28 visibility: hidden; | |
| 29 } | |
| 30 | |
| 31 #main, | |
| 32 .section, | |
| 33 .maxiview, | |
| 34 #login-container, | |
| 35 #notification-container, | |
| 36 #closed-sections-bar { | |
| 37 width: 920px; | |
| 38 } | |
| 39 | |
| 40 html[dir=rtl] #main { | |
| 41 background-position-x: 100%; | |
| 42 } | |
| 43 | |
| 44 html[mode=app-launcher] #main { | |
| 45 min-height: 50px; | |
| 46 } | |
| 47 | |
| 48 html[anim=false] *, | |
| 49 .no-anim, .no-anim *, | |
| 50 .loading * { | |
| 51 -webkit-transition: none !important; | |
| 52 -webkit-animation: none !important; | |
| 53 } | |
| 54 | |
| 55 :link, | |
| 56 :visited, | |
| 57 .link { | |
| 58 cursor: pointer; | |
| 59 text-decoration: underline; | |
| 60 color: hsla(213, 90%, 24%, 0.33333); | |
| 61 -webkit-appearance: none; | |
| 62 border: 0; | |
| 63 background: none; | |
| 64 } | |
| 65 | |
| 66 .link-color { | |
| 67 color: hsl(213, 90%, 24%); | |
| 68 text-decoration: none; | |
| 69 } | |
| 70 | |
| 71 .hide { | |
| 72 opacity: 0 !important; | |
| 73 visibility: hidden !important; | |
| 74 pointer-events: none; | |
| 75 } | |
| 76 | |
| 77 /* Notification */ | |
| 78 | |
| 79 #notification-container { | |
| 80 position: fixed; | |
| 81 } | |
| 82 | |
| 83 #notification { | |
| 84 -webkit-transition: opacity .15s; | |
| 85 position: relative; | |
| 86 background-color: hsl(52, 100%, 80%); | |
| 87 border: 1px solid rgb(211, 211, 211); | |
| 88 border-radius: 6px; | |
| 89 color: black; | |
| 90 display: -webkit-box; | |
| 91 font-weight: bold; | |
| 92 margin: 2px auto; | |
| 93 opacity: 0; | |
| 94 padding: 7px 15px; | |
| 95 pointer-events: none; | |
| 96 white-space: nowrap; | |
| 97 width: intrinsic; | |
| 98 z-index: 2; | |
| 99 } | |
| 100 | |
| 101 #notification.first-run { | |
| 102 padding: 5px 13px; /* subtract the border width */ | |
| 103 border: 2px solid hsl(213, 55%, 75%); | |
| 104 background-color: hsl(213, 63%, 93%); | |
| 105 -webkit-box-shadow: 2px 2px 3px hsla(0, 0%, 0%, .3); | |
| 106 font-weight: normal; | |
| 107 } | |
| 108 | |
| 109 #notification.promo { | |
| 110 padding: 5px 13px; /* subtract the border width */ | |
| 111 border: 1px solid hsl(0, 0%, 80%); | |
| 112 background-color: hsl(120, 93%, 93%); | |
| 113 -webkit-box-shadow: 2px 2px 3px hsla(0, 0%, 0%, .3); | |
| 114 font-weight: normal; | |
| 115 } | |
| 116 | |
| 117 #notification.promo a { | |
| 118 color: rgb(0, 102, 204); | |
| 119 } | |
| 120 | |
| 121 #notification-close { | |
| 122 display: inline-block; | |
| 123 border: 0; | |
| 124 -webkit-margin-start: 10px; | |
| 125 -webkit-margin-end: auto; | |
| 126 vertical-align: middle; | |
| 127 width: 16px; | |
| 128 height: 16px; | |
| 129 background: no-repeat; | |
| 130 background-color: transparent; | |
| 131 background-image: url('chrome://theme/IDR_CLOSE_BAR'); | |
| 132 padding: 0; | |
| 133 } | |
| 134 | |
| 135 #notification-close:hover, | |
| 136 #notification-close:focus { | |
| 137 background-image: url('chrome://theme/IDR_CLOSE_BAR_H'); | |
| 138 } | |
| 139 | |
| 140 #notification-close:active { | |
| 141 background-image: url('chrome://theme/IDR_CLOSE_BAR_P'); | |
| 142 } | |
| 143 | |
| 144 #notification > * { | |
| 145 max-width: 500px; | |
| 146 overflow: hidden; | |
| 147 text-overflow: ellipsis; | |
| 148 } | |
| 149 | |
| 150 #notification.first-run > * { | |
| 151 white-space: normal; | |
| 152 } | |
| 153 | |
| 154 #notification.show { | |
| 155 opacity: 1; | |
| 156 pointer-events: all; | |
| 157 -webkit-transition: opacity 1s; | |
| 158 } | |
| 159 | |
| 160 #notification .link { | |
| 161 color: rgba(0, 102, 204, 0.3); | |
| 162 -webkit-padding-start: 20px; | |
| 163 } | |
| 164 | |
| 165 #notification .link > * { | |
| 166 outline: none; | |
| 167 } | |
| 168 | |
| 169 #notification .link-color { | |
| 170 color: rgb(0, 102, 204); | |
| 171 } | |
| 172 | |
| 173 #notification > * > .blacklist-title { | |
| 174 display: inline-block; | |
| 175 max-width: 30ex; | |
| 176 overflow: hidden; | |
| 177 text-overflow: ellipsis; | |
| 178 white-space: nowrap; | |
| 179 } | |
| 180 | |
| 181 .item { | |
| 182 background: no-repeat 0% 50%; | |
| 183 padding: 2px; | |
| 184 padding-left: 18px; | |
| 185 background-size: 16px 16px; | |
| 186 background-color: hsla(213, 63%, 93%, 0); | |
| 187 display: block; | |
| 188 line-height: 20px; | |
| 189 max-width: 600px; | |
| 190 box-sizing: border-box; | |
| 191 white-space: nowrap; | |
| 192 overflow: hidden; | |
| 193 text-overflow: ellipsis; | |
| 194 font-size: 100%; | |
| 195 } | |
| 196 | |
| 197 .item:visited, | |
| 198 .item:link { | |
| 199 color: hsl(213, 90%, 24%); | |
| 200 } | |
| 201 | |
| 202 html[dir=rtl] .item { | |
| 203 background-position-x: 100%; | |
| 204 padding-right: 18px; | |
| 205 padding-left: 2px; | |
| 206 text-align: right; | |
| 207 } | |
| 208 | |
| 209 .window { | |
| 210 overflow: visible; /* We use visible so that the menu can be a child and shown | |
| 211 on :hover. To get this to work we have to set visibility | |
| 212 to visible which unfortunately breaks the ellipsis for t | |
| 213 he window items */ | |
| 214 background-image: url('ntp/closed_window.png'); | |
| 215 } | |
| 216 | |
| 217 .window-menu { | |
| 218 position: absolute; | |
| 219 display: none; | |
| 220 border: 1px solid #999; | |
| 221 -webkit-box-shadow: 2px 2px 3px hsla(0, 0%, 0%, .3); | |
| 222 color: black; | |
| 223 background-color: white; | |
| 224 left: 0; | |
| 225 white-space: nowrap; | |
| 226 z-index: 2; | |
| 227 padding: 2px; | |
| 228 cursor: default; | |
| 229 border-radius: 4px; | |
| 230 } | |
| 231 | |
| 232 /* Made to look like a tooltip using vista/win7 look and feel. | |
| 233 TODO(arv): Replace with -webkit-appearance once issue 17371 is fixed | |
| 234 */ | |
| 235 #window-tooltip { | |
| 236 color: #555; | |
| 237 pointer-events: none; | |
| 238 border: 1px solid rgb(118, 118, 118); | |
| 239 border-radius: 3px; | |
| 240 padding: 0 3px; | |
| 241 background: -webkit-linear-gradient(white, rgb(228, 229, 240)); | |
| 242 width: auto; | |
| 243 max-width: 300px; | |
| 244 } | |
| 245 | |
| 246 .foreign-session-client { | |
| 247 float: left; | |
| 248 max-width: 114px; /* Selected so that we can fit 5 items in EN-US */ | |
| 249 font-weight: normal; | |
| 250 margin: 0; | |
| 251 position: relative; | |
| 252 } | |
| 253 | |
| 254 html[dir=rtl] .foreign-session-client { | |
| 255 float: right; | |
| 256 } | |
| 257 | |
| 258 .foreign-session-client > p { | |
| 259 display: block; | |
| 260 white-space: nowrap; | |
| 261 overflow: hidden; | |
| 262 text-overflow: ellipsis; | |
| 263 font-size: 100%; | |
| 264 margin: 0 10px; | |
| 265 } | |
| 266 | |
| 267 #foreign-sessions .nav { | |
| 268 max-width: none !important; | |
| 269 } | |
| 270 | |
| 271 .nav > a { | |
| 272 /* no icon */ | |
| 273 padding: 0; | |
| 274 } | |
| 275 | |
| 276 .nav > a:after { | |
| 277 content: '\u00bb'; /* raque gets flipped automatically in rtl */ | |
| 278 font-size: 115%; | |
| 279 -webkit-padding-start: 2px; | |
| 280 } | |
| 281 | |
| 282 #sync-status > div { | |
| 283 border-radius: 6px; | |
| 284 padding: 5px 0; | |
| 285 margin: 10px 0 20px; | |
| 286 white-space: nowrap; | |
| 287 overflow-x: hidden; | |
| 288 } | |
| 289 | |
| 290 #sync-status > div > * { | |
| 291 display: inline-block; | |
| 292 max-width: none; | |
| 293 white-space: nowrap; | |
| 294 overflow: hidden; | |
| 295 text-overflow: ellipsis; | |
| 296 font-size: 106%; | |
| 297 margin: 0; | |
| 298 } | |
| 299 | |
| 300 .notification.hidden { | |
| 301 opacity: 0; | |
| 302 pointer-events: none; | |
| 303 } | |
| 304 | |
| 305 /** | |
| 306 * Unfortunately, there seems to be a bug in WebKit where this div doesn't | |
| 307 * immediately get layout. It still doesn't have it in 'load', but gains it | |
| 308 * sometime after. | |
| 309 * | |
| 310 * We detect this in the JS by looking for offsetWidth > 0, and when it occurs, | |
| 311 * remove the 'nolayout' class. | |
| 312 */ | |
| 313 #attribution.nolayout { | |
| 314 position: static; | |
| 315 visibility: hidden; | |
| 316 } | |
| 317 | |
| 318 #attribution { | |
| 319 bottom: 5px; | |
| 320 left: 8px; | |
| 321 position: fixed; | |
| 322 text-align: end; | |
| 323 } | |
| 324 | |
| 325 html[dir=rtl] #attribution { | |
| 326 left: auto; | |
| 327 right: 8px; | |
| 328 } | |
| 329 | |
| 330 #attribution.obscured { | |
| 331 visibility: hidden; | |
| 332 } | |
| 333 | |
| 334 html[hasattribution=false] #attribution > div { | |
| 335 display: none; | |
| 336 } | |
| 337 | |
| 338 .sync-button { | |
| 339 font-size: inherit; | |
| 340 padding: 0; | |
| 341 margin: 0; | |
| 342 -webkit-appearance: none; | |
| 343 border: 0; | |
| 344 background: none; | |
| 345 cursor: pointer; | |
| 346 text-decoration: underline; | |
| 347 font-family: inherit; | |
| 348 } | |
| 349 | |
| 350 .section { | |
| 351 position: fixed; | |
| 352 font-size: 92%; | |
| 353 } | |
| 354 | |
| 355 body.noscroll { | |
| 356 overflow: hidden; | |
| 357 } | |
| 358 | |
| 359 html[anim=true][enable-section-animations=true] .section { | |
| 360 -webkit-transition: top .15s; | |
| 361 } | |
| 362 | |
| 363 #login-container { | |
| 364 display: none; | |
| 365 margin-top: 5px; | |
| 366 position: fixed; | |
| 367 text-align: end; | |
| 368 } | |
| 369 | |
| 370 /* A section in menu mode doesn't display its contents at all. Instead it is | |
| 371 rendered as a menu along the bottom of the screen. We have a separate class for | |
| 372 this so that when a hidden section is unhidden it can go back to its previous | |
| 373 collapsed state. */ | |
| 374 .section.menu { | |
| 375 display: none !important; | |
| 376 } | |
| 377 | |
| 378 /* A disabled section is not rendered in the UI in any way. Examples of this | |
| 379 state include the 'recently closed' section when we have no data for it, or this | |
| 380 'sync status' section, when there is no status to display. We have a separate | |
| 381 class for this so that when a section is enabled, it can go back to its previous | |
| 382 menu and collapsed state. */ | |
| 383 .section.disabled { | |
| 384 display: none !important; | |
| 385 } | |
| 386 | |
| 387 .section > h2 { | |
| 388 font-family: Helvetica, Arial, sans-serif; | |
| 389 font-size: 133%; | |
| 390 font-weight: normal; | |
| 391 margin: 0; | |
| 392 position: relative; | |
| 393 } | |
| 394 | |
| 395 .section:not([noexpand]) > h2 { | |
| 396 cursor: pointer; | |
| 397 } | |
| 398 | |
| 399 .section > h2 > .disclosure { | |
| 400 position: absolute; | |
| 401 left: -15px; | |
| 402 margin-top: 50%; | |
| 403 top: -5px; | |
| 404 } | |
| 405 | |
| 406 html[dir=rtl] .section > h2 > .disclosure { | |
| 407 left: auto; | |
| 408 right: -15px; | |
| 409 -webkit-transform: rotate(180deg); | |
| 410 } | |
| 411 | |
| 412 html[anim=true] .section > h2 > .disclosure { | |
| 413 -webkit-transition: -webkit-transform .15s; | |
| 414 } | |
| 415 | |
| 416 .section:not(.collapsed) > h2 > .disclosure { | |
| 417 -webkit-transform: rotate(90deg); | |
| 418 } | |
| 419 | |
| 420 .section > h2 .back { | |
| 421 position: absolute; | |
| 422 left: 0; | |
| 423 top: 0.56em; | |
| 424 width: 100%; | |
| 425 height: 1.5em; | |
| 426 z-index: 1; | |
| 427 } | |
| 428 | |
| 429 .section > h2 span { | |
| 430 -webkit-padding-end: 0.30em; | |
| 431 position: relative; | |
| 432 z-index: 2; | |
| 433 } | |
| 434 | |
| 435 .section-close-button { | |
| 436 -webkit-appearance: none; | |
| 437 -webkit-transition: opacity .15s; | |
| 438 background-color: transparent; | |
| 439 background-image: url(chrome://theme/IDR_CLOSE_BAR); | |
| 440 background-position: center center; | |
| 441 background-repeat no-repeat; | |
| 442 border: 0; | |
| 443 height: 21px; | |
| 444 margin-top: -10px; | |
| 445 position: absolute; | |
| 446 right: -21px; | |
| 447 top: 50%; | |
| 448 width: 21px; | |
| 449 opacity: 0; | |
| 450 z-index: 3; | |
| 451 } | |
| 452 | |
| 453 html[dir=rtl] .section-close-button { | |
| 454 left: -21px; | |
| 455 right: auto; | |
| 456 } | |
| 457 | |
| 458 .section > h2:hover .section-close-button, | |
| 459 .section-close-button:hover { | |
| 460 opacity: 1; | |
| 461 } | |
| 462 | |
| 463 .section-close-button:hover { | |
| 464 background-image: url(chrome://theme/IDR_CLOSE_BAR_H); | |
| 465 } | |
| 466 | |
| 467 #closed-sections-bar { | |
| 468 position: fixed; | |
| 469 text-align: end; | |
| 470 } | |
| 471 | |
| 472 /* closed-sections-bar is bottom aligned for non-ChromeOS build. On ChromeOS, | |
| 473 it goes right under the sections. */ | |
| 474 #closed-sections-bar:not([chromeos]) { | |
| 475 bottom: 14px; | |
| 476 } | |
| 477 | |
| 478 #closed-sections-bar > button { | |
| 479 /* We hide all these buttons by default and turn them on when needed. */ | |
| 480 display: none; | |
| 481 | |
| 482 -webkit-appearance: none; | |
| 483 background: none; | |
| 484 border: 0; | |
| 485 cursor: pointer; | |
| 486 font: inherit; | |
| 487 margin: 0; | |
| 488 -webkit-margin-start: 1.5em; | |
| 489 padding: 2px 0 0 0; | |
| 490 | |
| 491 /* Note: The font here should end up the same as .section > h2. A different | |
| 492 percentage is needed because the parent element here has a different size. */ | |
| 493 font-family: Helvetica, Arial, sans-serif; | |
| 494 font-size: 122%; | |
| 495 font-weight: normal; | |
| 496 } | |
| 497 | |
| 498 #closed-sections-bar > button > img { | |
| 499 -webkit-transform: rotate(90deg); | |
| 500 position: relative; | |
| 501 top: -2px; | |
| 502 margin-left: 1px; | |
| 503 } | |
| 504 | |
| 505 .maxiview { | |
| 506 padding: 5px 0 30px; | |
| 507 position: absolute; | |
| 508 -webkit-mask-attachment: fixed; | |
| 509 opacity: 0; | |
| 510 } | |
| 511 | |
| 512 .maxiview.opaque { | |
| 513 opacity: 1; | |
| 514 } | |
| 515 | |
| 516 .maxiview.collapsing { | |
| 517 opacity: 0; | |
| 518 } | |
| 519 | |
| 520 .maxiview.collapsed { | |
| 521 display: none; | |
| 522 opacity: 0; | |
| 523 } | |
| 524 | |
| 525 html[anim=true][enable-section-animations=true] .maxiview { | |
| 526 -webkit-transition: opacity .10s, top .15s; | |
| 527 } | |
| 528 | |
| 529 html[anim=true][enable-section-animations=true] .miniview { | |
| 530 -webkit-transition: opacity .15s; | |
| 531 } | |
| 532 | |
| 533 .section > .miniview { | |
| 534 display: none; | |
| 535 margin: 10px 0 30px; | |
| 536 white-space: nowrap; | |
| 537 overflow-x: hidden; | |
| 538 } | |
| 539 | |
| 540 .section.collapsed > * { | |
| 541 display: none; | |
| 542 } | |
| 543 | |
| 544 .section.collapsed > h2 { | |
| 545 display: block; | |
| 546 } | |
| 547 | |
| 548 .section.collapsed > .miniview { | |
| 549 display: block; | |
| 550 opacity: 0; | |
| 551 } | |
| 552 | |
| 553 .section.collapsed > .miniview.opaque { | |
| 554 opacity: 1; | |
| 555 } | |
| 556 | |
| 557 .section.collapsed > h2 { | |
| 558 margin-right: 0; | |
| 559 } | |
| 560 | |
| 561 .miniview > span { | |
| 562 display: inline-block; | |
| 563 max-width: 114px; /* Selected so that we can fit 5 items in EN-US */ | |
| 564 white-space: nowrap; | |
| 565 overflow: hidden; | |
| 566 text-overflow: ellipsis; | |
| 567 font-size: 100%; | |
| 568 margin: 0 10px; | |
| 569 } | |
| 570 | |
| 571 .miniview > span:first-child { | |
| 572 margin-left: 0; | |
| 573 } | |
| 574 | |
| 575 .miniview > span:last-child { | |
| 576 margin-right: 0; | |
| 577 } | |
| 578 | |
| 579 /* small */ | |
| 580 | |
| 581 .small-layout #main, | |
| 582 .small-layout .section, | |
| 583 .small-layout .maxiview, | |
| 584 .small-layout #login-container, | |
| 585 .small-layout #notification-container, | |
| 586 .small-layout #closed-sections-bar { | |
| 587 width: 692px; | |
| 588 } | |
| 589 | |
| 590 .small-layout #notification > * { | |
| 591 max-width: 300px; | |
| 592 } | |
| 593 | |
| 594 .small-layout #notification > span > .blacklist-title { | |
| 595 max-width: 15ex; | |
| 596 } | |
| 597 | |
| 598 /* Ensure we have at least 10px horizontal marging. */ | |
| 599 @media (max-width: 712px) { | |
| 600 #main { | |
| 601 margin-left: 10px; | |
| 602 margin-right: 10px; | |
| 603 } | |
| 604 } | |
| OLD | NEW |