1
0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-13 01:36:22 +00:00
Files
Boostnote/browser/components/NoteItem.styl
Kazu Yokomizo 6ce6a7036b Fix typo
2017-04-15 12:33:16 +09:00

175 lines
3.7 KiB
Stylus

$control-height = 30px
.root
absolute left bottom
top $topBar-height - 1
background-color $ui-noteList-backgroundColor
.item
position relative
padding 0 20px
user-select none
cursor pointer
background-color $ui-noteList-backgroundColor
transition background-color 0.2s
&:hover
background-color alpha($ui-button--active-backgroundColor, 40%)
.item-title
.item-title-icon
.item-bottom-time
.item-bottom-tagList-item
transition 0.15s
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-wrapper
padding 15px 0
border-bottom $ui-border
.item--active
@extend .item
background-color $ui-button--active-backgroundColor
color $ui-text-color
.item-title
.item-title-empty
.item-bottom-tagList-empty
.item-bottom-time
.item-title-icon
color $ui-text-color
.item-bottom-tagList-item
background-color transparent
color $ui-text-color
.item-wrapper
border-color transparent
&:hover
background-color $ui-button--active-backgroundColor
.item-title-icon
position relative
font-size 12px
color $ui-inactive-text-color
.item-title
font-size 13px
position relative
top -12px
left 20px
padding-right 15px
padding-bottom 4px
overflow ellipsis
color $ui-inactive-text-color
.item-title-empty
font-weight normal
color $ui-inactive-text-color
.item-bottom
position relative
bottom 0px
margin-top 2px
height 20px
font-size 12px
line-height 20px
overflow ellipsis
display flex
.item-bottom-tagList
flex 1
overflow ellipsis
line-height 20px
padding-left 2px
.item-bottom-tagList-item
font-size 10px
margin-right 8px
padding 0
height 20px
box-sizing border-box
border-radius 20px
vertical-align middle
background-color transparent
color $ui-inactive-text-color
.item-bottom-time
color $ui-inactive-text-color
font-size 10px
padding-left 2px
padding-bottom 2px
.item-star
position absolute
top 19px
left 5px
width 34px
height 34px
color $ui-favorite-star-button-color
font-size 12px
padding 0
border-radius 17px
body[data-theme="dark"]
.root
border-color $ui-dark-borderColor
background-color $ui-dark-noteList-backgroundColor
.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
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-wrapper
border-color $ui-dark-borderColor
.item--active
border-color $ui-dark-borderColor
background-color $ui-dark-button--active-backgroundColor
.item-wrapper
border-color transparent
.item-title
.item-title-icon
.item-bottom-time
color $ui-dark-text-color
.item-bottom-tagList-item
background-color transparent
color $ui-dark-text-color
.item-title
color $ui-inactive-text-color
.item-title-icon
color $ui-inactive-text-color
.item-title-empty
color $ui-inactive-text-color
.item-bottom-tagList-item
background-color transparent
color $ui-inactive-text-color
.item-bottom-tagList-empty
color $ui-inactive-text-color
vertical-align middle