mirror of
https://github.com/sudoxnym/habitica-self-host.git
synced 2026-08-02 04:00:36 +00:00
refactor(.hero-stats): restyle status meters
Add text to icons to clarify purpose of each bar Tidy up tooltip behaviour Aesthetic changes
This commit is contained in:
benmanley
parent
5a73923d0a
commit
57eb80f9db
5 changed files with 89 additions and 73 deletions
|
|
@ -1,4 +1,4 @@
|
|||
// color variables
|
||||
// Task colors
|
||||
$worst = rgb(230, 184, 175)
|
||||
$worse = rgb(244, 204, 204)
|
||||
$bad = rgb(252, 229, 205)
|
||||
|
|
@ -7,8 +7,14 @@ $good = rgb(217, 234, 211)
|
|||
$better = rgb(208, 224, 227)
|
||||
$best = rgb(201, 218, 248)
|
||||
$completed = rgb(217, 217, 217)
|
||||
//Label colors
|
||||
$color-purple = #b881b9
|
||||
// avatar background colors
|
||||
$color-herobox = desaturate(lighten($better, 16%),32%)
|
||||
// Header status bar
|
||||
$color-hp = $worse
|
||||
$color-xp = $neutral
|
||||
$color-mp = $best
|
||||
// Navigation background colors
|
||||
$color-toolbar = lighten($color-herobox, 70%)
|
||||
$color-options-menu = lighten($color-herobox, 85%)
|
||||
|
|
@ -19,4 +25,4 @@ $color-button-style-one = $best
|
|||
$color-tasks = lighten($color-herobox, 65%)
|
||||
// Task filter colors
|
||||
$color-filter-tag = lighten($good,90%)
|
||||
$color-filter-tag-challenge = lighten($bad,90%)
|
||||
$color-filter-tag-challenge = lighten($color-purple,90%)
|
||||
|
|
@ -1,3 +1,11 @@
|
|||
// Text shadow mixin
|
||||
hrpg-text-shadow-mixin($hrpg-text-shadow-base-color)
|
||||
if lightness($hrpg-text-shadow-base-color) >= 50%
|
||||
text-shadow:
|
||||
-1px -1px 2px darken($hrpg-text-shadow-base-color,61.8%),
|
||||
1px -1px 2px darken($hrpg-text-shadow-base-color,61.8%),
|
||||
-1px 1px 2px darken($hrpg-text-shadow-base-color,61.8%),
|
||||
1px 1px 2px darken($hrpg-text-shadow-base-color,61.8%);
|
||||
// Buttons
|
||||
// The !important declarations override Bootstrap
|
||||
hrpg-button-color-mixin($hrpg-button-color)
|
||||
|
|
@ -94,7 +102,7 @@ $hrpg-button-with-input
|
|||
border-radius: 0em 0.382em 0.382em 0em
|
||||
//Button bar
|
||||
hrpg-button-bar-mixin($hrpg-button-bar-color)
|
||||
border-color: darken($hrpg-button-bar-color, 16.18)
|
||||
border-color: darken($hrpg-button-bar-color, 16.18%)
|
||||
li
|
||||
border-right-color: darken($hrpg-button-bar-color,3.82%)
|
||||
li:first-of-type
|
||||
|
|
@ -107,9 +115,10 @@ $hrpg-button-bar
|
|||
margin-bottom: 0.618em
|
||||
li
|
||||
border-right: 1px solid darken(#fff,3.82%)
|
||||
float:left
|
||||
li:first-of-type
|
||||
color: darken(#fff,61.8%)
|
||||
padding: 0.25em 0.5em
|
||||
padding: 0.25em 0.618em
|
||||
border-radius: 0.382em 0em 0em 0.382em
|
||||
border-right: 1px solid darken(#fff,6.18%)
|
||||
li:last-of-type
|
||||
|
|
@ -120,7 +129,8 @@ $hrpg-button-bar
|
|||
hrpg-label-color-mixin($hrpg-label-color)
|
||||
color: lighten($hrpg-label-color, 90%) !important
|
||||
background-color: $hrpg-label-color !important
|
||||
border-color: darken($hrpg-label-color, 16.18%) !important
|
||||
border-color: darken($hrpg-label-color, 32.8%) !important
|
||||
hrpg-text-shadow-mixin(lighten($hrpg-label-color, 90%))
|
||||
> a
|
||||
color: lighten($hrpg-label-color, 90%) !important
|
||||
$hrpg-label
|
||||
|
|
@ -238,19 +248,20 @@ $hrpg-submenu
|
|||
// Tags
|
||||
hrpg-tag-color-mixin($hrpg-tag-color)
|
||||
background-color: darken($hrpg-tag-color,3.82%)
|
||||
&.active
|
||||
> a, > a span
|
||||
color: darken($hrpg-tag-color,3.82%)
|
||||
background-color: darken($hrpg-tag-color,32.8%)
|
||||
&:before
|
||||
border-right-color: darken($hrpg-tag-color,32.8%)
|
||||
> a, > a span
|
||||
color: darken($hrpg-tag-color,61.8%)
|
||||
&:before
|
||||
border-right-color: darken($hrpg-tag-color,3.82%)
|
||||
hrpg-text-shadow-mixin(darken($hrpg-tag-color,61.8%))
|
||||
&.active
|
||||
> a, > a span
|
||||
color: darken($hrpg-tag-color,3.82%)
|
||||
hrpg-text-shadow-mixin(darken($hrpg-tag-color,3.82%))
|
||||
background-color: darken($hrpg-tag-color,32.8%)
|
||||
&:before
|
||||
border-right-color: darken($hrpg-tag-color,32.8%)
|
||||
@media screen and (min-width:768px)
|
||||
&:hover, &:hover > a, &:hover > a span
|
||||
//color: darken($hrpg-tag-color,3.82%)
|
||||
background-color: darken($hrpg-tag-color,16.8%)
|
||||
&:hover > a:before
|
||||
border-right-color: darken($hrpg-tag-color,16.18%)
|
||||
|
|
@ -263,6 +274,7 @@ hrpg-tag-color-mixin($hrpg-tag-color)
|
|||
$hrpg-tag-master
|
||||
display: inline-block
|
||||
position: relative
|
||||
left: -1em
|
||||
width: auto
|
||||
margin-left: 1.618em
|
||||
&.active > a
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
overflow-x: auto
|
||||
// position relative
|
||||
@media screen and (max-width:768px) // remove padding-top when toolbar is static
|
||||
padding: 0
|
||||
padding: 0
|
||||
.toolbar.active ~ .header-wrap
|
||||
padding: 0 // remove padding when toolbar is hidden
|
||||
|
||||
|
|
@ -109,61 +109,58 @@
|
|||
/* progress bars
|
||||
-------------------- */
|
||||
.hero-stats
|
||||
padding: 0 1.25em
|
||||
padding: 0.8em 1em 0
|
||||
margin: 0
|
||||
display: table-cell
|
||||
vertical-align: middle
|
||||
min-width:175px
|
||||
|
||||
.meter, .bar
|
||||
box-shadow: none
|
||||
border-radius: 0
|
||||
|
||||
@media screen and (max-width:768px)
|
||||
padding: 0.382em 0.382em 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
|
||||
overflow: hidden
|
||||
border: 1px solid #333
|
||||
border-radius: 0.382em
|
||||
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
|
||||
|
||||
margin: 0 0 0.8em
|
||||
.bar
|
||||
border: 1px solid rgba(0,0,0,0.1)
|
||||
border-radius: 0.382em 0 0 0.382em
|
||||
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%)
|
||||
|
||||
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
|
||||
right: 0.5em
|
||||
z-index: 1
|
||||
line-height: 2.25
|
||||
|
||||
&.title
|
||||
left: 0.382em
|
||||
&.value
|
||||
right: 0.382em
|
||||
|
||||
//Apply certain styles in header only
|
||||
|
||||
header .hero-stats
|
||||
|
|
|
|||
|
|
@ -37,13 +37,13 @@ a.pull-right.gem-wallet(popover-trigger='mouseenter', popover-title=env.t('guild
|
|||
span.glyphicon.glyphicon-heart
|
||||
| {{group.quest.hp | number:0}} / {{Content.quests[group.quest.key].hp}}
|
||||
.hero-stats
|
||||
.meter.health(title=env.t('bossHP'))
|
||||
.meter.health(tooltip=env.t('bossHP'))
|
||||
.bar(style='width: {{Shared.percent(group.quest.progress.hp, Content.quests[group.quest.key].boss.hp)}}%;')
|
||||
span.meter-text
|
||||
span.meter-text.title
|
||||
span.glyphicon.glyphicon-heart
|
||||
|
||||
| HP
|
||||
span.meter-text.value
|
||||
| {{Math.ceil(group.quest.progress.hp)}} / {{Content.quests[group.quest.key].boss.hp}}
|
||||
|
||||
div(ng-if='Content.quests[group.quest.key].collect')
|
||||
h4=env.t('collected') + ':'
|
||||
table.table.table-striped
|
||||
|
|
|
|||
|
|
@ -5,31 +5,32 @@
|
|||
// avatar
|
||||
.herobox-wrap.main-herobox(ng-controller='UserCtrl')
|
||||
+herobox({main:1})
|
||||
|
||||
// stat bars
|
||||
.hero-stats
|
||||
.meter.health(title=env.t('health'))
|
||||
.meter.health(tooltip=env.t('health'))
|
||||
.bar(style='width: {{Shared.percent(user.stats.hp, 50)}}%;')
|
||||
span.meter-text
|
||||
span.meter-text.title
|
||||
span.glyphicon.glyphicon-heart
|
||||
|
|
||||
| HP
|
||||
span.meter-text.value
|
||||
| {{Math.ceil(user.stats.hp)}} / 50
|
||||
.meter.experience(title=env.t('experience'))
|
||||
.meter.experience(tooltip=env.t('experience'))
|
||||
.bar(style='width: {{Shared.percent(user.stats.exp,Shared.tnl(user.stats.lvl))}}%;')
|
||||
span.meter-text
|
||||
span.meter-text.title
|
||||
span.glyphicon.glyphicon-star
|
||||
|
|
||||
| XP
|
||||
span.meter-text.value
|
||||
span(ng-show='user.history.exp', tooltip=env.t('progress'))
|
||||
a(ng-click='toggleChart("exp")').glyphicon.glyphicon-signal
|
||||
span
|
||||
| {{Math.floor(user.stats.exp) | number:0}} / {{Shared.tnl(user.stats.lvl) | number:0}}
|
||||
// FIXME doesn't look great here, but the "Experience" CSS title rollover covers it where it was before
|
||||
span(ng-show='user.history.exp')
|
||||
a(ng-click='toggleChart("exp")', tooltip=env.t('progress'))
|
||||
|
|
||||
span.glyphicon.glyphicon-signal
|
||||
.meter.mana(title='Mana', ng-if='user.flags.classSelected && !user.preferences.disableClasses')
|
||||
.meter.mana(tooltip='Mana', ng-if='user.flags.classSelected && !user.preferences.disableClasses')
|
||||
.bar(style='width: {{user.stats.mp / user._statsComputed.maxMP * 100}}%;')
|
||||
span.meter-text
|
||||
span.meter-text.title
|
||||
span.glyphicon.glyphicon-fire
|
||||
|
|
||||
| MP
|
||||
span.meter-text.value
|
||||
span
|
||||
| {{Math.floor(user.stats.mp)}} / {{user._statsComputed.maxMP}}
|
||||
|
||||
// party
|
||||
|
|
|
|||
Loading…
Reference in a new issue