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

Fix the dark theme layout of Sidebar and NoteList

Browse Source
This commit is contained in:
Kazu Yokomizo
2017-04-06 22:11:59 +09:00
parent de45852790
commit 313e8b8c98
6 changed files with 25 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
browser/components/NoteItem.styl
View File

@@ -127,9 +127,9 @@ body[data-theme="dark"]
border-color $ui-dark-borderColor border-color $ui-dark-borderColor
background-color $ui-dark-noteList-backgroundColor background-color $ui-dark-noteList-backgroundColor
&:active &:active
background-color $ui-active-color background-color $ui-dark-button--active-backgroundColor
&:hover &:hover
background-color alpha($ui-active-color, 20%) background-color alpha($ui-dark-button--active-backgroundColor, 20%)
.item-wrapper .item-wrapper
border-color $ui-dark-borderColor border-color $ui-dark-borderColor
@@ -137,7 +137,7 @@ body[data-theme="dark"]
.item--active .item--active
@extend .item @extend .item
border-color $ui-dark-borderColor border-color $ui-dark-borderColor
background-color $ui-active-color background-color $ui-dark-button--active-backgroundColor
.item-wrapper .item-wrapper
border-color transparent border-color transparent
.item-title .item-title
@@ -148,7 +148,7 @@ body[data-theme="dark"]
.item-bottom-tagList-empty .item-bottom-tagList-empty
color white color white
&:hover &:hover
background-color $ui-active-color background-color $ui-dark-button--active-backgroundColor
.item-title .item-title
color $ui-dark-text-color color $ui-dark-text-color

8
browser/components/NoteItemSimple.styl
View File

@@ -63,20 +63,20 @@ body[data-theme="dark"]
border-color $ui-dark-borderColor border-color $ui-dark-borderColor
background-color $ui-dark-noteList-backgroundColor background-color $ui-dark-noteList-backgroundColor
&:active &:active
background-color $ui-active-color background-color $ui-dark-button--active-backgroundColor
&:hover &:hover
background-color alpha($ui-active-color, 20%) background-color alpha($ui-dark-button--active-backgroundColor, 20%)
.item-simple--active .item-simple--active
@extend .item-simple @extend .item-simple
border-color $ui-dark-borderColor border-color $ui-dark-borderColor
background-color $ui-active-color background-color $ui-dark-button--active-backgroundColor
.item-simple-title .item-simple-title
.item-simple-title-empty .item-simple-title-empty
color white color white
border-color transparent border-color transparent
&:hover &:hover
background-color $ui-active-color background-color $ui-dark-button--active-backgroundColor
.item-simple-title .item-simple-title
color $ui-dark-text-color color $ui-dark-text-color

9
browser/components/SideNavFilter.styl
View File

@@ -49,10 +49,13 @@
body[data-theme="dark"] body[data-theme="dark"]
.menu-button .menu-button
navDarkButtonColor() navDarkButtonColor()
&:active
background-color $ui-dark-button--active-backgroundColor
&:hover
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
.menu-button--active .menu-button--active
@extend .menu-button
background-color $ui-dark-button--active-backgroundColor
color $ui-dark-button--active-color color $ui-dark-button--active-color
&:hover background-color $ui-dark-button--active-backgroundColor
&:active
background-color $ui-dark-button--active-backgroundColor background-color $ui-dark-button--active-backgroundColor

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

@@ -26,6 +26,8 @@ $control-height = 30px
padding 0 padding 0
border none border none
background-color transparent background-color transparent
outline none
cursor pointer
font-size 10px font-size 10px
.control-button .control-button
@@ -67,4 +69,8 @@ body[data-theme="dark"]
color $ui-dark-inactive-text-color color $ui-dark-inactive-text-color
&:hover &:hover
color $ui-dark-text-color color $ui-dark-text-color
.control-button--active
color $ui-dark-text-color
&:active
color $ui-dark-text-color

4
browser/main/global.styl
View File

@@ -1,6 +1,6 @@
global-reset() global-reset()
DEFAULT_FONTS = 'Lato', helvetica, arial, sans-serif DEFAULT_FONTS = 'OpenSans', helvetica, arial, sans-serif
html, body html, body
width 100% width 100%
@@ -11,7 +11,7 @@ body
font-family DEFAULT_FONTS font-family DEFAULT_FONTS
color textColor color textColor
font-size fontSize font-size fontSize
font-weight 400 font-weight 200
button, input, select, textarea button, input, select, textarea
font-family DEFAULT_FONTS font-family DEFAULT_FONTS

3
browser/styles/index.styl
View File

@@ -158,6 +158,7 @@ topBarButtonLight()
opacity 1 opacity 1
// Dark theme // Dark theme
$ui-dark-active-color = #3A404C
$ui-dark-borderColor = lighten(#21252B, 20%) $ui-dark-borderColor = lighten(#21252B, 20%)
$ui-dark-backgroundColor = #1D1D1D $ui-dark-backgroundColor = #1D1D1D
$ui-dark-noteList-backgroundColor = #181818 $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%) $dark-background-color = lighten($ui-dark-backgroundColor, 10%)
$ui-dark-text-color = #DDDDDD $ui-dark-text-color = #DDDDDD
$ui-dark-button--active-color = white $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--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