mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-13 01:36:22 +00:00
347 lines
9.0 KiB
Stylus
347 lines
9.0 KiB
Stylus
noTagsColor = #999
|
|
|
|
infoButton()
|
|
display inline-block
|
|
border-radius 16.5px
|
|
cursor pointer
|
|
height 33px
|
|
width 33px
|
|
margin-right 5px
|
|
font-size 18px
|
|
color inactiveTextColor
|
|
background-color white
|
|
padding 0
|
|
border 1px solid white
|
|
&:focus
|
|
border-color focusBorderColor
|
|
&: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 focusBorderColor
|
|
&>.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
|
|
&>button
|
|
&:nth-child(2) .tooltip
|
|
margin-left -65px
|
|
.ShareButton-open-button .tooltip
|
|
margin-left -40px
|
|
.ShareButton-dropdown
|
|
position fixed
|
|
width 185px
|
|
z-index 35
|
|
background-color #F0F0F0
|
|
padding 4px 0
|
|
border-radius 5px
|
|
right 5px
|
|
top 95px
|
|
box-shadow 0px 0px 10px 1px #c0c0c0
|
|
border 1px solid #bcbcbc
|
|
&.hide
|
|
display none
|
|
&>button
|
|
background-color transparent
|
|
height 21px
|
|
width 100%
|
|
border none
|
|
padding-left 20px
|
|
text-align left
|
|
font-size 13px
|
|
font-family 'Helvetica Neue'
|
|
&:hover
|
|
background-color #4297FE
|
|
color white
|
|
.ShareButton-url
|
|
height 40px
|
|
width 100%
|
|
position relative
|
|
padding 0 5px
|
|
.ShareButton-url-input
|
|
height 21px
|
|
border none
|
|
width 143px
|
|
float left
|
|
border-top-left-radius 3px
|
|
border-bottom-left-radius 3px
|
|
border 1px solid borderColor
|
|
border-right none
|
|
.ShareButton-url-button
|
|
height 21px
|
|
border none
|
|
width 30px
|
|
float left
|
|
background-color #F0F0F0
|
|
border-top-right-radius 3px
|
|
border-bottom-right-radius 3px
|
|
border 1px solid borderColor
|
|
.ShareButton-url-button-tooltip
|
|
tooltip()
|
|
right 10px
|
|
margin-top 5px
|
|
&:hover
|
|
.ShareButton-url-button-tooltip
|
|
opacity 1
|
|
&:active
|
|
background-color #4297FE
|
|
color white
|
|
.ShareButton-url-alert
|
|
padding 10px
|
|
line-height 16px
|
|
|
|
|
|
|
|
.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-right solid 1px transparent
|
|
border-radius left 2px
|
|
background-color brandColor
|
|
&:hover
|
|
background-color lighten(brandColor, 10%)
|
|
border-color lighten(brandColor, 10%)
|
|
&:focus
|
|
background-color lighten(brandColor, 10%)
|
|
border-color focusBorderColor
|
|
.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
|
|
border-bottom 1px solid transparent
|
|
outline none
|
|
margin 0 2px
|
|
transition 0.15s
|
|
height 18px
|
|
&:focus
|
|
border-color focusBorderColor
|
|
.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 focusBorderColor
|
|
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
|
|
.ArticleEditor
|
|
absolute left right bottom
|
|
top 60px
|
|
.ArticleDetail-panel-content-tooltip
|
|
absolute bottom right
|
|
height 24px
|
|
background-color alpha(black, 0.5)
|
|
line-height 24px
|
|
color white
|
|
padding 0 15px
|
|
opacity 0
|
|
transition 0.1s
|
|
z-index 35
|
|
&:hover .ArticleDetail-panel-content-tooltip
|
|
opacity 1
|
|
.MarkdownPreview
|
|
absolute top left right bottom
|
|
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 top left right bottom
|
|
border-top solid 1px borderColor
|
|
min-height 300px
|
|
border-bottom-left-radius 5px
|
|
border-bottom-right-radius 5px
|