Merge v0.5.11

Conflicts: browser/main/index.js package.json
2025-12-13 09:46:22 +00:00 · 2016-04-29 12:25:55 +09:00
parent ac7e08ae2c f6208c1324
commit b9fd3b8b7d
33 changed files with 723 additions and 64 deletions
--- a/browser/styles/finder/index.styl
+++ b/browser/styles/finder/index.styl
@@ -3,6 +3,7 @@
@import '../mixins/*'
 global-reset()
@import '../shared/*'
+@import '../theme/*'

 iptBgColor = #E6E6E6
 iptFocusBorderColor = #369DCD
--- a/browser/styles/main/ArticleDetail.styl
+++ b/browser/styles/main/ArticleDetail.styl
@@ -25,7 +25,6 @@ infoButton()
  padding 10px
  background-color #E6E6E6
  border-top 1px solid borderColor
-  border-left 1px solid borderColor
  &.empty
    .ArticleDetail-empty-box
      line-height 72px
--- a/browser/styles/main/ArticleList.styl
+++ b/browser/styles/main/ArticleList.styl
@@ -30,6 +30,8 @@ articleItemColor = #777
        height 20px
        color articleItemColor
        font-size 11px
+        i
+          margin-right 4px
        .folderName
          overflow ellipsis
          display inline-block
--- a/browser/styles/main/ArticleNavigator.styl
+++ b/browser/styles/main/ArticleNavigator.styl
@@ -11,6 +11,7 @@ articleCount = #999
  .userInfo
    height 60px
    display block
+    box-sizing content-box
    border-bottom 1px solid borderColor
    .userProfileName
      color brandColor
--- a/browser/styles/main/index.styl
+++ b/browser/styles/main/index.styl
@@ -7,6 +7,7 @@ global-reset()
@import './ArticleList'
@import './ArticleDetail'
@import './modal/*'
+@import '../theme/*'

 DEFAULT_FONTS = 'Lato', helvetica, arial, sans-serif

--- a/browser/styles/main/modal/CreateNewFolder.styl
+++ b/browser/styles/main/modal/CreateNewFolder.styl
@@ -72,7 +72,7 @@ iptFocusBorderColor = #369DCD
  .confirmBtn
    display block
    position absolute
-    left 180px
+    left 205px
    bottom 44px
    width 240px
    font-size 24px
--- a/browser/styles/main/modal/Preferences.styl
+++ b/browser/styles/main/modal/Preferences.styl
@@ -8,7 +8,7 @@ iptFocusBorderColor = #369DCD
  border-radius 5px
  overflow hidden
  width 720px
-  height 450px
+  height 600px
  &>.header
    absolute top left right
    height 50px
--- a/browser/styles/mixins/marked.styl
+++ b/browser/styles/mixins/marked.styl
@@ -6,7 +6,7 @@ marked()
    background-color alpha(red, 0.1)
    color darken(red, 15%)
    padding 5px
-    margin -5px
+    margin 5px 0
    border-radius 5px
  sup
    position relative
@@ -116,9 +116,7 @@ marked()
    border solid 1px alpha(borderColor, 0.3)
    border-radius 4px
    font-size 0.9em
-    color black
    text-decoration none
-    background-color #F6F6F6
    margin-right 2px
  *:not(a.lineAnchor) + code
    margin-left 2px
@@ -128,14 +126,15 @@ marked()
    border-radius 5px
    overflow-x auto
    margin 0 0 15px
-    background-color #F6F6F6
    line-height 1.35em
    &>code
      margin 0
      padding 0
      border none
      border-radius 0
-      color black
+      &>pre
+        border none
+        margin -5px
  table
    width 100%
    margin 15px 0 25px
