- @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;
- }
- #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;
- 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: 50%;
- text-align: center;
- }
- }
- }
- &.open:extend(.transition){
- right: 0;
- opacity: 1;
- }
- }
- .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);
- }
- }
-
-
- }
-
|