PerformanceTests/DoYouEvenBench/resources/todomvc/dependency-examples/flight/bower_components/todomvc-common/base.css

   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(132, 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,StartColorStr='#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 }