Boostnote/browser/styles/main/containers/PlanetContainer.styl

navigationWidth= 200px
articleListWidth= 275px

.PlanetContainer
  absolute top bottom right left
  .tags
    white-space: nowrap;
    overflow-x: auto;
    a
      margin 0 2px
      text-decoration underline
      cursor pointer
      font-size 0.9em
      &.noTag
        color inactiveTextColor
        font-size 0.8em

.PlanetHeader
  absolute left right top
  overflow-y hidden
  height 55px
  background-color white
  border-bottom solid 1px borderColor
  box-sizing border-box
  padding 5px 15px
  clearfix()
  .headerLabel
    noSelect()
    absolute top left bottom
    overflow hidden
    display inline-block
    width navigationWidth
    .userName
      position absolute
      left 15px
      top 30px
      width 140px
      font-size 1em
      color textColor
      &:hover
        color darken(lightButtonColor, 50%)
    .planetName
      position absolute
      top 5px
      left 10px
      width 145px
      font-size 1.6em
      color brandColor
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
      &:hover
        color darken(brandBorderColor, 30%)
    .private
      position absolute
      top 12px
      right 38px
      width 33px
      height 33px
      line-height 33px
      text-align center
      color inactiveColor
      &:hover
        color textColor
      .privateTooltip
        position fixed
        z-index popupZIndex
        background-color transparentify(invBackgroundColor, 80%)
        color invTextColor
        padding 10px
        font-size 0.9em
        line-height 0.9em
        border-radius 5px
        white-space nowrap
        opacity 0
        transition 0.1s
        pointer-events none
        margin-left -30px
      &:hover .privateTooltip
        opacity 1


    .menuBtn
      position absolute
      top 12px
      right 5px
      font-size 1em
      btnDefault()
      box-sizing border-box
      circle()
      width 33px
      height 33px
      text-align center
      cursor pointer
      transition 0.1s
      transform scale(0.8)
      &:focus, &.focus
        outline none
  .headerControl
    noSelect()
    absolute top bottom right
    left navigationWidth
    .searchInput
      display block
      position absolute
      top 12px
      left 0
      input
        padding-left 32px
        width 300px
      .fa
        position absolute
        top 8px
        left 12px
        color inactiveTextColor
    .refreshButton
      display block
      position absolute
      top 12px
      right 55px
      width 28px
      height 28px
      btnDefault()
      circle()
      text-align center
      cursor pointer
      transition 0.1s
      &:focus, &.focus
        outline none
    .logo
      display block
      position absolute
      top 4px
      right 10px
      cursor pointer
      transition 0.1s
      opacity 0.9
      &:hover, &.hover
        opacity 1

.PlanetNavigator
  absolute bottom left
  noSelect()
  top 55px
  width navigationWidth
  border-right solid 1px highlightenBorderColor
  padding 10px
  box-sizing border-box
  .launchButton
    border-radius 22px
    font-size 1.1em
  nav
    a
      display block
      box-sizing border-box
      padding 15px 15px
      margin 10px 0
      border-radius 10px
      text-decoration none
      background-color transparent
      color textColor
      cursor pointer
      transition 0.1s
      btnDefault()
      border none

.PlanetArticleList
  absolute bottom right
  left navigationWidth
  top 55px
  width articleListWidth
  border-right solid 1px highlightenBorderColor

  &>ul
    absolute top bottom left right
    overflow-y auto
    li
      .articleItem
        user-select none
        border solid 2px transparent
        padding 10px
        cursor pointer
        transition 0.1s
        clearfix()
        .itemLeft
          float left
          width 25px
          text-align center
          .profileImage
            margin-bottom 5px
          .fa
            line-height 25px
        .itemRight
          float left
          width 225px
          overflow-x hidden
          padding-left 10px
          .updatedAt
            margin-bottom 10px
            color lighten(textColor, 25%)
            font-size 0.7em
          .description
            line-height 120%
            margin-bottom 15px
            font-size 1em
        &:hover, &.hover
          background-color hoverBackgroundColor
          &:active, &.active
            background-color white
        &:active, &.active
          border-color brandBorderColor
      .divider
        border-bottom solid 1px borderColor

.PlanetArticleDetail
  absolute right bottom
  top 55px
  left navigationWidth + articleListWidth
  &>.viewer-header
    height 44px
    line-height 44px
    padding 0 15px
    box-sizing border-box
    font-size 1.2em
    small
      font-size 0.8em
      color lighten(textColor, 25%)
    .control-group
      float right
      button
        margin 10px 3px
  .viewer-body
    absolute bottom right
    left 1px
    top 44px
  &.codeDetail>.viewer-body
    .viewer-detail
      border-bottom solid 1px borderColor
      height 150px
      box-sizing border-box
      padding 10px
      .description
        height 100px
        line-height 1.4em
        overflow-y auto
      .tags
        position absolute
        left 15px
        right 15px
        top 120px
    .content
      .ace_editor
        absolute left right
        top 155px
        bottom 5px
  &.noteDetail>.viewer-body
    .tags
      absolute top
      left 15px
      right 15px
      height 24px
      line-height 24px
    .content
      absolute left right bottom
      top 30px
      box-sizing border-box
      padding 5px
      border-top solid 1px borderColor
      padding 10px
      overflow-x hidden
      overflow-y auto
      marked()