You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

212 lines
3.3 KiB

@activeColor: #FFDDA0;
@touchColor: #F7D7D7;
@unitColor: #C2F19D;
@sizeWidth: 100px;
@border: 1px;
@sizeHeight: @sizeWidth/sqrt(3);
@color: #efefef;
html, body{
margin: 0;
padding: 0;
height: auto;
width: 100%;
}
body{
background-color: #333;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
audio{
display: none;
}
.transition{
-webkit-transition: all .5s ease-in-out; /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */
transition: all .5s ease-in-out;
}
.bottomRight{
position: fixed;
left: 0;
bottom: 0;
z-index: 9999;
background: #666;
padding: 10px;
button{
margin-left: 10px;
margin-right: 10px;
}
input{
min-width: 200px;
}
}
#controlBar{
position: fixed;
top: 0;
width: 100%;
margin: 0 auto;
text-align: center;
z-index: 999;
// display: none;
&.visible{
display: block;
}
.lefting{
background: rgba(20,20,20, .5);
color: white;
float: left;
padding: 10px;
}
}
#honeyComb{
canvas{
position: absolute;
display: none;
height: 100%;
&.visible, &:first-child{
display: block;
}
}
}
#leaderBoard:extend(.transition) {
position: fixed;
top: 0px;
right: 0;
width: 500px;
height: 100%;
overflow: hidden;
background-color: rgba(255,255,255,1);
right: -400px;
color: #333;
opacity: .2;
z-index: 999;
h1, h2, p{
padding-left: 10px;
}
&:hover{
opacity: 1;
}
button{
height: 100%;
background-color: rgba(0,0,0,0.5);
color: white;
border-color: transparent;
float: left;
width: 100px;
opacity: .4;
}
#listBoard{
float: left;
overflow: auto;
height: 100%;
width: 400px;
table, tr{
width: 100%;
td{
width: 100%/3;
text-align: center;
}
}
tr:nth-child(even){
background-color: #dedede;
}
}
&.open:extend(.transition){
right: 0;
opacity: 1;
}
}
.honeycombIndex{
position: fixed;
top: 0;
left: 0;
background-color: rgba(185, 5, 198, 0.29);
padding: 20px;
z-index: 999;
font-size: 50px;
}
.honeycombScore:extend(.honeycombIndex){
top: 120px;
background-color: rgba(175, 0, 198, 0.29);
}
.canvasRendered{
background-color: #333;
}
.hex {
float: left;
margin-left: @border;
margin-bottom: -@sizeWidth/4;
.top {
width: 0;
border-bottom: @sizeHeight/2 solid @color;
border-left: @sizeWidth/2 solid transparent;
border-right: @sizeWidth/2 solid transparent;
}
.middle {
width: @sizeWidth;
height: @sizeHeight;
background: @color;
}
.bottom {
width: 0;
border-top: @sizeHeight/2 solid @color;
border-left: @sizeWidth/2 solid transparent;
border-right: @sizeWidth/2 solid transparent;
}
&.active{
.top:extend(.hex .top){
border-bottom-color: @activeColor;
}
.middle:extend(.hex .middle){
background: @activeColor;
}
.bottom:extend(.hex .bottom){
border-top-color: @activeColor;
}
}
&.touched{
.top:extend(.hex .top){
border-bottom-color: @touchColor;
}
.middle:extend(.hex .middle){
background: @touchColor;
}
.bottom:extend(.hex .bottom){
border-top-color: @touchColor;
}
}
&.unitMember{
.middle:extend(.hex .middle){
background-color: @unitColor;
// background-image:
}
}
&-row{
clear: left;
&.even {
margin-left: (@sizeWidth/2);
}
}
}