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.95em
      &.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
      text-decoration none
      &:hover
        color darken(lightButtonColor, 50%)
        text-decoration underline
    .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
      .tooltip
        tooltip()
        margin-left -30px
      &:hover .tooltip
        opacity 1


    .planetSettingButton
      position absolute
      top 15px
      right 5px
      font-size 0.8em
      btnDefault()
      box-sizing border-box
      circle()
      width 26px
      height 26px
      text-align center
      cursor pointer
      transition 0.1s
      &:focus, &.focus
        outline none
      .tooltip
        tooltip()
        margin-top 11px
        margin-left -36px
      &:hover .tooltip
        opacity 1

  .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 15px
      right 55px
      width 26px
      height 26px
      font-size 0.8em
      btnDefault()
      circle()
      text-align center
      cursor pointer
      transition 0.1s
      &:focus, &.focus
        outline none
      .tooltip
        tooltip()
        margin-top 11px
        margin-left -39px
      &:hover .tooltip
        opacity 1
    .logo
      display block
      position absolute
      top 4px
      right 10px
      cursor pointer
      img
        transition 0.1s
        opacity 0.9
      &:hover img, &:hover .tooltip
        opacity 1
      .tooltip
        tooltip()
        margin-top -5px
        margin-left -67px


.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
        noSelect()
        border solid 2px transparent
        position relative
        height 94px
        width 100%
        cursor pointer
        transition 0.1s
        .itemLeft
          position absolute
          top 4px
          bottom 4px
          width 38px
          padding 3px 0 3px 3px
          text-align center
          .profileImage
            margin-bottom 5px
            circle()
          .fa
            line-height 25px
        .itemRight
          position absolute
          top 4px
          bottom 4px
          right 2px
          left 40px
          overflow-x hidden
          padding 3px 10px 3px 3px
          .itemInfo
            margin 5px 0 13px
            color lighten(textColor, 25%)
            font-size 0.7em
            .userProfileName
              color brandColor
              font-size 1.2em
          .description
            line-height 120%
            margin-bottom 10px
            font-size 1em
            overflow-x hidden
            white-space nowrap
            text-overflow ellipsis
          .tags
            position absolute
            bottom 5px
            font-size 0.9em
        &: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
  .detailHeader
    border solid 2px transparent
    position relative
    height 105px
    width 100%
    transition 0.1s
    .itemLeft
      position absolute
      top 7px
      bottom 4px
      width 38px
      padding 3px 0 3px 3px
      text-align center
      .profileImage
        margin-bottom 5px
        circle()
      .fa
        line-height 25px
    .itemRight
      position absolute
      top 7px
      bottom 4px
      right 2px
      left 40px
      overflow-x hidden
      padding 3px 10px 3px 3px
      .itemInfo
        margin 5px 0 13px
        color lighten(textColor, 25%)
        font-size 0.7em
        .userProfileName
          color brandColor
          font-size 1.2em
      .description
        line-height 120%
        margin-bottom 10px
        font-size 1em
        overflow-x auto
        white-space nowrap
      .tags
        position absolute
        bottom 5px
        font-size 0.9em
    .itemControl
      position absolute
      z-index 1
      top 2px
      right 2px
      .deleteButton, .editButton
        btnDefault()
        text-align center
        width 33px
        height 33px
        border-radius 16.5px
        font-size 15px
        margin 0 3px
        .tooltip
          tooltip()
          margin-top 10px
        &:hover .tooltip
          opacity 1
      .editButton .tooltip
        margin-left -12px
      .deleteButton .tooltip
        margin-left -26px
  .detailBody
    absolute left right bottom
    top 105px
    .content
      position absolute
      top 5px
      bottom 5px
      left 2px
      right 2px
      box-sizing border-box
      padding 5px
      border-top solid 1px borderColor
  &.noteDetail
    .detailBody .content
      overflow-x hidden
      overflow-y auto
      marked()
  &.codeDetail
    .detailBody .content
      .ace_editor
        absolute left right top bottom