Archives/tobspr_shapez.io
1
0
Fork 0
mirror of https://github.com/tobspr/shapez.io.git synced 2025-12-11 09:11:50 +00:00
Code Issues Projects Releases Wiki Activity

Apply formatting to src/css

Browse Source
This commit is contained in:
Даниїл Григор'єв 2024-06-20 12:59:43 +03:00
parent 89992e2299
commit f49def0c19
No known key found for this signature in database
GPG Key ID: B890DF16341D8C1D
27 changed files with 4624 additions and 4615 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/css/common.scss
View File

@ -584,7 +584,10 @@ canvas {
box-sizing: content-box;
cursor: pointer;
pointer-events: all;
transition: opacity 0.2s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.4s ease-in-out !important;
transition:
opacity 0.2s ease-in-out,
background-color 0.3s ease-in-out,
box-shadow 0.4s ease-in-out !important;
position: relative;
@include BorderRadius(20px);
@include IncreasedClickArea(10px);

80
src/css/ingame_hud/blueprint_placer.scss
View File

@ -1,40 +1,40 @@
#ingame_HUD_BlueprintPlacer {
position: absolute;
@include S(top, 70px);
left: 50%;
transform: translateX(-50%);
color: #333;
z-index: 9999;
background: $ingameHudBg;
@include S(padding, 5px);
display: flex;
flex-direction: column;
color: #fff;
@include S(width, 120px);
align-items: center;
justify-content: center;
@include S(border-radius, $globalBorderRadius);
.label {
@include PlainText;
text-transform: uppercase;
}
.costContainer {
display: flex;
align-items: center;
@include Heading;
> canvas {
@include S(margin-left, 5px);
@include S(width, 30px);
@include S(height, 30px);
}
}
&:not(.canAfford) {
background: rgba(98, 27, 41, 0.8);
// .costContainer {
color: rgb(255, 97, 128);
// }
}
}
#ingame_HUD_BlueprintPlacer {
position: absolute;
@include S(top, 70px);
left: 50%;
transform: translateX(-50%);
color: #333;
z-index: 9999;
background: $ingameHudBg;
@include S(padding, 5px);
display: flex;
flex-direction: column;
color: #fff;
@include S(width, 120px);
align-items: center;
justify-content: center;
@include S(border-radius, $globalBorderRadius);
.label {
@include PlainText;
text-transform: uppercase;
}
.costContainer {
display: flex;
align-items: center;
@include Heading;
> canvas {
@include S(margin-left, 5px);
@include S(width, 30px);
@include S(height, 30px);
}
}
&:not(.canAfford) {
background: rgba(98, 27, 41, 0.8);
// .costContainer {
color: rgb(255, 97, 128);
// }
}
}

370
src/css/ingame_hud/buildings_toolbar.scss
View File

@ -1,185 +1,185 @@
.ingame_buildingsToolbar {
position: absolute;
@include S(bottom, 10px);
left: 50%;
transform: translateX(-50%);
display: grid;
grid-template-rows: auto auto;
justify-items: center;
@include S(grid-gap, 4px);
background: transparent;
transition: transform 120ms ease-in-out;
will-change: transform;
&:not(.visible) {
transform: translateX(-50%) translateY(#{D(100px)});
}
.buildings {
display: grid;
grid-auto-flow: column;
justify-items: center;
align-self: center;
grid-gap: D(2px);
grid-row: 2 / 3;
@include S(border-radius, $globalBorderRadius);
@include S(padding, 2px);
background-color: rgba($ingameHudBg, 0.07);
@include DarkThemeOverride {
background-color: rgba(darken($darkModeGameBackground, 15), 0.95);
}
&.secondary {
grid-row: 1 / 2;
.building {
@include S(width, 30px);
@include S(height, 30px);
background-size: 45%;
&:not(.unlocked) {
&::before {
background-size: #{D(13px)};
}
}
}
}
.building {
display: flex;
@include S(width, 40px);
position: relative;
@include S(height, 40px);
@at-root html[data-tutorial-step="1_1_extractor"] &[data-id="miner"]:not(.selected),
html[data-tutorial-step="1_2_conveyor"] &[data-id="belt"]:not(.selected),
html[data-tutorial-step="2_1_place_cutter"] &[data-id="cutter"]:not(.selected),
html[data-tutorial-step="2_2_place_trash"] &[data-id="trash"]:not(.selected) {
&::before {
content: "";
& {
/* load-async */
background: uiResource("icons/tutorial_arrow.png") center center / contain no-repeat;
}
@include S(width, 25px);
@include S(height, 25px);
position: absolute;
left: 50%;
bottom: 100%;
transform: translateX(-50%);
@include InlineAnimation(1s ease-in-out infinite) {
50% {
transform: translateX(-50%) translateY(20%);
}
}
}
@include S(border-radius, $globalBorderRadius);
box-shadow: 0 0 D(10px) D(5px) rgba(74, 237, 134, 0.5) !important;
background: rgba(74, 237, 134, 0.5) !important;
}
.icon {
color: $accentColorDark;
display: flex;
flex-direction: column-reverse;
position: relative;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background: center center / 70% no-repeat;
}
&:not(.unlocked) {
@include S(width, 25px);
.icon {
opacity: 0.15;
}
&.editor {
.icon {
pointer-events: all;
cursor: pointer;
&:hover {
background-color: rgba(22, 30, 68, 0.1);
}
}
}
&:not(.editor) {
.icon {
background-image: uiResource("locked_building.png") !important;
}
}
}
&.unlocked {
.icon {
@include S(border-radius, $globalBorderRadius * 0.9);
pointer-events: all;
transition: all 0.12s ease-in-out;
transition-property: background-color, transform;
cursor: pointer;
&:hover {
background-color: rgba(30, 40, 90, 0.1);
@include DarkThemeOverride {
background-color: rgba(255, 255, 255, 0.07);
}
}
&.pressed {
transform: scale(0.9) !important;
}
}
&.selected {
.icon {
background-color: rgba(lighten($colorBlueBright, 9), 0.4);
}
// transform: scale(1.05);
// @include S(border-radius, $globalBorderRadius);
.keybinding {
color: #111;
}
}
.puzzle-lock {
& {
/* @load-async */
background: uiResource("locked_building.png") center center / 90% no-repeat;
}
display: grid;
grid-auto-flow: column;
position: absolute;
@include S(top, -15px);
left: 50%;
transform: translateX(-50%) !important;
transition: all 0.12s ease-in-out;
transition-property: opacity, transform;
cursor: pointer;
pointer-events: all;
@include S(width, 12px);
@include S(height, 12px);
&:hover {
opacity: 0.5;
}
}
}
}
}
}
.ingame_buildingsToolbar {
position: absolute;
@include S(bottom, 10px);
left: 50%;
transform: translateX(-50%);
display: grid;
grid-template-rows: auto auto;
justify-items: center;
@include S(grid-gap, 4px);
background: transparent;
transition: transform 120ms ease-in-out;
will-change: transform;
&:not(.visible) {
transform: translateX(-50%) translateY(#{D(100px)});
}
.buildings {
display: grid;
grid-auto-flow: column;
justify-items: center;
align-self: center;
grid-gap: D(2px);
grid-row: 2 / 3;
@include S(border-radius, $globalBorderRadius);
@include S(padding, 2px);
background-color: rgba($ingameHudBg, 0.07);
@include DarkThemeOverride {
background-color: rgba(darken($darkModeGameBackground, 15), 0.95);
}
&.secondary {
grid-row: 1 / 2;
.building {
@include S(width, 30px);
@include S(height, 30px);
background-size: 45%;
&:not(.unlocked) {
&::before {
background-size: #{D(13px)};
}
}
}
}
.building {
display: flex;
@include S(width, 40px);
position: relative;
@include S(height, 40px);
@at-root html[data-tutorial-step="1_1_extractor"] &[data-id="miner"]:not(.selected),
html[data-tutorial-step="1_2_conveyor"] &[data-id="belt"]:not(.selected),
html[data-tutorial-step="2_1_place_cutter"] &[data-id="cutter"]:not(.selected),
html[data-tutorial-step="2_2_place_trash"] &[data-id="trash"]:not(.selected) {
&::before {
content: "";
& {
/* load-async */
background: uiResource("icons/tutorial_arrow.png") center center / contain no-repeat;
}
@include S(width, 25px);
@include S(height, 25px);
position: absolute;
left: 50%;
bottom: 100%;
transform: translateX(-50%);
@include InlineAnimation(1s ease-in-out infinite) {
50% {
transform: translateX(-50%) translateY(20%);
}
}
}
@include S(border-radius, $globalBorderRadius);
box-shadow: 0 0 D(10px) D(5px) rgba(74, 237, 134, 0.5) !important;
background: rgba(74, 237, 134, 0.5) !important;
}
.icon {
color: $accentColorDark;
display: flex;
flex-direction: column-reverse;
position: relative;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background: center center / 70% no-repeat;
}
&:not(.unlocked) {
@include S(width, 25px);
.icon {
opacity: 0.15;
}
&.editor {
.icon {
pointer-events: all;
cursor: pointer;
&:hover {
background-color: rgba(22, 30, 68, 0.1);
}
}
}
&:not(.editor) {
.icon {
background-image: uiResource("locked_building.png") !important;
}
}
}
&.unlocked {
.icon {
@include S(border-radius, $globalBorderRadius * 0.9);
pointer-events: all;
transition: all 0.12s ease-in-out;
transition-property: background-color, transform;
cursor: pointer;
&:hover {
background-color: rgba(30, 40, 90, 0.1);
@include DarkThemeOverride {
background-color: rgba(255, 255, 255, 0.07);
}
}
&.pressed {
transform: scale(0.9) !important;
}
}
&.selected {
.icon {
background-color: rgba(lighten($colorBlueBright, 9), 0.4);
}
// transform: scale(1.05);
// @include S(border-radius, $globalBorderRadius);
.keybinding {
color: #111;
}
}
.puzzle-lock {
& {
/* @load-async */
background: uiResource("locked_building.png") center center / 90% no-repeat;
}
display: grid;
grid-auto-flow: column;
position: absolute;
@include S(top, -15px);
left: 50%;
transform: translateX(-50%) !important;
transition: all 0.12s ease-in-out;
transition-property: opacity, transform;
cursor: pointer;
pointer-events: all;
@include S(width, 12px);
@include S(height, 12px);
&:hover {
opacity: 0.5;
}
}
}
}
}
}

614
src/css/ingame_hud/dialogs.scss
View File

@ -1,307 +1,307 @@
.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;
}
display: flex;
flex-direction: column;
.text {
text-transform: uppercase;
@include S(margin-bottom, 10px);
}
}
> .dialogInner {
background: #fff;
max-height: calc(100vh - #{D(40px)});
@include S(border-radius, $globalBorderRadius);
display: flex;
flex-direction: column;
@include S(padding, 12px);
box-shadow: 0 D(5px) D(15px) rgba(#000, 0.1);
pointer-events: all;
@include DarkThemeOverride {
background: darken($darkModeControlsBackground, 5);
}
&.optionChooserDialog {
.optionParent {
display: grid;
@include S(grid-gap, 5px);
@include S(padding-right, 5px);
grid-template-columns: 1fr 1fr;
.option {
@include S(border-radius, $globalBorderRadius);
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);
cursor: pointer;
pointer-events: all;
transition: opacity 0.2s ease-in-out;
&:hover {
opacity: 0.4;
}
& {
background: uiResource("icons/close.png") center center / 80% no-repeat;
}
}
}
> .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;
}
h3 {
@include S(margin-top, 10px);
}
input {
background: #eee;
color: #333438;
width: 100%;
&.errored {
background-color: rgb(250, 206, 206);
&::placeholder {
color: #fff;
opacity: 0.8;
}
}
}
ul.bucketList {
padding-left: 30px;
li {
display: list-item;
}
}
.ingameItemChooser {
@include S(margin, 10px, 0);
display: grid;
@include S(grid-column-gap, 3px);
@include S(grid-row-gap, 5px);
grid-template-columns: repeat(10, 1fr);
align-items: center;
justify-items: center;
canvas {
pointer-events: all;
@include S(width, 25px);
@include S(height, 25px);
position: relative;
cursor: pointer;
@include IncreasedClickArea(3px);
&:hover {
opacity: 0.9;
}
}
}
.dialogModsMod {
background: rgba(0, 0, 0, 0.05);
@include S(padding, 5px);
@include S(margin, 10px, 0);
@include S(border-radius, $globalBorderRadius);
display: grid;
grid-template-columns: 1fr D(100px);
@include DarkThemeOverride {
background: rgba(0, 0, 0, 0.2);
}
button {
grid-column: 2 / 3;
grid-row: 1 / 3;
align-self: start;
}
.version {
@include SuperSmallText;
opacity: 0.5;
}
.name {
}
}
}
> .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(1s 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;
}
display: flex;
flex-direction: column;
.text {
text-transform: uppercase;
@include S(margin-bottom, 10px);
}
}
> .dialogInner {
background: #fff;
max-height: calc(100vh - #{D(40px)});
@include S(border-radius, $globalBorderRadius);
display: flex;
flex-direction: column;
@include S(padding, 12px);
box-shadow: 0 D(5px) D(15px) rgba(#000, 0.1);
pointer-events: all;
@include DarkThemeOverride {
background: darken($darkModeControlsBackground, 5);
}
&.optionChooserDialog {
.optionParent {
display: grid;
@include S(grid-gap, 5px);
@include S(padding-right, 5px);
grid-template-columns: 1fr 1fr;
.option {
@include S(border-radius, $globalBorderRadius);
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);
cursor: pointer;
pointer-events: all;
transition: opacity 0.2s ease-in-out;
&:hover {
opacity: 0.4;
}
& {
background: uiResource("icons/close.png") center center / 80% no-repeat;
}
}
}
> .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;
}
h3 {
@include S(margin-top, 10px);
}
input {
background: #eee;
color: #333438;
width: 100%;
&.errored {
background-color: rgb(250, 206, 206);
&::placeholder {
color: #fff;
opacity: 0.8;
}
}
}
ul.bucketList {
padding-left: 30px;
li {
display: list-item;
}
}
.ingameItemChooser {
@include S(margin, 10px, 0);
display: grid;
@include S(grid-column-gap, 3px);
@include S(grid-row-gap, 5px);
grid-template-columns: repeat(10, 1fr);
align-items: center;
justify-items: center;
canvas {
pointer-events: all;
@include S(width, 25px);
@include S(height, 25px);
position: relative;
cursor: pointer;
@include IncreasedClickArea(3px);
&:hover {
opacity: 0.9;
}
}
}
.dialogModsMod {
background: rgba(0, 0, 0, 0.05);
@include S(padding, 5px);
@include S(margin, 10px, 0);
@include S(border-radius, $globalBorderRadius);
display: grid;
grid-template-columns: 1fr D(100px);
@include DarkThemeOverride {
background: rgba(0, 0, 0, 0.2);
}
button {
grid-column: 2 / 3;
grid-row: 1 / 3;
align-self: start;
}
.version {
@include SuperSmallText;
opacity: 0.5;
}
.name {
}
}
}
> .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(1s linear) {
0% {
width: 100%;
}
100% {
width: 0%;
}
}
}
}
}
}
}
}

