change planet body layout

browser/styles/main/components/SideNavigator.styl

@@ -1,50 +1,22 @@
 .SideNavigator
-  absolute top bottom left
+  absolute bottom left
+  top 65px
   width 200px
   border-right solid 1px highlightenBorderColor
   padding 10px
   box-sizing border-box
-  .nav-header
-    clearfix()
-    margin-bottom 15px
-    .planet-name
-      float left
-      line-height 30px
-      font-size 1.1em
-    .menu-btn
-      float right
-      display block
-      font-size 0.8em
-      color lightButtonColor
-      border solid 2px lightButtonColor
-      box-sizing border-box
-      circle()
-      background-image none
-      background-color transparent
-      width 30px
-      height 30px
-      text-align center
-      cursor pointer
-      transform scale(0.8)
-      &:active, &.active, &:hover, &.hover
-        background-color lightButtonColor
-        color white
   nav
     a
       display block
-      position relative
-      right 0px
       box-sizing border-box
-      width 190px
       padding 15px 15px
       margin 10px 0
+      border-radius 10px
       text-decoration none
-      border-radius left 10px
       background-color transparent
       color textColor
       transition 0.1s
       &:hover, &.hover
         background-color hoverBackgroundColor
       &:active, &.active
-        background-color brandColor
-        color white
+        color brandColor

browser/styles/main/containers/SnippetContainer.styl

@@ -7,14 +7,9 @@
     absolute top bottom left
     width 250px
     border-right solid 1px highlightenBorderColor
-    .search
-      border-bottom solid 1px borderColor
-      padding 5px
-      margin 0
 
     &>ul
-      absolute bottom left right
-      top 44px
+      absolute top bottom left right
       overflow-y auto
       li
         border-bottom solid 1px borderColor
@@ -31,6 +26,8 @@
           font-size 0.8em
         &:hover, &.hover
           background-color hoverBackgroundColor
+          &:active, &.active
+            background-color white
         &:active, &.active
           border solid 2px brandBorderColor
           padding 9px 9px 8px

browser/styles/main/index.styl

@@ -20,15 +20,20 @@ h4
   font-size 1.15em
 a
   color brandColor
-  &:visited{
+  &:hover
+    color darken(brandColor, 15%)
+  &:visited
     color brandColor
-  }
 
 hr
   border-top none
   border-bottom solid 1px borderColor
   margin 25px 0
 
+button
+  &:focus, &.focus
+    outline none
+
 .text-center
   text-align center
 
@@ -38,6 +43,7 @@ hr
     display block
     margin-bottom 5px
 
+
 .block-input, .inline-input
   border solid 1px borderColor
   padding 0 15px
@@ -45,6 +51,11 @@ hr
   height 33px
   border-radius 5px
   box-sizing border-box
+  &:focus, &.focus
+    border solid 1px brandBorderColor
+    outline none
+  &.circleInput
+    border-radius 16.5px
 
 .block-input
   display block
@@ -60,7 +71,6 @@ textarea.block-input
   border-radius 5px
   padding 5px
 
-
 #content
   fullsize()
 
@@ -73,26 +83,41 @@ textarea.block-input
     margin 5px auto 25px
 
 .PlanetNavigator
-  background-color #032B35
-  color white
+  background-color planetNavBgColor
   absolute left top bottom
   width 50px
   text-align center
   box-sizing border-box
+  a.userConfig
+    display block
+    width 50px
+    height 50px
+    background-color black
+    img
+      transition 0.1s
+      opacity 0.6
+    box-sizing border-box
+    &.active, &:active, &.focus, &:focus, &.hover, &:hover
+      img
+        opacity 1
+
   ul>li
     padding 10px 3px
-    border-bottom solid 1px invBorderColor
+    .shortCut
+      margin-top 5px
+      color lighten(textColor, 5%)
+      font-size 0.8em
     &.active
-      background-color brandColor
       a
-        background-color white
+        background-color planetAnchorActiveBgColor
+        color planetAnchorActiveColor
     a
       display block
       width 44px
       height 44px
       text-align center
-      background-color #4D4D4D
-      color black
+      background-color planetAnchorBgColor
+      color planetAnchorColor
       line-height 44px
       font-size 1.1em
       cursor pointer
@@ -104,6 +129,28 @@ textarea.block-input
       circle()
       width 44px
       height 44px
