mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-11-24 16:17:57 -05:00
76 lines
2.5 KiB
Sass
76 lines
2.5 KiB
Sass
@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
|
|
|
|
.thang-avatar-view
|
|
|
|
&.selected .thang-avatar-wrapper
|
|
@include box-shadow(0px 0px 10px rgba(79, 79, 213, 1.0))
|
|
|
|
.thang-avatar-wrapper
|
|
position: relative
|
|
margin: 5px 5px 1px
|
|
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
|
|
@include gradient-radial-custom-stops(hsla(4,80%,74%,1), 20%, hsla(4,80%,51%,1), 70%)
|
|
|
|
&.team-ogres
|
|
border-color: darkblue
|
|
@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%)
|
|
|
|
.badge
|
|
$radius: 8px
|
|
$diameter: 2 * $radius
|
|
position: absolute
|
|
top: -0.5 * $radius
|
|
width: $diameter
|
|
height: $diameter
|
|
text-align: center
|
|
padding: 0
|
|
color: white
|
|
text-shadow: 0 1px rgba(0, 0, 0, 0.25)
|
|
box-sizing: border-box
|
|
|
|
border: 1px solid rgba(128, 128, 128, 1)
|
|
border-radius: $diameter
|
|
background-color: #aaa
|
|
|
|
&.problems
|
|
left: -0.5 * $radius
|
|
|
|
&.error
|
|
background-color: red
|
|
&.warning
|
|
background-color: #f89406
|
|
&.info
|
|
background-color: #3a87ad
|
|
|
|
&.shared-thangs
|
|
background-color: blue
|
|
right: -0.5 * $radius
|
|
|
|
.thang-name
|
|
font-variant: small-caps
|
|
text-align: center
|
|
color: #ca8
|
|
overflow: hidden
|
|
text-overflow: ellipsis
|
|
font-size: 13px
|
|
white-space: nowrap
|
|
// if it works for Grul'Thock and Arrow Tower, it'll work for the first 56 names I picked
|