282
src/css/ingame_hud/game_menu.scss
View File

@ -1,141 +1,141 @@
#ingame_HUD_GameMenu {
position: absolute;
@include S(top, 10px);
@include S(right, 10px);
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
@include S(grid-gap, 6px);
backdrop-filter: blur(D(1px));
> button,
> .button {
@include PlainText;
@include IncreasedClickArea(0px);
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 center / 70% no-repeat;
grid-row: 1;
&.pressed {
transform: scale(0.9) !important;
}
opacity: 0.7;
&:hover {
opacity: 0.9 !important;
}
@include DarkThemeInvert;
&.shop {
grid-column: 1;
& {
/* @load-async */
background-image: uiResource("icons/shop.png");
}
}
&.stats {
grid-column: 2;
& {
/* @load-async */
background-image: uiResource("icons/statistics.png");
}
}
&.save {
& {
/* @load-async */
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 {
grid-column: 4;
& {
/* @load-async */
background-image: uiResource("icons/settings_menu_settings.png");
}
}
&:hover {
opacity: 0.9;
transform: translateY(0);
}
&:not(.hasBadge) .badge {
display: none;
}
&.hasBadge {
&.shop {
filter: none;
opacity: 0.9;
& {
/* @load-async */
background-image: uiResource("icons/shop_active.png");
}
}
transform-origin: 50% 50%;
@include InlineAnimation(0.8s ease-in-out infinite) {
50% {
transform: scale(1.3) rotate(6deg);
}
}
.badge {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
@include PlainText;
display: flex;
justify-content: center;
align-items: center;
}
}
}
}
#ingame_HUD_GameMenu {
position: absolute;
@include S(top, 10px);
@include S(right, 10px);
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
@include S(grid-gap, 6px);
backdrop-filter: blur(D(1px));
> button,
> .button {
@include PlainText;
@include IncreasedClickArea(0px);
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 center / 70% no-repeat;
grid-row: 1;
&.pressed {
transform: scale(0.9) !important;
}
opacity: 0.7;
&:hover {
opacity: 0.9 !important;
}
@include DarkThemeInvert;
&.shop {
grid-column: 1;
& {
/* @load-async */
background-image: uiResource("icons/shop.png");
}
}
&.stats {
grid-column: 2;
& {
/* @load-async */
background-image: uiResource("icons/statistics.png");
}
}
&.save {
& {
/* @load-async */
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 {
grid-column: 4;
& {
/* @load-async */
background-image: uiResource("icons/settings_menu_settings.png");
}
}
&:hover {
opacity: 0.9;
transform: translateY(0);
}
&:not(.hasBadge) .badge {
display: none;
}
&.hasBadge {
&.shop {
filter: none;
opacity: 0.9;
& {
/* @load-async */
background-image: uiResource("icons/shop_active.png");
}
}
transform-origin: 50% 50%;
@include InlineAnimation(0.8s ease-in-out infinite) {
50% {
transform: scale(1.3) rotate(6deg);
}
}
.badge {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
@include PlainText;
display: flex;
justify-content: center;
align-items: center;
}
}
}
}

152
src/css/ingame_hud/keybindings_overlay.scss
View File

@ -1,76 +1,76 @@
#ingame_HUD_KeybindingOverlay {
position: absolute;
@include S(top, 10px);
@include S(left, 10px);
display: flex;
flex-direction: column;
align-items: flex-start;
color: #333438;
backdrop-filter: blur(D(1px));
padding: D(3px);
@include DarkThemeOverride {
color: #fff;
}
transition: opacity 0.1s ease-out;
&.hovered {
opacity: 0.1;
}
> .binding {
&:not(.visible) {
display: none !important;
}
display: inline-grid;
@include PlainText;
align-items: center;
@include S(margin-bottom, 3px);
grid-auto-flow: column;
@include S(grid-gap, 2px);
i {
display: inline-block;
@include S(height, 10px);
width: 1px;
@include S(margin, 0, 3px);
background-color: #fff;
transform: rotate(10deg);
// @include S(margin, 0, 3px);
}
code {
position: relative;
top: unset;
left: unset;
margin: 0;
&.rightMouse {
/* @load-async */
background: #fff uiResource("icons/mouse_right.png") center center / 85% no-repeat;
}
&.leftMouse {
/* @load-async */
background: #fff uiResource("icons/mouse_left.png") center center / 85% no-repeat;
}
}
label {
color: #333438;
@include SuperSmallText;
text-transform: uppercase;
// color: #fff;
@include DarkThemeOverride {
color: #fff;
}
@include S(margin-left, 5px);
}
}
}
body.uiHidden #ingame_HUD_KeybindingOverlay .binding:not(.hudToggle) {
display: none;
}
#ingame_HUD_KeybindingOverlay {
position: absolute;
@include S(top, 10px);
@include S(left, 10px);
display: flex;
flex-direction: column;
align-items: flex-start;
color: #333438;
backdrop-filter: blur(D(1px));
padding: D(3px);
@include DarkThemeOverride {
color: #fff;
}
transition: opacity 0.1s ease-out;
&.hovered {
opacity: 0.1;
}
> .binding {
&:not(.visible) {
display: none !important;
}
display: inline-grid;
@include PlainText;
align-items: center;
@include S(margin-bottom, 3px);
grid-auto-flow: column;
@include S(grid-gap, 2px);
i {
display: inline-block;
@include S(height, 10px);
width: 1px;
@include S(margin, 0, 3px);
background-color: #fff;
transform: rotate(10deg);
// @include S(margin, 0, 3px);
}
code {
position: relative;
top: unset;
left: unset;
margin: 0;
&.rightMouse {
/* @load-async */
background: #fff uiResource("icons/mouse_right.png") center center / 85% no-repeat;
}
&.leftMouse {
/* @load-async */
background: #fff uiResource("icons/mouse_left.png") center center / 85% no-repeat;
}
}
label {
color: #333438;
@include SuperSmallText;
text-transform: uppercase;
// color: #fff;
@include DarkThemeOverride {
color: #fff;
}
@include S(margin-left, 5px);
}
}
}
body.uiHidden #ingame_HUD_KeybindingOverlay .binding:not(.hudToggle) {
display: none;
}

312
src/css/ingame_hud/pinned_shapes.scss
View File

@ -1,156 +1,156 @@
#ingame_HUD_PinnedShapes {
position: absolute;
@include S(left, 9px);
@include S(top, 150px);
@include PlainText;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
> .shape {
position: relative;
display: grid;
align-items: center;
justify-content: center;
grid-template-columns: auto 1fr;
grid-template-rows: 1fr 1fr;
@include S(margin-bottom, 4px);
color: #333438;
&.removable {
pointer-events: all;
}
> canvas {
@include S(width, 25px);
@include S(height, 25px);
grid-column: 1 / 2;
grid-row: 1 / 3;
pointer-events: none;
z-index: 20;
position: relative;
}
> .amountLabel,
> .goalLabel {
@include S(margin-left, 5px);
@include SuperSmallText;
font-weight: bold;
display: inline-flex;
align-items: center;
flex-direction: row;
grid-column: 2 / 3;
@include S(height, 9px);
@include DarkThemeOverride {
color: #eee;
}
}
> .goalLabel {
@include S(font-size, 7px);
opacity: 0.9;
align-self: start;
justify-self: start;
font-weight: normal;
grid-row: 2 / 3;
}
> .amountLabel {
align-self: end;
justify-self: start;
grid-row: 1 / 2;
}
> .infoButton {
@include S(width, 8px);
@include S(height, 8px);
position: absolute;
opacity: 0.7;
@include S(top, 13px);
@include S(left, -7px);
@include DarkThemeInvert;
@include IncreasedClickArea(2px);
transition: opacity 0.12s ease-in-out;
z-index: 100;
&:hover {
opacity: 0.8;
}
& {
/* @load-async */
background: uiResource("icons/info_button.png") center center / 95% no-repeat;
}
}
> .unpinButton {
@include S(width, 8px);
@include S(height, 8px);
position: absolute;
opacity: 0.7;
@include S(top, 3px);
@include S(left, -7px);
@include DarkThemeInvert;
@include IncreasedClickArea(2px);
transition: opacity 0.12s ease-in-out;
z-index: 100;
&:hover {
opacity: 0.8;
}
& {
/* @load-async */
background: uiResource("icons/unpin_shape.png") center center / 80% no-repeat;
}
}
&.goal,
&.blueprint {
.amountLabel::after {
content: " ";
position: absolute;
display: inline-block;
@include S(width, 8px);
@include S(height, 8px);
@include S(top, 4px);
@include S(left, -7px);
background: center center / contain no-repeat;
}
&.goal .amountLabel {
&::after {
/* @load-async */
background-image: uiResource("icons/current_goal_marker.png");
background-size: 90%;
}
@include DarkThemeOverride {
&::after {
/* @load-async */
background-image: uiResource("icons/current_goal_marker_inverted.png") !important;
}
}
}
&.blueprint .amountLabel {
&::after {
/* @load-async */
background-image: uiResource("icons/blueprint_marker.png");
background-size: 90%;
}
@include DarkThemeOverride {
&::after {
/* @load-async */
background-image: uiResource("icons/blueprint_marker_inverted.png") !important;
}
}
}
}
&.completed {
opacity: 0.5;
}
}
}
#ingame_HUD_PinnedShapes {
position: absolute;
@include S(left, 9px);
@include S(top, 150px);
@include PlainText;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
> .shape {
position: relative;
display: grid;
align-items: center;
justify-content: center;
grid-template-columns: auto 1fr;
grid-template-rows: 1fr 1fr;
@include S(margin-bottom, 4px);
color: #333438;
&.removable {
pointer-events: all;
}
> canvas {
@include S(width, 25px);
@include S(height, 25px);
grid-column: 1 / 2;
grid-row: 1 / 3;
pointer-events: none;
z-index: 20;
position: relative;
}
> .amountLabel,
> .goalLabel {
@include S(margin-left, 5px);
@include SuperSmallText;
font-weight: bold;
display: inline-flex;
align-items: center;
flex-direction: row;
grid-column: 2 / 3;
@include S(height, 9px);
@include DarkThemeOverride {
color: #eee;
}
}
> .goalLabel {
@include S(font-size, 7px);
opacity: 0.9;
align-self: start;
justify-self: start;
font-weight: normal;
grid-row: 2 / 3;
}
> .amountLabel {
align-self: end;
justify-self: start;
grid-row: 1 / 2;
}
> .infoButton {
@include S(width, 8px);
@include S(height, 8px);
position: absolute;
opacity: 0.7;
@include S(top, 13px);
@include S(left, -7px);
@include DarkThemeInvert;
@include IncreasedClickArea(2px);
transition: opacity 0.12s ease-in-out;
z-index: 100;
&:hover {
opacity: 0.8;
}
& {
/* @load-async */
background: uiResource("icons/info_button.png") center center / 95% no-repeat;
}
}
> .unpinButton {
@include S(width, 8px);
@include S(height, 8px);
position: absolute;
opacity: 0.7;
@include S(top, 3px);
@include S(left, -7px);
@include DarkThemeInvert;
@include IncreasedClickArea(2px);
transition: opacity 0.12s ease-in-out;
z-index: 100;
&:hover {
opacity: 0.8;
}
& {
/* @load-async */
background: uiResource("icons/unpin_shape.png") center center / 80% no-repeat;
}
}
&.goal,
&.blueprint {
.amountLabel::after {
content: " ";
position: absolute;
display: inline-block;
@include S(width, 8px);
@include S(height, 8px);
@include S(top, 4px);
@include S(left, -7px);
background: center center / contain no-repeat;
}
&.goal .amountLabel {
&::after {
/* @load-async */
background-image: uiResource("icons/current_goal_marker.png");
background-size: 90%;
}
@include DarkThemeOverride {
&::after {
/* @load-async */
background-image: uiResource("icons/current_goal_marker_inverted.png") !important;
}
}
}
&.blueprint .amountLabel {
&::after {
/* @load-async */
background-image: uiResource("icons/blueprint_marker.png");
background-size: 90%;
}
@include DarkThemeOverride {
&::after {
/* @load-async */
background-image: uiResource("icons/blueprint_marker_inverted.png") !important;
}
}
}
}
&.completed {
opacity: 0.5;
}
}
}

