105 lines
8.8 KiB
Plaintext
105 lines
8.8 KiB
Plaintext
:root {
|
|
--canvas: #101419;
|
|
--panel: #20282f;
|
|
--panel-strong: #2b343c;
|
|
--cyan: #54d5e8;
|
|
--amber: #f1aa3e;
|
|
--red: #e65745;
|
|
--text: #edf2f4;
|
|
--muted: #9eabb2;
|
|
color: var(--text);
|
|
}
|
|
|
|
.safe-area, .screen { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
|
|
.screen { background-color: var(--canvas); }
|
|
.hidden { display: none; }
|
|
.title-screen { overflow: hidden; }
|
|
.title-background { position: absolute; left: 0; right: 0; top: 0; bottom: 0; -unity-background-scale-mode: scale-and-crop; }
|
|
.title-shade { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(5, 8, 10, 0.68); }
|
|
.title-content { position: absolute; left: 6%; top: 10%; bottom: 7%; width: 48%; justify-content: flex-end; }
|
|
.title-heading { font-size: 92px; -unity-font-style: bold; color: var(--text); margin-bottom: 8px; }
|
|
.title-subtitle { font-size: 26px; color: var(--cyan); margin-bottom: 46px; white-space: normal; }
|
|
.title-actions { width: 420px; max-width: 100%; }
|
|
|
|
.button, .icon-button, .top-button, .bottom-button, .machine-button, .rule-up {
|
|
height: 56px;
|
|
margin-bottom: 10px;
|
|
border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px;
|
|
border-left-color: #47535c; border-right-color: #47535c; border-top-color: #47535c; border-bottom-color: #47535c;
|
|
border-radius: 4px;
|
|
background-color: var(--panel-strong);
|
|
color: var(--text);
|
|
font-size: 18px;
|
|
-unity-font-style: bold;
|
|
}
|
|
.button:hover, .top-button:hover, .bottom-button:hover, .machine-button:hover, .rule-up:hover, .icon-button:hover { background-color: #39454e; border-left-color: var(--cyan); border-right-color: var(--cyan); border-top-color: var(--cyan); border-bottom-color: var(--cyan); }
|
|
.button:active, .top-button:active, .bottom-button:active, .machine-button:active, .rule-up:active, .icon-button:active { background-color: #151b20; }
|
|
.button-large { height: 68px; font-size: 22px; }
|
|
.button-primary { background-color: var(--amber); color: var(--canvas); border-left-color: #ffc66d; border-right-color: #ffc66d; border-top-color: #ffc66d; border-bottom-color: #ffc66d; }
|
|
.button-cyan { background-color: var(--cyan); color: var(--canvas); border-left-color: #9aedf7; border-right-color: #9aedf7; border-top-color: #9aedf7; border-bottom-color: #9aedf7; }
|
|
.button-quiet { height: 46px; }
|
|
.danger-button { background-color: var(--red); color: white; border-left-color: #ff8577; border-right-color: #ff8577; border-top-color: #ff8577; border-bottom-color: #ff8577; }
|
|
.ip-input { height: 52px; margin-bottom: 10px; background-color: var(--panel-strong); color: var(--text); font-size: 18px; border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px; border-left-color: #47535c; border-right-color: #47535c; border-top-color: #47535c; border-bottom-color: #47535c; border-radius: 4px; }
|
|
.ip-input .unity-base-text-field__input { background-color: transparent; color: var(--text); padding-left: 12px; }
|
|
|
|
.header-bar { height: 82px; flex-direction: row; align-items: center; background-color: var(--panel-strong); padding-left: 22px; padding-right: 22px; }
|
|
.icon-button { width: 64px; height: 50px; margin: 0 28px 0 0; font-size: 28px; }
|
|
.header-title { font-size: 36px; -unity-font-style: bold; }
|
|
.lobby-status { position: absolute; left: 12%; right: 12%; top: 18%; height: 60px; color: var(--cyan); font-size: 24px; -unity-text-align: middle-center; }
|
|
.lobby-players { position: absolute; left: 18%; right: 18%; top: 34%; bottom: 33%; font-size: 32px; white-space: normal; }
|
|
.lobby-actions { position: absolute; left: 25%; right: 25%; bottom: 12%; height: 72px; flex-direction: row; }
|
|
.lobby-actions .button { flex-grow: 1; margin-left: 8px; margin-right: 8px; }
|
|
|
|
.factory-screen { background-color: rgba(0, 0, 0, 0); }
|
|
.grid-input-surface { position: absolute; left: 280px; right: 360px; top: 74px; bottom: 128px; background-color: rgba(0, 0, 0, 0); }
|
|
.top-bar { position: absolute; left: 0; right: 0; top: 0; height: 74px; flex-direction: row; align-items: center; background-color: var(--panel-strong); padding-left: 16px; padding-right: 8px; }
|
|
.top-stat { height: 74px; -unity-text-align: middle-center; font-size: 20px; white-space: nowrap; overflow: hidden; }
|
|
.core-stat { width: 12%; -unity-text-align: middle-left; -unity-font-style: bold; }
|
|
.money-stat { width: 12%; color: var(--amber); }
|
|
.phase-stat { width: 17%; color: var(--cyan); -unity-font-style: bold; }
|
|
.timer-stat { width: 7%; font-size: 25px; -unity-font-style: bold; }
|
|
.network-stat { flex-grow: 1; color: var(--muted); font-size: 15px; }
|
|
.top-button { height: 48px; min-width: 68px; margin: 0 4px 0 0; }
|
|
.compact-button { min-width: 48px; width: 50px; font-size: 16px; }
|
|
.panel { position: absolute; top: 74px; bottom: 128px; background-color: var(--panel); border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px; border-left-color: #35414a; border-right-color: #35414a; border-top-color: #35414a; border-bottom-color: #35414a; }
|
|
.left-panel { left: 0; width: 280px; padding: 12px; }
|
|
.right-panel { right: 0; width: 360px; padding: 12px; }
|
|
.panel-title { height: 42px; font-size: 24px; -unity-font-style: bold; -unity-text-align: middle-left; }
|
|
.build-palette { flex-grow: 1; }
|
|
.build-palette .unity-scroll-view__content-container { padding-right: 4px; }
|
|
.machine-button { height: 68px; flex-direction: row; align-items: center; justify-content: flex-start; padding-left: 6px; margin-bottom: 7px; }
|
|
.machine-icon { width: 52px; height: 52px; margin-right: 10px; -unity-background-scale-mode: scale-to-fit; }
|
|
.machine-button Label { font-size: 17px; -unity-font-style: bold; color: var(--text); }
|
|
.selected-machine { border-left-width: 3px; border-left-color: var(--amber); background-color: #394149; }
|
|
.selected-remove { border-left-width: 3px; border-left-color: white; }
|
|
.target-text { height: 150px; padding: 10px; font-size: 22px; -unity-font-style: bold; white-space: normal; }
|
|
.rules-list { flex-grow: 1; }
|
|
.rule-slot { position: relative; flex-grow: 1; min-height: 94px; margin-bottom: 6px; padding: 10px; padding-right: 48px; background-color: var(--panel-strong); border-radius: 4px; }
|
|
.rule-name { height: 30px; font-size: 17px; -unity-font-style: bold; overflow: hidden; }
|
|
.rule-description { flex-grow: 1; color: var(--muted); font-size: 13px; white-space: normal; overflow: hidden; }
|
|
.rule-up { position: absolute; right: 8px; bottom: 8px; width: 34px; height: 34px; margin: 0; font-size: 18px; }
|
|
.cyan-text { color: var(--cyan); }
|
|
.amber-text { color: var(--amber); }
|
|
.bottom-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 128px; flex-direction: row; align-items: center; background-color: var(--panel-strong); padding-left: 22px; padding-right: 22px; }
|
|
.selection-text { width: 38%; font-size: 21px; -unity-font-style: bold; white-space: normal; }
|
|
.error-text { flex-grow: 1; color: var(--red); font-size: 16px; -unity-text-align: middle-center; white-space: normal; }
|
|
.bottom-button { width: 150px; height: 64px; margin: 0 0 0 10px; }
|
|
.icon-bottom-button { width: 76px; font-size: 28px; }
|
|
|
|
.reward-screen, .end-screen { align-items: center; justify-content: center; }
|
|
.reward-title { position: absolute; top: 7%; left: 8%; right: 8%; height: 72px; font-size: 44px; -unity-font-style: bold; -unity-text-align: middle-center; }
|
|
.reward-subtitle { position: absolute; top: 15%; left: 10%; right: 10%; height: 48px; font-size: 21px; color: var(--cyan); -unity-text-align: middle-center; }
|
|
.reward-cards { position: absolute; left: 7%; right: 7%; top: 25%; bottom: 12%; flex-direction: row; }
|
|
.reward-card { position: relative; flex-grow: 1; flex-basis: 0; margin-left: 12px; margin-right: 12px; padding: 24px; padding-top: 32px; background-color: var(--panel-strong); border-radius: 6px; border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 1px; border-left-color: #46545d; border-right-color: #46545d; border-top-color: #46545d; border-bottom-color: #46545d; }
|
|
.card-stripe { position: absolute; left: 0; right: 0; top: 0; height: 8px; }
|
|
.cyan-bg { background-color: var(--cyan); }
|
|
.amber-bg { background-color: var(--amber); }
|
|
.reward-category { height: 36px; color: var(--muted); font-size: 16px; }
|
|
.reward-name { height: 74px; font-size: 31px; -unity-font-style: bold; white-space: normal; }
|
|
.reward-description { flex-grow: 1; font-size: 20px; white-space: normal; color: var(--text); }
|
|
.reward-card .button { height: 64px; margin: 0; }
|
|
.end-title { width: 80%; font-size: 62px; -unity-font-style: bold; -unity-text-align: middle-center; white-space: normal; }
|
|
.end-summary { width: 60%; height: 180px; font-size: 28px; color: var(--cyan); -unity-text-align: middle-center; white-space: normal; }
|
|
.end-actions { width: 680px; max-width: 80%; height: 72px; flex-direction: row; }
|
|
.end-actions .button { flex-grow: 1; margin-left: 8px; margin-right: 8px; }
|