--- a/browser/styles/theme/dark.styl
+++ b/browser/styles/theme/dark.styl
@@ -0,0 +1,460 @@
+@import '../vars'
+
+themeDarkBackground = darken(#21252B, 10%)
+themeDarkModal = darken(#21252B, 10%)
+themeDarkList = #282C34
+themeDarkPreview = #282C34
+themeDarkSidebar = darken(#21252B, 10%)
+themeDarkText = #DDDDDD
+themeDarkBorder = lighten(themeDarkBackground, 20%)
+themeDarkTopicColor = #369dcd
+themeDarkTooltip = rgba(0, 0, 0, 0.7)
+themeDarkFocusText = #FFFFFF
+themeDarkFocusButton = lighten(themeDarkTopicColor, 30%)
+themeDarkBoxShadow = alpha(lighten(themeDarkTopicColor, 10%), 0.4);
+themeDarkTableOdd = themeDarkPreview
+themeDarkTableEven = darken(themeDarkPreview, 10%)
+themeDarkTableHead = themeDarkTableEven
+themeDarkTableBorder = themeDarkBorder
+themeDarkModalButtonDefault = themeDarkPreview
+themeDarkModalButtonDanger = #BF360C
+
+body[data-theme="dark"]
+  background-color themeDarkBackground
+
+  .Main
+    .ArticleNavigator .userInfo .settingBtn .tooltip,
+    .ArticleNavigator .ArticleNavigator-folders .ArticleNavigator-folders-header .addBtn .tooltip,
+    .ArticleTopBar>.ArticleTopBar-left>.ArticleTopBar-left-search .tooltip,
+    .ArticleTopBar>.ArticleTopBar-left .ArticleTopBar-left-control button.ArticleTopBar-left-control-new-post-button .tooltip
+    .ArticleTopBar>.ArticleTopBar-right>button .tooltip,
+    .ArticleTopBar>.ArticleTopBar-right>.ArticleTopBar-right-links-button-dropdown,
+    .ArticleDetail .ArticleDetail-info .ArticleDetail-info-control>button .tooltip,
+    .ArticleDetail .ArticleDetail-info .ArticleDetail-info-control .ShareButton-open-button .tooltip {
+      background-color themeDarkTooltip
+    }
+
+    .ArticleNavigator
+      border-color lighten(themeDarkBorder, 10%)
+      background-color themeDarkSidebar
+
+      .userInfo
+        border-color themeDarkBorder
+
+        .userName
+          color themeDarkText
+
+      .ArticleNavigator-folders
+        border-color lighten(themeDarkBorder, 10%)
+        background-color themeDarkSidebar
+
+        .ArticleNavigator-folders-header
+          border-color themeDarkBorder
+
+          .title
+            color themeDarkText
+
+        .folderList,
+        .folderList>button
+          color themeDarkText
+
+        .folderList>button
+          transition 0.1s
+
+          &:hover
+            background-color lighten(themeDarkSidebar, 10%)
+
+          &.active,
+          $:active
+            background-color darken(brandColor, 15%)
+
+      .userInfo .settingBtn,
+      .ArticleNavigator-folders .ArticleNavigator-folders-header .addBtn
+        transition 0.1s
+        color themeDarkText
+        border none
+        background-color lighten(themeDarkBackground, 10%)
+
+      .userInfo .settingBtn:hover,
+      .ArticleNavigator-folders .ArticleNavigator-folders-header .addBtn:hover
+        background-color themeDarkTopicColor
+
+      .userInfo .settingBtn:focus,
+      .ArticleNavigator-folders .ArticleNavigator-folders-header .addBtn:focus
+        background-color darken(themeDarkTopicColor, 20%)
+
+    .ArticleTopBar
+      color themeDarkText
+      background-color themeDarkBackground
+
+      .ArticleTopBar-left
+        .ArticleTopBar-left-search input
+          color themeDarkText
+          background-color lighten(themeDarkBackground, 10%)
+
+        .ArticleTopBar-left-control button.ArticleTopBar-left-control-new-post-button
+          color themeDarkText
+          background-color lighten(themeDarkBackground, 10%)
+
+          &:hover
+            color themeDarkText
+            background-color themeDarkTopicColor
+
+          &:focus
+            color themeDarkText
+            background-color darken(themeDarkTopicColor, 20%)
+
+      .ArticleTopBar-right
+        &>button
+          color themeDarkText
+          border none
+          background-color lighten(themeDarkBackground, 10%)
+
+          &:hover
+            color themeDarkText
+            background-color themeDarkTopicColor
+
+          &:focus
+            color themeDarkText
+            background-color darken(themeDarkTopicColor, 20%)
+
+    .ArticleList
+      color themeDarkText
+      border-color themeDarkBorder
+      background-color themeDarkList
+
+      .ArticleList-item
+        color themeDarkText
+        background-color themeDarkList
+
+        &:hover
+          background-color lighten(themeDarkList, 5%)
+
+        .ArticleList-item-top
+          .folderName
+            color darken(themeDarkText, 15%)
+
+      .divider
+        border-color themeDarkBorder
+
+    .ArticleDetail
+      color themeDarkText
+      border-color themeDarkBorder
+      background-color themeDarkBackground
+
+      .ArticleDetail-info
+        .ArticleDetail-info-folder
+          color themeDarkText
+          background-color lighten(themeDarkBackground, 10%)
+
+        .ArticleDetail-info-row2 .TagSelect .TagSelect-tags
+          border-color themeDarkBorder
+          background-color themeDarkBackground
+
+          input
+            color themeDarkText
+
+        .ArticleDetail-info-control
+          &>button,
+          & .ShareButton-open-button
+            transition 0.1s
+            color themeDarkText
+            border none
+            background-color lighten(themeDarkBackground, 10%)
+
+          &>button:hover,
+          & .ShareButton-open-button:hover
+            background-color themeDarkTopicColor
+
+          &>button:focus,
+          & .ShareButton-open-button:focus
+            background-color darken(themeDarkTopicColor, 20%)
+
+          & .ShareButton-dropdown
+            color themeDarkText
+            box-shadow 0px 0px 10px 1px themeDarkBoxShadow;
+            border 1px solid themeDarkBorder;
+            background-color themeDarkBackground
+
+          & .ShareButton-dropdown>button
+            color themeDarkText
+
+            &:hover
+              background-color darken(themeDarkTopicColor, 20%)
+
+      .ArticleDetail-panel
+        border-color themeDarkBackground
+
+        .ArticleDetail-panel-header,
+        .ArticleDetail-panel-header .ArticleDetail-panel-header-title input
+          color themeDarkText
+          border-color themeDarkBorder
+          background-color themeDarkPreview
+
+        .ArticleEditor
+          .CodeEditor
+            border-color themeDarkBorder
+            border-radius 0
+
+        &>.ArticleDetail-panel-header .ArticleDetail-panel-header-mode
+          transition 0.1s
+          color themeDarkText
+          background-color lighten(themeDarkBackground, 10%)
+
+          input
+            color themeDarkText
+
+          &.idle
+            border-color themeDarkBorder
+            background-color themeDarkPreview
+
+          &.idle:hover
+            background-color themeDarkTopicColor
+
+          &.edit .ModeSelect-options
+            color themeDarkText
+            border-color themeDarkBackground
+            background-color themeDarkBackground
+
+            .ModeSelect-options-item
+              &:hover
+                color lighten(themeDarkText, 100%)
+                background-color darken(themeDarkTopicColor, 20%)
+
+  .ModalBase
+    .modal
+      color themeDarkText
+      background-color themeDarkModal
+      box-shadow 0px 0px 10px 1px themeDarkBoxShadow;
+
+      input
+        color themeDarkText
+        border-color lighten(themeDarkBackground, 10%)
+        background-color lighten(themeDarkBackground, 10%)
+
+        &:hover
+          border-color themeDarkBorder
+
+        &:focus
+          border-color themeDarkTopicColor
+
+      button
+        &:hover
+          background-color lighten(themeDarkBackground, 10%)
+
+    .CreateNewFolder.modal
+      .closeBtn
+        transition 0.1s
+        border-radius 24px
+        color themeDarkText
+
+        &:hover
+          background-color darken(#BF360C, 10%)
+
+      .confirmBtn
+        background-color darken(brandColor, 10%)
+
+        &:hover
+          background-color brandColor
+
+    .DeleteArticleModal.modal
+      .control
+        button
+          transition 0.1s
+          color themeDarkText
+          border-color lighten(themeDarkModalButtonDefault, 20%)
+          background-color themeDarkModalButtonDefault
+
+          &:hover
+            background-color: lighten(themeDarkModalButtonDefault, 10%)
+
+          &:focus
+            border-color themeDarkTopicColor
+
+          &.danger
+            background-color themeDarkModalButtonDanger
+            border-color lighten(themeDarkModalButtonDanger, 30%)
+
+            &:hover
+              background-color: lighten(themeDarkModalButtonDanger, 10%)
+
+            &:focus
+              border-color lighten(themeDarkModalButtonDanger, 50%)
+
+    .Preferences.modal
+      .sectionInput input,
+      .sectionSelect select
+      .sectionMultiSelect .sectionMultiSelect-input select
+        color themeDarkText
+        border-color lighten(themeDarkBackground, 10%)
+        background-color lighten(themeDarkBackground, 10%)
+
+        &:hover
+          border-color themeDarkBorder
+
+        &:focus
+          border-color themeDarkTopicColor
+
+      .header
+        border-color themeDarkBorder
+        background-color darken(themeDarkModal, 40%)
+
+      .nav
+        border-color themeDarkBorder
+        background-color darken(themeDarkModal, 20%)
+
+        &>button
+          &:hover
+            color themeDarkFocusText
+            background-color lighten(themeDarkModal, 10%)
+
+          &.active,
+          &:active
+            background-color darken(brandColor, 15%)
+
+      .section
+        border-color themeDarkBorder
+
+      &>.content
+        &.AppSettingTab
+          .description
+            code
+              color themeDarkText
+              border-color darken(themeDarkBorder, 10%)
+              background-color lighten(themeDarkPreview, 5%)
+
+        &.FolderSettingTab
+          .folderTable
+            &>div
+              border-color themeDarkBorder
+
+              &:last-child
+                border-color transparent
+
+            &>div.FolderRow
+              .sortBtns button
+                transition 0.1s
+                color themeDarkText
+
+                &:hover
+                  color themeDarkFocusButton
+
+              .folderColor
+                &>button,
+                .options
+                  color themeDarkText
+                  border-color themeDarkBorder
+
+                &>button
+                  border-color lighten(themeDarkBackground, 10%)
+                  background-color lighten(themeDarkBackground, 10%)
+
+                  &:hover
+                    border-color themeDarkBorder
+
+                  &:focus
+                    border-color themeDarkTopicColor
+
+                .options
+                  background-color themeDarkBackground
+
+            &>div.FolderRow .folderName input,
+            &>div.newFolder .folderName input
+                color themeDarkText
+                border-color lighten(themeDarkBackground, 10%)
+                background-color lighten(themeDarkBackground, 10%)
+
+                &:hover
+                  border-color themeDarkBorder
+
+                &:focus
+                  border-color themeDarkTopicColor
+
+            .folderControl
+              button
+                transition 0.1s
+                color themeDarkText
+
+                &:hover
+                  color themeDarkFocusButton
+
+  .Finder
+    .FinderInput
+      color themeDarkText
+      border-color themeDarkBorder
+      background-color themeDarkBackground
+
+      input
+        color themeDarkText
+        border-color lighten(themeDarkBackground, 10%)
+        background-color lighten(themeDarkBackground, 10%)
+
+        &:focus
+          border-color themeDarkTopicColor
+
+    .FinderList
+      color themeDarkText
+      border-color themeDarkBorder
+      background-color themeDarkList
+
+      .divider
+        border-color themeDarkBorder
+
+    .FinderDetail
+      color themeDarkText
+      border-color themeDarkBorder
+      background-color themeDarkPreview
+      box-shadow 0px 0px 10px 0 darken(themeDarkBorder, 20%);
+
+      .header
+        border-color themeDarkBorder
+
+        .right
+          .clipboardBtn
+            transition 0.1s
+
+            &:hover
+              color themeDarkFocusButton
+
+            .tooltip
+              background-color themeDarkTooltip
+
+  .ArticleDetail-panel
+    border-radius 0
+
+  // Markdown Preview
+  .Finder .FinderDetail .content,
+  .ArticleDetail .ArticleDetail-panel .ArticleEditor
+    .MarkdownPreview
+      color themeDarkText
+      border-color themeDarkBorder
+      background-color themeDarkPreview
+
+      a:hover
+        background-color alpha(lighten(brandColor, 30%), 0.2) !important
+
+      code
+        border-color darken(themeDarkBorder, 10%)
+        background-color lighten(themeDarkPreview, 5%)
+
+      pre
+        code
+          background-color transparent
+
+      table
+        thead
+          tr
+            background-color themeDarkTableHead
+          th
+            border-color themeDarkTableBorder
+            &:last-child
+              border-right solid 1px themeDarkTableBorder
+        tbody
+          tr:nth-child(2n + 1)
+            background-color themeDarkTableOdd
+          tr:nth-child(2n)
+            background-color themeDarkTableEven
+          td
+            border-color themeDarkTableBorder
+            &:last-child
+              border-right solid 1px themeDarkTableBorder