habitica/public/css/inventory.styl

.gem-wallet
  cursor: pointer
  padding-top: 10px;
  .tile
    background-color: darken($neutral, 10%)
  .add-gems-btn
    opacity: 0
  &:hover, &:focus
    .add-gems-btn
      opacity: 1
      background-color: $good
    .tile
      opacity: 1

.modal-header .gem-wallet
  padding-top: 0px


// pets (this will all change when pet system is overhauled)
.pet-grid
  padding-top: 1.5em
  border-top: rgba(0,0,0,0.1)
  table
    width: 100%
  td
    padding: 0.5em
    //width: 25%
    &.active-pet
      background-color: $bad
      outline: 1px solid rgba(0,0,0,0.1)
      outline-offset: -1px
    &:hover, &:focus
      background-color: darken($better, 10%)
    > div
      margin:auto
      margin-bottom:.5em
  p
    text-align:center
    width:6.5em
    height:2.5em

menu.pets div 
  display: inline-block
  padding-top: -30px

.current-pet
    left: 0px
    bottom: 0px

.item-drop-icon
    float:left
    padding-right:20px
    padding-bottom:20px

// we'll remove this and place it into habitrpg-shared when we have art to work with
menu button[class*="Pet_Food_"]
    width:48px
    height:53px
    margin-left: 1.25em

.Pet_Currency_Gem, .Pet_Currency_Gem2x, .Pet_Currency_Gem1x
    background: url("/bower_components/habitrpg-shared/img/sprites/Egg_Sprite_Sheet.png") no-repeat
    display:block

.food-tray
  position:fixed
  right:0px
  bottom:0px
  width:30%
  height: 50%
  overflow-y: scroll

.Pet_Currency_Gem {background-position: 0px -510px; width: 51px; height: 45px} /* Not an egg or potion so has a different size */
.Pet_Currency_Gem2x {background-position: -55px -513px; width: 34px; height: 30px}
.Pet_Currency_Gem1x {background-position: -63px -542px; width: 19px; height: 17px}

.inventory-list
  p
    //display: none
  li
    clear:both
  button.customize-option
    position:relative
  .stack-count
    position:absolute
    bottom:-6px
    right:-9px

.pets-menu > div
    display:inline-block
    vertical-align:top
    padding:.3em
    width:6em
    margin-top:1em
    p
      text-align:center
      width:6em
      margin-top:-.5em
.hatchingPotion-menu > div
    display:inline-block
    vertical-align:top
    padding:.3em
    width:6em
    margin-top:1em
    p
      text-align:center
      width:6em
      margin-top:-.5em

// This adds feeding progress bars to pets. If we have any issues with `menu.pets > button`, revisit
menu.pets .customize-menu
  width: 100%
  
  button
    position: relative
  .progress
    width: 60%
    position: absolute
    bottom: -25px
    left: 20%
    height: 5px

.pet-button
    border: none
    background: none white
.pet-not-owned
    width: 81px;
    height: 99px;
    /* Would use css3 filters and just display the original pet image with a black hue,
       but doesn't seem to work in Firefox or Opera */
    /*filter: brightness(0%)
    -webkit-filter: brightness(0%)
    -moz-filter: brightness(0%)
    -o-filter: brightness(0%)
    -ms-filter: brightness(0%)*/

.selectableInventory
  background-color: lightgreen !important
  border-radius: 50%

.sell-inventory
  width: 162px
  height: 138px