From 313e8b8c9815bb43a520ba57f717548e363c3aa9 Mon Sep 17 00:00:00 2001 From: Kazu Yokomizo Date: Thu, 6 Apr 2017 22:11:59 +0900 Subject: [PATCH] Fix the dark theme layout of Sidebar and NoteList --- browser/components/NoteItem.styl | 8 ++++---- browser/components/NoteItemSimple.styl | 8 ++++---- browser/components/SideNavFilter.styl | 9 ++++++--- browser/main/NoteList/NoteList.styl | 8 +++++++- browser/main/global.styl | 4 ++-- browser/styles/index.styl | 3 ++- 6 files changed, 25 insertions(+), 15 deletions(-) diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl index ad3ec91f..edeb6963 100644 --- a/browser/components/NoteItem.styl +++ b/browser/components/NoteItem.styl @@ -127,9 +127,9 @@ body[data-theme="dark"] border-color $ui-dark-borderColor background-color $ui-dark-noteList-backgroundColor &:active - background-color $ui-active-color + background-color $ui-dark-button--active-backgroundColor &:hover - background-color alpha($ui-active-color, 20%) + background-color alpha($ui-dark-button--active-backgroundColor, 20%) .item-wrapper border-color $ui-dark-borderColor @@ -137,7 +137,7 @@ body[data-theme="dark"] .item--active @extend .item border-color $ui-dark-borderColor - background-color $ui-active-color + background-color $ui-dark-button--active-backgroundColor .item-wrapper border-color transparent .item-title @@ -148,7 +148,7 @@ body[data-theme="dark"] .item-bottom-tagList-empty color white &:hover - background-color $ui-active-color + background-color $ui-dark-button--active-backgroundColor .item-title color $ui-dark-text-color diff --git a/browser/components/NoteItemSimple.styl b/browser/components/NoteItemSimple.styl index 29a2e76f..3c7e8899 100644 --- a/browser/components/NoteItemSimple.styl +++ b/browser/components/NoteItemSimple.styl @@ -63,20 +63,20 @@ body[data-theme="dark"] border-color $ui-dark-borderColor background-color $ui-dark-noteList-backgroundColor &:active - background-color $ui-active-color + background-color $ui-dark-button--active-backgroundColor &:hover - background-color alpha($ui-active-color, 20%) + background-color alpha($ui-dark-button--active-backgroundColor, 20%) .item-simple--active @extend .item-simple border-color $ui-dark-borderColor - background-color $ui-active-color + background-color $ui-dark-button--active-backgroundColor .item-simple-title .item-simple-title-empty color white border-color transparent &:hover - background-color $ui-active-color + background-color $ui-dark-button--active-backgroundColor .item-simple-title color $ui-dark-text-color diff --git a/browser/components/SideNavFilter.styl b/browser/components/SideNavFilter.styl index 10567f0b..71a41472 100644 --- a/browser/components/SideNavFilter.styl +++ b/browser/components/SideNavFilter.styl @@ -49,10 +49,13 @@ body[data-theme="dark"] .menu-button navDarkButtonColor() + &:active + background-color $ui-dark-button--active-backgroundColor + &:hover + background-color alpha($ui-dark-button--active-backgroundColor, 20%) .menu-button--active - @extend .menu-button - background-color $ui-dark-button--active-backgroundColor color $ui-dark-button--active-color - &:hover + background-color $ui-dark-button--active-backgroundColor + &:active background-color $ui-dark-button--active-backgroundColor diff --git a/browser/main/NoteList/NoteList.styl b/browser/main/NoteList/NoteList.styl index 0adb3678..3484100e 100644 --- a/browser/main/NoteList/NoteList.styl +++ b/browser/main/NoteList/NoteList.styl @@ -26,6 +26,8 @@ $control-height = 30px padding 0 border none background-color transparent + outline none + cursor pointer font-size 10px .control-button @@ -67,4 +69,8 @@ body[data-theme="dark"] color $ui-dark-inactive-text-color &:hover color $ui-dark-text-color - + + .control-button--active + color $ui-dark-text-color + &:active + color $ui-dark-text-color \ No newline at end of file diff --git a/browser/main/global.styl b/browser/main/global.styl index b0b643b6..552e0d6c 100644 --- a/browser/main/global.styl +++ b/browser/main/global.styl @@ -1,6 +1,6 @@ global-reset() -DEFAULT_FONTS = 'Lato', helvetica, arial, sans-serif +DEFAULT_FONTS = 'OpenSans', helvetica, arial, sans-serif html, body width 100% @@ -11,7 +11,7 @@ body font-family DEFAULT_FONTS color textColor font-size fontSize - font-weight 400 + font-weight 200 button, input, select, textarea font-family DEFAULT_FONTS diff --git a/browser/styles/index.styl b/browser/styles/index.styl index 26a00f1b..b72d1a73 100644 --- a/browser/styles/index.styl +++ b/browser/styles/index.styl @@ -158,6 +158,7 @@ topBarButtonLight() opacity 1 // Dark theme +$ui-dark-active-color = #3A404C $ui-dark-borderColor = lighten(#21252B, 20%) $ui-dark-backgroundColor = #1D1D1D $ui-dark-noteList-backgroundColor = #181818 @@ -166,7 +167,7 @@ $ui-dark-tag-backgroundColor = rgba(255, 255, 255, 0.3) $dark-background-color = lighten($ui-dark-backgroundColor, 10%) $ui-dark-text-color = #DDDDDD $ui-dark-button--active-color = white -$ui-dark-button--active-backgroundColor = #6AA5E9 +$ui-dark-button--active-backgroundColor = #3A404C $ui-dark-button--hover-backgroundColor = lighten($ui-dark-backgroundColor, 10%) $ui-dark-button--focus-borderColor = lighten(#369DCD, 25%) $ui-dark-topbar-button-color = #939395