Commit ffdfd8b7 authored by Sindre Sorhus's avatar Sindre Sorhus

Make the template useable in Mobile Safari + make it prettier in Firefox and Opera. Fixes #160

parent 128d3e51
...@@ -137,7 +137,6 @@ body { ...@@ -137,7 +137,6 @@ body {
padding: 16px 16px 16px 60px; padding: 16px 16px 16px 60px;
border: none; border: none;
background: rgba(0, 0, 0, 0.02); background: rgba(0, 0, 0, 0.02);
position: relative;
z-index: 2; z-index: 2;
box-shadow: none; box-shadow: none;
} }
...@@ -154,9 +153,12 @@ label[for='toggle-all'] { ...@@ -154,9 +153,12 @@ label[for='toggle-all'] {
#toggle-all { #toggle-all {
position: absolute; position: absolute;
top: -42px; top: -56px;
left: 12px; left: -15px;
width: 65px;
height: 41px;
text-align: center; text-align: center;
border: none; /* Mobile Safari */
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/ /*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
...@@ -180,15 +182,6 @@ label[for='toggle-all'] { ...@@ -180,15 +182,6 @@ label[for='toggle-all'] {
color: #737373; color: #737373;
} }
/* Need this ugly hack, since only
WebKit supports styling of inputs */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all {
top: -52px;
left: -11px;
}
}
#todo-list { #todo-list {
margin: 0; margin: 0;
padding: 0; padding: 0;
...@@ -229,6 +222,7 @@ WebKit supports styling of inputs */ ...@@ -229,6 +222,7 @@ WebKit supports styling of inputs */
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto 0; margin: auto 0;
border: none; /* Mobile Safari */
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/ /*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
...@@ -394,4 +388,15 @@ WebKit supports styling of inputs */ ...@@ -394,4 +388,15 @@ WebKit supports styling of inputs */
#info a { #info a {
color: inherit; color: inherit;
}
/*
Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox and Opera
*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all,
#todo-list li .toggle {
background: none;
}
} }
\ No newline at end of file
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment