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