1
0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-13 09:46:22 +00:00
Files
Boostnote/browser/main/SideNav/SideNav.styl
Kazu Yokomizo 95586b3156 Tag list layout
2017-10-15 15:46:30 +09:00

95 lines
2.0 KiB
Stylus

.root
absolute top left bottom
width $sideNav-width
background-color #f9f9f9
user-select none
color $ui-text-color
.top
height 45px
.top-menu
navButtonColor()
position absolute
top 20px
right 5px
&:hover
color $ui-text-color
&:active, &:active:hover
color $ui-text-color
background-color alpha($ui-button--active-backgroundColor, 20%)
.switch-buttons
background-color transparent
border 1px solid $ui-borderColor
width 100px
margin 20px auto 0px auto
border-radius 1px
.non-active-button
navButtonColor()
font-weight 600
width 49px
.active-button
@extend .non-active-button
background-color $ui-button--active-backgroundColor
color $ui-text-color
&:hover
background-color alpha($ui-button--active-backgroundColor, 70%)
color alpha($ui-text-color, 70%)
&:active, &:active:hover
background-color $ui-button--active-backgroundColor
.top-menu-label
margin-left 5px
overflow ellipsis
.tag-title
height 65px
position relative
left 15px
p
color $ui-text-color
.tagList
absolute left right
bottom 37px
overflow-y auto
position relative
body[data-theme="dark"]
.root, .root--folded
border-color $ui-dark-borderColor
background-color $ui-dark-backgroundColor
color $ui-dark-text-color
.top
border-color $ui-dark-borderColor
.top-menu
navDarkButtonColor()
&:active
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
&:hover
background-color alpha($ui-dark-button--active-backgroundColor, 20%)
.switch-buttons
border-color $ui-dark-borderColor
.non-active-button
navDarkButtonColor()
.active-button
@extend .non-active-button
background-color $ui-dark-button--active-backgroundColor
color $ui-dark-text-color
&:hover
background-color alpha($ui-dark-button--active-backgroundColor, 70%)
color alpha($ui-dark-text-color, 70%)
&:active, &:active:hover
background-color $$ui-dark-button--active-backgroundColor
.tag-title
p
color alpha($ui-dark-text-color, 60%)