Going LIte

browser/styles/finder/index.styl

@@ -4,22 +4,27 @@
 global-reset()
 @import '../shared/*'
 
+iptBgColor = #E6E6E6
+iptFocusBorderColor = #369DCD
+
 body
   font-family "Lato"
   color textColor
   font-size fontSize
+  width 100%
+  height 100%
+  overflow hidden
 
 .Finder
   absolute top bottom left right
   .FinderInput
-    position absolute
-    top 11px
-    left 11px
-    right 11px
+    padding 11px
     margin 0 auto
-    height 44px
+    height 55px
     box-sizing border-box
     border-bottom solid 1px borderColor
+    background-color iptBgColor
+    z-index 200
     input
       display block
       width 100%
@@ -29,9 +34,9 @@ body
       height 33px
       border-radius 5px
       box-sizing border-box
-      border-radius 16.5px
+      border-radius 5px
       &:focus, &.focus
-        border-color brandBorderColor
+        border-color iptFocusBorderColor
         outline none
   .FinderList
     absolute left bottom
@@ -40,6 +45,7 @@ body
     box-sizing border-box
     width 250px
     overflow-y auto
+    z-index 0
     &>ul>li
       .articleItem
         padding 10px
@@ -60,25 +66,29 @@ body
     absolute right bottom
     top 55px
     left 250px
+    box-shadow 0px 0px 10px 0 #CCC
+    z-index 100
     .header
       absolute top left right
-      height 44px
+      height 55px
       box-sizing border-box
       padding 0 10px
       border-bottom solid 1px borderColor
-      line-height 44px
-      font-size 1.3em
+      line-height 55px
+      font-size 18px
       white-space nowrap
       text-overflow ellipsis
       overflow-x hidden
     .content
-      .ace_editor, .marked
-        position absolute
-        top 49px
-        left 5px
-        right 5px
-        bottom 5px
-        box-sizing border-box
-      .marked
+      position absolute
+      top 55px
+      padding 10px
+      bottom 0
+      left 0
+      right 0
+      box-sizing border-box
+      overflow-y auto
+      .MarkdownPreview
         marked()
-        overflow-y auto
+      .CodeEditor
+        absolute top bottom left right

browser/styles/main/HomeContainer/components/ArticleDetail.styl

@@ -1,9 +1,10 @@
 noTagsColor = #999
+iptFocusBorderColor = #369DCD
 
 .ArticleDetail
   absolute right bottom
   top 60px
-  left 510px
+  left 450px
   padding 10px
   background-color #E6E6E6
   border-top 1px solid borderColor
@@ -79,25 +80,52 @@ noTagsColor = #999
   &.edit
     .detailInfo
       .left
-        .Select
-          .Select-control
-            border none
-            background-color transparent
-        .folder.Select
+        .folder
+          border none
           width 150px
-          .Select-control
-            &:hover
-              background-color darken(white, 5%)
-          &.is-focused
-            .Select-control
-              background-color white
-        .tags.Select
-          .Select-control
-            white-space nowrap
-            overflow-x auto
-            position relative
-            .Select-arrow-zone, .Select-arrow
-              display none
+          height 27px
+          outline none
+          background-color darken(white, 5%)
+          &:hover
+            background-color white
+        .TagSelect
+          white-space nowrap
+          overflow-x auto
+          position relative
+          margin-top 5px
+          noSelect()
+          .tagItem
+            background-color brandColor
+            border-radius 2px
+            color white
+            margin 0 2px
+            padding 0
+            button.tagRemoveBtn
+              color white
+              border-radius 2px
+              border none
+              background-color transparent
+              padding 4px 2px
+              border-right 1px solid #E6E6E6
+              font-size 8px
+              line-height 12px
+              transition 0.1s
+              &:hover
+                background-color lighten(brandColor, 10%)
+            .tagLabel
+              padding 4px 4px
+              font-size 12px
+              line-height 12px
+          input.tagInput
+            background-color white
+            outline none
+            border-radius 2px
+            border 1px solid borderColor
+            transition 0.1s
+            &:focus
+              border-color iptFocusBorderColor
+
+
       .right
         button
           cursor pointer

browser/styles/main/HomeContainer/components/ArticleList.styl

@@ -4,7 +4,7 @@ articleItemColor = #777
 .ArticleList
   absolute bottom
   top 60px
-  left 260px
+  left 200px
   width 250px
   border-top 1px solid borderColor
   border-right 1px solid borderColor

browser/styles/main/HomeContainer/components/ArticleNavigator.styl

@@ -2,8 +2,7 @@ articleNavBgColor = #353535
 
 .ArticleNavigator
   background-color articleNavBgColor
-  absolute top bottom
-  left 60px
+  absolute top bottom left
   width 200px
   border-right 1px solid borderColor
   color white

browser/styles/main/HomeContainer/components/ArticleTopBar.styl

@@ -11,7 +11,7 @@ infoBtnActiveBgColor = #3A3A3A
 
 .ArticleTopBar
   absolute top right
-  left 260px
+  left 200px
   height 60px
   background-color bgColor
   &>.left
@@ -79,8 +79,6 @@ infoBtnActiveBgColor = #3A3A3A
       border-radius 11px
       border none
       transition 0.1s
-      &:nth-child(1)
-        right 109px
       &:hover
         background-color infoBtnActiveBgColor
 

browser/styles/mixins/marked.styl

@@ -1,4 +1,7 @@
 marked()
+  h1, h2, h3, h4, h5, h6, p
+    &:first-child
+      margin-top 0
   hr
     border-top none
     border-bottom solid 1px borderColor