markdown.styl

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
    position relative
    &.codeCollapsed
      max-height 22em
      overflow-y hidden
      box-shadow inset 0 -24px 20px -22px rgba(0, 0, 0, 0.8)
    &>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
    .codeCollapseButton
      cursor pointer
      width 1.25rem
      height 1.25rem
      margin-right 0.375rem
      padding 0
      border none
      border-radius 3px
      color white
      background-color rgba(255, 255, 255, 0.18)
      font-weight bold
      line-height 1
    &: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)