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