4
src/css/ingame_hud/puzzle_complete_notification.scss
View File

@ -97,7 +97,9 @@
@include S(margin, 0, 10px);
box-sizing: border-box;
border-radius: 50%;
transition: opacity 0.12s ease-in-out, background-color 0.12s ease-in-out;
transition:
opacity 0.12s ease-in-out,
background-color 0.12s ease-in-out;
@include IncreasedClickArea(0px);
&.liked-yes {

142
src/css/ingame_hud/puzzle_editor_settings.scss
View File

@ -1,71 +1,71 @@
#ingame_HUD_PuzzleEditorSettings {
position: absolute;
background: $ingameHudBg;
@include S(padding, 10px);
@include S(bottom, 60px);
@include S(left, 10px);
@include SuperSmallText;
color: #eee;
display: flex;
flex-direction: column;
@include S(border-radius, $globalBorderRadius);
> .section {
> label {
text-transform: uppercase;
}
.plusMinus {
@include S(margin-top, 5px);
display: grid;
grid-template-columns: 1fr auto auto auto;
align-items: center;
@include S(grid-gap, 5px);
label {
@include S(margin-right, 10px);
}
button {
@include PlainText;
@include S(padding, 0);
display: flex;
align-items: center;
justify-content: center;
@include S(width, 15px);
@include S(height, 15px);
@include IncreasedClickArea(0px);
}
.value {
text-align: center;
@include S(min-width, 15px);
}
}
> .buttons {
> .buttonBar {
display: flex;
align-items: center;
@include S(margin-top, 10px);
> button {
@include S(margin-right, 4px);
@include SuperSmallText;
&:last-child {
margin-right: 0;
}
}
}
> .buildingsButton {
display: grid;
align-items: center;
@include S(margin-top, 4px);
> button {
@include SuperSmallText;
}
}
}
}
}
#ingame_HUD_PuzzleEditorSettings {
position: absolute;
background: $ingameHudBg;
@include S(padding, 10px);
@include S(bottom, 60px);
@include S(left, 10px);
@include SuperSmallText;
color: #eee;
display: flex;
flex-direction: column;
@include S(border-radius, $globalBorderRadius);
> .section {
> label {
text-transform: uppercase;
}
.plusMinus {
@include S(margin-top, 5px);
display: grid;
grid-template-columns: 1fr auto auto auto;
align-items: center;
@include S(grid-gap, 5px);
label {
@include S(margin-right, 10px);
}
button {
@include PlainText;
@include S(padding, 0);
display: flex;
align-items: center;
justify-content: center;
@include S(width, 15px);
@include S(height, 15px);
@include IncreasedClickArea(0px);
}
.value {
text-align: center;
@include S(min-width, 15px);
}
}
> .buttons {
> .buttonBar {
display: flex;
align-items: center;
@include S(margin-top, 10px);
> button {
@include S(margin-right, 4px);
@include SuperSmallText;
&:last-child {
margin-right: 0;
}
}
}
> .buildingsButton {
display: grid;
align-items: center;
@include S(margin-top, 4px);
> button {
@include SuperSmallText;
}
}
}
}
}

100
src/css/ingame_hud/sandbox_controller.scss
View File

@ -1,50 +1,50 @@
#ingame_HUD_SandboxController {
position: absolute;
background: $ingameHudBg;
@include S(padding, 5px);
@include S(bottom, 10px);
@include S(left, 10px);
@include SuperSmallText;
color: #eee;
display: flex;
flex-direction: column;
> label {
text-transform: uppercase;
}
.sandboxHint {
color: #aaa;
}
.plusMinus {
@include S(margin-top, 4px);
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
@include S(grid-gap, 4px);
button {
@include PlainText;
@include S(padding, 0);
display: flex;
align-items: center;
justify-content: center;
@include S(width, 15px);
@include S(height, 15px);
@include IncreasedClickArea(0px);
}
}
.additionalOptions {
display: flex;
flex-direction: column;
@include S(margin-top, 10px);
button {
@include S(margin-bottom, 2px);
@include IncreasedClickArea(0px);
@include SuperSmallText;
}
}
}
#ingame_HUD_SandboxController {
position: absolute;
background: $ingameHudBg;
@include S(padding, 5px);
@include S(bottom, 10px);
@include S(left, 10px);
@include SuperSmallText;
color: #eee;
display: flex;
flex-direction: column;
> label {
text-transform: uppercase;
}
.sandboxHint {
color: #aaa;
}
.plusMinus {
@include S(margin-top, 4px);
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
@include S(grid-gap, 4px);
button {
@include PlainText;
@include S(padding, 0);
display: flex;
align-items: center;
justify-content: center;
@include S(width, 15px);
@include S(height, 15px);
@include IncreasedClickArea(0px);
}
}
.additionalOptions {
display: flex;
flex-direction: column;
@include S(margin-top, 10px);
button {
@include S(margin-bottom, 2px);
@include IncreasedClickArea(0px);
@include SuperSmallText;
}
}
}

134
src/css/ingame_hud/settings_menu.scss
View File

@ -1,67 +1,67 @@
#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);
content: "";
opacity: 0.8;
@include S(width, 35px);
@include S(height, 35px);
&.settings {
/* @load-async */
background-image: uiResource("icons/settings_menu_settings.png");
}
&.menu {
/* @load-async */
background-image: uiResource("icons/settings_menu_exit.png");
}
&:hover {
opacity: 0.6;
}
& {
/* @load-async */
background: uiResource("icons/settings_menu_play.png") center top / contain no-repeat;
}
}
}
}
#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);
content: "";
opacity: 0.8;
@include S(width, 35px);
@include S(height, 35px);
&.settings {
/* @load-async */
background-image: uiResource("icons/settings_menu_settings.png");
}
&.menu {
/* @load-async */
background-image: uiResource("icons/settings_menu_exit.png");
}
&:hover {
opacity: 0.6;
}
& {
/* @load-async */
background: uiResource("icons/settings_menu_play.png") center top / contain no-repeat;
}
}
}
}

310
src/css/ingame_hud/shape_viewer.scss
View File

@ -1,155 +1,155 @@
#ingame_HUD_ShapeViewer {
$dims: 170px;
.content {
display: flex;
@include S(width, $dims);
width: 100%;
flex-direction: column;
overflow-x: hidden;
&[data-layers="3"],
&[data-layers="4"] {
@include S(width, 2 * $dims);
.renderArea {
display: grid;
grid-template-columns: 1fr 1fr;
@include S(grid-row-gap, 15px);
}
}
.renderArea {
display: grid;
width: 100%;
@include S(grid-row-gap, 10px);
align-items: center;
justify-items: center;
}
.infoArea {
align-self: flex-end;
@include S(margin-top, 10px);
display: flex;
flex-direction: column;
overflow: hidden;
button {
@include S(margin, 0);
@include PlainText;
}
}
.layer {
position: relative;
background: #eee;
@include DarkThemeOverride {
background: rgba(0, 10, 20, 0.2);
}
@include S(width, 150px);
@include S(height, 100px);
display: flex;
align-items: center;
justify-content: center;
@include S(border-radius, $globalBorderRadius);
> canvas {
@include S(width, 50px);
@include S(height, 50px);
}
.quad {
position: absolute;
width: 50%;
height: 50%;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
$arrowDims: 23px;
$spacing: 9px;
@include S(padding, 6px);
.colorLabel {
text-transform: uppercase;
@include SuperSmallText;
@include S(font-size, 9px);
}
.emptyLabel {
text-transform: uppercase;
@include SuperSmallText;
@include S(font-size, 9px);
}
&::after {
content: " ";
background: rgba(0, 10, 20, 0.5);
@include S(width, $arrowDims);
@include S(height, 1px);
position: absolute;
transform: rotate(45deg);
transform-origin: 50% 50%;
}
@include DarkThemeOverride {
&::after {
background: rgba(255, 255, 255, 0.5);
}
}
&.quad-0 {
right: 0;
top: 0;
align-items: flex-start;
justify-content: flex-end;
&::after {
@include S(left, $spacing);
@include S(bottom, $arrowDims / 2 + $spacing);
transform: rotate(-45deg);
}
}
&.quad-1 {
bottom: 0;
right: 0;
align-items: flex-end;
justify-content: flex-end;
&::after {
@include S(left, $spacing);
@include S(top, $arrowDims / 2 + $spacing);
transform: rotate(45deg);
}
}
&.quad-2 {
bottom: 0;
left: 0;
align-items: flex-end;
justify-content: flex-start;
&::after {
@include S(right, $spacing);
@include S(top, $arrowDims / 2 + $spacing);
transform: rotate(135deg);
}
}
&.quad-3 {
top: 0;
left: 0;
align-items: flex-start;
justify-content: flex-start;
&::after {
@include S(right, $spacing);
@include S(bottom, $arrowDims / 2 + $spacing);
transform: rotate(225deg);
}
}
}
}
}
}
#ingame_HUD_ShapeViewer {
$dims: 170px;
.content {
display: flex;
@include S(width, $dims);
width: 100%;
flex-direction: column;
overflow-x: hidden;
&[data-layers="3"],
&[data-layers="4"] {
@include S(width, 2 * $dims);
.renderArea {
display: grid;
grid-template-columns: 1fr 1fr;
@include S(grid-row-gap, 15px);
}
}
.renderArea {
display: grid;
width: 100%;
@include S(grid-row-gap, 10px);
align-items: center;
justify-items: center;
}
.infoArea {
align-self: flex-end;
@include S(margin-top, 10px);
display: flex;
flex-direction: column;
overflow: hidden;
button {
@include S(margin, 0);
@include PlainText;
}
}
.layer {
position: relative;
background: #eee;
@include DarkThemeOverride {
background: rgba(0, 10, 20, 0.2);
}
@include S(width, 150px);
@include S(height, 100px);
display: flex;
align-items: center;
justify-content: center;
@include S(border-radius, $globalBorderRadius);
> canvas {
@include S(width, 50px);
@include S(height, 50px);
}
.quad {
position: absolute;
width: 50%;
height: 50%;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
$arrowDims: 23px;
$spacing: 9px;
@include S(padding, 6px);
.colorLabel {
text-transform: uppercase;
@include SuperSmallText;
@include S(font-size, 9px);
}
.emptyLabel {
text-transform: uppercase;
@include SuperSmallText;
@include S(font-size, 9px);
}
&::after {
content: " ";
background: rgba(0, 10, 20, 0.5);
@include S(width, $arrowDims);
@include S(height, 1px);
position: absolute;
transform: rotate(45deg);
transform-origin: 50% 50%;
}
@include DarkThemeOverride {
&::after {
background: rgba(255, 255, 255, 0.5);
}
}
&.quad-0 {
right: 0;
top: 0;
align-items: flex-start;
justify-content: flex-end;
&::after {
@include S(left, $spacing);
@include S(bottom, $arrowDims / 2 + $spacing);
transform: rotate(-45deg);
}
}
&.quad-1 {
bottom: 0;
right: 0;
align-items: flex-end;
justify-content: flex-end;
&::after {
@include S(left, $spacing);
@include S(top, $arrowDims / 2 + $spacing);
transform: rotate(45deg);
}
}
&.quad-2 {
bottom: 0;
left: 0;
align-items: flex-end;
justify-content: flex-start;
&::after {
@include S(right, $spacing);
@include S(top, $arrowDims / 2 + $spacing);
transform: rotate(135deg);
}
}
&.quad-3 {
top: 0;
left: 0;
align-items: flex-start;
justify-content: flex-start;
&::after {
@include S(right, $spacing);
@include S(bottom, $arrowDims / 2 + $spacing);
transform: rotate(225deg);
}
}
}
}
}
}

670
src/css/ingame_hud/shop.scss
View File

@ -1,335 +1,335 @@
#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 {
& {
/* @load-async */
background: uiResource("icons/pin.png") center center / 95% no-repeat;
}
@include S(width, 12px);
@include S(height, 12px);
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.6;
$enabledOpacity: 0.6;
&:hover {
opacity: $enabledOpacity + 0.1;
}
&.alreadyPinned {
opacity: $disabledOpacity !important;
&:hover {
opacity: $disabledOpacity + 0.1 !important;
}
}
&.isGoal {
/* @load-async */
background: uiResource("icons/current_goal_marker.png") center center / 95%
no-repeat;
opacity: $disabledOpacity !important;
cursor: default;
pointer-events: none;
}
&.pinned {
opacity: $disabledOpacity;
& {
/* @load-async */
background: uiResource("icons/unpin_shape.png") center center / 75% no-repeat !important;
}
@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);
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;
}
}
button.showInfo {
/* @load-async */
background: uiResource("icons/info_button.png") center center / 95% no-repeat;
}
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);
transform: scale(1.02);
}
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 {
& {
/* @load-async */
background: uiResource("icons/pin.png") center center / 95% no-repeat;
}
@include S(width, 12px);
@include S(height, 12px);
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.6;
$enabledOpacity: 0.6;
&:hover {
opacity: $enabledOpacity + 0.1;
}
&.alreadyPinned {
opacity: $disabledOpacity !important;
&:hover {
opacity: $disabledOpacity + 0.1 !important;
}
}
&.isGoal {
/* @load-async */
background: uiResource("icons/current_goal_marker.png") center center / 95%
no-repeat;
opacity: $disabledOpacity !important;
cursor: default;
pointer-events: none;
}
&.pinned {
opacity: $disabledOpacity;
& {
/* @load-async */
background: uiResource("icons/unpin_shape.png") center center / 75% no-repeat !important;
}
@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);
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;
}
}
button.showInfo {
/* @load-async */
background: uiResource("icons/info_button.png") center center / 95% no-repeat;
}
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);
transform: scale(1.02);
}
100% {
}
}
}
}
&.maxLevel {
button.buy {
opacity: 0 !important;
}
.requirements {
display: none;
}
.description {
color: $colorGreenBright;
}
}
}
}
}

