10.0.0.21 Git - krsd/blob - demo/todo/assets/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         /*-moz-appearance: none;*/
  18         -ms-appearance: none;
  19         -o-appearance: none;
  20         appearance: none;
  21 }
  22
  23 body {
  24         font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
  25         line-height: 1.4em;
  26         background: #eaeaea url('bg.png');
  27         color: #4d4d4d;
  28         width: 550px;
  29         margin: 0 auto;
  30         -webkit-font-smoothing: antialiased;
  31         -moz-font-smoothing: antialiased;
  32         -ms-font-smoothing: antialiased;
  33         -o-font-smoothing: antialiased;
  34         font-smoothing: antialiased;
  35 }
  36
  37 #todoapp {
  38         background: #fff;
  39         background: rgba(255, 255, 255, 0.9);
  40         margin: 130px 0 40px 0;
  41         border: 1px solid #ccc;
  42         position: relative;
  43         border-top-left-radius: 2px;
  44         border-top-right-radius: 2px;
  45         box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2),
  46                                 0 25px 50px 0 rgba(0, 0, 0, 0.15);
  47 }
  48
  49 #todoapp:before {
  50         content: '';
  51         border-left: 1px solid #f5d6d6;
  52         border-right: 1px solid #f5d6d6;
  53         width: 2px;
  54         position: absolute;
  55         top: 0;
  56         left: 40px;
  57         height: 100%;
  58 }
  59
  60 #todoapp input::-webkit-input-placeholder {
  61         font-style: italic;
  62 }
  63
  64 #todoapp input:-moz-placeholder {
  65         font-style: italic;
  66         color: #a9a9a9;
  67 }
  68
  69 #todoapp h1 {
  70         position: absolute;
  71         top: -120px;
  72         width: 100%;
  73         font-size: 70px;
  74         font-weight: bold;
  75         text-align: center;
  76         color: #b3b3b3;
  77         color: rgba(255, 255, 255, 0.3);
  78         text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
  79         -webkit-text-rendering: optimizeLegibility;
  80         -moz-text-rendering: optimizeLegibility;
  81         -ms-text-rendering: optimizeLegibility;
  82         -o-text-rendering: optimizeLegibility;
  83         text-rendering: optimizeLegibility;
  84 }
  85
  86 #header {
  87         padding-top: 15px;
  88         border-radius: inherit;
  89 }
  90
  91 #header:before {
  92         content: '';
  93         position: absolute;
  94         top: 0;
  95         right: 0;
  96         left: 0;
  97         height: 15px;
  98         z-index: 2;
  99         border-bottom: 1px solid #6c615c;
 100         background: #8d7d77;
 101         background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
 102         background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
 103         background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
 104         background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
 105         background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
 106         background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
 107         filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
 108         border-top-left-radius: 1px;
 109         border-top-right-radius: 1px;
 110 }
 111
 112 #new-todo,
 113 .edit {
 114         position: relative;
 115         margin: 0;
 116         width: 100%;
 117         font-size: 24px;
 118         font-family: inherit;
 119         line-height: 1.4em;
 120         border: 0;
 121         outline: none;
 122         color: inherit;
 123         padding: 6px;
 124         border: 1px solid #999;
 125         box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
 126         -webkit-box-sizing: border-box;
 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         border: none; /* Mobile Safari */
 163 }
 164
 165 #toggle-all:before {
 166         content: '»';
 167         font-size: 28px;
 168         color: #d9d9d9;
 169         padding: 0 25px 7px;
 170 }
 171
 172 #toggle-all:checked:before {
 173         color: #737373;
 174 }
 175
 176 #todo-list {
 177         margin: 0;
 178         padding: 0;
 179         list-style: none;
 180 }
 181
 182 #todo-list li {
 183         position: relative;
 184         font-size: 24px;
 185         border-bottom: 1px dotted #ccc;
 186 }
 187
 188 #todo-list li:last-child {
 189         border-bottom: none;
 190 }
 191
 192 #todo-list li.editing {
 193         border-bottom: none;
 194         padding: 0;
 195 }
 196
 197 #todo-list li.editing .edit {
 198         display: block;
 199         width: 506px;
 200         padding: 13px 17px 12px 17px;
 201         margin: 0 0 0 43px;
 202 }
 203
 204 #todo-list li.editing .view {
 205         display: none;
 206 }
 207
 208 #todo-list li .toggle {
 209         text-align: center;
 210         width: 40px;
 211         /* auto, since non-WebKit browsers doesn't support input styling */
 212         height: auto;
 213         position: absolute;
 214         top: 0;
 215         bottom: 0;
 216         margin: auto 0;
 217         border: none; /* Mobile Safari */
 218         -webkit-appearance: none;
 219         /*-moz-appearance: none;*/
 220         -ms-appearance: none;
 221         -o-appearance: none;
 222         appearance: none;
 223 }
 224
 225 #todo-list li .toggle:after {
 226         content: '✔';
 227         line-height: 43px; /* 40 + a couple of pixels visual adjustment */
 228         font-size: 20px;
 229         color: #d9d9d9;
 230         text-shadow: 0 -1px 0 #bfbfbf;
 231 }
 232
 233 #todo-list li .toggle:checked:after {
 234         color: #85ada7;
 235         text-shadow: 0 1px 0 #669991;
 236         bottom: 1px;
 237         position: relative;
 238 }
 239
 240 #todo-list li label {
 241         word-break: break-word;
 242         padding: 15px;
 243         margin-left: 45px;
 244         display: block;
 245         line-height: 1.2;
 246         -webkit-transition: color 0.4s;
 247         -moz-transition: color 0.4s;
 248         -ms-transition: color 0.4s;
 249         -o-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         -moz-transition: all 0.2s;
 271         -ms-transition: all 0.2s;
 272         -o-transition: all 0.2s;
 273         transition: all 0.2s;
 274 }
 275
 276 #todo-list li .destroy:hover {
 277         text-shadow: 0 0 1px #000,
 278                                  0 0 10px rgba(199, 107, 107, 0.8);
 279         -webkit-transform: scale(1.3);
 280         -moz-transform: scale(1.3);
 281         -ms-transform: scale(1.3);
 282         -o-transform: scale(1.3);
 283         transform: scale(1.3);
 284 }
 285
 286 #todo-list li .destroy:after {
 287         content: '✖';
 288 }
 289
 290 #todo-list li:hover .destroy {
 291         display: block;
 292 }
 293
 294 #todo-list li .edit {
 295         display: none;
 296 }
 297
 298 #todo-list li.editing:last-child {
 299         margin-bottom: -1px;
 300 }
 301
 302 #footer {
 303         color: #777;
 304         padding: 0 15px;
 305         position: absolute;
 306         right: 0;
 307         bottom: -31px;
 308         left: 0;
 309         height: 20px;
 310         z-index: 1;
 311         text-align: center;
 312 }
 313
 314 #footer:before {
 315         content: '';
 316         position: absolute;
 317         right: 0;
 318         bottom: 31px;
 319         left: 0;
 320         height: 50px;
 321         z-index: -1;
 322         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
 323                                 0 6px 0 -3px rgba(255, 255, 255, 0.8),
 324                                 0 7px 1px -3px rgba(0, 0, 0, 0.3),
 325                                 0 43px 0 -6px rgba(255, 255, 255, 0.8),
 326                                 0 44px 2px -6px rgba(0, 0, 0, 0.2);
 327 }
 328
 329 #todo-count {
 330         float: left;
 331         text-align: left;
 332 }
 333
 334 #filters {
 335         margin: 0;
 336         padding: 0;
 337         list-style: none;
 338         position: absolute;
 339         right: 0;
 340         left: 0;
 341 }
 342
 343 #filters li {
 344         display: inline;
 345 }
 346
 347 #filters li a {
 348         color: #83756f;
 349         margin: 2px;
 350         text-decoration: none;
 351 }
 352
 353 #filters li a.selected {
 354         font-weight: bold;
 355 }
 356
 357 #clear-completed {
 358         float: right;
 359         position: relative;
 360         line-height: 20px;
 361         text-decoration: none;
 362         background: rgba(0, 0, 0, 0.1);
 363         font-size: 11px;
 364         padding: 0 10px;
 365         border-radius: 3px;
 366         box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);
 367 }
 368
 369 #clear-completed:hover {
 370         background: rgba(0, 0, 0, 0.15);
 371         box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3);
 372 }
 373
 374 #info {
 375         margin: 65px auto 0;
 376         color: #a6a6a6;
 377         font-size: 12px;
 378         text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
 379         text-align: center;
 380 }
 381
 382 #info a {
 383         color: inherit;
 384 }
 385
 386 /*
 387         Hack to remove background from Mobile Safari.
 388         Can't use it globally since it destroys checkboxes in Firefox and Opera
 389 */
 390 @media screen and (-webkit-min-device-pixel-ratio:0) {
 391         #toggle-all,
 392         #todo-list li .toggle {
 393                 background: none;
 394         }
 395
 396         #todo-list li .toggle {
 397                 height: 40px;
 398         }
 399
 400         #toggle-all {
 401                 top: -56px;
 402                 left: -15px;
 403                 width: 65px;
 404                 height: 41px;
 405                 -webkit-transform: rotate(90deg);
 406                 transform: rotate(90deg);
 407                 -webkit-appearance: none;
 408                 appearance: none;
 409         }
 410 }
 411
 412 .hidden{
 413         display:none;
 414 }