| 1 | @charset 'utf-8'; |
| 2 | |
| 3 | html, |
| 4 | body { |
| 5 | margin: 0; |
| 6 | padding: 0; |
| 7 | } |
| 8 | |
| 9 | button { |
| 10 | margin: 0; |
| 11 | padding: 0; |
| 12 | border: 0; |
| 13 | background: none; |
| 14 | font-size: 100%; |
| 15 | vertical-align: baseline; |
| 16 | font-family: inherit; |
| 17 | font-weight: inherit; |
| 18 | color: inherit; |
| 19 | -webkit-appearance: none; |
| 20 | appearance: none; |
| 21 | -webkit-font-smoothing: antialiased; |
| 22 | -moz-osx-font-smoothing: grayscale; |
| 23 | } |
| 24 | |
| 25 | body { |
| 26 | font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif; |
| 27 | line-height: 1.4em; |
| 28 | background: #f5f5f5; |
| 29 | color: #111111; |
| 30 | min-width: 230px; |
| 31 | max-width: 550px; |
| 32 | margin: 0 auto; |
| 33 | -webkit-font-smoothing: antialiased; |
| 34 | -moz-osx-font-smoothing: grayscale; |
| 35 | font-weight: 300; |
| 36 | } |
| 37 | |
| 38 | .hidden { |
| 39 | display: none; |
| 40 | } |
| 41 | |
| 42 | .todoapp { |
| 43 | background: #fff; |
| 44 | margin: 130px 0 40px 0; |
| 45 | position: relative; |
| 46 | box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), |
| 47 | 0 25px 50px 0 rgba(0, 0, 0, 0.1); |
| 48 | } |
| 49 | |
| 50 | .todoapp input::-webkit-input-placeholder { |
| 51 | font-style: italic; |
| 52 | font-weight: 400; |
| 53 | color: rgba(0, 0, 0, 0.4); |
| 54 | } |
| 55 | |
| 56 | .todoapp input::-moz-placeholder { |
| 57 | font-style: italic; |
| 58 | font-weight: 400; |
| 59 | color: rgba(0, 0, 0, 0.4); |
| 60 | } |
| 61 | |
| 62 | .todoapp input::input-placeholder { |
| 63 | font-style: italic; |
| 64 | font-weight: 400; |
| 65 | color: rgba(0, 0, 0, 0.4); |
| 66 | } |
| 67 | |
| 68 | .todoapp h1 { |
| 69 | position: absolute; |
| 70 | top: -140px; |
| 71 | width: 100%; |
| 72 | font-size: 80px; |
| 73 | font-weight: 200; |
| 74 | text-align: center; |
| 75 | color: #b83f45; |
| 76 | -webkit-text-rendering: optimizeLegibility; |
| 77 | -moz-text-rendering: optimizeLegibility; |
| 78 | text-rendering: optimizeLegibility; |
| 79 | } |
| 80 | |
| 81 | .new-todo, |
| 82 | .edit { |
| 83 | position: relative; |
| 84 | margin: 0; |
| 85 | width: 100%; |
| 86 | font-size: 24px; |
| 87 | font-family: inherit; |
| 88 | font-weight: inherit; |
| 89 | line-height: 1.4em; |
| 90 | color: inherit; |
| 91 | padding: 6px; |
| 92 | border: 1px solid #999; |
| 93 | box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); |
| 94 | box-sizing: border-box; |
| 95 | -webkit-font-smoothing: antialiased; |
| 96 | -moz-osx-font-smoothing: grayscale; |
| 97 | } |
| 98 | |
| 99 | .new-todo { |
| 100 | padding: 16px 16px 16px 60px; |
| 101 | height: 65px; |
| 102 | border: none; |
| 103 | background: rgba(0, 0, 0, 0.003); |
| 104 | box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03); |
| 105 | } |
| 106 | |
| 107 | .main { |
| 108 | position: relative; |
| 109 | z-index: 2; |
| 110 | border-top: 1px solid #e6e6e6; |
| 111 | } |
| 112 | |
| 113 | .toggle-all { |
| 114 | width: 1px; |
| 115 | height: 1px; |
| 116 | border: none; /* Mobile Safari */ |
| 117 | opacity: 0; |
| 118 | position: absolute; |
| 119 | right: 100%; |
| 120 | bottom: 100%; |
| 121 | } |
| 122 | |
| 123 | .toggle-all + label { |
| 124 | display: flex; |
| 125 | align-items: center; |
| 126 | justify-content: center; |
| 127 | width: 45px; |
| 128 | height: 65px; |
| 129 | font-size: 0; |
| 130 | position: absolute; |
| 131 | top: -65px; |
| 132 | left: -0; |
| 133 | } |
| 134 | |
| 135 | .toggle-all + label:before { |
| 136 | content: '❯'; |
| 137 | display: inline-block; |
| 138 | font-size: 22px; |
| 139 | color: #949494; |
| 140 | padding: 10px 27px 10px 27px; |
| 141 | -webkit-transform: rotate(90deg); |
| 142 | transform: rotate(90deg); |
| 143 | } |
| 144 | |
| 145 | .toggle-all:checked + label:before { |
| 146 | color: #484848; |
| 147 | } |
| 148 | |
| 149 | .todo-list { |
| 150 | margin: 0; |
| 151 | padding: 0; |
| 152 | list-style: none; |
| 153 | } |
| 154 | |
| 155 | .todo-list li { |
| 156 | position: relative; |
| 157 | font-size: 24px; |
| 158 | border-bottom: 1px solid #ededed; |
| 159 | } |
| 160 | |
| 161 | .todo-list li:last-child { |
| 162 | border-bottom: none; |
| 163 | } |
| 164 | |
| 165 | .todo-list li.editing { |
| 166 | border-bottom: none; |
| 167 | padding: 0; |
| 168 | } |
| 169 | |
| 170 | .todo-list li.editing .edit { |
| 171 | display: block; |
| 172 | width: calc(100% - 43px); |
| 173 | padding: 12px 16px; |
| 174 | margin: 0 0 0 43px; |
| 175 | } |
| 176 | |
| 177 | .todo-list li.editing .view { |
| 178 | display: none; |
| 179 | } |
| 180 | |
| 181 | .todo-list li .toggle { |
| 182 | text-align: center; |
| 183 | width: 40px; |
| 184 | /* auto, since non-WebKit browsers doesn't support input styling */ |
| 185 | height: auto; |
| 186 | position: absolute; |
| 187 | top: 0; |
| 188 | bottom: 0; |
| 189 | margin: auto 0; |
| 190 | border: none; /* Mobile Safari */ |
| 191 | -webkit-appearance: none; |
| 192 | appearance: none; |
| 193 | } |
| 194 | |
| 195 | .todo-list li .toggle { |
| 196 | opacity: 0; |
| 197 | } |
| 198 | |
| 199 | .todo-list li .toggle + label { |
| 200 | /* |
| 201 | Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433 |
| 202 | IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/ |
| 203 | */ |
| 204 | background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23949494%22%20stroke-width%3D%223%22/%3E%3C/svg%3E'); |
| 205 | background-repeat: no-repeat; |
| 206 | background-position: center left; |
| 207 | } |
| 208 | |
| 209 | .todo-list li .toggle:checked + label { |
| 210 | background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%2359A193%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20fill%3D%22%233EA390%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22%2F%3E%3C%2Fsvg%3E'); |
| 211 | } |
| 212 | |
| 213 | .todo-list li label { |
| 214 | overflow-wrap: break-word; |
| 215 | padding: 15px 15px 15px 60px; |
| 216 | display: block; |
| 217 | line-height: 1.2; |
| 218 | transition: color 0.4s; |
| 219 | font-weight: 400; |
| 220 | color: #484848; |
| 221 | } |
| 222 | |
| 223 | .todo-list li.completed label { |
| 224 | color: #949494; |
| 225 | text-decoration: line-through; |
| 226 | } |
| 227 | |
| 228 | .todo-list li .destroy { |
| 229 | display: none; |
| 230 | position: absolute; |
| 231 | top: 0; |
| 232 | right: 10px; |
| 233 | bottom: 0; |
| 234 | width: 40px; |
| 235 | height: 40px; |
| 236 | margin: auto 0; |
| 237 | font-size: 30px; |
| 238 | color: #949494; |
| 239 | transition: color 0.2s ease-out; |
| 240 | } |
| 241 | |
| 242 | .todo-list li .destroy:hover, |
| 243 | .todo-list li .destroy:focus { |
| 244 | color: #C18585; |
| 245 | } |
| 246 | |
| 247 | .todo-list li .destroy:after { |
| 248 | content: '×'; |
| 249 | display: block; |
| 250 | height: 100%; |
| 251 | line-height: 1.1; |
| 252 | } |
| 253 | |
| 254 | .todo-list li:hover .destroy { |
| 255 | display: block; |
| 256 | } |
| 257 | |
| 258 | .todo-list li .edit { |
| 259 | display: none; |
| 260 | } |
| 261 | |
| 262 | .todo-list li.editing:last-child { |
| 263 | margin-bottom: -1px; |
| 264 | } |
| 265 | |
| 266 | .footer { |
| 267 | padding: 10px 15px; |
| 268 | height: 20px; |
| 269 | text-align: center; |
| 270 | font-size: 15px; |
| 271 | border-top: 1px solid #e6e6e6; |
| 272 | } |
| 273 | |
| 274 | .footer:before { |
| 275 | content: ''; |
| 276 | position: absolute; |
| 277 | right: 0; |
| 278 | bottom: 0; |
| 279 | left: 0; |
| 280 | height: 50px; |
| 281 | overflow: hidden; |
| 282 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), |
| 283 | 0 8px 0 -3px #f6f6f6, |
| 284 | 0 9px 1px -3px rgba(0, 0, 0, 0.2), |
| 285 | 0 16px 0 -6px #f6f6f6, |
| 286 | 0 17px 2px -6px rgba(0, 0, 0, 0.2); |
| 287 | } |
| 288 | |
| 289 | .todo-count { |
| 290 | float: left; |
| 291 | text-align: left; |
| 292 | } |
| 293 | |
| 294 | .todo-count strong { |
| 295 | font-weight: 300; |
| 296 | } |
| 297 | |
| 298 | .filters { |
| 299 | margin: 0; |
| 300 | padding: 0; |
| 301 | list-style: none; |
| 302 | position: absolute; |
| 303 | right: 0; |
| 304 | left: 0; |
| 305 | } |
| 306 | |
| 307 | .filters li { |
| 308 | display: inline; |
| 309 | } |
| 310 | |
| 311 | .filters li a { |
| 312 | color: inherit; |
| 313 | margin: 3px; |
| 314 | padding: 3px 7px; |
| 315 | text-decoration: none; |
| 316 | border: 1px solid transparent; |
| 317 | border-radius: 3px; |
| 318 | } |
| 319 | |
| 320 | .filters li a:hover { |
| 321 | border-color: #DB7676; |
| 322 | } |
| 323 | |
| 324 | .filters li a.selected { |
| 325 | border-color: #CE4646; |
| 326 | } |
| 327 | |
| 328 | .clear-completed, |
| 329 | html .clear-completed:active { |
| 330 | float: right; |
| 331 | position: relative; |
| 332 | line-height: 19px; |
| 333 | text-decoration: none; |
| 334 | cursor: pointer; |
| 335 | } |
| 336 | |
| 337 | .clear-completed:hover { |
| 338 | text-decoration: underline; |
| 339 | } |
| 340 | |
| 341 | .info { |
| 342 | margin: 65px auto 0; |
| 343 | color: #4d4d4d; |
| 344 | font-size: 11px; |
| 345 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); |
| 346 | text-align: center; |
| 347 | } |
| 348 | |
| 349 | .info p { |
| 350 | line-height: 1; |
| 351 | } |
| 352 | |
| 353 | .info a { |
| 354 | color: inherit; |
| 355 | text-decoration: none; |
| 356 | font-weight: 400; |
| 357 | } |
| 358 | |
| 359 | .info a:hover { |
| 360 | text-decoration: underline; |
| 361 | } |
| 362 | |
| 363 | /* |
| 364 | Hack to remove background from Mobile Safari. |
| 365 | Can't use it globally since it destroys checkboxes in Firefox |
| 366 | */ |
| 367 | @media screen and (-webkit-min-device-pixel-ratio:0) { |
| 368 | .toggle-all, |
| 369 | .todo-list li .toggle { |
| 370 | background: none; |
| 371 | } |
| 372 | |
| 373 | .todo-list li .toggle { |
| 374 | height: 40px; |
| 375 | } |
| 376 | } |
| 377 | |
| 378 | @media (max-width: 430px) { |
| 379 | .footer { |
| 380 | height: 50px; |
| 381 | } |
| 382 | |
| 383 | .filters { |
| 384 | bottom: 10px; |
| 385 | } |
| 386 | } |
| 387 | |
| 388 | :focus, |
| 389 | .toggle:focus + label, |
| 390 | .toggle-all:focus + label { |
| 391 | box-shadow: 0 0 2px 2px #CF7D7D; |
| 392 | outline: 0; |
| 393 | } |
| 394 | |
amadan