| OLD | NEW |
| 1 html { | 1 html { |
| 2 /* This is needed because of chrome://theme/css/new_tab.css */ | 2 /* This is needed because of chrome://theme/css/new_tab.css */ |
| 3 height: 100%; | 3 height: 100%; |
| 4 } | 4 } |
| 5 | 5 |
| 6 body { | 6 body { |
| 7 margin: 0; | 7 margin: 0; |
| 8 height: 100%; | 8 height: 100%; |
| 9 overflow: auto; | 9 overflow: auto; |
| 10 } | 10 } |
| (...skipping 57 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 68 | 68 |
| 69 .thumbnail, | 69 .thumbnail, |
| 70 .thumbnail-container > .title { | 70 .thumbnail-container > .title { |
| 71 width: 207px; /* natural size is 196 */ | 71 width: 207px; /* natural size is 196 */ |
| 72 height: 129px; /* 136 */ | 72 height: 129px; /* 136 */ |
| 73 -webkit-transition: width .15s, height .15s; | 73 -webkit-transition: width .15s, height .15s; |
| 74 } | 74 } |
| 75 | 75 |
| 76 .thumbnail-wrapper { | 76 .thumbnail-wrapper { |
| 77 display: block; | 77 display: block; |
| 78 -webkit-background-size: 212px 132px; | 78 background-size: 212px 132px; |
| 79 background: no-repeat 4px 4px; | 79 background: no-repeat 4px 4px; |
| 80 background-color: white; | 80 background-color: white; |
| 81 -webkit-border-radius: 5px; | 81 border-radius: 5px; |
| 82 -webkit-transition: -webkit-background-size .15s; | 82 -webkit-transition: background-size .15s; |
| 83 position: relative; | 83 position: relative; |
| 84 } | 84 } |
| 85 | 85 |
| 86 .filler * { | 86 .filler * { |
| 87 visibility: hidden; | 87 visibility: hidden; |
| 88 } | 88 } |
| 89 | 89 |
| 90 .filler { | 90 .filler { |
| 91 pointer-events: none; | 91 pointer-events: none; |
| 92 } | 92 } |
| (...skipping 18 matching lines...) Expand all Loading... |
| 111 display: -webkit-box; | 111 display: -webkit-box; |
| 112 -webkit-box-orient: horizontal; | 112 -webkit-box-orient: horizontal; |
| 113 -webkit-box-align: stretch; | 113 -webkit-box-align: stretch; |
| 114 padding: 3px; | 114 padding: 3px; |
| 115 padding-bottom: 0; | 115 padding-bottom: 0; |
| 116 height: 17px; /* 23 - 2 * 3 */ | 116 height: 17px; /* 23 - 2 * 3 */ |
| 117 cursor: move; | 117 cursor: move; |
| 118 font-size: 100%; | 118 font-size: 100%; |
| 119 line-height: 17px; | 119 line-height: 17px; |
| 120 background: hsl(213, 54%, 95%); | 120 background: hsl(213, 54%, 95%); |
| 121 -webkit-border-top-left-radius: 4px; | 121 border-top-left-radius: 4px; |
| 122 -webkit-border-top-right-radius: 4px; | 122 border-top-right-radius: 4px; |
| 123 position: relative; | 123 position: relative; |
| 124 margin-top: 21px; | 124 margin-top: 21px; |
| 125 margin-bottom: -21px; | 125 margin-bottom: -21px; |
| 126 -webkit-transition: margin .15s, background .15s; | 126 -webkit-transition: margin .15s, background .15s; |
| 127 } | 127 } |
| 128 | 128 |
| 129 .edit-bar > * { | 129 .edit-bar > * { |
| 130 display: block; | 130 display: block; |
| 131 position: relative; | 131 position: relative; |
| 132 } | 132 } |
| (...skipping 90 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 223 padding: 0 3px; | 223 padding: 0 3px; |
| 224 opacity: 1; | 224 opacity: 1; |
| 225 -webkit-transition: opacity .15s, width .15s; | 225 -webkit-transition: opacity .15s, width .15s; |
| 226 color: black; | 226 color: black; |
| 227 } | 227 } |
| 228 | 228 |
| 229 .thumbnail-container > .title > div { | 229 .thumbnail-container > .title > div { |
| 230 white-space: nowrap; | 230 white-space: nowrap; |
| 231 overflow: hidden; | 231 overflow: hidden; |
| 232 text-overflow: ellipsis; | 232 text-overflow: ellipsis; |
| 233 | |
| 234 background: no-repeat 0 50%; | 233 background: no-repeat 0 50%; |
| 235 -webkit-background-size: 16px; | 234 background-size: 16px; |
| 236 padding-left: 20px; /* we cannot use padding start here because even if we set | 235 padding-left: 20px; /* we cannot use padding start here because even if we set |
| 237 the direction we always want the icon on the same side | 236 the direction we always want the icon on the same side |
| 238 */ | 237 */ |
| 239 padding-right: 0; | 238 padding-right: 0; |
| 240 } | 239 } |
| 241 | 240 |
| 242 html[dir=rtl] .thumbnail-container > .title > div { | 241 html[dir=rtl] .thumbnail-container > .title > div { |
| 243 background-position-x: 100%; | 242 background-position-x: 100%; |
| 244 padding-left: 0; | 243 padding-left: 0; |
| 245 padding-right: 20px; | 244 padding-right: 20px; |
| 246 text-align: right; | 245 text-align: right; |
| 247 } | 246 } |
| 248 | 247 |
| 249 .thumbnail { | 248 .thumbnail { |
| 250 border: 3px solid hsl(213, 63%, 93%); | 249 border: 3px solid hsl(213, 63%, 93%); |
| 251 padding: 1px; | 250 padding: 1px; |
| 252 -webkit-border-radius: 5px; | 251 border-radius: 5px; |
| 253 display: block; | 252 display: block; |
| 254 -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0); | 253 -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0); |
| 255 -webkit-transition: width .15s, height .15s, border-color .15s, | 254 -webkit-transition: width .15s, height .15s, border-color .15s, |
| 256 -webkit-border-radius .15s, -webkit-box-shadow .15s; | 255 border-radius .15s, -webkit-box-shadow .15s; |
| 257 } | 256 } |
| 258 | 257 |
| 259 .edit-mode-border { | 258 .edit-mode-border { |
| 260 -webkit-border-radius: 4px; | 259 border-radius: 4px; |
| 261 | 260 |
| 262 /* when dragged over we move this */ | 261 /* when dragged over we move this */ |
| 263 position: relative; | 262 position: relative; |
| 264 -webkit-transition: top .15s, left .15s; | 263 -webkit-transition: top .15s, left .15s; |
| 265 } | 264 } |
| 266 | 265 |
| 267 .thumbnail-container:focus .thumbnail, | 266 .thumbnail-container:focus .thumbnail, |
| 268 .thumbnail-container:hover .thumbnail { | 267 .thumbnail-container:hover .thumbnail { |
| 269 border-color: hsl(213, 66%, 57%); | 268 border-color: hsl(213, 66%, 57%); |
| 270 -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0); | 269 -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0); |
| (...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 325 .fade-in { | 324 .fade-in { |
| 326 -webkit-animation: 'fade-in' .15s; | 325 -webkit-animation: 'fade-in' .15s; |
| 327 } | 326 } |
| 328 | 327 |
| 329 /* Notification */ | 328 /* Notification */ |
| 330 | 329 |
| 331 #notification { | 330 #notification { |
| 332 position: relative; | 331 position: relative; |
| 333 background-color: hsl(52, 100%, 80%); | 332 background-color: hsl(52, 100%, 80%); |
| 334 border: 1px solid rgb(211, 211, 211); | 333 border: 1px solid rgb(211, 211, 211); |
| 335 -webkit-border-radius: 6px; | 334 border-radius: 6px; |
| 336 padding: 7px 15px; | 335 padding: 7px 15px; |
| 337 white-space: nowrap; | 336 white-space: nowrap; |
| 338 display: table; | 337 display: table; |
| 339 margin: -8px auto 5px auto; | 338 margin: -8px auto 5px auto; |
| 340 font-weight: bold; | 339 font-weight: bold; |
| 341 opacity: 0; | 340 opacity: 0; |
| 342 pointer-events: none; | 341 pointer-events: none; |
| 343 -webkit-transition: opacity .15s; | 342 -webkit-transition: opacity .15s; |
| 344 z-index: 1; | 343 z-index: 1; |
| 345 color: black; | 344 color: black; |
| (...skipping 63 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 409 | 408 |
| 410 .list > .thumbnail-container > .title > div { | 409 .list > .thumbnail-container > .title > div { |
| 411 text-decoration: none; | 410 text-decoration: none; |
| 412 color: rgb(6, 45, 117); | 411 color: rgb(6, 45, 117); |
| 413 } | 412 } |
| 414 | 413 |
| 415 .item { | 414 .item { |
| 416 background: no-repeat 0% 50%; | 415 background: no-repeat 0% 50%; |
| 417 padding: 2px; | 416 padding: 2px; |
| 418 padding-left: 18px; | 417 padding-left: 18px; |
| 419 -webkit-background-size: 16px; | 418 background-size: 16px; |
| 420 background-color: hsla(213, 63%, 93%, 0); | 419 background-color: hsla(213, 63%, 93%, 0); |
| 421 display: block; | 420 display: block; |
| 422 line-height: 20px; | 421 line-height: 20px; |
| 423 -webkit-box-sizing: border-box; | 422 -webkit-box-sizing: border-box; |
| 424 white-space: nowrap; | 423 white-space: nowrap; |
| 425 overflow: hidden; | 424 overflow: hidden; |
| 426 text-overflow: ellipsis; | 425 text-overflow: ellipsis; |
| 427 text-decoration: none; | 426 text-decoration: none; |
| 428 font-size: 100%; | 427 font-size: 100%; |
| 429 } | 428 } |
| (...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 468 margin: 2px 0; | 467 margin: 2px 0; |
| 469 } | 468 } |
| 470 | 469 |
| 471 /* Made to look like a tooltip using vista/win7 look and feel. | 470 /* Made to look like a tooltip using vista/win7 look and feel. |
| 472 TODO(arv): Replace with -webkit-appearance once issue 17371 is fixed | 471 TODO(arv): Replace with -webkit-appearance once issue 17371 is fixed |
| 473 */ | 472 */ |
| 474 #window-tooltip { | 473 #window-tooltip { |
| 475 color: #555; | 474 color: #555; |
| 476 pointer-events: none; | 475 pointer-events: none; |
| 477 border: 1px solid rgb(118, 118, 118); | 476 border: 1px solid rgb(118, 118, 118); |
| 478 -webkit-border-radius: 3px; | 477 border-radius: 3px; |
| 479 padding: 0px 3px; | 478 padding: 0px 3px; |
| 480 background: -webkit-gradient(linear, left top, left bottom, | 479 background: -webkit-gradient(linear, left top, left bottom, |
| 481 from(white), | 480 from(white), |
| 482 to(rgb(228, 229, 240))); | 481 to(rgb(228, 229, 240))); |
| 483 width: auto; | 482 width: auto; |
| 484 max-width: 300px; | 483 max-width: 300px; |
| 485 } | 484 } |
| 486 | 485 |
| 487 .hbox { | 486 .hbox { |
| 488 display: -webkit-box; | 487 display: -webkit-box; |
| 489 -webkit-box-orient: horizontal; | 488 -webkit-box-orient: horizontal; |
| 490 } | 489 } |
| 491 | 490 |
| 492 #recently-closed { | 491 #recently-closed { |
| 493 background-color: hsla(213, 60%, 92%, .4); | 492 background-color: hsla(213, 60%, 92%, .4); |
| 494 border: 1px solid hsl(213, 60%, 92%); | 493 border: 1px solid hsl(213, 60%, 92%); |
| 495 -webkit-border-radius: 5px; | 494 border-radius: 5px; |
| 496 padding: 5px 0px; | 495 padding: 5px 0px; |
| 497 white-space: nowrap; | 496 white-space: nowrap; |
| 498 overflow-x: hidden; | 497 overflow-x: hidden; |
| 499 } | 498 } |
| 500 | 499 |
| 501 #recently-closed > * { | 500 #recently-closed > * { |
| 502 display: inline-block; | 501 display: inline-block; |
| 503 max-width: 114px; /* Selected so that we can fit 5 items in EN-US */ | 502 max-width: 114px; /* Selected so that we can fit 5 items in EN-US */ |
| 504 white-space: nowrap; | 503 white-space: nowrap; |
| 505 overflow: hidden; | 504 overflow: hidden; |
| (...skipping 12 matching lines...) Expand all Loading... |
| 518 } | 517 } |
| 519 | 518 |
| 520 .nav > a:after { | 519 .nav > a:after { |
| 521 content: '\00bb'; /* raque gets flipped automatically in rtl */ | 520 content: '\00bb'; /* raque gets flipped automatically in rtl */ |
| 522 font-size: 115%; | 521 font-size: 115%; |
| 523 -webkit-padding-start: 2px; | 522 -webkit-padding-start: 2px; |
| 524 } | 523 } |
| 525 | 524 |
| 526 #sync-status { | 525 #sync-status { |
| 527 display: none; | 526 display: none; |
| 528 -webkit-border-radius: 6px; | 527 border-radius: 6px; |
| 529 padding: 5px 0; | 528 padding: 5px 0; |
| 530 margin: 10px 0; | 529 margin: 10px 0; |
| 531 white-space: nowrap; | 530 white-space: nowrap; |
| 532 overflow-x: hidden; | 531 overflow-x: hidden; |
| 533 } | 532 } |
| 534 | 533 |
| 535 #sync-status > * { | 534 #sync-status > * { |
| 536 display: inline-block; | 535 display: inline-block; |
| 537 max-width: none; | 536 max-width: none; |
| 538 white-space: nowrap; | 537 white-space: nowrap; |
| (...skipping 206 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 745 .hide-promo-line { | 744 .hide-promo-line { |
| 746 opacity: 0; | 745 opacity: 0; |
| 747 pointer-events: none; | 746 pointer-events: none; |
| 748 } | 747 } |
| 749 | 748 |
| 750 #promo-line { | 749 #promo-line { |
| 751 display: inline-block; | 750 display: inline-block; |
| 752 margin-bottom: 20px; | 751 margin-bottom: 20px; |
| 753 background-color: hsl(52, 100%, 80%); | 752 background-color: hsl(52, 100%, 80%); |
| 754 border: 1px solid rgb(211, 211, 211); | 753 border: 1px solid rgb(211, 211, 211); |
| 755 -webkit-border-radius: 6px; | 754 border-radius: 6px; |
| 756 padding: 7px 10px; | 755 padding: 7px 10px; |
| 757 white-space: nowrap; | 756 white-space: nowrap; |
| 758 text-align: center; | 757 text-align: center; |
| 759 vertical-align: middle; | 758 vertical-align: middle; |
| 760 color: black; | 759 color: black; |
| 761 -webkit-transition: opacity .15s; | 760 -webkit-transition: opacity .15s; |
| 762 } | 761 } |
| 763 | 762 |
| 764 #promo-line * { | 763 #promo-line * { |
| 765 font-weight: bold; | 764 font-weight: bold; |
| (...skipping 52 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 818 .thumbnail-container > .title { | 817 .thumbnail-container > .title { |
| 819 width: 150px; | 818 width: 150px; |
| 820 height: 93px; | 819 height: 93px; |
| 821 } | 820 } |
| 822 | 821 |
| 823 .thumbnail-container > .title { | 822 .thumbnail-container > .title { |
| 824 height: auto; | 823 height: auto; |
| 825 } | 824 } |
| 826 | 825 |
| 827 .thumbnail-wrapper { | 826 .thumbnail-wrapper { |
| 828 -webkit-background-size: 150px 93px; | 827 background-size: 150px 93px; |
| 829 } | 828 } |
| 830 | 829 |
| 831 .list > .thumbnail-container { | 830 .list > .thumbnail-container { |
| 832 max-width: 692px; | 831 max-width: 692px; |
| 833 } | 832 } |
| 834 | 833 |
| 835 #notification > * { | 834 #notification > * { |
| 836 max-width: 300px; | 835 max-width: 300px; |
| 837 } | 836 } |
| 838 | 837 |
| 839 #notification > span > .blacklist-title { | 838 #notification > span > .blacklist-title { |
| 840 max-width: 15ex; | 839 max-width: 15ex; |
| 841 } | 840 } |
| 842 } | 841 } |
| OLD | NEW |