| 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 } | 8 } |
| 9 | 9 |
| 10 #main { | 10 #main { |
| (...skipping 63 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 74 | 74 |
| 75 .filler * { | 75 .filler * { |
| 76 visibility: hidden; | 76 visibility: hidden; |
| 77 } | 77 } |
| 78 | 78 |
| 79 .filler { | 79 .filler { |
| 80 pointer-events: none; | 80 pointer-events: none; |
| 81 } | 81 } |
| 82 | 82 |
| 83 .filler .thumbnail-wrapper { | 83 .filler .thumbnail-wrapper { |
| 84 visibility: inherit; | 84 visibility: visible; |
| 85 border: 1px solid hsl(0, 0%, 90%); | 85 border: 3px solid hsl(213, 60%, 92%); |
| 86 background-color: hsl(0, 0%, 95%); | |
| 87 -webkit-border-radius: 2px; | |
| 88 display: block; | |
| 89 } | 86 } |
| 90 | 87 |
| 91 .filler .thumbnail { | 88 .filler .thumbnail { |
| 92 visibility: visible; | 89 visibility: inherit; |
| 93 border-color: hsl(0, 0%, 90%); | 90 border: 1px solid white; |
| 94 background-color: hsl(0, 0%, 95%); | 91 padding: 0; |
| 92 background-color: hsl(213, 60%, 92%); |
| 95 } | 93 } |
| 96 | 94 |
| 97 .edit-bar { | 95 .edit-bar { |
| 98 display: -webkit-box; | 96 display: -webkit-box; |
| 99 -webkit-box-orient: horizontal; | 97 -webkit-box-orient: horizontal; |
| 100 -webkit-box-align: stretch; | 98 -webkit-box-align: stretch; |
| 101 padding: 3px; | 99 padding: 3px; |
| 102 padding-bottom: 0; | 100 padding-bottom: 0; |
| 103 height: 17px; /* 23 - 2 * 3 */ | 101 height: 17px; /* 23 - 2 * 3 */ |
| 104 cursor: move; | 102 cursor: move; |
| (...skipping 190 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 295 | 293 |
| 296 .fade-in { | 294 .fade-in { |
| 297 -webkit-animation: 'fade-in' .15s; | 295 -webkit-animation: 'fade-in' .15s; |
| 298 } | 296 } |
| 299 | 297 |
| 300 /* Notification */ | 298 /* Notification */ |
| 301 | 299 |
| 302 #notification { | 300 #notification { |
| 303 position: relative; | 301 position: relative; |
| 304 background-color: hsl(52, 100%, 80%); | 302 background-color: hsl(52, 100%, 80%); |
| 305 -webkit-border-radius: 4px; | 303 -webkit-border-radius: 6px; |
| 306 padding: 8px 16px; | 304 padding: 7px 15px; |
| 307 white-space: nowrap; | 305 white-space: nowrap; |
| 308 display: table; | 306 display: table; |
| 309 margin: 10px auto; | 307 margin: 10px auto; |
| 310 font-weight: bold; | 308 font-weight: bold; |
| 311 opacity: 0; | 309 opacity: 0; |
| 312 visibility: hidden; | 310 -webkit-transition: opacity .15s; |
| 313 -webkit-transition: opacity 1s; | 311 pointer-events: none; |
| 314 z-index: 1; | 312 z-index: 1; |
| 315 } | 313 } |
| 316 | 314 |
| 315 #notification.first-run { |
| 316 padding: 5px 13px; /* subtract the border witdh */ |
| 317 border: 2px solid hsl(213, 55%, 75%); |
| 318 background-color: hsl(213, 63%, 93%); |
| 319 -webkit-box-shadow: 2px 2px 3px hsla(0, 0%, 0%, .3); |
| 320 font-weight: normal; |
| 321 } |
| 322 |
| 317 #notification > * { | 323 #notification > * { |
| 318 display: table-cell; | 324 display: table-cell; |
| 319 max-width: 500px; | 325 max-width: 500px; |
| 320 overflow: hidden; | 326 overflow: hidden; |
| 321 text-overflow: ellipsis; | 327 text-overflow: ellipsis; |
| 322 } | 328 } |
| 323 | 329 |
| 324 #notification:hover, | |
| 325 #notification.show { | 330 #notification.show { |
| 326 opacity: 1; | 331 opacity: 1; |
| 327 visibility: inherit; | 332 pointer-events: all; |
| 333 -webkit-transition: opacity 1s; |
| 328 } | 334 } |
| 329 | 335 |
| 330 #notification .link { | 336 #notification .link { |
| 331 -webkit-margin-start: 20px; | 337 -webkit-margin-start: 20px; |
| 332 } | 338 } |
| 333 | 339 |
| 334 /* List mode */ | 340 /* List mode */ |
| 335 | 341 |
| 336 .list .thumbnail, | 342 .list .thumbnail, |
| 337 .list .edit-bar { | 343 .list .edit-bar { |
| (...skipping 14 matching lines...) Expand all Loading... |
| 352 | 358 |
| 353 .list .title > div { | 359 .list .title > div { |
| 354 color: rgb(6, 45, 117); | 360 color: rgb(6, 45, 117); |
| 355 } | 361 } |
| 356 | 362 |
| 357 .section { | 363 .section { |
| 358 background: white; | 364 background: white; |
| 359 -webkit-border-radius: 4px; | 365 -webkit-border-radius: 4px; |
| 360 white-space: nowrap; | 366 white-space: nowrap; |
| 361 text-overflow: ellipsis; | 367 text-overflow: ellipsis; |
| 362 border: 1px solid hsl(213, 65%, 92%); | 368 border: 1px solid hsl(213, 63%, 93%); |
| 363 overflow: hidden; | 369 overflow: hidden; |
| 364 min-height: 151px; /* height of 5 items plus the header */ | 370 min-height: 151px; /* height of 5 items plus the header */ |
| 365 vertical-align: top; | 371 vertical-align: top; |
| 366 margin: 0; | 372 margin: 0; |
| 367 margin-bottom: 10px; | 373 margin-bottom: 10px; |
| 368 } | 374 } |
| 369 | 375 |
| 370 .section > h2 { | 376 .section > h2 { |
| 371 background-image: -webkit-gradient(linear, left top, left bottom, | 377 background-image: -webkit-gradient(linear, left top, left bottom, |
| 372 from(hsl(213, 87%, 67%)), | 378 from(hsl(213, 87%, 67%)), |
| (...skipping 332 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 705 } | 711 } |
| 706 | 712 |
| 707 #t3, #t7 { | 713 #t3, #t7 { |
| 708 left: 534px; | 714 left: 534px; |
| 709 } | 715 } |
| 710 | 716 |
| 711 #t4, #t5, #t6, #t7 { | 717 #t4, #t5, #t6, #t7 { |
| 712 top: 147px; | 718 top: 147px; |
| 713 } | 719 } |
| 714 } | 720 } |
| OLD | NEW |