Refactoring, auslagerung der Spielsets, dynamisches CSS
This commit is contained in:
Hilmer, Carsten
@@ -1,15 +1,5 @@
|
||||
/* Empty. Add your own CSS if you like
|
||||
.scroll-content{
|
||||
background: url("../img/background.svg") no-repeat center center fixed;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
background-size: cover;
|
||||
|
||||
}
|
||||
*/
|
||||
|
||||
.scroll-content {
|
||||
/*background: url("../img/Background/background.svg");*/
|
||||
background: url("../img/Background/background.svg");
|
||||
background-size: cover;
|
||||
color: #333;
|
||||
font: 100% Arial, Sans Serif;
|
||||
@@ -19,21 +9,6 @@
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
.scroll-content {
|
||||
background: url("../img/background.svg");
|
||||
-webkit-animation: backgroundScroll 50s linear infinite;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
background-size: cover;
|
||||
animation: backgroundScroll 50s linear infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes backgroundScroll {
|
||||
from {background-position: 0 0;}
|
||||
to {background-position: -2000px 0;}
|
||||
}
|
||||
*/
|
||||
.baumhaus {
|
||||
background: url("../img/Background/treehouse.svg");
|
||||
background-size: cover;
|
||||
@@ -87,19 +62,12 @@ to {background-position: -2000px 0;}
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Tierbilder groessen */
|
||||
.imagesizebig{
|
||||
/* Bild groessen */
|
||||
.suchspielbuttonsizebig{
|
||||
width:128px;
|
||||
height:128px;
|
||||
}
|
||||
|
||||
.imagesizemedium{
|
||||
width:96px;
|
||||
height:96px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.gras {
|
||||
background: url("../img/Background/Grasbuechel.svg");
|
||||
background-size: cover;
|
||||
@@ -109,133 +77,6 @@ to {background-position: -2000px 0;}
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.statusbar{
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.myborder{
|
||||
display: inline-block;
|
||||
border-radius: 6px;
|
||||
color: black;
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.neon {
|
||||
font-family: sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-size: 60px;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
letter-spacing: .1em;
|
||||
color: white;
|
||||
text-shadow: 0 0 5px white,
|
||||
0 0 10px white,
|
||||
0 0 20px yellow,
|
||||
0 0 40px yellow,
|
||||
0 0 60px yellow,
|
||||
0 0 90px yellow,
|
||||
0 0 120px yellow,
|
||||
0 0 160px yellow;
|
||||
}
|
||||
|
||||
|
||||
.spieltimer {
|
||||
font-family: sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
letter-spacing: .1em;
|
||||
color: white;
|
||||
text-shadow: 0 0 5px white,
|
||||
0 0 10px white,
|
||||
0 0 20px yellow,
|
||||
0 0 40px yellow,
|
||||
0 0 60px yellow,
|
||||
0 0 90px yellow,
|
||||
0 0 120px yellow,
|
||||
0 0 160px yellow;
|
||||
}
|
||||
|
||||
|
||||
.spieltimerdiv {
|
||||
position: absolute;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.punktestand {
|
||||
position: absolute;
|
||||
bottom:-15px;
|
||||
right:0px;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-family: sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
letter-spacing: .1em;
|
||||
color:white;
|
||||
text-align: right;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.redborder{
|
||||
display: inline-block;
|
||||
border-radius: 6px;
|
||||
color: black;
|
||||
border-style: solid;
|
||||
border-color: red;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
|
||||
.mentorhilfe {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
overflow: hidden;
|
||||
background: url('../img/Mentor/mentorhelp_64px.png');
|
||||
}
|
||||
|
||||
.mentorborder {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
overflow: hidden;
|
||||
background: url('../img/Mentor/mentorhelp_64px.png');
|
||||
}
|
||||
|
||||
.mentor {
|
||||
width: 64px;
|
||||
height: 640px;
|
||||
background: url('../img/Mentor/mentor_64px.png') left center;
|
||||
-webkit-animation: mentorsprite 4s steps(10) infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes mentorsprite {
|
||||
100% { background-position: 0 -640px; }
|
||||
}
|
||||
|
||||
|
||||
.baumhausaction {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
@@ -266,29 +107,6 @@ to {background-position: -2000px 0;}
|
||||
}
|
||||
|
||||
|
||||
.mentorborderbravo {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
margin-left: -128px;
|
||||
margin-top: -128px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mentorbravo {
|
||||
width: 256px;
|
||||
height: 1024px;
|
||||
background: url('../img/Mentor/mentor_bravo.png') left center;
|
||||
-webkit-animation: mentorspritebravo 2.8s steps(4) infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes mentorspritebravo {
|
||||
100% { background-position: 0 -1024px; }
|
||||
}
|
||||
|
||||
|
||||
#background-wrap {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
@@ -359,29 +177,6 @@ to {background-position: -2000px 0;}
|
||||
transform: scale(0.5);
|
||||
}
|
||||
|
||||
/*
|
||||
.x4 {
|
||||
-webkit-animation: animateCloud 18s linear infinite;
|
||||
-moz-animation: animateCloud 18s linear infinite;
|
||||
animation: animateCloud 18s linear infinite;
|
||||
|
||||
-webkit-transform: scale(0.4);
|
||||
-moz-transform: scale(0.4);
|
||||
transform: scale(0.4);
|
||||
}
|
||||
|
||||
.x5 {
|
||||
-webkit-animation: animateCloud 25s linear infinite;
|
||||
-moz-animation: animateCloud 25s linear infinite;
|
||||
animation: animateCloud 25s linear infinite;
|
||||
|
||||
-webkit-transform: scale(0.55);
|
||||
-moz-transform: scale(0.55);
|
||||
transform: scale(0.55);
|
||||
}
|
||||
*/
|
||||
/* OBJECTS */
|
||||
|
||||
.ufo {
|
||||
background: url('../img/ufo.png');
|
||||
position: relative;
|
||||
|
||||
Reference in New Issue
Block a user