New stylesheet for .list elements

src/stylesheets/Lungo.layout.list.less

@@ -13,26 +13,51 @@
 .list {
     font-size: 1.15em;
 
-    & a {
-        display: block;
-    }
-
-    & li:not(.toolbar) {
-        padding: 8px 6px 8px 8px;
+    & li {
         list-style-type: none;
 
-        & .icon, & img {
+        &.padding {
+            padding: 8px 6px;
+        }
+
+        & a {
+            position: relative;
+            display: block;
+            padding: 8px;
+        }
+
+        &.arrow > a::after{
+            content: '';
+            display: block;
+            width: 6px;
+            height: 6px;
+            border-right: 3px solid #D0D0D8;
+            border-top: 3px solid #D0D0D8;
+            position: absolute;
+            right: 12px;
+            top: 43%;
+            -webkit-transform: rotate(45deg);
+            -moz-transform: rotate(45deg);
+            -o-transform: rotate(45deg);
+            transform: rotate(45deg);
+        }
+
+         & .icon, & img {
             float: left;
             width: 32px;
             height: 32px;
-            margin-right: 6px;
-            font-size: 36px;
-            font-weight: normal;
+            margin-right: 8px;
+
+            font-size: 46px;
+            line-height: 32px;
+            text-align: center;
         }
-    }
 
-    & .icon, & img {
-        display: inline-block;
+        &.thumb img {
+           margin: -8px 8px -8px -8px;
+           height: 47px;
+           width:47px;
+        }
     }
 
     & small {
@@ -40,9 +65,29 @@
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
-        font-size: 0.85em;
+        font-size: 0.75em;
     }
 
+    & .bubble {
+        padding-left: 5px;
+        padding-right: 5px;
+    }
+
+    & .onright {
+        font-size: 0.75em;
+        font-weight: bold;
+    }
+
+    & .onright .icon, & small .icon {
+        height: 13px;
+        width: auto;
+        //width: 13px;
+        margin-right: 1px;
+        font-size: 1.4em !important;
+        line-height: 0.8em;
+    }
+
+    //@todo: Refactor li.anchor stylesheet;
     & li.anchor {
         font-size: 0.85em;
         padding: 4px 4px 3px;
@@ -62,37 +107,4 @@
         font-size: 0.85em;
         font-weight: bold;
     }
-
-    & .search {
-        & input { width: 88%; }
-
-        & a {
-            float: right;
-            height: 30px;
-            margin: 0px;
-            padding: 0px;
-
-            & icon {
-                height: 12px;
-                width: 30px;
-                margin: 0px;
-                font-size: 1.2em;
-                font-weight: normal;
-            }
-        }
-    }
-
-    & .onright {
-        font-size: 0.75em;
-        line-height: 16px;
-    }
-
-    & .onright .icon, & small .icon {
-        font-size: 1.4em !important;
-        line-height: 0.9em;
-        height: 13px !important;
-        width: 13px !important;
-        margin-right: 1px !important;
-        text-align: center;
-    }
-}
+}

src/stylesheets/Lungo.theme.default.less

@@ -116,15 +116,15 @@ header nav {
 /* @end */
 
 /* @group <aside> */
-a {
-}
+
 aside {
-    color:  #FFF;
+    color:  #fff;
     background: #323d4c;
 		
     & header, footer {
 		.box-shadow(~"inset 0 1px 0 #434b55, inset 0 -1px 0 #384352");
-    	.linear-gradient(top, ~',#2c3440 0%', ~',#1b232c 100%');
+    	.linear-gradient(top, ~',#2c3440 0%', ~',#242d38 100%');
+    	
 	}
 	
 	& .list li {
@@ -377,21 +377,19 @@ input[type="range"] {
 /* @end */
 .bubble {
     color: #fff;
-    .border-radius(7px);
-    text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
-    //border: solid 1px rgba(255,255,255,0.8);
+    .border-radius(8px);
+    text-shadow: 0 0 1px rgba(0,0,0,1);
 
-    &.count { .linear-gradient(top, ~','@color-main 0%, ~','@color-main-dark 100%); }
+    &.count { 
+    	.linear-gradient(top, ~','@color-main 0%, ~','@color-main-dark 100%); 
+    	.box-shadow(0 0 2px rgba(0,0,0,0.5);
+    }
 }
     header .bubble.count {
         .linear-gradient(top, ~','@color-secondary 0%, ~','@color-secondary-dark 100%);
     }
 
     .list .bubble{
-		.box-shadow(~'inset 1px 0 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(0,0,0,0.4), inset -1px 0 0 rgba(0,0,0,0.4), inset 0 -1px 0 rgba(0,0,0,0.4)');
-    	border: solid 1px rgba(255,255,255,0.1);
-        padding: 2px 5px;
-
-    	.border-radius(~'30px !important');
+		.box-shadow(~'inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3)');
 	}
 /* @end */

src/stylesheets/Lungo.widgets.less

@@ -48,9 +48,10 @@
 .round { .border-radius(4px); }
 
 .bubble {
-    padding: 1px 3px 1px 3px;
-    height: 14px;
-    font-size: 10px;
+    display: inline-block;
+    padding: 2px 3px;
+    min-width: 12px;
+    font-size: 0.75em;
     font-weight: bold;
-    line-height: 14px;
+    line-height: 13px;
 }

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

@@ -171,7 +171,7 @@ header nav.plain a:active {
 /* @end */
 /* @group <aside> */
 aside {
-  color: #FFF;
+  color: #fff;
   background: #323d4c;
 }
 aside header,
@@ -182,16 +182,16 @@ aside footer {
   -webkit-box-shadow: inset 0 1px 0 #434b55, inset 0 -1px 0 #384352;
   -moz-box-shadow: inset 0 1px 0 #434b55, inset 0 -1px 0 #384352;
   box-shadow: inset 0 1px 0 #434b55, inset 0 -1px 0 #384352;
-  background-image: -webkit-linear-gradient(top ,#2c3440 0% ,#1b232c 100%);
-  background-image: -moz-linear-gradient(top ,#2c3440 0% ,#1b232c 100%);
-  background-image: -ms-linear-gradient(top ,#2c3440 0% ,#1b232c 100%);
-  background-image: -o-linear-gradient(top ,#2c3440 0% ,#1b232c 100%);
-  background-image: linear-gradient(top ,#2c3440 0% ,#1b232c 100%);
-  background-image: -webkit-linear-gradient(top ,#2c3440 0% ,#1b232c 100%);
-  background-image: -moz-linear-gradient(top ,#2c3440 0% ,#1b232c 100%);
-  background-image: -ms-linear-gradient(top ,#2c3440 0% ,#1b232c 100%);
-  background-image: -o-linear-gradient(top ,#2c3440 0% ,#1b232c 100%);
-  background-image: linear-gradient(top ,#2c3440 0% ,#1b232c 100%);
+  background-image: -webkit-linear-gradient(top ,#2c3440 0% ,#242d38 100%);
+  background-image: -moz-linear-gradient(top ,#2c3440 0% ,#242d38 100%);
+  background-image: -ms-linear-gradient(top ,#2c3440 0% ,#242d38 100%);
+  background-image: -o-linear-gradient(top ,#2c3440 0% ,#242d38 100%);
+  background-image: linear-gradient(top ,#2c3440 0% ,#242d38 100%);
+  background-image: -webkit-linear-gradient(top ,#2c3440 0% ,#242d38 100%);
+  background-image: -moz-linear-gradient(top ,#2c3440 0% ,#242d38 100%);
+  background-image: -ms-linear-gradient(top ,#2c3440 0% ,#242d38 100%);
+  background-image: -o-linear-gradient(top ,#2c3440 0% ,#242d38 100%);
+  background-image: linear-gradient(top ,#2c3440 0% ,#242d38 100%);
 }
 aside .list li {
   color: #F0F0F0;
@@ -677,19 +677,19 @@ input[type="range"]:active::-webkit-slider-thumb {
 /* @end */
 .bubble {
   color: #fff;
-  -webkit-border-radius: 7px;
-  -moz-border-radius: 7px;
-  border-radius: 7px;
+  -webkit-border-radius: 8px;
+  -moz-border-radius: 8px;
+  border-radius: 8px;
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
-  -webkit-border-radius: 7px;
-  -moz-border-radius: 7px;
-  border-radius: 7px;
+  -webkit-border-radius: 8px;
+  -moz-border-radius: 8px;
+  border-radius: 8px;
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
+  text-shadow: 0 0 1px #000000;
 }
 .bubble.count {
   background-image: -webkit-linear-gradient(top , #2c8bca 0% , #154f93 100%);
@@ -702,6 +702,12 @@ input[type="range"]:active::-webkit-slider-thumb {
   background-image: -ms-linear-gradient(top , #2c8bca 0% , #154f93 100%);
   background-image: -o-linear-gradient(top , #2c8bca 0% , #154f93 100%);
   background-image: linear-gradient(top , #2c8bca 0% , #154f93 100%);
+  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+  -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+  -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
 }
 header .bubble.count {
   background-image: -webkit-linear-gradient(top , #353b42 0% , #272a2d 100%);
@@ -716,25 +722,11 @@ header .bubble.count {
   background-image: linear-gradient(top , #353b42 0% , #272a2d 100%);
 }
 .list .bubble {
-  -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(0,0,0,0.4), inset -1px 0 0 rgba(0,0,0,0.4), inset 0 -1px 0 rgba(0,0,0,0.4);
-  -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(0,0,0,0.4), inset -1px 0 0 rgba(0,0,0,0.4), inset 0 -1px 0 rgba(0,0,0,0.4);
-  box-shadow: inset 1px 0 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(0,0,0,0.4), inset -1px 0 0 rgba(0,0,0,0.4), inset 0 -1px 0 rgba(0,0,0,0.4);
-  -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(0,0,0,0.4), inset -1px 0 0 rgba(0,0,0,0.4), inset 0 -1px 0 rgba(0,0,0,0.4);
-  -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(0,0,0,0.4), inset -1px 0 0 rgba(0,0,0,0.4), inset 0 -1px 0 rgba(0,0,0,0.4);
-  box-shadow: inset 1px 0 0 rgba(0,0,0,0.4), inset 0 1px 0 rgba(0,0,0,0.4), inset -1px 0 0 rgba(0,0,0,0.4), inset 0 -1px 0 rgba(0,0,0,0.4);
-  border: solid 1px rgba(255, 255, 255, 0.1);
-  padding: 2px 5px;
-  -webkit-border-radius: 30px !important;
-  -moz-border-radius: 30px !important;
-  border-radius: 30px !important;
-  -webkit-background-clip: padding-box;
-  -moz-background-clip: padding;
-  background-clip: padding-box;
-  -webkit-border-radius: 30px !important;
-  -moz-border-radius: 30px !important;
-  border-radius: 30px !important;
-  -webkit-background-clip: padding-box;
-  -moz-background-clip: padding;
-  background-clip: padding-box;
+  -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3);
+  -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3);
+  box-shadow: inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3);
+  -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3);
+  -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3);
+  box-shadow: inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3);
 }
 /* @end */