OLD | NEW |
| (Empty) |
1 /* base.css overrides */ | |
2 | |
3 @host { | |
4 * { | |
5 display: block; | |
6 position: relative; | |
7 } | |
8 } | |
9 | |
10 button { | |
11 margin: 0; | |
12 padding: 0; | |
13 border: 0; | |
14 background: none; | |
15 font-size: 100%; | |
16 vertical-align: baseline; | |
17 font-family: inherit; | |
18 color: inherit; | |
19 -webkit-appearance: none; | |
20 /*-moz-appearance: none;*/ | |
21 -ms-appearance: none; | |
22 -o-appearance: none; | |
23 appearance: none; | |
24 } | |
25 | |
26 input::-webkit-input-placeholder { | |
27 font-style: italic; | |
28 } | |
29 | |
30 input::-moz-placeholder { | |
31 font-style: italic; | |
32 color: #a9a9a9; | |
33 } | |
34 | |
35 input:-ms-input-placeholder, #new-todo:-ms-input-placeholder { | |
36 font-style: italic; | |
37 color: #a9a9a9; | |
38 } | |
39 | |
40 #todoapp { | |
41 background: #fff; | |
42 background: rgba(255, 255, 255, 0.9); | |
43 /*margin: 130px 0 40px 0;*/ | |
44 margin: 0 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 #header { | |
65 padding-top: 15px; | |
66 border-radius: inherit; | |
67 } | |
68 | |
69 #header:before { | |
70 content: ''; | |
71 position: absolute; | |
72 top: 0; | |
73 right: 0; | |
74 left: 0; | |
75 height: 15px; | |
76 z-index: 2; | |
77 border-bottom: 1px solid #6c615c; | |
78 background: #8d7d77; | |
79 background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110
, 100, 0.8)),to(rgba(101, 84, 76, 0.8))); | |
80 background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 8
4, 76, 0.8)); | |
81 background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84,
76, 0.8)); | |
82 background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76
, 0.8)); | |
83 background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 7
6, 0.8)); | |
84 background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0
.8)); | |
85 filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorSt
r='#9d8b83', EndColorStr='#847670'); | |
86 border-top-left-radius: 1px; | |
87 border-top-right-radius: 1px; | |
88 } | |
89 | |
90 #new-todo, | |
91 .edit { | |
92 position: relative; | |
93 margin: 0; | |
94 width: 100%; | |
95 font-size: 24px; | |
96 font-family: inherit; | |
97 line-height: 1.4em; | |
98 border: 0; | |
99 outline: none; | |
100 color: inherit; | |
101 padding: 6px; | |
102 border: 1px solid #999; | |
103 box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); | |
104 -webkit-box-sizing: border-box; | |
105 -moz-box-sizing: border-box; | |
106 -ms-box-sizing: border-box; | |
107 -o-box-sizing: border-box; | |
108 box-sizing: border-box; | |
109 -webkit-font-smoothing: antialiased; | |
110 -moz-font-smoothing: antialiased; | |
111 -ms-font-smoothing: antialiased; | |
112 -o-font-smoothing: antialiased; | |
113 /* font-smoothing: antialiased; */ | |
114 } | |
115 | |
116 #new-todo { | |
117 padding: 16px 16px 16px 60px; | |
118 border: none; | |
119 background: rgba(0, 0, 0, 0.02); | |
120 z-index: 2; | |
121 box-shadow: none; | |
122 } | |
123 | |
124 #main { | |
125 position: relative; | |
126 z-index: 2; | |
127 border-top: 1px dotted #adadad; | |
128 } | |
129 | |
130 label[for='toggle-all'] { | |
131 display: none; | |
132 } | |
133 | |
134 #toggle-all { | |
135 position: absolute; | |
136 top: -42px; | |
137 left: -4px; | |
138 width: 40px; | |
139 text-align: center; | |
140 border: none; /* Mobile Safari */ | |
141 } | |
142 | |
143 #toggle-all:before { | |
144 content: 'ยป'; | |
145 font-size: 28px; | |
146 color: #d9d9d9; | |
147 padding: 0 25px 7px; | |
148 } | |
149 | |
150 #toggle-all:checked:before { | |
151 color: #737373; | |
152 } | |
153 | |
154 #todo-list { | |
155 margin: 0; | |
156 padding: 0; | |
157 list-style: none; | |
158 } | |
159 | |
160 #todo-list li { | |
161 position: relative; | |
162 font-size: 24px; | |
163 border-bottom: 1px dotted #ccc; | |
164 } | |
165 | |
166 #todo-list li:last-child { | |
167 border-bottom: none; | |
168 } | |
169 | |
170 #todo-list li.editing { | |
171 border-bottom: none; | |
172 padding: 0; | |
173 } | |
174 | |
175 #footer { | |
176 color: #777; | |
177 padding: 0 15px; | |
178 position: absolute; | |
179 right: 0; | |
180 bottom: -31px; | |
181 left: 0; | |
182 height: 20px; | |
183 z-index: 1; | |
184 text-align: center; | |
185 } | |
186 | |
187 #footer:before { | |
188 content: ''; | |
189 position: absolute; | |
190 right: 0; | |
191 bottom: 31px; | |
192 left: 0; | |
193 height: 50px; | |
194 z-index: -1; | |
195 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), | |
196 0 6px 0 -3px rgba(255, 255, 255, 0.8), | |
197 0 7px 1px -3px rgba(0, 0, 0, 0.3), | |
198 0 43px 0 -6px rgba(255, 255, 255, 0.8), | |
199 0 44px 2px -6px rgba(0, 0, 0, 0.2); | |
200 } | |
201 | |
202 #todo-count { | |
203 float: left; | |
204 text-align: left; | |
205 } | |
206 | |
207 #filters { | |
208 margin: 0; | |
209 padding: 0; | |
210 list-style: none; | |
211 position: absolute; | |
212 right: 0; | |
213 left: 0; | |
214 } | |
215 | |
216 #filters li { | |
217 display: inline; | |
218 } | |
219 | |
220 #filters li a { | |
221 color: #83756f; | |
222 margin: 2px; | |
223 text-decoration: none; | |
224 } | |
225 | |
226 #filters li.polymer-selected a { | |
227 font-weight: bold; | |
228 } | |
229 | |
230 #clear-completed { | |
231 float: right; | |
232 position: relative; | |
233 line-height: 20px; | |
234 text-decoration: none; | |
235 background: rgba(0, 0, 0, 0.1); | |
236 font-size: 11px; | |
237 padding: 0 10px; | |
238 border-radius: 3px; | |
239 box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2); | |
240 } | |
241 | |
242 #clear-completed:hover { | |
243 background: rgba(0, 0, 0, 0.15); | |
244 box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3); | |
245 } | |
246 | |
247 @media screen and (-webkit-min-device-pixel-ratio:0) { | |
248 #toggle-all { | |
249 background: none; | |
250 /* | |
251 ShadowDOM Polyfill work around for webkit/blink bug | |
252 https://code.google.com/p/chromium/issues/detail?id=251510 | |
253 */ | |
254 background-color: transparent; | |
255 } | |
256 | |
257 #toggle-all { | |
258 top: -56px; | |
259 left: -15px; | |
260 width: 65px; | |
261 height: 41px; | |
262 -webkit-transform: rotate(90deg); | |
263 transform: rotate(90deg); | |
264 -webkit-appearance: none; | |
265 appearance: none; | |
266 } | |
267 } | |
OLD | NEW |