16834e95be
added images to tech, field, gun cards (enable this in settings) in progress - not all images are generated yet images are generated by me using midJourney plus significant post processing random research power ups are 20% more common per level global difficulty balance: player takes a bit less damage mutualism: 0.5->1 borrowed health for 250->300% more spore damage harpoon can still fire when out of energy, but slower harpoon fire cooldown no longer triggers when the harpoon returns it's just a flat 2/3 of a second after you Fire improved fire rate now allows you to fire many harpoons at once until you run out of energy default harpoon rope is a bit longer several bug fixes and undocumented changes I forgot to list
1278 lines
24 KiB
CSS
1278 lines
24 KiB
CSS
:root {
|
|
--build-bg-color: #aeb6c2;
|
|
}
|
|
|
|
body {
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
/* background-color: #eee; */
|
|
|
|
cursor: auto;
|
|
}
|
|
|
|
canvas {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 0;
|
|
user-select: none;
|
|
}
|
|
|
|
select {
|
|
font-size: 0.8em;
|
|
border: 1px #333 solid;
|
|
border-radius: 6px;
|
|
/* margin-bottom: -20px; */
|
|
/* position: "relative";
|
|
top: "-15px"; */
|
|
}
|
|
|
|
select option {
|
|
background-color: #fff;
|
|
}
|
|
|
|
input {
|
|
/* font-family: Monaco, monospace; */
|
|
padding: 0px 4px;
|
|
font-size: 0.8em;
|
|
border: 1px #333 solid;
|
|
border-radius: 4px;
|
|
/* margin: 0.2em; */
|
|
/* width: 38px; */
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: #08c;
|
|
}
|
|
|
|
em {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
#splash {
|
|
user-select: none;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 2;
|
|
transition: opacity 5s ease-in;
|
|
}
|
|
|
|
*:focus {
|
|
outline: none;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
/* border: 1px solid #eee; */
|
|
width: 360px;
|
|
/* background-color: #ddd; */
|
|
}
|
|
|
|
tr {
|
|
padding: 10px;
|
|
text-align: left;
|
|
}
|
|
|
|
td {
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.key-input-train {
|
|
padding: 0px 5px;
|
|
border: 2px solid #444;
|
|
color: #444;
|
|
border-radius: 4px;
|
|
background-color: #d0d0d0;
|
|
text-align: center;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.key-input {
|
|
padding: 3px 8px;
|
|
border: 2px solid #333;
|
|
/* border-radius: 50px; */
|
|
background-color: #fff;
|
|
text-align: center;
|
|
}
|
|
|
|
.pause-table {
|
|
width: auto;
|
|
}
|
|
|
|
.key-input-pause {
|
|
width: 15px;
|
|
padding: 0px 2px;
|
|
border: 2px solid #333;
|
|
/* border-radius: 50px; */
|
|
background-color: #fff;
|
|
text-align: center;
|
|
}
|
|
|
|
.key-used {
|
|
color: #777;
|
|
font-size: 80%;
|
|
}
|
|
|
|
summary {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.SVG-button {
|
|
border: 1.5px #333 solid;
|
|
border-radius: 8px;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.SVG-button:hover {
|
|
background-color: #eee;
|
|
}
|
|
|
|
#experiment-button {
|
|
position: absolute;
|
|
bottom: 4px;
|
|
right: 4px;
|
|
z-index: 12;
|
|
transition: opacity 5s ease-in;
|
|
}
|
|
|
|
#training-button {
|
|
position: absolute;
|
|
/* bottom: 4px; */
|
|
/* right: 0px;
|
|
left: 0px;
|
|
margin: auto; */
|
|
/* bottom: 58px; */
|
|
top: 4px;
|
|
right: 4px;
|
|
z-index: 12;
|
|
transition: opacity 5s ease-in;
|
|
|
|
}
|
|
|
|
#construct {
|
|
display: none;
|
|
position: absolute;
|
|
bottom: 0%;
|
|
right: 0%;
|
|
z-index: 1;
|
|
width: 250px;
|
|
height: 200px;
|
|
background-color: #fff;
|
|
color: #000;
|
|
font-size: 0.9em;
|
|
white-space: pre;
|
|
padding: 3px;
|
|
border: 1px #333 solid;
|
|
}
|
|
|
|
#choose-background {
|
|
position: absolute;
|
|
z-index: 2;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #ccc;
|
|
/* opacity: 0.6; */
|
|
/* display: none; */
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition: opacity 0.25s linear;
|
|
|
|
}
|
|
#flex-center{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
}
|
|
#choose-grid {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
padding: 10px 1px;
|
|
/* gap: 1px; */
|
|
margin: 0px;
|
|
border: 0px;
|
|
z-index: 12;
|
|
max-height: 99vh;
|
|
font-size: 1.3em;
|
|
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 384px);
|
|
align-items: stretch;
|
|
/* align-content: start; */
|
|
/* grid-auto-rows: minmax(auto, 140px); */
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition: opacity 0.25s linear;
|
|
overflow: auto;
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
scrollbar-width: none; /* Firefox */
|
|
}
|
|
#choose-grid::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.choose-grid-module {
|
|
padding: 5px;
|
|
line-height: 170%;
|
|
/* border-radius: 8px; */
|
|
background-color: #fafcfd;
|
|
font-size: 0.75em;
|
|
/* border: 1px #444 solid; */
|
|
/* box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.25); */
|
|
}
|
|
|
|
.choose-grid-module:hover {
|
|
background-color: #efeff5;
|
|
}
|
|
.choose-grid-module:hover .card-text {
|
|
background-color: #efeff5;
|
|
}
|
|
|
|
.research-select {
|
|
float: right;
|
|
margin-right:10px;
|
|
}
|
|
|
|
.cancel {
|
|
/* text-align: right; */
|
|
position: absolute;
|
|
top: 15px;
|
|
right: 15px;
|
|
color: #fff;
|
|
}
|
|
|
|
.cancel:hover {
|
|
color: #aaa;
|
|
}
|
|
|
|
.pause-grid {
|
|
padding: 2px;
|
|
margin: 0px;
|
|
|
|
display: none;
|
|
grid-template-columns: 384px;
|
|
/* grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); */
|
|
grid-auto-rows: minmax(auto, auto);
|
|
align-content: start;
|
|
/* align-content: space-between; */
|
|
/* gap: 10px; */
|
|
z-index: 2;
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
#pause-grid-right {
|
|
position: absolute;
|
|
top:-2px;
|
|
right:-4px;
|
|
overflow: auto;
|
|
max-height: 100vh;
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
scrollbar-width: none; /* Firefox */
|
|
padding: 1px;
|
|
}
|
|
|
|
#pause-grid-right::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
#pause-grid-left {
|
|
position: absolute;
|
|
top:-2px;
|
|
left:-4px;
|
|
overflow: auto;
|
|
max-height: 100vh;
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
scrollbar-width: none; /* Firefox */
|
|
}
|
|
|
|
#pause-grid-left::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.pause-grid-module {
|
|
/* margin: -1px;
|
|
padding: 10px;
|
|
line-height: 170%;
|
|
border: 1px #333 solid;
|
|
border-radius: 8px;
|
|
background-color: #fff;
|
|
font-size: 0.65em; */
|
|
padding: 5px;
|
|
line-height: 170%;
|
|
/* border-radius: 8px; */
|
|
background-color: #fafcfd;
|
|
font-size: 0.75em;
|
|
/* border: 2px #444 solid; */
|
|
}
|
|
|
|
.pause-eject .card-text {
|
|
animation: techColorCycle 1s linear infinite alternate;
|
|
}
|
|
|
|
#experiment-grid {
|
|
display: flex;
|
|
justify-content: center;
|
|
/* align-content: space-between; */
|
|
/* padding-top: 10px; */
|
|
/* padding: 16px; */
|
|
padding: 10px 1px;
|
|
margin: 0px;
|
|
border: 0px;
|
|
background-color: var(--build-bg-color);
|
|
/* background-color: #444; */
|
|
|
|
display: none;
|
|
/* grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); */
|
|
grid-template-columns: repeat(auto-fit, 384px);
|
|
grid-auto-flow: row;
|
|
grid-auto-rows: minmax(auto, auto);
|
|
/* gap: 1px; */
|
|
|
|
position: relative;
|
|
bottom: 0px;
|
|
z-index: 10;
|
|
font-size: 1.3em;
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
scrollbar-width: none; /* Firefox */
|
|
}
|
|
#experiment-grid::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.experiment-grid-module {
|
|
padding: 5px;
|
|
line-height: 170%;
|
|
/* border-radius: 8px; */
|
|
background-color: #fafcfd;
|
|
font-size: 0.75em;
|
|
/* border: 1px #444 solid; */
|
|
/* margin: -0.5px; */
|
|
}
|
|
|
|
.experiment-grid-hide {
|
|
display: none;
|
|
}
|
|
|
|
.grid-title {
|
|
padding-bottom: 6px;
|
|
font-size: 1.4em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.experiment-grid-module:hover:not(.build-tech-selected, .build-field-selected, .build-gun-selected) {
|
|
background-color: #efeff5;
|
|
}
|
|
|
|
.card-background {
|
|
height:340px;
|
|
width:288;
|
|
background-repeat: no-repeat;
|
|
display: flex;
|
|
justify-content:flex-end;
|
|
flex-direction: column;
|
|
padding:0px;
|
|
}
|
|
|
|
.card-text {
|
|
background-color: rgba(255,255,255,1);
|
|
/* border-radius: 8px; */
|
|
padding: 8px;
|
|
/* border-top: 1px solid var(--build-bg-color); */
|
|
border: 1px solid #444;
|
|
margin-top: -1px;
|
|
margin-right: -1px;
|
|
}
|
|
|
|
/* .no-image-cards{
|
|
border: 1px solid #444;
|
|
} */
|
|
/* .card-text:hover {
|
|
background-color: #efeff5;
|
|
} */
|
|
|
|
|
|
/* .build-field-selected {
|
|
background-color: hsl(193, 100%, 75%);
|
|
}
|
|
|
|
.build-field-selected:hover {
|
|
background-color: hsl(193, 100%, 68%);
|
|
}
|
|
|
|
.build-gun-selected {
|
|
background-color: hsl(218, 100%, 81%);
|
|
}
|
|
|
|
.build-gun-selected:hover {
|
|
background-color: hsl(218, 100%, 76%);
|
|
}
|
|
|
|
.build-tech-selected .card-text{
|
|
background-color: hsl(253, 100%, 84%);
|
|
}
|
|
|
|
.build-tech-selected:hover .card-text{
|
|
background-color: hsl(253, 100%, 81%);
|
|
} */
|
|
|
|
/* .experiment-grid-module:hover .card-text:not(.build-tech-selected, .build-field-selected, .build-gun-selected) {
|
|
background-color: #efeff5;
|
|
} */
|
|
|
|
.experiment-grid-module:hover .card-text {
|
|
background-color: #efeff5;
|
|
}
|
|
.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{
|
|
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{
|
|
background-color: hsl(193, 100%, 75%);
|
|
}
|
|
.build-field-selected.experiment-grid-module:hover .card-text {
|
|
background-color: hsl(193, 100%, 68%);
|
|
}
|
|
|
|
.experiment-grid-disabled {
|
|
/* opacity: 0.5; */
|
|
background-color: var(--build-bg-color);
|
|
/* color: rgba(0, 0, 0, 0.9); */
|
|
color: #000;
|
|
opacity: 0.25;
|
|
/* transition: background-color 1s, color 1s; */
|
|
}
|
|
|
|
.experiment-grid-disabled[data-descr] {
|
|
position: relative;
|
|
/* opacity: 0; */
|
|
}
|
|
|
|
.experiment-grid-disabled[data-descr]:hover::after {
|
|
content: '\a \00a0 \00a0 \00a0 REQUIRES:\a \00a0 \00a0 \00a0 'attr(data-descr);
|
|
white-space: pre-wrap;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: var(--build-bg-color);
|
|
z-index: 1;
|
|
opacity: 1;
|
|
transition: opacity 0.5s ease;
|
|
}
|
|
|
|
#info {
|
|
position: absolute;
|
|
bottom: 3px;
|
|
left: 3px;
|
|
z-index: 12;
|
|
font-size: 1.5em;
|
|
transition: opacity 5s ease-in;
|
|
}
|
|
|
|
.details-div {
|
|
padding: 10px;
|
|
border-radius: 8px;
|
|
border: 2px #333 solid;
|
|
/* background-color: #eee; */
|
|
background-color: #fff;
|
|
}
|
|
|
|
#dmg {
|
|
position: absolute;
|
|
z-index: 2;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: none;
|
|
/* background-color also set in mass-energy tech */
|
|
background-color: #f67;
|
|
opacity: 0;
|
|
transition: opacity 1s;
|
|
}
|
|
|
|
#health-bg {
|
|
position: absolute;
|
|
top: 15px;
|
|
left: 15px;
|
|
height: 20px;
|
|
width: 0px;
|
|
transition: width 1s ease-out;
|
|
background-color: #000;
|
|
opacity: 0.1;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
display: none;
|
|
}
|
|
|
|
#health {
|
|
position: absolute;
|
|
top: 15px;
|
|
left: 15px;
|
|
height: 20px;
|
|
width: 0px;
|
|
transition: width 1s ease-out;
|
|
opacity: 0.6;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
background-color: #f00;
|
|
}
|
|
|
|
.low-health {
|
|
animation: blink 250ms infinite alternate;
|
|
}
|
|
|
|
@keyframes blink {
|
|
from {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
to {
|
|
opacity: 0.2;
|
|
}
|
|
}
|
|
|
|
/* background on title page */
|
|
#fade-out {
|
|
position: absolute;
|
|
z-index: 2;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #e2e9ec;
|
|
opacity: 1;
|
|
transition: opacity 3s;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#guns {
|
|
position: absolute;
|
|
top: 40px;
|
|
left: 15px;
|
|
z-index: 2;
|
|
font-size: 23px;
|
|
color: #222;
|
|
background-color: rgba(255, 255, 255, 0.4);
|
|
line-height: 120%;
|
|
user-select: none;
|
|
pointer-events: none;
|
|
padding: 0px 5px 0px 5px;
|
|
border-radius: 5px;
|
|
/*border: 2px solid rgba(0, 0, 0, 0.4);*/
|
|
}
|
|
|
|
#field {
|
|
position: absolute;
|
|
top: 15px;
|
|
right: 15px;
|
|
z-index: 2;
|
|
font-size: 23px;
|
|
color: #000;
|
|
text-align: right;
|
|
opacity: 0.7;
|
|
/* line-height: 140%; */
|
|
background-color: rgba(190, 210, 245, 0.25);
|
|
user-select: none;
|
|
pointer-events: none;
|
|
padding: 0px 5px 0px 5px;
|
|
border-radius: 5px;
|
|
/*border: 2px solid rgba(0, 0, 0, 0.4);*/
|
|
}
|
|
|
|
#tech {
|
|
position: absolute;
|
|
top: 60px;
|
|
right: 15px;
|
|
z-index: 2;
|
|
font-size: 20px;
|
|
color: #222;
|
|
text-align: right;
|
|
opacity: 0.35;
|
|
line-height: 130%;
|
|
background-color: rgba(255, 255, 255, 0.4);
|
|
user-select: none;
|
|
pointer-events: none;
|
|
padding: 0px 5px 0px 5px;
|
|
border-radius: 5px;
|
|
/*border: 2px solid rgba(0, 0, 0, 0.4);*/
|
|
}
|
|
|
|
#text-log {
|
|
z-index: 2;
|
|
position: absolute;
|
|
bottom: 10px;
|
|
left: 10px;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
line-height: 140%;
|
|
font-size: 1.15em;
|
|
color: #555;
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
transition: opacity 0.25s;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
/* white-space: pre;
|
|
font-family: 'Menlo', 'Monaco', monospace; */
|
|
}
|
|
|
|
/* color for in game console output */
|
|
|
|
.color-text {
|
|
color: #000;
|
|
}
|
|
|
|
.color-var {
|
|
color: hsl(253, 100%, 58%);
|
|
}
|
|
|
|
.color-symbol {
|
|
color: hsl(290, 100%, 40%);
|
|
}
|
|
|
|
.color-gun {
|
|
color: hsl(218, 100%, 58%);
|
|
}
|
|
|
|
.highlight {
|
|
border-radius: 6px;
|
|
background-color: #ff0;
|
|
padding: 3px;
|
|
}
|
|
/* colors for pause, selection and experiment */
|
|
|
|
/* #text-log {
|
|
z-index: 2;
|
|
position: absolute;
|
|
bottom: 4px;
|
|
left: 6px;
|
|
line-height: 130%;
|
|
font-size: 1.2em;
|
|
color: rgb(237, 15, 148);
|
|
transition: opacity 1s;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.color-text {
|
|
color: rgb(0, 164, 164);
|
|
}
|
|
|
|
.color-symbol {
|
|
color: #fff;
|
|
}
|
|
*/
|
|
|
|
|
|
|
|
|
|
.color-f {
|
|
color: #0ad;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.color-s {
|
|
color: #04f;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.color-d {
|
|
color: #f03;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.color-p {
|
|
color: #067;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.color-h {
|
|
color: #0b7;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.color-e {
|
|
color: #d60;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.color-m {
|
|
color: hsl(253, 100%, 50%);
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.color-g {
|
|
color: hsl(218, 80%, 40%);
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.color-ammo {
|
|
color: #356;
|
|
}
|
|
|
|
.color-dup {
|
|
/* color: hsl(243, 100%, 38%); */
|
|
font-variant: small-caps;
|
|
letter-spacing: 1px;
|
|
text-shadow: 1.5px -1.5px hsla(243, 100%, 38%, 0.2);
|
|
/* text-decoration: underline; */
|
|
}
|
|
|
|
/* .mob {
|
|
text-shadow: 0px 1px, 1px 0px, 1px 1px;
|
|
} */
|
|
|
|
/* @keyframes bounce-munch {
|
|
0% {
|
|
vertical-align: -40px;
|
|
}
|
|
50% {
|
|
vertical-align: 4px;
|
|
}
|
|
100% {
|
|
vertical-align: 40px;
|
|
}
|
|
} */
|
|
|
|
|
|
/* .color-bot { */
|
|
/* background-color: #eee; */
|
|
/* color: #555; */
|
|
/* letter-spacing: -1.5px; */
|
|
/* text-transform: uppercase; */
|
|
/* font-variant: all-caps; */
|
|
/* text-decoration: underline solid; */
|
|
/* border: 1px solid #000; */
|
|
/* padding: 10px; */
|
|
/* border-radius: 10%; */
|
|
/* font-family: Lucida Console, Courier, monospace; */
|
|
/* color: #777; */
|
|
/* } */
|
|
|
|
.color-cloaked {
|
|
letter-spacing: 2px;
|
|
animation: cloak 6s linear infinite alternate;
|
|
color: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
@keyframes cloak {
|
|
0% {
|
|
text-shadow: 0px 0px 0px #000;
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
text-shadow: 0px 0px 0px #000;
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
text-shadow: 0px 0px 15px #000;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.color-laser {
|
|
color: #f02;
|
|
/* color: #000bff; */
|
|
/* color: #83f; */
|
|
/* text-shadow: 0px 0px 2px rgba(255, 0, 119, 0.3); */
|
|
/* text-shadow: 0px 0px 1.5px rgba(0, 0, 0, 1), 0px 0px 5px rgba(255, 0, 0, 1); */
|
|
font-weight: 100;
|
|
letter-spacing: -0.8px;
|
|
}
|
|
|
|
.color-plasma {
|
|
color: #c0e;
|
|
letter-spacing: 1px;
|
|
background-color: rgba(132, 0, 255, 0.06);
|
|
padding: 2px;
|
|
border-radius: 9px;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.color-worm {
|
|
color: #fff;
|
|
text-shadow: 1px 0px 2px #234;
|
|
/* letter-spacing: 2px; */
|
|
}
|
|
|
|
.color-defense {
|
|
/* color: */
|
|
/* text-shadow: #FC0 1px 0 10px; */
|
|
background-color: hsla(227, 9%, 71%, 0.279);
|
|
padding: 2px;
|
|
border-radius: 4px;
|
|
letter-spacing: 1px;
|
|
font-weight: 100;
|
|
}
|
|
|
|
.color-block {
|
|
background-color: rgba(0, 0, 0, 0.04);
|
|
border: 1px solid rgba(0, 0, 0, 0.5);
|
|
padding: 0.5px;
|
|
font-weight: 100;
|
|
}
|
|
.color-cancel {
|
|
background-color: #fafcfd;
|
|
border: 2px #444 solid;
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
font-weight: 800;
|
|
line-height: 170%;
|
|
font-size: 1em;
|
|
}
|
|
|
|
.color-j {
|
|
letter-spacing: 1px;
|
|
/* font-weight: 100; */
|
|
font-family: Lucida Console, Courier, monospace;
|
|
/* transform: rotate(-90deg); */
|
|
}
|
|
|
|
/* .color-rewind {
|
|
background-image: linear-gradient(to left, #fff, #bbb);
|
|
border-radius: 5px;
|
|
padding: 2px;
|
|
letter-spacing: 1px;
|
|
} */
|
|
|
|
.color-r {
|
|
color: #f7b;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.color-flop {
|
|
text-decoration: underline;
|
|
font-weight: 100;
|
|
letter-spacing: -1px;
|
|
}
|
|
|
|
.color-alt {
|
|
text-decoration: underline;
|
|
font-weight: 100;
|
|
letter-spacing: -1px;
|
|
}
|
|
|
|
.faded {
|
|
opacity: 0.7;
|
|
font-size: 90%;
|
|
}
|
|
|
|
.circle {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
margin-bottom: -2px;
|
|
}
|
|
|
|
.circle-grid {
|
|
width: 27px;
|
|
height: 27px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
margin-bottom: -7px;
|
|
/* opacity: 0; */
|
|
/* transition: opacity 0.5s ease-in; */
|
|
}
|
|
|
|
.research-circle {
|
|
width: 13px;
|
|
height: 13px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
background-color: #f7b;
|
|
border: 0.5px #fff solid;
|
|
opacity: 0.85;
|
|
margin-bottom: -2.5px;
|
|
}
|
|
|
|
.ammo-circle {
|
|
width: 11px;
|
|
height: 11px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
background-color: #467;
|
|
border: 0.5px #fff solid;
|
|
opacity: 0.95;
|
|
margin-bottom: -1.5px;
|
|
}
|
|
|
|
.heal-circle {
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
background-color: #0d9;
|
|
border: 0.5px #fff solid;
|
|
opacity: 0.85;
|
|
margin-bottom: -3px;
|
|
}
|
|
.heal-circle-energy {
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
background-color: #ff0;
|
|
border: 0.5px #000 solid;
|
|
opacity: 0.85;
|
|
margin-bottom: -3px;
|
|
}
|
|
|
|
.coupling-circle {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
background-color: #0ae;
|
|
border: 0.5px #fff solid;
|
|
margin-bottom: -0.5px;
|
|
}
|
|
.boost-circle {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
background-color: #f03;
|
|
border: 0.5px #fff solid;
|
|
opacity: 0.9;
|
|
margin-bottom: -0.5px;
|
|
}
|
|
|
|
.circle-grid-shadow {
|
|
width: 43px;
|
|
height: 43px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
margin-bottom: -15px;
|
|
}
|
|
|
|
.circle-gun-tech {
|
|
box-shadow: 0 0 0 3px #025;
|
|
}
|
|
|
|
.junk {
|
|
background-color: hsl(254, 44%, 75%);
|
|
border-radius: 25%;
|
|
/* animation: 3s linear infinite alternate pulse; */
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
border-radius: 0%;
|
|
}
|
|
|
|
100% {
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
/* .circle-grid-gun {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
margin-bottom: 0px;
|
|
background: #025;
|
|
box-shadow: 0 0 0 8px hsl(253, 80%, 67%);
|
|
} */
|
|
|
|
.field {
|
|
background-color: #0cf;
|
|
}
|
|
|
|
.tech {
|
|
/* background: rgb(116, 102, 238); */
|
|
/* background: hsl(253, 57%, 52%); */
|
|
background-color: hsl(255, 100%, 71%);
|
|
/* background: hsl(282, 100%, 64%); */
|
|
}
|
|
|
|
/* .grey {
|
|
background: #afb6c2;
|
|
} */
|
|
|
|
.gun {
|
|
background-color: rgb(0, 80, 218);
|
|
}
|
|
|
|
.heal {
|
|
background-color: #0d9;
|
|
}
|
|
|
|
.research {
|
|
/* #f84 #f99*/
|
|
background-color: #f7b;
|
|
}
|
|
|
|
.alt {
|
|
animation: alt 8s linear infinite alternate;
|
|
font-weight: 400;
|
|
letter-spacing: 1px;
|
|
/* color: rgba(0, 0, 0, 0.5) */
|
|
}
|
|
|
|
@keyframes alt {
|
|
0% {
|
|
text-shadow: 3px 0px 0px;
|
|
}
|
|
|
|
100% {
|
|
text-shadow: -3px 0px 0px;
|
|
}
|
|
|
|
}
|
|
|
|
.flicker {
|
|
animation: flicker 4s linear infinite;
|
|
}
|
|
|
|
@keyframes flicker {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
80% {
|
|
opacity: 1;
|
|
}
|
|
|
|
90% {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.color-coupling {
|
|
/* animation: coupling 1000ms linear infinite alternate; */
|
|
/* animation: vibrate 500ms linear infinite alternate;
|
|
display: inline-block; */
|
|
/* text-shadow: 0px 0px 2px #0cf; */
|
|
/* text-shadow: 0px 0px 1.5px #0cf; */
|
|
text-shadow: 0px 0px 1.5px #0cf;
|
|
/* color: hsl(255, 82%, 59%); */
|
|
letter-spacing: 1px;
|
|
font-weight: 100;
|
|
}
|
|
|
|
/* @keyframes coupling{
|
|
0%{
|
|
letter-spacing: 0.5px;
|
|
}
|
|
100%{
|
|
letter-spacing: 1px;
|
|
}
|
|
}
|
|
|
|
@keyframes vibrate{
|
|
0% {
|
|
transform: translateY(-0.25px)
|
|
}
|
|
100% {
|
|
transform: translateY(0.25px)
|
|
}
|
|
} */
|
|
|
|
.box {
|
|
padding: 3px 8px 3px 8px;
|
|
border: 2px solid #444;
|
|
border-radius: 4px;
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.wrapper {
|
|
display: grid;
|
|
grid-template-columns: 360px 10px;
|
|
align-self: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.grid-box {
|
|
align-self: center;
|
|
justify-self: center;
|
|
}
|
|
|
|
.right {
|
|
text-align: right;
|
|
}
|
|
|
|
.lore {
|
|
animation: bgColor 3.5s linear infinite;
|
|
}
|
|
|
|
.lore-text {
|
|
animation: textColor 3s linear infinite;
|
|
}
|
|
|
|
.entanglement {
|
|
/* color: #456; */
|
|
font-size: 1.1em;
|
|
font-weight: 100;
|
|
text-align: center;
|
|
letter-spacing: 10px;
|
|
border: none;
|
|
/* border-radius: 50%; */
|
|
background-color: #efeff5;
|
|
}
|
|
.flipX {
|
|
animation: 14s anim-flipX linear infinite;
|
|
}
|
|
@keyframes anim-flipX {
|
|
0% {
|
|
transform: rotateX(0.5turn);
|
|
}
|
|
50% {
|
|
transform: rotateX(1turn);
|
|
}
|
|
100% {
|
|
transform: rotateX(0.5turn);
|
|
}
|
|
}
|
|
|
|
@keyframes fieldColorCycle {
|
|
0% {
|
|
background-color: rgb(255, 255, 255)
|
|
}
|
|
|
|
100% {
|
|
background-color: rgb(200, 255, 255)
|
|
}
|
|
}
|
|
|
|
@keyframes techColorCycle {
|
|
0% {
|
|
background-color: hsl(253, 100%, 100%)
|
|
}
|
|
|
|
100% {
|
|
background-color: hsl(253, 100%, 90%)
|
|
}
|
|
}
|
|
|
|
@keyframes bgColor {
|
|
0% {
|
|
background-color: rgb(63, 218, 216)
|
|
}
|
|
|
|
10% {
|
|
background-color: rgb(47, 201, 226)
|
|
}
|
|
|
|
20% {
|
|
background-color: rgb(28, 127, 238)
|
|
}
|
|
|
|
30% {
|
|
background-color: rgb(95, 21, 242)
|
|
}
|
|
|
|
40% {
|
|
background-color: rgb(186, 12, 248)
|
|
}
|
|
|
|
50% {
|
|
background-color: rgb(251, 7, 217)
|
|
}
|
|
|
|
60% {
|
|
background-color: rgba(255, 0, 0)
|
|
}
|
|
|
|
70% {
|
|
background-color: rgb(255, 0, 0)
|
|
}
|
|
|
|
80% {
|
|
background-color: rgb(255, 154, 0)
|
|
}
|
|
|
|
90% {
|
|
background-color: rgb(208, 222, 33)
|
|
}
|
|
|
|
100% {
|
|
background-color: rgb(79, 220, 74)
|
|
}
|
|
}
|
|
|
|
@keyframes textColor {
|
|
0% {
|
|
color: rgb(63, 218, 216)
|
|
}
|
|
|
|
10% {
|
|
color: rgb(47, 201, 226)
|
|
}
|
|
|
|
20% {
|
|
color: rgb(28, 127, 238)
|
|
}
|
|
|
|
30% {
|
|
color: rgb(95, 21, 242)
|
|
}
|
|
|
|
40% {
|
|
color: rgb(186, 12, 248)
|
|
}
|
|
|
|
50% {
|
|
color: rgb(251, 7, 217)
|
|
}
|
|
|
|
60% {
|
|
color: rgba(255, 0, 0)
|
|
}
|
|
|
|
70% {
|
|
color: rgb(255, 0, 0)
|
|
}
|
|
|
|
80% {
|
|
color: rgb(255, 154, 0)
|
|
}
|
|
|
|
90% {
|
|
color: rgb(208, 222, 33)
|
|
}
|
|
|
|
100% {
|
|
color: rgb(79, 220, 74)
|
|
}
|
|
}
|
|
|
|
.link {
|
|
color: #000;
|
|
}
|
|
|
|
.link:hover {
|
|
text-decoration: underline;
|
|
/* color: #0ad; */
|
|
}
|
|
|
|
/* #console {
|
|
font-family: monospace;
|
|
font-size: 1.5em;
|
|
width: 300px;
|
|
height: 50px;
|
|
position: absolute;
|
|
bottom: 10px;
|
|
right: 10px;
|
|
z-index: 3;
|
|
} */ |