Some new changes in layout (aside & buttons)

src/stylesheets/css/Lungo.layout.css

@@ -15,7 +15,7 @@ nav .bubble{position:relative;top:-16px;left:-10px;margin-right:-20px;}
 .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{position:absolute;top:0px;bottom:0px;height:auto;width:256px;max-width:256px;opacity:0;z-index:0;}
 aside.show{opacity:1;}
 header~aside{padding-top:40px;}
 footer~aside{padding-bottom:40px;}

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

@@ -14,7 +14,7 @@ header {
   background-color: #91bd09;
   border-top: 1px solid #b7de3f;
   border-bottom: 1px solid #758e29;
-  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
 }
 footer {
   background: #2c2c2d -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #2c2c2d), color-stop(1, #1c1c1c));
@@ -51,6 +51,7 @@ nav a.current, nav a:active {
 /* @group <aside> */
 aside {
   background: #252525;
+  box-shadow: inset -1px 0 4px rgba(0, 0, 0, 0.2);
 }
 aside a {
   color: #fff;
@@ -71,9 +72,6 @@ aside .anchor {
   background: #101010;
   color: #7a7a7a;
 }
-aside  ~ article {
-  box-shadow: -1px 0px 4px #000000;
-}
 /* @end */
 /* @group .list */
 .list, .list li:not(.toolbar) a {
@@ -145,11 +143,25 @@ aside  ~ article {
   text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
 }
 /* @group .button */
-a.button {
-  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.3), inset 0 2px 0px rgba(255, 255, 255, 0.2), inset 1px 0 0 rgba(0, 0, 0, 0.2), inset -1px 0 0 rgba(0, 0, 0, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.1);
-}
-a.button:active {
-  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.4);
+.button {
+  border-bottom: 1px inset rgba(0, 0, 0, 0.2);
+  -webkit-border-radius: 1px;
+  border-radius: 1px;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+.button:active, .button.active {
+  -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), inset 0 0 2px rgba(0, 0, 0, 0.2);
+  border-bottom-color: rgba(0, 0, 0, 0);
+}
+header .button:active,
+footer .button:active,
+header .button:active,
+footer .button:active {
+  height: 29px;
+  position: relative;
+  top: 1px;
 }
 /* @end */
 /* @group <inputs> */

src/stylesheets/less/Lungo.layout.less

@@ -139,6 +139,7 @@ aside {
 	bottom: 0px;
 	height: auto;
 	width: 256px;
+	max-width: 256px;
 	opacity: 0;
 	z-index: 0;
 }

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

@@ -27,7 +27,7 @@ header {
 	background-color: @theme;
 	border-top: 1px solid @theme-light;
 	border-bottom: 1px solid @theme-dark;
-	box-shadow: 0px 1px 1px rgba(0,0,0,0.2);
+	box-shadow: 0 1px 0 rgba(0,0,0,0.2);
 }
 
 footer {
@@ -72,6 +72,7 @@ nav a {
 /* @group <aside> */
 aside {
     background: #252525;
+	box-shadow: inset -1px 0 4px rgba(0,0,0,0.2);
 
     & a {
     	color: #fff;
@@ -95,10 +96,6 @@ aside {
     	background: #101010;
 		color:  #7a7a7a;
 	}
-
-	& ~ article {
-		box-shadow: -1px 0px 4px #000;
-	}
 }
 /* @end */
 
@@ -179,10 +176,22 @@ aside {
 }
 
 /* @group .button */
-a.button {
-	box-shadow: inset 0 1px 0 rgba(0,0,0,0.3), inset 0 2px 0px rgba(255,255,255,0.2), inset 1px 0 0 rgba(0,0,0,0.2), inset -1px 0 0 rgba(0,0,0,0.2), inset 0 -1px 0 rgba(0,0,0,0.2), 0 1px 1px rgba(0,0,0,0.1);
-
-	&:active { box-shadow: inset 0 0 8px rgba(0,0,0,0.4); }
+.button {
+	border-bottom: 1px inset rgba(0,0,0,0.2);		
+	.border-radius(1px);
+	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 3px rgba(0,0,0,0.2);	
+	
+	&:active, &.active { 
+		-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1), inset 0 0 2px rgba(0,0,0,0.2);
+		border-bottom-color: rgba(0,0,0,0);
+	}
+	
+	header &:active, footer &:active, 
+	header &:active, footer &:active {
+    	height: 29px;
+		position: relative;
+		top:  1px; 
+	}
 }
 /* @end */