240
src/css/ingame_hud/tutorial_hints.scss
View File

@ -1,120 +1,120 @@
#ingame_HUD_TutorialHints {
position: absolute;
@include S(left, 10px);
@include S(bottom, 10px);
@include StyleBelowWidth(1430px) {
@include S(bottom, 50px);
}
display: flex;
flex-direction: column;
background: rgba(50, 60, 70, 0);
transition: all 0.2s ease-in-out;
pointer-events: all;
transition-property: background-color, transform, bottom, left;
@include S(padding, 5px);
video {
transition: all 0.2s ease-in-out;
transition-property: opacity, width;
@include S(width, 0px);
opacity: 0;
z-index: 10;
position: relative;
}
.header {
color: #333438;
display: grid;
align-items: center;
@include S(grid-gap, 2px);
grid-template-columns: 1fr;
@include S(margin-bottom, 3px);
z-index: 11;
position: relative;
> span {
@include DarkThemeInvert;
display: flex;
@include SuperSmallText;
justify-content: flex-start;
align-items: center;
&::before {
@include S(margin-right, 4px);
content: " ";
@include S(width, 12px);
@include S(height, 12px);
display: inline-block;
& {
/* @load-async */
background: uiResource("icons/help.png") center center / 95% no-repeat;
}
}
}
button.toggleHint {
@include PlainText;
@include IncreasedClickArea(0px);
}
}
button.toggleHint {
.hide {
display: none;
}
}
&.enlarged {
background: $ingameHudBg;
left: 50%;
bottom: 50%;
transform: translate(-50%, 50%);
&::before {
pointer-events: all;
content: " ";
position: fixed;
top: -1000px;
left: -1000px;
right: -1000px;
bottom: -1000px;
z-index: 0;
background: rgba($ingameHudBg, 0.3);
}
.header {
grid-template-columns: 1fr auto;
> span {
display: none;
}
button.toggleHint {
grid-column: 2 / 3;
}
}
video {
@include InlineAnimation(0.2s ease-in-out) {
0% {
opacity: 0;
@include S(width, 0px);
}
}
opacity: 1;
@include S(width, 500px);
}
button.toggleHint {
.hide {
display: block;
}
.show {
display: none;
}
}
}
}
#ingame_HUD_TutorialHints {
position: absolute;
@include S(left, 10px);
@include S(bottom, 10px);
@include StyleBelowWidth(1430px) {
@include S(bottom, 50px);
}
display: flex;
flex-direction: column;
background: rgba(50, 60, 70, 0);
transition: all 0.2s ease-in-out;
pointer-events: all;
transition-property: background-color, transform, bottom, left;
@include S(padding, 5px);
video {
transition: all 0.2s ease-in-out;
transition-property: opacity, width;
@include S(width, 0px);
opacity: 0;
z-index: 10;
position: relative;
}
.header {
color: #333438;
display: grid;
align-items: center;
@include S(grid-gap, 2px);
grid-template-columns: 1fr;
@include S(margin-bottom, 3px);
z-index: 11;
position: relative;
> span {
@include DarkThemeInvert;
display: flex;
@include SuperSmallText;
justify-content: flex-start;
align-items: center;
&::before {
@include S(margin-right, 4px);
content: " ";
@include S(width, 12px);
@include S(height, 12px);
display: inline-block;
& {
/* @load-async */
background: uiResource("icons/help.png") center center / 95% no-repeat;
}
}
}
button.toggleHint {
@include PlainText;
@include IncreasedClickArea(0px);
}
}
button.toggleHint {
.hide {
display: none;
}
}
&.enlarged {
background: $ingameHudBg;
left: 50%;
bottom: 50%;
transform: translate(-50%, 50%);
&::before {
pointer-events: all;
content: " ";
position: fixed;
top: -1000px;
left: -1000px;
right: -1000px;
bottom: -1000px;
z-index: 0;
background: rgba($ingameHudBg, 0.3);
}
.header {
grid-template-columns: 1fr auto;
> span {
display: none;
}
button.toggleHint {
grid-column: 2 / 3;
}
}
video {
@include InlineAnimation(0.2s ease-in-out) {
0% {
opacity: 0;
@include S(width, 0px);
}
}
opacity: 1;
@include S(width, 500px);
}
button.toggleHint {
.hide {
display: block;
}
.show {
display: none;
}
}
}
}

368
src/css/ingame_hud/unlock_notification.scss
View File

@ -1,184 +1,184 @@
#ingame_HUD_UnlockNotification {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
pointer-events: all;
& {
/* @load-async */
background: rgba(#333538, 0.98) uiResource("dialog_bg_pattern.png") top left / #{D(10px)} repeat;
}
@include InlineAnimation(0.1s ease-in-out) {
0% {
opacity: 0;
}
}
&.withinDemo {
> .dialog {
@include S(padding-top, 60px);
}
}
.dialog {
// background: rgba(#222428, 0.5);
@include S(border-radius, $globalBorderRadius);
@include S(padding, 30px);
@include InlineAnimation(0.5s ease-in-out) {
0% {
opacity: 0;
}
}
display: flex;
align-items: center;
flex-direction: column;
color: #fff;
text-align: center;
.title,
.subTitle {
@include SuperHeading;
text-transform: uppercase;
@include S(font-size, 40px);
@include InlineAnimation(0.5s ease-in-out) {
0% {
transform: translateY(-50vh);
}
50% {
transform: translateY(5vh);
}
75% {
transform: translateY(-2vh);
}
}
}
.subTitle {
@include PlainText;
display: inline-block;
@include S(margin, 5px, 0, 20px);
color: $colorGreenBright;
@include S(border-radius, $globalBorderRadius);
@include InlineAnimation(0.5s ease-in-out) {
0% {
transform: translateY(-60vh);
}
50% {
transform: translateY(6vh);
}
75% {
transform: translateY(-3vh);
}
}
}
.contents {
@include S(width, 400px);
@include InlineAnimation(0.5s ease-in-out) {
0% {
transform: translateX(-100vw);
}
50% {
transform: translateX(5vw);
}
75% {
transform: translateX(-2vw);
}
}
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
@include S(grid-gap, 10px);
.rewardName {
grid-column: 1 / 3;
display: none;
@include InlineAnimation(0.5s ease-in-out) {
0% {
transform: translateX(200vw);
}
50% {
transform: translateX(-10vw);
}
75% {
transform: translateX(4vw);
}
}
}
.rewardDesc {
grid-column: 1 / 3;
@include PlainText;
@include S(margin-bottom, 15px);
color: #aaacaf;
@include S(width, 400px);
text-align: left;
strong {
color: #fff;
}
}
.images {
display: flex;
.buildingExplanation {
@include S(width, 200px);
@include S(height, 200px);
display: inline-block;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
@include S(border-radius, $globalBorderRadius);
box-shadow: #{D(2px)} #{D(3px)} 0 0 rgba(0, 0, 0, 0.15);
}
}
}
button.close {
border: 0;
position: relative;
@include S(margin-top, 30px);
&:not(.unlocked) {
pointer-events: none;
opacity: 0.8;
cursor: default;
}
&.unlocked {
&::after {
animation: none !important;
}
}
&::after {
content: " ";
display: inline-block;
position: absolute;
top: 0;
left: 100%;
right: 0;
bottom: 0;
background: rgba(0, 10, 20, 0.8);
@include InlineAnimation(1.5s linear) {
0% {
left: 0;
}
100% {
left: 100%;
}
}
}
}
}
}
#ingame_HUD_UnlockNotification {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
pointer-events: all;
& {
/* @load-async */
background: rgba(#333538, 0.98) uiResource("dialog_bg_pattern.png") top left / #{D(10px)} repeat;
}
@include InlineAnimation(0.1s ease-in-out) {
0% {
opacity: 0;
}
}
&.withinDemo {
> .dialog {
@include S(padding-top, 60px);
}
}
.dialog {
// background: rgba(#222428, 0.5);
@include S(border-radius, $globalBorderRadius);
@include S(padding, 30px);
@include InlineAnimation(0.5s ease-in-out) {
0% {
opacity: 0;
}
}
display: flex;
align-items: center;
flex-direction: column;
color: #fff;
text-align: center;
.title,
.subTitle {
@include SuperHeading;
text-transform: uppercase;
@include S(font-size, 40px);
@include InlineAnimation(0.5s ease-in-out) {
0% {
transform: translateY(-50vh);
}
50% {
transform: translateY(5vh);
}
75% {
transform: translateY(-2vh);
}
}
}
.subTitle {
@include PlainText;
display: inline-block;
@include S(margin, 5px, 0, 20px);
color: $colorGreenBright;
@include S(border-radius, $globalBorderRadius);
@include InlineAnimation(0.5s ease-in-out) {
0% {
transform: translateY(-60vh);
}
50% {
transform: translateY(6vh);
}
75% {
transform: translateY(-3vh);
}
}
}
.contents {
@include S(width, 400px);
@include InlineAnimation(0.5s ease-in-out) {
0% {
transform: translateX(-100vw);
}
50% {
transform: translateX(5vw);
}
75% {
transform: translateX(-2vw);
}
}
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
@include S(grid-gap, 10px);
.rewardName {
grid-column: 1 / 3;
display: none;
@include InlineAnimation(0.5s ease-in-out) {
0% {
transform: translateX(200vw);
}
50% {
transform: translateX(-10vw);
}
75% {
transform: translateX(4vw);
}
}
}
.rewardDesc {
grid-column: 1 / 3;
@include PlainText;
@include S(margin-bottom, 15px);
color: #aaacaf;
@include S(width, 400px);
text-align: left;
strong {
color: #fff;
}
}
.images {
display: flex;
.buildingExplanation {
@include S(width, 200px);
@include S(height, 200px);
display: inline-block;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
@include S(border-radius, $globalBorderRadius);
box-shadow: #{D(2px)} #{D(3px)} 0 0 rgba(0, 0, 0, 0.15);
}
}
}
button.close {
border: 0;
position: relative;
@include S(margin-top, 30px);
&:not(.unlocked) {
pointer-events: none;
opacity: 0.8;
cursor: default;
}
&.unlocked {
&::after {
animation: none !important;
}
}
&::after {
content: " ";
display: inline-block;
position: absolute;
top: 0;
left: 100%;
right: 0;
bottom: 0;
background: rgba(0, 10, 20, 0.8);
@include InlineAnimation(1.5s linear) {
0% {
left: 0;
}
100% {
left: 100%;
}
}
}
}
}
}

244
src/css/ingame_hud/waypoints.scss
View File

