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)

public/css/game-pane.styl

@@ -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

public/css/global-colors.styl

@@ -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