@import '../../../node_modules/nib/lib/nib'
@import '../vars'
@import '../mixins/*'
global-reset()
@import '../shared/*'
@import '../theme/*'

iptBgColor = #E6E6E6
iptFocusBorderColor = #369DCD

DEFAULT_FONTS = 'Lato', 'MS Gothic', 'Malgun Gothic', 'Sans-serif'

body
  font-family DEFAULT_FONTS
  color textColor
  font-size fontSize
  width 100%
  height 100%
  overflow hidden
button, input
  font-family "Lato"

.Finder
  absolute top bottom left right
  .FinderInput
    padding 11px
    margin 0 auto
    height 55px
    box-sizing border-box
    border-bottom solid 1px borderColor
    background-color iptBgColor
    z-index 200
    input
      display block
      width 100%
      border solid 1px borderColor
      padding 0 10px
      font-size 1em
      height 33px
      border-radius 5px
      box-sizing border-box
      border-radius 5px
      &:focus, &.focus
        border-color iptFocusBorderColor
        outline none
  .FinderList
    absolute left bottom
    top 55px
    border-right solid 1px borderColor
    box-sizing border-box
    width 250px
    overflow-y auto
    z-index 0
    user-select none
    &>ul>li
      .articleItem
        padding 10px
        border solid 2px transparent
        box-sizing border-box
        cursor pointer
        white-space nowrap
        overflow-x hidden
        text-overflow ellipsis
      .divider
        box-sizing border-box
        border-bottom solid 1px borderColor
      &.active
        .articleItem
          border-color brandColor

  .FinderDetail
    absolute right bottom
    top 55px
    left 250px
    box-shadow 0px 0px 10px 0 #CCC
    z-index 100
    .header
      absolute top left right
      height 55px
      box-sizing border-box
      padding 0 10px
      border-bottom solid 1px borderColor
      line-height 55px
      font-size 18px
      white-space nowrap
      text-overflow ellipsis
      overflow-x hidden
      clearfix()
      .left
        float left
      .right
        float right
        button
          border-radius 16.5px
          cursor pointer
          height 33px
          width 33px
          border none
          margin-right 5px
          font-size 18px
          color inactiveTextColor
          background-color transparent
          padding 0
          .tooltip
            tooltip()
          &.clipboardBtn .tooltip
            margin-left -160px
            margin-top 25px
          &:hover
            color textColor
            .tooltip
              opacity 1
    .content
      position absolute
      top 55px
      padding 10px
      bottom 0
      left 0
      right 0
      box-sizing border-box
      overflow-y auto
      .MarkdownPreview
        marked()
        &.empty
          color lighten(inactiveTextColor, 10%)
          user-select none
          font-size 14px
      .CodeEditor
        absolute top bottom left right