habitica/styles/app/header.styl

/* header wrapper
-------------------- */
.header-wrap
  width: 100% // this is for the sticky
  padding: 0
  z-index: 1
  background: #f5f5f5
  border-bottom: 1px solid rgba(0,0,0,0.2)
  // margin-top: -1px
  overflow: hidden
  position relative

/* login/menu buttons
--------------------- */
.user-menu
  position: absolute
  top: 0.5em
  right: 0.5em
  font-size: 0.85em
  .tile
    cursor: pointer
    font-weight: 400
    color: #494949
    color: hsla(0, 0%, 15%, 0.8)
    background-color: darken($better, 5%)
    &:hover, &:focus
      background-color: darken($good, 15%)
    &:active
      background-color: darken($good, 25%)

.user-reporter:after
  content: '▾'
  float: right


/* flyout navigation pattern
----------------------------- */
.stacked > li
  display:list-item
  > a
    display:block

.flyout, .flyout-alt
  position: relative
.flyout-content
  position: absolute
  top: 100%
  right: -99999px
  height: 0
  overflow: hidden
.flyout:hover > .flyout-content
  right: 0
.flyout-alt:hover > .flyout-content
  top: 0
  right: 100%

.flyout:hover > .flyout-content,
.flyout-alt:hover > .flyout-content
  height: auto
  overflow: visible

.flyout .tile {
  min-width: 6.5em;
}
.stacked .tile {
  outline: 0
  border: 1px solid rgba(0,0,0,0.2)
  border-top: 0
}


/* header layout
-------------------- */
.site-header
  display: table
  height: 10.5em

@media (min-width: 42.5em)
  .site-header
    width: 75%
@media (min-width: 60em)
  .site-header
    // margin: 0 auto
    width: 66%
@media (min-width: 70em)
  .site-header
    width: 70%
    

// this is a wrapper for avatars in the header
// inside this is the actual `herobox` module
// that can be used anywhere on the site
.herobox-wrap
  display: table-cell
  vertical-align: middle
  width: 10em
  height: 10.5em

/* progress bars
-------------------- */
.hero-stats
  padding: 0 1.25em
  margin: 0
  display: table-cell
  vertical-align: middle
  min-width:175px
  
  .meter, .bar
    box-shadow: none
    border-radius: 0

  .meter
    position: relative
    background: white
    opacity: 1
    outline: 1px solid rgba(0,0,0,0.2)
    outline-offset: -1px
    overflow: hidden // firefox outline fix
    height: 2.25em
    margin: 0 0 1em
    cursor: help;
    color: #111
    &:last-of-type
      margin-bottom: 0
    &:after
      content: attr(title)
      position: absolute
      left: -1em
      top 0.4em
      font-weight: 400
      z-index: -1
      transition: all 0.25s ease-out
   
    .bar
      border: 1px solid rgba(0,0,0,0.1)
      height: 100%
      transition: width 0.25s ease-out

  .meter:hover:after
    left: 1em
    z-index: 1

  .health .bar
    background: darken($worse, 38%)
  .experience .bar
    background: darken($neutral, 30%)

  .meter-text
    position: absolute
    top: 0
    right: 0.5em
    z-index: 1
    line-height: 2.25