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 |