Boostnote/browser/styles/main/ArticleDetail.styl

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(1) .tooltip
          margin-left -85px
        &:nth-child(3) .tooltip
          margin-left -80px
        &:nth-child(4) .tooltip
          margin-left -60px
        &:nth-child(5) .tooltip
          margin-left -100px
      .ShareButton-open-button .tooltip
        margin-left -40px
      .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-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
    .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