4e6acdd5d0
animated new level load graphics for reactor and final level autoZoom code rewritten to work with pause better using the ephemera system this might cause bugs, I already found a few intro level renamed initial extra ammo power ups on why difficulty for final and reactor levels removed falling off the map damage on levels that still had falling off damage mob: stinger - has speed that adjusts as it flaps it's wings and a short range laser tech: strange loop - +9% damage, removing it gives null hypothesis and strange attractor tech: martingale - +11% damage, removing this has a 50% chance to not remove and to double it's damage paradigm shift removes 6 health when it ejects a tech, but now has a 85->97% chance to work ammo, heal, research tech spawn extra power ups after each time you take them tungsten carbide skin has a hexagon look and +222->300 max health Bayesian statistics spawn 3->6 research ansatz spawns 2->3 research if you have no research Ψ(t) collapse 16->21 research futures exchange 4.3->4.7% duplication replication 9->10 duplication stimulated emission 17->19% duplication anthropic principle spawn 5->16 heals when you die supply chain: no long gives JUNK instead triples the frequency of finding applied science electronegativity 0.22->0.26% damage per energy non-renewables 88->97% damage anticorrelation 100->111% damage decorrelation 70->77% defense parasitism 83->93% damage torpor 66->74% defense bug fix: recycling works with mass-energy (although it doesn't do much) ternary wasn't working in many situations, but it should now fixed bubble fusion exploit that triggers on mobs in factory endlessly bot fabrication was making 1 extra bot and giving negative research sometimes
1505 lines
27 KiB
CSS
1505 lines
27 KiB
CSS
:root {
|
|
--build-bg-color: #aeb6c2;
|
|
--card-color: #fafcfd;
|
|
--hover-card-color: #e5e5ed;
|
|
}
|
|
|
|
body {
|
|
font-family: "Helvetica", "Arial", sans-serif;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
cursor: auto;
|
|
/* transition: background-color 0.2s ease-in-out; */
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
select option {
|
|
background-color: #fff;
|
|
}
|
|
|
|
input {
|
|
padding: 0px 4px;
|
|
font-size: 0.8em;
|
|
border: 1px #333 solid;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
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;
|
|
width: 360px;
|
|
}
|
|
|
|
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;
|
|
background-color: #fff;
|
|
text-align: center;
|
|
}
|
|
|
|
.pause-table {
|
|
width: auto;
|
|
}
|
|
|
|
.key-input-pause {
|
|
width: 15px;
|
|
padding: 0px 2px;
|
|
border: 2px solid #333;
|
|
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;
|
|
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;
|
|
}
|
|
|
|
#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;
|
|
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;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition: opacity 0.25s linear;
|
|
overflow: auto;
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
|
|
|
|
|
|
.choose-grid-no-images {
|
|
border-radius: 8px;
|
|
border: 10px solid #444;
|
|
gap: 10px;
|
|
background-color: #444;
|
|
/* padding: 10px 1px; */
|
|
|
|
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
margin: 0px;
|
|
z-index: 12;
|
|
max-height: 99vh;
|
|
font-size: 1.3em;
|
|
display: grid;
|
|
grid-template-columns: 384px;
|
|
align-items: stretch;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition: opacity 0.25s linear;
|
|
overflow: auto;
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
|
|
#choose-grid::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.choose-grid-module {
|
|
line-height: 160%;
|
|
background-color: var(--card-color);
|
|
font-size: 0.75em;
|
|
/* transform-style: preserve-3d;
|
|
transition: transform 2s;
|
|
transform: rotateX(180deg); */
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.pause-grid {
|
|
padding: 2px;
|
|
margin: 0px;
|
|
display: none;
|
|
grid-template-columns: 384px;
|
|
grid-auto-rows: minmax(auto, auto);
|
|
align-content: start;
|
|
align-items: start;
|
|
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-console {
|
|
padding: 10px;
|
|
margin: 5px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
#pause-grid-left::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.pause-grid-module {
|
|
line-height: 160%;
|
|
background-color: var(--card-color);
|
|
font-size: 0.75em;
|
|
}
|
|
|
|
.sort {
|
|
padding: 0.1em 0.3em;
|
|
border: 1px solid #444;
|
|
/* min-height: 88px; */
|
|
line-height: 100%;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.sort-button {
|
|
border: 1px #333 solid;
|
|
border-radius: 0.5em;
|
|
background-color: #fff;
|
|
font-size: 0.5em;
|
|
/* padding: 0.3em; */
|
|
|
|
}
|
|
|
|
.sort-button:hover {
|
|
background-color: #eee;
|
|
}
|
|
|
|
.pause-eject .card-text {
|
|
animation: techColorCycle 1s linear infinite alternate;
|
|
}
|
|
|
|
#experiment-grid {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 0px;
|
|
margin: 0px;
|
|
border: 0px;
|
|
background-color: var(--build-bg-color);
|
|
display: none;
|
|
grid-template-columns: repeat(auto-fit, 384px);
|
|
grid-auto-flow: row;
|
|
/* grid-auto-rows: minmax(auto, auto); */
|
|
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 {
|
|
line-height: 160%;
|
|
background-color: var(--card-color);
|
|
font-size: 0.75em;
|
|
}
|
|
|
|
.experiment-grid-hide {
|
|
display: none;
|
|
}
|
|
|
|
.grid-title {
|
|
padding-bottom: 6px;
|
|
padding-top: 4px;
|
|
font-size: 1.4em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.experiment-grid-module:hover:not(.build-tech-selected, .build-field-selected, .build-gun-selected) {
|
|
background-color: var(--card-color);
|
|
}
|
|
|
|
.experiment-start-box {
|
|
background-color: var(--card-color);
|
|
/* font-size: 1em; */
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
align-self: start;
|
|
width: 276px;
|
|
line-height: 200%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border: 2px #333 solid;
|
|
border-top: 0px;
|
|
border-radius: 10px;
|
|
border-top-left-radius: 0px;
|
|
/* border-bottom-left-radius: 0px; */
|
|
border-top-right-radius: 0px;
|
|
padding: 0.2em 0px;
|
|
/* height: 210px; */
|
|
box-shadow: 8px 8px 7px rgba(0, 0, 50, 0.15);
|
|
}
|
|
|
|
.card-background {
|
|
height: 340px;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.card-text {
|
|
background-color: rgba(255, 255, 255, 1);
|
|
padding: 0.5em 1em;
|
|
border: 1px solid #444;
|
|
margin-top: -1px;
|
|
margin-right: -1px;
|
|
font-size: 0.92em;
|
|
min-height: 88px;
|
|
/* border-radius: 5px; */
|
|
}
|
|
|
|
.cancel-card {
|
|
text-align: center;
|
|
font-size: 1.1em;
|
|
font-weight: 100;
|
|
justify-self: end;
|
|
border: 1px solid #444;
|
|
margin-top: -1px;
|
|
margin-right: -1px;
|
|
padding: 1px;
|
|
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;
|
|
border: 1px solid #444;
|
|
margin-top: -1px;
|
|
margin-right: -1px;
|
|
padding: 1px 0px 1px 10px;
|
|
line-height: 160%;
|
|
background-color: var(--card-color);
|
|
}
|
|
|
|
.research-card:hover {
|
|
background-color: var(--hover-card-color);
|
|
}
|
|
|
|
.research-cancel {
|
|
display: flex;
|
|
gap: 10px;
|
|
line-height: 160%;
|
|
/* background-color: var(--card-color); */
|
|
font-size: 1em;
|
|
}
|
|
|
|
/* keeps 5 columns at 1440px */
|
|
@media (min-width: 1710px) and (max-width: 1950px) {
|
|
|
|
.experiment-grid-module,
|
|
.choose-grid-module,
|
|
.pause-grid-module,
|
|
.research-cancel {
|
|
line-height: 143%;
|
|
font-size: 0.68em;
|
|
}
|
|
|
|
.research-cancel {
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
#experiment-grid,
|
|
.choose-grid,
|
|
.pause-grid {
|
|
grid-template-columns: repeat(auto-fit, 340px);
|
|
}
|
|
|
|
.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 {
|
|
line-height: 139%;
|
|
font-size: 0.58em;
|
|
}
|
|
|
|
.research-cancel {
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
#experiment-grid,
|
|
.choose-grid,
|
|
.pause-grid {
|
|
grid-template-columns: repeat(auto-fit, 285px);
|
|
}
|
|
|
|
.card-background {
|
|
height: 240px;
|
|
}
|
|
|
|
.card-text {
|
|
min-height: 64px;
|
|
}
|
|
}
|
|
|
|
/* .card-text */
|
|
.choose-grid-no-images .card-text,
|
|
.choose-grid-no-images .research-card,
|
|
.choose-grid-no-images .cancel-card {
|
|
border-radius: 5px;
|
|
}
|
|
|
|
/* keeps 4 columns at 1440px */
|
|
/* @media (1500px <= width < 1950px) {
|
|
.experiment-grid-module, .choose-grid-module, .pause-grid-module {
|
|
line-height: 150%;
|
|
font-size: 0.72em;
|
|
}
|
|
#experiment-grid, #choose-grid, .pause-grid{
|
|
grid-template-columns: repeat(auto-fit, 360px);
|
|
}
|
|
.card-background{
|
|
height:315px;
|
|
}
|
|
.card-text {
|
|
min-height: 82px;
|
|
}
|
|
}
|
|
@media (width < 1500px) {
|
|
.experiment-grid-module, .choose-grid-module, .pause-grid-module {
|
|
line-height: 143%;
|
|
font-size: 0.68em;
|
|
}
|
|
#experiment-grid, #choose-grid, .pause-grid{
|
|
grid-template-columns: repeat(auto-fit, 340px);
|
|
}
|
|
.card-background{
|
|
height:290px;
|
|
}
|
|
.card-text {
|
|
min-height: 75px;
|
|
}
|
|
} */
|
|
|
|
.experiment-grid-module:hover .card-text {
|
|
background-color: var(--hover-card-color);
|
|
}
|
|
|
|
.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 {
|
|
/* background-color: var(--build-bg-color); */
|
|
/* color: #000; */
|
|
opacity: 0.35;
|
|
}
|
|
|
|
.experiment-grid-disabled[data-descr] {
|
|
position: relative;
|
|
}
|
|
|
|
.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: #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;
|
|
}
|
|
|
|
#damage-bar {
|
|
position: absolute;
|
|
/* top: 1px;
|
|
left: 15px;
|
|
height: 7px;
|
|
width: 0px;
|
|
transition: width 0.3s linear; */
|
|
top: 16px;
|
|
right: 4px;
|
|
height: 0px;
|
|
width: 7px;
|
|
transition: height 0.25s linear;
|
|
opacity: 1;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
background-color: rgb(255, 55, 95);
|
|
/* border-bottom: 1.5px solid #701; */
|
|
/* border-right: 1.5px solid #701; */
|
|
display: none;
|
|
}
|
|
|
|
#defense-bar {
|
|
position: absolute;
|
|
top: 8px;
|
|
left: 15px;
|
|
height: 7px;
|
|
width: 0px;
|
|
transition: width 0.25s linear;
|
|
opacity: 1;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
background-color: #fff;
|
|
border-right: 1.5px solid #777;
|
|
display: none;
|
|
}
|
|
|
|
#health {
|
|
position: absolute;
|
|
top: 15px;
|
|
left: 15px;
|
|
height: 20px;
|
|
width: 0px;
|
|
transition: width 1s ease-out;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
background-color: rgb(9, 245, 166);
|
|
border-right: 2px solid rgb(51, 162, 125);
|
|
display: none;
|
|
}
|
|
|
|
#health-bg {
|
|
position: absolute;
|
|
top: 15px;
|
|
left: 15px;
|
|
height: 20px;
|
|
width: 0px;
|
|
transition: width 1s ease-out;
|
|
background-color: #032;
|
|
opacity: 0.1;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
display: none;
|
|
}
|
|
|
|
/* #damage-bar {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 15px;
|
|
height: 6px;
|
|
width: 0px;
|
|
transition: width 0.3s linear;
|
|
opacity: 1;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
background-color: #f03;
|
|
border: 1px solid #701;
|
|
display: none;
|
|
}
|
|
|
|
#defense-bar {
|
|
position: absolute;
|
|
top: 9px;
|
|
left: 15px;
|
|
height: 5px;
|
|
width: 0px;
|
|
transition: width 0.3s linear;
|
|
opacity: 1;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
background-color: #fff;
|
|
border: 1px solid #333;
|
|
display: none;
|
|
}
|
|
#health {
|
|
position: absolute;
|
|
top: 16px;
|
|
left: 15px;
|
|
height: 20px;
|
|
width: 0px;
|
|
transition: width 1s ease-out; z-index: 2;
|
|
pointer-events: none;
|
|
background-color: #0fa;
|
|
border: 2px solid rgb(51, 162, 125);
|
|
border-radius: 8px;
|
|
display: none;
|
|
}
|
|
#health-bg {
|
|
position: absolute;
|
|
top: 18px;
|
|
left: 15px;
|
|
height: 20px;
|
|
width: 0px;
|
|
transition: width 1s ease-out;
|
|
background-color: #000;
|
|
opacity: 0.1;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
border-radius: 8px;
|
|
display: none;
|
|
} */
|
|
|
|
/* .low-health {
|
|
animation: blink 250ms infinite alternate;
|
|
}
|
|
|
|
@keyframes blink {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
|
|
to {
|
|
opacity: 0.6;
|
|
}
|
|
} */
|
|
|
|
/* 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: 82px;
|
|
left: 15px;
|
|
z-index: 2;
|
|
font-size: 23px;
|
|
color: #222;
|
|
/* background-color: rgba(255, 255, 255, 0.4); */
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
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: 45px;
|
|
left: 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: 15px;
|
|
right: 15px;
|
|
z-index: 2;
|
|
font-size: 20px;
|
|
color: #222;
|
|
text-align: right;
|
|
opacity: 0.35;
|
|
line-height: 120%;
|
|
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.15s; */
|
|
pointer-events: none;
|
|
user-select: none;
|
|
}
|
|
|
|
/* color for in game console output */
|
|
/* .ammo-flash {
|
|
color: #f33;
|
|
transition: color 2s;
|
|
} */
|
|
|
|
|
|
.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;
|
|
}
|
|
|
|
.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 {
|
|
font-variant: small-caps;
|
|
letter-spacing: 1px;
|
|
text-shadow: 1.5px -1.5px hsla(243, 100%, 38%, 0.2);
|
|
}
|
|
|
|
.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;
|
|
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;
|
|
}
|
|
|
|
.color-defense {
|
|
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: var(--card-color);
|
|
border: 0.15em #444 solid;
|
|
padding: 0.2em;
|
|
border-radius: 0.2em;
|
|
font-weight: 800;
|
|
font-size: 1em;
|
|
}
|
|
|
|
.color-junk {
|
|
letter-spacing: 1px;
|
|
font-family: Lucida Console, Courier, monospace;
|
|
}
|
|
|
|
.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-grid {
|
|
width: 1.35em;
|
|
height: 1.35em;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
margin-bottom: -0.3em;
|
|
}
|
|
|
|
.circle-grid-skin {
|
|
width: 1.25em;
|
|
height: 1.25em;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
background-color: #fff;
|
|
opacity: 0.8;
|
|
border: 0.08em solid #222;
|
|
position: absolute;
|
|
top: -0.05em;
|
|
left: 0em;
|
|
margin-bottom: -0.3em;
|
|
}
|
|
|
|
.circle-grid-skin-eye {
|
|
width: 0.18em;
|
|
height: 0.18em;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
background-color: #fff;
|
|
border: 0.08em solid #222;
|
|
position: absolute;
|
|
top: 0.45em;
|
|
left: 0.9em;
|
|
margin-bottom: -0.3em;
|
|
}
|
|
|
|
.junk {
|
|
background-color: hsl(254, 44%, 75%);
|
|
border-radius: 25%;
|
|
}
|
|
|
|
.research-circle {
|
|
width: 0.9em;
|
|
height: 0.9em;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
background-color: #f7b;
|
|
border: 0.065em #fff solid;
|
|
opacity: 0.85;
|
|
margin-bottom: -0.1em;
|
|
}
|
|
|
|
.ammo-circle {
|
|
width: 0.75em;
|
|
height: 0.75em;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
background-color: #467;
|
|
border: 0.05em #fff solid;
|
|
opacity: 0.95;
|
|
margin-bottom: -1.5px;
|
|
}
|
|
|
|
.heal-circle {
|
|
width: 0.95em;
|
|
height: 0.95em;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
background-color: #0d9;
|
|
border: 0.05em #fff solid;
|
|
opacity: 0.85;
|
|
margin-bottom: -3px;
|
|
}
|
|
|
|
.heal-circle-energy {
|
|
width: 0.95em;
|
|
height: 0.95em;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
background-color: #ff0;
|
|
border: 0.05em #000 solid;
|
|
opacity: 0.85;
|
|
margin-bottom: -3px;
|
|
}
|
|
|
|
.coupling-circle {
|
|
width: 0.7em;
|
|
height: 0.7em;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
background-color: #0ae;
|
|
border: 0.05em #fff solid;
|
|
margin-bottom: -0.5px;
|
|
}
|
|
|
|
.boost-circle {
|
|
width: 0.7em;
|
|
height: 0.7em;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
background-color: #f03;
|
|
border: 0.05em #fff solid;
|
|
opacity: 0.9;
|
|
margin-bottom: -0.5px;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
border-radius: 0%;
|
|
}
|
|
|
|
100% {
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.field {
|
|
background-color: #0cf;
|
|
}
|
|
|
|
.tech {
|
|
background-color: hsl(255, 100%, 71%);
|
|
}
|
|
|
|
.gun {
|
|
background-color: rgb(0, 80, 218);
|
|
}
|
|
|
|
.heal {
|
|
background-color: #0d9;
|
|
}
|
|
|
|
.research {
|
|
background-color: #f7b;
|
|
}
|
|
|
|
.alt {
|
|
animation: alt 8s linear infinite alternate;
|
|
font-weight: 400;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
@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 {
|
|
text-shadow: 0px 0px 1.5px #0cf;
|
|
letter-spacing: 1px;
|
|
font-weight: 100;
|
|
}
|
|
|
|
.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 {
|
|
font-size: 1.1em;
|
|
font-weight: 100;
|
|
text-align: center;
|
|
letter-spacing: 10px;
|
|
border: none;
|
|
background-color: var(--card-color);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/*
|
|
.fade-ins {
|
|
animation: 1.5s linear 1s fadeins;
|
|
}
|
|
|
|
@keyframes fadeins {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
} */
|
|
.blurry-text {
|
|
color: transparent;
|
|
text-shadow: 0 0 9px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.unblur {
|
|
color: transparent;
|
|
text-shadow: 0 0 9px rgba(0, 0, 0, 0.5);
|
|
animation: 1.5s ease 1.2s normal forwards 1 unblur;
|
|
}
|
|
|
|
@keyframes unblur {
|
|
0% {
|
|
color: transparent;
|
|
text-shadow: 0 0 9px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
100% {
|
|
/* font-weight: 800; */
|
|
color: #000;
|
|
text-shadow: 0 0 0px rgba(0, 0, 0, 0.5);
|
|
}
|
|
}
|
|
|
|
.fade-in {
|
|
opacity: 0;
|
|
animation: 2s ease 1.5s normal forwards 1 fadein;
|
|
}
|
|
|
|
.fade-in-fast {
|
|
opacity: 0;
|
|
animation: 1.5s ease 1s normal forwards 1 fadein;
|
|
}
|
|
|
|
.fade-in-faster {
|
|
opacity: 0;
|
|
animation: 2s ease 0.5s normal forwards 1 fadein;
|
|
}
|
|
|
|
@keyframes fadein {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes dash {
|
|
to {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
}
|
|
|
|
.draw-lines {
|
|
stroke-dasharray: 20;
|
|
stroke-dashoffset: 20;
|
|
animation: dash 2.4s ease-in forwards;
|
|
}
|
|
|
|
.draw-lines-dash {
|
|
stroke-dasharray: 4;
|
|
stroke-dashoffset: 4;
|
|
animation: dash 2.4s ease-in forwards;
|
|
}
|
|
|
|
.draw-lines-o {
|
|
stroke-dasharray: 11;
|
|
stroke-dashoffset: 11;
|
|
animation: dash 2.4s ease-in forwards;
|
|
}
|
|
|
|
.draw-lines-g {
|
|
stroke-dasharray: 17;
|
|
stroke-dashoffset: 17;
|
|
animation: dash 2.4s ease-in forwards;
|
|
}
|
|
|
|
.draw-lines-box-1 {
|
|
stroke-dasharray: 1000;
|
|
stroke-dashoffset: 1000;
|
|
animation: dash 5s ease-in forwards;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.draw-lines-box-2 {
|
|
stroke-dasharray: 1000;
|
|
stroke-dashoffset: 1000;
|
|
animation: dash 2.6s ease-in forwards;
|
|
animation-delay: 1s;
|
|
}
|
|
|
|
.draw-lines-box-3 {
|
|
stroke-dasharray: 1000;
|
|
stroke-dashoffset: 1000;
|
|
animation: dash 1.15s ease-in forwards;
|
|
animation-delay: 1.55s;
|
|
}
|
|
|
|
.draw-lines3 {
|
|
stroke-dasharray: 3000;
|
|
stroke-dashoffset: 3000;
|
|
animation: dash 3.1s ease-in forwards;
|
|
}
|
|
|
|
.draw-lines4 {
|
|
stroke-dasharray: 300;
|
|
stroke-dashoffset: 300;
|
|
animation: dash 2.5s ease-in forwards;
|
|
} |