Merge branch 'master' of https://github.com/codecombat/codecombat

app/styles/base.sass

@@ -161,8 +161,8 @@ a[data-toggle="modal"]
 table.table
   background-color: white
 
-.ui-autocomplete
-  //z-index: $zindexAutocomplete
+//.ui-autocomplete
+//  z-index: $zindexAutocomplete
   
 .ui-slider
   border: 1px solid black

app/styles/play/level.sass

@@ -1,34 +1,5 @@
-@import "../bootstrap/mixins"
-
-@mixin gradient-banner-button($topBottomColor: #2C446A, $middleColor: #3A537F)
-  background-color: mix($topBottomColor, $middleColor, 80%)
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($topBottomColor), color-stop(16%, $topBottomColor), color-stop(17%, $middleColor), color-stop(83%, $middleColor), color-stop(84%, $topBottomColor), to($topBottomColor))
-  background-image: -webkit-linear-gradient($topBottomColor, $topBottomColor 16%, $middleColor 16%, $middleColor 83%, $topBottomColor 84%, $topBottomColor)
-  background-image: -moz-linear-gradient(top, $topBottomColor, $topBottomColor 16%, $middleColor 16%, $middleColor 83%, $topBottomColor 84%, $topBottomColor)
-  background-image: -o-linear-gradient($topBottomColor, $topBottomColor 16%, $middleColor 16%, $middleColor 83%, $topBottomColor 84%, $topBottomColor)
-  background-image: linear-gradient($topBottomColor, $topBottomColor 16%, $middleColor 16%, $middleColor 83%, $topBottomColor 84%, $topBottomColor)
-  background-repeat: no-repeat
-
-@mixin banner-button($backgroundColor: #3A537F, $textColor: #FFF)
-  $topBottomColor: darken($backgroundColor, 9%)
-  @include gradient-banner-button($topBottomColor, $backgroundColor)
-  color: $textColor
-
-  &:hover:not(.disabled):not([disabled]), &:focus:not(.disabled):not([disabled])
-    @include gradient-banner-button(lighten($topBottomColor, 6%), lighten($backgroundColor, 6%))
-
-  &.active, &:active
-    background-image: none
-    outline: 0
-    @include box-shadow(inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05))
-
-  // Disabled state
-  &.disabled, &[disabled]
-    cursor: default
-    background-image: none
-    @include opacity(0.65)
-    @include box-shadow(none)
-
+@import "app/styles/bootstrap/mixins"
+@import "app/styles/mixins"
 
 #level-view
   margin: 0 auto

app/styles/play/level/hud.sass

@@ -1,4 +1,5 @@
 @import "app/styles/bootstrap/mixins"
+@import "app/styles/mixins"
 
 #thang-hud.no-selection
   .center
@@ -63,19 +64,24 @@
     .thang-canvas-wrapper, .speaker-image-wrapper
       width: 100px
       height: 100px
-      border: 1px solid darkred
       margin: 7px 7px 7px 22px
       float: left
-      border-radius: 4px
       overflow: hidden
+      border: 1px solid #888
+      border-radius: 4px
+      @include gradient-radial-custom-stops(hsla(205,0%,74%,1), 20%, hsla(205,0%,31%,1), 70%)
 
       &.team-humans
         border-color: darkred
-        background-color: rgba(255,100,100,0.5)
+        @include gradient-radial-custom-stops(hsla(4,80%,74%,1), 20%, hsla(4,80%,51%,1), 70%)
 
       &.team-ogres
         border-color: darkblue
-        background-color: rgba(100,100,255,0.5)
+        @include gradient-radial-custom-stops(hsla(205,100%,74%,1), 20%, hsla(205,100%,31%,1), 70%)
+
+      &.team-allies, &.team-minions
+        border-color: darkgreen
+        @include gradient-radial-custom-stops(hsla(116,80%,74%,1), 20%, hsla(116,80%,31%,1), 70%)
 
     .thang-props
       width: 144px

app/styles/play/level/thang_avatar.sass

@@ -1,14 +1,5 @@
-@import "../../bootstrap/mixins"
-
-@mixin gradient-radial-custom-stops($innerColor: #555, $innerStop: 20%, $outerColor: #333, $outerStop: 70%)
-  background-color: $outerColor
-  @include gradient-vertical($innerColor, $outerColor)  // IE6-9 fallback on vertical gradient
-  background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor $innerStop), to($outerColor $outerStop))
-  background-image: -webkit-radial-gradient(circle, $innerColor $innerStop, $outerColor $outerStop)
-  background-image: -moz-radial-gradient(circle, $innerColor $innerStop, $outerColor $outerStop)
-  background-image: -o-radial-gradient(circle, $innerColor $innerStop, $outerColor $outerStop)
-  background-image: radial-gradient(circle, $innerColor $innerStop, $outerColor $outerStop)
-  background-repeat: no-repeat
+@import "app/styles/bootstrap/mixins"
+@import "app/styles/mixins"
 
 .thang-avatar-view
 

app/views/play/level/hud_view.coffee

@@ -110,7 +110,8 @@ module.exports = class HUDView extends View
     newCanvas = $(stage.canvas).addClass('thang-canvas')
     wrapper.empty().append(newCanvas)
     team = @thang?.team or @speakerSprite?.thang?.team
-    newCanvas.parent().removeClass('team-ogres').removeClass('team-humans').addClass("team-#{team}")
+    wrapper.removeClass (i, css) -> (css.match(/\bteam-\S+/g) or []).join ' '
+    wrapper.addClass "team-#{team}"
     stage.update()
     @stage?.stopTalking()
     @stage = stage