@ -1,122 +1,122 @@
#ingame_HUD_Waypoints_Hint {
position: absolute;
@include S(right, 10px);
@include S(bottom, 10px);
display: flex;
flex-direction: column;
@include PlainText;
@include S(width, 150px);
background: $ingameHudBg;
@include S(padding, 7px);
color: #eee;
@include S(border-radius, $globalBorderRadius);
.desc {
@include SuperSmallText;
color: #babcbf;
.keybinding {
position: relative;
}
strong {
color: #fff;
}
}
}
#ingame_HUD_Waypoints {
position: absolute;
@include S(right, 10px);
@include S(top, 45px);
display: flex;
flex-direction: column;
@include DarkThemeInvert();
max-height: 50vh;
overflow-x: hidden;
overflow-y: auto;
pointer-events: all;
@include S(padding-right, 5px);
@include S(padding-bottom, 5px);
@include S(padding-top, 5px);
// Scrollbar
&::-webkit-scrollbar {
@include S(width, 2px);
@include S(height, 6px);
}
.waypoint {
@include SuperSmallText;
pointer-events: all;
cursor: pointer;
color: #333438;
@include S(padding-left, 11px);
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
& {
/* @load-async */
background: uiResource("icons/waypoint.png") left 50% / #{D(8px)} no-repeat;
}
&.layer--wires {
/* @load-async */
background-image: uiResource("icons/waypoint_wires.png");
}
opacity: 0.7;
@include S(margin-bottom, 1px);
font-weight: bold;
&:hover {
opacity: 0.8;
}
.editButton {
@include S(width, 10px);
@include S(height, 10px);
@include S(margin-left, 4px);
& {
/* @load-async */
background: uiResource("icons/edit_key.png") center center / 70% no-repeat;
}
pointer-events: all;
cursor: pointer;
position: relative;
@include IncreasedClickArea(2px);
transition: transform 0.04s ease-in-out;
&:hover {
transform: scale(1.5);
}
}
&.hub {
// Transform because there is a canvas before
@include S(margin-left, -2px);
grid-template-columns: auto 1fr;
background: none !important;
@include S(padding-left, 0);
canvas {
@include S(width, 12px);
@include S(height, 12px);
@include S(margin-right, 1px);
}
}
&.shapeIcon {
canvas {
@include S(width, 15px);
@include S(height, 15px);
pointer-events: none;
// Double invert, to make sure it has the right color
@include DarkThemeInvert();
}
}
}
}
#ingame_HUD_Waypoints_Hint {
position: absolute;
@include S(right, 10px);
@include S(bottom, 10px);
display: flex;
flex-direction: column;
@include PlainText;
@include S(width, 150px);
background: $ingameHudBg;
@include S(padding, 7px);
color: #eee;
@include S(border-radius, $globalBorderRadius);
.desc {
@include SuperSmallText;
color: #babcbf;
.keybinding {
position: relative;
}
strong {
color: #fff;
}
}
}
#ingame_HUD_Waypoints {
position: absolute;
@include S(right, 10px);
@include S(top, 45px);
display: flex;
flex-direction: column;
@include DarkThemeInvert();
max-height: 50vh;
overflow-x: hidden;
overflow-y: auto;
pointer-events: all;
@include S(padding-right, 5px);
@include S(padding-bottom, 5px);
@include S(padding-top, 5px);
// Scrollbar
&::-webkit-scrollbar {
@include S(width, 2px);
@include S(height, 6px);
}
.waypoint {
@include SuperSmallText;
pointer-events: all;
cursor: pointer;
color: #333438;
@include S(padding-left, 11px);
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
& {
/* @load-async */
background: uiResource("icons/waypoint.png") left 50% / #{D(8px)} no-repeat;
}
&.layer--wires {
/* @load-async */
background-image: uiResource("icons/waypoint_wires.png");
}
opacity: 0.7;
@include S(margin-bottom, 1px);
font-weight: bold;
&:hover {
opacity: 0.8;
}
.editButton {
@include S(width, 10px);
@include S(height, 10px);
@include S(margin-left, 4px);
& {
/* @load-async */
background: uiResource("icons/edit_key.png") center center / 70% no-repeat;
}
pointer-events: all;
cursor: pointer;
position: relative;
@include IncreasedClickArea(2px);
transition: transform 0.04s ease-in-out;
&:hover {
transform: scale(1.5);
}
}
&.hub {
// Transform because there is a canvas before
@include S(margin-left, -2px);
grid-template-columns: auto 1fr;
background: none !important;
@include S(padding-left, 0);
canvas {
@include S(width, 12px);
@include S(height, 12px);
@include S(margin-right, 1px);
}
}
&.shapeIcon {
canvas {
@include S(width, 15px);
@include S(height, 15px);
pointer-events: none;
// Double invert, to make sure it has the right color
@include DarkThemeInvert();
}
}
}
}

262
src/css/main.scss
View File

@ -1,131 +1,131 @@
// Control here whether to inline all resources or instead load them
@function uiResource($pth) {
@if (str-index($string: $pth, $substring: ".noinline")) {
@return resolve($pth);
}
@return inline($pth);
}
@import "resources";
@import "trigonometry";
@import "material_colors";
@import "dynamic_ui";
@import "variables";
@import "mixins";
@import "common";
@import "animations";
@import "game_state";
@import "textual_game_state";
@import "changelog_skins";
@import "states/preload";
@import "states/main_menu";
@import "states/ingame";
@import "states/keybindings";
@import "states/settings";
@import "states/about";
@import "states/mobile_warning";
@import "states/changelog";
@import "states/puzzle_menu";
@import "states/mods";
@import "ingame_hud/buildings_toolbar";
@import "ingame_hud/building_placer";
@import "ingame_hud/beta_overlay";
@import "ingame_hud/keybindings_overlay";
@import "ingame_hud/unlock_notification";
@import "ingame_hud/shop";
@import "ingame_hud/game_menu";
@import "ingame_hud/dialogs";
@import "ingame_hud/vignette_overlay";
@import "ingame_hud/statistics";
@import "ingame_hud/pinned_shapes";
@import "ingame_hud/notifications";
@import "ingame_hud/settings_menu";
@import "ingame_hud/debug_info";
@import "ingame_hud/entity_debugger";
@import "ingame_hud/tutorial_hints";
@import "ingame_hud/blueprint_placer";
@import "ingame_hud/waypoints";
@import "ingame_hud/interactive_tutorial";
@import "ingame_hud/color_blind_helper";
@import "ingame_hud/shape_viewer";
@import "ingame_hud/sandbox_controller";
@import "ingame_hud/puzzle_back_to_menu";
@import "ingame_hud/puzzle_editor_review";
@import "ingame_hud/puzzle_dlc_logo";
@import "ingame_hud/puzzle_editor_controls";
@import "ingame_hud/puzzle_editor_settings";
@import "ingame_hud/puzzle_play_settings";
@import "ingame_hud/puzzle_play_metadata";
@import "ingame_hud/puzzle_complete_notification";
@import "ingame_hud/puzzle_next";
// prettier-ignore
$elements:
// Base
ingame_Canvas,
ingame_VignetteOverlay,
ingame_HUD_PuzzleDLCLogo,
// Ingame overlays
ingame_HUD_Waypoints,
ingame_HUD_PlacementHints,
ingame_HUD_PlacerVariants,
// Regular hud
ingame_HUD_PinnedShapes,
ingame_HUD_GameMenu,
ingame_HUD_KeybindingOverlay,
ingame_HUD_PuzzleBackToMenu,
ingame_HUD_PuzzleNextPuzzle,
ingame_HUD_PuzzleEditorReview,
ingame_HUD_PuzzleEditorControls,
ingame_HUD_PuzzleEditorTitle,
ingame_HUD_PuzzleEditorSettings,
ingame_HUD_PuzzlePlaySettings,
ingame_HUD_PuzzlePlayMetadata,
ingame_HUD_PuzzlePlayTitle,
ingame_HUD_Notifications,
ingame_HUD_DebugInfo,
ingame_HUD_EntityDebugger,
ingame_HUD_TutorialHints,
ingame_HUD_InteractiveTutorial,
ingame_HUD_BuildingsToolbar,
ingame_HUD_wires_toolbar,
ingame_HUD_BlueprintPlacer,
ingame_HUD_Waypoints_Hint,
ingame_HUD_WatermarkClicker,
ingame_HUD_ColorBlindBelowTileHelper,
ingame_HUD_SandboxController,
// Overlays
ingame_HUD_BetaOverlay,
// Dialogs
ingame_HUD_Shop,
ingame_HUD_Statistics,
ingame_HUD_ShapeViewer,
ingame_HUD_UnlockNotification,
ingame_HUD_PuzzleCompleteNotification,
ingame_HUD_SettingsMenu,
ingame_HUD_ModalDialogs;
$zindex: 100;
@each $elem in $elements {
##{$elem} {
z-index: $zindex;
}
$zindex: $zindex + 10;
}
body.uiHidden {
> div:not(.ingameDialog):not(#ingame_HUD_SettingsMenu):not(#ingame_HUD_ModalDialogs):not(
#ingame_HUD_UnlockNotification
):not(#ingame_HUD_PuzzleCompleteNotification) {
display: none !important;
}
}
// Control here whether to inline all resources or instead load them
@function uiResource($pth) {
@if (str-index($string: $pth, $substring: ".noinline")) {
@return resolve($pth);
}
@return inline($pth);
}
@import "resources";
@import "trigonometry";
@import "material_colors";
@import "dynamic_ui";
@import "variables";
@import "mixins";
@import "common";
@import "animations";
@import "game_state";
@import "textual_game_state";
@import "changelog_skins";
@import "states/preload";
@import "states/main_menu";
@import "states/ingame";
@import "states/keybindings";
@import "states/settings";
@import "states/about";
@import "states/mobile_warning";
@import "states/changelog";
@import "states/puzzle_menu";
@import "states/mods";
@import "ingame_hud/buildings_toolbar";
@import "ingame_hud/building_placer";
@import "ingame_hud/beta_overlay";
@import "ingame_hud/keybindings_overlay";
@import "ingame_hud/unlock_notification";
@import "ingame_hud/shop";
@import "ingame_hud/game_menu";
@import "ingame_hud/dialogs";
@import "ingame_hud/vignette_overlay";
@import "ingame_hud/statistics";
@import "ingame_hud/pinned_shapes";
@import "ingame_hud/notifications";
@import "ingame_hud/settings_menu";
@import "ingame_hud/debug_info";
@import "ingame_hud/entity_debugger";
@import "ingame_hud/tutorial_hints";
@import "ingame_hud/blueprint_placer";
@import "ingame_hud/waypoints";
@import "ingame_hud/interactive_tutorial";
@import "ingame_hud/color_blind_helper";
@import "ingame_hud/shape_viewer";
@import "ingame_hud/sandbox_controller";
@import "ingame_hud/puzzle_back_to_menu";
@import "ingame_hud/puzzle_editor_review";
@import "ingame_hud/puzzle_dlc_logo";
@import "ingame_hud/puzzle_editor_controls";
@import "ingame_hud/puzzle_editor_settings";
@import "ingame_hud/puzzle_play_settings";
@import "ingame_hud/puzzle_play_metadata";
@import "ingame_hud/puzzle_complete_notification";
@import "ingame_hud/puzzle_next";
// prettier-ignore
$elements:
// Base
ingame_Canvas,
ingame_VignetteOverlay,
ingame_HUD_PuzzleDLCLogo,
// Ingame overlays
ingame_HUD_Waypoints,
ingame_HUD_PlacementHints,
ingame_HUD_PlacerVariants,
// Regular hud
ingame_HUD_PinnedShapes,
ingame_HUD_GameMenu,
ingame_HUD_KeybindingOverlay,
ingame_HUD_PuzzleBackToMenu,
ingame_HUD_PuzzleNextPuzzle,
ingame_HUD_PuzzleEditorReview,
ingame_HUD_PuzzleEditorControls,
ingame_HUD_PuzzleEditorTitle,
ingame_HUD_PuzzleEditorSettings,
ingame_HUD_PuzzlePlaySettings,
ingame_HUD_PuzzlePlayMetadata,
ingame_HUD_PuzzlePlayTitle,
ingame_HUD_Notifications,
ingame_HUD_DebugInfo,
ingame_HUD_EntityDebugger,
ingame_HUD_TutorialHints,
ingame_HUD_InteractiveTutorial,
ingame_HUD_BuildingsToolbar,
ingame_HUD_wires_toolbar,
ingame_HUD_BlueprintPlacer,
ingame_HUD_Waypoints_Hint,
ingame_HUD_WatermarkClicker,
ingame_HUD_ColorBlindBelowTileHelper,
ingame_HUD_SandboxController,
// Overlays
ingame_HUD_BetaOverlay,
// Dialogs
ingame_HUD_Shop,
ingame_HUD_Statistics,
ingame_HUD_ShapeViewer,
ingame_HUD_UnlockNotification,
ingame_HUD_PuzzleCompleteNotification,
ingame_HUD_SettingsMenu,
ingame_HUD_ModalDialogs;
$zindex: 100;
@each $elem in $elements {
##{$elem} {
z-index: $zindex;
}
$zindex: $zindex + 10;
}
body.uiHidden {
> div:not(.ingameDialog):not(#ingame_HUD_SettingsMenu):not(#ingame_HUD_ModalDialogs):not(
#ingame_HUD_UnlockNotification
):not(#ingame_HUD_PuzzleCompleteNotification) {
display: none !important;
}
}

586
src/css/mixins.scss
View File

