Enhaced style

src/stylesheets/theme/__init.styl

@@ -1,41 +1,23 @@
 @import "../CSSmethods/vendor.styl"
 
 /* -------------------------- COLOUR -------------------------- */
-BACKGROUND      = #f5f5f5
-COLOR           = #333
-// COLOR           = #34495e
+COLOR           = #292929
 COLOR_theme     = #0093D5
 COLOR_success   = #2ecc71
 COLOR_cancel    = #e74c3c
 COLOR_secondary = #95a5a6
-
-COLOR_contrast            = #222
-
-
+COLOR_contrast  = COLOR
+BACKGROUND      = lighten(COLOR, 95%)
 /* -------------------------- VARIATIONS -------------------------- */
-
-/* ------------------------- COLOUR ------------------------- */
-COLOR_contrast_light      = lighten(COLOR_contrast, 25%)
-COLOR_contrast_dark       = darken(COLOR_contrast, 15%)
-COLOR_contrast_darkest    = darken(COLOR_contrast, 30%)
-
-LIST_color      = lighten(COLOR, 5%)
-LIST_color_2nd  = lighten(COLOR, 35%)
 LIST_border     = lighten(COLOR, 90%)
-
-LIST_active     = lighten(COLOR_theme, 15%)
-
 NAV_LINK        = lighten(COLOR_contrast, 25%)
 NAV_LINK_ACTIVE = #FFF
-
 /* ------------------------- TRANSITION ------------------------- */
 TRANSITION_time        = 400ms
 TRANSITION_easing      = ease
