148 lines
2.6 KiB
CSS
148 lines
2.6 KiB
CSS
|
body.dark {
|
||
|
|
--color-background: #13262fff;
|
||
|
|
--color-text: #fffcffff;
|
||
|
|
--color-left: #489fb5ff;
|
||
|
|
--color-right: #d62828ff;
|
||
|
|
--color-upgrade: hsla(264, 16%, 47%, 1);
|
||
|
|
--color-upgrade-disabled: hsla(264, 16%, 27%, 1);
|
||
|
|
--color-upgrade-hovered: hsla(264, 16%, 57%, 1);
|
||
|
|
--color-info: #3E6990FF;
|
||
|
|
--color-settings-background: #213a50;
|
||
|
|
--color-modal-container: #00000060;
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
font-family: 'Recursive', monospace;
|
||
|
|
color: var(--color-text);
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
text-size-adjust: none;
|
||
|
|
-moz-text-size-adjust: none;
|
||
|
|
-webkit-text-size-adjust: none;
|
||
|
|
-ms-text-size-adjust: none;
|
||
|
|
|
||
|
|
user-select: none;
|
||
|
|
-ms-user-select: none;
|
||
|
|
-webkit-user-select: none;
|
||
|
|
-moz-user-select: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
margin: 0px;
|
||
|
|
background-color: var(--color-background);
|
||
|
|
}
|
||
|
|
|
||
|
|
.app {
|
||
|
|
padding: 1em;
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
bottom: 0;
|
||
|
|
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-container {
|
||
|
|
align-self: stretch;
|
||
|
|
flex-grow: 1;
|
||
|
|
margin-top: 1em;
|
||
|
|
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr 1fr;
|
||
|
|
grid-template-rows: 1fr;
|
||
|
|
gap: 0.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
p {
|
||
|
|
margin: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
button {
|
||
|
|
background-color: var(--color-upgrade);
|
||
|
|
border-radius: 1em;
|
||
|
|
padding: 0.5em 1em;
|
||
|
|
border: 0;
|
||
|
|
font-size: 1em;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
button:hover {
|
||
|
|
background-color: var(--color-upgrade-hovered);
|
||
|
|
}
|
||
|
|
button:disabled {
|
||
|
|
background-color: var(--color-upgrade-disabled);
|
||
|
|
cursor: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.divider {
|
||
|
|
flex-grow: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
#settings-toggle {
|
||
|
|
position: absolute;
|
||
|
|
right: 1em;
|
||
|
|
top: 1em;
|
||
|
|
z-index: 11;
|
||
|
|
background-color: var(--color-info);
|
||
|
|
}
|
||
|
|
#settings-toggle:hover {
|
||
|
|
filter: brightness(1.3);
|
||
|
|
}
|
||
|
|
#settings-toggle img {
|
||
|
|
width: 2em;
|
||
|
|
height: 2em;
|
||
|
|
}
|
||
|
|
#settings-container {
|
||
|
|
position: absolute;
|
||
|
|
top: 1em;
|
||
|
|
right: 1em;
|
||
|
|
background: var(--color-settings-background);
|
||
|
|
padding: 1em;
|
||
|
|
border-radius: 1em;
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
.settings-title {
|
||
|
|
display: block;
|
||
|
|
text-align: left;
|
||
|
|
font-size: 2em;
|
||
|
|
}
|
||
|
|
.settings {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin-bottom: .5em;
|
||
|
|
}
|
||
|
|
.settings button,
|
||
|
|
.settings input {
|
||
|
|
margin-left: 1em;
|
||
|
|
}
|
||
|
|
button.settings {
|
||
|
|
width: 100%;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
.button-row {
|
||
|
|
display: flex;
|
||
|
|
align-items: row;
|
||
|
|
}
|
||
|
|
.button-row > * {
|
||
|
|
flex-basis: 0;
|
||
|
|
flex-grow: 1;
|
||
|
|
margin-left: .25em;
|
||
|
|
margin-right: .25em;
|
||
|
|
}
|
||
|
|
.button-row > *:first-child {
|
||
|
|
margin-left: 0;
|
||
|
|
}
|
||
|
|
.button-row > *:last-child {
|
||
|
|
margin-right: 0;
|
||
|
|
}
|
||
|
|
#seedDisplay {
|
||
|
|
user-select: text;
|
||
|
|
}
|
||
|
|
.incompleteSeed::after {
|
||
|
|
content: " (partial)";
|
||
|
|
font-size: 0.75em;
|
||
|
|
color: lightgrey;
|
||
|
|
}
|