@ -1,292 +1,294 @@
// ----------------------------------------
/* Forces an element to get rendered on its own layer, increasing
the performance when animated. Use only transform and opacity in animations! */
@mixin FastAnimation {
will-change: transform, opacity, filter;
// transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
// Helper which includes the translateZ webkit fix, use together with Fast animation
// $hardwareAcc: translateZ(0);
$hardwareAcc: null;
// ----------------------------------------
/** Increased click area for this element, helpful on mobile */
@mixin IncreasedClickArea($size) {
// &::after {
// content: "";
// position: absolute;
// top: #{D(-$size)};
// bottom: #{D(-$size)};
// left: #{D(-$size)};
// right: #{D(-$size)};
// // background: rgba(255, 0, 0, 0.3);
// }
}
button,
.increasedClickArea {
position: relative;
@include IncreasedClickArea(15px);
}
// ----------------------------------------
/* Duplicates an animation and adds two classes .<classPrefix>Even and .<classPrefix>Odd which uses the
animation. This can be used to replay the animation by toggling between the classes, because
it is not possible to restart a css animation */
@mixin MakeAnimationWrappedEvenOdd($duration, $classPrefix: "anim", $childSelector: "") {
$animName: autogen_anim_#{unique-id()};
@at-root {
@keyframes #{$animName}_even {
@content;
}
@keyframes #{$animName}_odd {
@content;
}
}
&.#{$classPrefix}Even #{$childSelector} {
animation: #{$animName}_even $duration;
}
&.#{$classPrefix}Odd #{$childSelector} {
animation: #{$animName}_odd $duration;
}
}
// ----------------------------------------
/* Allows to use and define an animation without specifying its name */
@mixin InlineAnimation($duration) {
$animName: autogen_anim_#{unique-id()};
@at-root {
@keyframes #{$animName} {
@content;
}
}
animation: $animName $duration !important;
}
// ----------------------------------------
/* Animation prefab for a double bounce pop-in animation, useful for dialogs */
@mixin DoubleBounceAnim($duration: 0.5s ease-in-out, $amount: 0.2, $initialOpacity: 0) {
@include InlineAnimation($duration) {
0% {
opacity: $initialOpacity;
transform: scale(0) $hardwareAcc;
}
25% {
opacity: 0.5;
transform: scale(1 + $amount) $hardwareAcc;
}
50% {
opacity: 1;
transform: scale(1 - $amount * 0.5) $hardwareAcc;
}
75% {
transform: scale(1 + $amount * 0.25) $hardwareAcc;
}
100% {
transform: scale(1) $hardwareAcc;
}
}
opacity: 1;
}
// ----------------------------------------
/* Automatically transforms the game state if a hardware keyboard is open */
@mixin TransformToMatchKeyboard {
transition: transform 0.2s ease-in-out;
@include AndroidHwKeyboardOpen {
@include VerticalStyle {
transform: translateY(#{D(-125px)}) $hardwareAcc;
}
@include HorizontalStyle {
transform: translateY(#{D(-100px)}) $hardwareAcc;
}
}
}
// ----------------------------------------
/* Define a style which is only applied when the viewport is at least X pixels wide */
@mixin StyleAtWidth($minW) {
@media (min-width: #{$minW}) {
@content;
}
}
// ----------------------------------------
/* Define a style which is only applied when the viewport is at least X pixels height */
@mixin StyleAtHeight($minH) {
@media (min-height: #{$minH}) {
@content;
}
}
// ----------------------------------------
/* Define a style which is only applied when the viewport has at least the given dimensions */
@mixin StyleAtDims($minW, $minH) {
@media (min-height: #{$minH}) and (min-width: #{$minW}) {
@content;
}
}
// ----------------------------------------
/* Define a style which is only applied when the viewport has at maximum the given dimensions */
@mixin StyleBelowDims($maxW, $maxH) {
@media (max-height: #{$maxH}) and (max-width: #{$maxW}) {
@content;
}
}
// ----------------------------------------
/* Define a style which is only applied when the viewport has at maximum the given height */
@mixin StyleBelowHeight($maxH) {
@media (max-height: #{$maxH}) {
@content;
}
}
// ----------------------------------------
/* Define a style which is only applied when the viewport has at maximum the given width */
@mixin StyleBelowWidth($maxW) {
@media (max-width: #{$maxW}) {
@content;
}
}
// ----------------------------------------
// Dynamic graphics quality styles
@mixin BoxShadow3D($bgColor, $size: 3px, $pressEffect: true) {
background-color: $bgColor;
$borderSize: 1.5px;
$borderColor: rgb(18, 20, 24);
// box-shadow: 0 0 0 D($borderSize) $borderColor, 0 D($size) 0 0px rgba(mix(darken($bgColor, 9), #b0e2ff, 95%), 1),
// 0 D($size) 0 D($borderSize) $borderColor;
// box-shadow: 0 0 0 D($borderSize) $borderColor, 0 D($size) 0 D($borderSize) $borderColor,
// D(-$size * 1.5) D($size * 2) 0 D($borderSize) rgba(0, 0, 0, 0.1);
// transition: box-shadow 0.1s ease-in-out;
// @if $pressEffect {
// &.pressed {
// transform: none !important;
// $pSize: max(0, $size - 1.5px);
// transition: none !important;
// box-shadow: 0 0 0 D($borderSize) $borderColor, 0 D($pSize) 0 0px rgba(mix(darken($bgColor, 9), #b0e2ff, 95%), 1),
// 0 D($pSize) 0 D($borderSize) $borderColor;
// top: D($size - $pSize);
// }
// }
}
@mixin BorderRadius($v1: 2px, $v2: "", $v3: "", $v4: "") {
@include S(border-radius, $v1, $v2, $v3, $v4);
}
@mixin BoxShadow($x, $y, $blur, $offset, $color) {
box-shadow: D($x) D($y) D($blur) D($offset) $color;
}
@mixin DropShadow($yOffset: 2px, $blur: 2px, $amount: 0.2) {
@include BoxShadow(0, $yOffset, $blur, 0, rgba(#000, $amount));
}
@mixin TextShadow($yOffset: 2px, $blur: 1px, $amount: 0.6) {
text-shadow: 0 D($yOffset) D($blur) rgba(#000, $amount);
}
@mixin Button3D($bgColor, $pressEffect: true) {
@include BoxShadow3D($bgColor, 2px, $pressEffect);
}
@mixin ButtonDisabled3D($bgColor) {
@include BoxShadow3D($bgColor, 0.5px, false);
}
@mixin BoxShadowInset($bgColor, $size: 3px) {
background-color: $bgColor;
$borderSize: 1px;
$borderColor: rgb(15, 19, 24);
box-shadow: 0 0 0 D($borderSize) $borderColor, 0 D($size) 0 rgba(#fff, 0.07);
border-top: D($size) solid rgba(#000, 0.1);
//, 0 D($size) 0 0px rgba(mix(darken($bgColor, 9), #b0e2ff, 95%), 1),
// 0 D($size + $borderSize) 0 0 $borderColor;
}
@mixin TextShadow3D($color: rgb(222, 234, 238), $borderColor: #000) {
color: $color;
}
// ----------------------------------------
/* String replacement */
@function str-replace($string, $search, $replace: "") {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace +
str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
@mixin BounceInFromSide($mul, $duration: 0.18s ease-in-out) {
@include InlineAnimation($duration) {
0% {
transform: translateY(#{D(-100px * $mul)}) scale(0.9);
opacity: 0;
}
100% {
opacity: 1;
transform: none;
}
}
opacity: 1;
transform: none;
}
@mixin BreakText {
word-wrap: break-word;
word-break: break-all;
overflow-wrap: break-all;
}
@mixin SupportsAndroidNotchQuery {
@supports (color: constant(--notch-inset-left)) {
@content;
}
}
@mixin SupportsiOsNotchQuery {
@supports (color: env(safe-area-inset-left, 0px)) {
@content;
}
}
@mixin DarkThemeOverride {
@at-root html[data-theme="dark"] &,
&[data-theme="dark"] {
@content;
}
}
@mixin DarkThemeInvert {
@include DarkThemeOverride {
filter: invert(1);
}
}
// ----------------------------------------
/* Forces an element to get rendered on its own layer, increasing
the performance when animated. Use only transform and opacity in animations! */
@mixin FastAnimation {
will-change: transform, opacity, filter;
// transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
// Helper which includes the translateZ webkit fix, use together with Fast animation
// $hardwareAcc: translateZ(0);
$hardwareAcc: null;
// ----------------------------------------
/** Increased click area for this element, helpful on mobile */
@mixin IncreasedClickArea($size) {
// &::after {
// content: "";
// position: absolute;
// top: #{D(-$size)};
// bottom: #{D(-$size)};
// left: #{D(-$size)};
// right: #{D(-$size)};
// // background: rgba(255, 0, 0, 0.3);
// }
}
button,
.increasedClickArea {
position: relative;
@include IncreasedClickArea(15px);
}
// ----------------------------------------
/* Duplicates an animation and adds two classes .<classPrefix>Even and .<classPrefix>Odd which uses the
animation. This can be used to replay the animation by toggling between the classes, because
it is not possible to restart a css animation */
@mixin MakeAnimationWrappedEvenOdd($duration, $classPrefix: "anim", $childSelector: "") {
$animName: autogen_anim_#{unique-id()};
@at-root {
@keyframes #{$animName}_even {
@content;
}
@keyframes #{$animName}_odd {
@content;
}
}
&.#{$classPrefix}Even #{$childSelector} {
animation: #{$animName}_even $duration;
}
&.#{$classPrefix}Odd #{$childSelector} {
animation: #{$animName}_odd $duration;
}
}
// ----------------------------------------
/* Allows to use and define an animation without specifying its name */
@mixin InlineAnimation($duration) {
$animName: autogen_anim_#{unique-id()};
@at-root {
@keyframes #{$animName} {
@content;
}
}
animation: $animName $duration !important;
}
// ----------------------------------------
/* Animation prefab for a double bounce pop-in animation, useful for dialogs */
@mixin DoubleBounceAnim($duration: 0.5s ease-in-out, $amount: 0.2, $initialOpacity: 0) {
@include InlineAnimation($duration) {
0% {
opacity: $initialOpacity;
transform: scale(0) $hardwareAcc;
}
25% {
opacity: 0.5;
transform: scale(1 + $amount) $hardwareAcc;
}
50% {
opacity: 1;
transform: scale(1 - $amount * 0.5) $hardwareAcc;
}
75% {
transform: scale(1 + $amount * 0.25) $hardwareAcc;
}
100% {
transform: scale(1) $hardwareAcc;
}
}
opacity: 1;
}
// ----------------------------------------
/* Automatically transforms the game state if a hardware keyboard is open */
@mixin TransformToMatchKeyboard {
transition: transform 0.2s ease-in-out;
@include AndroidHwKeyboardOpen {
@include VerticalStyle {
transform: translateY(#{D(-125px)}) $hardwareAcc;
}
@include HorizontalStyle {
transform: translateY(#{D(-100px)}) $hardwareAcc;
}
}
}
// ----------------------------------------
/* Define a style which is only applied when the viewport is at least X pixels wide */
@mixin StyleAtWidth($minW) {
@media (min-width: #{$minW}) {
@content;
}
}
// ----------------------------------------
/* Define a style which is only applied when the viewport is at least X pixels height */
@mixin StyleAtHeight($minH) {
@media (min-height: #{$minH}) {
@content;
}
}
// ----------------------------------------
/* Define a style which is only applied when the viewport has at least the given dimensions */
@mixin StyleAtDims($minW, $minH) {
@media (min-height: #{$minH}) and (min-width: #{$minW}) {
@content;
}
}
// ----------------------------------------
/* Define a style which is only applied when the viewport has at maximum the given dimensions */
@mixin StyleBelowDims($maxW, $maxH) {
@media (max-height: #{$maxH}) and (max-width: #{$maxW}) {
@content;
}
}
// ----------------------------------------
/* Define a style which is only applied when the viewport has at maximum the given height */
@mixin StyleBelowHeight($maxH) {
@media (max-height: #{$maxH}) {
@content;
}
}
// ----------------------------------------
/* Define a style which is only applied when the viewport has at maximum the given width */
@mixin StyleBelowWidth($maxW) {
@media (max-width: #{$maxW}) {
@content;
}
}
// ----------------------------------------
// Dynamic graphics quality styles
@mixin BoxShadow3D($bgColor, $size: 3px, $pressEffect: true) {
background-color: $bgColor;
$borderSize: 1.5px;
$borderColor: rgb(18, 20, 24);
// box-shadow: 0 0 0 D($borderSize) $borderColor, 0 D($size) 0 0px rgba(mix(darken($bgColor, 9), #b0e2ff, 95%), 1),
// 0 D($size) 0 D($borderSize) $borderColor;
// box-shadow: 0 0 0 D($borderSize) $borderColor, 0 D($size) 0 D($borderSize) $borderColor,
// D(-$size * 1.5) D($size * 2) 0 D($borderSize) rgba(0, 0, 0, 0.1);
// transition: box-shadow 0.1s ease-in-out;
// @if $pressEffect {
// &.pressed {
// transform: none !important;
// $pSize: max(0, $size - 1.5px);
// transition: none !important;
// box-shadow: 0 0 0 D($borderSize) $borderColor, 0 D($pSize) 0 0px rgba(mix(darken($bgColor, 9), #b0e2ff, 95%), 1),
// 0 D($pSize) 0 D($borderSize) $borderColor;
// top: D($size - $pSize);
// }
// }
}
@mixin BorderRadius($v1: 2px, $v2: "", $v3: "", $v4: "") {
@include S(border-radius, $v1, $v2, $v3, $v4);
}
@mixin BoxShadow($x, $y, $blur, $offset, $color) {
box-shadow: D($x) D($y) D($blur) D($offset) $color;
}
@mixin DropShadow($yOffset: 2px, $blur: 2px, $amount: 0.2) {
@include BoxShadow(0, $yOffset, $blur, 0, rgba(#000, $amount));
}
@mixin TextShadow($yOffset: 2px, $blur: 1px, $amount: 0.6) {
text-shadow: 0 D($yOffset) D($blur) rgba(#000, $amount);
}
@mixin Button3D($bgColor, $pressEffect: true) {
@include BoxShadow3D($bgColor, 2px, $pressEffect);
}
@mixin ButtonDisabled3D($bgColor) {
@include BoxShadow3D($bgColor, 0.5px, false);
}
@mixin BoxShadowInset($bgColor, $size: 3px) {
background-color: $bgColor;
$borderSize: 1px;
$borderColor: rgb(15, 19, 24);
box-shadow:
0 0 0 D($borderSize) $borderColor,
0 D($size) 0 rgba(#fff, 0.07);
border-top: D($size) solid rgba(#000, 0.1);
//, 0 D($size) 0 0px rgba(mix(darken($bgColor, 9), #b0e2ff, 95%), 1),
// 0 D($size + $borderSize) 0 0 $borderColor;
}
@mixin TextShadow3D($color: rgb(222, 234, 238), $borderColor: #000) {
color: $color;
}
// ----------------------------------------
/* String replacement */
@function str-replace($string, $search, $replace: "") {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace +
str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
@mixin BounceInFromSide($mul, $duration: 0.18s ease-in-out) {
@include InlineAnimation($duration) {
0% {
transform: translateY(#{D(-100px * $mul)}) scale(0.9);
opacity: 0;
}
100% {
opacity: 1;
transform: none;
}
}
opacity: 1;
transform: none;
}
@mixin BreakText {
word-wrap: break-word;
word-break: break-all;
overflow-wrap: break-all;
}
@mixin SupportsAndroidNotchQuery {
@supports (color: constant(--notch-inset-left)) {
@content;
}
}
@mixin SupportsiOsNotchQuery {
@supports (color: env(safe-area-inset-left, 0px)) {
@content;
}
}
@mixin DarkThemeOverride {
@at-root html[data-theme="dark"] &,
&[data-theme="dark"] {
@content;
}
}
@mixin DarkThemeInvert {
@include DarkThemeOverride {
filter: invert(1);
}
}

168
src/css/resources.scss
View File

@ -1,84 +1,84 @@
$buildings: belt, cutter, miner, mixer, painter, rotater, balancer, stacker, trash, underground_belt, wire,
constant_signal, logic_gate, lever, filter, wire_tunnel, display, virtual_processor, reader, storage,
transistor, analyzer, comparator, item_producer, constant_producer, goal_acceptor, block;
@each $building in $buildings {
[data-icon="building_icons/#{$building}.png"] {
/* @load-async */
.icon {
background-image: uiResource("res/ui/building_icons/#{$building}.png") !important;
}
}
}
$buildingsAndVariants: belt, balancer, underground_belt, underground_belt-tier2, miner, miner-chainable,
cutter, cutter-quad, rotater, rotater-ccw, stacker, mixer, painter-double, painter-quad, trash, storage,
reader, rotater-rotate180, display, constant_signal, wire, wire_tunnel, logic_gate-or, logic_gate-not,
logic_gate-xor, analyzer, virtual_processor-rotater, virtual_processor-unstacker, item_producer,
constant_producer, virtual_processor-stacker, virtual_processor-painter, wire-second, painter,
painter-mirrored, comparator, goal_acceptor, block;
@each $building in $buildingsAndVariants {
[data-icon="building_tutorials/#{$building}.png"] {
/* @load-async */
background-image: uiResource("res/ui/building_tutorials/#{$building}.png") !important;
}
}
[data-icon="building_tutorials/balancer-merger.png"],
[data-icon="building_tutorials/balancer-merger-inverse.png"] {
/* @load-async */
background-image: uiResource("res/ui/building_tutorials/balancer-merger.png") !important;
}
[data-icon="building_tutorials/balancer-splitter.png"],
[data-icon="building_tutorials/balancer-splitter-inverse.png"] {
/* @load-async */
background-image: uiResource("res/ui/building_tutorials/balancer-splitter.png") !important;
}
[data-icon="building_tutorials/transistor.png"],
[data-icon="building_tutorials/transistor-mirrored.png"] {
/* @load-async */
background-image: uiResource("res/ui/building_tutorials/transistor.png") !important;
}
// Filter and lever share tutorials
[data-icon="building_tutorials/filter.png"],
[data-icon="building_tutorials/lever.png"] {
/* @load-async */
background-image: uiResource("res/ui/building_tutorials/lever.png") !important;
}
// Logic gate
[data-icon="building_tutorials/logic_gate.png"] {
/* @load-async */
background-image: uiResource("res/ui/building_tutorials/logic_gate-and.png") !important;
}
// Virtual processor
[data-icon="building_tutorials/virtual_processor.png"] {
/* @load-async */
background-image: uiResource("res/ui/building_tutorials/virtual_processor-cutter.png") !important;
}
$icons: notification_saved, notification_success, notification_upgrade, notification_info,
notification_warning, notification_error;
@each $icon in $icons {
[data-icon="icons/#{$icon}.png"] {
/* @load-async */
background-image: uiResource("res/ui/icons/#{$icon}.png") !important;
}
}
$languages: en, de, cs, da, et, es-419, fr, it, pt-BR, sv, tr, el, ru, uk, zh-TW, zh-CN, nb, mt-MT, ar, nl, vi,
th, hu, pl, ja, kor, no, pt-PT, fi, ro, he;
@each $language in $languages {
[data-languageicon="#{$language}"] {
background-image: uiResource("languages/#{$language}.svg") !important;
}
}
.steam_dlbtn_0 {
background-image: uiResource("steam_link_btn/0.png") !important;
}
$buildings: belt, cutter, miner, mixer, painter, rotater, balancer, stacker, trash, underground_belt, wire,
constant_signal, logic_gate, lever, filter, wire_tunnel, display, virtual_processor, reader, storage,
transistor, analyzer, comparator, item_producer, constant_producer, goal_acceptor, block;
@each $building in $buildings {
[data-icon="building_icons/#{$building}.png"] {
/* @load-async */
.icon {
background-image: uiResource("res/ui/building_icons/#{$building}.png") !important;
}
}
}
$buildingsAndVariants: belt, balancer, underground_belt, underground_belt-tier2, miner, miner-chainable,
cutter, cutter-quad, rotater, rotater-ccw, stacker, mixer, painter-double, painter-quad, trash, storage,
reader, rotater-rotate180, display, constant_signal, wire, wire_tunnel, logic_gate-or, logic_gate-not,
logic_gate-xor, analyzer, virtual_processor-rotater, virtual_processor-unstacker, item_producer,
constant_producer, virtual_processor-stacker, virtual_processor-painter, wire-second, painter,
painter-mirrored, comparator, goal_acceptor, block;
@each $building in $buildingsAndVariants {
[data-icon="building_tutorials/#{$building}.png"] {
/* @load-async */
background-image: uiResource("res/ui/building_tutorials/#{$building}.png") !important;
}
}
[data-icon="building_tutorials/balancer-merger.png"],
[data-icon="building_tutorials/balancer-merger-inverse.png"] {
/* @load-async */
background-image: uiResource("res/ui/building_tutorials/balancer-merger.png") !important;
}
[data-icon="building_tutorials/balancer-splitter.png"],
[data-icon="building_tutorials/balancer-splitter-inverse.png"] {
/* @load-async */
background-image: uiResource("res/ui/building_tutorials/balancer-splitter.png") !important;
}
[data-icon="building_tutorials/transistor.png"],
[data-icon="building_tutorials/transistor-mirrored.png"] {
/* @load-async */
background-image: uiResource("res/ui/building_tutorials/transistor.png") !important;
}
// Filter and lever share tutorials
[data-icon="building_tutorials/filter.png"],
[data-icon="building_tutorials/lever.png"] {
/* @load-async */
background-image: uiResource("res/ui/building_tutorials/lever.png") !important;
}
// Logic gate
[data-icon="building_tutorials/logic_gate.png"] {
/* @load-async */
background-image: uiResource("res/ui/building_tutorials/logic_gate-and.png") !important;
}
// Virtual processor
[data-icon="building_tutorials/virtual_processor.png"] {
/* @load-async */
background-image: uiResource("res/ui/building_tutorials/virtual_processor-cutter.png") !important;
}
$icons: notification_saved, notification_success, notification_upgrade, notification_info,
notification_warning, notification_error;
@each $icon in $icons {
[data-icon="icons/#{$icon}.png"] {
/* @load-async */
background-image: uiResource("res/ui/icons/#{$icon}.png") !important;
}
}
$languages: en, de, cs, da, et, es-419, fr, it, pt-BR, sv, tr, el, ru, uk, zh-TW, zh-CN, nb, mt-MT, ar, nl, vi,
th, hu, pl, ja, kor, no, pt-PT, fi, ro, he;
@each $language in $languages {
[data-languageicon="#{$language}"] {
background-image: uiResource("languages/#{$language}.svg") !important;
}
}
.steam_dlbtn_0 {
background-image: uiResource("steam_link_btn/0.png") !important;
}

104
src/css/states/ingame.scss
View File

@ -1,52 +1,52 @@
#state_InGameState {
.gameLoadingOverlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
align-items: center;
justify-content: center;
pointer-events: all;
display: flex;
background: $mainBgColor;
flex-direction: column;
}
.prefab_GameHint {
position: absolute;
@include S(bottom, 40px);
@include S(left, 20px);
@include S(right, 20px);
@include PlainText;
text-align: center;
color: #666;
@include DarkThemeOverride() {
color: lighten($darkModeGameBackground, 50);
}
}
#ingame_Canvas {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#ingame_HUD_ModalDialogs {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
@include DarkThemeOverride {
.gameLoadingOverlay {
background: $darkModeGameBackground;
}
}
}
#state_InGameState {
.gameLoadingOverlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
align-items: center;
justify-content: center;
pointer-events: all;
display: flex;
background: $mainBgColor;
flex-direction: column;
}
.prefab_GameHint {
position: absolute;
@include S(bottom, 40px);
@include S(left, 20px);
@include S(right, 20px);
@include PlainText;
text-align: center;
color: #666;
@include DarkThemeOverride() {
color: lighten($darkModeGameBackground, 50);
}
}
#ingame_Canvas {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#ingame_HUD_ModalDialogs {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
@include DarkThemeOverride {
.gameLoadingOverlay {
background: $darkModeGameBackground;
}
}
}

144
src/css/states/keybindings.scss
View File

@ -1,72 +1,72 @@
#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, 6px, 10px);
@include PlainText;
@include S(border-radius, $globalBorderRadius);
}
.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);
}
}
}
}
}
#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, 6px, 10px);
@include PlainText;
@include S(border-radius, $globalBorderRadius);
}
.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);
}
}
}
}
}

