| 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 } | |
| 9 | |
| 10 #main { | |
| 11 background: url(chrome://theme/product_logo) no-repeat 0 0px; | |
| 12 position: relative; | |
| 13 margin: 0 auto; | |
| 14 width: 940px; | |
| 15 -webkit-transition: width .5s; | |
| 16 } | |
| 17 | |
| 18 html[dir='rtl'] #main { | |
| 19 background-position-x: 100%; | |
| 20 } | |
| 21 | |
| 22 .small #main { | |
| 23 width: 692px; | |
| 24 } | |
| 25 | |
| 26 html[anim='false'] *, | |
| 27 .no-anim, .no-anim *, | |
| 28 .loading * { | |
| 29 -webkit-transition: none !important; | |
| 30 -webkit-animation: none !important; | |
| 31 } | |
| 32 | |
| 33 /* Most Visited */ | |
| 34 | |
| 35 #most-visited { | |
| 36 position: relative; | |
| 37 padding: 0; | |
| 38 margin-bottom: 34px; | |
| 39 -webkit-user-select: none; | |
| 40 -webkit-transition: height .5s, opacity .5s; | |
| 41 } | |
| 42 | |
| 43 @-webkit-keyframes 'thumbnail-enter' { | |
| 44 /* 2.5s */ | |
| 45 0%, 20% { | |
| 46 -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, .5); | |
| 47 -webkit-border-radius: 4px; | |
| 48 } | |
| 49 | |
| 50 100% { | |
| 51 -webkit-border-top-left-radius: 0; | |
| 52 -webkit-border-top-right-radius: 0; | |
| 53 -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0); | |
| 54 } | |
| 55 } | |
| 56 | |
| 57 @-webkit-keyframes 'edit-mode-border-enter' { | |
| 58 /* 2.5s */ | |
| 59 0%, 20% { | |
| 60 background-color: hsla(213, 66%, 57%, 0); | |
| 61 -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0); | |
| 62 } | |
| 63 | |
| 64 100% { | |
| 65 background-color: hsla(213, 66%, 57%, 1); | |
| 66 -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, .5); | |
| 67 } | |
| 68 } | |
| 69 | |
| 70 @-webkit-keyframes 'edit-bar-enter' { | |
| 71 /* 2.5s */ | |
| 72 0%, 20% { | |
| 73 opacity: 0; | |
| 74 pointer-events: none; | |
| 75 } | |
| 76 | |
| 77 100% { | |
| 78 opacity: 1; | |
| 79 pointer-events: inherit; | |
| 80 } | |
| 81 } | |
| 82 | |
| 83 .thumbnail-container { | |
| 84 position: absolute; | |
| 85 -webkit-transition: top .5s, left .5s; | |
| 86 color: black; | |
| 87 text-decoration: none; | |
| 88 -webkit-transition: left .5s, top .5s; | |
| 89 } | |
| 90 | |
| 91 .thumbnail, | |
| 92 .thumbnail-container .title { | |
| 93 width: 212px; /* natural size is 196 */ | |
| 94 height: 132px; /* 136 */ | |
| 95 -webkit-transition: width .5s, height .5s; | |
| 96 } | |
| 97 | |
| 98 .small .thumbnail, | |
| 99 .small .thumbnail-container .title { | |
| 100 width: 150px; | |
| 101 height: 93px; | |
| 102 } | |
| 103 | |
| 104 .thumbnail-wrapper { | |
| 105 display: block; | |
| 106 -webkit-background-size: 212px 132px; | |
| 107 background: no-repeat 4px 4px; | |
| 108 background-color: white; | |
| 109 -webkit-border-radius: 5px; | |
| 110 -webkit-transition: -webkit-background-size .5s; | |
| 111 } | |
| 112 | |
| 113 .small .thumbnail-wrapper { | |
| 114 -webkit-background-size: 150px 93px; | |
| 115 } | |
| 116 | |
| 117 .filler * { | |
| 118 visibility: hidden; | |
| 119 } | |
| 120 | |
| 121 .filler { | |
| 122 pointer-events: none; | |
| 123 } | |
| 124 | |
| 125 .filler .thumbnail-wrapper { | |
| 126 visibility: inherit; | |
| 127 border: 1px solid hsl(0, 0%, 90%); | |
| 128 background-color: hsl(0, 0%, 95%); | |
| 129 -webkit-border-radius: 2px; | |
| 130 display: block; | |
| 131 } | |
| 132 | |
| 133 .filler .thumbnail-wrapper .thumbnail { | |
| 134 visibility: visible; | |
| 135 border-color: hsl(0, 0%, 90%); | |
| 136 background-color: hsl(0, 0%, 95%); | |
| 137 } | |
| 138 | |
| 139 .edit-bar { | |
| 140 opacity: 0; | |
| 141 pointer-events: none; | |
| 142 display: -webkit-box; | |
| 143 -webkit-box-orient: horizontal; | |
| 144 -webkit-box-align: stretch; | |
| 145 padding: 3px; | |
| 146 padding-bottom: 0; | |
| 147 height: 17px; /* 23 - 2 * 3 */ | |
| 148 -webkit-transition: opacity .5s; | |
| 149 cursor: move; | |
| 150 font-size: 100%; | |
| 151 line-height: 17px; | |
| 152 background-image: -webkit-gradient(linear, left top, left bottom, | |
| 153 from(hsl(213, 87%, 67%)), | |
| 154 to(hsl(213, 66%, 57%))); | |
| 155 -webkit-border-top-left-radius: 4px; | |
| 156 -webkit-border-top-right-radius: 4px; | |
| 157 } | |
| 158 | |
| 159 .edit-bar > * { | |
| 160 display: block; | |
| 161 position: relative; | |
| 162 } | |
| 163 | |
| 164 .thumbnail-container:hover .edit-bar { | |
| 165 -webkit-animation: 'edit-bar-enter' 2.5s; | |
| 166 opacity: 1; | |
| 167 pointer-events: inherit; | |
| 168 } | |
| 169 | |
| 170 .edit-bar > .spacer { | |
| 171 -webkit-box-flex: 1; | |
| 172 } | |
| 173 | |
| 174 .edit-bar > .pin, | |
| 175 .edit-bar > .remove { | |
| 176 width: 16px; | |
| 177 height: 16px; | |
| 178 cursor: pointer; | |
| 179 background-image: no-repeat 50% 50%; | |
| 180 } | |
| 181 | |
| 182 .edit-bar > .pin { | |
| 183 background-image: url(chrome://theme/newtab_pin_off); | |
| 184 } | |
| 185 | |
| 186 .edit-bar > .pin:hover { | |
| 187 background-image: url(chrome://theme/newtab_pin_off_h); | |
| 188 } | |
| 189 | |
| 190 .edit-bar > .pin:active { | |
| 191 background-image: url(chrome://theme/newtab_pin_off_p); | |
| 192 } | |
| 193 | |
| 194 .pinned .edit-bar > .pin { | |
| 195 background-image: url(chrome://theme/newtab_pin_on); | |
| 196 } | |
| 197 | |
| 198 .pinned .edit-bar > .pin:hover { | |
| 199 background-image: url(chrome://theme/newtab_pin_on_h); | |
| 200 } | |
| 201 | |
| 202 .pinned .edit-bar > .pin:active { | |
| 203 background-image: url(chrome://theme/newtab_pin_on_p); | |
| 204 } | |
| 205 | |
| 206 .edit-bar > .remove { | |
| 207 background-image: url(chrome://theme/newtab_close); | |
| 208 } | |
| 209 | |
| 210 .edit-bar > .remove:hover { | |
| 211 background-image: url(chrome://theme/newtab_close_h); | |
| 212 } | |
| 213 | |
| 214 .edit-bar > .remove:active { | |
| 215 background-image: url(chrome://theme/newtab_close_p); | |
| 216 } | |
| 217 | |
| 218 :link, | |
| 219 :visited, | |
| 220 .link, | |
| 221 .thumbnail-container a { | |
| 222 cursor: pointer; | |
| 223 text-decoration: underline; | |
| 224 color: hsl(213, 90%, 24%); | |
| 225 } | |
| 226 | |
| 227 .thumbnail-container .title, | |
| 228 .small .thumbnail-container .title { | |
| 229 line-height: 16px; | |
| 230 height: 16px; | |
| 231 margin: 0; | |
| 232 margin-top: 4px; | |
| 233 font-size: 100%; | |
| 234 font-weight:normal; | |
| 235 padding: 0 3px; | |
| 236 opacity: 1; | |
| 237 -webkit-transition: opacity .5s; | |
| 238 color: black; | |
| 239 } | |
| 240 | |
| 241 .thumbnail-container .title div { | |
| 242 white-space: nowrap; | |
| 243 overflow: hidden; | |
| 244 text-overflow: ellipsis; | |
| 245 | |
| 246 background: no-repeat 0 50%; | |
| 247 -webkit-background-size: 16px; | |
| 248 padding-left: 20px; /* we cannot use padding start here because even if we set | |
| 249 the direction we always want the icon on the same side | |
| 250 */ | |
| 251 padding-right: 0; | |
| 252 } | |
| 253 | |
| 254 html[dir=rtl] .thumbnail-container .title div { | |
| 255 background-position-x: 100%; | |
| 256 padding-left: 0; | |
| 257 padding-right: 20px; | |
| 258 text-align: right; | |
| 259 } | |
| 260 | |
| 261 .thumbnail { | |
| 262 border: 3px solid hsla(213, 63%, 93%, 1); | |
| 263 padding: 1px; | |
| 264 -webkit-border-radius: 5px; | |
| 265 display: block; | |
| 266 -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0); | |
| 267 -webkit-transition: width .5s, height .5s, border-color .5s, | |
| 268 -webkit-border-radius .5s, -webkit-box-shadow .5s; | |
| 269 } | |
| 270 | |
| 271 .edit-mode-border { | |
| 272 -webkit-border-radius: 4px; | |
| 273 background-color: hsla(213, 54%, 95%, 0); | |
| 274 } | |
| 275 | |
| 276 .thumbnail-container:hover .thumbnail { | |
| 277 -webkit-animation: 'thumbnail-enter' 2.5s; | |
| 278 border-color: hsla(213, 66%, 57%, 1); | |
| 279 -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0); | |
| 280 -webkit-border-top-left-radius: 0; | |
| 281 -webkit-border-top-right-radius: 0; | |
| 282 | |
| 283 background-image: -webkit-gradient(linear, left top, left bottom, | |
| 284 from(hsla(0, 0%, 0%, 0)), | |
| 285 color-stop(0.85, hsla(0, 0%, 47%, 0)), | |
| 286 to(hsla(0, 0%, 47%, 0.2)) | |
| 287 ); | |
| 288 } | |
| 289 | |
| 290 .thumbnail-container:hover .edit-mode-border { | |
| 291 -webkit-animation: 'edit-mode-border-enter' 2.5s; | |
| 292 background-color: hsla(213, 66%, 57%, 1); | |
| 293 -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, .5); | |
| 294 } | |
| 295 | |
| 296 .dragging { | |
| 297 -webkit-transition: none; | |
| 298 } | |
| 299 | |
| 300 .dragging .title { | |
| 301 opacity: 0; | |
| 302 } | |
| 303 | |
| 304 .list .dragging .title { | |
| 305 opacity: 1; | |
| 306 } | |
| 307 | |
| 308 .hide { | |
| 309 opacity: 0 !important; | |
| 310 visibility: hidden !important; | |
| 311 } | |
| 312 | |
| 313 @-webkit-keyframes 'fade-in' { | |
| 314 0% { | |
| 315 opacity: 0; | |
| 316 } | |
| 317 | |
| 318 100% { | |
| 319 opacity: 1; | |
| 320 } | |
| 321 } | |
| 322 | |
| 323 .fade-in { | |
| 324 -webkit-animation: 'fade-in' 2.5s; | |
| 325 } | |
| 326 | |
| 327 /* Notification */ | |
| 328 | |
| 329 #notification { | |
| 330 position: relative; | |
| 331 background-color: hsl(52, 100%, 80%); | |
| 332 -webkit-border-radius: 4px; | |
| 333 padding: 8px 16px; | |
| 334 white-space: nowrap; | |
| 335 display: table; | |
| 336 margin: 10px auto; | |
| 337 font-weight: bold; | |
| 338 opacity: 0; | |
| 339 visibility: hidden; | |
| 340 -webkit-transition: opacity 1s; | |
| 341 z-index: 1; | |
| 342 } | |
| 343 | |
| 344 #notification > * { | |
| 345 display: table-cell; | |
| 346 max-width: 500px; | |
| 347 overflow: hidden; | |
| 348 text-overflow: ellipsis; | |
| 349 } | |
| 350 | |
| 351 .small #notification > * { | |
| 352 max-width: 300px; | |
| 353 } | |
| 354 | |
| 355 #notification:hover, | |
| 356 #notification.show { | |
| 357 opacity: 1; | |
| 358 visibility: inherit; | |
| 359 } | |
| 360 | |
| 361 #notification .link { | |
| 362 -webkit-margin-start: 20px; | |
| 363 } | |
| 364 | |
| 365 /* List mode */ | |
| 366 | |
| 367 .list .thumbnail, | |
| 368 .list .edit-bar { | |
| 369 display: none; | |
| 370 } | |
| 371 | |
| 372 .list .title, | |
| 373 .small .list .title { | |
| 374 width: auto; | |
| 375 } | |
| 376 | |
| 377 .list .thumbnail-container { | |
| 378 -webkit-box-sizing: border-box; | |
| 379 } | |
| 380 | |
| 381 .list .title, | |
| 382 .small .list .title { | |
| 383 font-size: 140%; | |
| 384 line-height: 40px; | |
| 385 height: 40px; | |
| 386 color: hsl(213, 27%, 68%); | |
| 387 text-decoration: underline; | |
| 388 } | |
| 389 | |
| 390 .list .title div { | |
| 391 color: rgb(6, 45, 117); | |
| 392 } | |
| 393 | |
| 394 .section { | |
| 395 background: white; | |
| 396 -webkit-border-radius: 4px; | |
| 397 white-space: nowrap; | |
| 398 text-overflow: ellipsis; | |
| 399 border: 1px solid hsl(213, 65%, 92%); | |
| 400 padding-bottom: 5px; | |
| 401 overflow: hidden; | |
| 402 min-height: 198px; /* height of 6 items plus the header */ | |
| 403 vertical-align: top; | |
| 404 margin: 0; | |
| 405 } | |
| 406 | |
| 407 .section > h2 { | |
| 408 background-image: -webkit-gradient(linear, left top, left bottom, | |
| 409 from(hsl(213, 87%, 67%)), | |
| 410 to(hsl(213, 66%, 57%))); | |
| 411 -webkit-border-top-left-radius: 2px; | |
| 412 -webkit-border-top-right-radius: 2px; | |
| 413 padding: 4px 8px; | |
| 414 color: white; | |
| 415 font-size: 100%; | |
| 416 margin: 0px; | |
| 417 } | |
| 418 | |
| 419 .item { | |
| 420 background: no-repeat 0% 50%; | |
| 421 padding: 2px; | |
| 422 padding-left: 18px; | |
| 423 -webkit-background-size: 16px; | |
| 424 background-color: hsla(213, 63%, 93%, 0); | |
| 425 display: block; | |
| 426 line-height: 20px; | |
| 427 -webkit-box-sizing: border-box; | |
| 428 white-space: nowrap; | |
| 429 overflow: hidden; | |
| 430 text-overflow: ellipsis; | |
| 431 text-decoration: none; | |
| 432 font-size: 100%; | |
| 433 } | |
| 434 | |
| 435 html[dir='rtl'] .item { | |
| 436 background-position-x: 100%; | |
| 437 padding-right: 18px; | |
| 438 padding-left: 2px; | |
| 439 text-align: right; | |
| 440 } | |
| 441 | |
| 442 .window { | |
| 443 position: relative; | |
| 444 overflow: visible; /* We use visible so that the menu can be a child and shown | |
| 445 on :hover. To get this to work we have to set visibility | |
| 446 to visible which unfortunately breaks the ellipsis for t | |
| 447 he window items */ | |
| 448 background-image: url(chrome://theme/newtab_closed_window); | |
| 449 } | |
| 450 | |
| 451 .window-menu { | |
| 452 position: absolute; | |
| 453 display: none; | |
| 454 border: 1px solid #999; | |
| 455 -webkit-box-shadow: 5px 5px 10px hsla(0, 0%, 0%, .3); | |
| 456 background-color: white; | |
| 457 width: 157px; | |
| 458 left: 0; | |
| 459 white-space: nowrap; | |
| 460 opacity: .9; | |
| 461 z-index: 1; | |
| 462 pointer-events: none; | |
| 463 padding: 1px; | |
| 464 } | |
| 465 | |
| 466 .hbox { | |
| 467 display: -webkit-box; | |
| 468 -webkit-box-orient: horizontal; | |
| 469 } | |
| 470 | |
| 471 #recent-tabs, | |
| 472 #downloads { | |
| 473 -webkit-box-flex: 1; | |
| 474 width: 50%; | |
| 475 } | |
| 476 | |
| 477 .section h3 { | |
| 478 padding: 8px 5px; | |
| 479 padding-bottom: 0; | |
| 480 font-size: 80%; | |
| 481 font-weight: normal; | |
| 482 margin: 0; | |
| 483 -webkit-margin-start: 2px; | |
| 484 overflow: hidden; | |
| 485 text-overflow: ellipsis; | |
| 486 } | |
| 487 | |
| 488 .item-container { | |
| 489 margin: 0 5px; | |
| 490 text-decoration: underline; | |
| 491 color: hsl(213, 27%, 68%); | |
| 492 } | |
| 493 | |
| 494 .item.nav:after { | |
| 495 content: '\00bb'; /* raque gets flipped automatically in rtl */ | |
| 496 font-size: 120%; | |
| 497 -webkit-padding-start: 2px; | |
| 498 } | |
| 499 | |
| 500 #recent-activities { | |
| 501 -webkit-transition: width .5s, opacity .5s; | |
| 502 } | |
| 503 | |
| 504 .section { | |
| 505 -webkit-box-flex: 1; | |
| 506 width: 50%; | |
| 507 display: inline-block; | |
| 508 } | |
| 509 | |
| 510 #view-toolbar { | |
| 511 -webkit-user-select: none; | |
| 512 text-align: right; | |
| 513 position: relative; | |
| 514 top: 35px; | |
| 515 } | |
| 516 | |
| 517 html[dir='rtl'] #view-toolbar { | |
| 518 text-align: left; | |
| 519 } | |
| 520 | |
| 521 #view-toolbar input { | |
| 522 -webkit-appearance: none; | |
| 523 background-color: transparent; | |
| 524 width: 19px; | |
| 525 height: 17px; | |
| 526 margin: 0; | |
| 527 border: 0; | |
| 528 padding: 0; | |
| 529 vertical-align: top; | |
| 530 -webkit-margin-start: 5px; | |
| 531 } | |
| 532 | |
| 533 #lower-sections { | |
| 534 position: relative; | |
| 535 overflow: hidden; | |
| 536 -webkit-transition: height .5s, width .5s, opacity .5s; | |
| 537 white-space: nowrap; | |
| 538 } | |
| 539 | |
| 540 #lower-sections .section { | |
| 541 -webkit-transition: width .5s, opacity .5s, left .5s; | |
| 542 -webkit-box-sizing: border-box; | |
| 543 } | |
| 544 | |
| 545 #lower-sections .spacer { | |
| 546 width: 20px; | |
| 547 -webkit-transition: width .5s; | |
| 548 display: inline-block; | |
| 549 } | |
| 550 | |
| 551 .loading * { | |
| 552 -webkit-transition: none; | |
| 553 } | |
| 554 | |
| 555 #thumb-checkbox { | |
| 556 background-image: url(chrome://theme/newtab_thumb_off); | |
| 557 } | |
| 558 | |
| 559 #thumb-checkbox:hover { | |
| 560 background-image: url(chrome://theme/newtab_thumb_off_h); | |
| 561 } | |
| 562 | |
| 563 #thumb-checkbox:active { | |
| 564 background-image: url(chrome://theme/newtab_thumb_off_p); | |
| 565 } | |
| 566 | |
| 567 #thumb-checkbox:checked { | |
| 568 background-image: url(chrome://theme/newtab_thumb_on); | |
| 569 } | |
| 570 | |
| 571 #thumb-checkbox:checked:hover { | |
| 572 background-image: url(chrome://theme/newtab_thumb_on_h); | |
| 573 } | |
| 574 | |
| 575 #thumb-checkbox:checked:active { | |
| 576 background-image: url(chrome://theme/newtab_thumb_on_p); | |
| 577 } | |
| 578 | |
| 579 #list-checkbox { | |
| 580 background-image: url(chrome://theme/newtab_list_off); | |
| 581 } | |
| 582 | |
| 583 #list-checkbox:hover { | |
| 584 background-image: url(chrome://theme/newtab_list_off_h); | |
| 585 } | |
| 586 | |
| 587 #list-checkbox:active { | |
| 588 background-image: url(chrome://theme/newtab_list_off_p); | |
| 589 } | |
| 590 | |
| 591 #list-checkbox:checked { | |
| 592 background-image: url(chrome://theme/newtab_list_on); | |
| 593 } | |
| 594 | |
| 595 #list-checkbox:checked:hover { | |
| 596 background-image: url(chrome://theme/newtab_list_on_h); | |
| 597 } | |
| 598 | |
| 599 #list-checkbox:checked:active { | |
| 600 background-image: url(chrome://theme/newtab_list_on_p); | |
| 601 } | |
| 602 | |
| 603 #option-button { | |
| 604 background-image: url(chrome://theme/newtab_option); | |
| 605 } | |
| 606 | |
| 607 #option-button:hover { | |
| 608 background-image: url(chrome://theme/newtab_option_h); | |
| 609 } | |
| 610 | |
| 611 #option-button:active { | |
| 612 background-image: url(chrome://theme/newtab_option_p); | |
| 613 } | |
| 614 | |
| 615 #option-menu { | |
| 616 -webkit-user-select: none; | |
| 617 position: absolute; | |
| 618 right: 0; | |
| 619 left: auto; | |
| 620 top: 53px; /* Position this below the option button. The option button | |
| 621 is positioned 35px from the top and has a height of 17px. We add | |
| 622 one to get some spacing there as well: 35 + 17 + 1 = 53 */ | |
| 623 cursor: default; | |
| 624 pointer-events: all; | |
| 625 min-width: 175px; | |
| 626 } | |
| 627 | |
| 628 html[dir='rtl'] #option-menu { | |
| 629 right: auto; | |
| 630 left: 0; | |
| 631 } | |
| 632 | |
| 633 #option-menu > div { | |
| 634 padding: 3px 8px; | |
| 635 overflow: hidden; | |
| 636 text-overflow: ellipsis; | |
| 637 } | |
| 638 | |
| 639 #option-menu > [selected] { | |
| 640 background-color: hsla(213, 66%, 57%, 1); | |
| 641 color: white; | |
| 642 } | |
| OLD | NEW |