MonkeyGG2
679 lines
10 KiB
CSS
679 lines
10 KiB
CSS
/*
|
|
TODO: remove all unused classes (ctrl-f across all files,
|
|
if it's not found, remove)
|
|
*/
|
|
|
|
.message {
|
|
background-color:rgba(255, 255, 255, 0.65);
|
|
padding:15px;
|
|
max-width:400px;
|
|
position:relative;
|
|
font-size:28px;
|
|
font-weight:900;
|
|
}
|
|
.OKButton {
|
|
padding:15px;
|
|
font-size:20px;
|
|
font-weight:900;
|
|
position:relative;
|
|
background-color:rgb(255, 95, 95);
|
|
cursor:pointer;
|
|
}
|
|
.button {
|
|
border:2px solid;
|
|
}
|
|
.upgradeButton {
|
|
border:2px solid;
|
|
border-radius:8px;
|
|
width:90%;
|
|
margin-bottom:3px;
|
|
padding:5px;
|
|
min-width:247px;
|
|
line-height:14px;
|
|
cursor:pointer;
|
|
}
|
|
.buyButton:not(.nohover):hover, .buySpawnRate:hover, .upgradePointBox:hover , .button:not(.nohover):hover {
|
|
background-color:yellow;
|
|
cursor:pointer;
|
|
}
|
|
.buyPlaceAmount {
|
|
width:196px;
|
|
position:relative;
|
|
height:34px;
|
|
}
|
|
.placeBuyCost {
|
|
position:absolute;
|
|
right:5px;
|
|
top:5px;
|
|
}
|
|
.placeBuyLabel {
|
|
position:absolute;
|
|
left:5px;
|
|
top:5px;
|
|
}
|
|
.upgradePoints {
|
|
right:10px;
|
|
top:7px;
|
|
color:teal;
|
|
position:absolute;
|
|
}
|
|
.buyButton {
|
|
width:100%;
|
|
height:45px;
|
|
position:relative;
|
|
}
|
|
.buyName {
|
|
font-size:14px;
|
|
position:absolute;
|
|
left:53px;
|
|
top:22px;
|
|
}
|
|
.icon {
|
|
position:absolute;
|
|
left:8px;
|
|
top:8px;
|
|
width:40px;
|
|
height:40px;
|
|
}
|
|
.costBox {
|
|
position: absolute;
|
|
top: 6px;
|
|
right: 6px;
|
|
}
|
|
.goldIcon {
|
|
height: 18px;
|
|
width: 11px;
|
|
background-color: rgb(173, 161, 42);
|
|
border-radius: 50%;
|
|
|
|
}
|
|
.upgradePointBox {
|
|
width:100%;
|
|
height:50px;
|
|
position:relative;
|
|
}
|
|
.buyIncreaseAmount {
|
|
right: 6px;
|
|
top: 23px;
|
|
position: absolute;
|
|
color: black;
|
|
}
|
|
.buyVal {
|
|
left: 52px;
|
|
top: 4px;
|
|
position: absolute;
|
|
color: black;
|
|
font-size: 16px;
|
|
}
|
|
.buyCount {
|
|
float:right;
|
|
color:red;
|
|
font-size:20px;
|
|
}
|
|
|
|
.buySpawnRate {
|
|
display:block;
|
|
width:90%;
|
|
height:50px;
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
position:relative;
|
|
background-color:rgb(255, 237, 190);
|
|
border:1px solid;
|
|
border-radius:15px;
|
|
}
|
|
.buttonContainer {
|
|
width:100%;
|
|
display:none;
|
|
}
|
|
.curUnitStatus {
|
|
border:1px solid;
|
|
height:100px;
|
|
width:90%;
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
position:relative;
|
|
}
|
|
|
|
div{
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
.progressNumbers {
|
|
text-align:left;
|
|
margin-right:20px;
|
|
line-height:20px;
|
|
margin-top:10px;
|
|
}
|
|
h3 {
|
|
margin:0;
|
|
display:inline-block;
|
|
font-size:20px;
|
|
}
|
|
h2 {
|
|
margin:0;
|
|
font-size:30px;
|
|
display:inline-block;
|
|
}
|
|
h4 {
|
|
margin:0;
|
|
display:inline-block;
|
|
font-size:18px;
|
|
}
|
|
.f18 {
|
|
font-size:18px;
|
|
}
|
|
.f20 {
|
|
font-size:20px;
|
|
}
|
|
.f24 {
|
|
font-size:24px;
|
|
}
|
|
div {
|
|
display:inline-block;
|
|
}
|
|
.mainTab {
|
|
width:13%;
|
|
text-align:center;
|
|
font-size:20px;
|
|
font-weight:bold;
|
|
height:25px;
|
|
border:2px solid #000;
|
|
border-radius:10px;
|
|
cursor:pointer;
|
|
margin-top:3px;
|
|
}
|
|
.mainTab:hover {
|
|
background-color:rgb(194, 218, 194) !important;
|
|
}
|
|
.tab {
|
|
height:24px;
|
|
border:2px solid #000;
|
|
border-bottom:0px;
|
|
border-top-left-radius:10px;
|
|
border-top-right-radius:10px;
|
|
color: #ff0003;
|
|
font-size:16px;
|
|
font-weight:bold;
|
|
cursor:pointer;
|
|
overflow:hidden;
|
|
text-align:left;
|
|
padding-left:5px;
|
|
width:9%;
|
|
margin-bottom:-4px;
|
|
}
|
|
#buySpace .tab:hover {
|
|
text-align:center;
|
|
width:auto;
|
|
padding-right:5px;
|
|
}
|
|
.number {
|
|
color:black;
|
|
vertical-align: top;
|
|
}
|
|
.buyColumn {
|
|
width:100%;
|
|
vertical-align:top;
|
|
height:431px;
|
|
border:1px solid;
|
|
position:relative
|
|
}
|
|
.flavorText {
|
|
font-style:italic;
|
|
margin-top:10px;
|
|
font-size:11px;
|
|
line-height:10px;
|
|
}
|
|
.optionsBox {
|
|
border:2px solid;
|
|
font-size:20px;
|
|
cursor:pointer;
|
|
margin-bottom:10px;
|
|
padding:2px 15px;
|
|
}
|
|
.tooltipcontainer {
|
|
position:relative;
|
|
}
|
|
.tooltip{
|
|
position:absolute;
|
|
display:none;
|
|
}
|
|
.unitContainer {
|
|
width:40px;
|
|
height:50px;
|
|
position:absolute;
|
|
font-size:12px;
|
|
cursor:pointer;
|
|
}
|
|
.unitContainer:not(.nohover):hover {
|
|
background-color:yellow;
|
|
}
|
|
|
|
.unit {
|
|
width:20px;
|
|
height:20px;
|
|
}
|
|
.unitLeft {
|
|
border-radius:50%;
|
|
width:20px;
|
|
height:20px;
|
|
}
|
|
.unitLine0 {
|
|
top:32px;
|
|
}
|
|
.unitLine1 {
|
|
top:86px;
|
|
}
|
|
.unitLine2 {
|
|
top:139px;
|
|
}
|
|
.unitLine3 {
|
|
top:193px;
|
|
}
|
|
.unitLine4 {
|
|
top:247px;
|
|
}
|
|
.unitLine5 {
|
|
top:301px;
|
|
}
|
|
|
|
.soldier {
|
|
background-color:rgb(86, 56, 38);
|
|
}
|
|
.spear {
|
|
background-color:rgb(120, 137, 57);
|
|
}
|
|
|
|
.weapon {
|
|
width:15px;
|
|
height:20px;
|
|
vertical-align:top;
|
|
}
|
|
.weaponsoldier {
|
|
background-color:gray;
|
|
margin-top:8px;
|
|
height:3px;
|
|
width:100%
|
|
}
|
|
|
|
.weaponspear {
|
|
background-color:brown;
|
|
margin-left:8px;
|
|
height:100%;
|
|
width:2px;
|
|
}
|
|
.healthBarOuter {
|
|
width:100%;
|
|
background-color:blue;
|
|
height:5px;
|
|
position:relative;
|
|
}
|
|
|
|
.healthBarInner {
|
|
width:100%;
|
|
background-color:yellow;
|
|
height:5px;
|
|
position:absolute;
|
|
}
|
|
.count {
|
|
position:absolute;
|
|
top:46px;
|
|
left:13px;
|
|
}
|
|
.exitLine {
|
|
height:400px;
|
|
width:4px;
|
|
background-color:red;
|
|
position:absolute;
|
|
}
|
|
|
|
.mouseOverArea{
|
|
position:absolute;
|
|
height:446px;
|
|
width:300px;
|
|
top:-27px;
|
|
}
|
|
|
|
.arrow {
|
|
position:absolute;
|
|
height:400px;
|
|
width:65px;
|
|
background-color:rgba(128, 128, 128, 0.34);
|
|
display:none;
|
|
}
|
|
.innerArrow {
|
|
margin-top:177px;
|
|
margin-left:22px;
|
|
border-top:30px solid transparent;
|
|
border-bottom:30px solid transparent;
|
|
}
|
|
.spawnManualAmount {
|
|
position:absolute;
|
|
color:purple;
|
|
top:23px;
|
|
left:12px;
|
|
font-size:14px;
|
|
}
|
|
.spawnAutoAmount {
|
|
position:absolute;
|
|
top:28px;
|
|
left:57px;
|
|
font-size:14px;
|
|
|
|
}
|
|
.unitSpawnBox {
|
|
position:relative;
|
|
width:150px;
|
|
}
|
|
.enemyUnitSpawnBox {
|
|
position:absolute;
|
|
width:150px;
|
|
}
|
|
.statusLabel {
|
|
position:absolute;
|
|
font-size:14px;
|
|
}
|
|
.bigNumber {
|
|
color:black;
|
|
font-size:14px;
|
|
}
|
|
.progressBar {
|
|
height:15px;
|
|
margin-top:3px;
|
|
}
|
|
.unitScreen {
|
|
text-align:center;
|
|
width:100%;
|
|
margin-top:10px;
|
|
}
|
|
.displayLeft {
|
|
position:relative;
|
|
float:left;
|
|
margin-left:10px;
|
|
border:1px solid;
|
|
padding:4px;
|
|
width:100px;
|
|
height:20px;
|
|
}
|
|
.displayRight {
|
|
position:relative;
|
|
float:right;
|
|
margin-right:10px;
|
|
border:1px solid;
|
|
padding:4px;
|
|
width:100px;
|
|
height:20px;
|
|
}
|
|
.unitUpgradeContainer {
|
|
width:90%;
|
|
margin-top:20px;
|
|
background-color:rgb(255, 229, 161);
|
|
border:1px solid;
|
|
padding:10px 0px;
|
|
cursor:pointer;
|
|
position:relative;
|
|
text-align:center;
|
|
}
|
|
.unitUpgradeContainer:hover {
|
|
background-color:yellow;
|
|
}
|
|
.unitProgress {
|
|
left:10px;
|
|
top:6px;
|
|
width:120px;
|
|
height:12px;
|
|
background-color:gray;
|
|
padding:4px 0px;
|
|
position:absolute;
|
|
}
|
|
.spawnContainer {
|
|
width:100%;
|
|
position:relative;
|
|
height:40px;
|
|
margin-top:5px;
|
|
}
|
|
.spawnLabel {
|
|
position:relative;
|
|
left:331px;
|
|
top:5px;
|
|
}
|
|
.placeTimer {
|
|
position:absolute;
|
|
top:23px;
|
|
left:9px;
|
|
font-size:14px;
|
|
}
|
|
.placeAmount {
|
|
position:absolute;
|
|
top:0px;
|
|
left:132px;
|
|
font-size:21px;
|
|
color:black;
|
|
}
|
|
.placeProgresInner {
|
|
width:100%;
|
|
position:absolute;
|
|
height:12px;
|
|
background-color:rgb(0, 255, 129);
|
|
}
|
|
.upArrow {
|
|
width: 15px;
|
|
height: 15px;
|
|
left:130px;
|
|
top:-10px;
|
|
border-top: 4px solid #94FFFB;
|
|
border-left: 4px solid rgba(32, 179, 0, 1);
|
|
position:absolute;
|
|
|
|
-webkit-transform: rotate(45deg);
|
|
-moz-transform: rotate(45deg);
|
|
-o-transform: rotate(45deg);
|
|
-ms-transform: rotate(45deg);
|
|
transform: rotate(45deg);
|
|
}
|
|
.clickMe {
|
|
position:relative;
|
|
top:2px;
|
|
left:3px;
|
|
color:blue;
|
|
font-size:20px;
|
|
border:2px solid blue;
|
|
padding:0px 10px;
|
|
}
|
|
.backButton {
|
|
position:absolute;
|
|
top:10px;
|
|
left:10px;
|
|
width:45px;
|
|
height:25px;
|
|
border:3px solid black;
|
|
cursor:pointer;
|
|
}
|
|
.backArrow {
|
|
width: 15px;
|
|
height: 15px;
|
|
left:03px;
|
|
top:2px;
|
|
border-bottom: 4px solid #6B0000;
|
|
border-left: 4px solid rgba(152, 0, 127, 1);
|
|
position:relative;
|
|
|
|
-webkit-transform: rotate(45deg);
|
|
-moz-transform: rotate(45deg);
|
|
-o-transform: rotate(45deg);
|
|
-ms-transform: rotate(45deg);
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
|
|
.ui-slider {
|
|
position: relative;
|
|
text-align: left;
|
|
background-color:rgb(181, 181, 181);
|
|
border-radius:5px;
|
|
height: 15px;
|
|
width:80%;
|
|
}
|
|
.ui-slider .ui-slider-handle {
|
|
position: absolute;
|
|
z-index: 2;
|
|
width: 10px;
|
|
height: 26px;
|
|
background-color:#404040;
|
|
border-radius:5px;
|
|
top:-5px;
|
|
}
|
|
.map {
|
|
position:relative;
|
|
width:50px;
|
|
height:35px;
|
|
padding-top:15px;
|
|
margin-left:151px;
|
|
margin-top:80px;
|
|
background-color:white;
|
|
vertical-align:top;
|
|
text-align:center;
|
|
border-radius:15px;
|
|
cursor:pointer;
|
|
}
|
|
.map:hover {
|
|
background-color:yellow;
|
|
}
|
|
.mapInfo {
|
|
top:20px;
|
|
width:130px;
|
|
left:212px;
|
|
height:180px;
|
|
background-color:#B4B1FF;
|
|
position:absolute;
|
|
border-radius:15px;
|
|
padding-top:10px;
|
|
display:none;
|
|
border:2px solid;
|
|
}
|
|
.mapSpace {
|
|
position:absolute;
|
|
width:50px;
|
|
height:35px;
|
|
padding-top:15px;
|
|
background-color:white;
|
|
vertical-align:top;
|
|
text-align:center;
|
|
border-radius:15px;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.mapInfoField {
|
|
font-size:10px;
|
|
color:rgb(102, 102, 102);
|
|
display:block;
|
|
margin-left:12px;
|
|
}
|
|
.infoNum {
|
|
color:black;
|
|
}
|
|
|
|
.timerReady {
|
|
width: 42px;
|
|
font-size: 10px;
|
|
background-color: yellow;
|
|
margin-top: 8px;
|
|
padding: 3px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.timerContainer {
|
|
position:absolute;
|
|
}
|
|
.timer {
|
|
color:black;
|
|
font-size:12px;
|
|
}
|
|
.spell {
|
|
width: 102px;
|
|
height: 32px;
|
|
margin-top: 5px;
|
|
padding-top: 15px;
|
|
background-color: #181852;
|
|
color: #E2E2E2;
|
|
font-size: 10px;
|
|
vertical-align: top;
|
|
margin-left: 7px;
|
|
margin-right: 4px;
|
|
text-align: center;
|
|
border: 2px solid white;
|
|
cursor:pointer;
|
|
position:relative;
|
|
}
|
|
.hyperVisible
|
|
{
|
|
color: white;
|
|
text-shadow:
|
|
-1px -1px 0 #000,
|
|
1px -1px 0 #000,
|
|
-1px 1px 0 #000,
|
|
1px 1px 0 #000;
|
|
}
|
|
.placeButton {
|
|
width: 200px;
|
|
background-color: #DFFFAC;
|
|
border: 1px solid;
|
|
height: 45px;
|
|
position: relative;
|
|
text-align:left;
|
|
cursor:pointer;
|
|
margin-left:5px;
|
|
margin-right:5px;
|
|
vertical-align:top
|
|
}
|
|
.placeButton:hover {
|
|
background-color:#B5E864;
|
|
}
|
|
.spawnDiv {
|
|
width:100%;
|
|
background-color:#DFFFAC;
|
|
border-bottom:1px solid;
|
|
height:30px;
|
|
position:relative;
|
|
margin-top: -5px;
|
|
}
|
|
.spawnListPic {
|
|
position:absolute;
|
|
top:0px;
|
|
left:35px;
|
|
}
|
|
.listPic {
|
|
position:absolute;
|
|
top:0px;
|
|
left:159px;
|
|
border:2px solid;
|
|
top:2px;
|
|
background-color:#A9FF00;
|
|
cursor:pointer;
|
|
}
|
|
.listPic:hover {
|
|
background-color:#E68B4A;
|
|
}
|
|
.constructionBar {
|
|
width: 100%;
|
|
background-color: rgba(128, 128, 128, 0.82);
|
|
height: 26px;
|
|
top: 2px;
|
|
position: absolute;
|
|
left: 0px;
|
|
display:none;
|
|
}
|
|
.spellCost {
|
|
position:absolute;
|
|
right:5px;
|
|
bottom:5px;
|
|
}
|
|
.hotkeyNum {
|
|
position:absolute;
|
|
left:5px;
|
|
top:5px;
|
|
} |