+  button.newPlanet
+    display block
+    margin 0 auto
+    width 30px
+    height 30px
+    circle()
+    border solid 2px lightButtonColor
+    color lightButtonColor
+    text-align center
+    font-size 1
+    background-image none
+    background-color transparent
+    box-sizing border-box
+    absolute left bottom right
+    bottom 15px
+    &:hover, &.hover, &:focus, &.focus
+      border-color darken(lightButtonColor, 25%)
+      color darken(lightButtonColor, 25%)
+    &:active, &.active
+      border-color darken(brandBorderColor, 10%)
+      background-color brandColor
+      color white
 
 .PlanetContainer
   fullsize()
@@ -111,7 +158,68 @@ textarea.block-input
   absolute top bottom right
   left 50px
 
+.PlanetHeader
+  absolute left right top
+  overflow-y hidden
+  height 65px
+  background-color white
+  border-bottom solid 1px borderColor
+  box-sizing border-box
+  padding 5px 15px
+  clearfix()
+  .planetName
+    line-height 30px
+    font-size 2em
+    color brandColor
+    line-height 55px
+    padding 0 20px
+  .menuBtn
+    display inline-block
+    position relative
+    top -5px
+    font-size 0.8em
+    color lightButtonColor
+    border solid 1px lightButtonColor
+    box-sizing border-box
+    circle()
+    background-image none
+    background-color transparent
+    width 30px
+    height 30px
+    text-align center
+    cursor pointer
+    transition 0.1s
+    transform scale(0.8)
+    &:focus, &.focus
+      outline none
+    &:hover, &.hover, &:focus, &.focus
+      border-color darken(lightButtonColor, 25%)
+      color darken(lightButtonColor, 25%)
+    &:active, &.active
+      border-color darken(brandBorderColor, 10%)
+      background-color brandColor
+      color white
+  .searchInput
+    display inline-block
+    position relative
+    top -3px
+    margin-left 15px
+    input
+      padding-left 32px
+    .fa
+      position absolute
+      top 7px
+      left 10px
+  .downloadBtn
+    position relative
+    float right
+    top 5px
+    padding 7px 25px
+    box-sizing border-box
+    line-height 30px
 
-.Screen
-  absolute top bottom right
+
+.PlanetBody
+  absolute bottom right
   left 200px
+  top 65px

browser/styles/shared/btn.styl

@@ -7,7 +7,6 @@
   border-radius 22px
   box-sizing border-box
   font-size 1.1em
-  font-weight 600
   transition 0.1s
   cursor pointer
   margin 0 5px
@@ -21,6 +20,7 @@
   display inline-block
   width 44px
   padding 0
+  border-width 1px
 
 .btn-sm
   height 32px
@@ -32,13 +32,22 @@
   border-color brandBorderColor
   background-color transparent
   color brandColor
-  &:hover, &.hover, &:active, &.active
-    color white
+  &:hover, &.hover, &:focus, &.focus
+    border-color darken(brandBorderColor, 10%)
+    color darken(brandColor, 10%)
+  &:active, &.active
     background-color brandColor
+    color white
 
 .btn-default
   border-color lightButtonColor
   background-color transparent
   color lightButtonColor
-  &:hover, &.hover, &:active, &.active
-    background-color lighten(lightButtonColor, 75%)
+
+  &:hover, &.hover, &:focus, &.focus
+    border-color darken(lightButtonColor, 25%)
+    color darken(lightButtonColor, 25%)
+  &:active, &.active
+    border-color darken(brandBorderColor, 10%)
+    background-color brandColor
+    color white

browser/styles/vars.styl

@@ -7,9 +7,19 @@ buttonBorderColor = #4C4C4C
 
 lightButtonColor = #898989
 
+
+
+hoverBackgroundColor= transparentify(#444, 3%)
+
+
+// v0.2.0
+textColor = #4D4D4D
+backgroundColor= white
+
 brandColor = #2BAC8F
 
-textColor = #434343
-
-backgroundColor= white
-hoverBackgroundColor= transparentify(#444, 7%)
+planetNavBgColor = #ECECEC
+planetAnchorColor = #979797
+planetAnchorBgColor = #BEBEBE
+planetAnchorActiveColor = textColor
+planetAnchorActiveBgColor = white