mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-13 09:46:22 +00:00
271 lines
6.8 KiB
Stylus
271 lines
6.8 KiB
Stylus
noTagsColor = #999
|
|
iptFocusBorderColor = #369DCD
|
|
|
|
infoButton()
|
|
display inline-block
|
|
border-radius 16.5px
|
|
cursor pointer
|
|
height 33px
|
|
width 33px
|
|
border none
|
|
margin-right 5px
|
|
font-size 18px
|
|
color inactiveTextColor
|
|
background-color white
|
|
padding 0
|
|
&:hover
|
|
color inherit
|
|
.ArticleDetail
|
|
absolute right bottom
|
|
top 60px
|
|
left 450px
|
|
padding 10px
|
|
background-color #E6E6E6
|
|
border-top 1px solid borderColor
|
|
border-left 1px solid borderColor
|
|
&.empty
|
|
.ArticleDetail-empty-box
|
|
line-height 72px
|
|
font-size 42px
|
|
height 320px
|
|
display flex
|
|
align-items center
|
|
.ArticleDetail-empty-box-message
|
|
text-align center
|
|
width 100%
|
|
color inactiveTextColor
|
|
.ArticleDetail-info
|
|
height 70px
|
|
width 100%
|
|
font-size 12px
|
|
user-select none
|
|
&>.tutorial
|
|
position fixed
|
|
z-index 35
|
|
.ArticleDetail-info-folder
|
|
display inline-block
|
|
max-width 100px
|
|
overflow ellipsis
|
|
height 10px
|
|
width 150px
|
|
height 27px
|
|
outline none
|
|
background-color darken(white, 5%)
|
|
border 1px solid transparent
|
|
&:hover
|
|
background-color white
|
|
&:focus
|
|
border-color iptFocusBorderColor
|
|
&>.tutorial
|
|
position fixed
|
|
z-index 35
|
|
.ArticleDetail-info-status
|
|
padding 0 5px
|
|
.unsaved-mark
|
|
color brandColor
|
|
.ArticleDetail-info-control
|
|
float right
|
|
.ShareButton
|
|
display inline-block
|
|
&>button, .ShareButton-open-button
|
|
infoButton()
|
|
.tooltip
|
|
tooltip()
|
|
margin-top 30px
|
|
&:hover
|
|
.tooltip
|
|
opacity 1
|
|
&:nth-child(1) .tooltip
|
|
margin-left -40px
|
|
&:nth-child(2) .tooltip
|
|
margin-left -80px
|
|
&:nth-child(3) .tooltip
|
|
margin-left -60px
|
|
&:nth-child(4) .tooltip
|
|
margin-left -50px
|
|
.ShareButton-dropdown
|
|
position fixed
|
|
&.hide
|
|
display none
|
|
|
|
.TagSelect
|
|
margin-top 5px
|
|
.TagSelect-tags
|
|
white-space nowrap
|
|
overflow-x auto
|
|
position relative
|
|
noSelect()
|
|
z-index 30
|
|
background-color #E6E6E6
|
|
clearfix()
|
|
.TagSelect-tags-item
|
|
background-color transparent
|
|
color white
|
|
margin 0 2px
|
|
padding 0
|
|
height 17px
|
|
float left
|
|
button.TagSelect-tags-item-remove
|
|
display block
|
|
float left
|
|
background-color transparent
|
|
border none
|
|
font-size 8px
|
|
color white
|
|
width 15px
|
|
height 17px
|
|
text-align center
|
|
line-height 12px
|
|
padding 0
|
|
margin 0
|
|
border-top solid 1px darken(brandColor, 5%)
|
|
border-bottom solid 1px darken(brandColor, 5%)
|
|
border-left solid 1px darken(brandColor, 5%)
|
|
border-radius left 2px
|
|
background-color brandColor
|
|
&:hover
|
|
background-color lighten(brandColor, 10%)
|
|
border-color lighten(brandColor, 10%)
|
|
.TagSelect-tags-item-label
|
|
background-color brandColor
|
|
float left
|
|
font-size 12px
|
|
border-top solid 1px darken(brandColor, 5%)
|
|
border-bottom solid 1px darken(brandColor, 5%)
|
|
border-right solid 1px darken(brandColor, 5%)
|
|
line-height 15px
|
|
padding 0 5px
|
|
border-radius right 2px
|
|
input.TagSelect-input
|
|
background-color transparent
|
|
border none
|
|
outline none
|
|
margin 0 2px
|
|
transition 0.15s
|
|
height 18px
|
|
&:focus
|
|
font-size 13px
|
|
.TagSelect-suggest
|
|
position fixed
|
|
width 150px
|
|
max-height 150px
|
|
background-color white
|
|
z-index 5
|
|
border 1px solid borderColor
|
|
border-radius 5px
|
|
&>button
|
|
width 100%
|
|
display block
|
|
padding 0 15px
|
|
height 33px
|
|
line-height 33px
|
|
background-color transparent
|
|
border none
|
|
text-align left
|
|
font-size 14px
|
|
&:hover
|
|
background-color darken(white, 10%)
|
|
.ArticleDetail-panel
|
|
position absolute
|
|
top 70px
|
|
left 10px
|
|
right 10px
|
|
bottom 10px
|
|
overflow-x hidden
|
|
overflow-y auto
|
|
background-color white
|
|
border-radius 5px
|
|
border solid 1px lighten(borderColor, 15%)
|
|
&>.ArticleDetail-panel-header
|
|
display block
|
|
height 60px
|
|
&>.tutorial
|
|
fixed right
|
|
z-index 35
|
|
font-style italic
|
|
.ArticleDetail-panel-header-mode
|
|
z-index 30
|
|
background-color white
|
|
absolute top bottom
|
|
right 10px
|
|
display block
|
|
height 33px
|
|
margin-top 14px
|
|
width 120px
|
|
margin-right 15px
|
|
border solid 1px borderColor
|
|
border-radius 5px
|
|
transition width 0.15s
|
|
user-select none
|
|
&.idle
|
|
cursor pointer
|
|
&:hover
|
|
background-color darken(white, 5%)
|
|
.ModeIcon
|
|
padding 0 5px
|
|
line-height 33px
|
|
&.edit
|
|
border-color iptFocusBorderColor
|
|
input
|
|
width 120px
|
|
line-height 31px
|
|
padding 0 10px
|
|
border none
|
|
outline none
|
|
background-color transparent
|
|
font-size 14px
|
|
.ModeSelect-options
|
|
position fixed
|
|
width 120px
|
|
z-index 10
|
|
border 1px solid borderColor
|
|
border-radius 5px
|
|
background-color white
|
|
max-height 250px
|
|
overflow-y auto
|
|
margin-top 5px
|
|
.ModeSelect-options-item
|
|
height 33px
|
|
line-height 33px
|
|
cursor pointer
|
|
&.active, &:hover.active
|
|
background-color brandColor
|
|
color white
|
|
.ModeIcon
|
|
width 30px
|
|
text-align center
|
|
display inline-block
|
|
&:hover
|
|
background-color darken(white, 10%)
|
|
.ArticleDetail-panel-header-title
|
|
absolute left top
|
|
right 145px
|
|
padding 0 15px
|
|
background-color transparent
|
|
input
|
|
border none
|
|
line-height 60px
|
|
width 100%
|
|
font-size 24px
|
|
outline none
|
|
.MarkdownPreview
|
|
absolute left right bottom
|
|
top 60px
|
|
marked()
|
|
box-sizing border-box
|
|
padding 5px 15px
|
|
border-top solid 1px borderColor
|
|
overflow-y auto
|
|
user-select all
|
|
&.empty
|
|
color lighten(inactiveTextColor, 10%)
|
|
user-select none
|
|
font-size 14px
|
|
.CodeEditor
|
|
absolute left right bottom
|
|
top 60px
|
|
border-top solid 1px borderColor
|
|
min-height 300px
|
|
border-bottom-left-radius 5px
|
|
border-bottom-right-radius 5px
|