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

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

.PlanetHeader
  absolute left right top
  overflow-y hidden
  height 65px
  background-color white
  border-bottom solid 1px borderColor
  box-sizing border-box
  padding 5px 15px
  clearfix()
  .planetName
    line-height 30px
    font-size 2em
    color brandColor
    line-height 55px
    padding 0 20px
  .menuBtn
    display inline-block
    position relative
    top -5px
    font-size 0.8em
    color lightButtonColor
    border solid 1px lightButtonColor
    box-sizing border-box
    circle()
    background-image none
    background-color transparent
    width 30px
    height 30px
    text-align center
    cursor pointer
    transition 0.1s
    transform scale(0.8)
    &:focus, &.focus
      outline none
    &:hover, &.hover, &:focus, &.focus
      border-color darken(lightButtonColor, 50%)
      color darken(lightButtonColor, 50%)
    &:active, &.active
      border-color darken(brandBorderColor, 10%)
      background-color brandColor
      color white
  .searchInput
    display inline-block
    position relative
    top -3px
    margin-left 15px
    input
      padding-left 32px
    .fa
      position absolute
      top 7px
      left 10px
  .downloadButtton
    position relative
    float right
    top 5px
    padding 7px 25px
    box-sizing border-box
    line-height 30px
    font-size 1em
    border-radius 22px
  .dropDown
    z-index 500
    position fixed
    background white
    width 200px
    border solid 1px borderColor
    box-sizing border-box
    margin-top -5px
    margin-left 125px
    box-shadow popupShadow
    &.hide
      visibility hidden
    a
      color textColor
      display block
      width 100%
      padding 15px
      box-sizing border-box
      border-bottom solid 1px borderColor
      text-decoration none
      &:hover, &.hover
        background-color hoverBackgroundColor
      &:focus, &.focus
        color black
      &:active, &.active
        color brandColor
      &:last-child
        border-bottom none

.PlanetNavigator
  absolute bottom left
  top 65px
  width 200px
  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
      transition 0.1s
      &:hover, &.hover
        background-color hoverBackgroundColor
      &:active, &.active
        color brandColor

.PlanetArticleList
  absolute bottom right
  left 200px
  top 65px
  width 250px
  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
        .itemHeader
          clearfix()
          margin-bottom 5px
        .callSign, .title
          float left
          font-weight 600
          font-size 1.1em
        .updatedAt
          float right
          line-height 16px
          color lighten(textColor, 25%)
          font-size 0.8em
        .description, .content
          margin 10px 0 15px
        &: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 65px
  left 450px
  &>.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
  &.snippetDetail>.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
  &.blueprintDetail>.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()