2472
src/css/states/main_menu.scss
View File

File diff suppressed because it is too large Load Diff

102
src/css/states/mobile_warning.scss
View File

@ -1,51 +1,51 @@
#state_MobileWarningState {
display: flex;
align-items: center;
background: #555b75 !important;
@include S(padding, 20px);
box-sizing: border-box;
justify-content: center;
flex-direction: column;
.logo {
width: 80%;
max-width: 200px;
margin-bottom: 10px;
}
p {
color: rgba(#fff, 0.5);
display: block;
margin-bottom: 13px;
font-size: 16px;
line-height: 20px;
max-width: 300px;
text-align: left;
a {
color: $colorBlueBright;
}
}
.standaloneLink {
width: 200px;
height: 48px;
min-height: 40px;
& {
background: #000 uiResource("steam_link_btn/0.png") center center / contain no-repeat;
}
display: block;
text-indent: -999em;
cursor: pointer;
margin-top: 10px;
pointer-events: all;
transition: all 0.12s ease-in;
transition-property: opacity, transform;
@include S(border-radius, $globalBorderRadius);
overflow: hidden;
&:hover {
transform: skewX(-1deg) scale(1.02);
opacity: 0.9;
}
}
}
#state_MobileWarningState {
display: flex;
align-items: center;
background: #555b75 !important;
@include S(padding, 20px);
box-sizing: border-box;
justify-content: center;
flex-direction: column;
.logo {
width: 80%;
max-width: 200px;
margin-bottom: 10px;
}
p {
color: rgba(#fff, 0.5);
display: block;
margin-bottom: 13px;
font-size: 16px;
line-height: 20px;
max-width: 300px;
text-align: left;
a {
color: $colorBlueBright;
}
}
.standaloneLink {
width: 200px;
height: 48px;
min-height: 40px;
& {
background: #000 uiResource("steam_link_btn/0.png") center center / contain no-repeat;
}
display: block;
text-indent: -999em;
cursor: pointer;
margin-top: 10px;
pointer-events: all;
transition: all 0.12s ease-in;
transition-property: opacity, transform;
@include S(border-radius, $globalBorderRadius);
overflow: hidden;
&:hover {
transform: skewX(-1deg) scale(1.02);
opacity: 0.9;
}
}
}

306
src/css/states/preload.scss
View File

@ -1,153 +1,153 @@
#state_PreloadState {
.changelogDialogEntry {
@include S(margin-top, 10px);
width: 100%;
flex-direction: column;
text-align: left;
padding: 10px;
box-sizing: border-box;
background: #eef1f4;
@include S(border-radius, $globalBorderRadius);
@include DarkThemeOverride {
background: #33343c;
}
.version {
@include Heading;
}
.date {
@include PlainText;
&::before {
content: " | ";
}
color: #aaabaf;
}
.changes {
@include PlainText;
@include S(padding-left, 15px);
@include S(margin-top, 10px);
strong {
background: $colorBlueBright;
color: #fff;
text-transform: uppercase;
@include S(padding, 1px, 2px);
@include S(margin-right, 3px);
}
a {
color: $colorBlueBright;
}
li {
@include SuperSmallText;
@include S(margin-bottom, 5px);
}
}
}
.failureBox {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999999;
background: #d5d8de;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.logo {
img {
@include S(width, 240px);
}
@include S(margin-bottom, 30px);
}
@include InlineAnimation(0.3s ease-in-out) {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.failureInner {
// background: darken($mainBgColor, 6);
@include S(max-width, 350px);
margin: 0 20px;
text-align: left;
@include BoxShadow3D(#fff);
@include S(padding, 15px);
@include S(border-radius, $globalBorderRadius);
@include DropShadow;
.errorHeader {
color: #ef5072;
}
.errorMessage {
@include PlainText;
display: block;
color: #666;
text-align: left;
@include BreakText;
hyphens: auto;
// border: dotted #666;
// @include S(border-width, 1px, 0);
@include S(padding, 10px, 0);
@include S(margin-top, 10px);
}
.supportHelp {
@include S(margin-top, 10px);
@include PlainText;
.email {
color: $themeColor;
cursor: pointer;
pointer-events: all;
}
}
.lower {
display: flex;
align-items: center;
@include S(margin-top, 16px);
i {
flex-grow: 1;
text-align: right;
color: #777;
@include PlainText;
}
button.resetApp {
@include Button3D($colorRedBright);
@include PlainText;
@include S(padding, 5px, 8px, 4px);
color: #fff;
}
}
}
}
/* Animations */
.status {
transform: scale(0.7) $hardwareAcc;
opacity: 0;
@include StateAnim(transform, opacity);
}
&.arrived {
.status {
opacity: 1;
transform: none;
}
}
}
#state_PreloadState {
.changelogDialogEntry {
@include S(margin-top, 10px);
width: 100%;
flex-direction: column;
text-align: left;
padding: 10px;
box-sizing: border-box;
background: #eef1f4;
@include S(border-radius, $globalBorderRadius);
@include DarkThemeOverride {
background: #33343c;
}
.version {
@include Heading;
}
.date {
@include PlainText;
&::before {
content: " | ";
}
color: #aaabaf;
}
.changes {
@include PlainText;
@include S(padding-left, 15px);
@include S(margin-top, 10px);
strong {
background: $colorBlueBright;
color: #fff;
text-transform: uppercase;
@include S(padding, 1px, 2px);
@include S(margin-right, 3px);
}
a {
color: $colorBlueBright;
}
li {
@include SuperSmallText;
@include S(margin-bottom, 5px);
}
}
}
.failureBox {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999999;
background: #d5d8de;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.logo {
img {
@include S(width, 240px);
}
@include S(margin-bottom, 30px);
}
@include InlineAnimation(0.3s ease-in-out) {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.failureInner {
// background: darken($mainBgColor, 6);
@include S(max-width, 350px);
margin: 0 20px;
text-align: left;
@include BoxShadow3D(#fff);
@include S(padding, 15px);
@include S(border-radius, $globalBorderRadius);
@include DropShadow;
.errorHeader {
color: #ef5072;
}
.errorMessage {
@include PlainText;
display: block;
color: #666;
text-align: left;
@include BreakText;
hyphens: auto;
// border: dotted #666;
// @include S(border-width, 1px, 0);
@include S(padding, 10px, 0);
@include S(margin-top, 10px);
}
.supportHelp {
@include S(margin-top, 10px);
@include PlainText;
.email {
color: $themeColor;
cursor: pointer;
pointer-events: all;
}
}
.lower {
display: flex;
align-items: center;
@include S(margin-top, 16px);
i {
flex-grow: 1;
text-align: right;
color: #777;
@include PlainText;
}
button.resetApp {
@include Button3D($colorRedBright);
@include PlainText;
@include S(padding, 5px, 8px, 4px);
color: #fff;
}
}
}
}
/* Animations */
.status {
transform: scale(0.7) $hardwareAcc;
opacity: 0;
@include StateAnim(transform, opacity);
}
&.arrived {
.status {
opacity: 1;
transform: none;
}
}
}

