admin/n-gon-improved
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

defense HUD

Browse Source 
added defense bar to HUD
new community map commandeer by Desboot

bug fixes
This commit is contained in:
landgreen
2023-03-11 13:47:41 -08:00
parent 36541986ba
commit 9bcf4d3e8c
11 changed files with 1079 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
style.css
View File

@@ -154,12 +154,13 @@ summary {
border: 1px #333 solid;
}
#flex-center{
#flex-center {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
#choose-grid {
position: absolute;
top: 50%;
@@ -178,9 +179,12 @@ summary {
opacity: 0;
transition: opacity 0.25s linear;
overflow: auto;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
}
#choose-grid::-webkit-scrollbar {
display: none;
}
@@ -194,13 +198,14 @@ summary {
.choose-grid-module:hover {
background-color: var(--hover-card-color);
}
.choose-grid-module:hover .card-text {
background-color: var(--hover-card-color);
}
.research-select {
float: right;
margin-right:10px;
margin-right: 10px;
}
.pause-grid {
@@ -217,12 +222,14 @@ summary {
#pause-grid-right {
position: absolute;
top:-2px;
right:-4px;
top: -2px;
right: -4px;
overflow: auto;
max-height: 100vh;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
padding: 1px;
}
@@ -232,13 +239,16 @@ summary {
#pause-grid-left {
position: absolute;
top:-2px;
left:-4px;
top: -2px;
left: -4px;
overflow: auto;
max-height: 100vh;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
}
.pause-console {
padding: 10px;
margin: 5px;
@@ -274,9 +284,12 @@ summary {
/* bottom: 0px; */
z-index: 10;
font-size: 1.3em;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
}
#experiment-grid::-webkit-scrollbar {
display: none;
}
@@ -302,18 +315,18 @@ summary {
background-color: var(--card-color);
}
.experiment-start-box{
.experiment-start-box {
background-color: var(--card-color);
/* font-size: 1em; */
position: sticky;
top:0;
z-index: 10;
align-self: start;
width: 195px;
line-height: 170%;
display: flex;
flex-direction: column;
justify-content: center;
position: sticky;
top: 0;
z-index: 10;
align-self: start;
width: 195px;
line-height: 170%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 2px #333 solid;
border-top: 0px;
@@ -321,22 +334,22 @@ summary {
border-top-left-radius: 0px;
/* border-bottom-left-radius: 0px; */
border-top-right-radius: 0px;
padding:0.2em 0px;
padding: 0.2em 0px;
height: 190px;
box-shadow: 8px 8px 7px rgba(0,0,50,0.15);
box-shadow: 8px 8px 7px rgba(0, 0, 50, 0.15);
}
.card-background {
height:340px;
height: 340px;
background-size: contain;
background-repeat: no-repeat;
display: flex;
justify-content:flex-end;
flex-direction: column;
background-repeat: no-repeat;
display: flex;
justify-content: flex-end;
flex-direction: column;
}
.card-text {
background-color: rgba(255,255,255,1);
background-color: rgba(255, 255, 255, 1);
padding: 0.5em 1em;
border: 1px solid #444;
margin-top: -1px;
@@ -344,6 +357,7 @@ summary {
font-size: 0.92em;
min-height: 88px;
}
.cancel-card {
text-align: center;
font-size: 1.1em;
@@ -356,9 +370,11 @@ summary {
line-height: 160%;
background-color: var(--card-color);
}
.cancel-card:hover {
background-color: var(--hover-card-color);
}
.research-card {
font-size: 1.1em;
font-weight: 100;
@@ -369,6 +385,7 @@ summary {
line-height: 160%;
background-color: var(--card-color);
}
.research-card:hover {
background-color: var(--hover-card-color);
}
@@ -376,36 +393,54 @@ summary {
/* keeps 5 columns at 1440px */
@media (min-width: 1710px) and (max-width: 1950px) {
.experiment-grid-module, .choose-grid-module, .pause-grid-module {
.experiment-grid-module,
.choose-grid-module,
.pause-grid-module {
line-height: 143%;
font-size: 0.68em;
}
#experiment-grid, #choose-grid, .pause-grid{
#experiment-grid,
#choose-grid,
.pause-grid {
grid-template-columns: repeat(auto-fit, 340px);
}
.card-background{
height:290px;
.card-background {
height: 290px;
}
.card-text {
min-height: 75px;
}
}
/* (min-width: 30em) and (max-width: 80em) */
@media (max-width: 1709px) {
.experiment-grid-module, .choose-grid-module, .pause-grid-module {
.experiment-grid-module,
.choose-grid-module,
.pause-grid-module {
line-height: 139%;
font-size: 0.58em;
}
#experiment-grid, #choose-grid, .pause-grid{
#experiment-grid,
#choose-grid,
.pause-grid {
grid-template-columns: repeat(auto-fit, 285px);
}
.card-background{
height:240px;
.card-background {
height: 240px;
}
.card-text {
min-height: 64px;
}
}
/* keeps 4 columns at 1440px */
/* @media (1500px <= width < 1950px) {
.experiment-grid-module, .choose-grid-module, .pause-grid-module {
@@ -441,21 +476,27 @@ summary {
.experiment-grid-module:hover .card-text {
background-color: var(--hover-card-color);
}
.build-tech-selected .card-text{
.build-tech-selected .card-text {
background-color: hsl(253, 100%, 84%);
}
.build-tech-selected.experiment-grid-module:hover .card-text {
background-color: hsl(253, 100%, 81%);
}
.build-gun-selected .card-text{
.build-gun-selected .card-text {
background-color: hsl(218, 100%, 81%);
}
.build-gun-selected.experiment-grid-module:hover .card-text {
background-color: hsl(218, 100%, 76%);
}
.build-field-selected .card-text{
.build-field-selected .card-text {
background-color: hsl(193, 100%, 75%);
}
.build-field-selected.experiment-grid-module:hover .card-text {
background-color: hsl(193, 100%, 68%);
}
@@ -512,6 +553,24 @@ summary {
transition: opacity 1s;
}
#defense {
position: absolute;
top: 9px;
left: 15px;
height: 5px;
width: 0px;
transition: width 0.25s linear;
opacity: 1;
z-index: 2;
pointer-events: none;
background-color: #fff;
border-top: 1px solid #000;
/* border-bottom: 1px solid #000; */
/* border-left: 1px solid #000; */
border-right: 1px solid #000;
display: none;
}
#health-bg {
position: absolute;
top: 15px;
@@ -537,6 +596,7 @@ summary {
z-index: 2;
pointer-events: none;
background-color: #f00;
/* display: none; */
}
.low-health {
@@ -574,7 +634,7 @@ summary {
color: #222;
/* background-color: rgba(255, 255, 255, 0.4); */
background-color: rgba(255, 255, 255, 0.2);
line-height: 120%;
line-height: 120%;
user-select: none;
pointer-events: none;
padding: 0px 5px 0px 5px;
@@ -770,6 +830,7 @@ summary {
padding: 0.5px;
font-weight: 100;
}
.color-cancel {
background-color: var(--card-color);
border: 0.15em #444 solid;
@@ -813,6 +874,7 @@ summary {
display: inline-block;
margin-bottom: -0.3em;
}
.circle-grid-skin {
width: 1.25em;
height: 1.25em;
@@ -822,10 +884,11 @@ summary {
opacity: 0.8;
border: 0.08em solid #222;
position: absolute;
top:-0.05em;
left:0em;
top: -0.05em;
left: 0em;
margin-bottom: -0.3em;
}
.circle-grid-skin-eye {
width: 0.18em;
height: 0.18em;
@@ -838,6 +901,7 @@ summary {
left: 0.9em;
margin-bottom: -0.3em;
}
.junk {
background-color: hsl(254, 44%, 75%);
border-radius: 25%;
@@ -875,6 +939,7 @@ summary {
opacity: 0.85;
margin-bottom: -3px;
}
.heal-circle-energy {
width: 0.95em;
height: 0.95em;
@@ -977,7 +1042,7 @@ summary {
}
.color-coupling {
text-shadow: 0px 0px 1.5px #0cf;
text-shadow: 0px 0px 1.5px #0cf;
letter-spacing: 1px;
font-weight: 100;
}
@@ -1021,20 +1086,24 @@ summary {
border: none;
background-color: var(--card-color);
}
.flipX {
animation: 14s anim-flipX linear infinite;
}
@keyframes anim-flipX {
0% {
transform: rotateX(0.5turn);
transform: rotateX(0.5turn);
}
50% {
transform: rotateX(1turn);
transform: rotateX(1turn);
}
100% {
transform: rotateX(0.5turn);
transform: rotateX(0.5turn);
}
}
}
@keyframes fieldColorCycle {
0% {