Polishing, CSS Improvements, Improve dark mode
This commit is contained in:
tobspr
parent
5bde508f86
commit
7d6af359a1
Binary file not shown.
|
Before Width: | Height: | Size: 4.6 KiB After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.7 KiB After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.7 KiB After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.5 KiB After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.9 KiB After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.4 KiB After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.8 KiB After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.3 KiB After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 KiB After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.8 KiB After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.0 KiB After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.7 KiB After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.8 KiB After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.9 KiB After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.7 KiB After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.1 KiB After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 825 B After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 756 B After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 731 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 728 B After Width: | Height: | Size: 385 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 927 B After Width: | Height: | Size: 546 B |
|
|
@ -392,13 +392,18 @@ canvas {
|
|||
&::after {
|
||||
content: " ";
|
||||
background: uiResource("loading.svg") center center / contain no-repeat;
|
||||
@include S(width, 15px);
|
||||
@include S(height, 15px);
|
||||
@include S(margin-top, 1px);
|
||||
@include S(margin-left, 5px);
|
||||
@include S(width, 35px);
|
||||
@include S(height, 35px);
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@include InlineAnimation(1.5s ease-in-out infinite) {
|
||||
50% {
|
||||
transform: scale(1.2) rotate(160deg);
|
||||
}
|
||||
}
|
||||
|
||||
@include DarkThemeOverride {
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -463,10 +468,16 @@ canvas {
|
|||
justify-content: center;
|
||||
flex-direction: column;
|
||||
.loadingImage {
|
||||
background: uiResource("loading.svg") center center / #{D(60px)} no-repeat;
|
||||
background: uiResource("loading.svg") center center / #{D(40px)} no-repeat;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
|
||||
@include InlineAnimation(1.5s ease-in-out infinite) {
|
||||
50% {
|
||||
transform: scale(1.2) rotate(160deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hint {
|
||||
|
|
@ -476,6 +487,10 @@ canvas {
|
|||
@include S(bottom, 60px);
|
||||
@include Text;
|
||||
color: #666;
|
||||
|
||||
@include DarkThemeOverride() {
|
||||
color: lighten($darkModeGameBackground, 50);
|
||||
}
|
||||
}
|
||||
|
||||
.loadingStatus {
|
||||
|
|
@ -486,6 +501,11 @@ canvas {
|
|||
@include Text;
|
||||
@include PlainText;
|
||||
color: #aaa;
|
||||
|
||||
@include DarkThemeOverride {
|
||||
color: lighten($darkModeGameBackground, 20);
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
|
@ -579,6 +599,13 @@ canvas {
|
|||
background-color: lighten($themeColor, 15);
|
||||
}
|
||||
}
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background-color: $darkModeGameBackground !important;
|
||||
&.checked {
|
||||
background-color: $colorBlueBright !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rangeInputContainer {
|
||||
|
|
@ -608,6 +635,16 @@ input.rangeInput {
|
|||
@include S(border-radius, 8px);
|
||||
}
|
||||
|
||||
@include DarkThemeOverride {
|
||||
&::-webkit-slider-runnable-track {
|
||||
background-color: $darkModeControlsBackground;
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
box-shadow: inset 0 0 0 D(10px) #eee;
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
|
|
|
|||
|
|
@ -1,107 +1,112 @@
|
|||
.ingame_buildingsToolbar {
|
||||
position: fixed;
|
||||
@include S(bottom, 0px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
// NOTE: This flex rule may not be necessary. Need to find out intent.
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: transparent;
|
||||
border-bottom-width: 0;
|
||||
transition: transform 120ms ease-in-out;
|
||||
will-change: transform;
|
||||
|
||||
background-color: rgba(mix(#ddd, $colorBlueBright, 90%), 0.5);
|
||||
backdrop-filter: blur(D(3px));
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background-color: #222428;
|
||||
}
|
||||
|
||||
&:not(.visible) {
|
||||
transform: translateX(-50%) translateY(#{D(100px)});
|
||||
}
|
||||
|
||||
@include S(border-top-left-radius, $globalBorderRadius);
|
||||
@include S(border-top-right-radius, $globalBorderRadius);
|
||||
|
||||
.buildings {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
|
||||
.building {
|
||||
color: $accentColorDark;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include S(padding, 5px);
|
||||
@include S(padding-bottom, 1px);
|
||||
@include S(width, 35px);
|
||||
@include S(height, 40px);
|
||||
|
||||
background: center center / 65% no-repeat;
|
||||
|
||||
&:not(.unlocked) {
|
||||
@include S(width, 20px);
|
||||
opacity: 0.15;
|
||||
background-image: none !important;
|
||||
|
||||
&::before {
|
||||
content: " ";
|
||||
background: uiResource("locked_building.png") center center / #{D(20px)} #{D(20px)}
|
||||
no-repeat;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 4;
|
||||
}
|
||||
}
|
||||
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
|
||||
&.unlocked {
|
||||
pointer-events: all;
|
||||
transition: all 50ms ease-in-out;
|
||||
transition-property: background-color, transform;
|
||||
cursor: pointer;
|
||||
will-change: transform;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: $accentColorDark;
|
||||
opacity: 0;
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
transform: scale(1.05);
|
||||
|
||||
&::before {
|
||||
background-color: $colorBlueBright;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.keybinding {
|
||||
color: #111;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ingame_buildingsToolbar {
|
||||
position: fixed;
|
||||
@include S(bottom, 0px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
// NOTE: This flex rule may not be necessary. Need to find out intent.
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: transparent;
|
||||
border-bottom-width: 0;
|
||||
transition: transform 120ms ease-in-out;
|
||||
will-change: transform;
|
||||
|
||||
backdrop-filter: blur(D(5px));
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background-color: darken($darkModeGameBackground, 15);
|
||||
}
|
||||
|
||||
&:not(.visible) {
|
||||
transform: translateX(-50%) translateY(#{D(100px)});
|
||||
}
|
||||
|
||||
@include S(border-top-left-radius, $globalBorderRadius);
|
||||
@include S(border-top-right-radius, $globalBorderRadius);
|
||||
|
||||
.buildings {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
|
||||
.building {
|
||||
color: $accentColorDark;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include S(padding, 5px);
|
||||
@include S(padding-bottom, 1px);
|
||||
@include S(width, 35px);
|
||||
@include S(height, 40px);
|
||||
|
||||
background: center center / 65% no-repeat;
|
||||
|
||||
&:not(.unlocked) {
|
||||
@include S(width, 20px);
|
||||
opacity: 0.15;
|
||||
background-image: none !important;
|
||||
|
||||
&::before {
|
||||
content: " ";
|
||||
background: uiResource("locked_building.png") center center / #{D(20px)} #{D(20px)}
|
||||
no-repeat;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 4;
|
||||
}
|
||||
}
|
||||
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
|
||||
&.unlocked {
|
||||
pointer-events: all;
|
||||
transition: all 50ms ease-in-out;
|
||||
transition-property: background-color, transform;
|
||||
cursor: pointer;
|
||||
will-change: transform;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: $accentColorDark;
|
||||
opacity: 0;
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
|
||||
&.pressed {
|
||||
transform: scale(0.9) !important;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
// transform: scale(1.05);
|
||||
|
||||
&::before {
|
||||
background-color: rgba($colorBlueBright, 0.2);
|
||||
opacity: 1;
|
||||
border-top: D(3px) solid $colorBlueBright;
|
||||
@include S(top, -3px);
|
||||
}
|
||||
|
||||
.keybinding {
|
||||
color: #111;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,231 +1,233 @@
|
|||
.ingameDialog {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: all;
|
||||
background: $modalDialogBg;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@include InlineAnimation(0.12s ease-in-out) {
|
||||
0% {
|
||||
background-color: transparent;
|
||||
opacity: 0.5;
|
||||
}
|
||||
100% {
|
||||
background-color: $modalDialogBg;
|
||||
}
|
||||
}
|
||||
|
||||
$darkModeDialogBg: darken($darkModeGameBackground, 10);
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background: rgba($darkModeDialogBg, 0.9);
|
||||
@include InlineAnimation(0.12s ease-in-out) {
|
||||
0% {
|
||||
background-color: transparent;
|
||||
opacity: 0.5;
|
||||
}
|
||||
100% {
|
||||
background-color: rgba($darkModeDialogBg, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
> .dialogInner.optionChooserDialog .optionParent {
|
||||
.option {
|
||||
background: #3d3f42;
|
||||
|
||||
&:hover {
|
||||
background-color: #424348;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $colorBlueBright;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.visible {
|
||||
.dialogInner {
|
||||
opacity: 1;
|
||||
}
|
||||
backdrop-filter: blur(D(3px));
|
||||
}
|
||||
|
||||
.dialogInner {
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.loadingDialog {
|
||||
* {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
> .dialogInner {
|
||||
background: #fff;
|
||||
max-height: calc(100vh - #{D(40px)});
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@include S(padding, 12px);
|
||||
pointer-events: all;
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background: #333438;
|
||||
}
|
||||
|
||||
&.optionChooserDialog {
|
||||
.optionParent {
|
||||
display: grid;
|
||||
@include S(grid-gap, 5px);
|
||||
grid-template-columns: 1fr 1fr;
|
||||
.option {
|
||||
pointer-events: all;
|
||||
cursor: pointer;
|
||||
@include S(padding, 10px);
|
||||
background: #eee;
|
||||
transition: background-color 0.12s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $colorBlueBright;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .title {
|
||||
@include Heading;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: 1fr auto;
|
||||
@include S(margin-bottom, 10px);
|
||||
|
||||
@include DarkThemeInvert();
|
||||
> .closeButton {
|
||||
opacity: 0.7;
|
||||
@include S(width, 20px);
|
||||
@include S(height, 20px);
|
||||
background: uiResource("icons/close.png") center center / 80% no-repeat;
|
||||
cursor: pointer;
|
||||
pointer-events: all;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
&:hover {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .content {
|
||||
@include PlainText;
|
||||
overflow-y: auto;
|
||||
pointer-events: all;
|
||||
@include S(width, 350px);
|
||||
|
||||
@include DarkThemeOverride {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $colorBlueBright;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.keybinding {
|
||||
position: relative;
|
||||
background: #eee;
|
||||
@include PlainText;
|
||||
height: unset;
|
||||
margin: 1px 0;
|
||||
}
|
||||
|
||||
input {
|
||||
background: #eee;
|
||||
color: #333438;
|
||||
width: 100%;
|
||||
|
||||
&.errored {
|
||||
background-color: rgb(250, 206, 206);
|
||||
}
|
||||
}
|
||||
|
||||
ul.bucketList {
|
||||
padding-left: 30px;
|
||||
|
||||
li {
|
||||
display: list-item;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .buttons {
|
||||
@include S(margin-top, 15px);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
> button {
|
||||
@include S(margin-left, 8px);
|
||||
@include Text;
|
||||
@include S(min-width, 60px);
|
||||
@include S(padding, 5px, 15px);
|
||||
|
||||
transition: opacity 0.12s ease-in-out;
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
&.good {
|
||||
background-color: $colorGreenBright;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.bad {
|
||||
background-color: $colorRedBright;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.timedButton {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: unset;
|
||||
z-index: 5;
|
||||
content: " ";
|
||||
display: inline-block;
|
||||
background: rgba(#fff, 0.6);
|
||||
@include InlineAnimation(5s linear) {
|
||||
0% {
|
||||
width: 100%;
|
||||
}
|
||||
100% {
|
||||
width: 0%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ingameDialog {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: all;
|
||||
background: $modalDialogBg;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@include InlineAnimation(0.12s ease-in-out) {
|
||||
0% {
|
||||
background-color: transparent;
|
||||
opacity: 0.5;
|
||||
}
|
||||
100% {
|
||||
background-color: $modalDialogBg;
|
||||
}
|
||||
}
|
||||
|
||||
$darkModeDialogBg: darken($darkModeGameBackground, 5);
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background: rgba($darkModeDialogBg, 0.9);
|
||||
@include InlineAnimation(0.12s ease-in-out) {
|
||||
0% {
|
||||
background-color: transparent;
|
||||
opacity: 0.5;
|
||||
}
|
||||
100% {
|
||||
background-color: rgba($darkModeDialogBg, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
> .dialogInner.optionChooserDialog .optionParent {
|
||||
.option {
|
||||
background: $darkModeControlsBackground;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($darkModeControlsBackground, 5);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: $colorBlueBright;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.visible {
|
||||
.dialogInner {
|
||||
opacity: 1;
|
||||
}
|
||||
backdrop-filter: blur(D(3px));
|
||||
}
|
||||
|
||||
.dialogInner {
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.loadingDialog {
|
||||
* {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
> .dialogInner {
|
||||
background: #fff;
|
||||
max-height: calc(100vh - #{D(40px)});
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@include S(padding, 12px);
|
||||
pointer-events: all;
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background: darken($darkModeControlsBackground, 5);
|
||||
}
|
||||
|
||||
&.optionChooserDialog {
|
||||
.optionParent {
|
||||
display: grid;
|
||||
@include S(grid-gap, 5px);
|
||||
grid-template-columns: 1fr 1fr;
|
||||
.option {
|
||||
pointer-events: all;
|
||||
cursor: pointer;
|
||||
@include S(padding, 10px);
|
||||
|
||||
background: #eee;
|
||||
|
||||
transition: background-color 0.12s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: #e7e7e7;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: $colorBlueBright;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .title {
|
||||
@include Heading;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: 1fr auto;
|
||||
@include S(margin-bottom, 10px);
|
||||
|
||||
@include DarkThemeInvert();
|
||||
> .closeButton {
|
||||
opacity: 0.7;
|
||||
@include S(width, 20px);
|
||||
@include S(height, 20px);
|
||||
background: uiResource("icons/close.png") center center / 80% no-repeat;
|
||||
cursor: pointer;
|
||||
pointer-events: all;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
&:hover {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .content {
|
||||
@include PlainText;
|
||||
overflow-y: auto;
|
||||
pointer-events: all;
|
||||
@include S(width, 350px);
|
||||
|
||||
@include DarkThemeOverride {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $colorBlueBright;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.keybinding {
|
||||
position: relative;
|
||||
background: #eee;
|
||||
@include PlainText;
|
||||
height: unset;
|
||||
margin: 1px 0;
|
||||
}
|
||||
|
||||
input {
|
||||
background: #eee;
|
||||
color: #333438;
|
||||
width: 100%;
|
||||
|
||||
&.errored {
|
||||
background-color: rgb(250, 206, 206);
|
||||
}
|
||||
}
|
||||
|
||||
ul.bucketList {
|
||||
padding-left: 30px;
|
||||
|
||||
li {
|
||||
display: list-item;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .buttons {
|
||||
@include S(margin-top, 15px);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
> button {
|
||||
@include S(margin-left, 8px);
|
||||
@include Text;
|
||||
@include S(min-width, 60px);
|
||||
@include S(padding, 5px, 15px);
|
||||
|
||||
transition: opacity 0.12s ease-in-out;
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
&.good {
|
||||
background-color: $colorGreenBright;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.bad {
|
||||
background-color: $colorRedBright;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.timedButton {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: unset;
|
||||
z-index: 5;
|
||||
content: " ";
|
||||
display: inline-block;
|
||||
background: rgba(#fff, 0.6);
|
||||
@include InlineAnimation(5s linear) {
|
||||
0% {
|
||||
width: 100%;
|
||||
}
|
||||
100% {
|
||||
width: 0%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,122 +1,142 @@
|
|||
#ingame_HUD_GameMenu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
grid-auto-flow: column;
|
||||
@include S(top, 10px);
|
||||
@include S(right, 10px);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
@include S(grid-gap, 6px);
|
||||
|
||||
> .menuButtons {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
@include S(padding, 5px, 4px);
|
||||
justify-content: flex-end;
|
||||
@include S(margin-left, 20px);
|
||||
backdrop-filter: blur(D(1px));
|
||||
|
||||
> .button {
|
||||
@include S(width, 30px);
|
||||
@include S(height, 30px);
|
||||
display: inline-block;
|
||||
background: center center / 60% no-repeat;
|
||||
pointer-events: all;
|
||||
cursor: pointer;
|
||||
transition: all 0.12s ease-in-out;
|
||||
transition-property: opacity, transform;
|
||||
will-change: opacity;
|
||||
opacity: 0.9;
|
||||
@include S(margin-left, 5px);
|
||||
position: relative;
|
||||
// > .menuButtons {
|
||||
// position: relative;
|
||||
// display: flex;
|
||||
// flex-grow: 1;
|
||||
// @include S(padding, 5px, 4px);
|
||||
// justify-content: flex-end;
|
||||
// @include S(margin-left, 20px);
|
||||
|
||||
@include IncreasedClickArea(0px);
|
||||
// > .button {
|
||||
// @include S(width, 30px);
|
||||
// @include S(height, 30px);
|
||||
// display: inline-block;
|
||||
// background: center center / 60% no-repeat;
|
||||
// pointer-events: all;
|
||||
// cursor: pointer;
|
||||
// transition: all 0.12s ease-in-out;
|
||||
// transition-property: opacity, transform;
|
||||
// will-change: opacity;
|
||||
// opacity: 0.5;
|
||||
// &:hover {
|
||||
// opacity: 0.7;
|
||||
// }
|
||||
|
||||
@include DarkThemeInvert;
|
||||
// @include DarkThemeOverride {
|
||||
// opacity: 0.9;
|
||||
// &:hover {
|
||||
// opacity: 0.6;
|
||||
// }
|
||||
// }
|
||||
// @include S(margin-left, 5px);
|
||||
// position: relative;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
// @include IncreasedClickArea(0px);
|
||||
|
||||
&.save {
|
||||
background-image: uiResource("icons/save.png");
|
||||
@include MakeAnimationWrappedEvenOdd(0.5s ease-in-out) {
|
||||
0% {
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
// @include DarkThemeInvert;
|
||||
|
||||
70% {
|
||||
transform: scale(1.5, 1.5) rotate(20deg);
|
||||
opacity: 0.2;
|
||||
}
|
||||
// &.save {
|
||||
// background-image: uiResource("icons/save.png");
|
||||
//
|
||||
// }
|
||||
|
||||
85% {
|
||||
transform: scale(0.9, 0.9);
|
||||
opacity: 1;
|
||||
}
|
||||
// &.settings {
|
||||
// background-image: uiResource("icons/settings_menu_settings.png");
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
90% {
|
||||
transform: scale(1.1, 1.1);
|
||||
}
|
||||
}
|
||||
|
||||
&.saving {
|
||||
@include InlineAnimation(0.4s ease-in-out infinite) {
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
&.settings {
|
||||
background-image: uiResource("icons/settings.png");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buttonContainer button {
|
||||
> button,
|
||||
> .button {
|
||||
@include PlainText;
|
||||
color: #fff;
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
@include S(padding, 5px, 5px, 5px);
|
||||
|
||||
@include S(padding-left, 30px);
|
||||
@include S(margin-right, 3px);
|
||||
@include IncreasedClickArea(0px);
|
||||
@include ButtonText;
|
||||
@include S(min-height, 40px);
|
||||
background: green;
|
||||
@include S(width, 30px);
|
||||
@include S(height, 30px);
|
||||
|
||||
pointer-events: all;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: all 0.12s ease-in-out;
|
||||
transition-property: opacity, transform;
|
||||
display: inline-flex;
|
||||
background: center #{D(13px)} / #{D(20px)} no-repeat;
|
||||
background-color: $colorGreenBright;
|
||||
|
||||
&[data-button-id="shop"] {
|
||||
background-color: rgb(93, 103, 250);
|
||||
background-image: uiResource("icons/shop.png");
|
||||
background-size: #{D(18px)};
|
||||
display: inline-flex;
|
||||
background: center center / 70% no-repeat;
|
||||
grid-row: 1;
|
||||
|
||||
&.pressed {
|
||||
transform: scale(0.9) !important;
|
||||
}
|
||||
&[data-button-id="stats"] {
|
||||
background-color: rgb(85, 199, 138);
|
||||
|
||||
opacity: 0.5;
|
||||
&:hover {
|
||||
opacity: 0.9 !important;
|
||||
}
|
||||
|
||||
@include DarkThemeInvert;
|
||||
|
||||
&.shop {
|
||||
background-image: uiResource("icons/shop.png");
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
&.stats {
|
||||
background-image: uiResource("icons/statistics.png");
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
&.save {
|
||||
background-image: uiResource("icons/save.png");
|
||||
grid-column: 3;
|
||||
@include MakeAnimationWrappedEvenOdd(0.5s ease-in-out) {
|
||||
0% {
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: scale(1.5, 1.5) rotate(20deg);
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
85% {
|
||||
transform: scale(0.9, 0.9);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: scale(1.1, 1.1);
|
||||
}
|
||||
}
|
||||
|
||||
&.saving {
|
||||
@include InlineAnimation(0.4s ease-in-out infinite) {
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
&.settings {
|
||||
background-image: uiResource("icons/settings_menu_settings.png");
|
||||
grid-column: 4;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.keybinding {
|
||||
border: 0;
|
||||
color: #fff;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
bottom: unset;
|
||||
background: transparent;
|
||||
@include S(top, 0px);
|
||||
right: unset;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&:not(.hasBadge) .badge {
|
||||
|
|
@ -124,34 +144,27 @@
|
|||
}
|
||||
|
||||
&.hasBadge {
|
||||
transform-origin: 50% 0%;
|
||||
@include InlineAnimation(1s ease-in-out infinite) {
|
||||
&.shop {
|
||||
filter: none;
|
||||
background-image: uiResource("icons/shop_active.png");
|
||||
opacity: 0.9;
|
||||
}
|
||||
transform-origin: 50% 50%;
|
||||
@include InlineAnimation(0.8s ease-in-out infinite) {
|
||||
50% {
|
||||
transform: scale(1.02);
|
||||
transform: scale(1.3) rotate(6deg);
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
@include S(bottom, -8px);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
background: #333;
|
||||
transform: translate(-50%, -50%);
|
||||
@include PlainText;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@include S(min-width, 5px);
|
||||
@include S(height, 10px);
|
||||
@include S(padding, 1px, 3px, 2px);
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
border: #{D(1px)} solid #fff;
|
||||
@include InlineAnimation(1s ease-in-out infinite) {
|
||||
50% {
|
||||
transform: translateX(-50%) scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
color: #333438;
|
||||
backdrop-filter: blur(D(2px));
|
||||
backdrop-filter: blur(D(1px));
|
||||
padding: D(3px);
|
||||
|
||||
@include DarkThemeOverride {
|
||||
|
|
|
|||
|
|
@ -1,41 +1,61 @@
|
|||
#ingame_HUD_SettingsMenu {
|
||||
.statsElement {
|
||||
position: absolute;
|
||||
@include S(left, 30px);
|
||||
@include S(top, 30px);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
grid-template-rows: 1fr auto;
|
||||
flex-direction: column;
|
||||
|
||||
strong {
|
||||
text-transform: uppercase;
|
||||
@include PlainText;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
span {
|
||||
@include S(margin-bottom, 25px);
|
||||
@include Heading;
|
||||
}
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.buttons {
|
||||
display: grid;
|
||||
grid-auto-flow: row;
|
||||
@include S(grid-gap, 10px);
|
||||
background: rgba(0, 10, 20, 0.1);
|
||||
@include S(padding, 10px);
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
|
||||
button {
|
||||
background-color: #eee;
|
||||
color: #55585a;
|
||||
}
|
||||
}
|
||||
}
|
||||
#ingame_HUD_SettingsMenu {
|
||||
.statsElement {
|
||||
position: absolute;
|
||||
@include S(left, 30px);
|
||||
@include S(right, 30px);
|
||||
@include S(bottom, 30px);
|
||||
color: #fff;
|
||||
display: grid;
|
||||
grid-template-rows: auto auto;
|
||||
grid-auto-columns: 1fr;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
|
||||
strong {
|
||||
text-transform: uppercase;
|
||||
@include PlainText;
|
||||
opacity: 0.5;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
span {
|
||||
@include Heading;
|
||||
grid-row: 2;
|
||||
}
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.buttons {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
@include S(grid-gap, 50px);
|
||||
@include S(margin-top, -10px);
|
||||
|
||||
button {
|
||||
background: transparent;
|
||||
filter: invert(1);
|
||||
|
||||
background: uiResource("icons/settings_menu_play.png") center top / contain no-repeat;
|
||||
content: "";
|
||||
opacity: 0.8;
|
||||
@include S(width, 35px);
|
||||
@include S(height, 35px);
|
||||
|
||||
&.settings {
|
||||
background-image: uiResource("icons/settings_menu_settings.png");
|
||||
}
|
||||
|
||||
&.menu {
|
||||
background-image: uiResource("icons/settings_menu_exit.png");
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,320 +1,320 @@
|
|||
#ingame_HUD_Shop {
|
||||
.content {
|
||||
@include S(padding-right, 10px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@include S(width, 500px);
|
||||
|
||||
.upgrade {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
background: #eee;
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
@include S(margin-bottom, 4px);
|
||||
@include S(padding, 5px, 10px);
|
||||
@include S(grid-row-gap, 1px);
|
||||
@include S(height, 85px);
|
||||
grid-template-rows: #{D(20px)} auto;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background: #55585a;
|
||||
}
|
||||
|
||||
.title {
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 1 / 2;
|
||||
@include PlainText;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: flex-end;
|
||||
|
||||
@include DarkThemeOverride {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tier {
|
||||
@include S(margin-right, 9px);
|
||||
background: $colorGreenBright;
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
text-transform: uppercase;
|
||||
@include PlainText;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
@include S(min-width, 50px);
|
||||
@include S(padding, 0px, 5px);
|
||||
|
||||
&[data-tier="0"] {
|
||||
background-color: rgb(73, 186, 190);
|
||||
}
|
||||
&[data-tier="1"] {
|
||||
background-color: rgb(88, 110, 207);
|
||||
}
|
||||
&[data-tier="2"] {
|
||||
background-color: rgb(189, 100, 192);
|
||||
}
|
||||
&[data-tier="3"] {
|
||||
background-color: rgb(117, 192, 98);
|
||||
}
|
||||
&[data-tier="4"] {
|
||||
background-color: rgb(243, 77, 48);
|
||||
}
|
||||
&[data-tier="5"] {
|
||||
background-color: rgb(255, 209, 6);
|
||||
}
|
||||
&[data-tier="6"] {
|
||||
background-color: rgb(44, 41, 46);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include S(width, 40px);
|
||||
@include S(height, 40px);
|
||||
background: center center / 80% no-repeat;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 2 / 4;
|
||||
@include S(margin-right, 30px);
|
||||
@include S(margin-left, 10px);
|
||||
opacity: 0.32;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.description {
|
||||
grid-column: 2 / 4;
|
||||
grid-row: 1 / 2;
|
||||
@include PlainText;
|
||||
color: #aaa;
|
||||
align-self: start;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.requirements {
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 3 / 4;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
@include S(grid-gap, 9px);
|
||||
justify-content: start;
|
||||
|
||||
.requirement {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@include S(width, 70px);
|
||||
overflow: hidden;
|
||||
|
||||
button.pin {
|
||||
@include S(width, 12px);
|
||||
@include S(height, 12px);
|
||||
background: uiResource("icons/pin.png") center center / 95% no-repeat;
|
||||
position: absolute;
|
||||
@include S(top, 2px);
|
||||
@include S(right, 2px);
|
||||
opacity: 0.6;
|
||||
cursor: pointer;
|
||||
pointer-events: all;
|
||||
@include IncreasedClickArea(5px);
|
||||
transition: opacity 0.12s ease-in-out;
|
||||
|
||||
@include DarkThemeInvert;
|
||||
|
||||
$disabledOpacity: 0.2;
|
||||
$enabledOpacity: 0.6;
|
||||
|
||||
&:hover {
|
||||
opacity: $enabledOpacity + 0.1;
|
||||
}
|
||||
|
||||
&.alreadyPinned {
|
||||
opacity: $disabledOpacity !important;
|
||||
|
||||
&:hover {
|
||||
opacity: $disabledOpacity + 0.1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.isGoal {
|
||||
background: uiResource("icons/current_goal_marker.png") center center / 95%
|
||||
no-repeat;
|
||||
opacity: $disabledOpacity !important;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.pinned {
|
||||
opacity: $disabledOpacity;
|
||||
@include InlineAnimation(0.3s ease-in-out) {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
30% {
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
opacity: $disabledOpacity + 0.1;
|
||||
}
|
||||
}
|
||||
|
||||
&.unpinned {
|
||||
opacity: $enabledOpacity;
|
||||
@include InlineAnimation(0.3s ease-in-out) {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
30% {
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
opacity: $enabledOpacity + 0.1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.showInfo {
|
||||
@include S(width, 11px);
|
||||
@include S(height, 11px);
|
||||
background: uiResource("icons/info_button.png") center center / 95% no-repeat;
|
||||
position: absolute;
|
||||
@include S(top, 17px);
|
||||
@include S(right, 2.5px);
|
||||
opacity: 0.5;
|
||||
cursor: pointer;
|
||||
pointer-events: all;
|
||||
@include IncreasedClickArea(5px);
|
||||
transition: opacity 0.12s ease-in-out;
|
||||
@include DarkThemeInvert;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
canvas {
|
||||
@include S(width, 40px);
|
||||
@include S(height, 40px);
|
||||
}
|
||||
|
||||
.amount {
|
||||
@include S(margin-top, 4px);
|
||||
z-index: 10;
|
||||
@include SuperSmallText;
|
||||
letter-spacing: 0;
|
||||
background: #e2e4e6;
|
||||
|
||||
@include S(line-height, 13px);
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
@include S(padding, 1px, 0px, 2px);
|
||||
position: relative;
|
||||
text-align: center;
|
||||
@include S(min-width, 50px);
|
||||
// @include S(max-width, 100px);
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background: #333438;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.progressBar {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
z-index: -1;
|
||||
transition: all 0.2s ease-in-out;
|
||||
transition-property: width, background-color;
|
||||
background: #bdbfca;
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background: #8c8d96;
|
||||
}
|
||||
|
||||
&.complete {
|
||||
background-color: $colorGreenBright;
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background-color: $colorGreenBright;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.buy {
|
||||
grid-column: 3 / 4;
|
||||
grid-row: 3 / 4;
|
||||
align-self: center;
|
||||
justify-self: end;
|
||||
// @include S(padding, 4px, 5px);
|
||||
// @include PlainText;
|
||||
background-color: $colorGreenBright;
|
||||
color: #fff;
|
||||
|
||||
transition: all 0.2s ease-in-out;
|
||||
transition-property: background-color, opacity;
|
||||
|
||||
&:not(.buyable) {
|
||||
background-color: #aaa;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
&.buyable {
|
||||
@include InlineAnimation(1s ease-in-out infinite) {
|
||||
0% {
|
||||
}
|
||||
|
||||
50% {
|
||||
background-color: lighten($colorGreenBright, 10);
|
||||
}
|
||||
100% {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.maxLevel {
|
||||
button.buy {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
.requirements {
|
||||
display: none;
|
||||
}
|
||||
.description {
|
||||
color: $colorGreenBright;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#ingame_HUD_Shop {
|
||||
.content {
|
||||
@include S(padding-right, 10px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@include S(width, 500px);
|
||||
|
||||
.upgrade {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
background: #eee;
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
@include S(margin-bottom, 4px);
|
||||
@include S(padding, 5px, 10px);
|
||||
@include S(grid-row-gap, 1px);
|
||||
@include S(height, 85px);
|
||||
grid-template-rows: #{D(20px)} auto;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background: $darkModeControlsBackground;
|
||||
}
|
||||
|
||||
.title {
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 1 / 2;
|
||||
@include PlainText;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: flex-end;
|
||||
|
||||
@include DarkThemeOverride {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tier {
|
||||
@include S(margin-right, 9px);
|
||||
background: $colorGreenBright;
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
text-transform: uppercase;
|
||||
@include PlainText;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
@include S(min-width, 50px);
|
||||
@include S(padding, 0px, 5px);
|
||||
|
||||
&[data-tier="0"] {
|
||||
background-color: rgb(73, 186, 190);
|
||||
}
|
||||
&[data-tier="1"] {
|
||||
background-color: rgb(88, 110, 207);
|
||||
}
|
||||
&[data-tier="2"] {
|
||||
background-color: rgb(189, 100, 192);
|
||||
}
|
||||
&[data-tier="3"] {
|
||||
background-color: rgb(117, 192, 98);
|
||||
}
|
||||
&[data-tier="4"] {
|
||||
background-color: rgb(243, 77, 48);
|
||||
}
|
||||
&[data-tier="5"] {
|
||||
background-color: rgb(255, 209, 6);
|
||||
}
|
||||
&[data-tier="6"] {
|
||||
background-color: rgb(44, 41, 46);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include S(width, 40px);
|
||||
@include S(height, 40px);
|
||||
background: center center / 80% no-repeat;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
grid-column: 1 / 2;
|
||||
grid-row: 2 / 4;
|
||||
@include S(margin-right, 30px);
|
||||
@include S(margin-left, 10px);
|
||||
opacity: 0.32;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.description {
|
||||
grid-column: 2 / 4;
|
||||
grid-row: 1 / 2;
|
||||
@include PlainText;
|
||||
color: #aaa;
|
||||
align-self: start;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
.requirements {
|
||||
grid-column: 2 / 3;
|
||||
grid-row: 3 / 4;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
@include S(grid-gap, 9px);
|
||||
justify-content: start;
|
||||
|
||||
.requirement {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@include S(width, 70px);
|
||||
overflow: hidden;
|
||||
|
||||
button.pin {
|
||||
@include S(width, 12px);
|
||||
@include S(height, 12px);
|
||||
background: uiResource("icons/pin.png") center center / 95% no-repeat;
|
||||
position: absolute;
|
||||
@include S(top, 2px);
|
||||
@include S(right, 2px);
|
||||
opacity: 0.6;
|
||||
cursor: pointer;
|
||||
pointer-events: all;
|
||||
@include IncreasedClickArea(5px);
|
||||
transition: opacity 0.12s ease-in-out;
|
||||
|
||||
@include DarkThemeInvert;
|
||||
|
||||
$disabledOpacity: 0.2;
|
||||
$enabledOpacity: 0.6;
|
||||
|
||||
&:hover {
|
||||
opacity: $enabledOpacity + 0.1;
|
||||
}
|
||||
|
||||
&.alreadyPinned {
|
||||
opacity: $disabledOpacity !important;
|
||||
|
||||
&:hover {
|
||||
opacity: $disabledOpacity + 0.1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.isGoal {
|
||||
background: uiResource("icons/current_goal_marker.png") center center / 95%
|
||||
no-repeat;
|
||||
opacity: $disabledOpacity !important;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.pinned {
|
||||
opacity: $disabledOpacity;
|
||||
@include InlineAnimation(0.3s ease-in-out) {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
30% {
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
opacity: $disabledOpacity + 0.1;
|
||||
}
|
||||
}
|
||||
|
||||
&.unpinned {
|
||||
opacity: $enabledOpacity;
|
||||
@include InlineAnimation(0.3s ease-in-out) {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
30% {
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
opacity: $enabledOpacity + 0.1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.showInfo {
|
||||
@include S(width, 11px);
|
||||
@include S(height, 11px);
|
||||
background: uiResource("icons/info_button.png") center center / 95% no-repeat;
|
||||
position: absolute;
|
||||
@include S(top, 17px);
|
||||
@include S(right, 2.5px);
|
||||
opacity: 0.5;
|
||||
cursor: pointer;
|
||||
pointer-events: all;
|
||||
@include IncreasedClickArea(5px);
|
||||
transition: opacity 0.12s ease-in-out;
|
||||
@include DarkThemeInvert;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
canvas {
|
||||
@include S(width, 40px);
|
||||
@include S(height, 40px);
|
||||
}
|
||||
|
||||
.amount {
|
||||
@include S(margin-top, 4px);
|
||||
z-index: 10;
|
||||
@include SuperSmallText;
|
||||
letter-spacing: 0;
|
||||
background: #e2e4e6;
|
||||
|
||||
@include S(line-height, 13px);
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
@include S(padding, 1px, 0px, 2px);
|
||||
position: relative;
|
||||
text-align: center;
|
||||
@include S(min-width, 50px);
|
||||
// @include S(max-width, 100px);
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background: #333438;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.progressBar {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
z-index: -1;
|
||||
transition: all 0.2s ease-in-out;
|
||||
transition-property: width, background-color;
|
||||
background: #bdbfca;
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background: #8c8d96;
|
||||
}
|
||||
|
||||
&.complete {
|
||||
background-color: $colorGreenBright;
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background-color: $colorGreenBright;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.buy {
|
||||
grid-column: 3 / 4;
|
||||
grid-row: 3 / 4;
|
||||
align-self: center;
|
||||
justify-self: end;
|
||||
// @include S(padding, 4px, 5px);
|
||||
// @include PlainText;
|
||||
background-color: $colorGreenBright;
|
||||
color: #fff;
|
||||
|
||||
transition: all 0.2s ease-in-out;
|
||||
transition-property: background-color, opacity;
|
||||
|
||||
&:not(.buyable) {
|
||||
background-color: #aaa;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
&.buyable {
|
||||
@include InlineAnimation(1s ease-in-out infinite) {
|
||||
0% {
|
||||
}
|
||||
|
||||
50% {
|
||||
background-color: lighten($colorGreenBright, 10);
|
||||
}
|
||||
100% {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.maxLevel {
|
||||
button.buy {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
.requirements {
|
||||
display: none;
|
||||
}
|
||||
.description {
|
||||
color: $colorGreenBright;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,6 +49,10 @@
|
|||
|
||||
background-color: #44484a !important;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background-color: lighten($darkModeControlsBackground, 10) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.filtersDataSource,
|
||||
|
|
@ -110,10 +114,10 @@
|
|||
}
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background: #222428;
|
||||
background: $darkModeControlsBackground;
|
||||
|
||||
&.pinned {
|
||||
background: darken(#222428, 10);
|
||||
background: mix($darkModeControlsBackground, $colorBlueBright, 90%);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -159,6 +163,11 @@
|
|||
grid-column: 1 / 2;
|
||||
grid-row: 2 / 3;
|
||||
justify-self: end;
|
||||
color: #55595a;
|
||||
|
||||
@include DarkThemeOverride {
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -176,6 +185,10 @@
|
|||
align-self: center;
|
||||
text-align: right;
|
||||
color: #55595a;
|
||||
|
||||
@include DarkThemeOverride {
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
canvas.graph {
|
||||
|
|
|
|||
|
|
@ -21,6 +21,12 @@
|
|||
@include S(right, 20px);
|
||||
@include PlainText;
|
||||
text-align: center;
|
||||
|
||||
color: #666;
|
||||
|
||||
@include DarkThemeOverride() {
|
||||
color: lighten($darkModeGameBackground, 50);
|
||||
}
|
||||
}
|
||||
|
||||
#ingame_Canvas {
|
||||
|
|
|
|||
|
|
@ -1,71 +1,71 @@
|
|||
#state_KeybindingsState {
|
||||
.content {
|
||||
.topEntries {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
@include S(grid-gap, 5px);
|
||||
@include S(margin-bottom, 10px);
|
||||
}
|
||||
|
||||
.hint {
|
||||
display: block;
|
||||
background: #eee;
|
||||
@include S(padding, 4px);
|
||||
@include PlainText;
|
||||
}
|
||||
|
||||
.category {
|
||||
.entry {
|
||||
display: grid;
|
||||
@include S(margin-top, 2px);
|
||||
@include S(padding-top, 2px);
|
||||
@include S(grid-gap, 4px);
|
||||
grid-template-columns: 1fr #{D(100px)} auto auto;
|
||||
border-bottom: #{D(1px)} dotted #eee;
|
||||
color: #888c8f;
|
||||
.mapping {
|
||||
color: $colorBlueBright;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
@include S(height, 15px);
|
||||
@include S(width, 15px);
|
||||
@include IncreasedClickArea(0px);
|
||||
background: transparent center center / 40% no-repeat;
|
||||
opacity: 0.9;
|
||||
&.editKeybinding {
|
||||
background-image: uiResource("icons/edit_key.png");
|
||||
}
|
||||
|
||||
&.resetKeybinding {
|
||||
background-image: uiResource("icons/reset_key.png");
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
opacity: 0.1 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include DarkThemeOverride {
|
||||
.content {
|
||||
.hint {
|
||||
background: #3b3d40;
|
||||
}
|
||||
|
||||
.category .entry {
|
||||
color: #c0c4c8;
|
||||
border-bottom-color: #888;
|
||||
|
||||
button {
|
||||
filter: invert(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#state_KeybindingsState {
|
||||
.content {
|
||||
.topEntries {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
@include S(grid-gap, 5px);
|
||||
@include S(margin-bottom, 10px);
|
||||
}
|
||||
|
||||
.hint {
|
||||
display: block;
|
||||
background: #eee;
|
||||
@include S(padding, 4px);
|
||||
@include PlainText;
|
||||
}
|
||||
|
||||
.category {
|
||||
.entry {
|
||||
display: grid;
|
||||
@include S(margin-top, 2px);
|
||||
@include S(padding-top, 2px);
|
||||
@include S(grid-gap, 4px);
|
||||
grid-template-columns: 1fr #{D(100px)} auto auto;
|
||||
border-bottom: #{D(1px)} dotted #eee;
|
||||
color: #888c8f;
|
||||
.mapping {
|
||||
color: $colorBlueBright;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
@include S(height, 15px);
|
||||
@include S(width, 15px);
|
||||
@include IncreasedClickArea(0px);
|
||||
background: transparent center center / 40% no-repeat;
|
||||
opacity: 0.9;
|
||||
&.editKeybinding {
|
||||
background-image: uiResource("icons/edit_key.png");
|
||||
}
|
||||
|
||||
&.resetKeybinding {
|
||||
background-image: uiResource("icons/reset_key.png");
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
opacity: 0.1 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include DarkThemeOverride {
|
||||
.content {
|
||||
.hint {
|
||||
background: darken($darkModeControlsBackground, 4);
|
||||
}
|
||||
|
||||
.category .entry {
|
||||
color: #c0c4c8;
|
||||
border-bottom-color: #888;
|
||||
|
||||
button {
|
||||
filter: invert(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,13 +25,15 @@
|
|||
background: uiResource("icons/main_menu_settings.png") center center / contain no-repeat;
|
||||
transition: opacity 0.12s ease-in-out;
|
||||
@include IncreasedClickArea(2px);
|
||||
opacity: 0.7;
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.exitAppButton {
|
||||
background-image: uiResource("icons/main_menu_exit.png");
|
||||
background-size: 90%;
|
||||
}
|
||||
|
||||
.languageChoose {
|
||||
|
|
@ -40,6 +42,7 @@
|
|||
background-color: #fff;
|
||||
@include S(border-width, 2px);
|
||||
background-size: cover;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -57,7 +60,7 @@
|
|||
transform: translate(50%, 50%);
|
||||
filter: blur(D(3px));
|
||||
|
||||
$opacity: 0.2;
|
||||
$opacity: 0.07;
|
||||
&.loaded {
|
||||
display: block;
|
||||
opacity: $opacity;
|
||||
|
|
@ -332,25 +335,39 @@
|
|||
button.downloadGame {
|
||||
grid-column: 3 / 4;
|
||||
grid-row: 1 / 2;
|
||||
background-color: $colorBlueBright;
|
||||
background-color: transparent;
|
||||
background-image: uiResource("icons/download.png");
|
||||
@include S(width, 15px);
|
||||
@include IncreasedClickArea(0px);
|
||||
@include S(height, 15px);
|
||||
background-size: 60%;
|
||||
background-size: 80%;
|
||||
align-self: start;
|
||||
opacity: 0.4;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@include DarkThemeInvert;
|
||||
}
|
||||
|
||||
button.deleteGame {
|
||||
grid-column: 3 / 4;
|
||||
grid-row: 2 / 3;
|
||||
background-color: $colorRedBright;
|
||||
background-color: transparent;
|
||||
@include IncreasedClickArea(0px);
|
||||
background-image: uiResource("icons/delete.png");
|
||||
@include S(width, 15px);
|
||||
@include S(height, 15px);
|
||||
align-self: end;
|
||||
background-size: 60%;
|
||||
background-size: 80%;
|
||||
opacity: 0.4;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@include DarkThemeInvert;
|
||||
}
|
||||
|
||||
button.renameGame {
|
||||
|
|
@ -363,11 +380,11 @@
|
|||
justify-self: center;
|
||||
|
||||
background-size: 90%;
|
||||
opacity: 0.25;
|
||||
opacity: 0.4;
|
||||
@include S(margin-left, 4px);
|
||||
|
||||
&:hover {
|
||||
opacity: 0.35;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@include DarkThemeInvert;
|
||||
|
|
@ -379,6 +396,11 @@
|
|||
margin: 0;
|
||||
@include S(width, 32px);
|
||||
height: 100%;
|
||||
@include S(margin-left, 4px);
|
||||
|
||||
@include DarkThemeOverride {
|
||||
background-color: lighten($darkModeControlsBackground, 10);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -407,13 +429,17 @@
|
|||
|
||||
@include S(padding, 15px);
|
||||
|
||||
$linkBg: #fdfdff;
|
||||
$linkBgHover: darken($linkBg, 2);
|
||||
$linkColor: #55586a;
|
||||
|
||||
> .boxLink {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: 1fr auto;
|
||||
|
||||
justify-content: center;
|
||||
background: #fdfdfd uiResource("icons/link.png") top D(3px) right D(3px) / D(9px) no-repeat;
|
||||
background: $linkBg uiResource("icons/link.png") top D(3px) right D(3px) / D(9px) no-repeat;
|
||||
@include S(padding, 5px);
|
||||
@include S(padding-left, 10px);
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
|
|
@ -422,7 +448,7 @@
|
|||
font-weight: bold;
|
||||
box-sizing: border-box;
|
||||
text-transform: uppercase;
|
||||
color: #616266;
|
||||
color: $linkColor;
|
||||
|
||||
transition: background-color 0.12s ease-in-out;
|
||||
pointer-events: all;
|
||||
|
|
@ -431,7 +457,7 @@
|
|||
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: #f0f6ff;
|
||||
background-color: $linkBgHover;
|
||||
}
|
||||
|
||||
.thirdpartyLogo {
|
||||
|
|
@ -458,12 +484,12 @@
|
|||
@include S(height, 60px);
|
||||
|
||||
> a {
|
||||
color: #616266;
|
||||
background: #fdfdfd;
|
||||
color: $linkColor;
|
||||
background: $linkBg;
|
||||
height: 100%;
|
||||
|
||||
&:hover {
|
||||
background-color: #f0f6ff;
|
||||
background-color: $linkBgHover;
|
||||
}
|
||||
@include SuperSmallText;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -499,19 +525,11 @@
|
|||
@include DarkThemeOverride {
|
||||
background: $darkModeGameBackground center center / cover !important;
|
||||
|
||||
.topButtons {
|
||||
filter: invert(1);
|
||||
|
||||
.languageChoose {
|
||||
filter: invert(1);
|
||||
}
|
||||
}
|
||||
|
||||
.mainContainer {
|
||||
background: darken($darkModeGameBackground, 10);
|
||||
background: $darkModeControlsBackground;
|
||||
|
||||
.savegames .savegame {
|
||||
background: darken($darkModeGameBackground, 15);
|
||||
background: darken($darkModeControlsBackground, 5);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
|
@ -519,11 +537,11 @@
|
|||
.footer {
|
||||
> a,
|
||||
.sidelinks > a {
|
||||
background-color: darken($darkModeGameBackground, 10);
|
||||
background-color: $darkModeControlsBackground;
|
||||
color: #eee;
|
||||
|
||||
&:hover {
|
||||
background-color: darken($darkModeGameBackground, 8);
|
||||
background-color: darken($darkModeControlsBackground, 5);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
#state_SettingsState {
|
||||
$colorCategoryButton: #eeeff5;
|
||||
$colorCategoryButtonSelected: #5f748b;
|
||||
$colorCategoryButtonSelected: $colorBlueBright;
|
||||
|
||||
$layoutBreak: 1000px;
|
||||
|
||||
|
|
@ -177,10 +177,12 @@
|
|||
.sidebar {
|
||||
button.categoryButton,
|
||||
button.about {
|
||||
background-color: #3f3f47;
|
||||
color: #ccc;
|
||||
background-color: darken($darkModeControlsBackground, 5);
|
||||
|
||||
&.active {
|
||||
background-color: $colorBlueBright;
|
||||
color: #fff;
|
||||
background-color: $colorCategoryButtonSelected;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -192,8 +194,13 @@
|
|||
|
||||
.value.enum {
|
||||
// dirty but works
|
||||
filter: invert(0.78) sepia(40%) hue-rotate(190deg);
|
||||
color: #222;
|
||||
// color: #222;
|
||||
background-color: $darkModeControlsBackground;
|
||||
background-image: uiResource("icons/enum_selector_white.png");
|
||||
color: #ddd;
|
||||
&:hover {
|
||||
background-color: darken($darkModeControlsBackground, 2);
|
||||
}
|
||||
}
|
||||
|
||||
.value.checkbox {
|
||||
|
|
|
|||
|
|
@ -1,81 +1,81 @@
|
|||
.gameState.textualState {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
box-sizing: border-box;
|
||||
@include S(padding, 32px);
|
||||
height: 100vh;
|
||||
|
||||
.headerBar {
|
||||
display: flex;
|
||||
|
||||
h1 {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
align-items: center;
|
||||
pointer-events: all;
|
||||
cursor: pointer;
|
||||
@include SuperHeading;
|
||||
text-transform: uppercase;
|
||||
color: #333438;
|
||||
position: relative;
|
||||
@include IncreasedClickArea(10px);
|
||||
}
|
||||
|
||||
.backButton {
|
||||
@include S(width, 30px);
|
||||
@include S(height, 30px);
|
||||
@include S(margin-right, 10px);
|
||||
@include S(margin-left, -5px);
|
||||
background: uiResource("icons/state_back_button.png") center center / 70% no-repeat;
|
||||
}
|
||||
|
||||
@include S(margin-bottom, 20px);
|
||||
}
|
||||
|
||||
> .container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
|
||||
> .content {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
@include S(padding, 10px);
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
pointer-events: all;
|
||||
|
||||
a {
|
||||
color: $colorBlueBright;
|
||||
}
|
||||
|
||||
.categoryLabel {
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
@include S(margin-top, 15px);
|
||||
@include S(margin-bottom, 15px);
|
||||
@include Heading;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include DarkThemeOverride {
|
||||
.headerBar {
|
||||
h1 {
|
||||
color: #e2e0db;
|
||||
}
|
||||
|
||||
.backButton {
|
||||
filter: invert(1);
|
||||
}
|
||||
}
|
||||
|
||||
> .container > .content {
|
||||
background: darken($darkModeGameBackground, 3);
|
||||
color: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
.gameState.textualState {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
box-sizing: border-box;
|
||||
@include S(padding, 32px);
|
||||
height: 100vh;
|
||||
|
||||
.headerBar {
|
||||
display: flex;
|
||||
|
||||
h1 {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
align-items: center;
|
||||
pointer-events: all;
|
||||
cursor: pointer;
|
||||
@include SuperHeading;
|
||||
text-transform: uppercase;
|
||||
color: #333438;
|
||||
position: relative;
|
||||
@include IncreasedClickArea(10px);
|
||||
}
|
||||
|
||||
.backButton {
|
||||
@include S(width, 30px);
|
||||
@include S(height, 30px);
|
||||
@include S(margin-right, 10px);
|
||||
@include S(margin-left, -5px);
|
||||
background: uiResource("icons/state_back_button.png") center center / 70% no-repeat;
|
||||
}
|
||||
|
||||
@include S(margin-bottom, 20px);
|
||||
}
|
||||
|
||||
> .container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
|
||||
> .content {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
@include S(border-radius, $globalBorderRadius);
|
||||
@include S(padding, 10px);
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
pointer-events: all;
|
||||
|
||||
a {
|
||||
color: $colorBlueBright;
|
||||
}
|
||||
|
||||
.categoryLabel {
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
@include S(margin-top, 15px);
|
||||
@include S(margin-bottom, 15px);
|
||||
@include Heading;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include DarkThemeOverride {
|
||||
.headerBar {
|
||||
h1 {
|
||||
color: #e2e0db;
|
||||
}
|
||||
|
||||
.backButton {
|
||||
filter: invert(1);
|
||||
}
|
||||
}
|
||||
|
||||
> .container > .content {
|
||||
background: $darkModeControlsBackground;
|
||||
color: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,198 +1,199 @@
|
|||
$globalBorderRadius: 2px;
|
||||
|
||||
// When to reduce control elements size for small devices
|
||||
$layoutExpandMinWidth: 340px;
|
||||
|
||||
// Font sizes and line heights
|
||||
$superHeadingFontSize: 25px;
|
||||
$superHeadingLineHeight: 24px;
|
||||
|
||||
$breakTooltipShowStatsPx: 1023px;
|
||||
|
||||
$headingFontSize: 19px;
|
||||
$headingLineHeight: 21px;
|
||||
|
||||
$textFontSize: 16px;
|
||||
$textLineHeight: 21px;
|
||||
|
||||
$plainTextFontSize: 13px;
|
||||
$plainTextLineHeight: 17px;
|
||||
|
||||
$supersmallTextFontSize: 10px;
|
||||
$supersmallTextLineHeight: 13px;
|
||||
$buttonFontSize: 14px;
|
||||
$buttonLineHeight: 18px;
|
||||
|
||||
// Main background color
|
||||
$mainBgColor: #dee1ea;
|
||||
|
||||
// Accent colors
|
||||
|
||||
$accentColorBright: #e1e4ed;
|
||||
$accentColorDark: #7d808a;
|
||||
$colorGreenBright: #66bb6a;
|
||||
$colorBlueBright: rgb(74, 163, 223);
|
||||
$colorRedBright: #ef5072;
|
||||
$themeColor: #393747;
|
||||
$ingameHudBg: rgba(#333438, 0.9);
|
||||
|
||||
$text3dColor: #f4ffff;
|
||||
|
||||
$darkModeGameBackground: #5c606c;
|
||||
|
||||
// Dialog properties
|
||||
$modalDialogBg: rgba(160, 165, 180, 0.8);
|
||||
$dialogBgColor: lighten($mainBgColor, 10);
|
||||
|
||||
$lightFontWeight: normal;
|
||||
$boldFontWeight: 600;
|
||||
|
||||
$iconSizeSmall: 30px;
|
||||
$iconSizeMedium: 40px;
|
||||
$iconSizeLarge: 60px;
|
||||
|
||||
// Poppins 500
|
||||
// Rubik 400
|
||||
// Cairo 400
|
||||
// Viga 400
|
||||
// Sniglet 400
|
||||
|
||||
$mainFont: "GameFont", sans-serif;
|
||||
// $mainFont: "DK Canoodle";
|
||||
// $mainFont: "MADE Florence Sans";
|
||||
$numberFont: $mainFont;
|
||||
$textFont: $mainFont;
|
||||
|
||||
$mainFontWeight: 400;
|
||||
$mainFontSpacing: 0.04em;
|
||||
$mainFontScale: 1;
|
||||
|
||||
@mixin DebugText($color) {
|
||||
// font-size: 3px;
|
||||
// &,
|
||||
// * {
|
||||
// color: $color !important;
|
||||
// }
|
||||
}
|
||||
|
||||
@mixin SuperSmallText {
|
||||
@include ScaleFont($supersmallTextFontSize, $supersmallTextLineHeight);
|
||||
font-weight: $mainFontWeight;
|
||||
font-family: $mainFont;
|
||||
letter-spacing: $mainFontSpacing;
|
||||
@include DebugText(green);
|
||||
}
|
||||
|
||||
@mixin PlainText {
|
||||
@include ScaleFont($plainTextFontSize, $plainTextLineHeight);
|
||||
font-weight: $mainFontWeight;
|
||||
font-family: $mainFont;
|
||||
letter-spacing: $mainFontSpacing;
|
||||
|
||||
@include DebugText(red);
|
||||
}
|
||||
|
||||
@mixin Text {
|
||||
@include ScaleFont($textFontSize, $textLineHeight);
|
||||
font-weight: $mainFontWeight;
|
||||
font-family: $mainFont;
|
||||
|
||||
letter-spacing: $mainFontSpacing;
|
||||
|
||||
@include DebugText(blue);
|
||||
}
|
||||
|
||||
@mixin Heading {
|
||||
@include ScaleFont($headingFontSize, $headingLineHeight);
|
||||
font-weight: $mainFontWeight;
|
||||
font-family: $mainFont;
|
||||
letter-spacing: $mainFontSpacing;
|
||||
|
||||
@include DebugText(yellow);
|
||||
}
|
||||
|
||||
@mixin SuperHeading {
|
||||
@include ScaleFont($superHeadingFontSize, $superHeadingLineHeight);
|
||||
font-weight: $mainFontWeight;
|
||||
font-family: $mainFont;
|
||||
letter-spacing: $mainFontSpacing;
|
||||
|
||||
@include DebugText(orange);
|
||||
}
|
||||
|
||||
@mixin ButtonText {
|
||||
@include ScaleFont($buttonFontSize, $buttonLineHeight);
|
||||
font-weight: $mainFontWeight;
|
||||
font-family: $mainFont;
|
||||
letter-spacing: $mainFontSpacing;
|
||||
@include DebugText(purple);
|
||||
}
|
||||
|
||||
@function str-split($string, $separator) {
|
||||
// empty array/list
|
||||
$split-arr: ();
|
||||
// first index of separator in string
|
||||
$index: str-index($string, $separator);
|
||||
// loop through string
|
||||
@while $index != null {
|
||||
// get the substring from the first character to the separator
|
||||
$item: str-slice($string, 1, $index - 1);
|
||||
// push item to array
|
||||
$split-arr: append($split-arr, $item);
|
||||
// remove item and separator from string
|
||||
$string: str-slice($string, $index + 1);
|
||||
// find new index of separator
|
||||
$index: str-index($string, $separator);
|
||||
}
|
||||
// add the remaining string to list (the last item)
|
||||
$split-arr: append($split-arr, $string);
|
||||
|
||||
@return $split-arr;
|
||||
}
|
||||
|
||||
@function _first-index($string, $direction: "left") {
|
||||
@for $i from 1 through str-length($string) {
|
||||
$index: if($direction == "left", $i, -$i);
|
||||
|
||||
@if str-slice($string, $index, $index) != " " {
|
||||
@return $index;
|
||||
}
|
||||
}
|
||||
|
||||
@return 0;
|
||||
}
|
||||
|
||||
@function trim($string) {
|
||||
@return str-slice($string, _first-index($string, "left"), _first-index($string, "right"));
|
||||
}
|
||||
|
||||
@mixin AppendGlobal($prefix) {
|
||||
$strSelector: quote(&);
|
||||
$selectors: str-split($strSelector, ",");
|
||||
|
||||
$builtSelector: null;
|
||||
|
||||
@if (& == null) {
|
||||
$builtSelector: "html" + $prefix;
|
||||
} @else {
|
||||
$builtSelector: ();
|
||||
// @debug ($strSelector, "->>>", $selectors);
|
||||
@each $srcSelector in $selectors {
|
||||
$srcSelector: trim($srcSelector);
|
||||
// @debug ("___", $srcSelector);
|
||||
$selector: "html" + $prefix + " " + $srcSelector;
|
||||
@if str-index($srcSelector, "html.") {
|
||||
$selector: "html" +
|
||||
$prefix +
|
||||
"." +
|
||||
str-slice($srcSelector, str-index($srcSelector, "html.") + 5);
|
||||
}
|
||||
// @debug ("_______", $selector);
|
||||
$builtSelector: append($builtSelector, $selector, comma);
|
||||
}
|
||||
}
|
||||
|
||||
@at-root #{$builtSelector} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
$globalBorderRadius: 2px;
|
||||
|
||||
// When to reduce control elements size for small devices
|
||||
$layoutExpandMinWidth: 340px;
|
||||
|
||||
// Font sizes and line heights
|
||||
$superHeadingFontSize: 25px;
|
||||
$superHeadingLineHeight: 24px;
|
||||
|
||||
$breakTooltipShowStatsPx: 1023px;
|
||||
|
||||
$headingFontSize: 19px;
|
||||
$headingLineHeight: 21px;
|
||||
|
||||
$textFontSize: 16px;
|
||||
$textLineHeight: 21px;
|
||||
|
||||
$plainTextFontSize: 13px;
|
||||
$plainTextLineHeight: 17px;
|
||||
|
||||
$supersmallTextFontSize: 10px;
|
||||
$supersmallTextLineHeight: 13px;
|
||||
$buttonFontSize: 14px;
|
||||
$buttonLineHeight: 18px;
|
||||
|
||||
// Main background color
|
||||
$mainBgColor: #dee1ea;
|
||||
|
||||
// Accent colors
|
||||
|
||||
$accentColorBright: #e1e4ed;
|
||||
$accentColorDark: #7d808a;
|
||||
$colorGreenBright: #66bb6a;
|
||||
$colorBlueBright: rgb(74, 151, 223);
|
||||
$colorRedBright: #ef5072;
|
||||
$themeColor: #393747;
|
||||
$ingameHudBg: rgba(#333438, 0.9);
|
||||
|
||||
$text3dColor: #f4ffff;
|
||||
|
||||
$darkModeGameBackground: #535866;
|
||||
$darkModeControlsBackground: darken($darkModeGameBackground, 5);
|
||||
|
||||
// Dialog properties
|
||||
$modalDialogBg: rgba(160, 165, 180, 0.8);
|
||||
$dialogBgColor: lighten($mainBgColor, 10);
|
||||
|
||||
$lightFontWeight: normal;
|
||||
$boldFontWeight: 600;
|
||||
|
||||
$iconSizeSmall: 30px;
|
||||
$iconSizeMedium: 40px;
|
||||
$iconSizeLarge: 60px;
|
||||
|
||||
// Poppins 500
|
||||
// Rubik 400
|
||||
// Cairo 400
|
||||
// Viga 400
|
||||
// Sniglet 400
|
||||
|
||||
$mainFont: "GameFont", sans-serif;
|
||||
// $mainFont: "DK Canoodle";
|
||||
// $mainFont: "MADE Florence Sans";
|
||||
$numberFont: $mainFont;
|
||||
$textFont: $mainFont;
|
||||
|
||||
$mainFontWeight: 400;
|
||||
$mainFontSpacing: 0.04em;
|
||||
$mainFontScale: 1;
|
||||
|
||||
@mixin DebugText($color) {
|
||||
// font-size: 3px;
|
||||
// &,
|
||||
// * {
|
||||
// color: $color !important;
|
||||
// }
|
||||
}
|
||||
|
||||
@mixin SuperSmallText {
|
||||
@include ScaleFont($supersmallTextFontSize, $supersmallTextLineHeight);
|
||||
font-weight: $mainFontWeight;
|
||||
font-family: $mainFont;
|
||||
letter-spacing: $mainFontSpacing;
|
||||
@include DebugText(green);
|
||||
}
|
||||
|
||||
@mixin PlainText {
|
||||
@include ScaleFont($plainTextFontSize, $plainTextLineHeight);
|
||||
font-weight: $mainFontWeight;
|
||||
font-family: $mainFont;
|
||||
letter-spacing: $mainFontSpacing;
|
||||
|
||||
@include DebugText(red);
|
||||
}
|
||||
|
||||
@mixin Text {
|
||||
@include ScaleFont($textFontSize, $textLineHeight);
|
||||
font-weight: $mainFontWeight;
|
||||
font-family: $mainFont;
|
||||
|
||||
letter-spacing: $mainFontSpacing;
|
||||
|
||||
@include DebugText(blue);
|
||||
}
|
||||
|
||||
@mixin Heading {
|
||||
@include ScaleFont($headingFontSize, $headingLineHeight);
|
||||
font-weight: $mainFontWeight;
|
||||
font-family: $mainFont;
|
||||
letter-spacing: $mainFontSpacing;
|
||||
|
||||
@include DebugText(yellow);
|
||||
}
|
||||
|
||||
@mixin SuperHeading {
|
||||
@include ScaleFont($superHeadingFontSize, $superHeadingLineHeight);
|
||||
font-weight: $mainFontWeight;
|
||||
font-family: $mainFont;
|
||||
letter-spacing: $mainFontSpacing;
|
||||
|
||||
@include DebugText(orange);
|
||||
}
|
||||
|
||||
@mixin ButtonText {
|
||||
@include ScaleFont($buttonFontSize, $buttonLineHeight);
|
||||
font-weight: $mainFontWeight;
|
||||
font-family: $mainFont;
|
||||
letter-spacing: $mainFontSpacing;
|
||||
@include DebugText(purple);
|
||||
}
|
||||
|
||||
@function str-split($string, $separator) {
|
||||
// empty array/list
|
||||
$split-arr: ();
|
||||
// first index of separator in string
|
||||
$index: str-index($string, $separator);
|
||||
// loop through string
|
||||
@while $index != null {
|
||||
// get the substring from the first character to the separator
|
||||
$item: str-slice($string, 1, $index - 1);
|
||||
// push item to array
|
||||
$split-arr: append($split-arr, $item);
|
||||
// remove item and separator from string
|
||||
$string: str-slice($string, $index + 1);
|
||||
// find new index of separator
|
||||
$index: str-index($string, $separator);
|
||||
}
|
||||
// add the remaining string to list (the last item)
|
||||
$split-arr: append($split-arr, $string);
|
||||
|
||||
@return $split-arr;
|
||||
}
|
||||
|
||||
@function _first-index($string, $direction: "left") {
|
||||
@for $i from 1 through str-length($string) {
|
||||
$index: if($direction == "left", $i, -$i);
|
||||
|
||||
@if str-slice($string, $index, $index) != " " {
|
||||
@return $index;
|
||||
}
|
||||
}
|
||||
|
||||
@return 0;
|
||||
}
|
||||
|
||||
@function trim($string) {
|
||||
@return str-slice($string, _first-index($string, "left"), _first-index($string, "right"));
|
||||
}
|
||||
|
||||
@mixin AppendGlobal($prefix) {
|
||||
$strSelector: quote(&);
|
||||
$selectors: str-split($strSelector, ",");
|
||||
|
||||
$builtSelector: null;
|
||||
|
||||
@if (& == null) {
|
||||
$builtSelector: "html" + $prefix;
|
||||
} @else {
|
||||
$builtSelector: ();
|
||||
// @debug ($strSelector, "->>>", $selectors);
|
||||
@each $srcSelector in $selectors {
|
||||
$srcSelector: trim($srcSelector);
|
||||
// @debug ("___", $srcSelector);
|
||||
$selector: "html" + $prefix + " " + $srcSelector;
|
||||
@if str-index($srcSelector, "html.") {
|
||||
$selector: "html" +
|
||||
$prefix +
|
||||
"." +
|
||||
str-slice($srcSelector, str-index($srcSelector, "html.") + 5);
|
||||
}
|
||||
// @debug ("_______", $selector);
|
||||
$builtSelector: append($builtSelector, $selector, comma);
|
||||
}
|
||||
}
|
||||
|
||||
@at-root #{$builtSelector} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -277,7 +277,6 @@ export class DialogLoading extends Dialog {
|
|||
const loader = document.createElement("div");
|
||||
loader.classList.add("prefab_LoadingTextWithAnim");
|
||||
loader.classList.add("loadingIndicator");
|
||||
loader.innerText = T.global.loading;
|
||||
elem.appendChild(loader);
|
||||
|
||||
this.app.inputMgr.pushReciever(this.inputReciever);
|
||||
|
|
|
|||
|
|
@ -55,7 +55,6 @@ export class GameLoadingOverlay {
|
|||
internalAddSpinnerAndText(element) {
|
||||
const inner = document.createElement("span");
|
||||
inner.classList.add("prefab_LoadingTextWithAnim");
|
||||
inner.innerText = T.global.loading;
|
||||
element.appendChild(inner);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,8 @@ export class HUDGameMenu extends BaseHUDPart {
|
|||
label: "Upgrades",
|
||||
handler: () => this.root.hud.parts.shop.show(),
|
||||
keybinding: KEYMAPPINGS.ingame.menuOpenShop,
|
||||
badge: () => this.root.hubGoals.getAvailableUpgradeCount(),
|
||||
// badge: () => this.root.hubGoals.getAvailableUpgradeCount(),
|
||||
badge: () => 1,
|
||||
notification: /** @type {[string, enumNotificationType]} */ ([
|
||||
T.ingame.notifications.newUpgrade,
|
||||
enumNotificationType.upgrade,
|
||||
|
|
@ -52,18 +53,15 @@ export class HUDGameMenu extends BaseHUDPart {
|
|||
* }>} */
|
||||
this.visibilityToUpdate = [];
|
||||
|
||||
this.buttonsElement = makeDiv(this.element, null, ["buttonContainer"]);
|
||||
|
||||
buttons.forEach(({ id, label, handler, keybinding, badge, notification, visible }) => {
|
||||
const button = document.createElement("button");
|
||||
button.setAttribute("data-button-id", id);
|
||||
this.buttonsElement.appendChild(button);
|
||||
button.classList.add(id);
|
||||
this.element.appendChild(button);
|
||||
this.trackClicks(button, handler);
|
||||
|
||||
if (keybinding) {
|
||||
const binding = this.root.keyMapper.getBinding(keybinding);
|
||||
binding.add(handler);
|
||||
binding.appendLabelToElement(button);
|
||||
}
|
||||
|
||||
if (visible) {
|
||||
|
|
@ -87,10 +85,8 @@ export class HUDGameMenu extends BaseHUDPart {
|
|||
}
|
||||
});
|
||||
|
||||
const menuButtons = makeDiv(this.element, null, ["menuButtons"]);
|
||||
|
||||
this.saveButton = makeDiv(menuButtons, null, ["button", "save", "animEven"]);
|
||||
this.settingsButton = makeDiv(menuButtons, null, ["button", "settings"]);
|
||||
this.saveButton = makeDiv(this.element, null, ["button", "save", "animEven"]);
|
||||
this.settingsButton = makeDiv(this.element, null, ["button", "settings"]);
|
||||
|
||||
this.trackClicks(this.saveButton, this.startSave);
|
||||
this.trackClicks(this.settingsButton, this.openSettings);
|
||||
|
|
|
|||
|
|
@ -1,127 +1,127 @@
|
|||
import { BaseHUDPart } from "../base_hud_part";
|
||||
import { makeDiv, formatBigNumberFull } from "../../../core/utils";
|
||||
import { DynamicDomAttach } from "../dynamic_dom_attach";
|
||||
import { InputReceiver } from "../../../core/input_receiver";
|
||||
import { KeyActionMapper, KEYMAPPINGS } from "../../key_action_mapper";
|
||||
import { T } from "../../../translations";
|
||||
import { StaticMapEntityComponent } from "../../components/static_map_entity";
|
||||
import { BeltComponent } from "../../components/belt";
|
||||
|
||||
export class HUDSettingsMenu extends BaseHUDPart {
|
||||
createElements(parent) {
|
||||
this.background = makeDiv(parent, "ingame_HUD_SettingsMenu", ["ingameDialog"]);
|
||||
|
||||
this.menuElement = makeDiv(this.background, null, ["menuElement"]);
|
||||
|
||||
this.statsElement = makeDiv(
|
||||
this.background,
|
||||
null,
|
||||
["statsElement"],
|
||||
`
|
||||
<strong>${T.ingame.settingsMenu.beltsPlaced}</strong><span class="beltsPlaced"></span>
|
||||
<strong>${T.ingame.settingsMenu.buildingsPlaced}</strong><span class="buildingsPlaced"></span>
|
||||
<strong>${T.ingame.settingsMenu.playtime}</strong><span class="playtime"></span>
|
||||
|
||||
`
|
||||
);
|
||||
|
||||
this.buttonContainer = makeDiv(this.menuElement, null, ["buttons"]);
|
||||
|
||||
const buttons = [
|
||||
{
|
||||
title: T.ingame.settingsMenu.buttons.continue,
|
||||
action: () => this.close(),
|
||||
},
|
||||
{
|
||||
title: T.ingame.settingsMenu.buttons.settings,
|
||||
action: () => this.goToSettings(),
|
||||
},
|
||||
{
|
||||
title: T.ingame.settingsMenu.buttons.menu,
|
||||
action: () => this.returnToMenu(),
|
||||
},
|
||||
];
|
||||
|
||||
for (let i = 0; i < buttons.length; ++i) {
|
||||
const { title, action } = buttons[i];
|
||||
|
||||
const element = document.createElement("button");
|
||||
element.classList.add("styledButton");
|
||||
element.innerText = title;
|
||||
this.buttonContainer.appendChild(element);
|
||||
|
||||
this.trackClicks(element, action);
|
||||
}
|
||||
}
|
||||
|
||||
returnToMenu() {
|
||||
this.root.gameState.goBackToMenu();
|
||||
}
|
||||
|
||||
goToSettings() {
|
||||
this.root.gameState.goToSettings();
|
||||
}
|
||||
|
||||
shouldPauseGame() {
|
||||
return this.visible;
|
||||
}
|
||||
|
||||
shouldPauseRendering() {
|
||||
return this.visible;
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.root.keyMapper.getBinding(KEYMAPPINGS.general.back).add(this.show, this);
|
||||
|
||||
this.domAttach = new DynamicDomAttach(this.root, this.background, {
|
||||
attachClass: "visible",
|
||||
});
|
||||
|
||||
this.inputReciever = new InputReceiver("settingsmenu");
|
||||
this.keyActionMapper = new KeyActionMapper(this.root, this.inputReciever);
|
||||
this.keyActionMapper.getBinding(KEYMAPPINGS.general.back).add(this.close, this);
|
||||
|
||||
this.close();
|
||||
}
|
||||
|
||||
cleanup() {
|
||||
document.body.classList.remove("ingameDialogOpen");
|
||||
}
|
||||
|
||||
show() {
|
||||
this.visible = true;
|
||||
document.body.classList.add("ingameDialogOpen");
|
||||
this.root.app.inputMgr.makeSureAttachedAndOnTop(this.inputReciever);
|
||||
|
||||
const totalMinutesPlayed = Math.ceil(this.root.time.now() / 60);
|
||||
|
||||
/** @type {HTMLElement} */
|
||||
const playtimeElement = this.statsElement.querySelector(".playtime");
|
||||
/** @type {HTMLElement} */
|
||||
const buildingsPlacedElement = this.statsElement.querySelector(".buildingsPlaced");
|
||||
/** @type {HTMLElement} */
|
||||
const beltsPlacedElement = this.statsElement.querySelector(".beltsPlaced");
|
||||
|
||||
playtimeElement.innerText = T.global.time.xMinutes.replace("<x>", `${totalMinutesPlayed}`);
|
||||
|
||||
buildingsPlacedElement.innerText = formatBigNumberFull(
|
||||
this.root.entityMgr.getAllWithComponent(StaticMapEntityComponent).length -
|
||||
this.root.entityMgr.getAllWithComponent(BeltComponent).length
|
||||
);
|
||||
|
||||
beltsPlacedElement.innerText = formatBigNumberFull(
|
||||
this.root.entityMgr.getAllWithComponent(BeltComponent).length
|
||||
);
|
||||
}
|
||||
|
||||
close() {
|
||||
this.visible = false;
|
||||
document.body.classList.remove("ingameDialogOpen");
|
||||
this.root.app.inputMgr.makeSureDetached(this.inputReciever);
|
||||
this.update();
|
||||
}
|
||||
|
||||
update() {
|
||||
this.domAttach.update(this.visible);
|
||||
}
|
||||
}
|
||||
import { BaseHUDPart } from "../base_hud_part";
|
||||
import { makeDiv, formatBigNumberFull } from "../../../core/utils";
|
||||
import { DynamicDomAttach } from "../dynamic_dom_attach";
|
||||
import { InputReceiver } from "../../../core/input_receiver";
|
||||
import { KeyActionMapper, KEYMAPPINGS } from "../../key_action_mapper";
|
||||
import { T } from "../../../translations";
|
||||
import { StaticMapEntityComponent } from "../../components/static_map_entity";
|
||||
import { BeltComponent } from "../../components/belt";
|
||||
|
||||
export class HUDSettingsMenu extends BaseHUDPart {
|
||||
createElements(parent) {
|
||||
this.background = makeDiv(parent, "ingame_HUD_SettingsMenu", ["ingameDialog"]);
|
||||
|
||||
this.menuElement = makeDiv(this.background, null, ["menuElement"]);
|
||||
|
||||
this.statsElement = makeDiv(
|
||||
this.background,
|
||||
null,
|
||||
["statsElement"],
|
||||
`
|
||||
<strong>${T.ingame.settingsMenu.beltsPlaced}</strong><span class="beltsPlaced"></span>
|
||||
<strong>${T.ingame.settingsMenu.buildingsPlaced}</strong><span class="buildingsPlaced"></span>
|
||||
<strong>${T.ingame.settingsMenu.playtime}</strong><span class="playtime"></span>
|
||||
|
||||
`
|
||||
);
|
||||
|
||||
this.buttonContainer = makeDiv(this.menuElement, null, ["buttons"]);
|
||||
|
||||
const buttons = [
|
||||
{
|
||||
id: "continue",
|
||||
action: () => this.close(),
|
||||
},
|
||||
{
|
||||
id: "settings",
|
||||
action: () => this.goToSettings(),
|
||||
},
|
||||
{
|
||||
id: "menu",
|
||||
action: () => this.returnToMenu(),
|
||||
},
|
||||
];
|
||||
|
||||
for (let i = 0; i < buttons.length; ++i) {
|
||||
const { title, action, id } = buttons[i];
|
||||
|
||||
const element = document.createElement("button");
|
||||
element.classList.add("styledButton");
|
||||
element.classList.add(id);
|
||||
this.buttonContainer.appendChild(element);
|
||||
|
||||
this.trackClicks(element, action);
|
||||
}
|
||||
}
|
||||
|
||||
returnToMenu() {
|
||||
this.root.gameState.goBackToMenu();
|
||||
}
|
||||
|
||||
goToSettings() {
|
||||
this.root.gameState.goToSettings();
|
||||
}
|
||||
|
||||
shouldPauseGame() {
|
||||
return this.visible;
|
||||
}
|
||||
|
||||
shouldPauseRendering() {
|
||||
return this.visible;
|
||||
}
|
||||
|
||||
initialize() {
|
||||
this.root.keyMapper.getBinding(KEYMAPPINGS.general.back).add(this.show, this);
|
||||
|
||||
this.domAttach = new DynamicDomAttach(this.root, this.background, {
|
||||
attachClass: "visible",
|
||||
});
|
||||
|
||||
this.inputReciever = new InputReceiver("settingsmenu");
|
||||
this.keyActionMapper = new KeyActionMapper(this.root, this.inputReciever);
|
||||
this.keyActionMapper.getBinding(KEYMAPPINGS.general.back).add(this.close, this);
|
||||
|
||||
this.close();
|
||||
}
|
||||
|
||||
cleanup() {
|
||||
document.body.classList.remove("ingameDialogOpen");
|
||||
}
|
||||
|
||||
show() {
|
||||
this.visible = true;
|
||||
document.body.classList.add("ingameDialogOpen");
|
||||
this.root.app.inputMgr.makeSureAttachedAndOnTop(this.inputReciever);
|
||||
|
||||
const totalMinutesPlayed = Math.ceil(this.root.time.now() / 60);
|
||||
|
||||
/** @type {HTMLElement} */
|
||||
const playtimeElement = this.statsElement.querySelector(".playtime");
|
||||
/** @type {HTMLElement} */
|
||||
const buildingsPlacedElement = this.statsElement.querySelector(".buildingsPlaced");
|
||||
/** @type {HTMLElement} */
|
||||
const beltsPlacedElement = this.statsElement.querySelector(".beltsPlaced");
|
||||
|
||||
playtimeElement.innerText = T.global.time.xMinutes.replace("<x>", `${totalMinutesPlayed}`);
|
||||
|
||||
buildingsPlacedElement.innerText = formatBigNumberFull(
|
||||
this.root.entityMgr.getAllWithComponent(StaticMapEntityComponent).length -
|
||||
this.root.entityMgr.getAllWithComponent(BeltComponent).length
|
||||
);
|
||||
|
||||
beltsPlacedElement.innerText = formatBigNumberFull(
|
||||
this.root.entityMgr.getAllWithComponent(BeltComponent).length
|
||||
);
|
||||
}
|
||||
|
||||
close() {
|
||||
this.visible = false;
|
||||
document.body.classList.remove("ingameDialogOpen");
|
||||
this.root.app.inputMgr.makeSureDetached(this.inputReciever);
|
||||
this.update();
|
||||
}
|
||||
|
||||
update() {
|
||||
this.domAttach.update(this.visible);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,11 +49,20 @@ export class MapResourcesSystem extends GameSystem {
|
|||
} else {
|
||||
// HIGH QUALITY: Draw all items
|
||||
const layer = chunk.lowerLayer;
|
||||
const layerEntities = chunk.contents;
|
||||
for (let x = 0; x < globalConfig.mapChunkSize; ++x) {
|
||||
const row = layer[x];
|
||||
const rowEntities = layerEntities[x];
|
||||
const worldX = (chunk.tileX + x) * globalConfig.tileSize;
|
||||
for (let y = 0; y < globalConfig.mapChunkSize; ++y) {
|
||||
const lowerItem = row[y];
|
||||
|
||||
const entity = rowEntities[y];
|
||||
if (entity) {
|
||||
// Don't draw if there is an entity above
|
||||
continue;
|
||||
}
|
||||
|
||||
if (lowerItem) {
|
||||
const worldY = (chunk.tileY + y) * globalConfig.tileSize;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"uiStyle": "dark",
|
||||
"map": {
|
||||
"background": "#2e2f37",
|
||||
"background": "#3e3f47",
|
||||
"grid": "rgba(255, 255, 255, 0.02)",
|
||||
"gridLineWidth": 0.5,
|
||||
|
||||
|
|
@ -25,10 +25,10 @@
|
|||
"colorBlindPickerTile": "rgba(255, 255, 255, 0.5)",
|
||||
|
||||
"resources": {
|
||||
"shape": "#3d3f4a",
|
||||
"red": "#4a3d3f",
|
||||
"green": "#3e4a3d",
|
||||
"blue": "#35384a"
|
||||
"shape": "#5d5f6a",
|
||||
"red": "#854f56",
|
||||
"green": "#667964",
|
||||
"blue": "#5e7ca4"
|
||||
},
|
||||
"chunkOverview": {
|
||||
"empty": "#444856",
|
||||
|
|
|
|||
|
|
@ -488,8 +488,10 @@ export class MainMenuState extends GameState {
|
|||
|
||||
const signals = this.dialogs.showWarning(
|
||||
T.dialogs.confirmSavegameDelete.title,
|
||||
T.dialogs.confirmSavegameDelete.text,
|
||||
["delete:bad", "cancel:good"]
|
||||
T.dialogs.confirmSavegameDelete.text
|
||||
.replace("<savegameName>", game.name || T.mainMenu.savegameUnnamed)
|
||||
.replace("<savegameLevel>", String(game.level)),
|
||||
["cancel:good", "delete:bad:timeout"]
|
||||
);
|
||||
|
||||
signals.delete.add(() => {
|
||||
|
|
|
|||
|
|
@ -191,7 +191,9 @@ dialogs:
|
|||
confirmSavegameDelete:
|
||||
title: Confirm deletion
|
||||
text: >-
|
||||
Are you sure you want to delete the game?
|
||||
Are you sure you want to delete the following game?<br><br>
|
||||
'<savegameName>' at level <savegameLevel><br><br>
|
||||
This can not be undone!
|
||||
|
||||
savegameDeletionError:
|
||||
title: Failed to delete
|
||||
|
|
@ -390,7 +392,7 @@ ingame:
|
|||
buttons:
|
||||
continue: Continue
|
||||
settings: Settings
|
||||
menu: Return to menu
|
||||
menu: Menu
|
||||
|
||||
# Bottom left tutorial hints
|
||||
tutorialHints:
|
||||
|
|
@ -908,7 +910,7 @@ keybindings:
|
|||
hint: >-
|
||||
Tip: Be sure to make use of CTRL, SHIFT and ALT! They enable different placement options.
|
||||
|
||||
resetKeybindings: Reset Keybindings
|
||||
resetKeybindings: Reset
|
||||
|
||||
categoryLabels:
|
||||
general: Application
|
||||
|
|
|
|||
Reference in New Issue