Enhaced buttons

src/stylesheets/lungo.layout.nav.styl

@@ -14,7 +14,7 @@ nav
   header &
     & a, button
       position: relative
-      padding: 0 0.75em !important
+      text-align: center
       float: left
       height: HEADER_HEIGHT
       min-width: HEADER_HEIGHT
@@ -29,8 +29,7 @@ nav
       line-height: FONT_SIZE_LARGE
 
     & .loading
-      margin-top: .5em
-      font-size: 1.6em
+      font-size: 1.5em
       & + .icon
         display: none
 
@@ -110,7 +109,6 @@ nav
           line-height: 1.0em
 
 
-
   /* ========================================================================= */
   /* ================================ FOOTER ================================= */
   /* ========================================================================= */

src/stylesheets/lungo.widget.button.styl

@@ -25,7 +25,7 @@
     & .icon + abbr
       position: relative
       left: 0.3em
-      top: 0.7em
+      top: 0.5em
       float: right
 
   article &

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

@@ -11,7 +11,7 @@ nav
   section header > &
     &:not(.on-right)
       & a, button
-        color: WHITE
+        color: lighten(THEME, 90%)
     &.on-right
       & a, button
         color: lighten(THEME, 50%)
@@ -24,22 +24,16 @@ nav
       text-shadow: 0 1px darken(ASIDE, 10%)
 
   header > &
-    & a, button
-      text-shadow: 0 1px darken(THEME, 10%)
-      transition text-shadow TRANSITION_time TRANSITION_easing
+    a, button
       &:active, &.active
-        color: WHITE
-        text-shadow: 0 0 0.5em WHITE
+        color: WHITE !important
+        text-shadow: 0 0 1em WHITE
 
   section > footer > & > a, &[data-control=groupbar] > a
     color: NAV_LINK
     transition box-shadow TRANSITION_time TRANSITION_easing
-    & > .icon
-      transition text-shadow TRANSITION_time TRANSITION_easing
     &.active
       color: NAV_LINK_ACTIVE
-      & > .icon
-        text-shadow: 0 0 2em NAV_LINK_ACTIVE
 
   section > &[data-control=groupbar] > a.active
       box-shadow inset 0 -3px 0 THEME

src/stylesheets/theme/theme.widget.button.styl

@@ -12,10 +12,14 @@ article
     color: #fff !important
     -webkit-font-smoothing: antialiased
     border-radius BORDER_radius
+
+    box-shadow: inset 0 -1px rgba(0,0,0,0.1), 0 1px rgba(0,0,0,0.075)
+    text-shadow:  0 1px rgba(0,0,0,0.1)
+
     &:hover
-      box-shadow: inset 0 0 5em rgba(255,255,255,0.15)
+      box-shadow: inset 0 0 5em rgba(0,0,0,0.1), inset 0 -1px rgba(0,0,0,0.15), 0 1px rgba(0,0,0,0.075)
     &:active
-      box-shadow inset 0 0 5em rgba(0,0,0,0.3)
+      box-shadow inset 0 0 5em rgba(0,0,0,0.2), inset 0 1px rgba(0,0,0,0.2)
 
     & .icon
       opacity: 0.65