mirror of
https://github.com/sudoxnym/habitica.git
synced 2026-08-05 12:02:13 +00:00
42c4096be7
* Add white-space: nowrap to .meter-text to prevent the meter text from being cut off when the meter is very short and its content is long (mainly an issue with the experience bar, which can easily have a bar graph symbol plus one four-digit number over another e.g. 1,234 / 5,678)
175 lines
No EOL
3.6 KiB
Stylus
175 lines
No EOL
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
|
|
|
|
.sticky-wrapper
|
|
height: 215px !important
|
|
|
|
/* 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: 1.1em 1em 0
|
|
margin: 0
|
|
display: table-cell
|
|
vertical-align: middle
|
|
min-width:175px
|
|
@media screen and (max-width:768px)
|
|
padding: 1.1em 0.618em 0
|
|
.meter-label
|
|
float: left
|
|
@extend $hrpg-label
|
|
hrpg-label-color-mixin(darken($color-herobox, 16.18%))
|
|
width: 2.618em
|
|
text-align:center
|
|
margin-right: 0.618em
|
|
.meter
|
|
position: relative
|
|
overflow: hidden
|
|
border: 1px solid #fff
|
|
height: 1.618em
|
|
margin: 0 0 1em
|
|
outline: 1px solid #999
|
|
.bar
|
|
height: 100%
|
|
transition: width 0.25s ease-out
|
|
hrpg-status-bar-mixin($hrpg-status-bar-color)
|
|
background: lighten($hrpg-status-bar-color, 70%)
|
|
color: darken($hrpg-status-bar-color, 90%)
|
|
.bar
|
|
background: darken($hrpg-status-bar-color, 32.8%)
|
|
border-color: darken($hrpg-status-bar-color, 70%)
|
|
.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, 80%)
|
|
.mana
|
|
hrpg-status-bar-mixin($color-mp)
|
|
.meter-text
|
|
position: absolute
|
|
top: 0
|
|
z-index: 4
|
|
line-height: 1.618
|
|
white-space: nowrap
|
|
&.value
|
|
right: 0.382em
|
|
|
|
// boss.jade only
|
|
[class^="quest_"] + &
|
|
min-width: 220px
|
|
padding: 1.618em 0 1em
|
|
|
|
//Apply certain styles in header only
|
|
|
|
header .hero-stats
|
|
background-color: darken($color-herobox, 4%)
|
|
border-right: 1px solid darken($color-herobox, 12%)
|
|
|