787 lines
13 KiB
CSS
787 lines
13 KiB
CSS
/* Reusable UI pieces. Colours come from the tokens in base.css / the theme. */
|
|
|
|
/* ---------------------------------------------------------------- panels */
|
|
|
|
.panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--gap);
|
|
padding: 1rem;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.panel__head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--gap);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.panel__title {
|
|
font-size: 1.05rem;
|
|
}
|
|
|
|
.hint {
|
|
color: var(--text-muted);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.banner {
|
|
margin: 0;
|
|
padding: 0.6rem 1rem;
|
|
background: var(--danger);
|
|
color: #fff;
|
|
text-align: center;
|
|
}
|
|
|
|
/* ----------------------------------------------------------------- icons */
|
|
|
|
.icon {
|
|
flex: none;
|
|
width: var(--icon-size);
|
|
height: var(--icon-size);
|
|
object-fit: contain;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.icon--placeholder {
|
|
display: block;
|
|
background: var(--placeholder);
|
|
}
|
|
|
|
/* --------------------------------------------------------------- buttons */
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
column-gap: 0.5rem;
|
|
min-height: 44px;
|
|
padding: 0.5rem 1rem;
|
|
background: var(--surface-2);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
cursor: pointer;
|
|
text-align: center;
|
|
touch-action: manipulation;
|
|
user-select: none;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
.btn small {
|
|
color: var(--text-muted);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.btn:hover:not(:disabled) {
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.btn:active:not(:disabled) {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
.btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.btn--primary {
|
|
background: var(--accent);
|
|
border-color: var(--accent);
|
|
color: var(--accent-contrast);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.btn--primary small {
|
|
color: inherit;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.btn--big {
|
|
min-height: 84px;
|
|
flex-direction: column;
|
|
font-size: 1.15rem;
|
|
}
|
|
|
|
.btn--wide {
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.btn--ghost {
|
|
background: transparent;
|
|
}
|
|
|
|
.btn--danger {
|
|
border-color: var(--danger);
|
|
color: var(--danger);
|
|
}
|
|
|
|
.btn--square {
|
|
width: 44px;
|
|
padding: 0;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
/* ----------------------------------------------------------- form fields */
|
|
|
|
.field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.15rem;
|
|
}
|
|
|
|
.field__label {
|
|
color: var(--text-muted);
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
select,
|
|
.price__input,
|
|
.textarea {
|
|
min-height: 44px;
|
|
padding: 0.4rem 0.6rem;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.textarea {
|
|
width: 100%;
|
|
min-height: 0;
|
|
font-family: ui-monospace, Menlo, Consolas, monospace;
|
|
font-size: 0.8rem;
|
|
resize: vertical;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--gap);
|
|
}
|
|
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 0.05rem 0.5rem;
|
|
background: var(--surface-2);
|
|
border-radius: 999px;
|
|
color: var(--text-muted);
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* -------------------------------------------------------------- overview */
|
|
|
|
.tiles {
|
|
display: grid;
|
|
gap: var(--gap);
|
|
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
|
|
}
|
|
|
|
.tile {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--gap);
|
|
padding: 0.75rem;
|
|
background: var(--surface-2);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.tile--primary {
|
|
outline: 2px solid var(--accent);
|
|
}
|
|
|
|
.tile__label {
|
|
display: block;
|
|
color: var(--text-muted);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.tile__value {
|
|
display: block;
|
|
font-size: 1.5rem;
|
|
font-variant-numeric: tabular-nums;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.stats {
|
|
display: grid;
|
|
gap: 0.25rem var(--gap);
|
|
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
|
|
}
|
|
|
|
.stats > div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.stats dt {
|
|
color: var(--text-muted);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.stats dd {
|
|
font-variant-numeric: tabular-nums;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ----------------------------------------------------------------- price */
|
|
|
|
.price {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.price__label {
|
|
color: var(--text-muted);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.price__row {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.price__input {
|
|
flex: 1;
|
|
min-width: 0;
|
|
text-align: center;
|
|
font-size: 1.25rem;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.price__slider {
|
|
width: 100%;
|
|
height: 32px; /* easy to grab on touch screens */
|
|
accent-color: var(--accent);
|
|
}
|
|
|
|
/* ------------------------------------------------- generators & upgrades */
|
|
|
|
.cards {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--gap);
|
|
}
|
|
|
|
.card {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--gap);
|
|
padding: 0.75rem;
|
|
background: var(--surface-2);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.card__body {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.card__title {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.card__desc,
|
|
.card__meta {
|
|
color: var(--text-muted);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.card__meta {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* Narrow phones: the price drops under the text. */
|
|
@media (max-width: 479px) {
|
|
.card {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.card__body {
|
|
flex-basis: calc(100% - var(--icon-size) - var(--gap));
|
|
}
|
|
|
|
.card__price {
|
|
flex: 1 0 100%;
|
|
flex-direction: row;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
padding-top: 0.35rem;
|
|
border-top: 1px solid var(--border);
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
.segmented {
|
|
display: inline-flex;
|
|
border: 0;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.segmented label {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.segmented input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.segmented span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 36px;
|
|
padding: 0 0.7rem;
|
|
background: var(--surface-2);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.segmented input:checked + span {
|
|
background: var(--accent);
|
|
border-color: var(--accent);
|
|
color: var(--accent-contrast);
|
|
}
|
|
|
|
.segmented input:focus-visible + span {
|
|
outline: 3px solid var(--accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------- dialog */
|
|
|
|
.dialog {
|
|
width: min(40rem, calc(100vw - 2rem));
|
|
max-height: calc(100vh - 2rem);
|
|
padding: 0;
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.dialog::backdrop {
|
|
background: rgb(0 0 0 / 0.55);
|
|
}
|
|
|
|
.dialog__body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--gap);
|
|
padding: 1rem;
|
|
}
|
|
|
|
.dialog__subtitle {
|
|
margin-top: 0.5rem;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
/* ---------------------------------------------------------------- toasts */
|
|
|
|
.toasts {
|
|
position: fixed;
|
|
right: 1rem;
|
|
bottom: calc(1rem + env(safe-area-inset-bottom));
|
|
left: 1rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
pointer-events: none;
|
|
z-index: 10;
|
|
}
|
|
|
|
.toast {
|
|
max-width: 32rem;
|
|
padding: 0.7rem 1rem;
|
|
background: var(--text);
|
|
color: var(--bg);
|
|
border-radius: var(--radius);
|
|
box-shadow: 0 4px 16px rgb(0 0 0 / 0.3);
|
|
}
|
|
|
|
.toast--error {
|
|
background: var(--danger);
|
|
color: #fff;
|
|
}
|
|
|
|
/* ------------------------------------------------------- resource bar */
|
|
|
|
.res {
|
|
display: flex;
|
|
flex: 1 1 0;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.res .icon {
|
|
--icon-size: 1.75rem;
|
|
}
|
|
|
|
.res > div {
|
|
min-width: 0;
|
|
}
|
|
|
|
.res__label {
|
|
display: block;
|
|
overflow: hidden;
|
|
color: var(--text-muted);
|
|
font-size: 0.7rem;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.res strong {
|
|
display: block;
|
|
overflow: hidden;
|
|
font-size: 1.05rem;
|
|
font-variant-numeric: tabular-nums;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.res--primary strong {
|
|
color: var(--accent);
|
|
}
|
|
|
|
@media (max-width: 519px) {
|
|
.resourcebar {
|
|
gap: 0.5rem;
|
|
padding: 0.35rem 0.75rem;
|
|
}
|
|
|
|
.res .icon {
|
|
display: none;
|
|
}
|
|
|
|
.res strong {
|
|
font-size: 0.95rem;
|
|
}
|
|
}
|
|
|
|
/* ----------------------------------------------------------------- tabs */
|
|
|
|
.tab {
|
|
position: relative;
|
|
width: 100%;
|
|
min-height: 44px;
|
|
padding: 0.4rem 1rem;
|
|
background: var(--surface-2);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
cursor: pointer;
|
|
text-align: left;
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
.tab[aria-current='page'] {
|
|
background: var(--accent);
|
|
border-color: var(--accent);
|
|
color: var(--accent-contrast);
|
|
font-weight: 600;
|
|
}
|
|
|
|
@media (min-width: 760px) {
|
|
.tab {
|
|
width: auto;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
/* A dot: something new (newly unlocked) or waiting (an opportunity to seize). */
|
|
.tab--new .tab::after,
|
|
.tab--alert .tab::after {
|
|
position: absolute;
|
|
top: 6px;
|
|
right: 6px;
|
|
width: 10px;
|
|
height: 10px;
|
|
background: var(--danger);
|
|
border: 2px solid var(--surface);
|
|
border-radius: 50%;
|
|
content: '';
|
|
}
|
|
|
|
.tab--alert .tab::after {
|
|
animation: pulse 1s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
50% {
|
|
transform: scale(1.5);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.tab--alert .tab::after {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
/* ------------------------------------------------------------ gains/losses */
|
|
|
|
.pos {
|
|
color: var(--good);
|
|
}
|
|
|
|
.neg {
|
|
color: var(--bad);
|
|
}
|
|
|
|
.badge.pos,
|
|
.badge.neg {
|
|
background: transparent;
|
|
border: 1px solid currentColor;
|
|
}
|
|
|
|
/* --------------------------------------------------- cards with actions */
|
|
|
|
.card--stack {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.card__row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--gap);
|
|
}
|
|
|
|
.card__actions {
|
|
display: flex;
|
|
gap: var(--gap);
|
|
}
|
|
|
|
.card__actions .btn {
|
|
flex: 1;
|
|
}
|
|
|
|
.card--done {
|
|
border-left: 4px solid var(--good);
|
|
}
|
|
|
|
.card--locked {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.cards--grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
|
|
}
|
|
|
|
.panel--low .panel__title { color: var(--good); }
|
|
.panel--high .panel__title { color: var(--bad); }
|
|
|
|
/* ---------------------------------------------- contracts, gamble, legacy */
|
|
|
|
.callout {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.35rem;
|
|
padding: 0.75rem;
|
|
background: var(--surface-2);
|
|
border: 2px solid var(--accent);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.progress {
|
|
width: 100%;
|
|
height: 14px;
|
|
accent-color: var(--accent);
|
|
}
|
|
|
|
.log {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.log__entry {
|
|
padding: 0.3rem 0.6rem;
|
|
background: var(--surface-2);
|
|
border-left: 4px solid var(--border);
|
|
border-radius: 4px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.log__entry--win,
|
|
.log__entry--jackpot {
|
|
border-left-color: var(--good);
|
|
}
|
|
|
|
.log__entry--lose,
|
|
.log__entry--crash {
|
|
border-left-color: var(--bad);
|
|
}
|
|
|
|
.log__entry--jackpot,
|
|
.log__entry--crash {
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* A hint under a big figure goes on its own line (rate under research points, bonus under chips). */
|
|
.tile .hint {
|
|
display: block;
|
|
}
|
|
|
|
/* ------------------------------------------------ blocks you click to buy */
|
|
|
|
.card--buy {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
touch-action: manipulation;
|
|
-webkit-tap-highlight-color: transparent;
|
|
transition:
|
|
box-shadow 0.12s ease,
|
|
transform 0.08s ease,
|
|
opacity 0.12s ease;
|
|
}
|
|
|
|
/* A soft outline on hover (only where there is a real hover: not on touch screens). */
|
|
@media (hover: hover) {
|
|
.card--buy:hover:not(.is-disabled) {
|
|
box-shadow: 0 0 0 2px var(--accent);
|
|
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);
|
|
}
|
|
}
|
|
|
|
.card--buy:active:not(.is-disabled) {
|
|
transform: scale(0.985);
|
|
}
|
|
|
|
.card--buy.is-disabled {
|
|
cursor: not-allowed;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* What it costs, on the right of the block; a fixed width keeps the figures aligned. */
|
|
.card__price {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
align-self: center;
|
|
gap: 0.1rem;
|
|
min-width: 6.5rem;
|
|
margin-left: auto;
|
|
font-variant-numeric: tabular-nums;
|
|
text-align: right;
|
|
}
|
|
|
|
.card__price strong {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.card__price small {
|
|
color: var(--text-muted);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.card__hint {
|
|
align-self: center;
|
|
margin-right: auto;
|
|
color: var(--text-muted);
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
/* --------------------------------------------------- purchase animations */
|
|
/* Quick on purpose (0.15 to 0.25 s): feedback, not a show. */
|
|
|
|
@keyframes fx-pop {
|
|
0% {
|
|
transform: scale(1);
|
|
box-shadow: 0 0 0 0 var(--accent);
|
|
}
|
|
40% {
|
|
transform: scale(1.04);
|
|
box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 45%, transparent);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
box-shadow: 0 0 0 0 transparent;
|
|
}
|
|
}
|
|
|
|
@keyframes fx-bump {
|
|
50% {
|
|
transform: scale(1.35);
|
|
}
|
|
}
|
|
|
|
@keyframes fx-spend {
|
|
from {
|
|
color: var(--bad);
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
|
|
@keyframes floater {
|
|
from {
|
|
opacity: 1;
|
|
transform: translate(-50%, -100%);
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
transform: translate(-50%, calc(-100% - 26px));
|
|
}
|
|
}
|
|
|
|
.fx-pop {
|
|
animation: fx-pop 0.2s ease-out;
|
|
}
|
|
|
|
.fx-bump {
|
|
animation: fx-bump 0.15s ease-out;
|
|
}
|
|
|
|
.fx-spend {
|
|
animation: fx-spend 0.2s ease-out;
|
|
}
|
|
|
|
.floater {
|
|
position: fixed;
|
|
z-index: 20;
|
|
color: var(--accent);
|
|
font-weight: 700;
|
|
pointer-events: none;
|
|
text-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
|
|
animation: floater 0.25s ease-out forwards;
|
|
}
|
|
|
|
.floater--good {
|
|
color: var(--good);
|
|
}
|
|
|
|
.floater--bad {
|
|
color: var(--bad);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.fx-pop,
|
|
.fx-bump,
|
|
.fx-spend {
|
|
animation: none;
|
|
}
|
|
|
|
.floater {
|
|
display: none;
|
|
}
|
|
|
|
.card--buy {
|
|
transition: none;
|
|
}
|
|
}
|