Optimized stylesheets

src/stylesheets/css/Lungo.layout.css

@@ -7,12 +7,12 @@ section.static.hide{-webkit-transform:translate3d(0%, 0, 0);-moz-transform:trans
 section.popup{-webkit-transform:translate3d(0, 100%, 0);-moz-transform:translate3d(0, 100%, 0);-ms-transform:translate3d(0, 100%, 0);-o-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);}
 section.popup.show{-webkit-transform:translate3d(0, 0%, 0);-moz-transform:translate3d(0, 0%, 0);-ms-transform:translate3d(0, 0%, 0);-o-transform:translate3d(0, 0%, 0);transform:translate3d(0, 0%, 0);}
 section.popup.hide{-webkit-transform:translate3d(0, -100%, 0);-moz-transform:translate3d(0, -100%, 0);-ms-transform:translate3d(0, -100%, 0);-o-transform:translate3d(0, -100%, 0);transform:translate3d(0, -100%, 0);}
-header,footer{position:absolute;left:0px;width:100%;height:40px;display:block;z-index:2;line-height:40px;}
+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.3em;}
 header .title{position:absolute;left:0px;width:100%;margin:0px auto;text-align:center;z-index:-1;}
-section header a.button,section footer a.button{margin:4px 3px auto;}
+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;font-size:1.5em;font-weight:normal;}
 aside{position:absolute;top:0px;bottom:0px;height:auto;width:0px;}
 aside.show{width:256px;}
@@ -21,7 +21,8 @@ footer~aside{padding-bottom:40px;}
 aside~article{-webkit-transition:left 0.3s ease-in-out;left:0px;}
 aside a{display:block;width:244px;height:40px;padding:0 6px;font-size:1.1em;font-weight:bold;line-height:40px;}
 aside .icon{width:28px;height:28px;float:left;margin:8px 6px 0 0;font-size:1.9em;line-height:1.0em;text-align:center;}
-aside .anchor{font-weight:bold;padding:6px 10px;}
+aside .anchor{font-weight:bold;padding:3px 10px 4px;}
+aside .bubble{float:right;margin:12px 4px 0 0;}
 @media handheld, only screen and (min-width: 768px){[data-target="aside"]{display:none !important;} aside{width:256px;} aside~article{width:auto !important;left:256px;right:0px !important;}}article{position:absolute;width:inherit;height:inherit;top:0px;bottom:0px;display:block;z-index:0;opacity:0;}
 header~article{top:40px;}
 footer~article{bottom:40px;}
