app.styl

@import "../node_modules/habitrpg/public/css/global-colors"
@import "../node_modules/habitrpg/public/css/global-modules"
@import "../node_modules/habitrpg/public/css/avatar"
@import "../node_modules/habitrpg/public/css/header"
@import "../node_modules/habitrpg/public/css/inventory"
@import "../node_modules/habitrpg/public/css/menu"
@import "../node_modules/habitrpg/public/css/customizer"

//.notif-bar.ng-hide-add, .notif-bar.ng-hide-remove
.notif-bar.ng-hide-add
  -webkit-transition:all linear 0.5s;
  -moz-transition:all linear 0.5s;
  -o-transition:all linear 0.5s;
  transition:all linear 0.5s;
  display:block!important;

.notif-bar.ng-hide-add.ng-hide-add-active,
.notif-bar.ng-hide-remove
  opacity:0;

.notif-bar.ng-hide-add,
.notif-bar.ng-hide-remove.ng-hide-remove-active
  opacity:1;

markdown.task-text p
  color #000
  font inherit
  display inline-block

for $stage in (worst $worst) (worse $worse) (bad $bad) (neutral $neutral) (good $good) (better $better) (best $best)
  .color-{$stage[0]} > .item-content
    background-color: $stage[1]
.completed > .item-content
  background-color: $completed
  p {color: #999;}
.task-reward > .item-content {background-color: white !important;}

.avatar-box
  padding 5px 5px
  vertical-align top
  background-color #C9DAF8
.herobox
  max-width 140px
  max-height 150px
  margin-right 5px
  float left
  outline none
  margin-bottom 0
.avatar-level
  padding 4px
.full .herobox:after {opacity: 1}
.hero-stats
  display block
  padding 0
  margin 5px 3px 0 0
  .meter-text
    z-index 100
.meter
  padding 0
  height: 25px
  // color taken from default ionic coulours,
  // applying class balanced-color doesn't work
  border: 1px solid #498f24
  &.mana
    margin-bottom 0

.shop_gold, .shop_silver
  display inline-block
  vertical-align top
.wallet-box
  margin 0 auto
  font-size 0.9em
  width 110px
  padding 3px 0 0 0
  .toolbar-gems
    padding-top 0
    margin-top 0
    color #428bca
  .shop_gold
    margin-bottom 3px
  .shop_silver
    margin-bottom 3px
  li
    text-align center

.menu-avatar .item-content
  padding 5px
  background-color #e5ebed
.profile-background
  background-color #e5ebed

.rewards-wallet
  overflow: hidden
  margin: 0 auto
  min-width: 30px
  text-align: center
  text-overflow: ellipsis
  white-space: nowrap
  padding 5px

.customize-content .item
  overflow-x: scroll
  -webkit-overflow-scrolling: touch

.pull-left {float:left;}
.pull-right {float:right;}
.shop-sprites
  margin: 4px 20px 4px 4px;
  td {vertical-align: middle;}

.exp-and-gold
  //border-left 1px solid white
  //padding: 13px 0
  margin: 0 8px

.muted *
  color: grey !important

.stable-pet-icon
  float: left
  margin-top -20px

.stable-pet-not-owned-icon
  float: left

.inventory-item-icon
  float: left
  margin-right: 5px

  &.locked
    background-color: #727272


.costume-list
  margin-bottom: 0px

.pet-item
  left 0
  right 0

// Contributor colors - use until module is updated
$color-contributor-one = #f57a9d
$color-contributor-two = #b93030
$color-contributor-three = #ff3300
$color-contributor-four = #ff9500
$color-contributor-five = #fff700
$color-contributor-six = #5eff00
$color-contributor-seven = #00aaff
$color-contributor-mod = #130ead
$color-contributor-staff = #88108f
$color-contributor-npc = #000
$color-contributor-npc-font = #00FF00

// label colors for contrib level same as game-pane.styl
hrpg-contributor-label-mixin($hrpg-contributor-color)
  //@extend $hrpg-label
  hrpg-label-color-mixin($hrpg-contributor-color)

.label-contributor-1
  hrpg-contributor-label-mixin($color-contributor-one)
.label-contributor-2
  hrpg-contributor-label-mixin($color-contributor-two)
.label-contributor-3
  hrpg-contributor-label-mixin($color-contributor-three)
.label-contributor-4
  hrpg-contributor-label-mixin($color-contributor-four)
.label-contributor-5
  hrpg-contributor-label-mixin($color-contributor-five)
.label-contributor-6
  hrpg-contributor-label-mixin($color-contributor-six)
.label-contributor-7
  hrpg-contributor-label-mixin($color-contributor-seven)
.label-contributor-8
  hrpg-contributor-label-mixin($color-contributor-staff)
  // FOR NEW MOD LEVEL: line above will change from -staff to -mod
.label-contributor-9
  hrpg-contributor-label-mixin($color-contributor-staff)
.label-npc
  hrpg-contributor-label-mixin($color-contributor-npc)
  color: #00FF00 !important