mirror of
https://github.com/sudoxnym/habitica.git
synced 2026-08-03 08:21:07 +00:00
57eb80f9db
Add text to icons to clarify purpose of each bar Tidy up tooltip behaviour Aesthetic changes
168 lines
3.6 KiB
Stylus
168 lines
3.6 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.8em 1em 0
|
|
margin: 0
|
|
display: table-cell
|
|
vertical-align: middle
|
|
min-width:175px
|
|
@media screen and (max-width:768px)
|
|
padding: 0.382em 0.382em 0
|
|
.meter
|
|
position: relative
|
|
overflow: hidden
|
|
border: 1px solid #333
|
|
border-radius: 0.382em
|
|
height: 2.25em
|
|
margin: 0 0 0.8em
|
|
.bar
|
|
border-radius: 0.382em 0 0 0.382em
|
|
height: 100%
|
|
transition: width 0.25s ease-out
|
|
border-right: 1px solid #333
|
|
hrpg-status-bar-mixin($hrpg-status-bar-color)
|
|
background: lighten($hrpg-status-bar-color, 32.8%)
|
|
color: darken($hrpg-status-bar-color, 70%)
|
|
border-color: darken($hrpg-status-bar-color, 32.8%)
|
|
.bar
|
|
background: darken($hrpg-status-bar-color, 16.18%)
|
|
border-color: darken($hrpg-status-bar-color, 32.8%)
|
|
.meter-text.title
|
|
margin-top: 0.333333em
|
|
@extend $hrpg-label
|
|
hrpg-label-color-mixin(darken($hrpg-status-bar-color,32.8%))
|
|
span
|
|
margin-right: 0.382em
|
|
.health
|
|
hrpg-status-bar-mixin($color-hp)
|
|
.experience
|
|
hrpg-status-bar-mixin($color-xp)
|
|
.meter-text
|
|
span
|
|
margin-right: 0.236em
|
|
a
|
|
color: darken($color-xp, 70%)
|
|
.mana
|
|
hrpg-status-bar-mixin($color-mp)
|
|
.meter-text
|
|
position: absolute
|
|
top: 0
|
|
line-height: 2.25
|
|
&.title
|
|
left: 0.382em
|
|
&.value
|
|
right: 0.382em
|
|
|
|
//Apply certain styles in header only
|
|
|
|
header .hero-stats
|
|
background-color: darken($color-herobox, 4%)
|
|
border-right: 1px solid darken($color-herobox, 12%)
|