From 85c20dc578f692dc0176b1b9bd15270e4ee4f3af Mon Sep 17 00:00:00 2001
From: Sindre Sorhus <sindresorhus@gmail.com>
Date: Fri, 4 May 2012 22:32:54 +0200
Subject: [PATCH] Make the template useable in Mobile Safari + make it prettier
 in Firefox and Opera. Fixes #160

---
 assets/base.css | 29 +++++++++++++++++------------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/assets/base.css b/assets/base.css
index 7d61b5a214..9ce1320884 100755
--- a/assets/base.css
+++ b/assets/base.css
@@ -137,7 +137,6 @@ body {
 	padding: 16px 16px 16px 60px;
 	border: none;
 	background: rgba(0, 0, 0, 0.02);
-	position: relative;
 	z-index: 2;
 	box-shadow: none;
 }
@@ -154,9 +153,12 @@ label[for='toggle-all'] {
 
 #toggle-all {
 	position: absolute;
-	top: -42px;
-	left: 12px;
+	top: -56px;
+	left: -15px;
+	width: 65px;
+	height: 41px;
 	text-align: center;
+	border: none; /* Mobile Safari */
 	-webkit-appearance: none;
 	/*-moz-appearance: none;*/
 	-ms-appearance: none;
@@ -180,15 +182,6 @@ label[for='toggle-all'] {
 	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 {
 	margin: 0;
 	padding: 0;
@@ -229,6 +222,7 @@ WebKit supports styling of inputs */
 	top: 0;
 	bottom: 0;
 	margin: auto 0;
+	border: none; /* Mobile Safari */
 	-webkit-appearance: none;
 	/*-moz-appearance: none;*/
 	-ms-appearance: none;
@@ -394,4 +388,15 @@ WebKit supports styling of inputs */
 
 #info a {
 	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