various bug fixes

toddwprice · Aug 9, 2011 · 7dc4bc8 · 7dc4bc8
1 parent 25ebb36
commit 7dc4bc8
Show file tree

Hide file tree

Showing 49 changed files with 388 additions and 158 deletions.
diff --git a/css/apple.css b/css/apple.css
@@ -6,6 +6,10 @@ body {
 
 /* Main Div */
 
+div.jsTouch a {
+	cursor: default;
+}
+
 div.jsTouch {
 	-webkit-box-sizing: border-box;
 	overflow: hidden;
@@ -20,10 +24,11 @@ div.jsTouch div.toolbar {
 	border-bottom: 1px solid #2d3642;
 	padding: 10px;
 	height: 45px;
+	margin-bottom: 5px;
 	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#D5DBE3), color-stop(.6, #6e89a9), to(#6E85A2));
 	-webkit-box-shadow: 0px 1px 1px #eee;
 	overflow: hidden;
-	position: absolute;
+	position: relative;
 	z-index: 5;
 }
 
@@ -42,6 +47,18 @@ div.jsTouch div.toolbar h1{
 	text-align: center;
 }
 
+div.jsTouch h2{
+	color: #555555;
+	white-space: nowrap;
+	overflow: hidden;
+	margin: 0;
+	padding: 10px 15px 0px 15px;
+	font-size: 16px;
+	font-weight: bold;
+	text-shadow: rgba(220, 220, 220, 0.4) 1px 1px 0;
+	text-overflow: ellipsis;
+}
+
 div.progress {
 	position: absolute;
 	margin: 100px 70px;
@@ -53,6 +70,7 @@ div.progress {
 	font-weight: bold;
 	border-radius: 8px;
 	width: 100px;
+	z-index: 6;
 }
 
 /* BLACK BUTTON WITH BLUE OVERLAY */
@@ -139,7 +157,6 @@ div.progress {
 div.jsTouch div.content {
 	padding: 0px;
 	margin: 0px;
-	margin-top: 55px;
 	-webkit-transition-property: -webkit-transform;
 	-webkit-transition-timing-function: cubic-bezier(0,0,0.25,1);
 	-webkit-transition-duration: 0;

diff --git a/css/core.css b/css/core.css
@@ -0,0 +1,62 @@
+.small_icon {
+	padding: 0px; 
+	margin: -5px 10px -5px 0px; 
+	width: 30px; 
+	height: 30px;
+	float: left; 
+	background-color: rgba(113, 175, 63, 0.7);
+	border-radius: 5px;
+	border: 2px solid #d1d3d4;
+}
+
+/* Bottom tabs */
+
+div.jsTouch div.tabs {
+	color: white;
+	text-align: center;
+	-webkit-box-sizing: border-box;
+	border-top: 1px solid #2d3642;
+	padding: 1px;
+	height: 45px;
+	background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0,#cccccc), color-stop(.02,#353535), color-stop(.5,#2b2b2b), 
+		color-stop(.55,#222222), color-stop(1,#222222));
+	overflow: hidden;
+	bottom: 0px; 
+	position: absolute;
+	z-index: 5;
+}
+
+div.jsTouch div.tabs ul{ 
+	text-align: center;
+	color: white;
+    font: bold 10px "Helvetica Neue", Helvetica;
+    padding: 0px;
+    margin: 0px;
+	margin-top: 1px;
+}
+
+div.jsTouch div.tabs ul li, div.jsTouch div.tabs ul li a {
+	display: inline-block;
+	-webkit-box-sizing: border-box;
+	overflow: hidden;
+	width: 61px; 
+	height: 40px;
+    color: #fff;
+    list-style-type: none;
+	text-shadow: 1px 1px 0px #222222;
+}
+
+div.jsTouch div.tabs ul a img{
+	width: 40px;
+	height: 40px;
+	opacity: 0.4;
+}
+
+div.jsTouch div.tabs ul a.clicked {
+	border-radius: 3px;
+	background: rgba(255,255,255,0.3);
+}
+
+div.jsTouch div.tabs ul a.clicked img{
+	opacity: 1;
+}
diff --git a/css/ipad-dark.css b/css/ipad-dark.css
@@ -6,6 +6,10 @@ body {
 
 /* Main Div */
 
+div.jsTouch a {
+	cursor: default;
+}
+
 div.jsTouch {
 	-webkit-box-sizing: border-box;
 	overflow: hidden;
@@ -15,15 +19,44 @@ div.jsTouch {
 	padding: 0px !important;
 }
 
+div.jsTouch h2{
+	color: #fff; 
+	white-space: nowrap;
+	overflow: hidden;
+	margin: 0;
+	padding: 10px 15px 0px 15px;
+	font-size: 16px;
+	font-weight: bold;
+	text-shadow: rgba(0, 0, 0, 0.4) 1px 1px 0;
+	text-overflow: ellipsis;
+}
+
+div.progress {
+	position: absolute;
+	margin: 100px 70px;
+	text-align: center;
+	padding: 30px 40px;
+	background: rgba(0,0,0,0.5);
+	font-family: "Helvetica Neue", Helvetica;
+	color: white;
+	font-weight: bold;
+	border-radius: 8px;
+	width: 100px;
+	z-index: 6;
+}
+
+/* Tool Bar */
+
 div.jsTouch div.toolbar {
 	-webkit-box-sizing: border-box;
 	border-bottom: 1px solid #2d3642;
 	padding: 10px;
 	height: 45px;
+	margin-bottom: 5px;
 	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ADADAD), color-stop(.5,#3F3F3F), color-stop(.5,#000000), color-stop(1,#555555));
 	-webkit-box-shadow: 0px 1px 1px #aaaaaa;
 	overflow: hidden;
-	position: absolute;
+	position: relative;
 	z-index: 5;
 }
 
@@ -42,19 +75,6 @@ div.jsTouch div.toolbar h1{
 	text-align: center;
 }
 
-div.progress {
-	position: absolute;
-	margin: 100px 70px;
-	text-align: center;
-	padding: 30px 40px;
-	background: rgba(0,0,0,0.5);
-	font-family: "Helvetica Neue", Helvetica;
-	color: white;
-	font-weight: bold;
-	border-radius: 8px;
-	width: 100px;
-}
-
 /* BLACK BUTTON WITH BLUE OVERLAY */
 
 .button	{
@@ -140,7 +160,6 @@ div.progress {
 div.jsTouch div.content {
 	padding: 0px;
 	margin: 0px;
-	margin-top: 55px;
 	-webkit-transition-property: -webkit-transform;
 	-webkit-transition-timing-function: cubic-bezier(0,0,0.25,1);
 	-webkit-transition-duration: 0;
@@ -265,8 +284,7 @@ div.jsTouch div.content ul li span.arrow {
 	-webkit-transform: rotate(45deg);
 	width: 7px;
 	height: 7px;
-	margin-top: 5px;
-	margin-right: 5px;
+	margin: 7px;
 }
 
 div.jsTouch div.content div.edgetoedge-title {

diff --git a/css/ipad-light.css b/css/ipad-light.css
@@ -6,29 +6,33 @@ body {
 
 /* Main Div */
 
+div.jsTouch a {
+	cursor: default;
+}
+
 div.jsTouch {
 	-webkit-box-sizing: border-box;
 	overflow: hidden;
-	background: #f6f6f8 url(../images/light-stripes.jpg) repeat-x;
+	background: -webkit-gradient(linear, 0% 0%, 0% 50%, from(#f6f6f6), to(#e5e5e5));
 	font-family: "Helvetica Neue", Helvetica;
 	border: 0px !important; 
 	padding: 0px !important;
 }
 
 div.jsTouch div.toolbar {
-	-webkit-box-sizing: border-box;
-	border-bottom: 1px solid #2d3642;
 	padding: 10px;
 	height: 45px;
-	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F5F7), to(#8f929a));
-	-webkit-box-shadow: 0px 1px 1px #eee;
+	margin-bottom: 5px;
+	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), color-stop(0.5, #dfe1e6), color-stop(1, #a8acb9));
+	border-bottom: 1px solid #797f90;
 	overflow: hidden;
-	position: absolute;
+	position: relative;
 	z-index: 5;
+	-webkit-box-sizing: border-box;
 }
 
 div.jsTouch div.toolbar h1{
-	color: #5f646a;
+	color: #717880;
 	white-space: nowrap;
 	overflow: hidden;
 	margin: 0;
@@ -37,11 +41,23 @@ div.jsTouch div.toolbar h1{
 	line-height: 1em;
 	font-size: 20px;
 	font-weight: bold;
-	text-shadow: #dddddd 1px 1px 0;
+	text-shadow: 1px 1px 0 #eeeeee ;
 	text-overflow: ellipsis;
 	text-align: center;
 }
 
+div.jsTouch h2{
+	color: #555555;
+	white-space: nowrap;
+	overflow: hidden;
+	margin: 0;
+	padding: 10px 15px 0px 15px;
+	font-size: 16px;
+	font-weight: bold;
+	text-shadow: rgba(220, 220, 220, 0.4) 1px 1px 0;
+	text-overflow: ellipsis;
+}
+
 div.progress {
 	position: absolute;
 	margin: 100px 70px;
@@ -53,6 +69,7 @@ div.progress {
 	font-weight: bold;
 	border-radius: 8px;
 	width: 100px;
+	z-index: 6;
 }
 
 /* BLACK BUTTON WITH BLUE OVERLAY */
@@ -141,7 +158,6 @@ div.progress {
 div.jsTouch div.content {
 	padding: 0px;
 	margin: 0px;
-	margin-top: 55px;
 	-webkit-transition-property: -webkit-transform;
 	-webkit-transition-timing-function: cubic-bezier(0,0,0.25,1);
 	-webkit-transition-duration: 0;
@@ -158,19 +174,19 @@ div.jsTouch div.content ul.rounded {
     padding: 0px;
     margin: 15px 10px 15px 10px;
 	-webkit-border-radius: 8px;
-	-webkit-box-shadow: 1px 1px 2px #aaa;
+	-webkit-box-shadow: 0px 1px 5px #aaa;
 }
 
 div.jsTouch div.content ul.rounded li {
     color: #333;
-	border-left: 1px solid #777;
-	border-right: 1px solid #777;
-    border-top: 1px solid #eeeeee;
+	border-left: 1px solid #c9c9c9;
+	border-right: 1px solid #c9c9c9;
+    border-top: 1px solid #cccccc;
     list-style-type: none;
     padding: 10px;
 	margin: 0px;
 	background-color: #fff;
-	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d2d4db), to(#bebfc5));	
+	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fdfdfd), to(#f0f0f0));	
 }
 
 div.jsTouch div.content ul.rounded li a {
@@ -196,12 +212,12 @@ div.jsTouch div.content ul.edgetoedge {
 
 div.jsTouch div.content ul.edgetoedge li {
     color: #333;
-    border-top: 1px solid #eeeeee;
+    border-top: 1px solid #cccccc;
     list-style-type: none;
     padding: 10px;
 	margin: 0px;
 	background-color: #fff;
-	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d2d4db), to(#bebfc5));	
+	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fdfdfd), to(#f0f0f0));	
 }
 
 div.jsTouch div.content ul li a {
@@ -224,7 +240,7 @@ div.jsTouch div.content ul li a.clicked {
 div.jsTouch div.content ul.rounded li:first-child {
 	-webkit-border-top-left-radius: 8px;
 	-webkit-border-top-right-radius: 8px;
-    border-top: 1px solid #777 !important;
+    border-top: 1px solid #c9c9c9 !important;
 }
 
 div.jsTouch div.content ul.rounded li:first-child a.clicked {
@@ -235,7 +251,7 @@ div.jsTouch div.content ul.rounded li:first-child a.clicked {
 div.jsTouch div.content ul.rounded li:last-child {
 	-webkit-border-bottom-left-radius: 8px;
 	-webkit-border-bottom-right-radius: 8px;
-    border-bottom: 1px solid #777 !important;
+    border-bottom: 1px solid #c9c9c9 !important;
 }
 
 div.jsTouch div.content ul.rounded li:last-child a.clicked {
@@ -276,9 +292,9 @@ div.jsTouch div.content div.edgetoedge-title {
 	padding: 4px;
 	padding-left: 10px;
 	font-weight: bold;
-	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A0A2A9), to(#A0A2A9), color-stop(.5,#82848A));
-	border-top: 1px solid #efefef;
-	border-bottom: 1px solid #555555;
+	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#81a8ce), to(#6089b1));
+	border-top: 1px solid #456f9a;
+	border-bottom: 1px solid #456f9a;
 	color: #ffffff;
 	text-shadow: 1px 1px 0px #666666;
 }

diff --git a/images/dark-linen.jpg b/images/dark-linen.jpg
diff --git a/images/dark-linen2.jpg b/images/dark-linen2.jpg
diff --git a/images/tabs/aim.png b/images/tabs/aim.png
diff --git a/images/tabs/bright-dark.png b/images/tabs/bright-dark.png
diff --git a/images/tabs/bright-light.png b/images/tabs/bright-light.png
diff --git a/images/tabs/camera.png b/images/tabs/camera.png
diff --git a/images/tabs/clock.png b/images/tabs/clock.png
diff --git a/images/tabs/cloud.png b/images/tabs/cloud.png
diff --git a/images/tabs/delete.png b/images/tabs/delete.png
diff --git a/images/tabs/flag.png b/images/tabs/flag.png
diff --git a/images/tabs/go-left.png b/images/tabs/go-left.png
diff --git a/images/tabs/go-right.png b/images/tabs/go-right.png
diff --git a/images/tabs/guitar.png b/images/tabs/guitar.png
diff --git a/images/tabs/heart.png b/images/tabs/heart.png
diff --git a/images/tabs/info.png b/images/tabs/info.png
diff --git a/images/tabs/lock.png b/images/tabs/lock.png
diff --git a/images/tabs/music.png b/images/tabs/music.png
diff --git a/images/tabs/mute.png b/images/tabs/mute.png
diff --git a/images/tabs/note.png b/images/tabs/note.png
diff --git a/images/tabs/passforward.png b/images/tabs/passforward.png
diff --git a/images/tabs/pause.png b/images/tabs/pause.png
diff --git a/images/tabs/person.png b/images/tabs/person.png
diff --git a/images/tabs/phone.png b/images/tabs/phone.png
diff --git a/images/tabs/play-back.png b/images/tabs/play-back.png
diff --git a/images/tabs/play-pause.png b/images/tabs/play-pause.png
diff --git a/images/tabs/play.png b/images/tabs/play.png
diff --git a/images/tabs/rewind.png b/images/tabs/rewind.png
diff --git a/images/tabs/search.png b/images/tabs/search.png
diff --git a/images/tabs/sound-loud.png b/images/tabs/sound-loud.png
diff --git a/images/tabs/sound-normal.png b/images/tabs/sound-normal.png
diff --git a/images/tabs/tag.png b/images/tabs/tag.png
diff --git a/images/tabs/tag2.png b/images/tabs/tag2.png
diff --git a/images/tabs/unlock.png b/images/tabs/unlock.png
diff --git a/images/tabs/wizard.png b/images/tabs/wizard.png