Boostnote/browser/styles/main/index.styl

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

body
  font-family "Lato"
  color textColor

h1
  font-size 2em
h2
  font-size 1.5em
h3
  font-size 1.3em
h4
  font-size 1.15em
a
  color brandColor
  &:hover
    color darken(brandColor, 15%)
  &:visited
    color brandColor

hr
  border-top none
  border-bottom solid 1px borderColor
  margin 25px 0

button
  &:focus, &.focus
    outline none

.text-center
  text-align center

.form-group
  margin-bottom 15px
  &>label
    display block
    margin-bottom 5px


.block-input, .inline-input
  border solid 1px borderColor
  padding 0 15px
  font-size 1em
  height 33px
  border-radius 5px
  box-sizing border-box
  &:focus, &.focus
    border solid 1px brandBorderColor
    outline none
  &.circleInput
    border-radius 16.5px

.block-input
  display block
  width 100%

.inline-input
  display inline-block
  margin-right 5px

textarea.block-input
  resize vertical
  height 125px
  border-radius 5px
  padding 5px

#content
  fullsize()

.LoginContainer, .RegisterContainer
  width 400px
  margin 15px auto
  padding 25px 15px
  box-sizing border-box
  h1, h2
    margin 5px auto 25px

.PlanetNavigator
  background-color planetNavBgColor
  absolute left top bottom
  width 50px
  text-align center
  box-sizing border-box
  a.userConfig
    display block
    width 50px
    height 50px
    background-color black
    img
      transition 0.1s
      opacity 0.6
    box-sizing border-box
    &.active, &:active, &.focus, &:focus, &.hover, &:hover
      img
        opacity 1

  ul>li
    padding 10px 3px
    .shortCut
      margin-top 5px
      color lighten(textColor, 5%)
      font-size 0.8em
    &.active
      a
        background-color planetAnchorActiveBgColor
        color planetAnchorActiveColor
    a
      display block
      width 44px
      height 44px
      text-align center
      background-color planetAnchorBgColor
      color planetAnchorColor
      line-height 44px
      font-size 1.1em
      cursor pointer
      circle()
      transition 0.1s
      &:hover, &:active
        background-color white
    img
      circle()
      width 44px
      height 44px
  button.newPlanet
    display block
    margin 0 auto
    width 30px
    height 30px
    circle()
    border solid 2px lightButtonColor
    color lightButtonColor
    text-align center
    font-size 1
    background-image none
    background-color transparent
    box-sizing border-box
    absolute left bottom right
    bottom 15px
    &:hover, &.hover, &:focus, &.focus
      border-color darken(lightButtonColor, 25%)
      color darken(lightButtonColor, 25%)
    &:active, &.active
      border-color darken(brandBorderColor, 10%)
      background-color brandColor
      color white

.PlanetContainer
  fullsize()
.PlanetMain
  absolute top bottom right
  left 50px

.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, 25%)
      color darken(lightButtonColor, 25%)
    &: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
  .downloadBtn
    position relative
    float right
    top 5px
    padding 7px 25px
    box-sizing border-box
    line-height 30px
  .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


.PlanetBody
  absolute bottom right
  left 200px
  top 65px