| /* base.css overrides */ |
| |
| @host { |
| * { |
| display: block; |
| position: relative; |
| } |
| } |
| |
| button { |
| margin: 0; |
| padding: 0; |
| border: 0; |
| background: none; |
| font-size: 100%; |
| vertical-align: baseline; |
| font-family: inherit; |
| color: inherit; |
| -webkit-appearance: none; |
| /*-moz-appearance: none;*/ |
| -ms-appearance: none; |
| -o-appearance: none; |
| appearance: none; |
| } |
| |
| input::-webkit-input-placeholder { |
| font-style: italic; |
| } |
| |
| input::-moz-placeholder { |
| font-style: italic; |
| color: #a9a9a9; |
| } |
| |
| input:-ms-input-placeholder, #new-todo:-ms-input-placeholder { |
| font-style: italic; |
| color: #a9a9a9; |
| } |
| |
| #todoapp { |
| background: #fff; |
| background: rgba(255, 255, 255, 0.9); |
| /*margin: 130px 0 40px 0;*/ |
| margin: 0 0 40px 0; |
| border: 1px solid #ccc; |
| position: relative; |
| border-top-left-radius: 2px; |
| border-top-right-radius: 2px; |
| box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2), |
| 0 25px 50px 0 rgba(0, 0, 0, 0.15); |
| } |
| |
| #todoapp:before { |
| content: ''; |
| border-left: 1px solid #f5d6d6; |
| border-right: 1px solid #f5d6d6; |
| width: 2px; |
| position: absolute; |
| top: 0; |
| left: 40px; |
| height: 100%; |
| } |
| |
| #header { |
| padding-top: 15px; |
| border-radius: inherit; |
| } |
| |
| #header:before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| right: 0; |
| left: 0; |
| height: 15px; |
| z-index: 2; |
| border-bottom: 1px solid #6c615c; |
| background: #8d7d77; |
| background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8))); |
| background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); |
| background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); |
| background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); |
| background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); |
| background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); |
| filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670'); |
| border-top-left-radius: 1px; |
| border-top-right-radius: 1px; |
| } |
| |
| #new-todo, |
| .edit { |
| position: relative; |
| margin: 0; |
| width: 100%; |
| font-size: 24px; |
| font-family: inherit; |
| line-height: 1.4em; |
| border: 0; |
| outline: none; |
| color: inherit; |
| padding: 6px; |
| border: 1px solid #999; |
| box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); |
| -webkit-box-sizing: border-box; |
| -moz-box-sizing: border-box; |
| -ms-box-sizing: border-box; |
| -o-box-sizing: border-box; |
| box-sizing: border-box; |
| -webkit-font-smoothing: antialiased; |
| -moz-font-smoothing: antialiased; |
| -ms-font-smoothing: antialiased; |
| -o-font-smoothing: antialiased; |
| /* font-smoothing: antialiased; */ |
| } |
| |
| #new-todo { |
| padding: 16px 16px 16px 60px; |
| border: none; |
| background: rgba(0, 0, 0, 0.02); |
| z-index: 2; |
| box-shadow: none; |
| } |
| |
| #main { |
| position: relative; |
| z-index: 2; |
| border-top: 1px dotted #adadad; |
| } |
| |
| label[for='toggle-all'] { |
| display: none; |
| } |
| |
| #toggle-all { |
| position: absolute; |
| top: -42px; |
| left: -4px; |
| width: 40px; |
| text-align: center; |
| border: none; /* Mobile Safari */ |
| } |
| |
| #toggle-all:before { |
| content: 'ยป'; |
| font-size: 28px; |
| color: #d9d9d9; |
| padding: 0 25px 7px; |
| } |
| |
| #toggle-all:checked:before { |
| color: #737373; |
| } |
| |
| #todo-list { |
| margin: 0; |
| padding: 0; |
| list-style: none; |
| } |
| |
| #todo-list li { |
| position: relative; |
| font-size: 24px; |
| border-bottom: 1px dotted #ccc; |
| } |
| |
| #todo-list li:last-child { |
| border-bottom: none; |
| } |
| |
| #todo-list li.editing { |
| border-bottom: none; |
| padding: 0; |
| } |
| |
| #footer { |
| color: #777; |
| padding: 0 15px; |
| position: absolute; |
| right: 0; |
| bottom: -31px; |
| left: 0; |
| height: 20px; |
| z-index: 1; |
| text-align: center; |
| } |
| |
| #footer:before { |
| content: ''; |
| position: absolute; |
| right: 0; |
| bottom: 31px; |
| left: 0; |
| height: 50px; |
| z-index: -1; |
| box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), |
| 0 6px 0 -3px rgba(255, 255, 255, 0.8), |
| 0 7px 1px -3px rgba(0, 0, 0, 0.3), |
| 0 43px 0 -6px rgba(255, 255, 255, 0.8), |
| 0 44px 2px -6px rgba(0, 0, 0, 0.2); |
| } |
| |
| #todo-count { |
| float: left; |
| text-align: left; |
| } |
| |
| #filters { |
| margin: 0; |
| padding: 0; |
| list-style: none; |
| position: absolute; |
| right: 0; |
| left: 0; |
| } |
| |
| #filters li { |
| display: inline; |
| } |
| |
| #filters li a { |
| color: #83756f; |
| margin: 2px; |
| text-decoration: none; |
| } |
| |
| #filters li.polymer-selected a { |
| font-weight: bold; |
| } |
| |
| #clear-completed { |
| float: right; |
| position: relative; |
| line-height: 20px; |
| text-decoration: none; |
| background: rgba(0, 0, 0, 0.1); |
| font-size: 11px; |
| padding: 0 10px; |
| border-radius: 3px; |
| box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2); |
| } |
| |
| #clear-completed:hover { |
| background: rgba(0, 0, 0, 0.15); |
| box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3); |
| } |
| |
| @media screen and (-webkit-min-device-pixel-ratio:0) { |
| #toggle-all { |
| background: none; |
| /* |
| ShadowDOM Polyfill work around for webkit/blink bug |
| https://code.google.com/p/chromium/issues/detail?id=251510 |
| */ |
| background-color: transparent; |
| } |
| |
| #toggle-all { |
| top: -56px; |
| left: -15px; |
| width: 65px; |
| height: 41px; |
| -webkit-transform: rotate(90deg); |
| transform: rotate(90deg); |
| -webkit-appearance: none; |
| appearance: none; |
| } |
| } |