mirror of
https://github.com/sudoxnym/habitica-self-host.git
synced 2026-07-21 21:34:15 +00:00
2309184ae3
menu.jade: * Add toggle button to toolbar * Add container to hide the rest of toolbar without hiding the toggle button. menu.styl: * Add toggle button styles * Update toolbar styles to account for toggle button header.styl: * Update rules for adding and removing padding from .header-wrap when toolbar is toggled.
171 lines
3.3 KiB
Stylus
171 lines
3.3 KiB
Stylus
/* header wrapper
|
|
-------------------- */
|
|
.header-wrap
|
|
width: 100% // this is for the sticky
|
|
z-index: 100
|
|
padding: 46px 0 0 0 // add padding-top when toolbar is fixed
|
|
background-color: darken($color-herobox, 8%)
|
|
border-bottom: 1px solid rgba(0,0,0,0.2)
|
|
// margin-top: -1px
|
|
overflow-y: hidden
|
|
overflow-x: auto
|
|
// position relative
|
|
@media screen and (max-width:768px) // remove padding-top when toolbar is static
|
|
padding: 0
|
|
.toolbar.active ~ .header-wrap
|
|
padding: 0 // remove padding when toolbar is hidden
|
|
|
|
/* login/menu buttons
|
|
--------------------- */
|
|
.user-menu
|
|
position: absolute
|
|
top: 0.5em
|
|
right: 0.5em
|
|
font-size: 0.85em
|
|
z-index: 1011
|
|
|
|
.site-nav
|
|
margin-bottom: 0px
|
|
|
|
.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%)
|
|
.mana .bar
|
|
background: darken($best, 30%)
|
|
|
|
.meter-text
|
|
position: absolute
|
|
top: 0
|
|
right: 0.5em
|
|
z-index: 1
|
|
line-height: 2.25
|
|
|
|
//Apply certain styles in header only
|
|
|
|
header .hero-stats
|
|
background-color: darken($color-herobox, 4%)
|
|
border-right: 1px solid darken($color-herobox, 12%)
|