diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl index 36245606..b50b8470 100644 --- a/browser/components/NoteItem.styl +++ b/browser/components/NoteItem.styl @@ -17,18 +17,22 @@ $control-height = 30px .item-title .item-title-icon .item-bottom-time - .item-bottom-tagList-item transition 0.15s color $ui-text-color + .item-bottom-tagList-item + background-color alpha(white, 0.6) + color $ui-text-color &:active background-color $ui-button--active-backgroundColor color $ui-text-color .item-title .item-title-icon .item-bottom-time - .item-bottom-tagList-item transition 0.15s color $ui-text-color + .item-bottom-tagList-item + background-color alpha(white, 0.6) + color $ui-text-color .item-wrapper padding 15px 0 @@ -45,7 +49,7 @@ $control-height = 30px .item-title-icon color $ui-text-color .item-bottom-tagList-item - background-color transparent + background-color alpha(white, 0.6) color $ui-text-color .item-wrapper border-color transparent @@ -93,9 +97,10 @@ $control-height = 30px padding 0 height 20px box-sizing border-box - border-radius 20px + border-radius 2px + padding 1px 2px vertical-align middle - background-color transparent + background-color white color $ui-inactive-text-color .item-bottom-time @@ -123,23 +128,31 @@ body[data-theme="dark"] .item border-color $ui-dark-borderColor background-color $ui-dark-noteList-backgroundColor - &:active - background-color $ui-dark-button--active-backgroundColor - .item-title - .item-title-icon - .item-bottom-time - .item-bottom-tagList-item - transition 0.15s - color $ui-dark-text-color &:hover + transition 0.15s background-color alpha($ui-dark-button--active-backgroundColor, 20%) .item-title .item-title-icon .item-bottom-time - .item-bottom-tagList-item transition 0.15s color $ui-dark-text-color - + .item-bottom-tagList-item + transition 0.15s + background-color alpha($ui-dark-button--active-backgroundColor, 40%) + color $ui-dark-text-color + &:active + transition 0.15s + background-color $ui-dark-button--active-backgroundColor + .item-title + .item-title-icon + .item-bottom-time + transition 0.15s + color $ui-dark-text-color + .item-bottom-tagList-item + transition 0.15s + background-color alpha(white, 10%) + color $ui-dark-text-color + .item-wrapper border-color $ui-dark-borderColor @@ -153,7 +166,7 @@ body[data-theme="dark"] .item-bottom-time color $ui-dark-text-color .item-bottom-tagList-item - background-color transparent + background-color alpha(white, 10%) color $ui-dark-text-color .item-title @@ -166,7 +179,7 @@ body[data-theme="dark"] color $ui-inactive-text-color .item-bottom-tagList-item - background-color transparent + background-color alpha($ui-dark-button--active-backgroundColor, 40%) color $ui-inactive-text-color .item-bottom-tagList-empty diff --git a/browser/components/SideNavFilter.js b/browser/components/SideNavFilter.js index 01af53e2..84cc9729 100644 --- a/browser/components/SideNavFilter.js +++ b/browser/components/SideNavFilter.js @@ -24,7 +24,7 @@ const SideNavFilter = ({ All Notes - diff --git a/browser/components/SideNavFilter.styl b/browser/components/SideNavFilter.styl index b857308f..1aab9ef8 100644 --- a/browser/components/SideNavFilter.styl +++ b/browser/components/SideNavFilter.styl @@ -12,11 +12,27 @@ .menu-button--active @extend .menu-button - color $ui-text-color + color #e74c3c background-color $ui-button--active-backgroundColor + .menu-button-label + color $ui-text-color &:hover background-color $ui-button--active-backgroundColor + color #e74c3c + .menu-button-label + color $ui-text-color + +.menu-button-star--active + @extend .menu-button + color #F9BF3B + background-color $ui-button--active-backgroundColor + .menu-button-label color $ui-text-color + &:hover + background-color $ui-button--active-backgroundColor + color #F9BF3B + .menu-button-label + color $ui-text-color .menu-button-label margin-left 5px @@ -55,9 +71,25 @@ body[data-theme="dark"] &:hover background-color alpha($ui-dark-button--active-backgroundColor, 20%) color $ui-dark-text-color + .menu-button--active - color $ui-dark-text-color + color #c0392b background-color $ui-dark-button--active-backgroundColor - &:active + .menu-button-label + color $ui-dark-text-color + &:hover background-color $ui-dark-button--active-backgroundColor - color $ui-dark-text-color \ No newline at end of file + color #c0392b + .menu-button-label + color $ui-dark-text-color + + .menu-button-star--active + color $ui-favorite-star-button-color + background-color $ui-dark-button--active-backgroundColor + .menu-button-label + color $ui-dark-text-color + &:hover + background-color $ui-dark-button--active-backgroundColor + color $ui-favorite-star-button-color + .menu-button-label + color $ui-dark-text-color \ No newline at end of file diff --git a/browser/main/Detail/Detail.styl b/browser/main/Detail/Detail.styl index 11f1edcc..81b3e08c 100644 --- a/browser/main/Detail/Detail.styl +++ b/browser/main/Detail/Detail.styl @@ -1,8 +1,5 @@ .root absolute top bottom right - border-width 1px 0 - border-style solid - border-color $ui-borderColor .empty height 320px @@ -18,7 +15,6 @@ body[data-theme="dark"] .root - border-color $ui-dark-borderColor background-color $ui-dark-backgroundColor .empty-message color $ui-dark-inactive-text-color diff --git a/browser/main/Detail/StarButton.styl b/browser/main/Detail/StarButton.styl index f8236ccb..57627982 100644 --- a/browser/main/Detail/StarButton.styl +++ b/browser/main/Detail/StarButton.styl @@ -2,20 +2,27 @@ left 7px top 0 padding 0 + color alpha($ui-favorite-star-button-color, 60%) &:hover - background-color #DCDCDC - .icon - transform rotate(-72deg) - .tooltip - opacity 1 + transition 0.15s + background-color alpha($ui-button--active-backgroundColor, 40%) + color $ui-favorite-star-button-color + &:active + transition 0.15s + background-color alpha($ui-button--active-backgroundColor, 40%) + color $ui-favorite-star-button-color .root--active @extend .root color $ui-favorite-star-button-color &:hover + transition 0.15s color $ui-favorite-star-button-color - .icon - transform rotate(-72deg) + background-color alpha($ui-button--active-backgroundColor, 40%) + &:active + transition 0.15s + color $ui-favorite-star-button-color + background-color alpha($ui-button--active-backgroundColor, 40%) .icon transition transform 0.15s @@ -23,4 +30,18 @@ body[data-theme="dark"] .root &:hover - background-color #272B32 \ No newline at end of file + transition 0.15s + background-color alpha($ui-dark-button--active-backgroundColor, 20%) + color $ui-favorite-star-button-color + &:active + transition 0.15s + background-color alpha($ui-dark-button--active-backgroundColor, 20%) + color $ui-favorite-star-button-color + + .root--active + @extend .root + color $ui-favorite-star-button-color + &:hover + transition 0.15s + color $ui-favorite-star-button-color + background-color alpha($ui-dark-button--active-backgroundColor, 20%) \ No newline at end of file diff --git a/browser/main/Detail/TagSelect.styl b/browser/main/Detail/TagSelect.styl index 9802f20d..beb80019 100644 --- a/browser/main/Detail/TagSelect.styl +++ b/browser/main/Detail/TagSelect.styl @@ -12,12 +12,12 @@ .tag display inline-block - margin 0 2px - padding-left 10px + margin 1px 3px + padding 0 vertical-align middle height 20px background-color alpha($ui-tag-backgroundColor, 10%) - border-radius 20px + border-radius 3px overflow hidden clearfix() @@ -54,34 +54,11 @@ height 24px box-sizing borde-box border none - border-bottom $ui-border background-color transparent outline none padding 0 4px - &:focus - border-color $ui-input--focus-borderColor = #369DCD - &:disabled - background-color $ui-input--disabled-backgroundColor = #DDD - -.add-tag-button - display inline - margin-left 5px - width 20px - height 20px - border none - border-radius 20px - padding 0 - color #FFFFFF - &:hover - background-color rgba(0, 0, 0, 0.3) - &:active, &:active:hover - background-color rgba(0, 0, 0, 0.5) - color $ui-button--active-color body[data-theme="dark"] - .icon - color $ui-dark-button-color - .tag background-color alpha($ui-dark-tag-backgroundColor, 60%) @@ -94,17 +71,6 @@ body[data-theme="dark"] color $ui-dark-text-color .newTag - border-color $ui-dark-borderColor + border-color none background-color transparent - color $ui-dark-text-color - &:focus - border-color $ui-input--focus-borderColor = #369DCD - &:disabled - background-color $ui-input--disabled-backgroundColor = #DDD - - .add-tag-button - &:hover - background-color rgba(255, 255, 255, 0.3) - &:active, &:active:hover - background-color rgba(255, 255, 255, 0.5) - color $ui-button--active-color + color $ui-dark-text-color \ No newline at end of file diff --git a/browser/main/NoteList/NoteList.styl b/browser/main/NoteList/NoteList.styl index d4e68574..cc2be3d3 100644 --- a/browser/main/NoteList/NoteList.styl +++ b/browser/main/NoteList/NoteList.styl @@ -20,8 +20,8 @@ $control-height = 30px padding-left 25px .control-sortBy-select - margin-left 0 - font-size 12px + appearance: none; + margin-left 3px color $ui-inactive-text-color padding 0 border none @@ -29,6 +29,9 @@ $control-height = 30px outline none cursor pointer font-size 10px + &:hover + transition 0.2s + color $ui-text-color .control-button width 25px @@ -58,13 +61,15 @@ body[data-theme="dark"] border-color $ui-dark-borderColor background-color $ui-dark-noteList-backgroundColor - .control - background-color $ui-dark-noteList-backgroundColor - .control background-color $ui-dark-noteList-backgroundColor border-color $ui-dark-borderColor + .control-sortBy-select + &:hover + transition 0.2s + color $ui-dark-text-color + .control-button color $ui-dark-inactive-text-color &:hover diff --git a/browser/main/NoteList/index.js b/browser/main/NoteList/index.js index c6d3464c..b296bc5a 100644 --- a/browser/main/NoteList/index.js +++ b/browser/main/NoteList/index.js @@ -404,7 +404,7 @@ class NoteList extends React.Component { > - Sort by + this.handleSortByChange(e)} diff --git a/browser/main/SideNav/SideNav.styl b/browser/main/SideNav/SideNav.styl index 353e5d70..349079e6 100644 --- a/browser/main/SideNav/SideNav.styl +++ b/browser/main/SideNav/SideNav.styl @@ -122,3 +122,9 @@ body[data-theme="dark"] .storageList-empty color $ui-dark-inactive-text-color + + .navToggle + &:hover + background-color alpha($ui-dark-button--active-backgroundColor, 20%) + transition 0.15s + color $ui-dark-text-color \ No newline at end of file diff --git a/browser/main/StatusBar/StatusBar.styl b/browser/main/StatusBar/StatusBar.styl index 027f6d1d..8dd8dc99 100644 --- a/browser/main/StatusBar/StatusBar.styl +++ b/browser/main/StatusBar/StatusBar.styl @@ -5,7 +5,6 @@ height $statusBar-height background-color $ui-noteDetail-backgroundColor display flex - box-shadow $note-detail-box-shadow .blank flex 1 @@ -44,6 +43,10 @@ body[data-theme="dark"] .zoom border-color $ui-dark-borderColor + &:hover + background-color alpha($ui-dark-button--active-backgroundColor, 20%) + transition 0.15s + color $ui-dark-text-color .help navButtonColor() diff --git a/browser/main/TopBar/TopBar.styl b/browser/main/TopBar/TopBar.styl index cb1aae31..9ccdf936 100644 --- a/browser/main/TopBar/TopBar.styl +++ b/browser/main/TopBar/TopBar.styl @@ -145,7 +145,7 @@ body[data-theme="dark"] .control-search-optionList-item border-color $ui-dark-borderColor &:hover - background-color lighten($ui-dark-button--hover-backgroundColor, 15%) + background-color alpha($ui-dark-button--active-backgroundColor, 20%) .control-search-optionList-item-folder color $ui-dark-text-color .control-search-optionList-item-folder-surfix @@ -160,10 +160,14 @@ body[data-theme="dark"] color $ui-inactive-text-color .control-newPostButton - colorDarkDefaultButton() + color $ui-inactive-text-color border-color $ui-dark-borderColor background-color $ui-dark-noteList-backgroundColor + &:hover + transition 0.15s + color $ui-dark-text-color &:active + background-color alpha($ui-dark-button--active-backgroundColor, 20%) border-color $ui-dark-button--active-backgroundColor .control-newPostButton-tooltip diff --git a/browser/styles/index.styl b/browser/styles/index.styl index 84deb0be..49371436 100644 --- a/browser/styles/index.styl +++ b/browser/styles/index.styl @@ -127,15 +127,15 @@ navButtonColor() border none color $ui-button-color background-color transparent - transition color background-color 0.15s + transition 0.15s &:hover background-color alpha($ui-button--active-backgroundColor, 20%) - transition color background-color 0.15s + transition 0.15s color $ui-text-color &:active, &:active:hover background-color $ui-button--active-backgroundColor color $ui-text-color - transition color background-color 0.15s + transition 0.15s /** * # Modal Stuff * These will be moved lib/modal @@ -217,12 +217,14 @@ navDarkButtonColor() border none color $ui-dark-button-color background-color transparent - transition color background-color 0.15s + transition 0.15s &:hover color $ui-dark-text-color background-color $ui-dark-button--hover-backgroundColor + transition 0.15s &:active &:active:hover + transition 0.15s color $ui-dark-text-color topBarButtonDark()