diff --git a/browser/components/NoteItem.styl b/browser/components/NoteItem.styl index 542eb6e1..212fedec 100644 --- a/browser/components/NoteItem.styl +++ b/browser/components/NoteItem.styl @@ -11,9 +11,9 @@ $control-height = 30px user-select none cursor pointer background-color $ui-noteList-backgroundColor - transition background-color 0.2s + transition 0.2s &:hover - background-color alpha($ui-button--active-backgroundColor, 40%) + background-color alpha($ui-button--active-backgroundColor, 20%) .item-title .item-title-icon .item-bottom-time @@ -25,7 +25,7 @@ $control-height = 30px .item-star color $ui-favorite-star-button-color &:active - background-color $ui-button--active-backgroundColor + background-color alpha($ui-button--active-backgroundColor, 40%) color $ui-text-color .item-title .item-title-icon @@ -43,7 +43,7 @@ $control-height = 30px .item--active @extend .item - background-color $ui-button--active-backgroundColor + background-color alpha($ui-button--active-backgroundColor, 60%) color $ui-text-color .item-title .item-title-empty @@ -59,12 +59,12 @@ $control-height = 30px .item-star color $ui-favorite-star-button-color &:hover - background-color alpha($ui-button--active-backgroundColor, 50%) + background-color alpha($ui-button--active-backgroundColor, 40%) color #e74c3c .menu-button-label color $ui-text-color &:active, &:active:hover - background-color alpha($ui-button--active-backgroundColor, 50%) + background-color alpha($ui-button--active-backgroundColor, 40%) color #e74c3c .menu-button-label color $ui-text-color @@ -145,6 +145,18 @@ $control-height = 30px padding 0 border-radius 17px +body[data-theme="white"] + .item + background-color $ui-white-noteList-backgroundColor + &:hover + background-color alpha($ui-button--active-backgroundColor, 40%) + &:active + background-color $ui-button--active-backgroundColor + + .item--active + @extend .item + background-color $ui-button--active-backgroundColor + body[data-theme="dark"] .root border-color $ui-dark-borderColor diff --git a/browser/components/NoteItemSimple.styl b/browser/components/NoteItemSimple.styl index aa01d4ab..1a84f26c 100644 --- a/browser/components/NoteItemSimple.styl +++ b/browser/components/NoteItemSimple.styl @@ -11,15 +11,15 @@ $control-height = 30px user-select none cursor pointer background-color $ui-noteList-backgroundColor - transition background-color 0.15s + transition 0.2s &:hover - background-color alpha($ui-button--active-backgroundColor, 40%) + background-color alpha($ui-button--active-backgroundColor, 20%) .item-simple-title .item-simple-title-empty .item-simple-title-icon color $ui-text-color &:active - background-color $ui-button--active-backgroundColor + background-color alpha($ui-button--active-backgroundColor, 40%) color $ui-text-color .item-simple-title .item-simple-title-empty @@ -28,7 +28,7 @@ $control-height = 30px .item-simple--active @extend .item-simple - background-color $ui-button--active-backgroundColor + background-color alpha($ui-button--active-backgroundColor, 60%) color $ui-text-color .item-simple-title .item-simple-title-empty @@ -37,12 +37,12 @@ $control-height = 30px .item-simple-title-icon color $ui-text-color &:hover - background-color alpha($ui-button--active-backgroundColor, 50%) + background-color alpha($ui-button--active-backgroundColor, 40%) color #e74c3c .menu-button-label color $ui-text-color &:active, &:active:hover - background-color alpha($ui-button--active-backgroundColor, 50%) + background-color alpha($ui-button--active-backgroundColor, 40%) color #e74c3c .menu-button-label color $ui-text-color @@ -67,6 +67,18 @@ $control-height = 30px font-weight normal color $ui-inactive-text-color +body[data-theme="white"] + .item-simple + background-color $ui-white-noteList-backgroundColor + &:hover + background-color alpha($ui-button--active-backgroundColor, 40%) + &:active + background-color $ui-button--active-backgroundColor + + .item-simple--active + @extend .item-simple + background-color $ui-button--active-backgroundColor + body[data-theme="dark"] .root border-color $ui-dark-borderColor diff --git a/browser/main/NewNoteButton/NewNoteButton.styl b/browser/main/NewNoteButton/NewNoteButton.styl index 44273319..cb49501c 100644 --- a/browser/main/NewNoteButton/NewNoteButton.styl +++ b/browser/main/NewNoteButton/NewNoteButton.styl @@ -44,6 +44,13 @@ $control-height = 34px opacity 0 transition 0.1s +body[data-theme="white"] + .root, .root--expanded + background-color $ui-white-noteList-backgroundColor + + .control-newNoteButton + background-color $ui-white-noteList-backgroundColor + body[data-theme="dark"] .root, .root--expanded background-color $ui-dark-noteList-backgroundColor diff --git a/browser/main/NoteList/NoteList.styl b/browser/main/NoteList/NoteList.styl index 892ad3d8..2a8d4543 100644 --- a/browser/main/NoteList/NoteList.styl +++ b/browser/main/NoteList/NoteList.styl @@ -59,6 +59,13 @@ $control-height = 30px top $control-height overflow auto +body[data-theme="white"] + .root + background-color $ui-white-noteList-backgroundColor + + .control + background-color $ui-white-noteList-backgroundColor + body[data-theme="dark"] .root border-color $ui-dark-borderColor diff --git a/browser/main/TopBar/TopBar.styl b/browser/main/TopBar/TopBar.styl index 0a88d32e..5ef7e363 100644 --- a/browser/main/TopBar/TopBar.styl +++ b/browser/main/TopBar/TopBar.styl @@ -112,6 +112,21 @@ $control-height = 34px opacity 0 transition 0.1s +body[data-theme="white"] + .root, .root--expanded + background-color $ui-white-noteList-backgroundColor + + .control + border-color $ui-dark-borderColor + + .control-search + background-color $ui-white-noteList-backgroundColor + + .control-search-input + background-color $ui-white-noteList-backgroundColor + input + background-color $ui-white-noteList-backgroundColor + body[data-theme="dark"] .root, .root--expanded background-color $ui-dark-noteList-backgroundColor diff --git a/browser/styles/index.styl b/browser/styles/index.styl index be9260b8..55474a0e 100644 --- a/browser/styles/index.styl +++ b/browser/styles/index.styl @@ -15,7 +15,7 @@ $ui-text-color = #333333 $ui-inactive-text-color = #939395 $ui-borderColor = #D1D1D1 $ui-backgroundColor = #FFFFFF -$ui-noteList-backgroundColor = #F3F3F3 +$ui-noteList-backgroundColor = #FBFBFB $ui-noteDetail-backgroundColor = #F4F4F4 $ui-border = solid 1px $ui-borderColor $ui-active-color = #6AA5E9 @@ -197,6 +197,8 @@ topBarButtonLight() opacity 1 // White theme +$ui-white-noteList-backgroundColor = #F3F3F3 + /** * Nav */