mirror of
https://github.com/exane/not-gwent-online
synced 2024-10-31 10:36:53 +00:00
358 lines
7.1 KiB
SCSS
358 lines
7.1 KiB
SCSS
//@import "style";
|
|
@import "backbone.modal";
|
|
@import "backbone.modal.theme";
|
|
|
|
$height: 600px;
|
|
$game-height: 800px;
|
|
|
|
.board {
|
|
height: $game-height;
|
|
border: 1px solid black;
|
|
}
|
|
|
|
.battleside {
|
|
width: 100%;
|
|
height: $height/2;
|
|
border: 1px solid black;
|
|
}
|
|
|
|
.large-field-counter {
|
|
line-height: 20px;
|
|
border: 1px solid black;
|
|
border-radius: 30px;
|
|
height: 40px;
|
|
padding: 10px;
|
|
margin-top: 33px;
|
|
text-align: center;
|
|
}
|
|
|
|
.field {
|
|
//width: 100%;
|
|
height: 100px;
|
|
border: 1px solid black;
|
|
/*
|
|
overflow: hidden;
|
|
|
|
&:hover {
|
|
overflow: visible;
|
|
}*/
|
|
|
|
.card:first-child {
|
|
margin-left: 0 !important;
|
|
}
|
|
&.active {
|
|
box-shadow: 0px 0px 15px #ffbb0b;
|
|
|
|
}
|
|
}
|
|
|
|
.field-horn {
|
|
/*
|
|
border: 1px solid green;*/
|
|
/*clear: both;*/
|
|
margin: 0px;
|
|
padding: 0px;
|
|
|
|
}
|
|
|
|
.field:hover, .field-single:hover {
|
|
box-shadow: 0px 0px 10px #000;
|
|
}
|
|
|
|
.field-hand {
|
|
margin-top: 20px;
|
|
.card {
|
|
margin-left: -31px;
|
|
&:first-child {
|
|
margin-left: 0 !important;
|
|
}
|
|
&:hover {
|
|
position: relative;
|
|
z-index: 10;
|
|
transform: scale(1.25, 1.25);
|
|
}
|
|
}
|
|
}
|
|
|
|
.passing {
|
|
/*
|
|
display: none;*/
|
|
}
|
|
|
|
.field-single {
|
|
border: 1px solid black;
|
|
/*
|
|
width: 85px;*/
|
|
/*margin: 5px;*/
|
|
height: 98px;
|
|
}
|
|
|
|
.left-side {
|
|
//height: $game-height;
|
|
}
|
|
|
|
.game-info {
|
|
height: $game-height/2 - 100px;
|
|
width: 100%;
|
|
border: 1px solid black;
|
|
background: rgba(252, 219, 125, 0.51);
|
|
}
|
|
|
|
.removeBackground {
|
|
background: 0;
|
|
}
|
|
|
|
.mid-line {
|
|
width: 100%;
|
|
height: 1px;
|
|
border: 1px solid black;
|
|
margin: 5px;
|
|
}
|
|
|
|
.right-side {
|
|
border: 1px solid black;
|
|
height: $game-height/2;
|
|
}
|
|
|
|
.card {
|
|
border: 2px solid black;
|
|
float: left;
|
|
margin: 3px;
|
|
height: 90px;
|
|
overflow: hidden;
|
|
/*img {
|
|
height: 120px;
|
|
}*/
|
|
|
|
i {
|
|
display: block;
|
|
//transform: scale(1);
|
|
}
|
|
|
|
/*.card-attr-power {
|
|
margin-top: 0px;
|
|
margin-left: 0px;
|
|
height: 25px;
|
|
width: 25px;
|
|
text-align: center;
|
|
line-height: 25px;
|
|
font-size: 20px;
|
|
color: black;
|
|
}*/
|
|
.card-attr-positive {
|
|
color: #00b000;
|
|
}
|
|
|
|
span {
|
|
color: #ff2d00;
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
position: absolute;
|
|
text-shadow: 1px 1px 1px #101010;
|
|
text-align: center;
|
|
//margin-top: 62px;
|
|
//margin-left: 3px;
|
|
//margin-top: 2px;
|
|
cursor: default;
|
|
//background: #ffffff;
|
|
//border-radius: 10px;
|
|
//padding: 2px;
|
|
padding-top: 4px;
|
|
//padding-left: -4px;
|
|
height: 37px;
|
|
width: 30px;
|
|
background: url("../../assets/card_strength_border.png") no-repeat;
|
|
}
|
|
|
|
&.disabled {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
&.activeCard {
|
|
position: relative;
|
|
z-index: 11;
|
|
transform: scale(1.5, 1.5) !important;
|
|
}
|
|
}
|
|
|
|
.card-preview {
|
|
div {
|
|
position: fixed;
|
|
//left:0;
|
|
z-index: 110;
|
|
//height: 100px !important;
|
|
i {
|
|
display: block;
|
|
}
|
|
.preview-description {
|
|
width: 238px;
|
|
min-height: 200px;
|
|
background: rgba(16, 16, 16, 0.57);
|
|
color: #ffffff;
|
|
|
|
p {
|
|
padding: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.gwent-lives {
|
|
i {
|
|
display: block;
|
|
float: left;
|
|
height: 40px;
|
|
width: 40px;
|
|
background: url("../../assets/ruby-grey.png");
|
|
&.ruby {
|
|
background: url("../../assets/ruby.png");
|
|
}
|
|
}
|
|
}
|
|
|
|
.field {
|
|
&.field-frost {
|
|
background: #ffffff; /* Old browsers */
|
|
background: -moz-linear-gradient(top, #ffffff 0%, #2365ff 100%); /* FF3.6+ */
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #2365ff)); /* Chrome,Safari4+ */
|
|
background: -webkit-linear-gradient(top, #ffffff 0%, #2365ff 100%); /* Chrome10+,Safari5.1+ */
|
|
background: -o-linear-gradient(top, #ffffff 0%, #2365ff 100%); /* Opera 11.10+ */
|
|
background: -ms-linear-gradient(top, #ffffff 0%, #2365ff 100%); /* IE10+ */
|
|
background: linear-gradient(to bottom, #ffffff 0%, #2365ff 100%); /* W3C */
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#2365ff', GradientType=0); /* IE6-9 */
|
|
|
|
}
|
|
&.field-fog {
|
|
background: #ffffff; /* Old browsers */
|
|
background: -moz-linear-gradient(top, #ffffff 0%, #232f30 100%); /* FF3.6+ */
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #232f30)); /* Chrome,Safari4+ */
|
|
background: -webkit-linear-gradient(top, #ffffff 0%, #232f30 100%); /* Chrome10+,Safari5.1+ */
|
|
background: -o-linear-gradient(top, #ffffff 0%, #232f30 100%); /* Opera 11.10+ */
|
|
background: -ms-linear-gradient(top, #ffffff 0%, #232f30 100%); /* IE10+ */
|
|
background: linear-gradient(to bottom, #ffffff 0%, #232f30 100%); /* W3C */
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#232f30', GradientType=0); /* IE6-9 */
|
|
}
|
|
&.field-rain {
|
|
background: #ffffff; /* Old browsers */
|
|
background: -moz-linear-gradient(top, #ffffff 0%, #9b9b9b 100%); /* FF3.6+ */
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #9b9b9b)); /* Chrome,Safari4+ */
|
|
background: -webkit-linear-gradient(top, #ffffff 0%, #9b9b9b 100%); /* Chrome10+,Safari5.1+ */
|
|
background: -o-linear-gradient(top, #ffffff 0%, #9b9b9b 100%); /* Opera 11.10+ */
|
|
background: -ms-linear-gradient(top, #ffffff 0%, #9b9b9b 100%); /* IE10+ */
|
|
background: linear-gradient(to bottom, #ffffff 0%, #9b9b9b 100%); /* W3C */
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#9b9b9b', GradientType=0); /* IE6-9 */
|
|
|
|
}
|
|
}
|
|
|
|
.playcard-banner {
|
|
position: fixed;
|
|
border: 1px solid red;
|
|
background: orangered;
|
|
width: 100%;
|
|
height: 250px;
|
|
left: 0;
|
|
text-align: center;
|
|
top: 200px;
|
|
z-index: 200;
|
|
.card {
|
|
position: relative;
|
|
left: 50%;
|
|
top: 30%;
|
|
}
|
|
}
|
|
|
|
.waiting-for-opponent {
|
|
position: absolute;
|
|
//left: 43%;
|
|
left: 30%;
|
|
top: 505px;
|
|
border: 1px solid black;
|
|
border-radius: 10px;
|
|
padding: 0px 200px;
|
|
z-index: 300;
|
|
color: #ff8927;
|
|
//text-shadow: 0px 0px 1px #000;
|
|
background: #444ba1;
|
|
}
|
|
|
|
.waiting-for-opponent{
|
|
animation: waitForOpponent linear 2s;
|
|
animation-iteration-count: infinite;
|
|
transform-origin: 50% 50%;
|
|
-webkit-animation: waitForOpponent linear 2s;
|
|
-webkit-animation-iteration-count: infinite;
|
|
-webkit-transform-origin: 50% 50%;
|
|
-moz-animation: waitForOpponent linear 2s;
|
|
-moz-animation-iteration-count: infinite;
|
|
-moz-transform-origin: 50% 50%;
|
|
-o-animation: waitForOpponent linear 2s;
|
|
-o-animation-iteration-count: infinite;
|
|
-o-transform-origin: 50% 50%;
|
|
-ms-animation: waitForOpponent linear 2s;
|
|
-ms-animation-iteration-count: infinite;
|
|
-ms-transform-origin: 50% 50%;
|
|
}
|
|
|
|
|
|
|
|
@keyframes waitForOpponent{
|
|
0% {
|
|
opacity:1;
|
|
}
|
|
50% {
|
|
opacity:0.8;
|
|
}
|
|
100% {
|
|
opacity:1;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes waitForOpponent{
|
|
0% {
|
|
opacity:1;
|
|
}
|
|
50% {
|
|
opacity:0.8;
|
|
}
|
|
100% {
|
|
opacity:1;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes waitForOpponent {
|
|
0% {
|
|
opacity:1;
|
|
}
|
|
50% {
|
|
opacity:0.8;
|
|
}
|
|
100% {
|
|
opacity:1;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes waitForOpponent {
|
|
0% {
|
|
opacity:1;
|
|
}
|
|
50% {
|
|
opacity:0.8;
|
|
}
|
|
100% {
|
|
opacity:1;
|
|
}
|
|
}
|
|
|
|
@-ms-keyframes waitForOpponent {
|
|
0% {
|
|
opacity:1;
|
|
}
|
|
50% {
|
|
opacity:0.8;
|
|
}
|
|
100% {
|
|
opacity:1;
|
|
}
|
|
} |