mirror of
https://github.com/sudoxnym/habitica-self-host.git
synced 2026-07-16 11:11:43 +00:00
refactor(game-pane.styl): tweak layout and colors
– Improve positioning and size of chat-box buttons – Replace some px values with ems – Replace contributor colors with variables (set in global-colors.styl)
This commit is contained in:
benmanley
parent
f83f2acc1b
commit
4cf1030c85
3 changed files with 64 additions and 29 deletions
|
|
@ -10,12 +10,29 @@
|
|||
position: relative
|
||||
|
||||
textarea
|
||||
margin-bottom: 5px
|
||||
margin-bottom: 0.618em
|
||||
line-height: 1.618em
|
||||
|
||||
.chat-controls
|
||||
> div
|
||||
display: inline-block
|
||||
vertical-align: middle
|
||||
&:nth-of-type(1)
|
||||
width: 40%
|
||||
&:nth-of-type(2)
|
||||
width: 60%
|
||||
|
||||
.chat-buttons
|
||||
@extend $hrpg-button
|
||||
text-align: right;
|
||||
input
|
||||
margin-right: 0.618em
|
||||
|
||||
.chat-message
|
||||
markdown, span.time
|
||||
padding: 0 3px
|
||||
|
||||
line-height: 1.618em
|
||||
|
||||
.chat-plus-one
|
||||
opacity: 0
|
||||
background-color: #eee
|
||||
|
|
@ -35,7 +52,7 @@
|
|||
position:relative
|
||||
|
||||
&.highlight
|
||||
background #EEE
|
||||
background: #EEE
|
||||
|
||||
label
|
||||
margin-right:5px
|
||||
|
|
@ -49,7 +66,7 @@
|
|||
visibility:hidden
|
||||
|
||||
.scrollable-message
|
||||
max-height:80px
|
||||
max-height: 6.472em
|
||||
overflow-y:auto
|
||||
|
||||
h1, h2, h3, h4, h5
|
||||
|
|
@ -74,7 +91,6 @@
|
|||
padding-left: 2px
|
||||
|
||||
markdown
|
||||
|
||||
p:first-child
|
||||
display:inline
|
||||
|
||||
|
|
@ -92,24 +108,32 @@
|
|||
display: none
|
||||
margin-top: 10px
|
||||
|
||||
// Name tags
|
||||
.label-contributor-1, .label-contributor-2
|
||||
background-color: #333;
|
||||
.label-contributor-3, .label-contributor-4
|
||||
background-color: #077409
|
||||
color: white
|
||||
.label-contributor-5, .label-contributor-6
|
||||
background-color: #125BA2
|
||||
color: white
|
||||
|
||||
// Name tags – For color variables, see global-colors.styl
|
||||
|
||||
hrpg-contributor-label-mixin($hrpg-contributor-color)
|
||||
//@extend $hrpg-label
|
||||
hrpg-label-color-mixin($hrpg-contributor-color)
|
||||
|
||||
.label-contributor-1
|
||||
hrpg-contributor-label-mixin($color-contributor-one)
|
||||
.label-contributor-2
|
||||
hrpg-contributor-label-mixin($color-contributor-two)
|
||||
.label-contributor-3
|
||||
hrpg-contributor-label-mixin($color-contributor-three)
|
||||
.label-contributor-4
|
||||
hrpg-contributor-label-mixin($color-contributor-four)
|
||||
.label-contributor-5
|
||||
hrpg-contributor-label-mixin($color-contributor-five)
|
||||
.label-contributor-6
|
||||
hrpg-contributor-label-mixin($color-contributor-six)
|
||||
.label-contributor-7
|
||||
background-color: #7313B4
|
||||
color: white
|
||||
hrpg-contributor-label-mixin($color-contributor-seven)
|
||||
.label-contributor-8
|
||||
background-color: #ff8000
|
||||
color: white
|
||||
hrpg-contributor-label-mixin($color-contributor-staff)
|
||||
.label-npc
|
||||
background-color: indianred
|
||||
color: white
|
||||
hrpg-contributor-label-mixin($color-contributor-npc)
|
||||
|
||||
|
||||
#market-tab
|
||||
position relative
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ $best = rgb(201, 218, 248)
|
|||
$completed = rgb(217, 217, 217)
|
||||
//Label colors
|
||||
$color-purple = #b881b9
|
||||
// avatar background colors
|
||||
// Avatar background colors
|
||||
$color-herobox = desaturate(lighten($better, 16%),32%)
|
||||
// Header status bar
|
||||
$color-hp = $worse
|
||||
|
|
@ -19,10 +19,21 @@ $color-mp = $best
|
|||
$color-toolbar = lighten($color-herobox, 70%)
|
||||
$color-options-menu = lighten($color-herobox, 85%)
|
||||
$color-options-submenu = lighten($color-herobox, 75%)
|
||||
// button color variables
|
||||
// Button colors
|
||||
$color-button-style-one = $best
|
||||
// Task background
|
||||
$color-tasks = lighten($color-herobox, 65%)
|
||||
// Task filter colors
|
||||
$color-filter-tag = lighten($good,90%)
|
||||
$color-filter-tag-challenge = lighten($color-purple,90%)
|
||||
$color-filter-tag-challenge = lighten($color-purple,90%)
|
||||
// Contributor colors
|
||||
$color-contributor-one = #333
|
||||
$color-contributor-two = #333
|
||||
$color-contributor-three = #077409
|
||||
$color-contributor-four = #077409
|
||||
$color-contributor-five = #125BA2
|
||||
$color-contributor-six = #125BA2
|
||||
$color-contributor-seven = #7313B4
|
||||
$color-contributor-mod = #ff8000
|
||||
$color-contributor-staff = #ff8000
|
||||
$color-contributor-npc = indianred
|
||||
|
|
@ -5,10 +5,10 @@ form.chat-form(ng-submit='postChat(group,message.content)')
|
|||
ul.list-at-user
|
||||
li(ng-repeat='user in response | filter:query.text | limitTo: 5', ng-click='autoComplete(user)')
|
||||
span.username.label.label-default(ng-class=':: userLevelStyle(user)') {{::user.user}}
|
||||
.row
|
||||
.col-md-9
|
||||
.chat-controls
|
||||
.chat-formatting
|
||||
include ../../shared/formatting-help
|
||||
.col-md-3
|
||||
input.btn.btn-default.chat-btn(type='submit', value=env.t('sendChat'), ng-class='{disabled: _sending == true}')
|
||||
button.btn.btn-default(type="button", ng-click='sync(group)', tooltip=env.t('toolTipMsg'))
|
||||
span.glyphicon.glyphicon-refresh.pull-right
|
||||
.chat-buttons
|
||||
input(type='submit', value=env.t('sendChat'), ng-class='{disabled: _sending == true}')
|
||||
button(type="button", ng-click='sync(group)', tooltip=env.t('toolTipMsg'))
|
||||
span.glyphicon.glyphicon-refresh
|
||||
Loading…
Reference in a new issue