| OLD | NEW |
|---|
| (Empty) | |
| 1 html, |
| 2 body { |
| 3 margin: 0; |
| 4 padding: 0; |
| 5 } |
| 6 |
| 7 button { |
| 8 margin: 0; |
| 9 padding: 0; |
| 10 border: 0; |
| 11 background: none; |
| 12 font-size: 100%; |
| 13 vertical-align: baseline; |
| 14 font-family: inherit; |
| 15 color: inherit; |
| 16 -webkit-appearance: none; |
| 17 -ms-appearance: none; |
| 18 -o-appearance: none; |
| 19 appearance: none; |
| 20 } |
| 21 |
| 22 body { |
| 23 font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif; |
| 24 line-height: 1.4em; |
| 25 background: #eaeaea url('bg.png'); |
| 26 color: #4d4d4d; |
| 27 width: 550px; |
| 28 margin: 0 auto; |
| 29 -webkit-font-smoothing: antialiased; |
| 30 -moz-font-smoothing: antialiased; |
| 31 -ms-font-smoothing: antialiased; |
| 32 -o-font-smoothing: antialiased; |
| 33 font-smoothing: antialiased; |
| 34 } |
| 35 |
| 36 button, |
| 37 input[type="checkbox"] { |
| 38 outline: none; |
| 39 } |
| 40 |
| 41 #todoapp { |
| 42 background: #fff; |
| 43 background: rgba(255, 255, 255, 0.9); |
| 44 margin: 130px 0 40px 0; |
| 45 border: 1px solid #ccc; |
| 46 position: relative; |
| 47 border-top-left-radius: 2px; |
| 48 border-top-right-radius: 2px; |
| 49 box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2), |
| 50 0 25px 50px 0 rgba(0, 0, 0, 0.15); |
| 51 } |
| 52 |
| 53 #todoapp:before { |
| 54 content: ''; |
| 55 border-left: 1px solid #f5d6d6; |
| 56 border-right: 1px solid #f5d6d6; |
| 57 width: 2px; |
| 58 position: absolute; |
| 59 top: 0; |
| 60 left: 40px; |
| 61 height: 100%; |
| 62 } |
| 63 |
| 64 #todoapp input::-webkit-input-placeholder { |
| 65 font-style: italic; |
| 66 } |
| 67 |
| 68 #todoapp input::-moz-placeholder { |
| 69 font-style: italic; |
| 70 color: #a9a9a9; |
| 71 } |
| 72 |
| 73 #todoapp h1 { |
| 74 position: absolute; |
| 75 top: -120px; |
| 76 width: 100%; |
| 77 font-size: 70px; |
| 78 font-weight: bold; |
| 79 text-align: center; |
| 80 color: #b3b3b3; |
| 81 color: rgba(255, 255, 255, 0.3); |
| 82 text-shadow: -1px -1px rgba(0, 0, 0, 0.2); |
| 83 -webkit-text-rendering: optimizeLegibility; |
| 84 -moz-text-rendering: optimizeLegibility; |
| 85 -ms-text-rendering: optimizeLegibility; |
| 86 -o-text-rendering: optimizeLegibility; |
| 87 text-rendering: optimizeLegibility; |
| 88 } |
| 89 |
| 90 #header { |
| 91 padding-top: 15px; |
| 92 border-radius: inherit; |
| 93 } |
| 94 |
| 95 #header:before { |
| 96 content: ''; |
| 97 position: absolute; |
| 98 top: 0; |
| 99 right: 0; |
| 100 left: 0; |
| 101 height: 15px; |
| 102 z-index: 2; |
| 103 border-bottom: 1px solid #6c615c; |
| 104 background: #8d7d77; |
| 105 background: -webkit-gradient(linear, left top, left bottom, from(rgba(13
2, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8))); |
| 106 background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(
101, 84, 76, 0.8)); |
| 107 background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84,
76, 0.8)); |
| 108 filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartC
olorStr='#9d8b83', EndColorStr='#847670'); |
| 109 border-top-left-radius: 1px; |
| 110 border-top-right-radius: 1px; |
| 111 } |
| 112 |
| 113 #new-todo, |
| 114 .edit { |
| 115 position: relative; |
| 116 margin: 0; |
| 117 width: 100%; |
| 118 font-size: 24px; |
| 119 font-family: inherit; |
| 120 line-height: 1.4em; |
| 121 border: 0; |
| 122 outline: none; |
| 123 color: inherit; |
| 124 padding: 6px; |
| 125 border: 1px solid #999; |
| 126 box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); |
| 127 -moz-box-sizing: border-box; |
| 128 -ms-box-sizing: border-box; |
| 129 -o-box-sizing: border-box; |
| 130 box-sizing: border-box; |
| 131 -webkit-font-smoothing: antialiased; |
| 132 -moz-font-smoothing: antialiased; |
| 133 -ms-font-smoothing: antialiased; |
| 134 -o-font-smoothing: antialiased; |
| 135 font-smoothing: antialiased; |
| 136 } |
| 137 |
| 138 #new-todo { |
| 139 padding: 16px 16px 16px 60px; |
| 140 border: none; |
| 141 background: rgba(0, 0, 0, 0.02); |
| 142 z-index: 2; |
| 143 box-shadow: none; |
| 144 } |
| 145 |
| 146 #main { |
| 147 position: relative; |
| 148 z-index: 2; |
| 149 border-top: 1px dotted #adadad; |
| 150 } |
| 151 |
| 152 label[for='toggle-all'] { |
| 153 display: none; |
| 154 } |
| 155 |
| 156 #toggle-all { |
| 157 position: absolute; |
| 158 top: -42px; |
| 159 left: -4px; |
| 160 width: 40px; |
| 161 text-align: center; |
| 162 /* Mobile Safari */ |
| 163 border: none; |
| 164 } |
| 165 |
| 166 #toggle-all:before { |
| 167 content: '»'; |
| 168 font-size: 28px; |
| 169 color: #d9d9d9; |
| 170 padding: 0 25px 7px; |
| 171 } |
| 172 |
| 173 #toggle-all:checked:before { |
| 174 color: #737373; |
| 175 } |
| 176 |
| 177 #todo-list { |
| 178 margin: 0; |
| 179 padding: 0; |
| 180 list-style: none; |
| 181 } |
| 182 |
| 183 #todo-list li { |
| 184 position: relative; |
| 185 font-size: 24px; |
| 186 border-bottom: 1px dotted #ccc; |
| 187 } |
| 188 |
| 189 #todo-list li:last-child { |
| 190 border-bottom: none; |
| 191 } |
| 192 |
| 193 #todo-list li.editing { |
| 194 border-bottom: none; |
| 195 padding: 0; |
| 196 } |
| 197 |
| 198 #todo-list li.editing .edit { |
| 199 display: block; |
| 200 width: 506px; |
| 201 padding: 13px 17px 12px 17px; |
| 202 margin: 0 0 0 43px; |
| 203 } |
| 204 |
| 205 #todo-list li.editing .view { |
| 206 display: none; |
| 207 } |
| 208 |
| 209 #todo-list li .toggle { |
| 210 text-align: center; |
| 211 width: 40px; |
| 212 /* auto, since non-WebKit browsers doesn't support input styling */ |
| 213 height: auto; |
| 214 position: absolute; |
| 215 top: 0; |
| 216 bottom: 0; |
| 217 margin: auto 0; |
| 218 /* Mobile Safari */ |
| 219 border: none; |
| 220 -webkit-appearance: none; |
| 221 -ms-appearance: none; |
| 222 -o-appearance: none; |
| 223 appearance: none; |
| 224 } |
| 225 |
| 226 #todo-list li .toggle:after { |
| 227 content: '✔'; |
| 228 /* 40 + a couple of pixels visual adjustment */ |
| 229 line-height: 43px; |
| 230 font-size: 20px; |
| 231 color: #d9d9d9; |
| 232 text-shadow: 0 -1px 0 #bfbfbf; |
| 233 } |
| 234 |
| 235 #todo-list li .toggle:checked:after { |
| 236 color: #85ada7; |
| 237 text-shadow: 0 1px 0 #669991; |
| 238 bottom: 1px; |
| 239 position: relative; |
| 240 } |
| 241 |
| 242 #todo-list li label { |
| 243 white-space: pre; |
| 244 word-break: break-word; |
| 245 padding: 15px 60px 15px 15px; |
| 246 margin-left: 45px; |
| 247 display: block; |
| 248 line-height: 1.2; |
| 249 -webkit-transition: color 0.4s; |
| 250 transition: color 0.4s; |
| 251 } |
| 252 |
| 253 #todo-list li.completed label { |
| 254 color: #a9a9a9; |
| 255 text-decoration: line-through; |
| 256 } |
| 257 |
| 258 #todo-list li .destroy { |
| 259 display: none; |
| 260 position: absolute; |
| 261 top: 0; |
| 262 right: 10px; |
| 263 bottom: 0; |
| 264 width: 40px; |
| 265 height: 40px; |
| 266 margin: auto 0; |
| 267 font-size: 22px; |
| 268 color: #a88a8a; |
| 269 -webkit-transition: all 0.2s; |
| 270 transition: all 0.2s; |
| 271 } |
| 272 |
| 273 #todo-list li .destroy:hover { |
| 274 text-shadow: 0 0 1px #000, |
| 275 0 0 10px rgba(199, 107, 107, 0.8); |
| 276 -webkit-transform: scale(1.3); |
| 277 -ms-transform: scale(1.3); |
| 278 transform: scale(1.3); |
| 279 } |
| 280 |
| 281 #todo-list li .destroy:after { |
| 282 content: '✖'; |
| 283 } |
| 284 |
| 285 #todo-list li:hover .destroy { |
| 286 display: block; |
| 287 } |
| 288 |
| 289 #todo-list li .edit { |
| 290 display: none; |
| 291 } |
| 292 |
| 293 #todo-list li.editing:last-child { |
| 294 margin-bottom: -1px; |
| 295 } |
| 296 |
| 297 #footer { |
| 298 color: #777; |
| 299 padding: 0 15px; |
| 300 position: absolute; |
| 301 right: 0; |
| 302 bottom: -31px; |
| 303 left: 0; |
| 304 height: 20px; |
| 305 z-index: 1; |
| 306 text-align: center; |
| 307 } |
| 308 |
| 309 #footer:before { |
| 310 content: ''; |
| 311 position: absolute; |
| 312 right: 0; |
| 313 bottom: 31px; |
| 314 left: 0; |
| 315 height: 50px; |
| 316 z-index: -1; |
| 317 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), |
| 318 0 6px 0 -3px rgba(255, 255, 255, 0.8), |
| 319 0 7px 1px -3px rgba(0, 0, 0, 0.3), |
| 320 0 43px 0 -6px rgba(255, 255, 255, 0.8), |
| 321 0 44px 2px -6px rgba(0, 0, 0, 0.2); |
| 322 } |
| 323 |
| 324 #todo-count { |
| 325 float: left; |
| 326 text-align: left; |
| 327 } |
| 328 |
| 329 #filters { |
| 330 margin: 0; |
| 331 padding: 0; |
| 332 list-style: none; |
| 333 position: absolute; |
| 334 right: 0; |
| 335 left: 0; |
| 336 } |
| 337 |
| 338 #filters li { |
| 339 display: inline; |
| 340 } |
| 341 |
| 342 #filters li a { |
| 343 color: #83756f; |
| 344 margin: 2px; |
| 345 text-decoration: none; |
| 346 } |
| 347 |
| 348 #filters li a.selected { |
| 349 font-weight: bold; |
| 350 } |
| 351 |
| 352 #clear-completed { |
| 353 float: right; |
| 354 position: relative; |
| 355 line-height: 20px; |
| 356 text-decoration: none; |
| 357 background: rgba(0, 0, 0, 0.1); |
| 358 font-size: 11px; |
| 359 padding: 0 10px; |
| 360 border-radius: 3px; |
| 361 box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2); |
| 362 } |
| 363 |
| 364 #clear-completed:hover { |
| 365 background: rgba(0, 0, 0, 0.15); |
| 366 box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3); |
| 367 } |
| 368 |
| 369 #info { |
| 370 margin: 65px auto 0; |
| 371 color: #a6a6a6; |
| 372 font-size: 12px; |
| 373 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); |
| 374 text-align: center; |
| 375 } |
| 376 |
| 377 #info a { |
| 378 color: inherit; |
| 379 } |
| 380 |
| 381 /* |
| 382 Hack to remove background from Mobile Safari. |
| 383 Can't use it globally since it destroys checkboxes in Firefox and Opera |
| 384 */ |
| 385 |
| 386 @media screen and (-webkit-min-device-pixel-ratio:0) { |
| 387 #toggle-all, |
| 388 #todo-list li .toggle { |
| 389 background: none; |
| 390 } |
| 391 |
| 392 #todo-list li .toggle { |
| 393 height: 40px; |
| 394 } |
| 395 |
| 396 #toggle-all { |
| 397 top: -56px; |
| 398 left: -15px; |
| 399 width: 65px; |
| 400 height: 41px; |
| 401 -webkit-transform: rotate(90deg); |
| 402 -ms-transform: rotate(90deg); |
| 403 transform: rotate(90deg); |
| 404 -webkit-appearance: none; |
| 405 appearance: none; |
| 406 } |
| 407 } |
| 408 |
| 409 .hidden { |
| 410 display: none; |
| 411 } |
| 412 |
| 413 hr { |
| 414 margin: 20px 0; |
| 415 border: 0; |
| 416 border-top: 1px dashed #C5C5C5; |
| 417 border-bottom: 1px dashed #F7F7F7; |
| 418 } |
| 419 |
| 420 .learn a { |
| 421 font-weight: normal; |
| 422 text-decoration: none; |
| 423 color: #b83f45; |
| 424 } |
| 425 |
| 426 .learn a:hover { |
| 427 text-decoration: underline; |
| 428 color: #787e7e; |
| 429 } |
| 430 |
| 431 .learn h3, |
| 432 .learn h4, |
| 433 .learn h5 { |
| 434 margin: 10px 0; |
| 435 font-weight: 500; |
| 436 line-height: 1.2; |
| 437 color: #000; |
| 438 } |
| 439 |
| 440 .learn h3 { |
| 441 font-size: 24px; |
| 442 } |
| 443 |
| 444 .learn h4 { |
| 445 font-size: 18px; |
| 446 } |
| 447 |
| 448 .learn h5 { |
| 449 margin-bottom: 0; |
| 450 font-size: 14px; |
| 451 } |
| 452 |
| 453 .learn ul { |
| 454 padding: 0; |
| 455 margin: 0 0 30px 25px; |
| 456 } |
| 457 |
| 458 .learn li { |
| 459 line-height: 20px; |
| 460 } |
| 461 |
| 462 .learn p { |
| 463 font-size: 15px; |
| 464 font-weight: 300; |
| 465 line-height: 1.3; |
| 466 margin-top: 0; |
| 467 margin-bottom: 0; |
| 468 } |
| 469 |
| 470 .quote { |
| 471 border: none; |
| 472 margin: 20px 0 60px 0; |
| 473 } |
| 474 |
| 475 .quote p { |
| 476 font-style: italic; |
| 477 } |
| 478 |
| 479 .quote p:before { |
| 480 content: '“'; |
| 481 font-size: 50px; |
| 482 opacity: .15; |
| 483 position: absolute; |
| 484 top: -20px; |
| 485 left: 3px; |
| 486 } |
| 487 |
| 488 .quote p:after { |
| 489 content: '”'; |
| 490 font-size: 50px; |
| 491 opacity: .15; |
| 492 position: absolute; |
| 493 bottom: -42px; |
| 494 right: 3px; |
| 495 } |
| 496 |
| 497 .quote footer { |
| 498 position: absolute; |
| 499 bottom: -40px; |
| 500 right: 0; |
| 501 } |
| 502 |
| 503 .quote footer img { |
| 504 border-radius: 3px; |
| 505 } |
| 506 |
| 507 .quote footer a { |
| 508 margin-left: 5px; |
| 509 vertical-align: middle; |
| 510 } |
| 511 |
| 512 .speech-bubble { |
| 513 position: relative; |
| 514 padding: 10px; |
| 515 background: rgba(0, 0, 0, .04); |
| 516 border-radius: 5px; |
| 517 } |
| 518 |
| 519 .speech-bubble:after { |
| 520 content: ''; |
| 521 position: absolute; |
| 522 top: 100%; |
| 523 right: 30px; |
| 524 border: 13px solid transparent; |
| 525 border-top-color: rgba(0, 0, 0, .04); |
| 526 } |
| 527 |
| 528 .learn-bar > .learn { |
| 529 position: absolute; |
| 530 width: 272px; |
| 531 top: 8px; |
| 532 left: -300px; |
| 533 padding: 10px; |
| 534 border-radius: 5px; |
| 535 background-color: rgba(255, 255, 255, .6); |
| 536 -webkit-transition-property: left; |
| 537 transition-property: left; |
| 538 -webkit-transition-duration: 500ms; |
| 539 transition-duration: 500ms; |
| 540 } |
| 541 |
| 542 @media (min-width: 899px) { |
| 543 .learn-bar { |
| 544 width: auto; |
| 545 margin: 0 0 0 300px; |
| 546 } |
| 547 |
| 548 .learn-bar > .learn { |
| 549 left: 8px; |
| 550 } |
| 551 |
| 552 .learn-bar #todoapp { |
| 553 width: 550px; |
| 554 margin: 130px auto 40px auto; |
| 555 } |
| 556 } |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 204733004:
Added TodoMVC startup benchmarks. (Closed)
Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart