517 lines
8.8 KiB
CSS
Executable File
517 lines
8.8 KiB
CSS
Executable File
.mg__meta {
|
|
margin-bottom: 10px;
|
|
color: #28aadc;
|
|
}
|
|
|
|
.mg__meta--item {
|
|
display: inline-block;
|
|
}
|
|
|
|
.mg__meta--left {
|
|
float: left;
|
|
}
|
|
|
|
.mg__meta--right {
|
|
float: right;
|
|
}
|
|
|
|
.mg__meta--level {
|
|
margin-right: 20px;
|
|
}
|
|
|
|
/**
|
|
* Game start screen
|
|
*
|
|
* The game start screen shows the "welcome" message and also a list for the
|
|
* user to choose a level. It's appended to the game container at the start,
|
|
* and once the user selects a level, it is removed from the container
|
|
*/
|
|
.mg__start-screen {
|
|
text-align: center;
|
|
padding: 5% 20px;
|
|
}
|
|
|
|
.mg__start-screen--heading {
|
|
margin-bottom: 10px;
|
|
color: #282a2f;
|
|
font-size: 30px;
|
|
}
|
|
|
|
.mg__start-screen--sub-heading {
|
|
font-size: 24px;
|
|
margin-bottom: 10px;
|
|
color: #28aadc;
|
|
}
|
|
.mg__start-screen--sub-heading::before, .mg__start-screen--sub-heading::after {
|
|
margin: 0 5px;
|
|
content: "-";
|
|
}
|
|
|
|
.mg__start-screen--text {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.mg__start-screen--level-select {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: inline;
|
|
margin-top: 0;
|
|
}
|
|
.mg__start-screen--level-select span {
|
|
color: #ff3c50;
|
|
font-size: 18px;
|
|
cursor: pointer;
|
|
}
|
|
.mg__start-screen--level-select span:hover {
|
|
color: #d50016;
|
|
}
|
|
|
|
/**
|
|
* Game wrapper
|
|
*
|
|
* The game wrapper is where the actual game resides. Inside here, all the
|
|
* memory tiles get arranged and ready for game play.
|
|
*/
|
|
.mg__wrapper {
|
|
margin: 0 auto;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
* Game tiles
|
|
*
|
|
* The game tiles are the tiles that are laid down on the memory game board.
|
|
* These tiles are the ones that the user clicks on to flip and reveal some
|
|
* images. The level the user selects determines the position and size of
|
|
* the tiles.
|
|
*/
|
|
.mg__tile {
|
|
position: absolute;
|
|
padding: 5px;
|
|
}
|
|
|
|
/* game__level-1 styles */
|
|
.mg__level-1 .mg__tile {
|
|
width: 25%;
|
|
height: 50%;
|
|
}
|
|
|
|
.mg__level-1 .mg__tile-1 {
|
|
top: 0%;
|
|
left: 0%;
|
|
}
|
|
.mg__level-1 .mg__tile-2 {
|
|
top: 0%;
|
|
left: 25%;
|
|
}
|
|
.mg__level-1 .mg__tile-3 {
|
|
top: 0%;
|
|
left: 50%;
|
|
}
|
|
.mg__level-1 .mg__tile-4 {
|
|
top: 0%;
|
|
left: 75%;
|
|
}
|
|
.mg__level-1 .mg__tile-5 {
|
|
top: 50%;
|
|
left: 0%;
|
|
}
|
|
.mg__level-1 .mg__tile-6 {
|
|
top: 50%;
|
|
left: 25%;
|
|
}
|
|
.mg__level-1 .mg__tile-7 {
|
|
top: 50%;
|
|
left: 50%;
|
|
}
|
|
.mg__level-1 .mg__tile-8 {
|
|
top: 50%;
|
|
left: 75%;
|
|
}
|
|
|
|
/* game__level-2 styles */
|
|
.mg__level-2 .mg__tile {
|
|
width: 16.66667%;
|
|
height: 33.33333%;
|
|
/*height: 170px;*/
|
|
|
|
}
|
|
|
|
.mg__level-2 .mg__tile-1 {
|
|
top: 0%;
|
|
left: 23%;
|
|
}
|
|
.mg__level-2 .mg__tile-2 {
|
|
top: 0%;
|
|
left: 39.66667%;
|
|
}
|
|
.mg__level-2 .mg__tile-3 {
|
|
top: 0%;
|
|
left: 56.33333%;
|
|
}
|
|
/*
|
|
.mg__level-2 .mg__tile-4 {
|
|
top: 0%;
|
|
left: 73%;
|
|
}
|
|
.mg__level-2 .mg__tile-5 {
|
|
top: 0%;
|
|
left: 89.66667%;
|
|
}
|
|
.mg__level-2 .mg__tile-6 {
|
|
top: 0%;
|
|
left: 83.33333%;
|
|
}*/
|
|
.mg__level-2 .mg__tile-7 {
|
|
top: 33.33333%;
|
|
left: 23%;
|
|
}
|
|
.mg__level-2 .mg__tile-8 {
|
|
top: 33.33333%;
|
|
left: 39.66667%;
|
|
}
|
|
.mg__level-2 .mg__tile-9 {
|
|
top: 33.33333%;
|
|
left: 56.33333%;
|
|
}
|
|
/*
|
|
.mg__level-2 .mg__tile-10 {
|
|
top: 33.33333%;
|
|
left: 73%;
|
|
}
|
|
.mg__level-2 .mg__tile-11 {
|
|
top: 33.33333%;
|
|
left: 66.66667%;
|
|
}
|
|
.mg__level-2 .mg__tile-12 {
|
|
top: 33.33333%;
|
|
left: 83.33333%;
|
|
}
|
|
.mg__level-2 .mg__tile-13 {
|
|
top: 66.66667%;
|
|
left: 0%;
|
|
}
|
|
.mg__level-2 .mg__tile-14 {
|
|
top: 66.66667%;
|
|
left: 16.66667%;
|
|
}
|
|
.mg__level-2 .mg__tile-15 {
|
|
top: 66.66667%;
|
|
left: 33.33333%;
|
|
}
|
|
.mg__level-2 .mg__tile-16 {
|
|
top: 66.66667%;
|
|
left: 50%;
|
|
}
|
|
.mg__level-2 .mg__tile-17 {
|
|
top: 66.66667%;
|
|
left: 66.66667%;
|
|
}
|
|
.mg__level-2 .mg__tile-18 {
|
|
top: 66.66667%;
|
|
left: 83.33333%;
|
|
}
|
|
*/
|
|
/* game__level-3 styles */
|
|
.mg__level-3 .mg__tile {
|
|
width: 12.5%;
|
|
height: 25%;
|
|
}
|
|
|
|
.mg__level-3 .mg__tile-1 {
|
|
top: 0%;
|
|
left: 23%;
|
|
}
|
|
.mg__level-3 .mg__tile-2 {
|
|
top: 0%;
|
|
left: 35.5%;
|
|
}
|
|
.mg__level-3 .mg__tile-3 {
|
|
top: 0%;
|
|
left: 48%;
|
|
}
|
|
.mg__level-3 .mg__tile-4 {
|
|
top: 0%;
|
|
left: 60.5%;
|
|
}
|
|
/*
|
|
.mg__level-3 .mg__tile-5 {
|
|
top: 0%;
|
|
left: 50%;
|
|
}
|
|
.mg__level-3 .mg__tile-6 {
|
|
top: 0%;
|
|
left: 62.5%;
|
|
}
|
|
.mg__level-3 .mg__tile-7 {
|
|
top: 0%;
|
|
left: 75%;
|
|
}
|
|
.mg__level-3 .mg__tile-8 {
|
|
top: 0%;
|
|
left: 87.5%;
|
|
}*/
|
|
.mg__level-3 .mg__tile-9 {
|
|
top: 25%;
|
|
left: 23%;
|
|
}
|
|
.mg__level-3 .mg__tile-10 {
|
|
top: 25%;
|
|
left: 35.5%;
|
|
}
|
|
.mg__level-3 .mg__tile-11 {
|
|
top: 25%;
|
|
left: 48%;
|
|
}
|
|
.mg__level-3 .mg__tile-12 {
|
|
top: 25%;
|
|
left: 60.5%;
|
|
}
|
|
.mg__level-3 .mg__tile-13 {
|
|
top: 25%;
|
|
left: 73%;
|
|
}
|
|
.mg__level-3 .mg__tile-14 {
|
|
top: 25%;
|
|
left: 62.5%;
|
|
}
|
|
.mg__level-3 .mg__tile-15 {
|
|
top: 25%;
|
|
left: 75%;
|
|
}
|
|
.mg__level-3 .mg__tile-16 {
|
|
top: 25%;
|
|
left: 87.5%;
|
|
}
|
|
.mg__level-3 .mg__tile-17 {
|
|
top: 50%;
|
|
left: 0%;
|
|
}
|
|
.mg__level-3 .mg__tile-18 {
|
|
top: 50%;
|
|
left: 12.5%;
|
|
}
|
|
.mg__level-3 .mg__tile-19 {
|
|
top: 50%;
|
|
left: 25%;
|
|
}
|
|
.mg__level-3 .mg__tile-20 {
|
|
top: 50%;
|
|
left: 37.5%;
|
|
}
|
|
.mg__level-3 .mg__tile-21 {
|
|
top: 50%;
|
|
left: 50%;
|
|
}
|
|
.mg__level-3 .mg__tile-22 {
|
|
top: 50%;
|
|
left: 62.5%;
|
|
}
|
|
.mg__level-3 .mg__tile-23 {
|
|
top: 50%;
|
|
left: 75%;
|
|
}
|
|
.mg__level-3 .mg__tile-24 {
|
|
top: 50%;
|
|
left: 87.5%;
|
|
}
|
|
.mg__level-3 .mg__tile-25 {
|
|
top: 75%;
|
|
left: 0%;
|
|
}
|
|
.mg__level-3 .mg__tile-26 {
|
|
top: 75%;
|
|
left: 12.5%;
|
|
}
|
|
.mg__level-3 .mg__tile-27 {
|
|
top: 75%;
|
|
left: 25%;
|
|
}
|
|
.mg__level-3 .mg__tile-28 {
|
|
top: 75%;
|
|
left: 37.5%;
|
|
}
|
|
.mg__level-3 .mg__tile-29 {
|
|
top: 75%;
|
|
left: 50%;
|
|
}
|
|
.mg__level-3 .mg__tile-30 {
|
|
top: 75%;
|
|
left: 62.5%;
|
|
}
|
|
.mg__level-3 .mg__tile-31 {
|
|
top: 75%;
|
|
left: 75%;
|
|
}
|
|
.mg__level-3 .mg__tile-32 {
|
|
top: 75%;
|
|
left: 87.5%;
|
|
}
|
|
|
|
/**
|
|
* The tile inside
|
|
*
|
|
* The "tile inner" is the part of the tile that serves as the card. Inside
|
|
* this part, there's an outside and inside part. The outside of the card
|
|
* is the part that has the logo or the pattern or whatever...basically the
|
|
* part that doesn't show the content to be matched. The inside part has the
|
|
* actual images / info to be matched.
|
|
*/
|
|
.mg__tile--inner {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.mg__tile--outside,
|
|
.mg__tile--inside {
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
-webkit-transition: -webkit-transform 0.3s, background 0.3s;
|
|
transition: transform 0.3s, background 0.3s;
|
|
}
|
|
|
|
.mg__tile--outside {
|
|
background-color: #dcdee1;
|
|
box-shadow: 0 0 0 1px #787a80;
|
|
}
|
|
|
|
.mg__tile--inside {
|
|
background-color: #f8fafc;
|
|
box-shadow: 0 0 0 1px #787a80;
|
|
-webkit-transform: rotateY(-180deg);
|
|
transform: rotateY(-180deg);
|
|
}
|
|
|
|
/* some transforms for flipped cards */
|
|
.mg__tile--inner.flipped .mg__tile--outside {
|
|
-webkit-transform: rotateY(-180deg);
|
|
transform: rotateY(-180deg);
|
|
}
|
|
|
|
.mg__tile--inner.flipped .mg__tile--inside {
|
|
-webkit-transform: rotateY(0);
|
|
transform: rotateY(0);
|
|
}
|
|
|
|
/* some transitions for correct guesses - only needs to happen on card inside */
|
|
.mg__tile--inner.flipped.correct .mg__tile--inside {
|
|
background-color: #ffffdc;
|
|
}
|
|
|
|
/**
|
|
* Game message
|
|
*
|
|
* The game message area is an area to display game messages. It's used in the
|
|
* default set up where no callback is set in the JS. If a callback is set up,
|
|
* then this message area likely won't display. Unless you decide to display it
|
|
* in your own custom callback though!
|
|
*/
|
|
.mg__onend {
|
|
padding: 80px 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.mg__onend--heading {
|
|
margin-bottom: 10px;
|
|
color: #28aadc;
|
|
font-size: 30px;
|
|
}
|
|
|
|
.mg__onend--message {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/**
|
|
* Game buttons
|
|
*
|
|
* A simple helper class for game buttons. Edit at your will.
|
|
*/
|
|
.mg__button {
|
|
margin: 0;
|
|
display: inline-block;
|
|
padding: 5px;
|
|
color: #fff;
|
|
font-family: "Roboto Slab", serif;
|
|
font-size: 14px;
|
|
appearance: none;
|
|
background: #ff3c50;
|
|
border: none;
|
|
border-radius: 3px;
|
|
box-shadow: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* =============================================================================
|
|
SOME SOCIAL STYLES
|
|
============================================================================= */
|
|
.fb-like,
|
|
.twitter-share-button {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.fb-like {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
/* =============================================================================
|
|
FUSION ADS
|
|
============================================================================= */
|
|
/**
|
|
* Fusion ads styles
|
|
*
|
|
* These are all the styles for my fusion ads. I'd reccommend deleting them if
|
|
* you are going to use this in your own app, because they are useless and you
|
|
* shouldn't be displaying my ad on your app/site in the first place. Thanks!
|
|
*/
|
|
#fusionads {
|
|
display: inline-block;
|
|
padding: 5px;
|
|
background: white;
|
|
font-size: 11px;
|
|
line-height: 1.2;
|
|
text-align: left;
|
|
}
|
|
|
|
#fusionads .fusion-wrap {
|
|
display: block;
|
|
margin: 0 0 5px 0;
|
|
width: 130px;
|
|
}
|
|
|
|
#fusionads a.fusion-text {
|
|
display: block;
|
|
color: #787a80;
|
|
}
|
|
|
|
#fusionads a.fusion-img {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
width: 130px;
|
|
height: 100px;
|
|
background-color: #fff;
|
|
}
|
|
|
|
#fusionads a.fusion-img img {
|
|
display: block;
|
|
margin: 0 0 10px 0;
|
|
}
|
|
|
|
#fusionads a.fusion-poweredby {
|
|
color: #28aadc;
|
|
}
|