544
src/css/states/settings.scss
View File

@ -1,272 +1,272 @@
#state_SettingsState {
$colorCategoryButton: #eeeff5;
$colorCategoryButtonSelected: $colorBlueBright;
$layoutBreak: 1000px;
.container .content {
display: grid;
grid-template-columns: auto 1fr;
@include S(grid-gap, 10px);
@include StyleBelowWidth($layoutBreak) {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
}
.sidebar {
display: flex;
@include S(min-width, 210px);
@include S(max-width, 320px);
flex-direction: column;
@include StyleBelowWidth($layoutBreak) {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
@include S(grid-gap, 5px);
max-width: unset !important;
}
button {
text-align: left;
@include S(margin-bottom, 3px);
&::after {
content: unset;
}
width: 100%;
box-sizing: border-box;
@include StyleBelowWidth($layoutBreak) {
text-align: center;
height: D(30px) !important;
padding: D(5px) !important;
}
}
.other {
align-self: end;
margin-top: auto;
&.noabout {
align-self: start;
}
@include StyleBelowWidth($layoutBreak) {
margin-top: 0;
display: grid;
grid-template-columns: 1fr 1fr;
@include S(grid-gap, 5px);
max-width: unset !important;
grid-column: 1 / 3;
button {
margin: 0 !important;
}
}
}
button.categoryButton,
button.about,
button.privacy {
background-color: $colorCategoryButton;
color: #777a7f;
&.active {
background-color: $colorCategoryButtonSelected;
color: #fff;
&:hover {
opacity: 1;
}
}
&.pressed {
transform: none !important;
}
}
button.manageMods {
background-color: lighten($modsColor, 38);
color: $modsColor;
display: flex;
@include S(padding-right, 5px);
.newBadge {
color: #fff;
@include S(border-radius, $globalBorderRadius);
background: $modsColor;
margin-left: auto;
@include S(padding, 0, 3px, 0, 3px);
@include InlineAnimation(1.3s ease-in-out infinite) {
50% {
transform: rotate(0deg) scale(1.1);
}
}
}
&.active {
background-color: $colorGreenBright;
}
}
.versionbar {
@include S(margin-top, 10px);
@include StyleBelowWidth($layoutBreak) {
display: none;
}
@include SuperSmallText;
display: grid;
align-items: center;
grid-template-columns: 1fr auto;
.buildVersion {
display: flex;
flex-direction: column;
color: #aaadaf;
}
}
}
.categoryContainer {
overflow-y: scroll;
pointer-events: all;
@include S(padding-right, 10px);
.category {
display: none;
&.active {
display: block;
}
.setting {
@include S(padding, 10px);
background: #eeeff5;
@include S(border-radius, $globalBorderRadius);
@include S(margin-bottom, 5px);
.desc {
@include S(margin-top, 5px);
@include SuperSmallText;
color: #aaadb2;
}
> .row {
display: grid;
align-items: center;
grid-template-columns: 1fr auto;
> label {
text-transform: uppercase;
@include Text;
}
}
&.disabled {
// opacity: 0.3;
pointer-events: none;
* {
pointer-events: none !important;
cursor: default !important;
}
position: relative;
.standaloneOnlyHint {
@include PlainText;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: all;
display: flex;
align-items: center;
z-index: 100;
justify-content: center;
background: rgba(#fff, 0.5);
text-transform: uppercase;
color: $colorRedBright;
@include S(border-radius, $globalBorderRadius);
@include DarkThemeOverride {
background: rgba(#55585f, 0.95);
}
}
}
.value.enum {
background: #fff;
@include PlainText;
display: flex;
align-items: flex-start;
pointer-events: all;
cursor: pointer;
justify-content: center;
@include S(min-width, 100px);
@include S(border-radius, $globalBorderRadius);
@include S(padding, 4px);
@include S(padding-right, 15px);
& {
background: #fff uiResource("icons/enum_selector.png") calc(100% - #{D(5px)})
calc(50% + #{D(1px)}) / #{D(15px)} no-repeat;
}
transition: background-color 0.12s ease-in-out;
&:hover {
background-color: #fafafa;
}
}
}
}
}
}
@include DarkThemeOverride {
.container .content {
.sidebar {
button.categoryButton,
button.about,
button.privacy {
color: #ccc;
background-color: darken($darkModeControlsBackground, 5);
&.active {
color: #fff;
background-color: $colorCategoryButtonSelected;
}
}
}
.categoryContainer {
.category {
.setting {
background: darken($darkModeGameBackground, 10);
.value.enum {
// dirty but works
// color: #222;
background-color: $darkModeControlsBackground;
& {
background-image: uiResource("icons/enum_selector_white.png");
}
color: #ddd;
&:hover {
background-color: darken($darkModeControlsBackground, 2);
}
}
.value.checkbox {
background-color: #74767b;
&.checked {
background-color: $colorBlueBright;
}
}
}
}
}
}
}
}
#state_SettingsState {
$colorCategoryButton: #eeeff5;
$colorCategoryButtonSelected: $colorBlueBright;
$layoutBreak: 1000px;
.container .content {
display: grid;
grid-template-columns: auto 1fr;
@include S(grid-gap, 10px);
@include StyleBelowWidth($layoutBreak) {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
}
.sidebar {
display: flex;
@include S(min-width, 210px);
@include S(max-width, 320px);
flex-direction: column;
@include StyleBelowWidth($layoutBreak) {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
@include S(grid-gap, 5px);
max-width: unset !important;
}
button {
text-align: left;
@include S(margin-bottom, 3px);
&::after {
content: unset;
}
width: 100%;
box-sizing: border-box;
@include StyleBelowWidth($layoutBreak) {
text-align: center;
height: D(30px) !important;
padding: D(5px) !important;
}
}
.other {
align-self: end;
margin-top: auto;
&.noabout {
align-self: start;
}
@include StyleBelowWidth($layoutBreak) {
margin-top: 0;
display: grid;
grid-template-columns: 1fr 1fr;
@include S(grid-gap, 5px);
max-width: unset !important;
grid-column: 1 / 3;
button {
margin: 0 !important;
}
}
}
button.categoryButton,
button.about,
button.privacy {
background-color: $colorCategoryButton;
color: #777a7f;
&.active {
background-color: $colorCategoryButtonSelected;
color: #fff;
&:hover {
opacity: 1;
}
}
&.pressed {
transform: none !important;
}
}
button.manageMods {
background-color: lighten($modsColor, 38);
color: $modsColor;
display: flex;
@include S(padding-right, 5px);
.newBadge {
color: #fff;
@include S(border-radius, $globalBorderRadius);
background: $modsColor;
margin-left: auto;
@include S(padding, 0, 3px, 0, 3px);
@include InlineAnimation(1.3s ease-in-out infinite) {
50% {
transform: rotate(0deg) scale(1.1);
}
}
}
&.active {
background-color: $colorGreenBright;
}
}
.versionbar {
@include S(margin-top, 10px);
@include StyleBelowWidth($layoutBreak) {
display: none;
}
@include SuperSmallText;
display: grid;
align-items: center;
grid-template-columns: 1fr auto;
.buildVersion {
display: flex;
flex-direction: column;
color: #aaadaf;
}
}
}
.categoryContainer {
overflow-y: scroll;
pointer-events: all;
@include S(padding-right, 10px);
.category {
display: none;
&.active {
display: block;
}
.setting {
@include S(padding, 10px);
background: #eeeff5;
@include S(border-radius, $globalBorderRadius);
@include S(margin-bottom, 5px);
.desc {
@include S(margin-top, 5px);
@include SuperSmallText;
color: #aaadb2;
}
> .row {
display: grid;
align-items: center;
grid-template-columns: 1fr auto;
> label {
text-transform: uppercase;
@include Text;
}
}
&.disabled {
// opacity: 0.3;
pointer-events: none;
* {
pointer-events: none !important;
cursor: default !important;
}
position: relative;
.standaloneOnlyHint {
@include PlainText;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: all;
display: flex;
align-items: center;
z-index: 100;
justify-content: center;
background: rgba(#fff, 0.5);
text-transform: uppercase;
color: $colorRedBright;
@include S(border-radius, $globalBorderRadius);
@include DarkThemeOverride {
background: rgba(#55585f, 0.95);
}
}
}
.value.enum {
background: #fff;
@include PlainText;
display: flex;
align-items: flex-start;
pointer-events: all;
cursor: pointer;
justify-content: center;
@include S(min-width, 100px);
@include S(border-radius, $globalBorderRadius);
@include S(padding, 4px);
@include S(padding-right, 15px);
& {
background: #fff uiResource("icons/enum_selector.png") calc(100% - #{D(5px)})
calc(50% + #{D(1px)}) / #{D(15px)} no-repeat;
}
transition: background-color 0.12s ease-in-out;
&:hover {
background-color: #fafafa;
}
}
}
}
}
}
@include DarkThemeOverride {
.container .content {
.sidebar {
button.categoryButton,
button.about,
button.privacy {
color: #ccc;
background-color: darken($darkModeControlsBackground, 5);
&.active {
color: #fff;
background-color: $colorCategoryButtonSelected;
}
}
}
.categoryContainer {
.category {
.setting {
background: darken($darkModeGameBackground, 10);
.value.enum {
// dirty but works
// color: #222;
background-color: $darkModeControlsBackground;
& {
background-image: uiResource("icons/enum_selector_white.png");
}
color: #ddd;
&:hover {
background-color: darken($darkModeControlsBackground, 2);
}
}
.value.checkbox {
background-color: #74767b;
&.checked {
background-color: $colorBlueBright;
}
}
}
}
}
}
}
}

164
src/css/textual_game_state.scss
View File

@ -1,82 +1,82 @@
.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;
}
}
}
.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;
}
}
}

360
src/css/variables.scss
View File

@ -1,180 +1,180 @@
$globalBorderRadius: 6px;
// 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;
$superDuperSmallTextFontSize: 8px;
$superDuperSmallTextLineHeight: 9px;
$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;
$colorOrangeBright: #ef9d50;
$themeColor: #393747;
$ingameHudBg: rgba(#33343b, 0.9);
$modsColor: rgb(214, 60, 228);
$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.01em;
$mainFontScale: 1;
@mixin DebugText($color) {
// font-size: 3px;
// &,
// * {
// color: $color !important;
// }
}
@mixin SuperDuperSmallText {
@include ScaleFont($superDuperSmallTextFontSize, $superDuperSmallTextLineHeight);
font-weight: $mainFontWeight;
font-family: $mainFont;
letter-spacing: $mainFontSpacing;
@include DebugText(green);
}
@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"));
}
$globalBorderRadius: 6px;
// 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;
$superDuperSmallTextFontSize: 8px;
$superDuperSmallTextLineHeight: 9px;
$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;
$colorOrangeBright: #ef9d50;
$themeColor: #393747;
$ingameHudBg: rgba(#33343b, 0.9);
$modsColor: rgb(214, 60, 228);
$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.01em;
$mainFontScale: 1;
@mixin DebugText($color) {
// font-size: 3px;
// &,
// * {
// color: $color !important;
// }
}
@mixin SuperDuperSmallText {
@include ScaleFont($superDuperSmallTextFontSize, $superDuperSmallTextLineHeight);
font-weight: $mainFontWeight;
font-family: $mainFont;
letter-spacing: $mainFontSpacing;
@include DebugText(green);
}
@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"));
}