Changes on stylesheets

src/stylesheets/css/Lungo.layout.css

@@ -1,14 +1,21 @@
-section{position:absolute;position:fixed;width:100%;height:inherit;z-index:0;-webkit-transform:translate3d(320px, 0, 0);transform:translate3d(320px, 0, 0);-webkit-backface-visibility:hidden;-webkit-transition:-webkit-transform 250ms cubic-bezier(0.39, 0.575, 0.565, 1);}
-section:first-child,section.show{z-index:1;-webkit-transform:translate3d(0px, 0, 0);transform:translate3d(0px, 0, 0);}
-section.hide{z-index:0;-webkit-transform:translate3d(-320px, 0, 0);transform:translate3d(-320px, 0, 0);}
+section{position:absolute;left:0px;top:0px;width:100%;height:100%;-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0);-webkit-backface-visibility:hidden;-webkit-transition:-webkit-transform 250ms cubic-bezier(0.39, 0.575, 0.565, 1);}section:first-child,section.show{-webkit-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);}
+section.hide{-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0);}
 header,footer{position:absolute;left:0px;width:100%;height:38px;display:block;z-index:2;line-height:38px;}
 header{top:0px;}
 footer{bottom:0px;}
-header .title,footer .title{float:left;margin:0 8px;font-size:1.15em;}
-header .title{position:absolute;left:0px;width:100%;margin:0px auto;z-index:-1;text-align:center;}
+header .title,footer .title{margin:0 8px;float:left;z-index:-1;font-size:1.15em;font-weight:bold;}
+header .title{position:absolute;left:0px;right:0px;text-align:center;display:inline-block;}
 section header a.button,section footer a.button{margin:3px 3px auto 4px;}
 section header a.button.icon,section footer a.button.icon{width:17px;}
-aside{position:absolute;top:0px;bottom:0px;height:auto;width:256px;opacity:0;}
+nav{height:inherit;text-align:center;}nav a{padding:0 3px;z-index:1000;float:left;}nav a .icon{font-size:2.2em;line-height:38px;display:inline-block;padding:0 5px;}
+nav a abbr{position:relative;bottom:5px;margin-left:2px;display:none;font-size:1.05em;}
+nav a.current abbr{display:inline;}
+nav .bubble{position:relative;top:-16px;left:-10px;margin-right:-20px;}
+.toolbar{height:48px;display:block;}.toolbar nav{display:block;}
+.toolbar a{padding:0;}
+.toolbar .icon{display:block;font-size:2.5em;line-height:48px;}
+.toolbar .bubble{top:-54px;left:6px;padding:1px 4px;}
+aside{position:absolute;top:0px;bottom:0px;height:auto;width:256px;opacity:0;z-index:0;}
 aside.show{opacity:1;}
 header~aside{padding-top:40px;}
 footer~aside{padding-bottom:40px;}
