5e12cea685
new community levels: (you can enable community maps in the settings) rings by thatLittleFrog flappyGon by Digin trial by Cirryn and Tarantula Hawk arena level updated by Whyisthisnotavalable difficulty scaling: 0.84->0.85x player damage per level research spawn per level is no longer in the difficulty settings instead players get 1 research for only the first few levels cell boss has less health at high difficulty converted JUNK tech to additive, instead of the multiplicative makes the first JUNK you take do the same, but if you take too much you can get to 100% right aligned some text in tech descriptions added some circles to the in-game console messages renamed slow light -> delayed-choice - a single 0.4 second delayed 0.7x damage laser beam also now works with reflection plasma torch field gets 1.5x damage by default molecular assembler coupling 0.8->0.6 energy per second nail-bot upgrade 5->4x fire rate foam-bot upgrade 3->2.5x size and fire rate sound-bot upgrade 2.5->2x fire rate, damage, 1->2x wave packet length boom-bot upgrade reduced range, bot acceleration orbital-bot upgrade 1.5->2x radius perimeter defense 0.95->0.96x damage taken per bot network effect 1.05->1.04x damage per bot tech: working mass - cleaned up physics and logic a bit negative feedback scales with health below maxHealth, not health below 100 1.007->1.006x damage per missing health homeostasis scales with missing health, not health below 100 limit of 0.2x at 0 health
1663 lines
30 KiB
CSS
1663 lines
30 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;
|
|
/* box-shadow: 7px 7px 6px rgba(0, 0, 0, 0.13); */
|
|
}
|
|
|
|
|
|
#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: 10px; */
|
|
/* border-radius: 10px; */
|
|
/* line-height: 140%; */
|
|
/* font-size: 1em; */
|
|
/* padding: 10px; */
|
|
/* margin: -5px 0; */
|
|
/* } */
|
|
|
|
#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 6px 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;
|
|
}
|
|
|
|
.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;
|
|
/* box-shadow: 8px 8px 6px rgba(0, 0, 60, 0.11); */
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#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;
|
|
}
|
|
|
|
/* 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-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-choice {
|
|
display: inline-block;
|
|
}
|
|
|
|
.color-choice span {
|
|
display: inline-block;
|
|
animation: bounce 3s infinite;
|
|
transform-origin: bottom;
|
|
color: #555;
|
|
}
|
|
|
|
.color-choice span:nth-child(1) {
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.color-choice span:nth-child(2) {
|
|
animation-delay: 1s;
|
|
}
|
|
|
|
.color-choice span:nth-child(3) {
|
|
animation-delay: 2s;
|
|
}
|
|
|
|
@keyframes bounce {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
15% {
|
|
transform: translateY(-2px);
|
|
color: #aaa;
|
|
}
|
|
|
|
30% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.color-invulnerable {
|
|
color: #fff;
|
|
text-shadow: 0px 0px 7px #000;
|
|
}
|
|
|
|
.color-MACHO {
|
|
color: #246;
|
|
text-shadow: 0px 0px 7px #246;
|
|
}
|
|
|
|
.color-dup {
|
|
font-variant: small-caps;
|
|
letter-spacing: 1px;
|
|
text-shadow: 1.5px -1.5px hsla(243, 100%, 38%, 0.2);
|
|
}
|
|
|
|
.color-remove {
|
|
text-decoration: line-through;
|
|
/* letter-spacing: 2px; */
|
|
border-radius: 3px;
|
|
padding: 0px 3px;
|
|
background-color: hsl(255, 40%, 71%);
|
|
color: #fff;
|
|
}
|
|
|
|
.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-print {
|
|
color: #567;
|
|
font-family: 'Courier New', Courier, monospace;
|
|
}
|
|
|
|
.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-instant {
|
|
width: 1.1em;
|
|
height: 1.1em;
|
|
border-radius: 50%;
|
|
border: 0.15em solid hsl(255, 100%, 71%);
|
|
display: inline-block;
|
|
margin-bottom: -0.35em;
|
|
/* background-color: hsla(255, 100%, 71%, 0.3); */
|
|
}
|
|
|
|
.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: -2px;
|
|
}
|
|
|
|
.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: -2px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.color-speed {
|
|
display: inline-block;
|
|
transform: skew(-27deg);
|
|
/* font-weight: 400; */
|
|
color: #038;
|
|
}
|
|
|
|
.color-randomize {
|
|
display: inline-block;
|
|
animation: randomize 4s linear infinite alternate;
|
|
transform-origin: bottom;
|
|
color: #555;
|
|
}
|
|
|
|
@keyframes randomize {
|
|
|
|
0%,
|
|
100% {
|
|
font-family: Arial;
|
|
}
|
|
|
|
20% {
|
|
font-family: Times New Roman;
|
|
}
|
|
|
|
40% {
|
|
font-family: Verdana;
|
|
}
|
|
|
|
60% {
|
|
font-family: Georgia;
|
|
}
|
|
|
|
80% {
|
|
font-family: Courier New;
|
|
}
|
|
}
|
|
|
|
.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(0, 204, 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 10px rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
.unblur {
|
|
color: transparent;
|
|
text-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
|
|
animation: 2.5s ease 0.5s normal forwards 1 unblur;
|
|
}
|
|
|
|
@keyframes unblur {
|
|
0% {
|
|
color: transparent;
|
|
text-shadow: 0 0 7px 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;
|
|
}
|
|
|
|
|
|
|
|
.grid-container {
|
|
display: grid;
|
|
grid-template-columns: 0fr 5fr 0fr;
|
|
line-height: 150%;
|
|
background-color: #fff;
|
|
padding: 15px 0 14px 0;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.far-right-column {
|
|
display: grid;
|
|
grid-template-rows: repeat(6, 1fr);
|
|
font-size: 2rem;
|
|
font-family: monospace;
|
|
align-self: center;
|
|
justify-self: center;
|
|
width: 22px;
|
|
}
|
|
|
|
.far-right-column>div {
|
|
padding-top: 50px;
|
|
}
|
|
|
|
#difficulty-slider {
|
|
margin-top: 2.3rem;
|
|
height: 26.3rem;
|
|
width: 2rem;
|
|
writing-mode: vertical-lr;
|
|
direction: ltr;
|
|
}
|
|
|
|
.left-column {
|
|
grid-row: 1 / span 6
|
|
}
|
|
|
|
.right-column {
|
|
display: grid;
|
|
grid-template-rows: repeat(6, 1fr);
|
|
/* to adjust the width of this column edit the "gridTemplateColumns" in the difficulty power up js code*/
|
|
}
|
|
|
|
.row {
|
|
transition: opacity 0.4s ease-out;
|
|
/* border: 2px #444 solid; */
|
|
/* margin-top: -2px; */
|
|
font-size: 1.2rem;
|
|
padding: 10px;
|
|
}
|
|
|
|
.pause-difficulty-row {
|
|
line-height: 130%;
|
|
font-size: 1em;
|
|
padding: 7px 0px 7px 0px;
|
|
/* top | right | bottom | left */
|
|
margin: -5px 0;
|
|
}
|
|
|
|
#constraint-1 {
|
|
background-color: hsl(240, 18%, 95%);
|
|
border-radius: 7px 7px 0 0;
|
|
}
|
|
|
|
#constraint-2 {
|
|
background-color: hsl(240, 18%, 93%);
|
|
}
|
|
|
|
#constraint-3 {
|
|
background-color: hsl(240, 18%, 89%);
|
|
}
|
|
|
|
#constraint-4 {
|
|
background-color: hsl(240, 18%, 85%);
|
|
}
|
|
|
|
#constraint-5 {
|
|
background-color: hsl(240, 18%, 81%);
|
|
}
|
|
|
|
#constraint-6 {
|
|
background-color: hsl(240, 18%, 77%);
|
|
border-radius: 0 0 7px 7px;
|
|
}
|
|
|
|
#constraint-1:hover {
|
|
background-color: hsl(240, 18%, 93%);
|
|
border: 1px #444 solid;
|
|
padding: 9px;
|
|
}
|
|
|
|
#constraint-2:hover {
|
|
background-color: hsl(240, 18%, 91%);
|
|
border: 1px #444 solid;
|
|
padding: 9px;
|
|
}
|
|
|
|
#constraint-3:hover {
|
|
background-color: hsl(240, 18%, 87%);
|
|
border: 1px #444 solid;
|
|
padding: 9px;
|
|
}
|
|
|
|
#constraint-4:hover {
|
|
background-color: hsl(240, 18%, 83%);
|
|
border: 1px #444 solid;
|
|
padding: 9px;
|
|
}
|
|
|
|
#constraint-5:hover {
|
|
background-color: hsl(240, 18%, 79%);
|
|
border: 1px #444 solid;
|
|
padding: 9px;
|
|
}
|
|
|
|
#constraint-6:hover {
|
|
background-color: hsl(240, 18%, 75%);
|
|
border: 1px #444 solid;
|
|
padding: 9px;
|
|
}
|
|
|
|
#choose-difficulty {
|
|
text-align: center;
|
|
font-size: 1.1em;
|
|
padding: 5px;
|
|
margin-top: 10px;
|
|
color: #333;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.pause-details {
|
|
background-color: hsl(240, 18%, 93%);
|
|
border: 1px solid #333;
|
|
border-radius: 5px;
|
|
padding: 7px;
|
|
margin-bottom: 10px;
|
|
/* box-shadow: 4px 4px 4px hsla(240, 0%, 17%, 0.14); */
|
|
} |