@@ -38,4 +39,5 @@ nav a.current{-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s e
 .toolbar{height:48px;display:block;}
 .toolbar a{float:left;padding:0;font-size:2.2em;}
 .toolbar .icon{display:block;line-height:52px;}
-.toolbar .bubble{position:relative;top:-60px;left:12px;padding:1px 4px;display:inline;font-size:0.45em;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
+nav .bubble{position:relative;top:-10px;left:-10px;margin-right:-16px;font-size:0.4em;}
+.toolbar .bubble{top:-60px;left:12px;padding:1px 4px;}

src/stylesheets/css/Lungo.layout.list.css

@@ -15,7 +15,7 @@
 .list a.arrow:before{float:right;content:">";position:relative;top:6px;font-size:16px;font-family:"Courier New",Courier,mono;font-weight:bold;}
 .list .onright{font-size:0.85em;}
 .list .onright .icon{font-size:1.2em !important;height:12px !important;width:12px !important;margin:0px;}
-.indented ul{border:1px solid #c5c5c5;box-shadow:0px 0px 6px #bbb;margin-bottom:10px;}
+.indented ul{margin-bottom:10px;}
 .indented.rounded ul{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
 .indented.rounded li:first-child{-webkit-border-radius:4px 4px 0px 0px;-moz-border-radius:4px 4px 0px 0px;border-radius:4px 4px 0px 0px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
 .indented.rounded li:last-child{-webkit-border-radius:0px 0px 4px 4px;-moz-border-radius:0px 0px 4px 4px;border-radius:0px 0px 4px 4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}

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

@@ -6,15 +6,11 @@
  *
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
-/* @group layout */
 .app {
   font-size: 13px;
   background: #000;
 }
-article {
-  background-color: #e2e2e2;
-}
-/* @group <header> & <footer> */
+/* @group <header> & <footer> & <article> */
 header {
   background: #019d5e -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #019d5e), color-stop(1, #006b41));
   -webkit-border-radius: 6px 6px 0 0;
@@ -23,15 +19,23 @@ header {
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
-  -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.4), inset 0px -1px rgba(0, 0, 0, 0.5);
+  border-top: 1px solid #6dc0a1;
+  border-bottom: 1px solid #063322;
 }
 footer {
   background: #2c2c2d -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #2c2c2d), color-stop(1, #1c1d1d));
-  -webkit-box-shadow: inset 0px 1px rgba(0, 0, 0, 0.5);
+  border-top: 1px inset #1c1c1c;
 }
 .title {
   color: #fff;
-  text-shadow: rgba(0, 0, 0, 0.5) 0 -1px 0px;
+  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.5);
+}
+article {
+  background-color: #e2e2e2;
+}
+article .title {
+  color: #797979;
+  text-shadow: 0px 1px 0px #fff;
 }
 /* @end */
 /* @group <nav> */
@@ -40,41 +44,36 @@ nav a {
 }
 nav a.current {
   color: #fff;
-  text-shadow: 0px 1px 0px #000 !important;
-}
-.toolbar {
-  box-shadow: inset 0px 1px #1c1c1c;
 }
 .toolbar a.current {
   background: #1c1c1c;
-  color: #fff;
   box-shadow: inset 0px 0px 8px #101010;
   text-shadow: 0px 1px 4px #000;
 }
-.toolbar .bubble {
-  text-shadow: none;
-}
 /* @end */
 /* @group <aside> */
 aside {
   background: #252525;
-  -webkit-box-shadow: inset -1px 0px 0px #000000, inset -4px 0px 8px rgba(0, 0, 0, 0.5);
+  box-shadow: inset -1px 0px 8px #000000;
 }
 aside a {
-  color: #fff !important;
-  text-shadow: 0px 1px 0px #000 !important;
-  border-bottom: 1px inset rgba(0, 0, 0, 0.3);
-  border-top: 1px inset rgba(255, 255, 255, 0.1);
+  color: #fff;
+  text-shadow: 0px 1px 0px #000;
+  border-bottom: 1px inset #101010;
+  border-top: 1px inset #868686;
 }
 aside a.current {
-  background: rgba(255, 255, 255, 0.1);
+  background: #1c1c1c;
+  box-shadow: inset 0px 0px 8px #101010;
+  border-top: 1px inset #1c1c1c;
 }
 aside a .icon {
-  opacity: 0.5;
+  text-shadow: none;
+  color: #7a7a7a;
 }
 aside .anchor {
-  background: #151515;
-  color: #666;
+  background: #101010;
+  color: #7a7a7a;
 }
 /* @end */
 /* @group .list */
@@ -88,6 +87,9 @@ aside .anchor {
 .list li:last-child {
   border-bottom: none;
 }
+.indented ul {
+  border: 1px solid #c5c5c5;
+}
 .list .darker {
   background-color: #2c2c2d;
   color: #fff;
@@ -101,7 +103,7 @@ aside .anchor {
   box-shadow: inset 0px 1px 0px #fff;
   text-shadow: 0px 1px 0px #fff;
 }
-.list small, .list .onright {
+.list small, .list .onright:not(.bubble) {
   color: #999;
 }
 .list .tip {
@@ -114,11 +116,6 @@ aside .anchor {
 .list .toolbar {
   border-bottom-color: rgba(0, 0, 0, 0.2);
 }
-.list .bubble {
-  color: #fff;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
-  box-shadow: inset 0px 0px 1px #000;
-}
 .list .arrow:before {
   color: #a9a9a9;
 }
@@ -135,13 +132,11 @@ aside .anchor {
 }
 /* @end */
 /* @group widgets */
-/* @group <section>.splash */
 .splash article {
   background: #2c2c2d -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #2c2c2d), color-stop(1, #1c1d1d)) !important;
   color: #fff;
   text-shadow: rgba(0, 0, 0, 0.5) 0 1px 1px;
 }
-/* @end */
 /* @group <inputs> */
 input, textarea, select {
   border: 1px solid #ccc;
@@ -171,10 +166,12 @@ input:focus, textarea:focus, select:focus {
   background-clip: padding-box;
 }
 /* @end */
-/* @end */
-/* @group Article */
-article .title {
-  color: #797979;
-  text-shadow: 0px 1px 0px #fff;
+.bubble {
+  color: #fff;
+  text-shadow: none;
+  box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.7);
+}
+.bubble.count {
+  background: #e33100;
 }
 /* @end */

src/stylesheets/css/Lungo.widgets.css

@@ -9,4 +9,4 @@ section.copyright img{max-height:128px;}
 .round{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;}
 .semi-opacity{opacity:0.5;}
 .margin-top-4{margin-top:4px;}
-.bubble{padding:3px 4px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;font-size:0.8em;font-weight:bold;line-height:1.0em;}
+.bubble{padding:2px 4px 3px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;font-size:0.8em;font-weight:bold;line-height:1.0em;}

src/stylesheets/less/Lungo.layout.less

@@ -64,10 +64,10 @@ header, footer  {
 	position: absolute;
 	left: 0px;
 	width: 100%;
-	height: 40px;
+	height: 38px;
 	display: block;
 	z-index: 2;
-	line-height: 40px;
+	line-height: 38px;
 }
 
 header  {
@@ -94,7 +94,7 @@ header .title {
 }
 
 section header a.button, section footer a.button  {
-	margin: 4px 3px auto;
+	margin: 3px 3px auto 4px;
 }
 
 section header a.button.icon, section footer a.button.icon  {
@@ -153,7 +153,12 @@ aside a{
 	
 	aside .anchor {
 		font-weight: bold;
-    	padding: 6px 10px;
+    	padding: 3px 10px 4px;
+	}
+	
+	aside .bubble {
+    	float: right;
+		margin: 12px 4px 0 0;
 	}
 
 @media handheld, only screen and (min-width: 768px) {
@@ -264,16 +269,19 @@ nav a.current {
 	
 	line-height: 52px;
 }
+
+nav .bubble {
+    position: relative;
+    top:  -10px;
+    left: -10px;
+    margin-right: -16px;       
+    font-size: 0.4em;    
+}
+
 .toolbar .bubble {
-	position: relative;
     top:  -60px;
     left: 12px;
     padding: 1px 4px;
-    display: inline;
-    
-    font-size: 0.45em;
-    
-    .border-radius(12px);
 }
 
 /* @end */

src/stylesheets/less/Lungo.layout.list.less

@@ -20,7 +20,7 @@
 		list-style-type: none;
 	}
 	
-	.list a{
+	.list a {
 	    display: block;
 	}
 	
@@ -118,8 +118,6 @@
 
 /* @group .indented */
 	.indented ul {
-		border: 1px solid #c5c5c5;
-		box-shadow: 0px 0px 6px #bbb;
 		margin-bottom: 10px;
 	}
 	.indented.rounded ul { .border-radius(4px); }	

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

@@ -8,100 +8,77 @@
  */
 
 @import "mixins.less";
-
-/* @group layout */
 .app {
 	font-size: 13px;
     background: #000;
 }
-
-article {
-	background-color: #e2e2e2;
-}
 	
-/* @group <header> & <footer> */
+/* @group <header> & <footer> & <article> */
 header {
 	background: #019d5e -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #019d5e), color-stop(1, #006b41));
 	
 	.border-radius(6px, 6px, 0, 0);
-	-webkit-box-shadow: 
-		inset 0px 1px 0px rgba(255,255,255,0.4), 
-		inset 0px -1px rgba(0,0,0,0.5)
+	border-top: 1px solid #6dc0a1;	
+	border-bottom: 1px solid #063322;
 }
 	
 footer {
 	background: #2c2c2d -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #2c2c2d), color-stop(1, #1c1d1d));
-	
-	-webkit-box-shadow: inset 0px 1px rgba(0,0,0,0.5);
+	border-top: 1px inset #1c1c1c;
 }
 
-
-
 .title {
 	color: #fff;
-	text-shadow: rgba(0,0,0,0.5) 0 -1px 0px; 
+	text-shadow: 0px -1px 0px rgba(0,0,0,0.5) ; 
 }
+
+article { background-color: #e2e2e2; }
+	
+	article .title {
+    	color: #797979;
+    	text-shadow: 0px 1px 0px #fff;
+	}
 /* @end */
 
 /* @group <nav> */
-nav a {
-	color: rgba(0,0,0,0.5);
-	//text-shadow: rgba(255,255,255,0.35) 0 1px 1px;
-}
+nav a { color: rgba(0,0,0,0.5); }
 
-nav a.current {
-	color: #fff;
-	text-shadow: 0px 1px 0px #000 !important;
-}
-
-.toolbar {
-    //background: #f00;
-    box-shadow: inset 0px 1px #1c1c1c;
-}
-
-.toolbar a {
-    //line-height: 44px;
-}
+nav a.current { color: #fff; }
 
 .toolbar a.current{
 	background: #1c1c1c;
-	color: #fff;
-	
 	box-shadow: inset 0px 0px 8px #101010;
 	text-shadow: 0px 1px 4px #000;
-}
-
-.toolbar .bubble {
-    text-shadow: none;
-}
-	
+}	
 /* @end */
 
 /* @group <aside> */
 aside {
     background: #252525;
-	-webkit-box-shadow: inset -1px 0px 0px #000, inset -4px 0px 8px rgba(0,0,0, 0.5);
-}
-
-aside a{
-	color: #fff !important;
-    text-shadow: 0px 1px 0px #000 !important;
-    border-bottom: 1px inset rgba(0,0,0,0.3);
-    border-top: 1px inset rgba(255,255,255,0.1);
-}
-
-aside a.current {
-	background: rgba(255,255,255,0.1);
-}
-
-aside a .icon {
-	opacity: 0.5;
-}
-
-aside .anchor {
-    background: #151515;
-	color:  #666;
+	box-shadow: inset -1px 0px 8px #000;
 }
+	aside a {
+		color: #fff;
+	    text-shadow: 0px 1px 0px #000;    
+	    border-bottom: 1px inset #101010;
+		border-top: 1px inset #868686;
+	}
+	
+	aside a.current { 
+		background: #1c1c1c;
+		box-shadow: inset 0px 0px 8px #101010;
+		border-top: 1px inset #1c1c1c;
+	}
+	
+	aside a .icon { 
+		text-shadow: none; 
+		color: #7a7a7a;
+	}
+	
+	aside .anchor {
+	    background: #101010;
+		color:  #7a7a7a;
+	}
 
 /* @end */
 
@@ -116,12 +93,15 @@ aside .anchor {
 	
 	.list li:last-child { border-bottom: none; }
 	
+	.indented ul {
+    	border: 1px solid #c5c5c5;
+	}
+	
 	.list .darker {
 		background-color: #2c2c2d;	
 		color: #fff;
 		text-shadow: 0px 1px 0px #000;
 	}
-	
 		.list li.darker a{ color: #fff !important; }
 	
 	.list .dark {
@@ -130,7 +110,7 @@ aside .anchor {
 		text-shadow: 0px 1px 0px #fff;
 	}
 
-	.list small, .list .onright {
+	.list small, .list .onright:not(.bubble) {
 		color: #999;
 	}
 	
@@ -145,12 +125,6 @@ aside .anchor {
 	
 	.list .toolbar {
 		border-bottom-color: rgba(0,0,0,0.2);
-	}
-
-	.list .bubble {
-		color: #fff; 
-		text-shadow: 0 -1px 0 rgba(0,0,0,.3);
-		box-shadow: inset 0px 0px 1px #000;
 	}	
 	
 	.list .arrow:before {
@@ -166,18 +140,15 @@ aside .anchor {
 			color: #333;
 			text-shadow: none !important;
 		}
-
 /* @end */
 
 /* @group widgets */
 
-/* @group <section>.splash */
 .splash article { 
 	background: #2c2c2d -webkit-gradient(linear, left top, left bottom, color-stop(0.25, #2c2c2d), color-stop(1, #1c1d1d)) !important;
 	color: #fff; 
 	text-shadow: rgba(0,0,0,0.5) 0 1px 1px;
 }
-/* @end */
 
 /* @group <inputs> */
 input, textarea, select {
@@ -198,14 +169,11 @@ input:focus, textarea:focus, select:focus {
 	.border-radius(0 2px 2px 0);
 }
 /* @end */
-/* @end */
 
-/* @group Article */
-
-article .title {
-    color: #797979;
-    text-shadow: 0px 1px 0px #fff;
+.bubble {
+	color: #fff;
+	text-shadow: none;
+	box-shadow: inset 0px 0px 2px rgba(0,0,0,0.7);
 }
-    		
-
+	.bubble.count { background: #e33100; }
 /* @end */

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

@@ -37,8 +37,8 @@ a.button:active {
 }
 
 /* @group .button */
-a.button{background-color: #1d563f;}
-a.button:active{background-color: rgba(0,0,0,0.5);}
+a.button{ background-color: #1d563f; }
+a.button:active{ background-color: rgba(0,0,0,0.5); }
 /* @end */
   
 a.button:disabled, a.button.disabled {

src/stylesheets/less/Lungo.widgets.less

@@ -51,10 +51,8 @@ section.copyright img{
 }
 /* @end */
 
-
-
 .bubble {
-	padding: 3px 4px;
+	padding: 2px 4px 3px;
 	.border-radius(2px);		
 	font-size: 0.8em;
 	font-weight: bold;