SplendidBear-Websites/MineSeeker
Private
Public Access
1
0
Fork 0
Code Pull Requests 1 Releases Activity

improve game graph design

Browse Source
This commit is contained in:
Root
2016-11-07 22:39:52 +01:00
parent c2e643671b
commit d797012d51
8 changed files with 65 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/Mine/SeekerBundle/Resources/public/css/style.mineseeker.css
View File

@@ -1,6 +1,12 @@
@import 'https://fonts.googleapis.com/css?family=Open+Sans:700';
/*@import 'https://fonts.googleapis.com/css?family=Open+Sans:700';*/
@import url('https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:700');
@import 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css';
body {
background: url("/bundles/mineseeker/images/bg-mineseeker-outbg.jpg") no-repeat center center;
background-size: cover;
}
.clear {
clear: both
}
@@ -71,7 +77,7 @@
}
#mine-wrapper .game-wrapper .users {
width: 200px;
width: 180px;
padding: 0 10px 0 0;
}
@@ -105,20 +111,22 @@
}
#mine-wrapper .game-wrapper .users .user-container .user-header {
background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 39%, rgba(255, 255, 255, 0.21) 87%, rgba(0, 0, 0, 0) 100%);
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 39%, rgba(255, 255, 255, 0.21) 87%, rgba(0, 0, 0, 0) 100%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 39%, rgba(255, 255, 255, 0.21) 87%, rgba(0, 0, 0, 0) 100%);
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 39%, rgba(255, 255, 255, 0.21) 87%, rgba(0, 0, 0, 0) 100%);
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.7) 39%, rgba(255, 255, 255, 0.21) 87%, rgba(0, 0, 0, 0) 100%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 39%, rgba(255, 255, 255, 0.21) 87%, rgba(0, 0, 0, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00000000', GradientType=0);
position: relative;
font-weight: bolder;
font-size: 25px;
font: bolder 25px 'Changa One', cursive;
letter-spacing: 5px;
text-transform: uppercase;
text-align: center;
padding: 5px 5px 25px 5px;
margin-bottom: 50px;
padding: 6px 5px 20px 5px;
margin-bottom: 40px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-text-shadow: 1px 1px 0 #FFF;
text-shadow: 1px 1px 0 #FFF;
}
#mine-wrapper .game-wrapper .users .user-container.user-blue .user-header {
@@ -175,6 +183,7 @@
}
#mine-wrapper .game-wrapper .users .user-container .user-name {
min-height: 30px;
font-weight: normal;
text-align: center;
white-space: nowrap;
@@ -198,8 +207,10 @@
}
#mine-wrapper .game-wrapper .users .user-container .user-caret {
height: 35px;
font-size: 35px;
text-align: center;
line-height: 15px;
}
#mine-wrapper .game-wrapper .users .user-container.user-blue .user-caret > i {
@@ -210,10 +221,14 @@
color: #fdf612;
}
#mine-wrapper .game-wrapper .users .user-container .user-desc {
height: 60px;
}
#mine-wrapper .game-wrapper .users .user-container .user-control {
background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(125, 185, 232, 0) 100%);
background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(125, 185, 232, 0) 100%);
background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(125, 185, 232, 0) 100%);
background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.5) 0%, rgba(125, 185, 232, 0) 100%);
background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.5) 0%, rgba(125, 185, 232, 0) 100%);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(125, 185, 232, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#007db9e8', GradientType=1);
position: relative;
padding: 5px;
@@ -238,7 +253,7 @@
background: #FFFFFF;
font-size: 25px;
text-align: center;
width: 50px;
width: 45px;
height: 35px;
margin-left: 25px;
margin-top: 5px;
@@ -258,7 +273,7 @@
#mine-wrapper .game-wrapper .users .user-container .user-control .bomb-container {
display: inline-block;
float: right;
width: 75px;
width: 65px;
height: 45px;
border: 1px solid #000;
@@ -394,15 +409,15 @@
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#464942', endColorstr='#605961', GradientType=0);
position: relative;
width: 95%;
height: 70px;
height: 50px;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
font-size: 22px;
text-transform: uppercase;
text-align: center;
line-height: 65px;
line-height: 45px;
border: 3px solid #484742;
color: #FFFFFF;
color: #fff;
margin: 10px auto 0 auto;
cursor: pointer;
@@ -513,32 +528,33 @@
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcfc', endColorstr='#006a6a6a', GradientType=1);
background-repeat: no-repeat;
background-position: center center;
background-size: 85% 100%;
background-size: 72% 179%;
position: relative;
height: 30px;
}
#mine-wrapper .game-wrapper .users .active-mines-container i {
font-size: 35px;
font-size: 27px;
color: #b1b1b3;
margin-top: 3px;
text-shadow: 0 0 3px #000000;
}
#mine-wrapper .game-wrapper .users .active-mines-container i:first-child {
float: left;
margin-left: 25px;
margin-left: 20px;
}
#mine-wrapper .game-wrapper .users .active-mines-container i:last-child {
float: right;
margin-right: 25px;
margin-right: 20px;
}
#mine-wrapper .game-wrapper .users .active-mines-container .active-mines {
background: -moz-linear-gradient(top, rgba(62, 63, 65, 1) 0%, rgba(135, 136, 131, 1) 100%);
background: -webkit-linear-gradient(top, rgba(62, 63, 65, 1) 0%, rgba(135, 136, 131, 1) 100%);
background: linear-gradient(to bottom, rgba(62, 63, 65, 1) 0%, rgba(135, 136, 131, 1) 100%);
background: -moz-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(135, 136, 131, 1) 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(135, 136, 131, 1) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(135, 136, 131, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3e3f41', endColorstr='#878883', GradientType=0);
position: absolute;
width: 50px;
@@ -550,7 +566,7 @@
line-height: 39px;
text-align: center;
color: #FFFFFF;
border: 5px solid #38383a;
border: 5px solid #000000;
margin-left: -25px;
z-index: 100;
@@ -560,8 +576,8 @@
}
#mine-wrapper .game-wrapper .users .active-mines-container .active-mines.found-mine {
-webkit-animation: bubbleLeftMine 500ms cubic-bezier(.36, .07, .19, .97) both;
animation: bubbleLeftMine 500ms cubic-bezier(.36, .07, .19, .97) both;
-webkit-animation: bubbleLeftMine 750ms cubic-bezier(.36, .07, .19, .97) both;
animation: bubbleLeftMine 750ms cubic-bezier(.36, .07, .19, .97) both;
}
@keyframes bubbleLeftMine {
@@ -570,6 +586,7 @@
transform: scale(1);
}
50% {
border-color: #2e3337;
-webkit-transform: scale(2);
transform: scale(2);
}
@@ -587,9 +604,9 @@
position: absolute;
top: 0;
left: 50%;
width: 25px;
width: 30px;
height: 20px;
margin-left: -12.5px;
margin-left: -14.5px;
z-index: 101;
@@ -619,6 +636,14 @@
cursor: none;
}
#mine-wrapper .grid-container {
background: #4E4E4E;
padding: 15px 10px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#mine-wrapper .grid .field-wrapper {
position: relative;
}