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
  background-color: $color-toolbar
  border-bottom: 1px solid darken($color-herobox, 12%)
  > ul > li
    display: inline-block
// Mobile menu button
.toolbar-mobile-nav
  display: inline-block
  padding-left: 0.618em
  padding-right: 0.618em
  @media screen and (min-width:768px)
    display: none
.toolbar-mobile
  @extend $hrpg-button
  @extend $hrpg-modal-dropdown-right
  hrpg-button-color-mixin($color-toolbar)
  div.glyphicon
    display:block
    width: 2.618em
    height: 1.618em
    padding: 1.1em 1em 0em 1em
    float:left
  .toolbar-submenu
    padding-left: 0.382em
    display: block
// Top level menu items: Tasks – User – Social – Inventory
.toolbar-nav
  float:left;
  padding: 0.618em
  @media screen and (max-width:768px)
    display: none
  > li
    margin-right: 0.618em
  .toolbar-button-dropdown
    @extend $hrpg-button-toggle
    @extend $hrpg-modal-dropdown-right
    hrpg-button-color-mixin($color-toolbar)
  .toolbar-button
    @extend $hrpg-button
    hrpg-button-color-mixin($color-toolbar)
    > a
      display:inline-block
      height:100%
.toolbar-submenu
  li
    margin-right: 1em
    display:inline-block
// Information bar: Bailey – notifs – currency – subscribe button
.toolbar-bailey, .toolbar-wallet, .toolbar-options, .toolbar-subscribe
  float:right
  padding: 0.618em 0.618em 0.618em 0
  @media screen and (max-width:768px)
    float: none
    display: inline-block
    padding: 0.618em 0.382em 0.618em 0
.toolbar-wallet
  .gem-wallet
    .Gems
      margin-top: 0em
    span
      display:inline-block
      vertical-align:top
      padding-top: 0.382em
.toolbar-currency
  padding-top: 0.236em
  padding-bottom: 0.236em
  vertical-align:top
.toolbar-currency.gold
  color: darken($neutral,61,8%)
.toolbar-currency.silver
  color: #999
.toolbar-options, .toolbar-wallet
  > li
    margin-left: 0.618em
@media screen and (max-width:768px)
  .toolbar-options
    > li
      padding-left:0em
      margin-left:0em
      margin-right: 0.618em
  .toolbar-subscribe
    padding-right: 0.618em
.toolbar-sync, .toolbar-settings
  @extend $hrpg-button
  hrpg-button-color-mixin($color-toolbar)
.toolbar-subscribe li
  @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
  hrpg-button-color-mixin($color-toolbar)
  > a span.inactive
    opacity: 0.236 !important
  div
    width:300px
    @media screen and (max-width:768px)
      width:96%
    .toolbar-notifs-notifs
      padding-bottom:1em
      max-height: 63%
      li
        position: relative
        .glyphicon
          margin-right: 0.618em
          height: 100%
      a
        display:inline-block
      a:nth-of-type(1)
        margin-right: 1.618em
      a:nth-of-type(2)
        position:absolute
        right:0px
        .glyphicon-remove-circle
          margin-right: 0px
// Settings dropdown
.toolbar-settings
  @extend $hrpg-modal-dropdown-left
.toolbar-controls
  @extend $hrpg-modal-controls
  li
    @extend $hrpg-button
    hrpg-button-color-mixin(lighten($color-toolbar,32.8%))
.toolbar-settings .toolbar-controls
  @media screen and (min-width:768px)
    display:none