chg: usr: improve the gfx on homepage - implement login/register and activation for authentication - and add the first version of profile page #4
This commit is contained in:
24
assets/css/mineseeker/_back-button.scss
Normal file
24
assets/css/mineseeker/_back-button.scss
Normal file
@@ -0,0 +1,24 @@
|
||||
.back-from-game {
|
||||
display: inline-block;
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
|
||||
-ms-transform: scale(1);
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
-webkit-transition: all 250ms cubic-bezier(.17, .67, .83, .67);
|
||||
transition: all 250ms cubic-bezier(.17, .67, .83, .67);
|
||||
}
|
||||
|
||||
.back-from-game img {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.back-from-game:hover {
|
||||
-ms-transform: scale(1.2);
|
||||
-webkit-transform: scale(1.2);
|
||||
transform: scale(1.2);
|
||||
-webkit-transition: all 250ms cubic-bezier(.17, .67, .83, .67);
|
||||
transition: all 250ms cubic-bezier(.17, .67, .83, .67);
|
||||
}
|
||||
57
assets/css/mineseeker/_base.scss
Normal file
57
assets/css/mineseeker/_base.scss
Normal file
@@ -0,0 +1,57 @@
|
||||
html {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mine-container {
|
||||
background: url("/images/bg-mineseeker-0-outbg.jpg") no-repeat;
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear: both
|
||||
}
|
||||
|
||||
#mine-wrapper,
|
||||
#mine-wrapper * {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#mine-wrapper {
|
||||
display: table;
|
||||
width: 842px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper {
|
||||
background: #000;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
padding: 10px;
|
||||
|
||||
-webkit-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
225
assets/css/mineseeker/_bomb.scss
Normal file
225
assets/css/mineseeker/_bomb.scss
Normal file
@@ -0,0 +1,225 @@
|
||||
#mine-wrapper .game-wrapper .users .user-container .user-control {
|
||||
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;
|
||||
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .user-container .user-control > img {
|
||||
position: absolute;
|
||||
width: 55px;
|
||||
left: -5px;
|
||||
bottom: 10px;
|
||||
|
||||
-ms-transform: rotate(-15deg);
|
||||
-webkit-transform: rotate(-15deg);
|
||||
transform: rotate(-15deg);
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .user-container .user-control .user-control-mines {
|
||||
display: inline-block;
|
||||
background: #FFFFFF;
|
||||
font-size: 25px;
|
||||
text-align: center;
|
||||
width: 45px;
|
||||
height: 35px;
|
||||
margin-left: 25px;
|
||||
margin-top: 5px;
|
||||
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .user-container.user-blue .user-control .user-control-mines {
|
||||
color: #1a3955;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .user-container.user-red .user-control .user-control-mines {
|
||||
color: #b10000;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .user-container .user-control .bomb-container {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
width: 65px;
|
||||
height: 45px;
|
||||
border: 1px solid #000;
|
||||
|
||||
-webkit-border-radius: 7px;
|
||||
border-radius: 7px;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .user-container .user-control .bomb-container.buzz:hover {
|
||||
-webkit-animation-name: hvr-buzz-out;
|
||||
animation-name: hvr-buzz-out;
|
||||
-webkit-animation-duration: 0.75s;
|
||||
animation-duration: 0.75s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: 1;
|
||||
animation-iteration-count: 1;
|
||||
}
|
||||
|
||||
@-webkit-keyframes hvr-buzz-out {
|
||||
10% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); }
|
||||
20% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); }
|
||||
30% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); }
|
||||
40% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); }
|
||||
50% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); }
|
||||
60% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); }
|
||||
70% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); }
|
||||
80% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); }
|
||||
90% { -webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0); }
|
||||
100% { -webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0); }
|
||||
}
|
||||
|
||||
@keyframes hvr-buzz-out {
|
||||
10% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); }
|
||||
20% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); }
|
||||
30% { -webkit-transform: translateX(3px) rotate(2deg); transform: translateX(3px) rotate(2deg); }
|
||||
40% { -webkit-transform: translateX(-3px) rotate(-2deg); transform: translateX(-3px) rotate(-2deg); }
|
||||
50% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); }
|
||||
60% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); }
|
||||
70% { -webkit-transform: translateX(2px) rotate(1deg); transform: translateX(2px) rotate(1deg); }
|
||||
80% { -webkit-transform: translateX(-2px) rotate(-1deg); transform: translateX(-2px) rotate(-1deg); }
|
||||
90% { -webkit-transform: translateX(1px) rotate(0); transform: translateX(1px) rotate(0); }
|
||||
100% { -webkit-transform: translateX(-1px) rotate(0); transform: translateX(-1px) rotate(0); }
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .user-container .user-control .bomb-container .bomb {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .user-container .user-control .bomb-container .bomb img {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .user-container .user-control .bomb-container:hover .bomb img {
|
||||
-webkit-animation-name: hvr-buzz;
|
||||
animation-name: hvr-buzz;
|
||||
-webkit-animation-duration: 0.15s;
|
||||
animation-duration: 0.15s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .user-container .user-control .bomb-container .bomb {
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .user-container.user-blue .user-control .bomb-container .bomb {
|
||||
background: rgb(131, 194, 245);
|
||||
background: -moz-linear-gradient(top, rgba(131, 194, 245, 1) 0%, rgba(108, 190, 230, 1) 39%, rgba(221, 255, 252, 1) 100%);
|
||||
background: -webkit-linear-gradient(top, rgba(131, 194, 245, 1) 0%, rgba(108, 190, 230, 1) 39%, rgba(221, 255, 252, 1) 100%);
|
||||
background: linear-gradient(to bottom, rgba(131, 194, 245, 1) 0%, rgba(108, 190, 230, 1) 39%, rgba(221, 255, 252, 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#83c2f5', endColorstr='#ddfffc', GradientType=0);
|
||||
border: 3px solid #0b538e;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .user-container.user-red .user-control .bomb-container .bomb {
|
||||
background: rgb(255, 175, 159);
|
||||
background: -moz-linear-gradient(top, rgba(255, 175, 159, 1) 0%, rgba(231, 113, 7, 1) 54%, rgba(231, 113, 7, 1) 54%, rgba(237, 172, 16, 1) 100%);
|
||||
background: -webkit-linear-gradient(top, rgba(255, 175, 159, 1) 0%, rgba(231, 113, 7, 1) 54%, rgba(231, 113, 7, 1) 54%, rgba(237, 172, 16, 1) 100%);
|
||||
background: linear-gradient(to bottom, rgba(255, 175, 159, 1) 0%, rgba(231, 113, 7, 1) 54%, rgba(231, 113, 7, 1) 54%, rgba(237, 172, 16, 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffaf9f', endColorstr='#edac10', GradientType=0);
|
||||
border: 3px solid #c9221c;
|
||||
}
|
||||
|
||||
// Resign button
|
||||
|
||||
#mine-wrapper .game-wrapper .users .resign {
|
||||
background: rgba(70, 73, 66, 1);
|
||||
background: -moz-linear-gradient(top, rgba(70, 73, 66, 1) 0%, rgba(140, 138, 139, 1) 69%, rgba(96, 89, 97, 1) 100%);
|
||||
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(70, 73, 66, 1)), color-stop(69%, rgba(140, 138, 139, 1)), color-stop(100%, rgba(96, 89, 97, 1)));
|
||||
background: -webkit-linear-gradient(top, rgba(70, 73, 66, 1) 0%, rgba(140, 138, 139, 1) 69%, rgba(96, 89, 97, 1) 100%);
|
||||
background: -o-linear-gradient(top, rgba(70, 73, 66, 1) 0%, rgba(140, 138, 139, 1) 69%, rgba(96, 89, 97, 1) 100%);
|
||||
background: -ms-linear-gradient(top, rgba(70, 73, 66, 1) 0%, rgba(140, 138, 139, 1) 69%, rgba(96, 89, 97, 1) 100%);
|
||||
background: linear-gradient(to bottom, rgba(70, 73, 66, 1) 0%, rgba(140, 138, 139, 1) 69%, rgba(96, 89, 97, 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#464942', endColorstr='#605961', GradientType=0);
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 95%;
|
||||
height: 50px;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 22px;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
border: 3px solid #484742;
|
||||
color: #fff;
|
||||
margin: 10px auto 0 auto;
|
||||
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
-webkit-transition: all 250ms ease-in-out;
|
||||
-moz-transition: all 250ms ease-in-out;
|
||||
-o-transition: all 250ms ease-in-out;
|
||||
transition: all 250ms ease-in-out;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .resign:hover {
|
||||
background: rgba(70, 73, 66, 1);
|
||||
color: #FFFFFF;
|
||||
transition: all 250ms ease-in-out;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .resign.disabled {
|
||||
background: rgba(70, 73, 66, 1);
|
||||
color: #848484;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .resign.disabled:hover {
|
||||
background: rgba(70, 73, 66, 1);
|
||||
color: #848484;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .resign .resign-shine {
|
||||
background: rgba(255, 255, 255, 1);
|
||||
background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%);
|
||||
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(0, 0, 0, 0)));
|
||||
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%);
|
||||
background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%);
|
||||
background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%);
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000', GradientType=0);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 33%;
|
||||
|
||||
opacity: 0.7;
|
||||
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
transition: all 250ms ease-in-out;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .resign:hover .resign-shine,
|
||||
#mine-wrapper .game-wrapper .users .resign.disabled .resign-shine {
|
||||
display: none;
|
||||
transition: all 250ms ease-in-out;
|
||||
}
|
||||
209
assets/css/mineseeker/_grid.scss
Normal file
209
assets/css/mineseeker/_grid.scss
Normal file
@@ -0,0 +1,209 @@
|
||||
#mine-wrapper .grid {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 643px;
|
||||
border: 1px solid #cac3e5;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
#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-bomb-target {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#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: 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-wrapper .field .field-corner {
|
||||
background: url('/images/bg-corner-outbg.png') no-repeat top left;
|
||||
background-size: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#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: 75%;
|
||||
margin-left: 15px;
|
||||
|
||||
-ms-transform: rotate(7deg);
|
||||
-webkit-transform: rotate(7deg);
|
||||
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);
|
||||
-webkit-transform: rotate(9deg);
|
||||
transform: rotate(9deg);
|
||||
}
|
||||
50% {
|
||||
margin-bottom: -5px;
|
||||
margin-left: 7px;
|
||||
}
|
||||
100% {
|
||||
margin-bottom: 3px;
|
||||
margin-left: 0;
|
||||
-ms-transform: rotate(-9deg);
|
||||
-webkit-transform: rotate(-9deg);
|
||||
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.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%;
|
||||
}
|
||||
90
assets/css/mineseeker/_mine-counter.scss
Normal file
90
assets/css/mineseeker/_mine-counter.scss
Normal file
@@ -0,0 +1,90 @@
|
||||
#mine-wrapper .game-wrapper .users .active-mines-container {
|
||||
background: -moz-radial-gradient(center, ellipse cover, rgba(255, 252, 252, 1) 0%, rgba(255, 252, 252, 0.99) 1%, rgba(106, 106, 106, 0.39) 61%, rgba(106, 106, 106, 0) 100%);
|
||||
background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 252, 252, 1) 0%, rgba(255, 252, 252, 0.99) 1%, rgba(106, 106, 106, 0.39) 61%, rgba(106, 106, 106, 0) 100%);
|
||||
background: radial-gradient(ellipse at center, rgba(255, 252, 252, 1) 0%, rgba(255, 252, 252, 0.99) 1%, rgba(106, 106, 106, 0.39) 61%, rgba(106, 106, 106, 0) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcfc', endColorstr='#006a6a6a', GradientType=1);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: 72% 179%;
|
||||
position: relative;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .active-mines-container i {
|
||||
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: 20px;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .active-mines-container i:last-child {
|
||||
float: right;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .active-mines-container .active-mines {
|
||||
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;
|
||||
height: 50px;
|
||||
top: -7.5px;
|
||||
left: 50%;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 25px;
|
||||
line-height: 39px;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
border: 5px solid #000000;
|
||||
margin-left: -25px;
|
||||
|
||||
z-index: 100;
|
||||
|
||||
-webkit-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .active-mines-container .active-mines.found-mine {
|
||||
-webkit-animation: bubbleLeftMine 750ms cubic-bezier(.36, .07, .19, .97) both;
|
||||
animation: bubbleLeftMine 750ms cubic-bezier(.36, .07, .19, .97) both;
|
||||
}
|
||||
|
||||
@keyframes bubbleLeftMine {
|
||||
0% { -webkit-transform: scale(1); transform: scale(1); }
|
||||
50% { border-color: #2e3337; -webkit-transform: scale(2); transform: scale(2); }
|
||||
100% { -webkit-transform: scale(1); transform: scale(1); }
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .active-mines-container .active-mines .active-mines-shine {
|
||||
background: -moz-linear-gradient(top, rgba(213, 214, 216, 1) 0%, rgba(106, 106, 106, 1) 100%);
|
||||
background: -webkit-linear-gradient(top, rgba(213, 214, 216, 1) 0%, rgba(106, 106, 106, 1) 100%);
|
||||
background: linear-gradient(to bottom, rgba(213, 214, 216, 1) 0%, rgba(106, 106, 106, 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d5d6d8', endColorstr='#6a6a6a', GradientType=0);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 30px;
|
||||
height: 20px;
|
||||
margin-left: -14.5px;
|
||||
|
||||
z-index: 101;
|
||||
|
||||
-webkit-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .active-mines-container .active-mines .active-mines-nbr {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
|
||||
z-index: 102;
|
||||
}
|
||||
137
assets/css/mineseeker/_overlay.scss
Normal file
137
assets/css/mineseeker/_overlay.scss
Normal file
@@ -0,0 +1,137 @@
|
||||
#mine-wrapper .game-wrapper .game-overlay {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
z-index: 200;
|
||||
|
||||
-webkit-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .game-overlay.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .game-overlay .game-overlay-window {
|
||||
background: rgba(204, 204, 204, 0.8);
|
||||
border: 5px solid rgba(255, 255, 255, 0.5);
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
text-align: center;
|
||||
color: #354d6a;
|
||||
width: 660px;
|
||||
padding: 10px;
|
||||
|
||||
-webkit-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .game-overlay .game-overlay-window h1 {
|
||||
font-weight: bold;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .game-overlay .game-overlay-window h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .game-overlay .game-overlay-window h3 {
|
||||
font-size: 16px;
|
||||
color: #386e8c;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .game-overlay .game-overlay-window .share-invite {
|
||||
padding: 0 4px 4px;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .game-overlay .game-overlay-window .share-invite-label {
|
||||
font-size: 13px;
|
||||
color: #386e8c;
|
||||
margin: 0 0 8px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .game-overlay .game-overlay-window .share-url-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #d0e8f5;
|
||||
border: 1px solid #7ab8d8;
|
||||
border-radius: 6px;
|
||||
padding: 0 12px;
|
||||
margin-bottom: 12px;
|
||||
cursor: text;
|
||||
transition: border-color 200ms ease;
|
||||
|
||||
&:hover {
|
||||
border-color: #236f87;
|
||||
}
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .game-overlay .game-overlay-window .share-url-icon {
|
||||
color: #236f87;
|
||||
font-size: 13px;
|
||||
flex-shrink: 0;
|
||||
margin-right: 8px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .game-overlay .game-overlay-window .share-url-input {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
height: 40px;
|
||||
color: #1a4a6a;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.3px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: text;
|
||||
min-width: 0;
|
||||
|
||||
&::selection {
|
||||
background: rgba(35, 111, 135, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .game-overlay .game-overlay-window .share-copy-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
background: linear-gradient(to bottom, #236f87 0%, #1a5068 100%);
|
||||
border: 1px solid #2e7a9a;
|
||||
color: #e0f4ff;
|
||||
font-family: 'Rajdhani', sans-serif;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.5px;
|
||||
padding: 9px 32px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: all 220ms ease;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(to bottom, #2d8aa8 0%, #236f87 100%);
|
||||
border-color: #5ba4d4;
|
||||
color: #fff;
|
||||
box-shadow: 0 0 10px rgba(35, 111, 135, 0.5);
|
||||
}
|
||||
|
||||
&.copied {
|
||||
background: linear-gradient(to bottom, #1a6844 0%, #135233 100%);
|
||||
border-color: #2a9e60;
|
||||
color: #a0f0c0;
|
||||
box-shadow: 0 0 8px rgba(26, 104, 68, 0.5);
|
||||
}
|
||||
}
|
||||
41
assets/css/mineseeker/_responsive.scss
Normal file
41
assets/css/mineseeker/_responsive.scss
Normal file
@@ -0,0 +1,41 @@
|
||||
@media screen and (max-width: 900px) {
|
||||
#mine-wrapper .game-wrapper .users {
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#mine-wrapper {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper {
|
||||
width: 100%;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
#mine-wrapper .grid-container {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#mine-wrapper .grid {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#mine-wrapper .grid .field-wrapper {
|
||||
width: 6.25%;
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
#mine-wrapper .grid .field-wrapper > img.field-target {
|
||||
width: 105%;
|
||||
top: -2.5%;
|
||||
left: -2.5%;
|
||||
}
|
||||
|
||||
#mine-wrapper .grid .field-wrapper .field {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
72
assets/css/mineseeker/_timer.scss
Normal file
72
assets/css/mineseeker/_timer.scss
Normal file
@@ -0,0 +1,72 @@
|
||||
#mine-wrapper .game-timer-container {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-timer {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 115px;
|
||||
border-radius: 8px;
|
||||
padding: 8px 18px;
|
||||
font-family: 'Rajdhani', sans-serif;
|
||||
font-weight: bold;
|
||||
border: 2px solid transparent;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
|
||||
// Red – waiting
|
||||
#mine-wrapper .game-timer.red-timer {
|
||||
background: linear-gradient(to bottom, #4a0603 0%, #6b2515 100%);
|
||||
border-color: #7a1e10;
|
||||
color: rgba(246, 125, 82, 0.55);
|
||||
}
|
||||
|
||||
// Red – active (thinking)
|
||||
#mine-wrapper .game-timer.red-timer.active {
|
||||
background: linear-gradient(to bottom, #ad0a05 0%, #f67d52 100%);
|
||||
border-color: #ff9b6b;
|
||||
color: #fff;
|
||||
box-shadow: 0 0 16px rgba(173, 10, 5, 0.75), 0 0 5px rgba(246, 125, 82, 0.5);
|
||||
}
|
||||
|
||||
// Blue – waiting
|
||||
#mine-wrapper .game-timer.blue-timer {
|
||||
background: linear-gradient(to bottom, #0b2530 0%, #163d55 100%);
|
||||
border-color: #173650;
|
||||
color: rgba(149, 207, 245, 0.55);
|
||||
}
|
||||
|
||||
// Blue – active (thinking)
|
||||
#mine-wrapper .game-timer.blue-timer.active {
|
||||
background: linear-gradient(to bottom, #236f87 0%, #95cff5 100%);
|
||||
border-color: #b8e5ff;
|
||||
color: #fff;
|
||||
box-shadow: 0 0 16px rgba(35, 111, 135, 0.75), 0 0 5px rgba(149, 207, 245, 0.5);
|
||||
}
|
||||
|
||||
#mine-wrapper .game-timer .timer-icon {
|
||||
font-size: 15px;
|
||||
opacity: 0.7;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-timer.active .timer-icon {
|
||||
opacity: 1;
|
||||
animation: timer-icon-pulse 1.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes timer-icon-pulse {
|
||||
0%, 100% { transform: scale(1); opacity: 0.85; }
|
||||
50% { transform: scale(1.2); opacity: 1; }
|
||||
}
|
||||
|
||||
#mine-wrapper .game-timer .timer-display {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 20px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
153
assets/css/mineseeker/_users.scss
Normal file
153
assets/css/mineseeker/_users.scss
Normal file
@@ -0,0 +1,153 @@
|
||||
#mine-wrapper .game-wrapper .users {
|
||||
width: 180px;
|
||||
padding: 0 10px 0 0;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .user-container {
|
||||
background: #FFFFFF;
|
||||
height: 40%;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
|
||||
z-index: 99;
|
||||
|
||||
-webkit-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .user-container.user-blue {
|
||||
background: rgb(35, 111, 135);
|
||||
background: -moz-linear-gradient(top, rgba(35, 111, 135, 1) 0%, rgba(149, 207, 245, 1) 100%);
|
||||
background: -webkit-linear-gradient(top, rgba(35, 111, 135, 1) 0%, rgba(149, 207, 245, 1) 100%);
|
||||
background: linear-gradient(to bottom, rgba(35, 111, 135, 1) 0%, rgba(149, 207, 245, 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#236f87', endColorstr='#95cff5', GradientType=0);
|
||||
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .user-container.user-red {
|
||||
background: rgb(173, 10, 5);
|
||||
background: -moz-linear-gradient(top, rgba(173, 10, 5, 1) 0%, rgba(246, 125, 82, 1) 100%);
|
||||
background: -webkit-linear-gradient(top, rgba(173, 10, 5, 1) 0%, rgba(246, 125, 82, 1) 100%);
|
||||
background: linear-gradient(to bottom, rgba(173, 10, 5, 1) 0%, rgba(246, 125, 82, 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ad0a05', endColorstr='#f67d52', GradientType=0);
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .user-container .user-header {
|
||||
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: bolder 25px 'Changa One', cursive;
|
||||
letter-spacing: 5px;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
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 {
|
||||
color: #236f87;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .user-container.user-red .user-header {
|
||||
color: #AD0A05;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .user-container .user-header > img {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
width: 40%;
|
||||
margin-left: -20%;
|
||||
margin-bottom: -25%;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .user-container .user-header > img.user-cursor {
|
||||
display: block;
|
||||
width: 30%;
|
||||
top: 20px;
|
||||
left: 10px;
|
||||
margin-left: 0;
|
||||
|
||||
-webkit-animation: cursorJumping 1.2s cubic-bezier(.36, .07, .19, .97) infinite;
|
||||
animation: cursorJumping 1.2s cubic-bezier(.36, .07, .19, .97) infinite;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .user-container .user-header > img.user-cursor::after {
|
||||
content: '';
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: #1A6844;
|
||||
animation: animate .5s linear infinite;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
@keyframes cursorJumping {
|
||||
0% { top: 15px; }
|
||||
50% { top: 25px; }
|
||||
100% { top: 15px; }
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .user-container .user-name {
|
||||
min-height: 30px;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
padding: 3px 0;
|
||||
margin: 0 5px;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .user-container.user-blue .user-name {
|
||||
border-top: 1px dashed #0b3776;
|
||||
border-bottom: 1px dashed #0b3776;
|
||||
color: #0b3776;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .user-container.user-red .user-name {
|
||||
color: #fdf612;
|
||||
border-top: 1px dashed #fdf612;
|
||||
border-bottom: 1px dashed #fdf612;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .user-container .user-caret {
|
||||
height: 30px;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .user-container.user-blue .user-caret > i {
|
||||
color: #0b3776;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .user-container.user-red .user-caret > i {
|
||||
color: #fdf612;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .user-container .user-desc {
|
||||
height: 65px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .user-container.user-blue .user-desc {
|
||||
color: #0b3776;
|
||||
}
|
||||
|
||||
#mine-wrapper .game-wrapper .users .user-container.user-red .user-desc {
|
||||
color: #fdf612;
|
||||
}
|
||||
Reference in New Issue
Block a user