Files
monkeygg2.github.io/games/planet-life/Stylesheet.css
T
2023-08-25 13:31:04 +05:30

602 lines
14 KiB
CSS

* {
-webkit-touch-callout: none;
-webkit-user-select: none; /* Disable selection/copy in UIWebView */
}
@font-face {
font-family: "Press Start 2p";
src:url("PressStart2P-Regular.ttf");
}
/*iframe {
overflow: scroll;
}
*/
body {
margin: 0px;
/* background-image: url("images/backgrounds/BG_Universe.png");
background-repeat: repeat;
background-attachment: fixed;*/
color: #FFFFFF;
font-family: 'Press Start 2P', cursive;
font-size: 10px;
line-height: 20px;
font-smooth:never;
/* -webkit-font-smoothing: none;*/
-webkit-font-smoothing: antialiased;
}
#backgroundDiv {
z-index: -1;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: url("images/backgrounds/BG_Universe.png");
background-repeat: repeat;
}
.bodyWrapper {
max-width: 400px;
margin-left: auto;
margin-right: auto;
padding-left: 10px;
padding-right: 10px;
/*min-height: 110vh;*/
}
@media screen and (min-width: 9000px) {
.bodyWrapper {
/* max-width: 800px;*/
max-width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 10px;
padding-right: 10px;
}
}
h1 {
font-size: 12px;
color: #ffffff;
}
h2 {
font-size: 12px;
color: #ffffff;
}
button {
border-radius: 10px;
color: #FFFFFF;
/*font-size: 40px;*/
font-family: 'Press Start 2P', cursive;
font-size: 10px;
padding: 10px 15px;
text-decoration: none;
border: none;
}
/*Enabling scrolling in the window*/
/*#gameDiv {
overflow-y: scroll;
height: 600px;
}*/
.blackCover {
position: relative;
display: inline-block;
z-index: 1;
width: 100%;
background: #1c1c1c;
border-radius: 10px;
bottom: 2px;
}
/*#almostBlackground {
z-index: -1;
position: absolute;
display: none;
width: 100%;
height: 100%;
left: 0;
background: #1c1c1c;
}*/
.handlingBlackCover {
z-index: 0;
width: 100%;
/* height: 256px;*/
/* top: -40px;*/
background: #1c1c1c;
border-radius: 10px;
margin-top: -35px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
padding: 20px 0px 10px;
}
#derekDiv {
display: inline-block;
}
.derekArt {
position: absolute;
width: 100%;
right: 128px;
}
.derekImg {
position: absolute;
display: inline-block;
margin-left: auto;
margin-right: auto;
}
#coolMathSplash {
display: none;
position: absolute;
z-index: 100;
width: 100%;
}
#settingsArt {
display: none;
}
#settingsHandling {
display: none;
}
#settingsHeadline {
display: none;
font-size: 20px;
margin-top: 40px;
}
button.settingsButton {
width: 80%;
height: 50px;
background: #424242;
box-shadow: 0 5px #282828;
font-size: 12px;
}
button.settingsButtonYellow {
width: 80%;
height: 50px;
background: #ffb200;
box-shadow: 0 5px #282828;
font-size: 12px;
}
button:disabled {
background-color: #747474;
}
img {
border: none;
}
.halfWidth {
width: 50%;
position: relative;
float: left;
}
.halfWidthRight {
width: 50%;
position: relative;
float: right;
text-align: right;
}
.fullWidth {
position: relative;
z-index: 10;
float: left;
width: 100%;
}
#resIconDiv {
position: fixed;
display: block;
z-index: 20;
width: 100%;
height: 40px;
background-color: #2b2b2b;
float: left;
top: 0px;
border-bottom: 4px solid #1c1c1c;
}
#resIconWrapper {
position: relative;
max-width: 400px;
margin-left: auto;
margin-right: auto;
padding-left: 5px;
}
/*@media screen and (min-width: 600px) {*/
#resIconWrapper {
/*max-width: 800px;*/
position: relative;
max-width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
}
/*}*/
#resIconDiv p {
display: inline-block;
}
.resIcon {
margin: 0px 10px;
}
/*SCROLL*/
/*#resInfoDiv {
position: relative;
background-color: #1c1c1c;
top: 40px;
height: 40px;
width: 100%;
margin-bottom: 20px;
left: 0px;
}*/
/*NO SCROLL*/
#resInfoDiv {
position: absolute;
background-color: #1c1c1c;
top: -460px;
padding-top: 500px;
height: 40px;
width: 100%;
margin-bottom: 20px;
left: 0px;
}
#infoContentHolder {
display: inline-block;
background: #1c1c1c;
margin-right: 20px;
margin-left: 20px;
}
#resInfoDiv p {
float: left;
display: inline-block;
margin-right: 20px;
margin-left: 3px;
}
#woodSec {
color: #d0ba91;
}
#goldSec {
color: #f3b63f;
}
#cocoSec {
color: #8b5937;
}
#ghostCount {
color: #c8ffa0;
}
#resInfoDiv img {
float: left;
display: inline-block;
margin-right: 5px;
margin-top: 11px;
}
.right {
position: absolute;
right: 0px;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
.floatRight {
float: right;
}
#artDiv {
display: block;
text-align: center;
z-index: 11;
}
.textHolder {
margin-top: 0px;
padding: 0px 20px 0px;
}
#handling {
/* margin-top: 0px;
margin: 0px 10px 0px;
padding: 0px 20px 0px;*/
}
#resCounter {
/* margin-top: 0px;
padding: 0px 20px 0px;*/
/*display: none;*/
}
.clear {
position: relative;
clear: both;
}
.buttonImg {
width: 60px;
margin-left: 10px;
}
button.buildButton {
background-color: #ffb200;
box-shadow: 0 5px #d39300;
color: #000000;
}
button.buildButtonActive {
background-color: #ffd000;
transform: translateY(3px);
box-shadow: 0 2px #d39300;
}
button:disabled.buildButton {
background-color: #3d3d3d;
transform: translateY(3px);
box-shadow: 0 0px #d39300;
}
button:disabled.buildButtonActive {
background-color: #3d3d3d;
box-shadow: 0 0px #d39300;
}
.buildButtonText {
display: inline-block;
color: #c6c6c6;
}
.buildButtonImage {
float: left;
width: 100px;
margin-left: 10px;
margin-bottom: 10px;
}
.buildButtonImageFull {
float: left;
width: 95%;
margin-left: 10px;
margin-bottom: 10px;
}
.smallBuildButtonImage {
float: left;
width: 60px;
margin-left: 5px;
margin-bottom: 5px;
/*kev suggestion*/
margin-top: 10px;
/*kev*/
}
.smallBuildButtonText {
margin-top: 25px;
margin-left: 10px;
font-size: 12px;
/*kev suggestion*/
margin-left: 88px;
text-align: left;
line-height: 15px;
/*kev*/
}
.buildButtonHeadline {
margin-left: 10px;
margin-top: 40px;
}
.menuButtonHeadline {
display: block;
text-align: center;
font-size: 20px;
margin-top: 20px;
margin-bottom: 20px;
}
.marked {
color: #2bba00;
}
.dmgText {
font-size: 15px;
}
.settings {
display: none;
position: fixed;
top: 0px;
left: 0px;
z-index: 100;
width: 100%;
height: 100%;
overflow: hidden;
}
#settingsBackground {
position: relative;
background: #000000;
opacity: 0.5;
width: 100%;
height: 100%;
}
#settingsForeground {
position: absolute;
background: #2d2d2d;
z-index: 101;
border-radius: 25px;
width: 80%;
top: 40px;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
left: 8%;
}
.buttonBackground {
position: absolute;
top: 0px;
width: 100%;
height: 100%;
z-index: -1;
background: #424242;
box-shadow: 0 5px #282828;
border-radius: 10px;
}
.buttonBackgroundPressed {
position: absolute;
top: 0px;
width: 100%;
height: 100%;
z-index: -1;
background: #5b5b5b;
box-shadow: 0 1px #303030;
border-radius: 10px;
}
.buildBackground {
position: absolute;
top: 0px;
width: 100%;
height: 100%;
z-index: -1;
background: #2b2b2b;
border-radius: 10px;
}
#dungeonLevel {
margin-top: 25px;
margin-bottom: 0px;
}
#sureSureBut {
display: none;
}
#loading_container {
color: red;
}
.loader {
margin: 100px auto;
font-size: 25px;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
text-indent: -9999em;
-webkit-animation: load5 1.1s infinite ease;
animation: load5 1.1s infinite ease;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.blocking-loader {
font-size: 25px;
width: 1em;
height: 1em;
border-radius: 50%;
top: 50%;
left: 50%;
position: fixed;
text-indent: -9999em;
-webkit-animation: load5 1.1s infinite ease;
animation: load5 1.1s infinite ease;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
@-webkit-keyframes load5 {
0%,
100% {
box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
}
12.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
}
25% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
37.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
50% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
62.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
75% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
87.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
}
}
@keyframes load5 {
0%,
100% {
box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
}
12.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
}
25% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
37.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
50% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
62.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
75% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
87.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
}
}