-
 /* ------------------------- RADIUS ------------------------- */
 BORDER_radius   = 2px
 /* -------------------------- FORM -------------------------- */
 FORM_color         = darken(#e5e5e5, 5%)
-// FORM_color         = #34495e
 FORM_border        = 2px
 FORM_border_radius = (BORDER_radius * FORM_border)

src/stylesheets/theme/theme.layout.list.styl

@@ -8,7 +8,6 @@
  */
 
 @import "__init.styl"
-
 .list
   section & li
     background: #fff
@@ -24,23 +23,20 @@
       border-color: COLOR_secondary
 
     &, a
-      color: LIST_color
-      &.anchor
+      &.contrast
         background: COLOR_contrast
-      &.dark
-        background: COLOR_contrast_light
       &.selectable:active, &.theme, &.active
-        background: LIST_active
+        background: lighten(COLOR_theme, 15%)
       &.light
-        background:  LIST_border
-        color: LIST_color_2nd
-      &.dark, &.selectable:active, &.theme, &.anchor
+        background: LIST_border
+        color: lighten(COLOR, 20%)
+      &.contrast, &.selectable:active, &.theme
         &, small, & .right:not(.tag), strong, .arrow::after
           color: #fff
         &.arrow::after
           border-color: #fff
       & small, & .right:not(.tag)
-        color: LIST_color_2nd
+        color: lighten(COLOR, 20%)
 
   &:not(.indented) li
     &.dark, &.theme, &.light
@@ -49,11 +45,11 @@
   aside & li
     background: none
     &:not(:first-child)
-      border-top: solid 1px  COLOR_contrast
+      border-top: solid 1px  lighten(COLOR_contrast, 5%)
     &:not(:last-child)
-      border-bottom: solid 1px COLOR_contrastEST
+      border-bottom: solid 1px darken(COLOR_contrast, 20%)
     &:active
-      background: COLOR_contrast_darkest
+      background: darken(COLOR_contrast, 5%)
     &.active
       background: COLOR_theme
     &.active, &:active
@@ -61,6 +57,6 @@
       & strong, & small, & .icon
         color: #fff
     & strong
-      color: #999
+      color: lighten(COLOR_contrast, 75%)
     & small, .icon
-      color: #666
+      color: lighten(COLOR_contrast, 40%)

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

@@ -30,7 +30,7 @@ nav
     box-shadow inset 0 1px 0 #000, inset 0 2px 0 lighten(COLOR_contrast, 20%)
     &.active
       box-shadow inset 0 0 16px #000
-      background-color: COLOR_contrast_dark
+      background-color: darken(COLOR_contrast, 10%)
 
   aside & a
     color: lighten(COLOR_contrast, 20%)
@@ -38,13 +38,12 @@ nav
       color: lighten(COLOR_contrast, 50%)
 
   &[data-control=menu]
-    COLOR = COLOR_contrast
-    background: COLOR
+    background: COLOR_contrast
     box-shadow 0 2px 0 rgba(0,0,0,0.15)
     &.icons
       background: rgba(0,0,0,0.8)
       & > a
-        color: lighten(COLOR, 35%)
+        color: lighten(COLOR_contrast, 35%)
         &:active > .icon
           text-shadow: 0 0 32px #fff
         & > .icon
@@ -52,13 +51,13 @@ nav
     &:not(.icons)
       & > a
         color: #fff
-        text-shadow 0 1px 0 #111
-        border-bottom: 1px solid darken(COLOR, 40%)
-        border-top: 1px solid lighten(COLOR, 5%)
+        // text-shadow 0 1px 0 #111
+        border-bottom: 1px solid darken(COLOR_contrast, 20%)
+        border-top: 1px solid lighten(COLOR_contrast, 5%)
         &:active
-          background: #111
+          background: darken(COLOR_contrast, 15%)
           border-color: transparent
         & > .icon
-          color: lighten(COLOR, 25%)
+          color: lighten(COLOR_contrast, 25%)
     & > a
-      font-weight: 700
+      font-weight: 600

src/stylesheets/theme/theme.layout.styl

@@ -11,18 +11,17 @@
 
 body > section
   background-color: COLOR_contrast
+  &, & a
+    color: COLOR
   & > header
     C = COLOR_theme
     background-color: COLOR_theme
     box-shadow 0 2px 0 rgba(0,0,0,0.15), inset 0 1px 0 lighten(C, 20%), inset 0 -1px 0 darken(C, 20%)
     color: #fff
     border-radius (BORDER_radius * 2.5) (BORDER_radius * 2.5) 0 0
-    & > .title
-      font-weight: 700
 
   & > footer, & nav[data-control=groupbar]
     background-color: COLOR_contrast
-    // box-shadow inset 0 3px 0 COLOR_contrast_dark
   & > article, & > [data-control="pull"]
     background-color: BACKGROUND
     &.splash
@@ -33,12 +32,14 @@ body > section
     &.right
       box-shadow 1px 0 2px rgba(0,0,0,0.2)
 
-COLOR_contrastEST = darken(COLOR_contrast_darkest, 15%)
 body > aside
-  background-color: COLOR_contrast_dark
+  background-color: COLOR_contrast
   color: #fff
+  C = darken(COLOR_contrast, 20%)
   & > header, > footer
-    background-color: COLOR_contrast_darkest
+    background-color: C
   & > header
-    box-shadow 0 1px 3px rgba(0,0,0,0.25), inset 0 1px 0 COLOR_contrast, inset 0 -1px 0 COLOR_contrastEST
+    box-shadow 0 2px 0 rgba(0,0,0,0.15), inset 0 1px 0 lighten(C, 10%), inset 0 -1px 0 darken(C, 20%)
 
+body > * > header > .title
+  font-weight: 700

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

@@ -23,7 +23,8 @@ article
   & .button, button
     color: #fff !important
     box-shadow inset 0 1px 0 rgba(255,255,255,0.15), 0 1px 1px rgba(0,0,0,0.15)
-    // border: solid 1px rgba(0,0,0,0.1)
+    border: solid 1px rgba(0,0,0,0.1)
+    text-shadow: 0 1px 0 rgba(0,0,0,0.1)
     &:active
       box-shadow inset 0 0 128px rgba(0,0,0,0.25)
       border-color: none
@@ -46,3 +47,4 @@ article
       background: FORM_color
       color: #999 !important
       box-shadow: none !important
+      text-shadow: none !important

src/stylesheets/theme/theme.widget.styl

@@ -26,9 +26,9 @@
 
 /* ===============================  MESSAGE  =============================== */
 body > section > article > .empty
+  & > .icon, > strong, > small
+    text-shadow: 0 1px 0 lighten(BACKGROUND, 95%)
   & > .icon, > small
     color: darken(BACKGROUND, 20%)
-    text-shadow: 0 1px 0 lighten(BACKGROUND, 90%)
   & > strong
     color: darken(BACKGROUND, 40%)
-    text-shadow: 0 2px 0 lighten(BACKGROUND, 90%)