mirrors/not-gwent-online
1
0
Fork 0
mirror of https://github.com/exane/not-gwent-online synced 2024-11-23 19:36:53 +00:00
Code Releases Activity

bit styling

Browse Source
This commit is contained in:
devfake 2015-07-04 14:16:04 +02:00
parent 1301299910
commit 6a7b099acf
2 changed files with 60 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
client/scss/main.scss
View File

@ -32,6 +32,7 @@ $game-height: 800px;
padding: 10px; padding: 10px;
margin-top: 33px; margin-top: 33px;
text-align: center; text-align: center;
color: #3f4c5b;
} }
.field { .field {
@ -67,7 +68,7 @@ $game-height: 800px;
} }
.field:hover, .field-single:hover { .field:hover, .field-single:hover {
box-shadow: 0px 0px 10px #000; //box-shadow: 0px 0px 10px #000;
} }
.handcard-wrap { .handcard-wrap {
@ -84,8 +85,8 @@ $game-height: 800px;
left: 0; left: 0;
width: 100%; width: 100%;
background: rgba(6, 13, 22, .7); background: rgba(6, 13, 22, .7);
height: auto; height: 110px;
z-index: 10; z-index: 20;
.card { .card {
margin-left: -31px; margin-left: -31px;
@ -106,27 +107,67 @@ $game-height: 800px;
} }
.field-single { .field-single {
border: 1px solid black; //border: 1px solid black;
/* /*
width: 85px;*/ width: 85px;*/
/*margin: 5px;*/ /*margin: 5px;*/
height: 98px; //height: 98px;
padding: 0;
} }
.left-side { .left-side {
//height: $game-height; //height: $game-height;
} }
.score,
.hand-card {
color: #8798ac;
text-align: center;
padding: 0 20px 0 0 !important;
}
.field-weather {
border: none;
}
.info-title {
color: #3f4c5b;
}
.info-name {
color: #8798ac;
font-size: 18px;
margin: 15px 0;
}
.button-pass-wrap {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin: 0 !important;
}
.button-pass {
width: 100%;
border: 0;
background: #000;
padding: 5px 0;
color: #fff;
text-transform: uppercase;
fon-size: 15px;
}
.game-info { .game-info {
height: $game-height/2 - 140px; height: $game-height/2 - 140px;
width: 100%; width: 100%;
//border: 1px solid black; //border: 1px solid black;
background: rgba(252, 219, 125, 0.51); background: rgba(252, 219, 125, 0.1);
position: relative;
div { div {
margin-bottom: 5px; margin-bottom: 5px;
padding: 0;
text-align: center;
} }
.icon-hand-card { .icon-hand-card {
@ -140,13 +181,13 @@ $game-height: 800px;
} }
.removeBackground { .removeBackground {
background: rgba(19, 19, 19, 0.29); background: rgba(0,0,0, .4);
} }
.mid-line { .mid-line {
width: 100%; width: 100%;
height: 1px; height: 1px;
border: 1px solid black; //border: 1px solid black;
margin: 5px; margin: 5px;
} }
@ -265,11 +306,14 @@ $game-height: 800px;
} }
.gwent-lives { .gwent-lives {
margin: 20px 0;
i { i {
display: block; display: block;
float: left; float: left;
height: 40px; height: 40px;
width: 40px; width: 40px;
margin: 0 10px 0 0;
background: url("../../assets/ruby-grey.png"); background: url("../../assets/ruby-grey.png");
&.ruby { &.ruby {
background: url("../../assets/ruby.png"); background: url("../../assets/ruby.png");

10
client/templates/info.handlebars
View File

@ -3,19 +3,19 @@
<div class="col-xs-12 col-lg-6"> <div class="col-xs-12 col-lg-6">
<div class="row"> <div class="row">
<div class="col-xs-4"></div> <div class="col-xs-4"></div>
<div class="col-xs-4">Points:</div> <div class="col-xs-4 info-title">Points:</div>
<div class="col-xs-4 score">{{data.score}}</div> <div class="col-xs-4 score">{{data.score}}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-xs-4"><i class="icon-hand-card"></i></div> <div class="col-xs-4"><i class="icon-hand-card"></i></div>
<div class="col-xs-4">Hand:</div> <div class="col-xs-4 info-title">Hand:</div>
<div class="col-xs-4 hand-card">{{data.hand}}</div> <div class="col-xs-4 hand-card">{{data.hand}}</div>
</div> </div>
<div class="row"> <!--div class="row">
<div class="col-xs-4"></div> <div class="col-xs-4"></div>
<div class="col-xs-4">Deck:</div> <div class="col-xs-4">Deck:</div>
<div class="col-xs-4 hand-card">{{data.deck}}</div> <div class="col-xs-4 hand-card">{{data.deck}}</div>
</div> </div-->
<div class="row"> <div class="row">
<div class="col-xs-12 gwent-lives"> <div class="col-xs-12 gwent-lives">
{{#health data.lives}} {{#health data.lives}}
@ -27,7 +27,7 @@
</div> </div>
</div> </div>
{{#if passBtn}} {{#if passBtn}}
<div class="col-xs-12"> <div class="col-xs-12 button-pass-wrap">
<button class="button-pass">Pass</button> <button class="button-pass">Pass</button>
</div> </div>
{{/if}} {{/if}}