public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-13 17:56:25 +00:00
Code Issues Releases Wiki Activity

Merge branch 'master' into filter-tags-and-folders

Browse Source 
# Conflicts:
#	browser/main/SideNav/PreferenceButton.styl
#	browser/main/SideNav/SideNav.styl
This commit is contained in:
amedora
2020-02-05 09:07:13 +09:00
parent f1d03acbad 051ce9e208
commit 725bf2a691
56 changed files with 1487 additions and 2569 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
browser/components/MarkdownPreview.js
View File

@@ -21,6 +21,7 @@ import yaml from 'js-yaml'
import { render } from 'react-dom' import { render } from 'react-dom'
import Carousel from 'react-image-carousel' import Carousel from 'react-image-carousel'
import ConfigManager from '../main/lib/ConfigManager' import ConfigManager from '../main/lib/ConfigManager'
import uiThemes from 'browser/lib/ui-themes'
import i18n from 'browser/lib/i18n' import i18n from 'browser/lib/i18n'
const { remote, shell } = require('electron') const { remote, shell } = require('electron')
@@ -488,15 +489,7 @@ export default class MarkdownPreview extends React.Component {
getScrollBarStyle () { getScrollBarStyle () {
const { theme } = this.props const { theme } = this.props
switch (theme) { return uiThemes.some(item => item.name === theme && item.isDark) ? scrollBarDarkStyle : scrollBarStyle
case 'dark':
case 'solarized-dark':
case 'monokai':
case 'dracula':
return scrollBarDarkStyle
default:
return scrollBarStyle
}
} }
componentDidMount () { componentDidMount () {
@@ -1142,7 +1135,17 @@ export default class MarkdownPreview extends React.Component {
} }
// other case // other case
shell.openExternal(href) this.openExternal(href)
}
openExternal (href) {
try {
const success = shell.openExternal(href) || shell.openExternal(decodeURI(href))
if (!success) console.error('failed to open url ' + href)
} catch (e) {
// URI Error threw from decodeURI
console.error(e)
}
} }
render () { render () {

26
browser/components/MarkdownSplitEditor.styl
View File

@@ -16,22 +16,14 @@
z-index 10 z-index 10
cursor col-resize cursor col-resize
body[data-theme="dark"] apply-theme(theme)
.root body[data-theme={theme}]
.slider .root
border-left 1px solid $ui-dark-borderColor .slider
border-left 1px solid get-theme-var(theme, 'borderColor')
body[data-theme="solarized-dark"] for theme in 'dark' 'dracula' 'solarized-dark'
.root apply-theme(theme)
.slider
border-left 1px solid $ui-solarized-dark-borderColor
body[data-theme="monokai"] for theme in $themes
.root apply-theme(theme)
.slider
border-left 1px solid $ui-monokai-borderColor
body[data-theme="dracula"]
.root
.slider
border-left 1px solid $ui-dracula-borderColor

16
browser/components/NavToggleButton.styl
View File

@@ -17,10 +17,16 @@
body[data-theme="white"] body[data-theme="white"]
navWhiteButtonColor() navWhiteButtonColor()
body[data-theme="dark"] apply-theme(theme)
.navToggle body[data-theme={theme}]
&:hover .navToggle:hover
background-color alpha($ui-dark-button--active-backgroundColor, 20%) background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%)
border 1px solid get-theme-var(theme, 'button--active-backgroundColor')
transition 0.15s transition 0.15s
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
for theme in 'dark' 'dracula' 'solarized-dark'
apply-theme(theme)
for theme in $themes
apply-theme(theme)

200
browser/components/NoteItem.styl
View File

@@ -194,7 +194,7 @@ body[data-theme="dark"]
color $ui-dark-text-color color $ui-dark-text-color
.item-bottom-tagList-item .item-bottom-tagList-item
transition 0.15s transition 0.15s
background-color alpha(#fff, 20%) background-color alpha($ui-dark-tagList-backgroundColor, 20%)
color $ui-dark-text-color color $ui-dark-text-color
&:active &:active
transition 0.15s transition 0.15s
@@ -207,7 +207,7 @@ body[data-theme="dark"]
color $ui-dark-text-color color $ui-dark-text-color
.item-bottom-tagList-item .item-bottom-tagList-item
transition 0.15s transition 0.15s
background-color alpha(white, 10%) background-color alpha($ui-dark-tagList-backgroundColor, 10%)
color $ui-dark-text-color color $ui-dark-text-color
.item-wrapper .item-wrapper
@@ -223,13 +223,13 @@ body[data-theme="dark"]
.item-bottom-time .item-bottom-time
color $ui-dark-text-color color $ui-dark-text-color
.item-bottom-tagList-item .item-bottom-tagList-item
background-color alpha(white, 10%) background-color alpha($ui-dark-tagList-backgroundColor, 10%)
color $ui-dark-text-color color $ui-dark-text-color
&:hover &:hover
background-color alpha($ui-dark-button--active-backgroundColor, 60%) background-color alpha($ui-dark-button--active-backgroundColor, 60%)
color #c0392b color $ui-dark-button--hover-color
.item-bottom-tagList-item .item-bottom-tagList-item
background-color alpha(#fff, 20%) background-color alpha($ui-dark-tagList-backgroundColor, 20%)
.item-title .item-title
color $ui-inactive-text-color color $ui-inactive-text-color
@@ -322,148 +322,82 @@ body[data-theme="solarized-dark"]
color $ui-inactive-text-color color $ui-inactive-text-color
vertical-align middle vertical-align middle
body[data-theme="monokai"] apply-theme(theme)
.root body[data-theme={theme}]
border-color $ui-monokai-borderColor .root
background-color $ui-monokai-noteList-backgroundColor border-color get-theme-var(theme, 'borderColor')
background-color get-theme-var(theme, 'noteList-backgroundColor')
.item .item
border-color $ui-monokai-borderColor border-color get-theme-var(theme, 'borderColor')
background-color $ui-monokai-noteList-backgroundColor background-color get-theme-var(theme, 'noteList-backgroundColor')
&:hover &:hover
transition 0.15s
// background-color alpha($ui-monokai-noteList-backgroundColor, 20%)
color $ui-monokai-text-color
.item-title
.item-title-icon
.item-bottom-time
transition 0.15s transition 0.15s
color $ui-monokai-text-color // background-color alpha(get-theme-var(theme, 'noteList-backgroundColor'), 20%)
.item-bottom-tagList-item color get-theme-var(theme, 'text-color')
.item-title
.item-title-icon
.item-bottom-time
transition 0.15s
color get-theme-var(theme, 'text-color')
.item-bottom-tagList-item
transition 0.15s
background-color alpha(get-theme-var(theme, 'noteList-backgroundColor'), 20%)
color get-theme-var(theme, 'text-color')
&:active
transition 0.15s transition 0.15s
background-color alpha($ui-monokai-noteList-backgroundColor, 20%) background-color get-theme-var(theme, 'noteList-backgroundColor')
color $ui-monokai-text-color color get-theme-var(theme, 'text-color')
&:active .item-title
transition 0.15s .item-title-icon
background-color $ui-monokai-noteList-backgroundColor .item-bottom-time
color $ui-monokai-text-color transition 0.15s
.item-title color get-theme-var(theme, 'text-color')
.item-title-icon .item-bottom-tagList-item
.item-bottom-time transition 0.15s
transition 0.15s background-color alpha(get-theme-var(theme, 'noteList-backgroundColor'), 10%)
color $ui-monokai-text-color color get-theme-var(theme, 'text-color')
.item-bottom-tagList-item
transition 0.15s
background-color alpha($ui-monokai-noteList-backgroundColor, 10%)
color $ui-monokai-text-color
.item-wrapper
border-color alpha($ui-monokai-button-backgroundColor, 60%)
.item--active
border-color $ui-monokai-borderColor
background-color $ui-monokai-button-backgroundColor
.item-wrapper .item-wrapper
border-color transparent border-color alpha(get-theme-var(theme, 'button-backgroundColor'), 60%)
.item-title
.item-title-icon
.item-bottom-time
color $ui-monokai-active-color
.item-bottom-tagList-item
background-color alpha(white, 10%)
color $ui-monokai-text-color
&:hover
// background-color alpha($ui-monokai-button--active-backgroundColor, 60%)
color #f92672
.item-bottom-tagList-item
background-color alpha(#fff, 20%)
.item-title .item--active
color $ui-inactive-text-color border-color get-theme-var(theme, 'borderColor')
background-color get-theme-var(theme, 'button-backgroundColor')
.item-title-icon .item-wrapper
color $ui-inactive-text-color border-color transparent
.item-title-empty
color $ui-inactive-text-color
.item-bottom-tagList-item
background-color alpha($ui-dark-button--active-backgroundColor, 40%)
color $ui-inactive-text-color
.item-bottom-tagList-empty
color $ui-inactive-text-color
vertical-align middle
body[data-theme="dracula"]
.root
border-color $ui-dracula-borderColor
background-color $ui-dracula-noteList-backgroundColor
.item
border-color $ui-dracula-borderColor
background-color $ui-dracula-noteList-backgroundColor
&:hover
transition 0.15s
// background-color alpha($ui-dracula-noteList-backgroundColor, 20%)
color $ui-dracula-text-color
.item-title .item-title
.item-title-icon .item-title-icon
.item-bottom-time .item-bottom-time
transition 0.15s color get-theme-var(theme, 'active-color')
color $ui-dracula-text-color
.item-bottom-tagList-item .item-bottom-tagList-item
transition 0.15s background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 10%)
background-color alpha($ui-dracula-noteList-backgroundColor, 20%) color get-theme-var(theme, 'text-color')
color $ui-dracula-text-color &:hover
&:active // background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%)
transition 0.15s color get-theme-var(theme, 'button--hover-color')
background-color $ui-dracula-noteList-backgroundColor .item-bottom-tagList-item
color $ui-dracula-text-color background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 20%)
.item-title
.item-title-icon
.item-bottom-time
transition 0.15s
color $ui-dracula-text-color
.item-bottom-tagList-item
transition 0.15s
background-color alpha($ui-dracula-noteList-backgroundColor, 10%)
color $ui-dracula-text-color
.item-wrapper
border-color alpha($ui-dracula-button-backgroundColor, 60%)
.item--active
border-color $ui-dracula-borderColor
background-color $ui-dracula-button-backgroundColor
.item-wrapper
border-color transparent
.item-title .item-title
color $ui-inactive-text-color
.item-title-icon .item-title-icon
.item-bottom-time color $ui-inactive-text-color
color $ui-dracula-active-color
.item-title-empty
color $ui-inactive-text-color
.item-bottom-tagList-item .item-bottom-tagList-item
background-color alpha(#f8f8f2, 10%) background-color alpha($ui-dark-button--active-backgroundColor, 40%)
color $ui-dracula-text-color color $ui-inactive-text-color
&:hover
// background-color alpha($ui-dracula-button--active-backgroundColor, 60%)
color #ff79c6
.item-bottom-tagList-item
background-color alpha(#f8f8f2, 20%)
.item-title .item-bottom-tagList-empty
color $ui-inactive-text-color color $ui-inactive-text-color
vertical-align middle
.item-title-icon for theme in 'dracula'
color $ui-inactive-text-color apply-theme(theme)
.item-title-empty for theme in $themes
color $ui-inactive-text-color apply-theme(theme)
.item-bottom-tagList-item
background-color alpha($ui-dark-button--active-backgroundColor, 40%)
color $ui-inactive-text-color
.item-bottom-tagList-empty
color $ui-inactive-text-color
vertical-align middle

179
browser/components/NoteItemSimple.styl
View File

@@ -223,130 +223,73 @@ body[data-theme="solarized-dark"]
padding-left 4px padding-left 4px
opacity 0.4 opacity 0.4
body[data-theme="monokai"] apply-theme(theme)
.root body[data-theme={theme}]
border-color $ui-monokai-borderColor .root
background-color $ui-monokai-noteList-backgroundColor border-color get-theme-var(theme, 'borderColor')
background-color get-theme-var(theme, 'noteList-backgroundColor')
.item-simple .item-simple
border-color $ui-monokai-borderColor border-color get-theme-var(theme, 'borderColor')
background-color $ui-monokai-noteList-backgroundColor background-color get-theme-var(theme, 'noteList-backgroundColor')
&:hover &:hover
transition 0.15s transition 0.15s
background-color alpha($ui-monokai-button-backgroundColor, 60%) background-color alpha(get-theme-var(theme, 'button-backgroundColor'), 60%)
color $ui-monokai-text-color color get-theme-var(theme, 'text-color')
.item-simple-title
.item-simple-title-empty
.item-simple-title-icon
.item-simple-bottom-time
transition 0.15s
color get-theme-var(theme, 'text-color')
.item-simple-bottom-tagList-item
transition 0.15s
background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 20%)
color get-theme-var(theme, 'text-color')
&:active
transition 0.15s
background-color get-theme-var(theme, 'button--active-backgroundColor')
color get-theme-var(theme, 'text-color')
.item-simple-title
.item-simple-title-empty
.item-simple-title-icon
.item-simple-bottom-time
transition 0.15s
color get-theme-var(theme, 'text-color')
.item-simple-bottom-tagList-item
transition 0.15s
background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 10%)
color get-theme-var(theme, 'text-color')
.item-simple--active
border-color get-theme-var(theme, 'borderColor')
background-color get-theme-var(theme, 'button--active-backgroundColor')
.item-simple-wrapper
border-color transparent
.item-simple-title .item-simple-title
.item-simple-title-empty .item-simple-title-empty
.item-simple-title-icon .item-simple-title-icon
.item-simple-bottom-time .item-simple-bottom-time
transition 0.15s color get-theme-var(theme, 'text-color')
color $ui-monokai-text-color
.item-simple-bottom-tagList-item .item-simple-bottom-tagList-item
transition 0.15s background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 10%)
background-color alpha(#fff, 20%) color get-theme-var(theme, 'text-color')
color $ui-monokai-text-color &:hover
&:active // background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%)
transition 0.15s color #c0392b
background-color $ui-monokai-button--active-backgroundColor .item-simple-bottom-tagList-item
color $ui-monokai-text-color background-color alpha(get-theme-var(theme, 'tagList-backgroundColor'), 20%)
.item-simple-title
.item-simple-title-empty
.item-simple-title-icon
.item-simple-bottom-time
transition 0.15s
color $ui-monokai-text-color
.item-simple-bottom-tagList-item
transition 0.15s
background-color alpha(white, 10%)
color $ui-monokai-text-color
.item-simple--active
border-color $ui-monokai-borderColor
background-color $ui-monokai-button--active-backgroundColor
.item-simple-wrapper
border-color transparent
.item-simple-title .item-simple-title
.item-simple-title-empty color $ui-dark-text-color
.item-simple-title-icon border-bottom $ui-dark-borderColor
.item-simple-bottom-time .item-simple-right
color $ui-monokai-text-color float right
.item-simple-bottom-tagList-item .item-simple-right-storageName
background-color alpha(white, 10%) padding-left 4px
color $ui-monokai-text-color opacity 0.4
&:hover
// background-color alpha($ui-dark-button--active-backgroundColor, 60%)
color #c0392b
.item-simple-bottom-tagList-item
background-color alpha(#fff, 20%)
.item-simple-title
color $ui-dark-text-color
border-bottom $ui-dark-borderColor
.item-simple-right
float right
.item-simple-right-storageName
padding-left 4px
opacity 0.4
body[data-theme="dracula"] for theme in 'dracula'
.root apply-theme(theme)
border-color $ui-dracula-borderColor
background-color $ui-dracula-noteList-backgroundColor
.item-simple for theme in $themes
border-color $ui-dracula-borderColor apply-theme(theme)
background-color $ui-dracula-noteList-backgroundColor
&:hover
transition 0.15s
background-color alpha($ui-dracula-button-backgroundColor, 60%)
color $ui-dracula-text-color
.item-simple-title
.item-simple-title-empty
.item-simple-title-icon
.item-simple-bottom-time
transition 0.15s
color $ui-dracula-text-color
.item-simple-bottom-tagList-item
transition 0.15s
background-color alpha(#f8f8f2, 20%)
color $ui-dracula-text-color
&:active
transition 0.15s
background-color $ui-dracula-button--active-backgroundColor
color $ui-dracula-text-color
.item-simple-title
.item-simple-title-empty
.item-simple-title-icon
.item-simple-bottom-time
transition 0.15s
color $ui-dracula-text-color
.item-simple-bottom-tagList-item
transition 0.15s
background-color alpha(#f8f8f2, 10%)
color $ui-dracula-text-color
.item-simple--active
border-color $ui-dracula-borderColor
background-color $ui-dracula-button--active-backgroundColor
.item-simple-wrapper
border-color transparent
.item-simple-title
.item-simple-title-empty
.item-simple-title-icon
.item-simple-bottom-time
color $ui-dracula-text-color
.item-simple-bottom-tagList-item
background-color alpha(#f8f8f2, 10%)
color $ui-dracula-text-color
&:hover
// background-color alpha($ui-dark-button--active-backgroundColor, 60%)
color #c0392b
.item-simple-bottom-tagList-item
background-color alpha(#f8f8f2, 20%)
.item-simple-title
color $ui-dark-text-color
border-bottom $ui-dark-borderColor
.item-simple-right
float right
.item-simple-right-storageName
padding-left 4px
opacity 0.4

44
browser/components/RealtimeNotification.styl
View File

@@ -30,36 +30,20 @@ body[data-theme="dark"]
&:hover &:hover
color #5CB85C color #5CB85C
apply-theme(theme)
body[data-theme={theme}]
.notification-area
background-color none
body[data-theme="solarized-dark"] .notification-link
.notification-area color get-theme-var(theme, 'text-color')
background-color none border none
background-color get-theme-var(theme, 'button-backgroundColor')
&:hover
color get-theme-var(theme, 'button--hover-color')
.notification-link for theme in 'solarized-dark' 'dracula'
color $ui-solarized-dark-text-color apply-theme(theme)
border none
background-color $ui-solarized-dark-button-backgroundColor
&:hover
color #5CB85C
body[data-theme="monokai"] for theme in $themes
.notification-area apply-theme(theme)
background-color none
.notification-link
color $ui-monokai-text-color
border none
background-color $ui-monokai-button-backgroundColor
&:hover
color #5CB85C
body[data-theme="dracula"]
.notification-area
background-color none
.notification-link
color $ui-dracula-text-color
border none
background-color $ui-dracula-button-backgroundColor
&:hover
color #ff79c6

158
browser/components/SideNavFilter.styl
View File

@@ -180,129 +180,51 @@ body[data-theme="dark"]
.menu-button-label .menu-button-label
color $ui-dark-text-color color $ui-dark-text-color
apply-theme(theme)
body[data-theme={theme}]
.menu-button
&:active
background-color get-theme-var(theme, 'noteList-backgroundColor')
color get-theme-var(theme, 'text-color')
&:hover
background-color get-theme-var(theme, 'button-backgroundColor')
color get-theme-var(theme, 'text-color')
body[data-theme="solarized-dark"] .menu-button--active
.menu-button color get-theme-var(theme, 'text-color')
&:active background-color get-theme-var(theme, 'button-backgroundColor')
background-color $ui-solarized-dark-noteList-backgroundColor
color $ui-solarized-dark-text-color
&:hover
background-color $ui-solarized-dark-button-backgroundColor
color $ui-solarized-dark-text-color
.menu-button--active
color $ui-solarized-dark-text-color
background-color $ui-solarized-dark-button-backgroundColor
.menu-button-label
color $ui-solarized-dark-text-color
&:hover
background-color $ui-solarized-dark-button-backgroundColor
color $ui-solarized-dark-text-color
.menu-button-label .menu-button-label
color $ui-solarized-dark-text-color color get-theme-var(theme, 'text-color')
&:hover
background-color get-theme-var(theme, 'button-backgroundColor')
color get-theme-var(theme, 'text-color')
.menu-button-label
color get-theme-var(theme, 'text-color')
.menu-button-star--active .menu-button-star--active
color $ui-solarized-dark-text-color color get-theme-var(theme, 'text-color')
background-color $ui-solarized-dark-button-backgroundColor background-color get-theme-var(theme, 'button-backgroundColor')
.menu-button-label
color $ui-solarized-dark-text-color
&:hover
background-color $ui-solarized-dark-button-backgroundColor
color $ui-solarized-dark-text-color
.menu-button-label .menu-button-label
color $ui-solarized-dark-text-color color get-theme-var(theme, 'text-color')
&:hover
background-color get-theme-var(theme, 'button-backgroundColor')
color get-theme-var(theme, 'text-color')
.menu-button-label
color get-theme-var(theme, 'text-color')
.menu-button-trash--active .menu-button-trash--active
color $ui-solarized-dark-text-color color get-theme-var(theme, 'text-color')
background-color $ui-solarized-dark-button-backgroundColor background-color get-theme-var(theme, 'button-backgroundColor')
.menu-button-label
color $ui-solarized-dark-text-color
&:hover
background-color $ui-solarized-dark-button-backgroundColor
color $ui-solarized-dark-text-color
.menu-button-label .menu-button-label
color $ui-solarized-dark-text-color color get-theme-var(theme, 'text-color')
&:hover
background-color get-theme-var(theme, 'button-backgroundColor')
color get-theme-var(theme, 'text-color')
.menu-button-label
color get-theme-var(theme, 'text-color')
body[data-theme="monokai"] for theme in 'solarized-dark' 'dracula'
.menu-button apply-theme(theme)
&:active
background-color $ui-monokai-noteList-backgroundColor
color $ui-monokai-text-color
&:hover
background-color $ui-monokai-button-backgroundColor
color $ui-monokai-text-color
.menu-button--active for theme in $themes
color $ui-monokai-text-color apply-theme(theme)
background-color $ui-monokai-button-backgroundColor
.menu-button-label
color $ui-monokai-text-color
&:hover
background-color $ui-monokai-button-backgroundColor
color $ui-monokai-text-color
.menu-button-label
color $ui-monokai-text-color
.menu-button-star--active
color $ui-monokai-text-color
background-color $ui-monokai-button-backgroundColor
.menu-button-label
color $ui-monokai-text-color
&:hover
background-color $ui-monokai-button-backgroundColor
color $ui-monokai-text-color
.menu-button-label
color $ui-monokai-text-color
.menu-button-trash--active
color $ui-monokai-text-color
background-color $ui-monokai-button-backgroundColor
.menu-button-label
color $ui-monokai-text-color
&:hover
background-color $ui-monokai-button-backgroundColor
color $ui-monokai-text-color
.menu-button-label
color $ui-monokai-text-color
body[data-theme="dracula"]
.menu-button
&:active
background-color $ui-dracula-noteList-backgroundColor
color $ui-dracula-text-color
&:hover
background-color $ui-dracula-button-backgroundColor
color $ui-dracula-text-color
.menu-button--active
color $ui-dracula-text-color
background-color $ui-dracula-button-backgroundColor
.menu-button-label
color $ui-dracula-text-color
&:hover
background-color $ui-dracula-button-backgroundColor
color $ui-dracula-text-color
.menu-button-label
color $ui-dracula-text-color
.menu-button-star--active
color $ui-dracula-text-color
background-color $ui-dracula-button-backgroundColor
.menu-button-label
color $ui-dracula-text-color
&:hover
background-color $ui-dracula-button-backgroundColor
color $ui-dracula-text-color
.menu-button-label
color $ui-dracula-text-color
.menu-button-trash--active
color $ui-dracula-text-color
background-color $ui-dracula-button-backgroundColor
.menu-button-label
color $ui-dracula-text-color
&:hover
background-color $ui-dracula-button-backgroundColor
color $ui-dracula-text-color
.menu-button-label
color $ui-dracula-text-color

126
browser/components/SnippetTab.styl
View File

@@ -61,7 +61,7 @@
width 100% width 100%
outline none outline none
body[data-theme="default"], body[data-theme="white"] body[data-theme="default"], body[data-theme="white"]
.root--active .root--active
&:hover &:hover
background-color alpha($ui-button--active-backgroundColor, 60%) background-color alpha($ui-button--active-backgroundColor, 60%)
@@ -100,103 +100,43 @@ body[data-theme="dark"]
color $ui-dark-text-color color $ui-dark-text-color
transition 0.15s transition 0.15s
body[data-theme="solarized-dark"] apply-theme(theme)
.root body[data-theme={theme}]
border-color $ui-solarized-dark-borderColor .root
&:hover border-color get-theme-var(theme, 'borderColor')
background-color $ui-solarized-dark-noteDetail-backgroundColor &:hover
transition 0.15s background-color get-theme-var(theme, 'noteDetail-backgroundColor')
transition 0.15s
.deleteButton
color get-theme-var(theme, 'text-color')
transition 0.15s
.button
color get-theme-var(theme, 'text-color')
transition 0.15s
.root--active
color get-theme-var(theme, 'active-color')
background-color get-theme-var(theme, 'button-backgroundColor')
border-color get-theme-var(theme, 'borderColor')
.deleteButton .deleteButton
color $ui-solarized-dark-button--active-color color get-theme-var(theme, 'text-color')
transition 0.15s
.button .button
color $ui-solarized-dark-button--active-color color get-theme-var(theme, 'active-color')
transition 0.15s
.root--active
color $ui-solarized-dark-button--active-color
background-color $ui-solarized-dark-button-backgroundColor
border-color $ui-solarized-dark-borderColor
.deleteButton
color $ui-solarized-dark-button--active-color
.button .button
color $ui-solarized-dark-button--active-color border none
color $ui-inactive-text-color
background-color transparent
transition color background-color 0.15s
border-left 4px solid transparent
.button .input
border none background-color get-theme-var(theme, 'noteDetail-backgroundColor')
color $ui-solarized-dark-text-color color get-theme-var(theme, 'text-color')
background-color transparent
transition color background-color 0.15s
border-left 4px solid transparent
.input
background-color $ui-solarized-dark-noteDetail-backgroundColor
color $ui-solarized-dark-button--active-color
transition 0.15s
body[data-theme="monokai"]
.root
border-color $ui-monokai-borderColor
&:hover
background-color $ui-monokai-noteDetail-backgroundColor
transition 0.15s transition 0.15s
.deleteButton
color $ui-monokai-text-color
transition 0.15s
.button
color $ui-monokai-text-color
transition 0.15s
.root--active for theme in 'solarized-dark' 'dracula'
color $ui-monokai-active-color apply-theme(theme)
background-color $ui-monokai-button-backgroundColor
border-color $ui-monokai-borderColor
.deleteButton
color $ui-monokai-text-color
.button
color $ui-monokai-active-color
.button
border none
color $ui-inactive-text-color
background-color transparent
transition color background-color 0.15s
border-left 4px solid transparent
.input for theme in $themes
background-color $ui-monokai-noteDetail-backgroundColor apply-theme(theme)
color $ui-monokai-text-color
transition 0.15s
body[data-theme="dracula"]
.root
border-color $ui-dracula-borderColor
&:hover
background-color $ui-dracula-noteDetail-backgroundColor
transition 0.15s
.deleteButton
color $ui-dracula-text-color
transition 0.15s
.button
color $ui-dracula-text-color
transition 0.15s
.root--active
color $ui-dracula-text-color
background-color $ui-dracula-button-backgroundColor
border-color $ui-dracula-borderColor
.deleteButton
color $ui-dracula-text-color
.button
color $ui-dracula-active-color
.button
border none
color $ui-inactive-text-color
background-color transparent
transition color background-color 0.15s
border-left 4px solid transparent
.input
background-color $ui-dracula-noteDetail-backgroundColor
color $ui-dracula-text-color

75
browser/components/StorageItem.styl
View File

@@ -120,59 +120,28 @@ body[data-theme="dark"]
color $ui-dark-text-color color $ui-dark-text-color
background-color alpha($ui-dark-button--active-backgroundColor, 50%) background-color alpha($ui-dark-button--active-backgroundColor, 50%)
body[data-theme="solarized-dark"] apply-theme(theme)
.folderList-item body[data-theme={theme}]
&:hover .folderList-item
background-color $ui-solarized-dark-button-backgroundColor &:hover
color $ui-solarized-dark-text-color background-color get-theme-var(theme, 'button-backgroundColor')
&:active color get-theme-var(theme, 'text-color')
color $ui-solarized-dark-text-color &:active
background-color $ui-solarized-dark-button-backgroundColor color get-theme-var(theme, 'text-color')
background-color get-theme-var(theme, 'button-backgroundColor')
.folderList-item--active .folderList-item--active
@extend .folderList-item @extend .folderList-item
color $ui-solarized-dark-text-color color get-theme-var(theme, 'text-color')
background-color $ui-solarized-dark-button-backgroundColor background-color get-theme-var(theme, 'button-backgroundColor')
&:active &:active
background-color $ui-solarized-dark-button-backgroundColor background-color get-theme-var(theme, 'button-backgroundColor')
&:hover &:hover
color $ui-solarized-dark-text-color color get-theme-var(theme, 'text-color')
background-color $ui-solarized-dark-button-backgroundColor background-color get-theme-var(theme, 'button-backgroundColor')
body[data-theme="monokai"] for theme in 'solarized-dark' 'dracula'
.folderList-item apply-theme(theme)
&:hover
background-color $ui-monokai-button-backgroundColor
color $ui-monokai-text-color
&:active
color $ui-monokai-text-color
background-color $ui-monokai-button-backgroundColor
.folderList-item--active for theme in $themes
@extend .folderList-item apply-theme(theme)
color $ui-monokai-text-color
background-color $ui-monokai-button-backgroundColor
&:active
background-color $ui-monokai-button-backgroundColor
&:hover
color $ui-monokai-text-color
background-color $ui-monokai-button-backgroundColor
body[data-theme="dracula"]
.folderList-item
&:hover
background-color $ui-dracula-button-backgroundColor
color $ui-dracula-text-color
&:active
color $ui-dracula-text-color
background-color $ui-dracula-button-backgroundColor
.folderList-item--active
@extend .folderList-item
color $ui-dracula-text-color
background-color $ui-dracula-button-backgroundColor
&:active
background-color $ui-dracula-button-backgroundColor
&:hover
color $ui-dracula-text-color
background-color $ui-dracula-button-backgroundColor

45
browser/components/TagListItem.styl
View File

@@ -94,23 +94,30 @@ body[data-theme="white"]
.tagList-item-count .tagList-item-count
color $ui-text-color color $ui-text-color
body[data-theme="dark"] apply-theme(theme)
.tagList-item body[data-theme={theme}]
color $ui-dark-inactive-text-color .tagList-item
&:hover color get-theme-var(theme, 'inactive-text-color')
color $ui-dark-text-color &:hover
background-color alpha($ui-dark-button--active-backgroundColor, 20%) color get-theme-var(theme, 'text-color')
&:active background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%)
color $ui-dark-text-color &:active
background-color $ui-dark-button--active-backgroundColor color get-theme-var(theme, 'text-color')
background-color get-theme-var(theme, 'button--active-backgroundColor')
.tagList-item-active .tagList-item-active
background-color $ui-dark-button--active-backgroundColor background-color get-theme-var(theme, 'button--active-backgroundColor')
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
&:active &:active
background-color alpha($ui-dark-button--active-backgroundColor, 50%) background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 50%)
&:hover &:hover
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
background-color alpha($ui-dark-button--active-backgroundColor, 50%) background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 50%)
.tagList-item-count .tagList-item-count
color $ui-dark-button--active-color color get-theme-var(theme, 'button--active-color')
for theme in 'dark'
apply-theme(theme)
for theme in $themes
apply-theme(theme)

32
browser/components/TodoListPercentage.styl
View File

@@ -54,7 +54,7 @@ body[data-theme="dark"]
.percentageText .percentageText
color $ui-dark-text-color color $ui-dark-text-color
.todoClearText .todoClearText
color $ui-dark-text-color color $ui-dark-text-color
@@ -71,25 +71,19 @@ body[data-theme="solarized-dark"]
.todoClearText .todoClearText
color #fdf6e3 color #fdf6e3
body[data-theme="monokai"] apply-theme(theme)
.percentageBar body[data-theme={theme}]
background-color: $ui-monokai-borderColor .percentageBar
background-color: get-theme-var(theme, 'borderColor')
.progressBar .progressBar
background-color $ui-monokai-active-color background-color get-theme-var(theme, 'active-color')
.percentageText .percentageText
color $ui-monokai-text-color color get-theme-var(theme, 'text-color')
body[data-theme="dracula"] for theme in 'dracula'
.percentageBar apply-theme(theme)
background-color $ui-dracula-borderColor
.progressBar for theme in $themes
background-color: $ui-dracula-active-color apply-theme(theme)
.percentageText
color $ui-dracula-text-color
.percentageText
color $ui-dracula-text-color

198
browser/components/markdown.styl
View File

@@ -561,159 +561,57 @@ body[data-theme="dark"]
background-color darken(themeDarkBackground, 5%) background-color darken(themeDarkBackground, 5%)
color themeDarkText color themeDarkText
apply-theme(theme)
themeSolarizedDarkBackground = $ui-solarized-dark-noteDetail-backgroundColor body[data-theme={theme}]
themeSolarizedDarkTableOdd = $ui-solarized-dark-noteDetail-backgroundColor color get-theme-var(theme, 'text-color')
themeSolarizedDarkTableEven = darken($ui-solarized-dark-noteDetail-backgroundColor, 10%)
themeSolarizedDarkTableHead = themeSolarizedDarkTableEven
themeSolarizedDarkTableBorder = themeDarkBorder
body[data-theme="solarized-dark"]
color $ui-solarized-dark-text-color
border-color themeDarkBorder
background-color themeSolarizedDarkBackground
table
thead
tr
background-color themeSolarizedDarkTableHead
th
border-color themeSolarizedDarkTableBorder
&:last-child
border-right solid 1px themeSolarizedDarkTableBorder
tbody
tr:nth-child(2n + 1)
background-color themeSolarizedDarkTableOdd
tr:nth-child(2n)
background-color themeSolarizedDarkTableEven
td
border-color themeSolarizedDarkTableBorder
&:last-child
border-right solid 1px themeSolarizedDarkTableBorder
dl
border-color themeDarkBorder border-color themeDarkBorder
background-color themeSolarizedDarkTableHead background-color get-theme-var(theme, 'noteDetail-backgroundColor')
dt table
border-color themeDarkBorder thead
dd tr
border-color themeDarkBorder background-color get-theme-var(theme, 'table-head-backgroundColor')
background-color $ui-solarized-dark-noteDetail-backgroundColor th
border-color get-theme-var(theme, 'table-borderColor')
&:last-child
border-right solid 1px get-theme-var(theme, 'table-borderColor')
tbody
tr:nth-child(2n + 1)
background-color get-theme-var(theme, 'table-odd-backgroundColor')
tr:nth-child(2n)
background-color get-theme-var(theme, 'table-even-backgroundColor')
td
border-color get-theme-var(theme, 'table-borderColor')
&:last-child
border-right solid 1px get-theme-var(theme, 'table-borderColor')
kbd
background-color get-theme-var(theme, 'kbd-backgroundColor')
color get-theme-var(theme, 'kbd-color')
pre.fence dl
.gallery border-color themeDarkBorder
.carousel-main, .carousel-footer background-color get-theme-var(theme, 'table-head-backgroundColor')
background-color $ui-solarized-dark-noteDetail-backgroundColor dt
.prev, .next border-color themeDarkBorder
color $ui-solarized-dark-button--active-color dd
background-color $ui-solarized-dark-button-backgroundColor border-color themeDarkBorder
background-color get-theme-var(theme, 'noteDetail-backgroundColor')
.markdownIt-TOC-wrapper pre.fence
&, .gallery
&:before .carousel-main, .carousel-footer
background-color darken(themeSolarizedDarkBackground, 15%) background-color get-theme-var(theme, 'noteDetail-backgroundColor')
color themeDarkText .prev, .next
color get-theme-var(theme, 'button--active-color')
background-color get-theme-var(theme, 'button-backgroundColor')
themeMonokaiBackground = $ui-monokai-noteDetail-backgroundColor .markdownIt-TOC-wrapper
themeMonokaiTableOdd = $ui-monokai-noteDetail-backgroundColor &,
themeMonokaiTableEven = darken($ui-monokai-noteDetail-backgroundColor, 10%) &:before
themeMonokaiTableHead = themeMonokaiTableEven background-color darken(get-theme-var(theme, 'noteDetail-backgroundColor'), 15%)
themeMonokaiTableBorder = themeDarkBorder color themeDarkText
body[data-theme="monokai"] for theme in 'solarized-dark' 'dracula'
color $ui-monokai-text-color apply-theme(theme)
border-color themeDarkBorder
background-color themeMonokaiBackground
table
thead
tr
background-color themeMonokaiTableHead
th
border-color themeMonokaiTableBorder
&:last-child
border-right solid 1px themeMonokaiTableBorder
tbody
tr:nth-child(2n + 1)
background-color themeMonokaiTableOdd
tr:nth-child(2n)
background-color themeMonokaiTableEven
td
border-color themeMonokaiTableBorder
&:last-child
border-right solid 1px themeMonokaiTableBorder
kbd
background-color themeDarkBackground
dl for theme in $themes
border-color themeDarkBorder apply-theme(theme)
background-color themeMonokaiTableHead
dt
border-color themeDarkBorder
dd
border-color themeDarkBorder
background-color $ui-monokai-noteDetail-backgroundColor
pre.fence
.gallery
.carousel-main, .carousel-footer
background-color $ui-monokai-noteDetail-backgroundColor
.prev, .next
color $ui-monokai-button--active-color
background-color $ui-monokai-button-backgroundColor
.markdownIt-TOC-wrapper
&,
&:before
background-color darken(themeMonokaiBackground, 15%)
color themeDarkText
themeDraculaBackground = $ui-dracula-noteDetail-backgroundColor
themeDraculaTableOdd = $ui-dracula-noteDetail-backgroundColor
themeDraculaTableEven = darken($ui-dracula-noteDetail-backgroundColor, 10%)
themeDraculaTableHead = themeDraculaTableEven
themeDraculaTableBorder = themeDarkBorder
body[data-theme="dracula"]
color $ui-dracula-text-color
border-color themeDarkBorder
background-color themeDraculaBackground
table
thead
tr
background-color themeDraculaTableHead
th
border-color themeDraculaTableBorder
&:last-child
border-right solid 1px themeDraculaTableBorder
tbody
tr:nth-child(2n + 1)
background-color themeDraculaTableOdd
tr:nth-child(2n)
background-color themeDraculaTableEven
td
border-color themeDraculaTableBorder
&:last-child
border-right solid 1px themeDraculaTableBorder
kbd
background-color themeDarkBackground
dl
border-color themeDarkBorder
background-color themeDraculaTableHead
dt
border-color themeDarkBorder
dd
border-color themeDarkBorder
background-color $ui-dracula-noteDetail-backgroundColor
pre.fence
.gallery
.carousel-main, .carousel-footer
background-color $ui-dracula-noteDetail-backgroundColor
.prev, .next
color $ui-dracula-button--active-color
background-color $ui-dracula-button-backgroundColor
.markdownIt-TOC-wrapper
&,
&:before
background-color darken(themeDraculaBackground, 15%)
color themeDarkText

7
browser/components/render/MermaidRender.js
View File

@@ -1,4 +1,5 @@
import mermaidAPI from 'mermaid' import mermaidAPI from 'mermaid'
import uiThemes from 'browser/lib/ui-themes'
// fixes bad styling in the mermaid dark theme // fixes bad styling in the mermaid dark theme
const darkThemeStyling = ` const darkThemeStyling = `
@@ -23,10 +24,13 @@ function render (element, content, theme, enableHTMLLabel) {
try { try {
const height = element.attributes.getNamedItem('data-height') const height = element.attributes.getNamedItem('data-height')
const isPredefined = height && height.value !== 'undefined' const isPredefined = height && height.value !== 'undefined'
if (isPredefined) { if (isPredefined) {
element.style.height = height.value + 'vh' element.style.height = height.value + 'vh'
} }
const isDarkTheme = theme === 'dark' || theme === 'solarized-dark' || theme === 'monokai' || theme === 'dracula'
const isDarkTheme = uiThemes.some(item => item.name === theme && item.isDark)
mermaidAPI.initialize({ mermaidAPI.initialize({
theme: isDarkTheme ? 'dark' : 'default', theme: isDarkTheme ? 'dark' : 'default',
themeCSS: isDarkTheme ? darkThemeStyling : '', themeCSS: isDarkTheme ? darkThemeStyling : '',
@@ -37,6 +41,7 @@ function render (element, content, theme, enableHTMLLabel) {
useWidth: element.clientWidth useWidth: element.clientWidth
} }
}) })
mermaidAPI.render(getId(), content, (svgGraph) => { mermaidAPI.render(getId(), content, (svgGraph) => {
element.innerHTML = svgGraph element.innerHTML = svgGraph

39
browser/lib/ui-themes.js Normal file
View File

@@ -0,0 +1,39 @@
import i18n from 'browser/lib/i18n'
export default [
{
name: 'dark',
label: i18n.__('Dark'),
isDark: true
},
{
name: 'default',
label: i18n.__('Default'),
isDark: false
},
{
name: 'dracula',
label: i18n.__('Dracula'),
isDark: true
},
{
name: 'monokai',
label: i18n.__('Monokai'),
isDark: true
},
{
name: 'nord',
label: i18n.__('Nord'),
isDark: true
},
{
name: 'solarized-dark',
label: i18n.__('Solarized Dark'),
isDark: true
},
{
name: 'white',
label: i18n.__('White'),
isDark: false
}
]

29
browser/main/Detail/Detail.styl
View File

@@ -24,23 +24,16 @@ body[data-theme="dark"]
.empty-message .empty-message
color $ui-dark-inactive-text-color color $ui-dark-inactive-text-color
body[data-theme="solarized-dark"] apply-theme(theme)
.root body[data-theme={theme}]
background-color $ui-solarized-dark-noteDetail-backgroundColor .root
border-left 1px solid $ui-solarized-dark-borderColor background-color get-theme-var(theme, 'noteDetail-backgroundColor')
.empty-message border-left 1px solid get-theme-var(theme, 'borderColor')
color $ui-solarized-dark-text-color .empty-message
color get-theme-var(theme, 'text-color')
body[data-theme="monokai"] for theme in 'solarized-dark' 'dracula'
.root apply-theme(theme)
background-color $ui-monokai-noteDetail-backgroundColor
border-left 1px solid $ui-monokai-borderColor
.empty-message
color $ui-monokai-text-color
body[data-theme="dracula"] for theme in $themes
.root apply-theme(theme)
background-color $ui-dracula-noteDetail-backgroundColor
border-left 1px solid $ui-dracula-borderColor
.empty-message
color $ui-dracula-text-color

73
browser/main/Detail/FolderSelect.styl
View File

@@ -134,54 +134,39 @@ body[data-theme="dark"]
.search-optionList-item-name-surfix .search-optionList-item-name-surfix
color $ui-dark-inactive-text-color color $ui-dark-inactive-text-color
body[data-theme="monokai"] apply-theme(theme)
.root body[data-theme={theme}]
color $ui-dark-text-color .root
&:hover &:hover
color white background-color get-theme-var(theme, 'button--hover-backgroundColor')
background-color $ui-monokai-button--hover-backgroundColor border-color get-theme-var(theme, 'borderColor')
border-color $ui-monokai-borderColor
.search-optionList .search-input
color white color get-theme-var(theme, 'text-color')
border-color $ui-monokai-borderColor background-color transparent
background-color $ui-monokai-button-backgroundColor border-color get-theme-var(theme, 'borderColor')
.search-optionList-item .search-optionList
&:hover color get-theme-var(theme, 'text-color')
background-color lighten($ui-monokai-button--hover-backgroundColor, 15%) border-color get-theme-var(theme, 'borderColor')
background-color get-theme-var(theme, 'button-backgroundColor')
.search-optionList-item--active .search-optionList-item
background-color $ui-monokai-button--active-backgroundColor &:hover
color $ui-monokai-button--active-color background-color lighten(get-theme-var(theme, 'button--hover-backgroundColor'), 15%)
&:hover
background-color $ui-monokai-button--active-backgroundColor
color $ui-monokai-button--active-color
.search-optionList-item-name-surfix
color $ui-monokai-inactive-text-color
body[data-theme="dracula"] .search-optionList-item--active
.root background-color get-theme-var(theme, 'button--active-backgroundColor')
color $ui-dracula-text-color color get-theme-var(theme, 'button--active-color')
&:hover &:hover
color #f8f8f2 background-color get-theme-var(theme, 'button--active-backgroundColor')
background-color $ui-dark-button--hover-backgroundColor color get-theme-var(theme, 'button--active-color')
border-color $ui-dracula-borderColor
.search-optionList .search-optionList-item-name-surfix
color #f8f8f2 color get-theme-var(theme, 'inactive-text-color')
border-color $ui-dracula-borderColor
background-color $ui-dracula-button-backgroundColor
.search-optionList-item for theme in 'solarized-dark' 'dracula'
&:hover apply-theme(theme)
background-color lighten($ui-dracula-button--hover-backgroundColor, 15%)
.search-optionList-item--active for theme in $themes
background-color $ui-dracula-button--active-backgroundColor apply-theme(theme)
color $ui-dracula-button--active-color
&:hover
background-color $ui-dark-button--hover-backgroundColor
color $ui-dracula-button--active-color
.search-optionList-item-name-surfix
color $ui-dracula-inactive-text-color

50
browser/main/Detail/FullscreenButton.styl
View File

@@ -1,26 +1,26 @@
.control-fullScreenButton .control-fullScreenButton
top 80px top 80px
topBarButtonRight() topBarButtonRight()
&:hover .tooltip &:hover .tooltip
opacity 1 opacity 1
.tooltip .tooltip
tooltip() tooltip()
position absolute position absolute
pointer-events none pointer-events none
top 50px top 50px
right 70px right 70px
z-index 200 z-index 200
padding 5px padding 5px
line-height normal line-height normal
border-radius 2px border-radius 2px
opacity 0 opacity 0
transition 0.1s transition 0.1s
.tooltip:lang(ja) .tooltip:lang(ja)
@extend .tooltip @extend .tooltip
right 35px right 35px
body[data-theme="dark"] body[data-theme="dark"]
.control-fullScreenButton .control-fullScreenButton
topBarButtonDark() topBarButtonDark()

183
browser/main/Detail/InfoPanel.styl
View File

@@ -138,162 +138,49 @@
.export--unable .export--unable
cursor not-allowed cursor not-allowed
body[data-theme="dark"] apply-theme(theme)
.control-infoButton-panel body[data-theme={theme}]
background-color $ui-dark-noteList-backgroundColor .control-infoButton-panel
background-color get-theme-var(theme, 'noteList-backgroundColor')
.control-infoButton-panel-trash .control-infoButton-panel-trash
background-color $ui-dark-noteList-backgroundColor background-color get-theme-var(theme, 'noteList-backgroundColor')
.modification-date .modification-date
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
.modification-date-desc .modification-date-desc
color $ui-inactive-text-color color $ui-inactive-text-color
.infoPanel-defaul-count .infoPanel-defaul-count
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
.infoPanel-sub-count .infoPanel-sub-count
color $ui-inactive-text-color color $ui-inactive-text-color
.infoPanel-default .infoPanel-default
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
.infoPanel-sub .infoPanel-sub
color $ui-inactive-text-color color $ui-inactive-text-color
.infoPanel-noteLink .infoPanel-noteLink
background-color alpha($ui-dark-borderColor, 60%) background-color alpha(get-theme-var(theme, 'borderColor'), 20%)
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
[id=export-wrap] [id=export-wrap]
button button
color $ui-dark-inactive-text-color color $ui-dark-inactive-text-color
&:hover &:hover
background-color alpha($ui-dark-borderColor, 20%) background-color alpha(get-theme-var(theme, 'borderColor'), 20%)
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
p p
color $ui-dark-inactive-text-color color $ui-dark-inactive-text-color
&:hover &:hover
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
body[data-theme="solarized-dark"] for theme in 'dark' 'solarized-dark' 'dracula'
.control-infoButton-panel apply-theme(theme)
background-color $ui-solarized-dark-noteList-backgroundColor
.control-infoButton-panel-trash for theme in $themes
background-color $ui-solarized-ark-noteList-backgroundColor apply-theme(theme)
.modification-date
color $ui-solarized-ark-text-color
.modification-date-desc
color $ui-inactive-text-color
.infoPanel-defaul-count
color $ui-solarized-dark-text-color
.infoPanel-sub-count
color $ui-inactive-text-color
.infoPanel-default
color $ui-solarized-ark-text-color
.infoPanel-sub
color $ui-inactive-text-color
.infoPanel-noteLink
background-color alpha($ui-solarized-dark-borderColor, 20%)
color $ui-solarized-dark-text-color
[id=export-wrap]
button
color $ui-dark-inactive-text-color
&:hover
background-color alpha($ui-solarized-dark-borderColor, 20%)
color $ui-solarized-ark-text-color
p
color $ui-dark-inactive-text-color
&:hover
color $ui-solarized-ark-text-color
body[data-theme="monokai"]
.control-infoButton-panel
background-color $ui-monokai-noteList-backgroundColor
.control-infoButton-panel-trash
background-color $ui-monokai-noteList-backgroundColor
.modification-date
color $ui-monokai-text-color
.modification-date-desc
color $ui-inactive-text-color
.infoPanel-defaul-count
color $ui-monokai-text-color
.infoPanel-sub-count
color $ui-inactive-text-color
.infoPanel-default
color $ui-monokai-text-color
.infoPanel-sub
color $ui-inactive-text-color
.infoPanel-noteLink
background-color alpha($ui-monokai-borderColor, 20%)
color $ui-monokai-text-color
[id=export-wrap]
button
color $ui-dark-inactive-text-color
&:hover
background-color alpha($ui-monokai-borderColor, 20%)
color $ui-monokai-text-color
p
color $ui-dark-inactive-text-color
&:hover
color $ui-monokai-text-color
body[data-theme="dracula"]
.control-infoButton-panel
background-color $ui-dracula-noteList-backgroundColor
.control-infoButton-panel-trash
background-color $ui-dracula-noteList-backgroundColor
.modification-date
color $ui-dracula-text-color
.modification-date-desc
color $ui-inactive-text-color
.infoPanel-defaul-count
color $ui-dracula-text-color
.infoPanel-sub-count
color $ui-inactive-text-color
.infoPanel-default
color $ui-dracula-text-color
.infoPanel-sub
color $ui-inactive-text-color
.infoPanel-noteLink
background-color alpha($ui-dracula-borderColor, 20%)
color $ui-dracula-text-color
[id=export-wrap]
button
color $ui-dark-inactive-text-color
&:hover
background-color alpha($ui-dracula-borderColor, 20%)
color $ui-dracula-text-color
p
color $ui-dark-inactive-text-color
&:hover
color $ui-dracula-text-color

23
browser/main/Detail/MarkdownNoteDetail.styl
View File

@@ -66,19 +66,14 @@ body[data-theme="dark"]
.control-fullScreenButton .control-fullScreenButton
topBarButtonDark() topBarButtonDark()
apply-theme(theme)
body[data-theme={theme}]
.root
border-left 1px solid get-theme-var(theme, 'borderColor')
background-color get-theme-var(theme, 'noteDetail-backgroundColor')
body[data-theme="solarized-dark"] for theme in 'solarized-dark' 'dracula'
.root apply-theme(theme)
border-left 1px solid $ui-solarized-dark-borderColor
background-color $ui-solarized-dark-noteDetail-backgroundColor
body[data-theme="monokai"]
.root
border-left 1px solid $ui-monokai-borderColor
background-color $ui-monokai-noteDetail-backgroundColor
body[data-theme="dracula"]
.root
border-left 1px solid $ui-dracula-borderColor
background-color $ui-dracula-noteDetail-backgroundColor
for theme in $themes
apply-theme(theme)

37
browser/main/Detail/NoteDetailInfo.styl
View File

@@ -15,6 +15,14 @@ $info-margin-under-border = 30px
padding 0 20px padding 0 20px
z-index 99 z-index 99
.info > div
> button
-webkit-user-drag none
user-select none
> img, span
-webkit-user-drag none
user-select none
.info-left .info-left
padding 0 10px padding 0 10px
width 100% width 100%
@@ -94,25 +102,14 @@ body[data-theme="dark"]
.undo-button .undo-button
topBarButtonDark() topBarButtonDark()
body[data-theme="solarized-dark"] apply-theme(theme)
.info body[data-theme={theme}]
border-color $ui-solarized-dark-borderColor .info
background-color $ui-solarized-dark-noteDetail-backgroundColor border-color get-theme-var(theme, 'borderColor')
background-color get-theme-var(theme, 'noteDetail-backgroundColor')
body[data-theme="monokai"] for theme in 'solarized-dark' 'dracula'
.info apply-theme(theme)
border-color $ui-monokai-borderColor
background-color $ui-monokai-noteDetail-backgroundColor
body[data-theme="dracula"] for theme in $themes
.info apply-theme(theme)
border-color $ui-dracula-borderColor
background-color $ui-dracula-noteDetail-backgroundColor
.info > div
> button
-webkit-user-drag none
user-select none
> img, span
-webkit-user-drag none
user-select none

93
browser/main/Detail/SnippetNoteDetail.styl
View File

@@ -156,78 +156,35 @@ body[data-theme="dark"]
.control-fullScreenButton .control-fullScreenButton
topBarButtonDark() topBarButtonDark()
body[data-theme="solarized-dark"] apply-theme(theme)
.root body[data-theme={theme}]
border-left 1px solid $ui-solarized-dark-borderColor .root
background-color $ui-solarized-dark-noteDetail-backgroundColor border-left 1px solid get-theme-var(theme, 'borderColor')
background-color get-theme-var(theme, 'noteDetail-backgroundColor')
.body .body
background-color $ui-solarized-dark-noteDetail-backgroundColor background-color get-theme-var(theme, 'noteDetail-backgroundColor')
.body .description textarea .body .description textarea
background-color $ui-solarized-dark-noteDetail-backgroundColor background-color get-theme-var(theme, 'noteDetail-backgroundColor')
color $ui-solarized-dark-text-color color get-theme-var(theme, 'text-color')
border 1px solid $ui-solarized-dark-borderColor border 1px solid get-theme-var(theme, 'borderColor')
.tabList .tabButton .tabList .tabButton
border-color $ui-solarized-dark-borderColor border-color get-theme-var(theme, 'borderColor')
.tabButton .tabButton
&:hover &:hover
color $ui-solarized-dark-button--active-color color get-theme-var(theme, 'text-color')
background-color $ui-solarized-dark-noteDetail-backgroundColor background-color get-theme-var(theme, 'noteDetail-backgroundColor')
transition 0.15s transition 0.15s
.tabList
background-color $ui-solarized-dark-noteDetail-backgroundColor
color $ui-solarized-dark-text-color
body[data-theme="monokai"] .tabList
.root background-color get-theme-var(theme, 'noteDetail-backgroundColor')
border-left 1px solid $ui-monokai-borderColor color get-theme-var(theme, 'text-color')
background-color $ui-monokai-noteDetail-backgroundColor
.body for theme in 'solarized-dark' 'dracula'
background-color $ui-monokai-noteDetail-backgroundColor apply-theme(theme)
.body .description textarea for theme in $themes
background-color $ui-monokai-noteDetail-backgroundColor apply-theme(theme)
color $ui-monokai-text-color
border 1px solid $ui-monokai-borderColor
.tabList .tabButton
border-color $ui-monokai-borderColor
.tabButton
&:hover
color $ui-monokai-text-color
background-color $ui-monokai-noteDetail-backgroundColor
.tabList
background-color $ui-monokai-noteDetail-backgroundColor
color $ui-monokai-text-color
body[data-theme="dracula"]
.root
border-left 1px solid $ui-dracula-borderColor
background-color $ui-dracula-noteDetail-backgroundColor
.body
background-color $ui-dracula-noteDetail-backgroundColor
.body .description textarea
background-color $ui-dracula-noteDetail-backgroundColor
color $ui-dracula-text-color
border 1px solid $ui-dracula-borderColor
.tabList .tabButton
border-color $ui-dracula-borderColor
.tabButton
&:hover
color $ui-dracula-text-color
background-color $ui-dracula-noteDetail-backgroundColor
.tabList
background-color $ui-dracula-noteDetail-backgroundColor
color $ui-dracula-text-color

41
browser/main/Detail/TagSelect.styl
View File

@@ -54,35 +54,20 @@ body[data-theme="dark"]
.tag-label .tag-label
color $ui-dark-text-color color $ui-dark-text-color
body[data-theme="solarized-dark"] apply-theme(theme)
.tag body[data-theme={theme}]
background-color $ui-solarized-dark-tag-backgroundColor .tag
background-color get-theme-var(theme, 'tag-backgroundColor')
.tag-removeButton .tag-removeButton
border-color $ui-button--focus-borderColor border-color $ui-button--focus-borderColor
background-color transparent background-color transparent
.tag-label .tag-label
color $ui-solarized-dark-text-color color get-theme-var(theme, 'text-color')
body[data-theme="monokai"] for theme in 'solarized-dark' 'dracula'
.tag apply-theme(theme)
background-color $ui-monokai-tag-backgroundColor
.tag-removeButton for theme in $themes
border-color $ui-button--focus-borderColor apply-theme(theme)
background-color transparent
.tag-label
color $ui-monokai-text-color
body[data-theme="dracula"]
.tag
background-color $ui-dracula-tag-backgroundColor
.tag-removeButton
border-color $ui-dracula-button--focus-borderColor
background-color transparent
.tag-label
color $ui-dracula-borderColor

36
browser/main/Detail/ToggleDirectionButton.styl
View File

@@ -46,6 +46,13 @@
left -8px left -8px
width 70px width 70px
.control-toggleModeButton
-webkit-user-drag none
user-select none
> div img
-webkit-user-drag none
user-select none
body[data-theme="dark"] body[data-theme="dark"]
.control-fullScreenButton .control-fullScreenButton
topBarButtonDark() topBarButtonDark()
@@ -63,23 +70,16 @@ body[data-theme="solarized-dark"]
background-color #1EC38B background-color #1EC38B
box-shadow 2px 0px 7px #222222 box-shadow 2px 0px 7px #222222
body[data-theme="monokai"] apply-theme(theme)
.control-toggleModeButton body[data-theme={theme}]
background-color #373831 .control-toggleModeButton
.active background-color get-theme-var(theme, 'borderColor')
background-color #f92672 .active
box-shadow 2px 0px 7px #222222 background-color get-theme-var(theme, 'active-color')
box-shadow 2px 0px 7px #222222
body[data-theme="dracula"] for theme in 'dracula'
.control-toggleModeButton apply-theme(theme)
background-color #44475a
.active
background-color #bd93f9
box-shadow 2px 0px 7px #222222
.control-toggleModeButton for theme in $themes
-webkit-user-drag none apply-theme(theme)
user-select none
> div img
-webkit-user-drag none
user-select none

168
browser/main/Detail/ToggleModeButton.styl
View File

@@ -1,84 +1,84 @@
.control-toggleModeButton .control-toggleModeButton
height 25px height 25px
border-radius 50px border-radius 50px
background-color #F4F4F4 background-color #F4F4F4
width 52px width 52px
display flex display flex
align-items center align-items center
position: relative position: relative
top 2px top 2px
.active .active
background-color #1EC38B background-color #1EC38B
width 33px width 33px
height 24px height 24px
box-shadow 2px 0px 7px #eee box-shadow 2px 0px 7px #eee
z-index 1 z-index 1
div div
width 40px width 40px
height 100% height 100%
border-radius 50% border-radius 50%
display flex display flex
align-items center align-items center
justify-content center justify-content center
cursor pointer cursor pointer
&:hover .tooltip &:hover .tooltip
opacity 1 opacity 1
.tooltip .control-toggleModeButton
tooltip() -webkit-user-drag none
position absolute user-select none
pointer-events none > div img
top 33px -webkit-user-drag none
left -10px user-select none
z-index 200
width 80px .tooltip
padding 5px tooltip()
line-height normal position absolute
border-radius 2px pointer-events none
opacity 0 top 33px
transition 0.1s left -10px
z-index 200
.tooltip:lang(ja) width 80px
@extend .tooltip padding 5px
left -8px line-height normal
width 70px border-radius 2px
opacity 0
body[data-theme="dark"] transition 0.1s
.control-fullScreenButton
topBarButtonDark() .tooltip:lang(ja)
@extend .tooltip
.control-toggleModeButton left -8px
background-color #3A404C width 70px
.active
background-color #1EC38B body[data-theme="dark"]
box-shadow 2px 0px 7px #444444 .control-fullScreenButton
topBarButtonDark()
body[data-theme="solarized-dark"]
.control-toggleModeButton .control-toggleModeButton
background-color #002B36 background-color #3A404C
.active .active
background-color #1EC38B background-color #1EC38B
box-shadow 2px 0px 7px #222222 box-shadow 2px 0px 7px #444444
body[data-theme="monokai"] body[data-theme="solarized-dark"]
.control-toggleModeButton .control-toggleModeButton
background-color #373831 background-color #002B36
.active .active
background-color #f92672 background-color #1EC38B
box-shadow 2px 0px 7px #222222 box-shadow 2px 0px 7px #222222
body[data-theme="dracula"] apply-theme(theme)
.control-toggleModeButton body[data-theme={theme}]
background-color #44475a .control-toggleModeButton
.active background-color get-theme-var(theme, 'borderColor')
background-color #bd93f9 .active
box-shadow 2px 0px 7px #222222 background-color get-theme-var(theme, 'active-color')
box-shadow 2px 0px 7px #222222
.control-toggleModeButton
-webkit-user-drag none for theme in 'dracula'
user-select none apply-theme(theme)
> div img
-webkit-user-drag none for theme in $themes
user-select none apply-theme(theme)

6
browser/main/Main.js
View File

@@ -16,7 +16,9 @@ import { store } from 'browser/main/store'
import i18n from 'browser/lib/i18n' import i18n from 'browser/lib/i18n'
import { getLocales } from 'browser/lib/Languages' import { getLocales } from 'browser/lib/Languages'
import applyShortcuts from 'browser/main/lib/shortcutManager' import applyShortcuts from 'browser/main/lib/shortcutManager'
import uiThemes from 'browser/lib/ui-themes'
import { push } from 'connected-react-router' import { push } from 'connected-react-router'
const path = require('path') const path = require('path')
const electron = require('electron') const electron = require('electron')
const { remote } = electron const { remote } = electron
@@ -142,9 +144,7 @@ class Main extends React.Component {
componentDidMount () { componentDidMount () {
const { dispatch, config } = this.props const { dispatch, config } = this.props
const supportedThemes = ['dark', 'white', 'solarized-dark', 'monokai', 'dracula'] if (uiThemes.some(theme => theme.name === config.ui.theme)) {
if (supportedThemes.indexOf(config.ui.theme) !== -1) {
document.body.setAttribute('data-theme', config.ui.theme) document.body.setAttribute('data-theme', config.ui.theme)
} else { } else {
document.body.setAttribute('data-theme', 'default') document.body.setAttribute('data-theme', 'default')

17
browser/main/NewNoteButton/NewNoteButton.styl
View File

@@ -72,14 +72,13 @@ body[data-theme="dark"]
.control-newNoteButton-tooltip .control-newNoteButton-tooltip
darkTooltip() darkTooltip()
body[data-theme="solarized-dark"] apply-theme(theme)
.root, .root--expanded body[data-theme={theme}]
background-color $ui-solarized-dark-noteList-backgroundColor .root, .root--expanded
background-color get-theme-var(theme, 'noteList-backgroundColor')
body[data-theme="monokai"] for theme in 'solarized-dark' 'dracula'
.root, .root--expanded apply-theme(theme)
background-color $ui-monokai-noteList-backgroundColor
body[data-theme="dracula"] for theme in $themes
.root, .root--expanded apply-theme(theme)
background-color $ui-dracula-noteList-backgroundColor

114
browser/main/NoteList/NoteList.styl
View File

@@ -66,99 +66,33 @@ body[data-theme="white"]
.control .control
background-color $ui-white-noteList-backgroundColor background-color $ui-white-noteList-backgroundColor
body[data-theme="dark"] apply-theme(theme)
.root body[data-theme={theme}]
border-color $ui-dark-borderColor .root
background-color $ui-dark-noteList-backgroundColor border-color get-theme-var(theme, 'borderColor')
background-color get-theme-var(theme, 'noteList-backgroundColor')
.control .control
background-color $ui-dark-noteList-backgroundColor background-color get-theme-var(theme, 'noteList-backgroundColor')
border-color $ui-dark-borderColor border-color get-theme-var(theme, 'borderColor')
.control-sortBy-select .control-sortBy-select
&:hover &:hover
transition 0.2s transition 0.2s
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
.control-button .control-button
color $ui-dark-inactive-text-color color get-theme-var(theme, 'inactive-text-color')
&:hover &:hover
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
.control-button--active .control-button--active
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
&:active &:active
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
for theme in 'dark' 'solarized-dark' 'dracula'
apply-theme(theme)
body[data-theme="solarized-dark"] for theme in $themes
.root apply-theme(theme)
border-color $ui-solarized-dark-borderColor
background-color $ui-solarized-dark-noteList-backgroundColor
.control
background-color $ui-solarized-dark-noteList-backgroundColor
border-color $ui-solarized-dark-borderColor
.control-sortBy-select
&:hover
transition 0.2s
color $ui-solarized-dark-text-color
.control-button
color $ui-solarized-dark-inactive-text-color
&:hover
color $ui-solarized-dark-text-color
.control-button--active
color $ui-solarized-dark-text-color
&:active
color $ui-solarized-dark-text-color
body[data-theme="monokai"]
.root
border-color $ui-monokai-borderColor
background-color $ui-monokai-noteList-backgroundColor
.control
background-color $ui-monokai-noteList-backgroundColor
border-color $ui-monokai-borderColor
.control-sortBy-select
&:hover
transition 0.2s
color $ui-monokai-text-color
.control-button
color $ui-monokai-inactive-text-color
&:hover
color $ui-monokai-text-color
.control-button--active
color $ui-monokai-text-color
&:active
color $ui-monokai-text-color
body[data-theme="dracula"]
.root
border-color $ui-dracula-borderColor
background-color $ui-dracula-noteList-backgroundColor
.control
background-color $ui-dracula-noteList-backgroundColor
border-color $ui-dracula-borderColor
.control-sortBy-select
&:hover
transition 0.2s
color $ui-dracula-text-color
.control-button
color $ui-dracula-inactive-text-color
&:hover
color $ui-dracula-text-color
.control-button--active
color $ui-dracula-text-color
&:active
color $ui-dracula-text-color

96
browser/main/SideNav/PreferenceButton.styl
View File

@@ -1,49 +1,47 @@
.top-menu-preference .top-menu-preference
navButtonColor() navButtonColor()
width 2em width 2em
background-color transparent background-color transparent
&:hover &:hover
color $ui-button-default--active-backgroundColor color $ui-button-default--active-backgroundColor
background-color transparent background-color transparent
.tooltip .tooltip
opacity 1 opacity 1
&:active, &:active:hover &:active, &:active:hover
color $ui-button-default--active-backgroundColor color $ui-button-default--active-backgroundColor
body[data-theme="white"] body[data-theme="white"]
.top-menu-preference .top-menu-preference
navWhiteButtonColor() navWhiteButtonColor()
background-color transparent background-color transparent
&:hover &:hover
color #0B99F1 color #0B99F1
background-color transparent background-color transparent
&:active, &:active:hover &:active, &:active:hover
color #0B99F1 color #0B99F1
background-color transparent background-color transparent
body[data-theme="dark"] body[data-theme="dark"]
.top-menu-preference .top-menu-preference
navDarkButtonColor() navDarkButtonColor()
background-color transparent background-color transparent
&:active &:active
background-color alpha($ui-dark-button--active-backgroundColor, 20%) background-color alpha($ui-dark-button--active-backgroundColor, 20%)
background-color transparent background-color transparent
&:hover &:hover
background-color alpha($ui-dark-button--active-backgroundColor, 20%) background-color alpha($ui-dark-button--active-backgroundColor, 20%)
background-color transparent background-color transparent
.tooltip
tooltip()
.tooltip position absolute
tooltip() pointer-events none
position absolute top 26px
pointer-events none left -20px
top 26px z-index 200
left -20px padding 5px
z-index 200 line-height normal
padding 5px border-radius 2px
line-height normal opacity 0
border-radius 2px transition 0.1s
opacity 0 white-space nowrap
transition 0.1s
white-space nowrap

37
browser/main/SideNav/SideNav.styl
View File

@@ -169,30 +169,19 @@ body[data-theme="dark"]
.top .top
border-color $ui-dark-borderColor border-color $ui-dark-borderColor
body[data-theme="solarized-dark"] apply-theme(theme)
.root, .root--folded body[data-theme={theme}]
background-color $ui-solarized-dark-backgroundColor .root, .root--folded
border-right 1px solid $ui-solarized-dark-borderColor background-color get-theme-var(theme, 'backgroundColor')
border-right 1px solid get-theme-var(theme, 'borderColor')
.search .search-input .search .search-input
background-color $ui-solarized-dark-backgroundColor background-color get-theme-var(theme, 'backgroundColor')
color $ui-solarized-dark-text-color color get-theme-var(theme, 'text-color')
border-color $ui-solarized-dark-borderColor border-color get-theme-var(theme, 'borderColor')
body[data-theme="monokai"] for theme in 'solarized-dark' 'dracula'
.root, .root--folded apply-theme(theme)
background-color $ui-monokai-backgroundColor
border-right 1px solid $ui-monokai-borderColor
.search .search-input
background-color $ui-monokai-button-backgroundColor
color $ui-monokai-text-color
border-color $ui-monokai-borderColor
body[data-theme="dracula"] for theme in $themes
.root, .root--folded apply-theme(theme)
background-color $ui-dracula-backgroundColor
border-right 1px solid $ui-dracula-borderColor
.search .search-input
background-color $ui-dracula-backgroundColor
color $ui-dracula-text-color
border-color $ui-dracula-borderColor

90
browser/main/SideNav/StorageItem.styl
View File

@@ -132,55 +132,57 @@ body[data-theme="white"]
background-color alpha($ui-button--active-backgroundColor, 40%) background-color alpha($ui-button--active-backgroundColor, 40%)
color $ui-text-color color $ui-text-color
body[data-theme="dark"] apply-theme(theme)
.header--active body[data-theme={theme}]
background-color $ui-dark-button--active-backgroundColor .header--active
transition color background-color 0.15s background-color get-theme-var(theme, 'button--active-backgroundColor')
transition color background-color 0.15s
.header--active
.header-toggleButton
color get-theme-var(theme, 'text-color')
.header--active
.header-info
color get-theme-var(theme, 'text-color')
background-color get-theme-var(theme, 'button--active-backgroundColor')
&:active
color get-theme-var(theme, 'text-color')
background-color get-theme-var(theme, 'button--active-backgroundColor')
.header--active
.header-addFolderButton
color get-theme-var(theme, 'text-color')
.header--active
.header-toggleButton .header-toggleButton
color $ui-dark-text-color &:hover
transition 0.2s
color get-theme-var(theme, 'text-color')
background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%)
&:active, &:active:hover
color get-theme-var(theme, 'text-color')
background-color get-theme-var(theme, 'button--active-backgroundColor')
.header--active
.header-info .header-info
color $ui-dark-text-color background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%)
background-color $ui-dark-button--active-backgroundColor &:hover
&:active transition 0.2s
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
background-color $ui-dark-button--active-backgroundColor background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 20%)
&:active, &:active:hover
color get-theme-var(theme, 'text-color')
background-color get-theme-var(theme, 'button--active-backgroundColor')
.header--active
.header-addFolderButton .header-addFolderButton
color $ui-dark-text-color &:hover
transition 0.2s
.header-toggleButton color get-theme-var(theme, 'text-color')
&:hover background-color alpha(get-theme-var(theme, 'button--active-backgroundColor'), 60%)
transition 0.2s &:active, &:active:hover
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
background-color alpha($ui-dark-button--active-backgroundColor, 60%) background-color get-theme-var(theme, 'button--active-backgroundColor')
&:active, &:active:hover
color $ui-dark-text-color
background-color $ui-dark-button--active-backgroundColor
.header-info
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
&:hover
transition 0.2s
color $ui-dark-text-color
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
&:active, &:active:hover
color $ui-dark-text-color
background-color $ui-dark-button--active-backgroundColor
.header-addFolderButton
&:hover
transition 0.2s
color $ui-dark-text-color
background-color alpha($ui-dark-button--active-backgroundColor, 60%)
&:active, &:active:hover
color $ui-dark-text-color
background-color $ui-dark-button--active-backgroundColor
apply-theme('dark')
for theme in $themes
apply-theme(theme)

118
browser/main/SideNav/SwitchButton.styl
View File

@@ -1,60 +1,60 @@
.non-active-button .non-active-button
color $ui-inactive-text-color color $ui-inactive-text-color
font-size 16px font-size 16px
border 0 border 0
background-color transparent background-color transparent
transition 0.2s transition 0.2s
display flex display flex
text-align center text-align center
margin-right 4px margin-right 4px
position relative position relative
&:hover &:hover
color alpha(#239F86, 60%) color alpha(#239F86, 60%)
.tooltip .tooltip
opacity 1 opacity 1
.active-button .active-button
@extend .non-active-button @extend .non-active-button
color $ui-button-default--active-backgroundColor color $ui-button-default--active-backgroundColor
.tooltip .tooltip
tooltip() tooltip()
position absolute position absolute
pointer-events none pointer-events none
top 22px top 22px
left -2px left -2px
z-index 200 z-index 200
padding 5px padding 5px
line-height normal line-height normal
border-radius 2px border-radius 2px
opacity 0 opacity 0
transition 0.1s transition 0.1s
white-space nowrap white-space nowrap
body[data-theme="white"] body[data-theme="white"]
.non-active-button .non-active-button
color $ui-inactive-text-color color $ui-inactive-text-color
&:hover &:hover
color alpha(#0B99F1, 60%) color alpha(#0B99F1, 60%)
.tag-title .tag-title
p p
color $ui-text-color color $ui-text-color
.non-active-button .non-active-button
&:hover &:hover
color alpha(#0B99F1, 60%) color alpha(#0B99F1, 60%)
.active-button .active-button
@extend .non-active-button @extend .non-active-button
color #0B99F1 color #0B99F1
body[data-theme="dark"] body[data-theme="dark"]
.non-active-button .non-active-button
color alpha($ui-dark-text-color, 60%) color alpha($ui-dark-text-color, 60%)
&:hover &:hover
color alpha(#0B99F1, 60%) color alpha(#0B99F1, 60%)
.tag-title .tag-title
p p
color alpha($ui-dark-text-color, 60%) color alpha($ui-dark-text-color, 60%)

35
browser/main/StatusBar/StatusBar.styl
View File

@@ -78,24 +78,19 @@ body[data-theme="dark"]
border-color $ui-dark-borderColor border-color $ui-dark-borderColor
border-left 1px solid $ui-dark-borderColor border-left 1px solid $ui-dark-borderColor
body[data-theme="monokai"] apply-theme(theme)
navButtonColor() body[data-theme={theme}]
.zoom .zoom
border-color $ui-dark-borderColor border-color $ui-dark-borderColor
color $ui-monokai-text-color color get-theme-var(theme, 'text-color')
&:hover &:hover
transition 0.15s transition 0.15s
color $ui-monokai-active-color color get-theme-var(theme, 'active-color')
&:active &:active
color $ui-monokai-active-color color get-theme-var(theme, 'active-color')
body[data-theme="dracula"] for theme in 'dracula' 'solarized-dark'
navButtonColor() apply-theme(theme)
.zoom
border-color $ui-dark-borderColor for theme in $themes
color $ui-dracula-text-color apply-theme(theme)
&:hover
transition 0.15s
color $ui-dracula-active-color
&:active
color $ui-dracula-active-color

84
browser/main/TopBar/TopBar.styl
View File

@@ -212,69 +212,31 @@ body[data-theme="dark"]
.control-newPostButton-tooltip .control-newPostButton-tooltip
darkTooltip() darkTooltip()
apply-theme(theme)
body[data-theme={theme}]
.root, .root--expanded
background-color get-theme-var(theme, 'noteList-backgroundColor')
body[data-theme="solarized-dark"] .control
.root, .root--expanded border-color get-theme-var(theme, 'borderColor')
background-color $ui-solarized-dark-noteList-backgroundColor .control-search
background-color get-theme-var(theme, 'noteList-backgroundColor')
.control .control-search-icon
border-color $ui-solarized-dark-borderColor absolute top bottom left
.control-search line-height 32px
background-color $ui-solarized-dark-noteList-backgroundColor width 35px
color get-theme-var(theme, 'inactive-text-color')
background-color get-theme-var(theme, 'noteList-backgroundColor')
.control-search-icon .control-search-input
absolute top bottom left background-color get-theme-var(theme, 'noteList-backgroundColor')
line-height 32px input
width 35px background-color get-theme-var(theme, 'noteList-backgroundColor')
color $ui-solarized-dark-inactive-text-color color get-theme-var(theme, 'text-color')
background-color $ui-solarized-dark-noteList-backgroundColor
.control-search-input for theme in 'solarized-dark' 'dracula'
background-color $ui-solarized-dark-noteList-backgroundColor apply-theme(theme)
input
background-color $ui-solarized-dark-noteList-backgroundColor
color $ui-solarized-dark-text-color
body[data-theme="monokai"] for theme in $themes
.root, .root--expanded apply-theme(theme)
background-color $ui-monokai-noteList-backgroundColor
.control
border-color $ui-monokai-borderColor
.control-search
background-color $ui-monokai-noteList-backgroundColor
.control-search-icon
absolute top bottom left
line-height 32px
width 35px
color $ui-monokai-inactive-text-color
background-color $ui-monokai-noteList-backgroundColor
.control-search-input
background-color $ui-monokai-noteList-backgroundColor
input
background-color $ui-monokai-noteList-backgroundColor
color $ui-monokai-text-color
body[data-theme="dracula"]
.root, .root--expanded
background-color $ui-dracula-noteList-backgroundColor
.control
border-color $ui-dracula-borderColor
.control-search
background-color $ui-dracula-noteList-backgroundColor
.control-search-icon
absolute top bottom left
line-height 32px
width 35px
color $ui-dracula-inactive-text-color
background-color $ui-dracula-noteList-backgroundColor
.control-search-input
background-color $ui-dracula-noteList-backgroundColor
input
background-color $ui-dracula-noteList-backgroundColor
color $ui-dracula-text-color

51
browser/main/global.styl
View File

@@ -96,16 +96,6 @@ modalBackColor = white
z-index modalZIndex + 1 z-index modalZIndex + 1
body[data-theme="dark"]
background-color $ui-dark-backgroundColor
::-webkit-scrollbar-thumb
background-color rgba(0, 0, 0, 0.3)
.ModalBase
.modalBack
background-color $ui-dark-backgroundColor
.sortableItemHelper
color: $ui-dark-text-color
.CodeMirror .CodeMirror
font-family inherit !important font-family inherit !important
line-height 1.4em line-height 1.4em
@@ -148,35 +138,22 @@ body[data-theme="dark"]
.sortableItemHelper .sortableItemHelper
z-index modalZIndex + 5 z-index modalZIndex + 5
body[data-theme="solarized-dark"] apply-theme(theme)
background-color $ui-solarized-dark-backgroundColor body[data-theme={theme}]
::-webkit-scrollbar-thumb background-color get-theme-var(theme, 'backgroundColor')
background-color rgba(0, 0, 0, 0.3) ::-webkit-scrollbar-thumb
.ModalBase background-color rgba(0, 0, 0, 0.3)
.modalBack .ModalBase
background-color $ui-solarized-dark-backgroundColor .modalBack
.sortableItemHelper background-color get-theme-var(theme, 'backgroundColor')
color: $ui-solarized-dark-text-color .sortableItemHelper
color get-theme-var(theme, 'text-color')
body[data-theme="monokai"] for theme in 'dark' 'solarized-dark' 'dracula'
background-color $ui-monokai-backgroundColor apply-theme(theme)
::-webkit-scrollbar-thumb
background-color rgba(0, 0, 0, 0.3)
.ModalBase
.modalBack
background-color $ui-monokai-backgroundColor
.sortableItemHelper
color: $ui-monokai-text-color
body[data-theme="dracula"] for theme in $themes
background-color $ui-dracula-backgroundColor apply-theme(theme)
::-webkit-scrollbar-thumb
background-color rgba(0, 0, 0, 0.3)
.ModalBase
.modalBack
background-color $ui-dracula-backgroundColor
.sortableItemHelper
color: $ui-dracula-text-color
body[data-theme="default"] body[data-theme="default"]
.SideNav ::-webkit-scrollbar-thumb .SideNav ::-webkit-scrollbar-thumb

13
browser/main/lib/ConfigManager.js
View File

@@ -2,6 +2,7 @@ import _ from 'lodash'
import RcParser from 'browser/lib/RcParser' import RcParser from 'browser/lib/RcParser'
import i18n from 'browser/lib/i18n' import i18n from 'browser/lib/i18n'
import ee from 'browser/main/lib/eventEmitter' import ee from 'browser/main/lib/eventEmitter'
import uiThemes from 'browser/lib/ui-themes'
const OSX = global.process.platform === 'darwin' const OSX = global.process.platform === 'darwin'
const win = global.process.platform === 'win32' const win = global.process.platform === 'win32'
@@ -180,16 +181,8 @@ function set (updates) {
if (!validate(newConfig)) throw new Error('INVALID CONFIG') if (!validate(newConfig)) throw new Error('INVALID CONFIG')
_save(newConfig) _save(newConfig)
if (newConfig.ui.theme === 'dark') { if (uiThemes.some(theme => theme.name === newConfig.ui.theme)) {
document.body.setAttribute('data-theme', 'dark') document.body.setAttribute('data-theme', newConfig.ui.theme)
} else if (newConfig.ui.theme === 'white') {
document.body.setAttribute('data-theme', 'white')
} else if (newConfig.ui.theme === 'solarized-dark') {
document.body.setAttribute('data-theme', 'solarized-dark')
} else if (newConfig.ui.theme === 'monokai') {
document.body.setAttribute('data-theme', 'monokai')
} else if (newConfig.ui.theme === 'dracula') {
document.body.setAttribute('data-theme', 'dracula')
} else { } else {
document.body.setAttribute('data-theme', 'default') document.body.setAttribute('data-theme', 'default')
} }

126
browser/main/modals/CreateFolderModal.styl
View File

@@ -51,106 +51,40 @@
font-size 14px font-size 14px
colorPrimaryButton() colorPrimaryButton()
body[data-theme="dark"] apply-theme(theme)
.root body[data-theme={theme}]
modalDark() .root
width 500px width 500px
height 270px height 270px
overflow hidden overflow hidden
position relative position relative
position relative
z-index $modal-z-index
width 100%
background-color get-theme-var(theme, 'backgroundColor')
overflow hidden
border-radius $modal-border-radius
.header .header
background-color transparent background-color transparent
border-color $ui-dark-borderColor border-color $ui-dark-borderColor
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
.control-folder-label .control-folder-label
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
.control-folder-input .control-folder-input
border 1px solid $ui-input--create-folder-modal border 1px solid $ui-input--create-folder-modal
color white color white
.description .description
color $ui-inactive-text-color color $ui-inactive-text-color
.control-confirmButton .control-confirmButton
colorDarkPrimaryButton() colorThemedPrimaryButton(theme)
body[data-theme="solarized-dark"] for theme in 'dark' 'solarized-dark' 'dracula'
.root apply-theme(theme)
modalSolarizedDark()
width 500px
height 270px
overflow hidden
position relative
.header for theme in $themes
background-color transparent apply-theme(theme)
border-color $ui-dark-borderColor
color $ui-solarized-dark-text-color
.control-folder-label
color $ui-solarized-dark-text-color
.control-folder-input
border 1px solid $ui-input--create-folder-modal
color white
.description
color $ui-inactive-text-color
.control-confirmButton
colorSolarizedDarkPrimaryButton()
body[data-theme="monokai"]
.root
modalMonokai()
width 500px
height 270px
overflow hidden
position relative
.header
background-color transparent
border-color $ui-dark-borderColor
color $ui-monokai-text-color
.control-folder-label
color $ui-monokai-text-color
.control-folder-input
border 1px solid $ui-input--create-folder-modal
color white
.description
color $ui-inactive-text-color
.control-confirmButton
colorMonokaiPrimaryButton()
body[data-theme="dracula"]
.root
modalDracula()
width 500px
height 270px
overflow hidden
position relative
.header
background-color transparent
border-color $ui-dark-borderColor
color $ui-dracula-text-color
.control-folder-label
color $ui-dracula-text-color
.control-folder-input
border 1px solid $ui-input--create-folder-modal
color white
.description
color $ui-inactive-text-color
.control-confirmButton
colorDraculaPrimaryButton()

121
browser/main/modals/CreateMarkdownFromURLModal.styl
View File

@@ -51,110 +51,39 @@
font-size 14px font-size 14px
colorPrimaryButton() colorPrimaryButton()
body[data-theme="dark"]
.root
modalDark()
width 500px
height 270px
overflow hidden
position relative
.header
background-color transparent
border-color $ui-dark-borderColor
color $ui-dark-text-color
.control-folder-label
color $ui-dark-text-color
.control-folder-input
border 1px solid $ui-input--create-folder-modal
color white
.description
color $ui-inactive-text-color
.control-confirmButton
colorDarkPrimaryButton()
body[data-theme="solarized-dark"]
.root
modalSolarizedDark()
width 500px
height 270px
overflow hidden
position relative
.header
background-color transparent
border-color $ui-dark-borderColor
color $ui-solarized-dark-text-color
.control-folder-label
color $ui-solarized-dark-text-color
.control-folder-input
border 1px solid $ui-input--create-folder-modal
color white
.description
color $ui-inactive-text-color
.control-confirmButton
colorSolarizedDarkPrimaryButton()
.error .error
text-align center text-align center
color #F44336 color #F44336
body[data-theme="monokai"] apply-theme(theme)
.root body[data-theme={theme}]
modalMonokai() .root
width 500px background-color transparent
height 270px width 500px
overflow hidden height 270px
position relative overflow hidden
position relative
.header .header
background-color transparent background-color transparent
border-color $ui-dark-borderColor border-color get-theme-var(theme, 'borderColor')
color $ui-monokai-text-color color get-theme-var(theme, 'text-color')
.control-folder-label .control-folder-label
color $ui-monokai-text-color color get-theme-var(theme, 'text-color')
.control-folder-input .control-folder-input
border 1px solid $ui-input--create-folder-modal border 1px solid $ui-input--create-folder-modal
color white color white
.description .description
color $ui-inactive-text-color color $ui-inactive-text-color
.control-confirmButton .control-confirmButton
colorMonokaiPrimaryButton() colorThemedPrimaryButton(theme)
body[data-theme="dracula"] for theme in 'dark' 'dracula' 'solarized-dark'
.root apply-theme(theme)
modalDracula()
width 500px
height 270px
overflow hidden
position relative
.header for theme in $themes
background-color transparent apply-theme(theme)
border-color $ui-dracula-borderColor
color $ui-dracula-text-color
.control-folder-label
color $ui-dracula-text-color
.control-folder-input
border 1px solid $ui-input--create-folder-modal
color white
.description
color $ui-inactive-text-color
.control-confirmButton
colorDraculaPrimaryButton()

80
browser/main/modals/NewNoteModal.styl
View File

@@ -54,70 +54,26 @@
margin-bottom 25px margin-bottom 25px
cursor pointer cursor pointer
body[data-theme="dark"] apply-theme(theme)
.root body[data-theme={theme}]
modalDark() .root
background-color transparent
.header .header
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
.control-button .control-button
border-color $ui-dark-borderColor border-color get-theme-var(theme, 'borderColor')
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
background-color transparent background-color transparent
&:focus &:focus
colorDarkPrimaryButton() colorThemedPrimaryButton(theme)
.description, .from-url .description
color $ui-inactive-text-color color get-theme-var(theme, 'text-color')
body[data-theme="solarized-dark"] for theme in 'dark' 'solarized-dark' 'dracula'
.root apply-theme(theme)
background-color transparent
.header for theme in $themes
color $ui-solarized-dark-text-color apply-theme(theme)
.control-button
border-color $ui-solarized-dark-borderColor
color $ui-solarized-dark-text-color
background-color transparent
&:focus
colorDarkPrimaryButton()
.description, .from-url
color $ui-solarized-dark-text-color
body[data-theme="monokai"]
.root
background-color transparent
.header
color $ui-monokai-text-color
.control-button
border-color $ui-monokai-borderColor
color $ui-monokai-text-color
background-color transparent
&:focus
colorDarkPrimaryButton()
.description, .from-url
color $ui-monokai-text-color
body[data-theme="dracula"]
.root
background-color transparent
.header
color $ui-dracula-text-color
.control-button
border-color $ui-dracula-borderColor
color $ui-dracula-text-color
background-color transparent
&:focus
colorDraculaPrimaryButton()
.description
color $ui-dracula-text-color

130
browser/main/modals/PreferencesModal/ConfigTab.styl
View File

@@ -2,7 +2,6 @@
.root .root
padding 15px padding 15px
color $ui-text-color
margin-bottom 30px margin-bottom 30px
.group .group
@@ -14,7 +13,6 @@
.group-header2 .group-header2
font-size 20px font-size 20px
color $ui-text-color
margin-bottom 15px margin-bottom 15px
margin-top 30px margin-top 30px
@@ -136,20 +134,18 @@ colorDarkControl()
background-color $ui-dark-backgroundColor background-color $ui-dark-backgroundColor
color $ui-dark-text-color color $ui-dark-text-color
colorSolarizedDarkControl() colorThemedControl(theme)
border none border none
background-color $ui-solarized-dark-button-backgroundColor background-color get-theme-var(theme, 'button-backgroundColor')
color $ui-solarized-dark-text-color color get-theme-var(theme, 'text-color')
colorMonokaiControl() body[data-theme="default"],
border none body[data-theme="white"]
background-color $ui-monokai-button-backgroundColor .root
color $ui-monokai-text-color color $ui-text-color
colorDraculaControl() .group-header2
border none color $ui-text-color
background-color $ui-dracula-button-backgroundColor
color $ui-dracula-text-color
body[data-theme="dark"] body[data-theme="dark"]
.root .root
@@ -180,90 +176,36 @@ body[data-theme="dark"]
select, .group-section-control-input select, .group-section-control-input
colorDarkControl() colorDarkControl()
apply-theme(theme)
body[data-theme={theme}]
.root
color get-theme-var(theme, 'text-color')
body[data-theme="solarized-dark"] .group-header
.root color get-theme-var(theme, 'text-color')
color $ui-solarized-dark-text-color border-color get-theme-var(theme, 'borderColor')
.group-header .group-header2
.group-header--sub color get-theme-var(theme, 'text-color')
color $ui-solarized-dark-text-color
border-color $ui-solarized-dark-borderColor
.group-header2 .group-section-control-input
.group-header2--sub border-color get-theme-var(theme, 'borderColor')
color $ui-solarized-dark-text-color
.group-section-control-input .group-control
border-color $ui-solarized-dark-borderColor border-color get-theme-var(theme, 'borderColor')
.group-control-leftButton
colorDarkDefaultButton()
border-color get-theme-var(theme, 'borderColor')
.group-control-rightButton
colorThemedPrimaryButton(theme)
.group-hint
colorThemedControl(theme)
.group-section-control
select, .group-section-control-input
colorThemedControl(theme)
.group-control for theme in 'solarized-dark' 'dracula'
border-color $ui-solarized-dark-borderColor apply-theme(theme)
.group-control-leftButton
colorDarkDefaultButton()
border-color $ui-solarized-dark-borderColor
.group-control-rightButton
colorSolarizedDarkPrimaryButton()
.group-hint
colorSolarizedDarkControl()
.group-section-control
select, .group-section-control-input
colorSolarizedDarkControl()
body[data-theme="monokai"] for theme in $themes
.root apply-theme(theme)
color $ui-monokai-text-color
.group-header
.group-header--sub
color $ui-monokai-text-color
border-color $ui-monokai-borderColor
.group-header2
.group-header2--sub
color $ui-monokai-text-color
.group-section-control-input
border-color $ui-monokai-borderColor
.group-control
border-color $ui-monokai-borderColor
.group-control-leftButton
colorDarkDefaultButton()
border-color $ui-monokai-borderColor
.group-control-rightButton
colorMonokaiPrimaryButton()
.group-hint
colorMonokaiControl()
.group-section-control
select, .group-section-control-input
colorMonokaiControl()
body[data-theme="dracula"]
.root
color $ui-dracula-text-color
.group-header
.group-header--sub
color $ui-dracula-text-color
border-color $ui-dracula-borderColor
.group-header2
.group-header2--sub
color $ui-dracula-text-color
.group-section-control-input
border-color $ui-dracula-borderColor
.group-control
border-color $ui-dracula-borderColor
.group-control-leftButton
colorDarkDefaultButton()
border-color $ui-dracula-borderColor
.group-control-rightButton
colorDraculaPrimaryButton()
.group-hint
colorDraculaControl()
.group-section-control
select, .group-section-control-input
colorDraculaControl()

25
browser/main/modals/PreferencesModal/Crowdfunding.styl
View File

@@ -24,20 +24,15 @@ body[data-theme="dark"]
p p
color $ui-dark-text-color color $ui-dark-text-color
body[data-theme="solarized-dark"] apply-theme(theme)
.root body[data-theme={theme}]
color $ui-solarized-dark-text-color .root
p color get-theme-var(theme, 'text-color')
color $ui-solarized-dark-text-color p
color get-theme-var(theme, 'text-color')
body[data-theme="monokai"] for theme in 'solarized-dark' 'dracula'
.root apply-theme(theme)
color $ui-monokai-text-color
p
color $ui-monokai-text-color
body[data-theme="dracula"] for theme in $themes
.root apply-theme(theme)
color $ui-dracula-text-color
p
color $ui-dracula-text-color

83
browser/main/modals/PreferencesModal/FolderItem.styl
View File

@@ -107,73 +107,32 @@ body[data-theme="dark"]
.folderItem-right-dangerButton .folderItem-right-dangerButton
colorDarkDangerButton() colorDarkDangerButton()
apply-theme(theme)
body[data-theme={theme}]
.folderItem
&:hover
background-color get-theme-var(theme, 'button-backgroundColor')
.folderItem-left-danger
color $danger-color
body[data-theme="solarized-dark"] .folderItem-left-key
.folderItem color $ui-dark-inactive-text-color
&:hover
background-color $ui-solarized-dark-button-backgroundColor
.folderItem-left-danger .folderItem-left-colorButton
color $danger-color colorThemedPrimaryButton(theme)
.folderItem-left-key .folderItem-right-button
color $ui-dark-inactive-text-color colorThemedPrimaryButton(theme)
.folderItem-left-colorButton .folderItem-right-confirmButton
colorSolarizedDarkPrimaryButton() colorThemedPrimaryButton(theme)
.folderItem-right-button .folderItem-right-dangerButton
colorSolarizedDarkPrimaryButton() colorThemedPrimaryButton(theme)
.folderItem-right-confirmButton for theme in 'solarized-dark' 'dracula'
colorSolarizedDarkPrimaryButton() apply-theme(theme)
.folderItem-right-dangerButton for theme in $themes
colorSolarizedDarkPrimaryButton() apply-theme(theme)
body[data-theme="monokai"]
.folderItem
&:hover
background-color $ui-monokai-button-backgroundColor
.folderItem-left-danger
color $danger-color
.folderItem-left-key
color $ui-dark-inactive-text-color
.folderItem-left-colorButton
colorMonokaiPrimaryButton()
.folderItem-right-button
colorMonokaiPrimaryButton()
.folderItem-right-confirmButton
colorMonokaiPrimaryButton()
.folderItem-right-dangerButton
colorMonokaiPrimaryButton()
body[data-theme="dracula"]
.folderItem
&:hover
background-color $ui-dracula-button-backgroundColor
.folderItem-left-danger
color $danger-color
.folderItem-left-key
color $ui-dark-inactive-text-color
.folderItem-left-colorButton
colorDraculaPrimaryButton()
.folderItem-right-button
colorDraculaPrimaryButton()
.folderItem-right-confirmButton
colorDraculaPrimaryButton()
.folderItem-right-dangerButton
colorDraculaPrimaryButton()

38
browser/main/modals/PreferencesModal/InfoTab.styl
View File

@@ -59,29 +59,19 @@ body[data-theme="dark"]
.appId .appId
color $ui-dark-text-color color $ui-dark-text-color
body[data-theme="solarized-dark"]
.root
color $ui-solarized-dark-text-color
.appId
color $ui-solarized-dark-text-color
.list
a
color $ui-solarized-dark-active-color
body[data-theme="monokai"] apply-theme(theme)
.root body[data-theme={theme}]
color $ui-monokai-text-color .root
.appId color get-theme-var(theme, 'text-color')
color $ui-monokai-text-color .appId
.list color get-theme-var(theme, 'text-color')
a .list
color $ui-monokai-active-color a
color get-theme-var(theme, 'active-color')
body[data-theme="dracula"] for theme in 'solarized-dark' 'dracula'
.root apply-theme(theme)
color $ui-dracula-text-color
.appId for theme in $themes
color $ui-dracula-text-color apply-theme(theme)
.list
a
color $ui-dracula-active-color

121
browser/main/modals/PreferencesModal/PreferencesModal.styl
View File

@@ -64,102 +64,31 @@ top-bar--height = 50px
margin-top 10px margin-top 10px
overflow-y auto overflow-y auto
body[data-theme="dark"] apply-theme(theme)
.root body[data-theme={theme}]
modalDark() .root
background-color transparent
.top-bar
background-color transparent
border-color get-theme-var(theme, 'borderColor')
p
color get-theme-var(theme, 'text-color')
.nav
background-color transparent
border-color get-theme-var(theme, 'borderColor')
.nav-button
background-color transparent
color get-theme-var(theme, 'text-color')
&:hover
color get-theme-var(theme, 'text-color')
.top-bar .nav-button--active
background-color transparent @extend .nav-button
border-color #4A4D52 color get-theme-var(theme, 'button--active-color')
p background-color get-theme-var(theme, 'button--active-backgroundColor')
color $tab--dark-text-color
.nav for theme in 'dark' 'solarized-dark' 'dracula'
background-color transparent apply-theme(theme)
border-color $ui-dark-borderColor
.nav-button for theme in $themes
background-color transparent apply-theme(theme)
color $tab--dark-text-color
&:hover
color $ui-dark-text-color
.nav-button--active
@extend .nav-button
color white
background-color $dark-primary-button-background--active
&:hover
color white
body[data-theme="solarized-dark"]
.root
background-color transparent
.top-bar
background-color transparent
border-color $ui-solarized-dark-borderColor
p
color $ui-solarized-dark-text-color
.nav
background-color transparent
border-color $ui-solarized-dark-borderColor
.nav-button
background-color transparent
color $ui-solarized-dark-text-color
&:hover
color $ui-solarized-dark-text-color
.nav-button--active
@extend .nav-button
color $ui-solarized-dark-button--active-color
background-color $ui-solarized-dark-button--active-backgroundColor
&:hover
color white
body[data-theme="monokai"]
.root
background-color transparent
.top-bar
background-color transparent
border-color $ui-monokai-borderColor
p
color $ui-monokai-text-color
.nav
background-color transparent
border-color $ui-monokai-borderColor
.nav-button
background-color transparent
color $ui-monokai-text-color
&:hover
color $ui-monokai-text-color
.nav-button--active
@extend .nav-button
color $ui-monokai-button--active-color
background-color $ui-monokai-button--active-backgroundColor
&:hover
color white
body[data-theme="dracula"]
.root
background-color transparent
.top-bar
background-color transparent
border-color $ui-dracula-borderColor
p
color $ui-dracula-text-color
.nav
background-color transparent
border-color $ui-dracula-borderColor
.nav-button
background-color transparent
color $ui-dracula-text-color
&:hover
color $ui-dracula-text-color
.nav-button--active
@extend .nav-button
color $ui-dracula-button--active-color
background-color $ui-dracula-button--active-backgroundColor
&:hover
color #f8f8f2

81
browser/main/modals/PreferencesModal/SnippetTab.styl
View File

@@ -140,66 +140,25 @@ body[data-theme="default"], body[data-theme="white"]
.snippet-item-selected .snippet-item-selected
background darken($ui-backgroundColor, 5) background darken($ui-backgroundColor, 5)
body[data-theme="dark"] apply-theme(theme)
.snippets body[data-theme={theme}]
background $ui-dark-backgroundColor .snippets
.snippet-item background get-theme-var(theme, 'backgroundColor')
color white .snippet-item
&::after color get-theme-var(theme, 'text-color')
background $ui-dark-borderColor &::after
&:hover background get-theme-var(theme, 'borderColor')
background darken($ui-dark-backgroundColor, 5) &:hover
.snippet-item-selected background darken(get-theme-var(theme, 'backgroundColor'), 5)
background darken($ui-dark-backgroundColor, 5) .snippet-item-selected
.snippet-detail background darken(get-theme-var(theme, 'backgroundColor'), 5)
color white .snippet-detail
.group-control-button color get-theme-var(theme, 'text-color')
colorDarkPrimaryButton() .group-control-button
colorThemedPrimaryButton(theme)
body[data-theme="solarized-dark"] for theme in 'dark' 'solarized-dark' 'dracula'
.snippets apply-theme(theme)
background $ui-solarized-dark-backgroundColor
.snippet-item
color white
&::after
background $ui-solarized-dark-borderColor
&:hover
background darken($ui-solarized-dark-backgroundColor, 5)
.snippet-item-selected
background darken($ui-solarized-dark-backgroundColor, 5)
.snippet-detail
color white
.group-control-button
colorSolarizedDarkPrimaryButton()
body[data-theme="monokai"] for theme in $themes
.snippets apply-theme(theme)
background $ui-monokai-backgroundColor
.snippet-item
color White
&::after
background $ui-monokai-borderColor
&:hover
background darken($ui-monokai-backgroundColor, 5)
.snippet-item-selected
background darken($ui-monokai-backgroundColor, 5)
.snippet-detail
color white
.group-control-button
colorMonokaiPrimaryButton()
body[data-theme="dracula"]
.snippets
background $ui-dracula-backgroundColor
.snippet-item
color #f8f8f2
&::after
background $ui-dracula-borderColor
&:hover
background darken($ui-dracula-backgroundColor, 5)
.snippet-item-selected
background darken($ui-dracula-backgroundColor, 5)
.snippet-detail
color #f8f8f2
.group-control-button
colorDraculaPrimaryButton()

19
browser/main/modals/PreferencesModal/StorageItem.styl
View File

@@ -103,10 +103,17 @@ body[data-theme="solarized-dark"]
background-color $ui-solarized-dark-button-backgroundColor background-color $ui-solarized-dark-button-backgroundColor
color $ui-solarized-dark-text-color color $ui-solarized-dark-text-color
body[data-theme="dracula"] apply-theme(theme)
.header body[data-theme={theme}]
border-color $ui-dracula-borderColor .header
border-color get-theme-var(theme, 'borderColor')
.header-control-button .header-control-button
colorDraculaDefaultButton() colorThemedPrimaryButton(theme)
border-color $ui-dracula-borderColor border-color get-theme-var(theme, 'borderColor')
for theme in 'dracula'
apply-theme(theme)
for theme in $themes
apply-theme(theme)

145
browser/main/modals/PreferencesModal/StoragesTab.styl
View File

@@ -168,122 +168,49 @@ body[data-theme="dark"]
.list-attachement-clear-button .list-attachement-clear-button
colorDarkPrimaryButton() colorDarkPrimaryButton()
body[data-theme="solarized-dark"] apply-theme(theme)
.root body[data-theme={theme}]
color $ui-solarized-dark-text-color .root
color get-theme-var(theme, 'text-color')
.folderList-item .folderList-item
border-bottom $ui-solarized-dark-borderColor border-bottom get-theme-var(theme, 'borderColor')
.folderList-empty .folderList-empty
color $ui-solarized-dark-text-color color get-theme-var(theme, 'text-color')
.list-empty .list-empty
color $ui-solarized-dark-text-color color get-theme-var(theme, 'text-color')
.list-control-addStorageButton .list-control-addStorageButton
border-color $ui-solarized-dark-button-backgroundColor border-color get-theme-var(theme, 'button-backgroundColor')
background-color $ui-solarized-dark-button-backgroundColor background-color get-theme-var(theme, 'button-backgroundColor')
color $ui-solarized-dark-text-color color get-theme-var(theme, 'text-color')
.addStorage-header .addStorage-header
color $ui-solarized-dark-text-color color get-theme-var(theme, 'text-color')
border-color $ui-solarized-dark-borderColor border-color get-theme-var(theme, 'borderColor')
.addStorage-body-section-name-input .addStorage-body-section-name-input
border-color $$ui-solarized-dark-borderColor border-color $get-theme-var(theme, 'borderColor')
.addStorage-body-section-type-description .addStorage-body-section-type-description
color $ui-solarized-dark-text-color color get-theme-var(theme, 'text-color')
.addStorage-body-section-path-button .addStorage-body-section-path-button
colorPrimaryButton() colorPrimaryButton()
.addStorage-body-control .addStorage-body-control
border-color $ui-solarized-dark-borderColor border-color get-theme-var(theme, 'borderColor')
.addStorage-body-control-createButton .addStorage-body-control-createButton
colorDarkPrimaryButton() colorDarkPrimaryButton()
.addStorage-body-control-cancelButton .addStorage-body-control-cancelButton
colorDarkDefaultButton() colorDarkDefaultButton()
border-color $ui-solarized-dark-borderColor border-color get-theme-var(theme, 'borderColor')
.list-attachement-clear-button .list-attachement-clear-button
colorSolarizedDarkPrimaryButton() colorThemedPrimaryButton(theme)
body[data-theme="monokai"] for theme in 'solarized-dark' 'dracula'
.root apply-theme(theme)
color $ui-monokai-text-color
.folderList-item for theme in $themes
border-bottom $ui-monokai-borderColor apply-theme(theme)
.folderList-empty
color $ui-monokai-text-color
.list-empty
color $ui-monokai-text-color
.list-control-addStorageButton
border-color $ui-monokai-button-backgroundColor
background-color $ui-monokai-button-backgroundColor
color $ui-monokai-text-color
.addStorage-header
color $ui-monokai-text-color
border-color $ui-monokai-borderColor
.addStorage-body-section-name-input
border-color $$ui-monokai-borderColor
.addStorage-body-section-type-description
color $ui-monokai-text-color
.addStorage-body-section-path-button
colorPrimaryButton()
.addStorage-body-control
border-color $ui-monokai-borderColor
.addStorage-body-control-createButton
colorDarkPrimaryButton()
.addStorage-body-control-cancelButton
colorDarkDefaultButton()
border-color $ui-monokai-borderColor
.list-attachement-clear-button
colorMonokaiPrimaryButton()
body[data-theme="dracula"]
.root
color $ui-dracula-text-color
.folderList-item
border-bottom $ui-dracula-borderColor
.folderList-empty
color $ui-dracula-text-color
.list-empty
color $ui-dracula-text-color
.list-control-addStorageButton
border-color $ui-dracula-button-backgroundColor
background-color $ui-dracula-button-backgroundColor
color $ui-dracula-text-color
.addStorage-header
color $ui-dracula-text-color
border-color $ui-dracula-borderColor
.addStorage-body-section-name-input
border-color $$ui-dracula-borderColor
.addStorage-body-section-type-description
color $ui-dracula-text-color
.addStorage-body-section-path-button
colorPrimaryButton()
.addStorage-body-control
border-color $ui-dracula-borderColor
.addStorage-body-control-createButton
colorDarkPrimaryButton()
.addStorage-body-control-cancelButton
colorDarkDefaultButton()
border-color $ui-dracula-borderColor
.list-attachement-clear-button
colorDraculaPrimaryButton()

21
browser/main/modals/PreferencesModal/UiTab.js
View File

@@ -12,6 +12,7 @@ import _ from 'lodash'
import i18n from 'browser/lib/i18n' import i18n from 'browser/lib/i18n'
import { getLanguages } from 'browser/lib/Languages' import { getLanguages } from 'browser/lib/Languages'
import normalizeEditorFontFamily from 'browser/lib/normalizeEditorFontFamily' import normalizeEditorFontFamily from 'browser/lib/normalizeEditorFontFamily'
import uiThemes from 'browser/lib/ui-themes'
const OSX = global.process.platform === 'darwin' const OSX = global.process.platform === 'darwin'
@@ -214,12 +215,20 @@ class UiTab extends React.Component {
onChange={(e) => this.handleUIChange(e)} onChange={(e) => this.handleUIChange(e)}
ref='uiTheme' ref='uiTheme'
> >
<option value='default'>{i18n.__('Default')}</option> <optgroup label='Light Themes'>
<option value='white'>{i18n.__('White')}</option> {
<option value='solarized-dark'>{i18n.__('Solarized Dark')}</option> uiThemes.filter(theme => !theme.isDark).sort((a, b) => a.label.localeCompare(b.label)).map(theme => {
<option value='monokai'>{i18n.__('Monokai')}</option> return (<option value={theme.name} key={theme.name}>{theme.label}</option>)
<option value='dracula'>{i18n.__('Dracula')}</option> })
<option value='dark'>{i18n.__('Dark')}</option> }
</optgroup>
<optgroup label='Dark Themes'>
{
uiThemes.filter(theme => theme.isDark).sort((a, b) => a.label.localeCompare(b.label)).map(theme => {
return (<option value={theme.name} key={theme.name}>{theme.label}</option>)
})
}
</optgroup>
</select> </select>
</div> </div>
</div> </div>

36
browser/main/modals/RenameFolderModal.styl
View File

@@ -43,23 +43,31 @@
border-radius 2px border-radius 2px
padding 0 25px padding 0 25px
margin 0 auto margin 0 auto
font-size 14px
colorPrimaryButton() colorPrimaryButton()
body[data-theme="dark"] apply-theme(theme)
.root body[data-theme={theme}]
modalDark() .root
background-color transparent
.header .header
background-color $ui-dark-button--hover-backgroundColor background-color get-theme-var(theme, 'button--hover-backgroundColor')
border-color $ui-dark-borderColor border-color get-theme-var(theme, 'borderColor')
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
.description .description
color $ui-inactive-text-color color $ui-inactive-text-color
.control-input .control-input
border-color $ui-dark-borderColor border-color get-theme-var(theme, 'borderColor')
color $ui-dark-text-color color get-theme-var(theme, 'text-color')
.control-confirmButton .control-confirmButton
colorDarkPrimaryButton() colorThemedPrimaryButton(theme)
for theme in 'dark' 'solarized-dark' 'dracula'
apply-theme(theme)
for theme in $themes
apply-theme(theme)

94
browser/styles/Detail/TagSelect.styl
View File

@@ -51,78 +51,34 @@
background-color alpha($ui-button--active-backgroundColor, 40%) background-color alpha($ui-button--active-backgroundColor, 40%)
color $ui-text-color color $ui-text-color
body[data-theme="dark"]
.TagSelect
.react-autosuggest__input
color $ui-dark-text-color
ul
border-color $ui-dark-borderColor
background-color $ui-dark-noteList-backgroundColor
color $ui-dark-text-color
&:before
background-color $ui-dark-noteList-backgroundColor
li[aria-selected="true"]
background-color $ui-dark-button--active-backgroundColor
color $ui-dark-text-color
body[data-theme="monokai"]
.TagSelect
.react-autosuggest__input
color $ui-monokai-text-color
ul
border-color $ui-monokai-borderColor
background-color $ui-monokai-noteList-backgroundColor
color $ui-monokai-text-color
&:before
background-color $ui-dark-noteList-backgroundColor
li[aria-selected="true"]
background-color $ui-monokai-button-backgroundColor
color $ui-monokai-text-color
body[data-theme="dracula"]
.TagSelect
.react-autosuggest__input
color $ui-dracula-text-color
ul
border-color $ui-dracula-borderColor
background-color $ui-dracula-noteList-backgroundColor
color $ui-dracula-text-color
&:before
background-color $ui-dark-noteList-backgroundColor
li[aria-selected="true"]
background-color $ui-dracula-button-backgroundColor
color $ui-dracula-text-color
body[data-theme="solarized-dark"]
.TagSelect
.react-autosuggest__input
color $ui-solarized-dark-text-color
ul
border-color $ui-solarized-dark-borderColor
background-color $ui-solarized-dark-noteList-backgroundColor
color $ui-solarized-dark-text-color
&:before
background-color $ui-solarized-dark-noteList-backgroundColor
li[aria-selected="true"]
background-color $ui-dark-button--active-backgroundColor
color $ui-solarized-dark-text-color
body[data-theme="white"] body[data-theme="white"]
.TagSelect .TagSelect
ul ul
background-color $ui-white-noteList-backgroundColor background-color $ui-white-noteList-backgroundColor
li[aria-selected="true"] li[aria-selected="true"]
background-color $ui-button--active-backgroundColor background-color $ui-button--active-backgroundColor
apply-theme(theme)
body[data-theme={theme}]
.TagSelect
.react-autosuggest__input
color get-theme-var(theme, 'text-color')
ul
border-color get-theme-var(theme, 'borderColor')
background-color get-theme-var(theme, 'noteList-backgroundColor')
color get-theme-var(theme, 'text-color')
&:before
background-color $ui-dark-noteList-backgroundColor
li[aria-selected="true"]
background-color get-theme-var(theme, 'button-backgroundColor')
color get-theme-var(theme, 'text-color')
for theme in 'dark' 'solarized-dark' 'dracula'
apply-theme(theme)
for theme in $themes
apply-theme(theme)

148
browser/styles/index.styl
View File

@@ -107,36 +107,18 @@ colorDarkPrimaryButton()
&:active:hover &:active:hover
background-color $dark-primary-button-background--active background-color $dark-primary-button-background--active
colorThemedPrimaryButton(theme)
colorSolarizedDarkPrimaryButton() if theme == 'dark'
color $ui-solarized-dark-text-color colorDarkPrimaryButton()
background-color $ui-solarized-dark-button-backgroundColor else
border none color get-theme-var(theme, 'text-color')
&:hover background-color get-theme-var(theme, 'button-backgroundColor')
background-color $dark-primary-button-background--hover border none
&:active &:hover
&:active:hover background-color get-theme-var(theme, 'button--hover-backgroundColor')
background-color $dark-primary-button-background--active &:active
&:active:hover
colorMonokaiPrimaryButton() background-color get-theme-var(theme, 'button--active-backgroundColor')
color $ui-monokai-text-color
background-color $ui-monokai-button-backgroundColor
border none
&:hover
background-color $dark-primary-button-background--hover
&:active
&:active:hover
background-color $dark-primary-button-background--active
colorDraculaPrimaryButton()
color $ui-dracula-text-color
background-color $ui-dracula-button-backgroundColor
border none
&:hover
background-color $ui-dracula-button--active-backgroundColor
&:active
&:active:hover
background-color $ui-dracula-button--active-backgroundColor
// Danger button(Brand color) // Danger button(Brand color)
@@ -257,12 +239,14 @@ $ui-dark-borderColor = #444444
$ui-dark-backgroundColor = #2C3033 $ui-dark-backgroundColor = #2C3033
$ui-dark-noteList-backgroundColor = #2C3033 $ui-dark-noteList-backgroundColor = #2C3033
$ui-dark-noteDetail-backgroundColor = #2C3033 $ui-dark-noteDetail-backgroundColor = #2C3033
$ui-dark-tagList-backgroundColor = #FFFFFF
$ui-dark-tag-backgroundColor = #3A404C $ui-dark-tag-backgroundColor = #3A404C
$dark-background-color = lighten($ui-dark-backgroundColor, 10%) $dark-background-color = lighten($ui-dark-backgroundColor, 10%)
$ui-dark-text-color = #DDDDDD $ui-dark-text-color = #DDDDDD
$ui-dark-button--active-color = #f4f4f4 $ui-dark-button--active-color = #f4f4f4
$ui-dark-button--active-backgroundColor = #3A404C $ui-dark-button--active-backgroundColor = #3A404C
$ui-dark-button--hover-color = #c0392b
$ui-dark-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%) $ui-dark-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%)
$ui-dark-button--focus-borderColor = lighten(#369DCD, 25%) $ui-dark-button--focus-borderColor = lighten(#369DCD, 25%)
$ui-dark-topbar-button-color = #939395 $ui-dark-topbar-button-color = #939395
@@ -332,19 +316,11 @@ darkTooltip()
pointer-events none pointer-events none
transition 0.1s transition 0.1s
modalDark()
position relative
z-index $modal-z-index
width 100%
background-color $ui-dark-backgroundColor
overflow hidden
border-radius $modal-border-radius
/******* Solarized Dark theme ********/ /******* Solarized Dark theme ********/
$ui-solarized-dark-backgroundColor = #073642 $ui-solarized-dark-backgroundColor = #073642
$ui-solarized-dark-noteList-backgroundColor = #073642 $ui-solarized-dark-noteList-backgroundColor = #073642
$ui-solarized-dark-noteDetail-backgroundColor = #073642 $ui-solarized-dark-noteDetail-backgroundColor = #073642
$ui-solarized-dark-tagList-backgroundColor = #FFFFFF
$ui-solarized-dark-text-color = #93a1a1 $ui-solarized-dark-text-color = #93a1a1
$ui-solarized-dark-active-color = #2aa198 $ui-solarized-dark-active-color = #2aa198
@@ -356,21 +332,23 @@ $ui-solarized-dark-tag-backgroundColor = #002b36
$ui-solarized-dark-button-backgroundColor = #002b36 $ui-solarized-dark-button-backgroundColor = #002b36
$ui-solarized-dark-button--active-color = #93a1a1 $ui-solarized-dark-button--active-color = #93a1a1
$ui-solarized-dark-button--active-backgroundColor = #073642 $ui-solarized-dark-button--active-backgroundColor = #073642
$ui-solarized-dark-button--hover-color = #c0392b
$ui-solarized-dark-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%) $ui-solarized-dark-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%)
$ui-solarized-dark-button--focus-borderColor = lighten(#369DCD, 25%) $ui-solarized-dark-button--focus-borderColor = lighten(#369DCD, 25%)
modalSolarizedDark() $ui-solarized-dark-kbd-backgroundColor = darken(#21252B, 10%)
position relative $ui-solarized-dark-kbd-color = $ui-solarized-dark-text-color
z-index $modal-z-index
width 100% $ui-solarized-dark-table-odd-backgroundColor = $ui-solarized-dark-noteDetail-backgroundColor
background-color $ui-solarized-dark-backgroundColor $ui-solarized-dark-table-even-backgroundColor = darken($ui-solarized-dark-noteDetail-backgroundColor, 10%)
overflow hidden $ui-solarized-dark-table-head-backgroundColor = $ui-solarized-dark-table-even-backgroundColor
border-radius $modal-border-radius $ui-solarized-dark-table-borderColor = lighten(darken(#21252B, 10%), 20%)
/******* Monokai theme ********/ /******* Monokai theme ********/
$ui-monokai-backgroundColor = #272822 $ui-monokai-backgroundColor = #272822
$ui-monokai-noteList-backgroundColor = #272822 $ui-monokai-noteList-backgroundColor = #272822
$ui-monokai-noteDetail-backgroundColor = #272822 $ui-monokai-noteDetail-backgroundColor = #272822
$ui-monokai-tagList-backgroundColor = #FFFFFF
$ui-monokai-text-color = #f8f8f2 $ui-monokai-text-color = #f8f8f2
$ui-monokai-active-color = #f92672 $ui-monokai-active-color = #f92672
@@ -382,21 +360,23 @@ $ui-monokai-tag-backgroundColor = #373831
$ui-monokai-button-backgroundColor = #373831 $ui-monokai-button-backgroundColor = #373831
$ui-monokai-button--active-color = white $ui-monokai-button--active-color = white
$ui-monokai-button--active-backgroundColor = #f92672 $ui-monokai-button--active-backgroundColor = #f92672
$ui-monokai-button--hover-color = #f92672
$ui-monokai-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%) $ui-monokai-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%)
$ui-monokai-button--focus-borderColor = lighten(#369DCD, 25%) $ui-monokai-button--focus-borderColor = lighten(#369DCD, 25%)
modalMonokai() $ui-monokai-kbd-backgroundColor = darken(#21252B, 10%)
position relative $ui-monokai-kbd-color = $ui-monokai-text-color
z-index $modal-z-index
width 100% $ui-monokai-table-odd-backgroundColor = $ui-monokai-noteDetail-backgroundColor
background-color $ui-monokai-backgroundColor $ui-monokai-table-even-backgroundColor = darken($ui-monokai-noteDetail-backgroundColor, 10%)
overflow hidden $ui-monokai-table-head-backgroundColor = $ui-monokai-table-even-backgroundColor
border-radius $modal-border-radius $ui-monokai-table-borderColor = lighten(darken(#21252B, 10%), 20%)
/******* Dracula theme ********/ /******* Dracula theme ********/
$ui-dracula-backgroundColor = #282a36 $ui-dracula-backgroundColor = #282a36
$ui-dracula-noteList-backgroundColor = #282a36 $ui-dracula-noteList-backgroundColor = #282a36
$ui-dracula-noteDetail-backgroundColor = #282a36 $ui-dracula-noteDetail-backgroundColor = #282a36
$ui-dracula-tagList-backgroundColor = #f8f8f2
$ui-dracula-text-color = #f8f8f2 $ui-dracula-text-color = #f8f8f2
$ui-dracula-active-color = #bd93f9 $ui-dracula-active-color = #bd93f9
@@ -408,22 +388,52 @@ $ui-dracula-tag-backgroundColor = #8be9fd
$ui-dracula-button-backgroundColor = #44475a $ui-dracula-button-backgroundColor = #44475a
$ui-dracula-button--active-color = #f8f8f2 $ui-dracula-button--active-color = #f8f8f2
$ui-dracula-button--active-backgroundColor = #bd93f9 $ui-dracula-button--active-backgroundColor = #bd93f9
$ui-dracula-button--hover-color = #ff79c6
$ui-dracula-button--hover-backgroundColor = lighten($ui-dracula-backgroundColor, 10%) $ui-dracula-button--hover-backgroundColor = lighten($ui-dracula-backgroundColor, 10%)
$ui-dracula-button--focus-borderColor = lighten(#44475a, 25%) $ui-dracula-button--focus-borderColor = lighten(#44475a, 25%)
colorDraculaDefaultButton()
border-color $ui-dracula-borderColor
color $ui-dracula-text-color
background-color $ui-dracula-button-backgroundColor
&:hover
background-color $ui-dracula-button--hover-backgroundColor
&:active
&:active:hover
background-color $ui-dracula-button--active-backgroundColor
modalDracula() $ui-dracula-kbd-backgroundColor = darken(#21252B, 10%)
position relative $ui-dracula-kbd-color = $ui-monokai-text-color
z-index $modal-z-index
width 100% $ui-dracula-table-odd-backgroundColor = $ui-dracula-noteDetail-backgroundColor
background-color $ui-dracula-backgroundColor $ui-dracula-table-even-backgroundColor = darken($ui-dracula-noteDetail-backgroundColor, 10%)
overflow hidden $ui-dracula-table-head-backgroundColor = $ui-dracula-table-even-backgroundColor
border-radius $modal-border-radius $ui-dracula-table-borderColor = lighten(darken(#21252B, 10%), 20%)
/******* Nord theme ********/
$ui-nord-backgroundColor = #2e3440
$ui-nord-noteList-backgroundColor = #2e3440
$ui-nord-noteDetail-backgroundColor = #2e3440
$ui-nord-tagList-backgroundColor = #FFFFFF
$ui-nord-text-color = #d8dee9
$ui-nord-inactive-text-color = #8fbcbb
$ui-nord-active-color = #5e81ac
$ui-nord-borderColor = #3b4252
$ui-nord-tag-backgroundColor = #3b4252
$ui-nord-button-backgroundColor = #434c5e
$ui-nord-button--active-color = #d8dee9
$ui-nord-button--active-backgroundColor = #5e81ac
$ui-nord-button--hover-color = #c0392b
$ui-nord-button--hover-backgroundColor = #434c5e
$ui-nord-kbd-backgroundColor = $ui-nord-text-color
$ui-nord-kbd-color = $ui-nord-backgroundColor
$ui-nord-table-odd-backgroundColor = $ui-nord-noteDetail-backgroundColor
$ui-nord-table-even-backgroundColor = darken($ui-nord-noteDetail-backgroundColor, 10%)
$ui-nord-table-head-backgroundColor = $ui-nord-table-even-backgroundColor
$ui-nord-table-borderColor = lighten(darken(#21252B, 10%), 20%)
debug-theme-var(theme, suffix)
'$ui-' + theme + '-' + suffix
get-theme-var(theme, suffix)
lookup('$ui-' + theme + '-' + suffix)
$themes = 'monokai' 'nord'

22
contributing.md
View File

@@ -50,14 +50,26 @@ GPL v3 is too strict to be compatible with another license, so we thought it mig
# Contributing to Boostnote (Korean) # Contributing to Boostnote (Korean)
### 버그 리포트를 보고할 때 ### 이슈 또는 버그 리포트를 제출하는 절차
이슈의 양식은 없습니다. 하지만 부탁이 있습니다. 이슈를 제기할 때에 사용하는 양식(issue template)이 준비되어 있으니, 해당 양식에 맞추어 최대한 구체적인 정보를 첨부하여 주시기 바랍니다.
**개발자 도구를 연 상태의 Boostnote 스크린샷을 첨부해주세요**
도움을 주셔서 감사합니다. 도움을 주셔서 감사합니다.
### Pull Request의 저작권에 관하여 ### Pull Request를 제출하는 절차
Pull Request에 사용하는 양식(pull request template)이 준비되어 있으니, 코드를 접수하기 전에 미리 해당 양식을 작성해 주시기 바랍니다. 코드가 해결하고자 하는 문제가 무엇인지 정확히 알면 저희가 훨씬 신속하게 해당 pull request를 검토할 수 있습니다.
다음 사항을 준수하여 주십시오:
- [`code_style.md`](docs/code_style.md) 에 정리된 코드 스타일 정보를 확인할 것
- 테스트 코드를 작성하고, 아래와 같은 테스트 커맨드를 실행할 것
```
npm run test
```
- 아래와 같은 린팅 커맨드로 코드를 확인할 것
```
npm run lint
```
### 저작권에 관한 기준
당신이 pull request를 요청하면, 코드 변경에 대한 저작권을 BoostIO에 양도한다는 것에 동의한다는 의미입니다. 당신이 pull request를 요청하면, 코드 변경에 대한 저작권을 BoostIO에 양도한다는 것에 동의한다는 의미입니다.

2
docs/build.md
View File

@@ -37,7 +37,7 @@ Visit the page for the pull request and look at the end of the url for the PR nu
https://github.com/BoostIO/Boostnote/pull/2794 https://github.com/BoostIO/Boostnote/pull/2794
</pre> </pre>
In the following, replace \<PR> with that number (no brackets). In the following, replace \<PR> with that number (no brackets).
For the above url, you would replace \<PR> with 2794 For URLs below, you would replace \<PR> with 2794
_If you do not have a local copy of the master branch yet_ _If you do not have a local copy of the master branch yet_
``` ```

58
docs/ko/build.md
View File

@@ -5,8 +5,6 @@
* npm: 6.x * npm: 6.x
* node: 8.x * node: 8.x
`$ grunt pre-build`를 `npm v5.x`에서 실행할 수 없기 때문에, 반드시 `npm v4.x`를 사용하셔야 합니다.
## 개발 ## 개발
개발에 있어서 Webpack HRM을 사용합니다. 개발에 있어서 Webpack HRM을 사용합니다.
@@ -29,6 +27,34 @@ $ yarn run dev
> 1. 콤포넌트의 컨스트럭터 함수를 수정할 경우 > 1. 콤포넌트의 컨스트럭터 함수를 수정할 경우
> 2. 새로운 CSS코드를 추가할 경우(1.과 같은 이유: CSS클래스는 콤포넌트마다 다시 만들어 지는데, 이 작업은 컨스트럭터에서 일어납니다.) > 2. 새로운 CSS코드를 추가할 경우(1.과 같은 이유: CSS클래스는 콤포넌트마다 다시 만들어 지는데, 이 작업은 컨스트럭터에서 일어납니다.)
## Pull Request에 사용된 코드를 적용하는 방법
관련된 Pull request 페이지를 방문하여, url 스트링 마지막에 표기된 PR 번호를 확인합니다.
<pre>
https://github.com/BoostIO/Boostnote/pull/2794
</pre>
아래의 커맨드를 실행하면서, \<PR> 대신에 위에서 확인한 번호를 입력합니다 (부등호 신호는 빼고 입력하세요).
위에 보여진 예시의 경우, \<PR> 자리에 2794를 입력하면 됩니다.
_본인의 로컬 컴퓨터에 마스터 브랜치가 복사되어 있지 않은 경우_
```
git clone https://github.com/BoostIO/Boostnote.git
cd Boostnote
git fetch origin pull/<PR>/head:<PR>
git checkout <PR>
```
_이미 마스터 브랜치를 로컬 컴퓨터에 저장해둔 경우_
```
git fetch origin pull/<PR>/head:<PR>
git checkout <PR>
```
_To compile and run the code_
```
yarn
yarn run dev
```
## 배포 ## 배포
Boostnote에서는 배포 자동화를 위하여 그런트를 사용합니다. Boostnote에서는 배포 자동화를 위하여 그런트를 사용합니다.
@@ -43,3 +69,31 @@ grunt pre-build
실행 파일은 `dist`에서 찾을 수 있습니다. 이 경우, 인증이 되어있지 않기 때문에 업데이터는 사용할 수 없습니다. 실행 파일은 `dist`에서 찾을 수 있습니다. 이 경우, 인증이 되어있지 않기 때문에 업데이터는 사용할 수 없습니다.
필요로 하다면, 이 실행파일에 Codesign나 Authenticode등의 서명을 할 수 있습니다. 필요로 하다면, 이 실행파일에 Codesign나 Authenticode등의 서명을 할 수 있습니다.
## 독자적인 배포판을 제작하는 방법 (deb, rpm)
배포판 패키지를 제작하려면 (우분투, 페도라 등) 리눅스 플랫폼에서 `grunt build` 커맨드를 실행하면 됩니다.
> 참조: 동일한 환경에서 `.deb` 파일과 `.rpm` 파일을 모두 만들 수 있습니다.
지원되는 버전의 `node`와 `npm`을 설치한 다음, 빌드에 필요한 패키지를 설치합니다.
우분투/데비안 환경 (Ubuntu/Debian):
```
$ sudo apt-get install -y rpm fakeroot
```
페도라 환경 (Fedora):
```
$ sudo dnf install -y dpkg dpkg-dev rpm-build fakeroot
```
그 다음 `grunt build` 커맨드를 실행합니다.
```
$ grunt build
```
`dist` 디렉토리에 `.deb` 파일과 `.rpm` 파일이 새롭게 생성됩니다.

20
docs/ko/debug.md
View File

@@ -1,5 +1,7 @@
# Boostnote의 디버그 방법(Electron app) # Boostnote의 디버그 방법(Electron app)
## 구글 크롬 Developer Tools를 사용한 디버깅
Boostnote는 Electron 애플리케이션이므로 Chromium위에서 작동합니다. 그렇기 때문에 개발자분들은 Google Chrome 브라우저에서 처럼 `Developer Tools`를 사용하실 수 있습니다. Boostnote는 Electron 애플리케이션이므로 Chromium위에서 작동합니다. 그렇기 때문에 개발자분들은 Google Chrome 브라우저에서 처럼 `Developer Tools`를 사용하실 수 있습니다.
다음과 같이 `Developer Tools`를 실행할 수 있습니다: 다음과 같이 `Developer Tools`를 실행할 수 있습니다:
@@ -10,12 +12,26 @@ Boostnote는 Electron 애플리케이션이므로 Chromium위에서 작동합니
에러가 발생할 때에는, 에러메시지가 `console`위에 표시 됩니다. 에러가 발생할 때에는, 에러메시지가 `console`위에 표시 됩니다.
## 디버깅 ### 디버깅
예를들면 `debugger`를 사용하여 코드 안에서 다음과 같이 일시 정지지점을 설정할 수 있습니다: 예를들면 `debugger`를 사용하여 코드 안에서 다음과 같이 일시 정지지점을 설정할 수 있습니다:
![debugger](https://cloud.githubusercontent.com/assets/11307908/24343879/9459efea-127d-11e7-9943-f60bf7f66d4a.png) ![debugger](https://cloud.githubusercontent.com/assets/11307908/24343879/9459efea-127d-11e7-9943-f60bf7f66d4a.png)
이는 단순한 하나의 예시에 불과합니다. 자기자신에게 가장 잘 맞는 디버그 방법을 찾는 것도 좋을 것 입니다. 이는 단순한 하나의 예시에 불과합니다. 자기자신에게 가장 잘 맞는 디버그 방법을 찾는 것도 좋을 것 입니다.
## 참고 ### 참고
* [디버그에 관한 Google Chrome의 공식 문서](https://developer.chrome.com/devtools) * [디버그에 관한 Google Chrome의 공식 문서](https://developer.chrome.com/devtools)
## 비주얼 스튜디오 코드를 사용한 디버깅
1. **[크롬 디버깅 플러그인](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome 'Install Debugger for Chrome')** 을 비주얼 스튜디오 코드에 설치한 후, 프로그램을 닫았다가 재실행합니다.
2. **Shift+Command+B** 키를 누르거나, **Terminal** 메뉴 하단에 있는 **Run Build Task** 메뉴를 선택한 후 **Build Boostnote** 를 선택합니다. 아니면 터미널에서 곧바로 `yarn run watch`를 실행해도 됩니다.
3. 위의 절차가 실행되고 있을 때, 사이드바 **Activity Bar**에서 **Debug view**를 선택합니다. 키보드 단축키로는 **Shift+Command+D**를 눌러도 됩니다..
4. **Debug configuration**에서 **Boostnote All** 설정을 선택한 후, 초록색 화살표를 클릭하거나 **F5** 키를 누르면 디버깅이 시작됩니다.
5. 이 시점에서는 **Boostnote**가 실행되고 있을 텐데, 두 개의 프로세스가 진행중인 것을 볼 수 있을 겁니다. 바로 **Boostnote Main** 프로세스와 **Boostnote Renderer** 프로세스입니다. 이제 비주얼 스튜디오 코드에서 곧바로 **디버깅 정지지점 (debug breakpoint)** 을 설정할 수 있습니다. 만약에 지정한 **정지지점 (breakpoint)** 이 등록되지 않는다면, **Boostnote Renderer** 와 **Boostnote Main** 프로세스 사이를 번갈아 확인해 보아야 합니다.
### 참고
- [일렉트론 애플리케이션 디버깅 공식 튜토리얼](https://electronjs.org/docs/tutorial/application-debugging)
- [비쥬얼 스튜디오 코드용 크롬 디버깅 플러그인](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)

64
docs/zh_TW/build.md
View File

@@ -10,7 +10,6 @@
## 開發 ## 開發
我們使用 Webpack HMR 來開發 Boostnote。 我們使用 Webpack HMR 來開發 Boostnote。

在專案根目錄底下執行下列指令，將會以原始設置啟動 Boostnote。 在專案根目錄底下執行下列指令，將會以原始設置啟動 Boostnote。
**用 yarn 來安裝必要 packages** **用 yarn 來安裝必要 packages**
@@ -19,41 +18,70 @@
$ yarn $ yarn
``` ```
**開始開發** **編譯及執行**
``` ```
$ yarn run dev $ yarn run dev
``` ```
> ### Notice > ### 注意
> >
> There are some cases where you have to refresh the app manually. > 以下是一些可能要手動重新啟動程式的情況。
> >
> 1. When editing a constructor method of a component > 1. 修改一個 component 的 constructor 方法時。
> 2. When adding a new css class (similar to 1: the CSS class is re-written by each component. This process occurs at the Constructor method.) > 2. 新增新的 CSS 類別時 (和 1 很類似：CSS 類別會被每個 component 重寫過。這個過程在 constructor 方法中發生)。
## Deploy ## 使用 Pull Requests 中的程式碼
瀏覽 pull request 的頁面，從 URL 的後面找到 PR 號碼。
We use Grunt to automate deployment. <pre>
You can build the program by using `grunt`. However, we don't recommend this because the default task includes codesign and authenticode. https://github.com/BoostIO/Boostnote/pull/2794
</pre>
接著，於底下步驟中把 \<PR> 換成這個號碼 (沒有括號)。
請將下方 URL 中的 \<PR> 換置成 2794。
So, we've prepared a separate script which just makes an executable file. _如果您還未取得一份 master branch 的本地備份_
```
git clone https://github.com/BoostIO/Boostnote.git
cd Boostnote
git fetch origin pull/<PR>/head:<PR>
git checkout <PR>
```
_如果您已經擁有了 master branch_
```
git fetch origin pull/<PR>/head:<PR>
git checkout <PR>
```
_編譯及執行程式碼_
```
yarn
yarn run dev
```
## 佈署
我們用 Grunt 做自動佈署。
您能使用 `grung` 建構本程式。然而，我們並不建議這麼做，因為預設工作流程包含了程式簽名以及 Authenticode 驗證。
所以，我們準備了一份額外的腳本用於建構可執行檔。
``` ```
grunt pre-build grunt pre-build
``` ```
You will find the executable in the `dist` directory. Note, the auto updater won't work because the app isn't signed. 您可以在 `dist` 資料夾下找到可執行檔。注意，自動更新功能 (auto updater) 並不會生效，因為程式沒有被簽署過。
If you find it necessary, you can use codesign or authenticode with this executable. 必要時您可以使用程式簽名或 authenticode 驗證執行檔。
## Make own distribution packages (deb, rpm) ## 建立您自己的發行版套件 (deb, rpm)
Distribution packages are created by exec `grunt build` on Linux platform (e.g. Ubuntu, Fedora). 發行版套件可以透過在 Linux 平台上 (如 Ubuntu, Fedora) 執行 `grunt build` 來建立。
> Note: You can create both `.deb` and `.rpm` in a single environment. > 注意：您可以在同個環境中同時建立 `.deb` 及`.rpm` 。
After installing the supported version of `node` and `npm`, install build dependency packages. 安裝支援版本的 `node` 和 `npm` 後，安裝編譯相依套件。
Ubuntu/Debian: Ubuntu/Debian:
@@ -67,10 +95,10 @@ Fedora:
$ sudo dnf install -y dpkg dpkg-dev rpm-build fakeroot $ sudo dnf install -y dpkg dpkg-dev rpm-build fakeroot
``` ```
Then execute `grunt build`. 接著執行 `grunt build`。
``` ```
$ grunt build $ grunt build
``` ```
You will find `.deb` and `.rpm` in the `dist` directory. 於 `dist` 資料夾下找到 `.deb` 及 `.rpm`。

60
yarn.lock
View File

@@ -486,7 +486,7 @@ async@^0.9.0, async@~0.9.0:
version "0.9.2" version "0.9.2"
resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d" resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d"
async@^1.3.0, async@^1.4.0, async@^1.4.2, async@^1.5.1, async@^1.5.2: async@^1.3.0, async@^1.4.2, async@^1.5.1, async@^1.5.2:
version "1.5.2" version "1.5.2"
resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a" resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
@@ -3669,8 +3669,9 @@ extend-shallow@^3.0.0, extend-shallow@^3.0.2:
is-extendable "^1.0.1" is-extendable "^1.0.1"
extend@~3.0.1: extend@~3.0.1:
version "3.0.1" version "3.0.2"
resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444" resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
extglob@^0.3.1: extglob@^0.3.1:
version "0.3.2" version "0.3.2"
@@ -3952,6 +3953,7 @@ font-awesome@^4.3.0:
for-in@^1.0.1, for-in@^1.0.2: for-in@^1.0.1, for-in@^1.0.2:
version "1.0.2" version "1.0.2"
resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80" resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
integrity sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=
for-own@^0.1.4: for-own@^0.1.4:
version "0.1.5" version "0.1.5"
@@ -4420,14 +4422,15 @@ gud@^1.0.0:
integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw== integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==
handlebars@^4.0.3: handlebars@^4.0.3:
version "4.0.11" version "4.5.3"
resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.11.tgz#630a35dfe0294bc281edae6ffc5d329fc7982dcc" resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.5.3.tgz#5cf75bd8714f7605713511a56be7c349becb0482"
integrity sha512-3yPecJoJHK/4c6aZhSvxOyG4vJKDshV36VHp0iVCDVh7o9w2vwi3NSnL2MMPj3YdduqaBcu7cGbggJQM0br9xA==
dependencies: dependencies:
async "^1.4.0" neo-async "^2.6.0"
optimist "^0.6.1" optimist "^0.6.1"
source-map "^0.4.4" source-map "^0.6.1"
optionalDependencies: optionalDependencies:
uglify-js "^2.6" uglify-js "^3.1.4"
har-schema@^2.0.0: har-schema@^2.0.0:
version "2.0.0" version "2.0.0"
@@ -4997,6 +5000,7 @@ is-extendable@^0.1.0, is-extendable@^0.1.1:
is-extendable@^1.0.1: is-extendable@^1.0.1:
version "1.0.1" version "1.0.1"
resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-1.0.1.tgz#a7470f9e426733d81bd81e1155264e3a3507cab4" resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-1.0.1.tgz#a7470f9e426733d81bd81e1155264e3a3507cab4"
integrity sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==
dependencies: dependencies:
is-plain-object "^2.0.4" is-plain-object "^2.0.4"
@@ -5126,6 +5130,7 @@ is-plain-obj@^1.0.0:
is-plain-object@^2.0.1, is-plain-object@^2.0.3, is-plain-object@^2.0.4: is-plain-object@^2.0.1, is-plain-object@^2.0.3, is-plain-object@^2.0.4:
version "2.0.4" version "2.0.4"
resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677" resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
integrity sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==
dependencies: dependencies:
isobject "^3.0.1" isobject "^3.0.1"
@@ -5229,6 +5234,7 @@ isobject@^2.0.0:
isobject@^3.0.0, isobject@^3.0.1: isobject@^3.0.0, isobject@^3.0.1:
version "3.0.1" version "3.0.1"
resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df" resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
isomorphic-fetch@^2.1.1: isomorphic-fetch@^2.1.1:
version "2.2.1" version "2.2.1"
@@ -6553,6 +6559,7 @@ minimist@^1.1.0, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0:
minimist@~0.0.1: minimist@~0.0.1:
version "0.0.10" version "0.0.10"
resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf" resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
integrity sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=
minipass@^2.2.1, minipass@^2.3.3: minipass@^2.2.1, minipass@^2.3.3:
version "2.3.3" version "2.3.3"
@@ -6568,8 +6575,9 @@ minizlib@^1.1.0:
minipass "^2.2.1" minipass "^2.2.1"
mixin-deep@^1.1.3, mixin-deep@^1.2.0: mixin-deep@^1.1.3, mixin-deep@^1.2.0:
version "1.3.1" version "1.3.2"
resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.1.tgz#a49e7268dce1a0d9698e45326c5626df3543d0fe" resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566"
integrity sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==
dependencies: dependencies:
for-in "^1.0.2" for-in "^1.0.2"
is-extendable "^1.0.1" is-extendable "^1.0.1"
@@ -6696,6 +6704,11 @@ negotiator@0.6.1:
version "0.6.1" version "0.6.1"
resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9" resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
neo-async@^2.6.0:
version "2.6.1"
resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==
next-tick@1: next-tick@1:
version "1.0.0" version "1.0.0"
resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c" resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
@@ -7021,6 +7034,7 @@ open@0.0.5:
optimist@^0.6.1, optimist@~0.6.0, optimist@~0.6.1: optimist@^0.6.1, optimist@~0.6.0, optimist@~0.6.1:
version "0.6.1" version "0.6.1"
resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686" resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
integrity sha1-2j6nRob6IaGaERwybpDrFaAZZoY=
dependencies: dependencies:
minimist "~0.0.1" minimist "~0.0.1"
wordwrap "~0.0.2" wordwrap "~0.0.2"
@@ -8976,12 +8990,6 @@ source-map@0.5.6:
version "0.5.6" version "0.5.6"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
source-map@^0.4.4, source-map@~0.4.1:
version "0.4.4"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
dependencies:
amdefine ">=0.0.4"
source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1: source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1:
version "0.5.7" version "0.5.7"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
@@ -8990,6 +8998,12 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
version "0.6.1" version "0.6.1"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
source-map@~0.4.1:
version "0.4.4"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
dependencies:
amdefine ">=0.0.4"
sourcemapped-stacktrace@^1.1.6: sourcemapped-stacktrace@^1.1.6:
version "1.1.8" version "1.1.8"
resolved "https://registry.yarnpkg.com/sourcemapped-stacktrace/-/sourcemapped-stacktrace-1.1.8.tgz#6b7a3f1a6fb15f6d40e701e23ce404553480d688" resolved "https://registry.yarnpkg.com/sourcemapped-stacktrace/-/sourcemapped-stacktrace-1.1.8.tgz#6b7a3f1a6fb15f6d40e701e23ce404553480d688"
@@ -9680,14 +9694,13 @@ uc.micro@^1.0.5:
resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac" resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA== integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
uglify-js@^2.6: uglify-js@^3.1.4:
version "2.8.29" version "3.7.3"
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd" resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.7.3.tgz#f918fce9182f466d5140f24bb0ff35c2d32dcc6a"
integrity sha512-7tINm46/3puUA4hCkKYo4Xdts+JDaVC9ZPRcG8Xw9R4nhO/gZgUM3TENq8IF4Vatk8qCig4MzP/c8G4u2BkVQg==
dependencies: dependencies:
source-map "~0.5.1" commander "~2.20.3"
yargs "~3.10.0" source-map "~0.6.1"
optionalDependencies:
uglify-to-browserify "~1.0.0"
uglify-js@^3.5.1: uglify-js@^3.5.1:
version "3.6.9" version "3.6.9"
@@ -10144,6 +10157,7 @@ wordwrap@0.0.2:
wordwrap@~0.0.2: wordwrap@~0.0.2:
version "0.0.3" version "0.0.3"
resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107" resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
integrity sha1-o9XabNXAvAAI03I0u68b7WMFkQc=
wordwrap@~1.0.0: wordwrap@~1.0.0:
version "1.0.0" version "1.0.0"