Boostnote/browser/styles/main/ArticleTopBar.styl

bgColor = #E6E6E6
inputBgColor = white

topBarBtnColor = #B3B3B3
topBarBtnBgColor = #B3B3B3
topBarBtnBgActiveColor = #3A3A3A

infoBtnColor = bgColor
infoBtnBgColor = #B3B3B3
infoBtnActiveBgColor = #3A3A3A

.ArticleTopBar
  absolute top right
  left 200px
  height 60px
  background-color bgColor
  user-select none
  &>.tutorial
    .clickJammer
      fixed top left bottom right
      z-index 40
      background transparent
    .global
      fixed bottom right
      height 100px
      z-index 35
      font-style italic
    .finder
      fixed bottom right
      height 250px
      left 50%
      margin-left -250px
      z-index 35
      font-style italic
    .back
      fixed top left bottom right
      z-index 20
      background-color transparentify(black, 80%)
  &>.ArticleTopBar-left
    float left
    &>.tutorial
      fixed top
      left 100px
      top 30px
      z-index 36
      font-style italic
    &>.ArticleTopBar-left-search
      position relative
      float left
      height 33px
      margin-top 13.5px
      margin-left 15px
      width 350px
      padding 5px 15px
      transition 0.1s
      font-size 16px
      border 1px solid transparent
      z-index 30
      .tooltip
        tooltip()
        margin-left -24px
        margin-top 35px
        opacity 1
        &.hide
          opacity 0
        ul
          li
            line-height 18px
          li:last-child
            line-height 10px
            margin-bottom 3px
        small
          font-size 10px
          position relative
          top -2px
          margin-left 15px
      input
        absolute top left
        width 350px
        border-radius 16.5px
        background-color inputBgColor
        border 1px solid transparent
        padding-left 35px
        outline none
        font-size 14px
        height 33px
        line-height 33px
        z-index 0
        &:focus
          border-color focusBorderColor
      i.fa.fa-search
        position absolute
        display block
        top 0
        left 10px
        line-height 33px
        z-index 1
        pointer-events none
      .ArticleTopBar-left-search-clear-button
        position absolute
        top 6px
        right 10px
        width 20px
        height 20px
        border-radius 10px
        border none
        background-color transparent
        color topBarBtnColor
        transition 0.1s
        line-height 20px
        text-align center
        padding 0
        &:focus
          color textColor
        &:hover
          color white
          background-color topBarBtnBgColor
        &:active
          color white
          background-color darken(topBarBtnBgColor, 35%)
    .ArticleTopBar-left-control
      line-height 33px
      float left
      height 33px
      margin-top 13.5px
      margin-left 20px
      .tutorial
        fixed top
        left 200px
        z-index 36
        font-style italic
      button.ArticleTopBar-left-control-new-post-button
        position fixed
        background bgColor
        font-size 20px
        border none
        outline none
        color inactiveTextColor
        width 33px
        height 33px
        border-radius 16.5px
        transition 0.1s
        border 1px solid transparent
        z-index 30
        &:hover
          color textColor
        &:active
          color textColor
          background-color lighten(topBarBtnBgColor, 15%)
        &:disabled
          color inactiveTextColor
          background transparent
        &:focus
          color textColor
        .tooltip
          tooltip()
          margin-left -80px
          margin-top 40px
        &:hover
          .tooltip
            opacity 1
  &>.ArticleTopBar-right
    float right
    &>button
      display block
      position absolute
      right 74px
      top 20px
      width 20px
      height 20px
      font-size 14px
      line-height 14px
      background-color infoBtnBgColor
      color bgColor
      border-radius 11px
      border 1px solid bgColor
      transition 0.1s
      &:focus
        background-color lighten(infoBtnActiveBgColor, 15%)
      .tooltip
        tooltip()
        margin-left -50px
        margin-top 20px
      &:hover
        background-color infoBtnActiveBgColor
        .tooltip
          opacity 1

    &>.ArticleTopBar-right-links-button
      display block
      position absolute
      top 8px
      right 15px
      opacity 0.7
      border-radius 23px
      height 46px
      width 46px
      border 1px solid transparent
      &:focus
        border-color focusBorderColor
      &:hover
        opacity 1
        .tooltip
          opacity 1
    &>.ArticleTopBar-right-links-button-dropdown
      position fixed
      z-index 50
      right 10px
      top 40px
      background-color transparentify(invBackgroundColor, 80%)
      padding 5px 0
      .ArticleTopBar-right-links-button-dropdown-item
        padding 0 10px
        height 33px
        width 100%
        display block
        line-height 33px
        text-decoration none
        color white
        &:hover
          background-color transparentify(lighten(invBackgroundColor, 30%), 80%)