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

created basic game w/ table and animations

Browse Source
This commit is contained in:
Root
2016-10-11 22:11:21 +02:00
parent 8583be9d2a
commit 91bf6aa737
18 changed files with 327 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,3 +1,5 @@
@import 'https://fonts.googleapis.com/css?family=Open+Sans:700';
#mine-wrapper,
#mine-wrapper * {
-webkit-box-sizing: border-box;
@@ -7,26 +9,228 @@
#mine-wrapper .grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
flex-wrap: wrap;
width: 642px;
border: 1px solid red;
border: 1px solid #51c2fe;
margin: 0 auto;
cursor: none;
}
#mine-wrapper .grid .field {
background: #fff;
#mine-wrapper .grid .field-wrapper {
position: relative;
}
#mine-wrapper .grid .field-wrapper > img.field-target {
position: absolute;
display: none;
width: 45px;
top: -2.5px;
left: -2.5px;
z-index: 100;
}
#mine-wrapper .grid .field-wrapper:hover > img.field-target {
display: block;
}
#mine-wrapper .grid .field-wrapper > img.field-blue-last,
#mine-wrapper .grid .field-wrapper > img.field-red-last {
position: absolute;
display: none;
width: 100%;
top: 0;
left: 0;
z-index: 99;
}
#mine-wrapper .grid .field-wrapper > img.field-blue-last.last-clicked,
#mine-wrapper .grid .field-wrapper > img.field-red-last.last-clicked {
display: block;
}
#mine-wrapper .grid .field-wrapper .field {
background: #61defa;
background: -moz-linear-gradient(left, #61defa 0%, #119dec 100%);
background: -webkit-linear-gradient(left, #61defa 0%, #119dec 100%);
background: linear-gradient(to right, #61defa 0%, #119dec 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#61defa', endColorstr='#119dec', GradientType=1);
width: 40px;
height: 40px;
border: 1px solid red;
border: 2px solid #51c2fe;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
font-size: 35px;
text-align: center;
line-height: 35px;
}
#mine-wrapper .grid .field.active {
background: blue;
color: #FFFFFF;
#mine-wrapper .grid .field-wrapper .field .field-corner {
background: url('/bundles/mineseeker/images/bg-corner-outbg.png') no-repeat top left;
background-size: 100%;
width: 100%;
height: 100%;
}
#mine-wrapper .grid .field.active.mine {
background: red;
color: #FFFFFF;
}
#mine-wrapper .grid .field-wrapper .field.active {
background: #fde717;
background: -moz-linear-gradient(left, #fde717 0%, #f5b807 100%);
background: -webkit-linear-gradient(left, #fde717 0%, #f5b807 100%);
background: linear-gradient(to right, #fde717 0%, #f5b807 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fde717', endColorstr='#f5b807', GradientType=1);
border: 2px solid #f6d762;
color: #000;
}
#mine-wrapper .grid .field-wrapper .field.active .flag-number {
-webkit-animation: bubbleNumber 500ms cubic-bezier(.36, .07, .19, .97) both;
animation: bubbleNumber 500ms cubic-bezier(.36, .07, .19, .97) both;
-webkit-transform: scale(1);
transform: scale(1);
}
@keyframes bubbleNumber {
0% {
background: #61defa;
background: -moz-linear-gradient(left, #61defa 0%, #119dec 100%);
background: -webkit-linear-gradient(left, #61defa 0%, #119dec 100%);
background: linear-gradient(to right, #61defa 0%, #119dec 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#61defa', endColorstr='#119dec', GradientType=1);
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-border-radius: 0;
border-radius: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
}
#mine-wrapper .grid .field-wrapper .field.active .flag-mine {
position: relative;
overflow: hidden;
}
#mine-wrapper .grid .field-wrapper .field.active .flag-mine > img {
width: 65%;
margin-left: 15px;
margin-bottom: 5px;
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
-webkit-animation: mineFlagLoad 500ms cubic-bezier(.36, .07, .19, .97) both;
animation: mineFlagLoad 500ms cubic-bezier(.36, .07, .19, .97) both;
}
@keyframes mineFlagLoad {
0% {
margin-bottom: 0;
margin-left: 15px;
-ms-transform: rotate(9deg); /* IE 9 */
-webkit-transform: rotate(9deg); /* Chrome, Safari, Opera */
transform: rotate(9deg);
}
50% {
margin-bottom: -5px;
margin-left: 7px;
}
100% {
margin-bottom: 3px;
margin-left: 0;
-ms-transform: rotate(-9deg); /* IE 9 */
-webkit-transform: rotate(-9deg); /* Chrome, Safari, Opera */
transform: rotate(-9deg);
}
}
#mine-wrapper .grid .field-wrapper .field.active .flag-mine .flag-mine-base {
position: absolute;
background: #000000;
width: 25px;
height: 22px;
bottom: -12px;
left: 50%;
margin-left: -10.5px;
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-animation: mineBaseLoad 500ms cubic-bezier(.36, .07, .19, .97) both;
animation: mineBaseLoad 500ms cubic-bezier(.36, .07, .19, .97) both;
}
@keyframes mineBaseLoad {
0% {
margin-bottom: 0;
}
50% {
margin-bottom: -5px;
}
100% {
margin-bottom: 0;
}
}
/*#mine-wrapper .grid .field-wrapper .field.active .field-corner {*/
/*-webkit-transform: scale(1);*/
/*transform: scale(1);*/
/*}*/
#mine-wrapper .grid .field-wrapper .field.active.mine {
background: #61defa;
background: -moz-linear-gradient(left, #61defa 0%, #119dec 100%);
background: -webkit-linear-gradient(left, #61defa 0%, #119dec 100%);
background: linear-gradient(to right, #61defa 0%, #119dec 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#61defa', endColorstr='#119dec', GradientType=1);
border: 2px solid #51c2fe;
}
#mine-wrapper .grid .field-wrapper .field.active.color-1 {
color: #0000ff;
}
#mine-wrapper .grid .field-wrapper .field.active.color-2 {
color: #079433;
}
#mine-wrapper .grid .field-wrapper .field.active.color-3 {
color: #fd1400;
}
#mine-wrapper .grid .field-wrapper .field.active.color-4 {
color: #0c099e;
}
#mine-wrapper .grid .field-wrapper .field.active.color-5 {
color: #7b4c01;
}
#mine-wrapper .grid .field-wrapper .field.active.color-6 {
color: #008388;
}
#mine-wrapper .grid .field-wrapper .field.active.color-7 {
color: #000000;
}
#mine-wrapper .grid .field-wrapper .field.active.color-8 {
color: #ff0000;
}
#mine-wrapper .grid .field-wrapper .field img {
width: 80%;
}