@@ -25,13 +32,3 @@ article.aside{-webkit-transform:translate3d(256px, 0, 0);transform:translate3d(2
 @media handheld, only screen and (min-width: 768px){article.aside{-webkit-transform:translate3d(0px, 0, 0);transform:translate3d(0px, 0, 0);}}article .title{font-size:1.1em;margin:0px 0 4px;}
 article .title .icon{margin-right:4px;}
 article .text{margin:4px 0 8px;display:block;font-size:0.9em;font-weight:normal;line-height:1.4em;}
-nav{height:inherit;text-align:center;}
-nav a{display:inline-block;padding:0 6px;height:inherit;float:left;}
-nav .icon{font-size:2.2em;line-height:38px;}
-nav a abbr{position:relative;bottom:5px;margin-left:2px;display:none;font-size:1.05em;}
-nav a.current abbr{display:inline;}
-.toolbar{height:48px;display:block;}
-.toolbar a{float:left;padding:0;}
-.toolbar .icon{display:block;font-size:2.5em;line-height:48px;}
-nav .bubble{position:relative;top:-16px;left:-8px;margin-right:-20px;}
-.toolbar .bubble{top:-54px;left:6px;padding:1px 4px;}

src/stylesheets/css/Lungo.theme.default.css

@@ -96,10 +96,11 @@ aside  ~ article {
 .list li.selectable:active {
   background: #93d6e7;
   color: #1b6777;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
 }
 .list li.selectable:active small, .list li.selectable:active .onright:not(.bubble) {
   color: #ffffff;
+  text-shadow: none;
 }
 .list li small, .list li .onright:not(.bubble) {
   color: #888;
@@ -110,7 +111,7 @@ aside  ~ article {
 .list .anchor {
   background: #93d6e7;
   color: #1b6777;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
   border: none;
 }
 .list .tip {

src/stylesheets/css/Lungo.widgets.button.css

@@ -1,4 +1,4 @@
-a.button{display:inline-block;height:31px;padding:0 9px 0 8px;color:#fff !important;outline:none;background:#5a5a5a;-webkit-user-select:none;user-select:none;-webkit-border-radius:1px;border-radius:1px;-webkit-background-clip:padding-box;background-clip:padding-box;font-weight:bold;line-height:32px;text-align:center;text-decoration:none;}a.button:active{background:#4b4b4b;}
+a.button{display:inline-block;height:31px;padding:0 9px 0 8px;color:#fff !important;outline:none;background:#5a5a5a;-webkit-user-select:none;user-select:none;font-weight:bold;line-height:32px;text-align:center;text-decoration:none;}a.button:active{background:#4b4b4b;}
 a.button:disabled,a.button.disabled{background:rgba(255, 255, 255, 0.2);color:#999 !important;}
 a.button .icon{float:left;width:17px;height:30px;font-size:1.5em;line-height:31px;}
 a.button.big{position:relative;height:30px;width:100%;margin-bottom:4px;padding:6px 0;font-size:16px;line-height:31px;}a.button.big .icon{width:20px;height:28px;line-height:32px;margin-left:0.6em;margin-right:-48px;}

src/stylesheets/less/Lungo.layout.less

@@ -12,29 +12,22 @@
 @defaultTrasition : @easeOutSine;
 
 /* @group <section> */
-section{
-	position: absolute;
-	position: fixed;
+section {
+	position: absolute; /* position: fixed on iOS5 & Android 4 */
+	left:  0px;
+	top:  0px;
 	width: 100%;
-	height: inherit;
-	z-index: 0;
+	height: 100%;
 	
-	//.transform(translate3d(100%, 0, 0));
-	.transform(translate3d(320px, 0, 0));
+	.transform(translate3d(100%, 0, 0));
+	//.transform(translate3d(320px, 0, 0));
 	-webkit-backface-visibility: hidden;
 	-webkit-transition: -webkit-transform 250ms @defaultTrasition;
-}
-
-section:first-child, section.show {	
-	z-index: 1;
-	//.transform(translate3d(0%, 0, 0));
-	.transform(translate3d(0px, 0, 0));
-}
-
-section.hide {
-	z-index: 0;
-	//.transform(translate3d(-100%, 0, 0));
-	.transform(translate3d(-320px, 0, 0));
+	
+	&:first-child, &.show {	
+		.transform(translate3d(0%, 0, 0)); }
+	&.hide { 
+		.transform(translate3d(-100%, 0, 0)); }
 }
 /* @end */
 
@@ -46,6 +39,7 @@ header, footer  {
 	width: 100%;
 	height: 38px;
 	display: block;
+	
 	z-index: 2;
 	line-height: 38px;
 }
@@ -59,18 +53,19 @@ footer  {
 }
 
 header .title, footer .title  {
-	float: left;
 	margin: 0 8px;	
+	float: left;	
+	z-index: -1;
 	font-size: 1.15em;
+	font-weight: bold;
 }
 
 header .title {
 	position: absolute;
 	left: 0px;
-	width: 100%;
-	margin:0px auto;
-	z-index: -1;
+	right: 0px;
 	text-align: center;
+	display: inline-block;
 }
 
 section header a.button, section footer a.button  {
@@ -82,6 +77,64 @@ section header a.button.icon, section footer a.button.icon  {
 }
 /* @end */
 
+/* @group <nav> */
+
+nav {
+	height: inherit;
+	text-align: center;
+    	
+	& a {
+		padding: 0 3px;
+		z-index: 1000;
+		float: left;
+		
+		& .icon {
+		    font-size: 2.2em;
+		    line-height: 38px;
+		    display: inline-block;
+		    padding: 0 5px;
+}
+		
+		& abbr {
+    		position: relative;
+			bottom: 5px;
+			margin-left: 2px;
+			display: none;
+			
+			font-size: 1.05em;
+		}
+		
+		&.current abbr { display: inline; }
+	}
+	
+	& .bubble {
+    	position: relative;
+	    top:  -16px;
+	    left: -10px;
+	    margin-right: -20px;  
+	}
+}
+
+.toolbar {
+	height: 48px;
+	display: block;
+	
+	& nav { display: block; }
+	& a { padding: 0; }
+	& .icon {
+    	display: block;
+		font-size: 2.5em;
+		line-height: 48px;
+	}
+	
+	& .bubble {
+    	top:  -54px;
+	    left: 6px;
+	    padding: 1px 4px;
+	}
+}
+/* @end */
+
 /* @group <aside> */
 aside {
 	position: absolute;
@@ -90,6 +143,7 @@ aside {
 	height: auto;
 	width: 256px;
 	opacity: 0;
+	z-index: 0;
 }
 
 	aside.show {
@@ -135,9 +189,7 @@ aside {
 		}
 	
 		@media handheld, only screen and (min-width: 768px) {
-			[data-target="aside"] {
-				display: none !important;
-			}		
+			[data-target="aside"] { display: none !important; }		
 			aside { opacity: 1; }		
 			aside ~ article{
 				width: auto !important;
@@ -188,62 +240,4 @@ article {
     	font-weight: normal;
     	line-height: 1.4em;
 	}			
-/* @end */
-
-/* @group <nav> */
- 
-nav  {
-	height: inherit;
-	text-align: center;
-}
-
-	nav a {
-		display: inline-block;
-		padding: 0 6px;
-		height: inherit;
-		float: left;
-	}
-	nav .icon {
-	    font-size: 2.2em;
-	    line-height: 38px;
-	}
-	nav a abbr {
-		position: relative;
-		bottom: 5px;
-		margin-left: 2px;
-		display: none;
-		
-		font-size: 1.05em;
-	}
-	nav a.current abbr { display: inline; }
-
-
-.toolbar {
-	height: 48px;
-	display: block;
-}
-
-.toolbar a {
-	float: left;
-	padding: 0;
-}
-
-.toolbar .icon {
-	display: block;
-	font-size: 2.5em;
-	line-height: 48px;
-}
-
-nav .bubble {
-    position: relative;
-    top:  -16px;
-    left: -8px;
-    margin-right: -20px;     
-}
-
-.toolbar .bubble {
-    top:  -54px;
-    left: 6px;
-    padding: 1px 4px;
-}
 /* @end */

src/stylesheets/less/Lungo.theme.default.less

@@ -22,7 +22,7 @@
 	@theme-dark: #07acd0;
 	@theme-highlight: #93d6e7;
 		@theme-highlight-color: #1b6777;
-		@theme-highlight-text-shadow: 0 1px 0 rgba(255,255,255,0.1);
+		@theme-highlight-text-shadow: 0 1px 0 rgba(255,255,255,0.2);
 	@theme-secondary: #2c2c2d;
 		@theme-secondary-dark: #1c1c1c;
 		
@@ -127,6 +127,7 @@ aside {
 			
 			& small, & .onright:not(.bubble) {
     			color: @white;
+    			text-shadow: none;
 			} 
 		}
 		

src/stylesheets/less/Lungo.widgets.button.less

@@ -17,7 +17,6 @@ a.button {
 	outline: none;
 	background: #5a5a5a;	
 	.user-select(none);
-	.border-radius(1px);
 	font-weight: bold;
 	line-height: 32px;
 	text-align: center;