Optimized components

src/stylesheets/lungo.base.styl

@@ -144,3 +144,8 @@ table
 th, td, caption
   vertical-align: top
   text-align: left
+
+@media="all"
+  ::-webkit-scrollbar
+    width: 1px
+    height: 1px

src/stylesheets/lungo.layout.nav.styl

@@ -27,23 +27,18 @@ nav
       & > .icon
         font-size: 1.7em
 
+    & .tag
+      position: relative
+      top:  -1em
+      left: -1em
+      margin-right: -20px
+
     // @TODO
-    // & .tag
-    //   position: relative
-    //   top:  -12px
-    //   left: -12px
-    //   margin-right: -20px
-
-    // & abbr
-    //   font-size: FONT_SIZE_SMALL
-    //   font-weight: 700
-    //   display: block
-
-    // & .loading
-    //   margin-top: .5em
-    //   font-size: 1.6em
-    //   & + .icon
-    //     display: none
+    & .loading
+      margin-top: .5em
+      font-size: 1.6em
+      & + .icon
+        display: none
 
   &[data-control=groupbar], footer &
     display-box()

src/stylesheets/lungo.layout.styl

@@ -47,18 +47,23 @@ body
 
       & > .title
         z-index: -1
-        margin: 0 4px
+        margin: 0 0.25em
         float: left
-        // font-size: FONT_SIZE_LARGE
+        font-size: FONT_SIZE_BIG
         box-flex(1)
 
         &.centered
           position: absolute
-          left: 32px
-          right: 32px
+          left: 2em
+          right: 2em
           text-align: center
           display: inline-block
 
+        & > .tag
+          position: relative
+          top: -0.1em
+          left: 0.25em
+
       & > img.title
         PAD = 18px
         height: (HEADER_HEIGHT - PAD)

src/stylesheets/lungo.media.phone.styl

@@ -1,10 +1,6 @@
 
 /* ==== Any phone ==== */
 
-// media="all"
-//   ::-webkit-scrollbar
-//     width: 1px
-//     height: 1px
 
 @media only screen and (max-width: 767px)
   body

src/stylesheets/lungo.widget.button.styl

@@ -20,12 +20,14 @@
 
   header &
     padding: 0 0.5em
-    height: HEIGHT = 34px
-    min-width: HEIGHT
+    height: BUTTON_HEIGHT
+    min-width: BUTTON_HEIGHT
     font-size: 1.0em
-    line-height: HEIGHT
+    line-height: BUTTON_HEIGHT
     & > .icon
       font-size: 1.4em
+    & > abbr
+      font-size: FONT_SIZE_SMALL
     & .icon + abbr
       position: relative
       left: 0.2em

src/stylesheets/lungo.widget.empty.styl

@@ -7,8 +7,8 @@ body > section > article > .empty
   & > *
     display: block
   & > .icon
-    font-size: S = 120px
-    line-height: S
+    font-size: S = 7.5em
+    line-height: 1em
   & > strong
     font-size: FONT_SIZE_BIG
     line-height: FONT_SIZE_BIG

src/stylesheets/theme/__init.styl

@@ -21,3 +21,5 @@ BORDER_radius       = 2px
 FORM_color          = darken(#e5e5e5, 5%)
 FORM_border         = 2px
 FORM_border_radius  = (BORDER_radius * FORM_border)
+/* -------------------------- BUTTON -------------------------- */
+BUTTON_HEIGHT       = 34px

src/stylesheets/theme/theme.layout.nav.styl

@@ -11,9 +11,10 @@ nav
   section > header > &
     & a:not(.button)
       color: darken(THEME, 35%)
-      text-shadow 0 1px 0 lighten(THEME, 25%)
       &:active
         color: darken(THEME, 50%)
+      & > .icon
+        text-shadow 0 1px 0 lighten(THEME, 25%)
 
   section > footer > & > a, &[data-control=groupbar] > a
     color: NAV_LINK

src/stylesheets/theme/theme.widget.styl

@@ -11,20 +11,21 @@
 .tag:not(.icon)
   color: #fff
   border-radius BORDER_radius
-  font-weight: 700 !important
+  font-weight: 700
   &.count
-    background-color: THEME
-  header .count
-    background-color: THEME-dark !important
-  footer &
-    box-shadow inset 0 1px 1px rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.5)
+    background-color: DANGER
+    box-shadow inset 0 0.1em 0.1em rgba(255,255,255,0.3), 0 0.1em 0.2em rgba(0,0,0,0.5)
+    footer a.active &, [data-control="groupbar"] a.active &
+      background-color: DANGER
+    footer a:not(.active) &, [data-control="groupbar"] a:not(.active) &
+      background-color: lighten(COLOR, 20%)
 
 
 /* =================================  PULL  =============================== */
 body > section > [data-control="pull"]
   background-color: darken(BACKGROUND, 15%)
   color: darken(BACKGROUND, 50%)
-  text-shadow: 0 1px 1px BACKGROUND
+  text-shadow: 0 0.1em 1em BACKGROUND
   & > strong
     font-weight: 700
   &.rotate