habitica-self-host/public/css/menu.styl

// Custom styles for the menu aka toolbar aka navbar
.toolbar
  width:100%;
  top:0
  left:0
  z-index:998
  color: #222
  background-color: lighten($color-herobox, 60%)
  border-bottom: 1px solid darken($color-herobox, 12%)
  > ul > li
    display: inline-block
// Mobile menu button
.toolbar-mobile-nav
  float:left
  @media screen and (min-width:768px)
    display: none
.toolbar-mobile
  @extend $hrpg-button
  @extend $hrpg-modal-dropdown-right
// Top level menu items: Tasks – User – Social – Inventory
.toolbar-nav
  float:left;
  padding: 10px
  @media screen and (max-width:768px)
    display: none
  > li
    //border-right: 1px solid #ccc
    margin-right: 10px
  .toolbar-button-dropdown
    @extend $hrpg-button-toggle
    @extend $hrpg-modal-dropdown-right
  .toolbar-button
    @extend $hrpg-button
    > a
      display:inline-block
      height:100%
      &:link,&:visited
        color: #222
      &:hover
        background-color: #eee
      &:active
        color:#000
      @media screen and (max-width:768px)
        padding: 10px 8px
.toolbar-submenu
  ul
    padding-left: 0px !important
  li
    margin-right: 16px
    display:inline-block
    .glyphicon
      margin-right:8px
      color:#ccc
// Information bar: Bailey – notifs – currency – subscribe button
.toolbar-bailey, .toolbar-wallet, .toolbar-options
  float:right
  padding: 10px 10px 10px 0
.toolbar-wallet
  .gem-wallet
    margin-left:8px
    .Gems
      margin-top: 3px
    span
      display:inline-block
      vertical-align:top
      padding-top:5px
  .toolbar-currency
    margin-left:16px
    padding: 5px 8px !important
    margin:0px
    vertical-align:top   
@media screen and (max-width:768px)
  .toolbar
    > ul
      float: none
      margin: 0px 4px 4px 4px
      .toolbar-bailey
        float:right
.toolbar-options
  > li
    margin-left: 8px
.toolbar-sync, .toolbar-settings
  @extend $hrpg-button
.toolbar-subscribe
  @extend $hrpg-button-call-to-action
@media screen and (min-width:768px)
  .toolbar
    position:fixed
// Notifications icon and dropdown
.toolbar-notifs
  @extend $hrpg-button
  @extend $hrpg-modal-dropdown-left-heading
  > a span.inactive
    opacity: 0.236 !important
  div
    width:300px
    @media screen and (max-width:768px)
      width:96%
    .toolbar-notifs-notifs
      padding-bottom:16px
      max-height: 63%
      li
        position: relative
        .glyphicon
          margin-right: 10px
          height: 100%
      a
        display:inline-block
      a:nth-of-type(1)
        margin-right: 26px
      a:nth-of-type(2)
        position:absolute
        right:0px
        .glyphicon-remove-circle
          margin-right: 0px
          color:#9d9d9d
    &:after
      right:26px
// Settings dropdown
.toolbar-settings
  @extend $hrpg-modal-dropdown-left-heading
.toolbar-controls
  @extend $hrpg-modal-controls
  li
    @extend $hrpg-button
.toolbar-settings .toolbar-controls
  @media screen and (min-width:768px)
    display:none