mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-11 00:36:26 +00:00
5edce1fe6a
* h1 padding bottom value changed * padding top added to <p> * padding top to h1 * h2 padding top updated * heading changed * typo * Updated margin for h1 ~ h6
612 lines
13 KiB
Stylus
612 lines
13 KiB
Stylus
global-reset()
|
|
|
|
borderColor = #D0D0D0 // using
|
|
highlightenBorderColor = darken(borderColor, 20%)
|
|
invBorderColor = #404849
|
|
brandBorderColor = #3FB399
|
|
|
|
focusBorderColor = #369DCD
|
|
|
|
buttonBorderColor = #4C4C4C
|
|
|
|
lightButtonColor = #898989
|
|
|
|
hoverBackgroundColor= transparentify(#444, 4%) // using
|
|
|
|
inactiveTextColor = #888 // using
|
|
textColor = #4D4D4D // using
|
|
backgroundColor= white
|
|
fontSize= 14px // using
|
|
|
|
shadowColor= #C5C5C5
|
|
|
|
invBackgroundColor = #4C4C4C
|
|
invTextColor = white
|
|
|
|
btnColor = #888
|
|
btnHighlightenColor = #000
|
|
|
|
brandColor = #2BAC8F
|
|
|
|
popupShadow = 0 0 5px 0 #888
|
|
|
|
|
|
tableHeadBgColor = white
|
|
tableOddBgColor = #F9F9F9
|
|
tableEvenBgColor = white
|
|
|
|
facebookColor= #3b5998
|
|
githubBtn= #201F1F
|
|
|
|
// using
|
|
successBackgroundColor= #E0F0D9
|
|
successTextColor= #3E753F
|
|
errorBackgroundColor= #F2DEDE
|
|
errorTextColor= #A64444
|
|
infoBackgroundColor= #D9EDF7
|
|
infoTextColor= #34708E
|
|
|
|
popupZIndex= 500
|
|
|
|
body
|
|
font-size 16px
|
|
padding 15px
|
|
font-family helvetica, arial, sans-serif
|
|
line-height 1.6
|
|
overflow-x hidden
|
|
background-color $ui-noteDetail-backgroundColor
|
|
// do not allow display line breaks
|
|
.katex-display > .katex
|
|
white-space nowrap
|
|
// allow inline line breaks
|
|
.katex
|
|
white-space initial
|
|
.katex .katex-html
|
|
display inline-flex
|
|
.katex .mfrac>.vlist>span:nth-child(2)
|
|
top 0 !important
|
|
.katex-error
|
|
background-color errorBackgroundColor
|
|
color errorTextColor
|
|
padding 5px
|
|
margin -5px
|
|
border-radius 5px
|
|
.flowchart-error, .sequence-error .chart-error
|
|
background-color errorBackgroundColor
|
|
color errorTextColor
|
|
padding 5px
|
|
border-radius 5px
|
|
justify-content left
|
|
li
|
|
label.taskListItem
|
|
margin-left -1.8em
|
|
&.checked
|
|
text-decoration line-through
|
|
opacity 0.5
|
|
&.taskListItem.checked
|
|
text-decoration line-through
|
|
opacity 0.5
|
|
div.math-rendered
|
|
text-align center
|
|
.math-failed
|
|
background-color alpha(red, 0.1)
|
|
color darken(red, 15%)
|
|
padding 5px
|
|
margin 5px 0
|
|
border-radius 5px
|
|
sup
|
|
position relative
|
|
top -.4em
|
|
font-size 0.8em
|
|
vertical-align top
|
|
sub
|
|
position relative
|
|
bottom -.4em
|
|
font-size 0.8em
|
|
vertical-align top
|
|
a
|
|
color brandColor
|
|
text-decoration none
|
|
padding 5px
|
|
border-radius 5px
|
|
margin -5px
|
|
transition .1s
|
|
img
|
|
vertical-align sub
|
|
&:hover
|
|
color lighten(brandColor, 5%)
|
|
text-decoration underline
|
|
background-color alpha(#FFC95C, 0.3)
|
|
&:visited
|
|
color brandColor
|
|
hr
|
|
border-top none
|
|
border-bottom solid 1px borderColor
|
|
margin 15px 0
|
|
h1, h2, h3, h4, h5, h6
|
|
margin 1em 0 1.5em
|
|
line-height 1.4
|
|
font-weight bold
|
|
word-wrap break-word
|
|
padding .2em 0 .2em
|
|
h1
|
|
font-size 2.55em
|
|
line-height 1.2
|
|
border-bottom solid 1px borderColor
|
|
&:first-child
|
|
margin-top 0
|
|
h2
|
|
font-size 1.75em
|
|
line-height 1.225
|
|
border-bottom solid 1px borderColor
|
|
&:first-child
|
|
margin-top 0
|
|
h3
|
|
font-size 1.5em
|
|
line-height 1.43
|
|
h4
|
|
font-size 1.25em
|
|
line-height 1.4
|
|
h5
|
|
font-size 1em
|
|
line-height 1.1
|
|
h6
|
|
font-size 1em
|
|
color #777
|
|
p
|
|
line-height 1.6em
|
|
margin 0 0 1em
|
|
white-space pre-line
|
|
word-wrap break-word
|
|
img
|
|
cursor zoom-in
|
|
max-width 100%
|
|
strong, b
|
|
font-weight bold
|
|
em, i
|
|
font-style italic
|
|
s, del, strike
|
|
text-decoration line-through
|
|
u
|
|
text-decoration underline
|
|
blockquote
|
|
border-left solid 4px brandBorderColor
|
|
margin 0 0 1em
|
|
padding 0 25px
|
|
ul
|
|
list-style-type disc
|
|
padding-left 2em
|
|
margin-bottom 1em
|
|
li
|
|
display list-item
|
|
&.taskListItem
|
|
list-style none
|
|
&>input
|
|
margin-left -1.6em
|
|
&>p
|
|
margin-left -1.8em
|
|
p
|
|
margin 0
|
|
&>li>ul, &>li>ol
|
|
margin 0
|
|
&>li>ul
|
|
list-style-type circle
|
|
&>li>ul
|
|
list-style-type square
|
|
ol
|
|
list-style-type decimal
|
|
padding-left 2em
|
|
margin-bottom 1em
|
|
li
|
|
display list-item
|
|
p
|
|
margin 0
|
|
&>li>ul, &>li>ol
|
|
margin 0
|
|
code
|
|
padding 0.2em 0.4em
|
|
background-color #f7f7f7
|
|
border-radius 3px
|
|
font-size 1em
|
|
text-decoration none
|
|
margin-right 2px
|
|
pre
|
|
padding 0.5rem !important
|
|
border solid 1px #D1D1D1
|
|
border-radius 5px
|
|
overflow-x auto
|
|
margin 0 0 1rem
|
|
display flex
|
|
line-height 1.4em
|
|
code
|
|
background-color inherit
|
|
margin 0
|
|
padding 0
|
|
border none
|
|
border-radius 0
|
|
&.CodeMirror
|
|
height initial
|
|
flex-wrap wrap
|
|
&>code
|
|
flex 1
|
|
overflow-x auto
|
|
&.mermaid svg
|
|
max-width 100% !important
|
|
&>span.filename
|
|
margin -0.5rem 100% 0.5rem -0.5rem
|
|
padding 0.125rem 0.375rem
|
|
background-color #777;
|
|
color white
|
|
&:empty
|
|
display none
|
|
&>span.lineNumber
|
|
display none
|
|
font-size 1em
|
|
padding 0.5rem 0
|
|
margin -0.5rem 0.5rem -0.5rem -0.5rem
|
|
border-right 1px solid
|
|
text-align right
|
|
border-top-left-radius 4px
|
|
border-bottom-left-radius 4px
|
|
&.CodeMirror-gutters
|
|
position initial
|
|
top initial
|
|
left initial
|
|
min-height 0 !important
|
|
&>span
|
|
display block
|
|
padding 0 .5em 0
|
|
table
|
|
display block
|
|
width 100%
|
|
margin 0 0 1em
|
|
overflow-x auto
|
|
thead
|
|
tr
|
|
background-color tableHeadBgColor
|
|
th
|
|
border-style solid
|
|
padding 6px 13px
|
|
line-height 1.6
|
|
border-width 1px 0 2px 1px
|
|
border-color borderColor
|
|
font-weight bold
|
|
&:last-child
|
|
border-right solid 1px borderColor
|
|
tbody
|
|
tr:nth-child(2n + 1)
|
|
background-color tableOddBgColor
|
|
tr:nth-child(2n)
|
|
background-color tableEvenBgColor
|
|
td
|
|
border-style solid
|
|
padding 6px 13px
|
|
line-height 1.6
|
|
border-width 0 0 1px 1px
|
|
border-color borderColor
|
|
&:last-child
|
|
border-right solid 1px borderColor
|
|
kbd
|
|
background-color #fafbfc
|
|
border solid 1px borderColor
|
|
border-bottom-color btnColor
|
|
border-radius 3px
|
|
box-shadow inset 0 -1px 0 #959da5
|
|
display inline-block
|
|
font-size .8em
|
|
line-height 1
|
|
padding 3px 5px
|
|
|
|
$admonition
|
|
box-shadow 0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2)
|
|
position relative
|
|
margin 1.5625em 0
|
|
padding 0 1.2rem
|
|
border-left .4rem solid #448aff
|
|
border-radius .2rem
|
|
overflow auto
|
|
|
|
html .admonition>:last-child
|
|
margin-bottom 1.2rem
|
|
|
|
.admonition .admonition
|
|
margin 1em 0
|
|
|
|
.admonition p
|
|
margin-top: 0.5em
|
|
|
|
$admonition-icon
|
|
position absolute
|
|
left 1.2rem
|
|
font-family: "Material Icons"
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-size: 24px
|
|
display: inline-block;
|
|
line-height: 1;
|
|
text-transform: none;
|
|
letter-spacing: normal;
|
|
word-wrap: normal;
|
|
white-space: nowrap;
|
|
direction: ltr;
|
|
|
|
/* Support for all WebKit browsers. */
|
|
-webkit-font-smoothing: antialiased;
|
|
/* Support for Safari and Chrome. */
|
|
text-rendering: optimizeLegibility;
|
|
|
|
/* Support for Firefox. */
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
|
/* Support for IE. */
|
|
font-feature-settings: 'liga';
|
|
|
|
$admonition-title
|
|
margin 0 -1.2rem
|
|
padding .8rem 1.2rem .8rem 4rem
|
|
border-bottom .1rem solid rgba(68,138,255,.1)
|
|
background-color rgba(68,138,255,.1)
|
|
font-weight 700
|
|
|
|
.admonition>.admonition-title:last-child
|
|
margin-bottom 0
|
|
|
|
admonition_types = {
|
|
note: {color: #0288D1, icon: "note"},
|
|
hint: {color: #009688, icon: "info_outline"},
|
|
danger: {color: #c2185b, icon: "block"},
|
|
caution: {color: #ffa726, icon: "warning"},
|
|
error: {color: #d32f2f, icon: "error_outline"},
|
|
question: {color: #64dd17, icon: "help_outline"},
|
|
quote: {color: #9e9e9e, icon: "format_quote"},
|
|
abstract: {color: #00b0ff, icon: "subject"},
|
|
attention: {color: #455a64, icon: "priority_high"},
|
|
}
|
|
|
|
for name, val in admonition_types
|
|
.admonition.{name}
|
|
@extend $admonition
|
|
border-left-color: val[color]
|
|
|
|
.admonition.{name}>.admonition-title
|
|
@extend $admonition-title
|
|
border-bottom-color: .1rem solid rgba(val[color], 0.2)
|
|
background-color: rgba(val[color], 0.2)
|
|
|
|
.admonition.{name}>.admonition-title:before
|
|
@extend $admonition-icon
|
|
color: val[color]
|
|
content: val[icon]
|
|
|
|
dl
|
|
margin 2rem 0
|
|
padding 0
|
|
display flex
|
|
width 100%
|
|
flex-wrap wrap
|
|
align-items flex-start
|
|
border-bottom 1px solid borderColor
|
|
background-color tableHeadBgColor
|
|
|
|
dt
|
|
border-top 1px solid borderColor
|
|
font-weight bold
|
|
text-align right
|
|
overflow hidden
|
|
flex-basis 20%
|
|
padding 0.4rem 0.9rem
|
|
box-sizing border-box
|
|
|
|
dd
|
|
border-top 1px solid borderColor
|
|
flex-basis 80%
|
|
padding 0.4rem 0.9rem
|
|
min-height 2.5rem
|
|
background-color $ui-noteDetail-backgroundColor
|
|
box-sizing border-box
|
|
|
|
dd + dd
|
|
margin-left 20%
|
|
|
|
pre.fence
|
|
flex-wrap wrap
|
|
|
|
.chart, .flowchart, .mermaid, .sequence
|
|
display flex
|
|
justify-content center
|
|
background-color white
|
|
max-width 100%
|
|
flex-grow 1
|
|
|
|
canvas, svg
|
|
max-width 100% !important
|
|
|
|
svg[ratio]
|
|
width 100%
|
|
|
|
.gallery
|
|
width 100%
|
|
height 50vh
|
|
|
|
.carousel
|
|
.carousel-main img
|
|
min-width auto
|
|
max-width 100%
|
|
min-height auto
|
|
max-height 100%
|
|
|
|
.carousel-footer::-webkit-scrollbar-corner
|
|
background-color transparent
|
|
|
|
.carousel-main, .carousel-footer
|
|
background-color $ui-noteDetail-backgroundColor
|
|
.prev, .next
|
|
color $ui-text-color
|
|
background-color $ui-tag-backgroundColor
|
|
|
|
.markdownIt-TOC-wrapper
|
|
list-style none
|
|
position fixed
|
|
right 0
|
|
top 0
|
|
margin-left 15px
|
|
z-index 1000
|
|
transition transform .2s ease-in-out
|
|
transform translateX(100%)
|
|
|
|
.markdownIt-TOC
|
|
display block
|
|
max-height 90vh
|
|
overflow-y auto
|
|
padding 25px
|
|
padding-left 38px
|
|
|
|
&,
|
|
&:before
|
|
background-color $ui-dark-backgroundColor
|
|
color: $ui-dark-text-color
|
|
|
|
&:hover
|
|
transform translateX(-15px)
|
|
|
|
&:before
|
|
content 'TOC'
|
|
position absolute
|
|
width 60px
|
|
height 30px
|
|
top 60px
|
|
left -29px
|
|
display flex
|
|
align-items center
|
|
justify-content center
|
|
transform-origin top left
|
|
transform rotate(-90deg)
|
|
|
|
themeDarkBackground = darken(#21252B, 10%)
|
|
themeDarkText = #f9f9f9
|
|
themeDarkBorder = lighten(themeDarkBackground, 20%)
|
|
themeDarkPreview = $ui-dark-noteDetail-backgroundColor
|
|
themeDarkTableOdd = themeDarkPreview
|
|
themeDarkTableEven = darken(themeDarkPreview, 10%)
|
|
themeDarkTableHead = themeDarkTableEven
|
|
themeDarkTableBorder = themeDarkBorder
|
|
themeDarkModalButtonDefault = themeDarkPreview
|
|
themeDarkModalButtonDanger = #BF360C
|
|
|
|
body[data-theme="dark"]
|
|
color themeDarkText
|
|
border-color themeDarkBorder
|
|
background-color themeDarkPreview
|
|
a:hover
|
|
background-color alpha(lighten(brandColor, 30%), 0.2) !important
|
|
|
|
code
|
|
color #EA6730
|
|
border-color darken(themeDarkBorder, 10%)
|
|
background-color lighten(themeDarkPreview, 5%)
|
|
|
|
pre
|
|
border-color lighten(#21252B, 20%)
|
|
code
|
|
background-color transparent
|
|
|
|
label.taskListItem
|
|
background-color themeDarkPreview
|
|
table
|
|
thead
|
|
tr
|
|
background-color themeDarkTableHead
|
|
th
|
|
border-color themeDarkTableBorder
|
|
&:last-child
|
|
border-right solid 1px themeDarkTableBorder
|
|
tbody
|
|
tr:nth-child(2n + 1)
|
|
background-color themeDarkTableOdd
|
|
tr:nth-child(2n)
|
|
background-color themeDarkTableEven
|
|
td
|
|
border-color themeDarkTableBorder
|
|
&:last-child
|
|
border-right solid 1px themeDarkTableBorder
|
|
kbd
|
|
background-color themeDarkBorder
|
|
color themeDarkText
|
|
dl
|
|
border-color themeDarkBorder
|
|
background-color themeDarkTableHead
|
|
dt
|
|
border-color themeDarkBorder
|
|
dd
|
|
border-color themeDarkBorder
|
|
background-color themeDarkPreview
|
|
|
|
pre.fence
|
|
.gallery
|
|
.carousel-main, .carousel-footer
|
|
background-color $ui-dark-noteDetail-backgroundColor
|
|
.prev, .next
|
|
color $ui-dark-text-color
|
|
background-color $ui-dark-tag-backgroundColor
|
|
|
|
.markdownIt-TOC-wrapper
|
|
&,
|
|
&:before
|
|
background-color darken(themeDarkBackground, 5%)
|
|
color themeDarkText
|
|
|
|
apply-theme(theme)
|
|
body[data-theme={theme}]
|
|
color get-theme-var(theme, 'text-color')
|
|
border-color themeDarkBorder
|
|
background-color get-theme-var(theme, 'noteDetail-backgroundColor')
|
|
table
|
|
thead
|
|
tr
|
|
background-color get-theme-var(theme, 'table-head-backgroundColor')
|
|
th
|
|
border-color get-theme-var(theme, 'table-borderColor')
|
|
&:last-child
|
|
border-right solid 1px get-theme-var(theme, 'table-borderColor')
|
|
tbody
|
|
tr:nth-child(2n + 1)
|
|
background-color get-theme-var(theme, 'table-odd-backgroundColor')
|
|
tr:nth-child(2n)
|
|
background-color get-theme-var(theme, 'table-even-backgroundColor')
|
|
td
|
|
border-color get-theme-var(theme, 'table-borderColor')
|
|
&:last-child
|
|
border-right solid 1px get-theme-var(theme, 'table-borderColor')
|
|
kbd
|
|
background-color get-theme-var(theme, 'kbd-backgroundColor')
|
|
color get-theme-var(theme, 'kbd-color')
|
|
|
|
dl
|
|
border-color themeDarkBorder
|
|
background-color get-theme-var(theme, 'table-head-backgroundColor')
|
|
dt
|
|
border-color themeDarkBorder
|
|
dd
|
|
border-color themeDarkBorder
|
|
background-color get-theme-var(theme, 'noteDetail-backgroundColor')
|
|
|
|
pre.fence
|
|
.gallery
|
|
.carousel-main, .carousel-footer
|
|
background-color get-theme-var(theme, 'noteDetail-backgroundColor')
|
|
.prev, .next
|
|
color get-theme-var(theme, 'button--active-color')
|
|
background-color get-theme-var(theme, 'button-backgroundColor')
|
|
|
|
.markdownIt-TOC-wrapper
|
|
&,
|
|
&:before
|
|
background-color darken(get-theme-var(theme, 'noteDetail-backgroundColor'), 15%)
|
|
color themeDarkText
|
|
|
|
for theme in 'solarized-dark' 'dracula'
|
|
apply-theme(theme)
|
|
|
|
for theme in $themes
|
|
apply-theme(theme)
|