Archives/tobspr_shapez.io
1
0
Fork 0
mirror of https://github.com/tobspr/shapez.io.git synced 2025-12-13 18:21:51 +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; box-sizing: content-box;
cursor: pointer; cursor: pointer;
pointer-events: all; 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; position: relative;
@include BorderRadius(20px); @include BorderRadius(20px);
@include IncreasedClickArea(10px); @include IncreasedClickArea(10px);

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

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

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

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

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

@ -1,307 +1,307 @@
.ingameDialog { .ingameDialog {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
pointer-events: all; pointer-events: all;
background: $modalDialogBg; background: $modalDialogBg;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@include InlineAnimation(0.12s ease-in-out) { @include InlineAnimation(0.12s ease-in-out) {
0% { 0% {
background-color: transparent; background-color: transparent;
opacity: 0.5; opacity: 0.5;
} }
100% { 100% {
background-color: $modalDialogBg; background-color: $modalDialogBg;
} }
} }
$darkModeDialogBg: darken($darkModeGameBackground, 5); $darkModeDialogBg: darken($darkModeGameBackground, 5);
@include DarkThemeOverride { @include DarkThemeOverride {
background: rgba($darkModeDialogBg, 0.9); background: rgba($darkModeDialogBg, 0.9);
@include InlineAnimation(0.12s ease-in-out) { @include InlineAnimation(0.12s ease-in-out) {
0% { 0% {
background-color: transparent; background-color: transparent;
opacity: 0.5; opacity: 0.5;
} }
100% { 100% {
background-color: rgba($darkModeDialogBg, 0.9); background-color: rgba($darkModeDialogBg, 0.9);
} }
} }
> .dialogInner.optionChooserDialog .optionParent { > .dialogInner.optionChooserDialog .optionParent {
.option { .option {
background: $darkModeControlsBackground; background: $darkModeControlsBackground;
&:hover { &:hover {
background-color: lighten($darkModeControlsBackground, 5); background-color: lighten($darkModeControlsBackground, 5);
} }
&.active { &.active {
background: $colorBlueBright; background: $colorBlueBright;
color: #fff; color: #fff;
} }
} }
} }
} }
&.visible { &.visible {
.dialogInner { .dialogInner {
opacity: 1; opacity: 1;
} }
backdrop-filter: blur(D(3px)); backdrop-filter: blur(D(3px));
} }
.dialogInner { .dialogInner {
transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out;
opacity: 0; opacity: 0;
} }
&.loadingDialog { &.loadingDialog {
* { * {
color: #fff; color: #fff;
} }
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.text { .text {
text-transform: uppercase; text-transform: uppercase;
@include S(margin-bottom, 10px); @include S(margin-bottom, 10px);
} }
} }
> .dialogInner { > .dialogInner {
background: #fff; background: #fff;
max-height: calc(100vh - #{D(40px)}); max-height: calc(100vh - #{D(40px)});
@include S(border-radius, $globalBorderRadius); @include S(border-radius, $globalBorderRadius);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@include S(padding, 12px); @include S(padding, 12px);
box-shadow: 0 D(5px) D(15px) rgba(#000, 0.1); box-shadow: 0 D(5px) D(15px) rgba(#000, 0.1);
pointer-events: all; pointer-events: all;
@include DarkThemeOverride { @include DarkThemeOverride {
background: darken($darkModeControlsBackground, 5); background: darken($darkModeControlsBackground, 5);
} }
&.optionChooserDialog { &.optionChooserDialog {
.optionParent { .optionParent {
display: grid; display: grid;
@include S(grid-gap, 5px); @include S(grid-gap, 5px);
@include S(padding-right, 5px); @include S(padding-right, 5px);
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
.option { .option {
@include S(border-radius, $globalBorderRadius); @include S(border-radius, $globalBorderRadius);
pointer-events: all; pointer-events: all;
cursor: pointer; cursor: pointer;
@include S(padding, 10px); @include S(padding, 10px);
background: #eee; background: #eee;
transition: background-color 0.12s ease-in-out; transition: background-color 0.12s ease-in-out;
&:hover { &:hover {
background-color: #e7e7e7; background-color: #e7e7e7;
} }
&.active { &.active {
background-color: $colorBlueBright; background-color: $colorBlueBright;
color: #fff; color: #fff;
} }
} }
} }
} }
> .title { > .title {
@include Heading; @include Heading;
margin: 0; margin: 0;
text-transform: uppercase; text-transform: uppercase;
display: grid; display: grid;
align-items: center; align-items: center;
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
@include S(margin-bottom, 10px); @include S(margin-bottom, 10px);
@include DarkThemeInvert(); @include DarkThemeInvert();
> .closeButton { > .closeButton {
opacity: 0.7; opacity: 0.7;
@include S(width, 20px); @include S(width, 20px);
@include S(height, 20px); @include S(height, 20px);
cursor: pointer; cursor: pointer;
pointer-events: all; pointer-events: all;
transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out;
&:hover { &:hover {
opacity: 0.4; opacity: 0.4;
} }
& { & {
background: uiResource("icons/close.png") center center / 80% no-repeat; background: uiResource("icons/close.png") center center / 80% no-repeat;
} }
} }
} }
> .content { > .content {
@include PlainText; @include PlainText;
overflow-y: auto; overflow-y: auto;
pointer-events: all; pointer-events: all;
@include S(width, 350px); @include S(width, 350px);
@include DarkThemeOverride { @include DarkThemeOverride {
color: #aaa; color: #aaa;
} }
a { a {
color: $colorBlueBright; color: $colorBlueBright;
} }
strong { strong {
font-weight: bold; font-weight: bold;
} }
.keybinding { .keybinding {
position: relative; position: relative;
background: #eee; background: #eee;
@include PlainText; @include PlainText;
height: unset; height: unset;
margin: 1px 0; margin: 1px 0;
} }
h3 { h3 {
@include S(margin-top, 10px); @include S(margin-top, 10px);
} }
input { input {
background: #eee; background: #eee;
color: #333438; color: #333438;
width: 100%; width: 100%;
&.errored { &.errored {
background-color: rgb(250, 206, 206); background-color: rgb(250, 206, 206);
&::placeholder { &::placeholder {
color: #fff; color: #fff;
opacity: 0.8; opacity: 0.8;
} }
} }
} }
ul.bucketList { ul.bucketList {
padding-left: 30px; padding-left: 30px;
li { li {
display: list-item; display: list-item;
} }
} }
.ingameItemChooser { .ingameItemChooser {
@include S(margin, 10px, 0); @include S(margin, 10px, 0);
display: grid; display: grid;
@include S(grid-column-gap, 3px); @include S(grid-column-gap, 3px);
@include S(grid-row-gap, 5px); @include S(grid-row-gap, 5px);
grid-template-columns: repeat(10, 1fr); grid-template-columns: repeat(10, 1fr);
align-items: center; align-items: center;
justify-items: center; justify-items: center;
canvas { canvas {
pointer-events: all; pointer-events: all;
@include S(width, 25px); @include S(width, 25px);
@include S(height, 25px); @include S(height, 25px);
position: relative; position: relative;
cursor: pointer; cursor: pointer;
@include IncreasedClickArea(3px); @include IncreasedClickArea(3px);
&:hover { &:hover {
opacity: 0.9; opacity: 0.9;
} }
} }
} }
.dialogModsMod { .dialogModsMod {
background: rgba(0, 0, 0, 0.05); background: rgba(0, 0, 0, 0.05);
@include S(padding, 5px); @include S(padding, 5px);
@include S(margin, 10px, 0); @include S(margin, 10px, 0);
@include S(border-radius, $globalBorderRadius); @include S(border-radius, $globalBorderRadius);
display: grid; display: grid;
grid-template-columns: 1fr D(100px); grid-template-columns: 1fr D(100px);
@include DarkThemeOverride { @include DarkThemeOverride {
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
} }
button { button {
grid-column: 2 / 3; grid-column: 2 / 3;
grid-row: 1 / 3; grid-row: 1 / 3;
align-self: start; align-self: start;
} }
.version { .version {
@include SuperSmallText; @include SuperSmallText;
opacity: 0.5; opacity: 0.5;
} }
.name { .name {
} }
} }
} }
> .buttons { > .buttons {
@include S(margin-top, 15px); @include S(margin-top, 15px);
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
> button { > button {
@include S(margin-left, 8px); @include S(margin-left, 8px);
@include Text; @include Text;
@include S(min-width, 60px); @include S(min-width, 60px);
@include S(padding, 5px, 15px); @include S(padding, 5px, 15px);
transition: opacity 0.12s ease-in-out; transition: opacity 0.12s ease-in-out;
&:hover { &:hover {
opacity: 0.9; opacity: 0.9;
} }
&.good { &.good {
background-color: $colorGreenBright; background-color: $colorGreenBright;
color: #fff; color: #fff;
} }
&.bad { &.bad {
background-color: $colorRedBright; background-color: $colorRedBright;
color: #fff; color: #fff;
} }
&.timedButton { &.timedButton {
pointer-events: none; pointer-events: none;
cursor: default; cursor: default;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
&::after { &::after {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: unset; left: unset;
z-index: 5; z-index: 5;
content: " "; content: " ";
display: inline-block; display: inline-block;
background: rgba(#fff, 0.6); background: rgba(#fff, 0.6);
@include InlineAnimation(1s linear) { @include InlineAnimation(1s linear) {
0% { 0% {
width: 100%; width: 100%;
} }
100% { 100% {
width: 0%; width: 0%;
} }
} }
} }
} }
} }
} }
} }
} }

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

@ -1,141 +1,141 @@
#ingame_HUD_GameMenu { #ingame_HUD_GameMenu {
position: absolute; position: absolute;
@include S(top, 10px); @include S(top, 10px);
@include S(right, 10px); @include S(right, 10px);
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr;
@include S(grid-gap, 6px); @include S(grid-gap, 6px);
backdrop-filter: blur(D(1px)); backdrop-filter: blur(D(1px));
> button, > button,
> .button { > .button {
@include PlainText; @include PlainText;
@include IncreasedClickArea(0px); @include IncreasedClickArea(0px);
background: green; background: green;
@include S(width, 30px); @include S(width, 30px);
@include S(height, 30px); @include S(height, 30px);
pointer-events: all; pointer-events: all;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
transition: all 0.12s ease-in-out; transition: all 0.12s ease-in-out;
transition-property: opacity, transform; transition-property: opacity, transform;
display: inline-flex; display: inline-flex;
background: center center / 70% no-repeat; background: center center / 70% no-repeat;
grid-row: 1; grid-row: 1;
&.pressed { &.pressed {
transform: scale(0.9) !important; transform: scale(0.9) !important;
} }
opacity: 0.7; opacity: 0.7;
&:hover { &:hover {
opacity: 0.9 !important; opacity: 0.9 !important;
} }
@include DarkThemeInvert; @include DarkThemeInvert;
&.shop { &.shop {
grid-column: 1; grid-column: 1;
& { & {
/* @load-async */ /* @load-async */
background-image: uiResource("icons/shop.png"); background-image: uiResource("icons/shop.png");
} }
} }
&.stats { &.stats {
grid-column: 2; grid-column: 2;
& { & {
/* @load-async */ /* @load-async */
background-image: uiResource("icons/statistics.png"); background-image: uiResource("icons/statistics.png");
} }
} }
&.save { &.save {
& { & {
/* @load-async */ /* @load-async */
background-image: uiResource("icons/save.png"); background-image: uiResource("icons/save.png");
} }
grid-column: 3; grid-column: 3;
@include MakeAnimationWrappedEvenOdd(0.5s ease-in-out) { @include MakeAnimationWrappedEvenOdd(0.5s ease-in-out) {
0% { 0% {
transform: scale(1, 1); transform: scale(1, 1);
} }
70% { 70% {
transform: scale(1.5, 1.5) rotate(20deg); transform: scale(1.5, 1.5) rotate(20deg);
opacity: 0.2; opacity: 0.2;
} }
85% { 85% {
transform: scale(0.9, 0.9); transform: scale(0.9, 0.9);
opacity: 1; opacity: 1;
} }
90% { 90% {
transform: scale(1.1, 1.1); transform: scale(1.1, 1.1);
} }
} }
&.saving { &.saving {
@include InlineAnimation(0.4s ease-in-out infinite) { @include InlineAnimation(0.4s ease-in-out infinite) {
50% { 50% {
opacity: 0.5; opacity: 0.5;
transform: scale(0.8); transform: scale(0.8);
} }
} }
pointer-events: none; pointer-events: none;
cursor: default; cursor: default;
} }
} }
&.settings { &.settings {
grid-column: 4; grid-column: 4;
& { & {
/* @load-async */ /* @load-async */
background-image: uiResource("icons/settings_menu_settings.png"); background-image: uiResource("icons/settings_menu_settings.png");
} }
} }
&:hover { &:hover {
opacity: 0.9; opacity: 0.9;
transform: translateY(0); transform: translateY(0);
} }
&:not(.hasBadge) .badge { &:not(.hasBadge) .badge {
display: none; display: none;
} }
&.hasBadge { &.hasBadge {
&.shop { &.shop {
filter: none; filter: none;
opacity: 0.9; opacity: 0.9;
& { & {
/* @load-async */ /* @load-async */
background-image: uiResource("icons/shop_active.png"); background-image: uiResource("icons/shop_active.png");
} }
} }
transform-origin: 50% 50%; transform-origin: 50% 50%;
@include InlineAnimation(0.8s ease-in-out infinite) { @include InlineAnimation(0.8s ease-in-out infinite) {
50% { 50% {
transform: scale(1.3) rotate(6deg); transform: scale(1.3) rotate(6deg);
} }
} }
.badge { .badge {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
@include PlainText; @include PlainText;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
} }
} }
} }

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

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

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

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

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

@ -97,7 +97,9 @@
@include S(margin, 0, 10px); @include S(margin, 0, 10px);
box-sizing: border-box; box-sizing: border-box;
border-radius: 50%; 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); @include IncreasedClickArea(0px);
&.liked-yes { &.liked-yes {

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

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

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

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

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

@ -1,67 +1,67 @@
#ingame_HUD_SettingsMenu { #ingame_HUD_SettingsMenu {
.statsElement { .statsElement {
position: absolute; position: absolute;
@include S(left, 30px); @include S(left, 30px);
@include S(right, 30px); @include S(right, 30px);
@include S(bottom, 30px); @include S(bottom, 30px);
color: #fff; color: #fff;
display: grid; display: grid;
grid-template-rows: auto auto; grid-template-rows: auto auto;
grid-auto-columns: 1fr; grid-auto-columns: 1fr;
align-items: center; align-items: center;
justify-items: center; justify-items: center;
strong { strong {
text-transform: uppercase; text-transform: uppercase;
@include PlainText; @include PlainText;
opacity: 0.5; opacity: 0.5;
grid-row: 1; grid-row: 1;
} }
span { span {
@include Heading; @include Heading;
grid-row: 2; grid-row: 2;
} }
} }
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.buttons { .buttons {
display: grid; display: grid;
grid-auto-flow: column; grid-auto-flow: column;
@include S(grid-gap, 50px); @include S(grid-gap, 50px);
@include S(margin-top, -10px); @include S(margin-top, -10px);
button { button {
background: transparent; background: transparent;
filter: invert(1); filter: invert(1);
content: ""; content: "";
opacity: 0.8; opacity: 0.8;
@include S(width, 35px); @include S(width, 35px);
@include S(height, 35px); @include S(height, 35px);
&.settings { &.settings {
/* @load-async */ /* @load-async */
background-image: uiResource("icons/settings_menu_settings.png"); background-image: uiResource("icons/settings_menu_settings.png");
} }
&.menu { &.menu {
/* @load-async */ /* @load-async */
background-image: uiResource("icons/settings_menu_exit.png"); background-image: uiResource("icons/settings_menu_exit.png");
} }
&:hover { &:hover {
opacity: 0.6; opacity: 0.6;
} }
& { & {
/* @load-async */ /* @load-async */
background: uiResource("icons/settings_menu_play.png") center top / contain no-repeat; 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 { #ingame_HUD_ShapeViewer {
$dims: 170px; $dims: 170px;
.content { .content {
display: flex; display: flex;
@include S(width, $dims); @include S(width, $dims);
width: 100%; width: 100%;
flex-direction: column; flex-direction: column;
overflow-x: hidden; overflow-x: hidden;
&[data-layers="3"], &[data-layers="3"],
&[data-layers="4"] { &[data-layers="4"] {
@include S(width, 2 * $dims); @include S(width, 2 * $dims);
.renderArea { .renderArea {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
@include S(grid-row-gap, 15px); @include S(grid-row-gap, 15px);
} }
} }
.renderArea { .renderArea {
display: grid; display: grid;
width: 100%; width: 100%;
@include S(grid-row-gap, 10px); @include S(grid-row-gap, 10px);
align-items: center; align-items: center;
justify-items: center; justify-items: center;
} }
.infoArea { .infoArea {
align-self: flex-end; align-self: flex-end;
@include S(margin-top, 10px); @include S(margin-top, 10px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
button { button {
@include S(margin, 0); @include S(margin, 0);
@include PlainText; @include PlainText;
} }
} }
.layer { .layer {
position: relative; position: relative;
background: #eee; background: #eee;
@include DarkThemeOverride { @include DarkThemeOverride {
background: rgba(0, 10, 20, 0.2); background: rgba(0, 10, 20, 0.2);
} }
@include S(width, 150px); @include S(width, 150px);
@include S(height, 100px); @include S(height, 100px);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@include S(border-radius, $globalBorderRadius); @include S(border-radius, $globalBorderRadius);
> canvas { > canvas {
@include S(width, 50px); @include S(width, 50px);
@include S(height, 50px); @include S(height, 50px);
} }
.quad { .quad {
position: absolute; position: absolute;
width: 50%; width: 50%;
height: 50%; height: 50%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
$arrowDims: 23px; $arrowDims: 23px;
$spacing: 9px; $spacing: 9px;
@include S(padding, 6px); @include S(padding, 6px);
.colorLabel { .colorLabel {
text-transform: uppercase; text-transform: uppercase;
@include SuperSmallText; @include SuperSmallText;
@include S(font-size, 9px); @include S(font-size, 9px);
} }
.emptyLabel { .emptyLabel {
text-transform: uppercase; text-transform: uppercase;
@include SuperSmallText; @include SuperSmallText;
@include S(font-size, 9px); @include S(font-size, 9px);
} }
&::after { &::after {
content: " "; content: " ";
background: rgba(0, 10, 20, 0.5); background: rgba(0, 10, 20, 0.5);
@include S(width, $arrowDims); @include S(width, $arrowDims);
@include S(height, 1px); @include S(height, 1px);
position: absolute; position: absolute;
transform: rotate(45deg); transform: rotate(45deg);
transform-origin: 50% 50%; transform-origin: 50% 50%;
} }
@include DarkThemeOverride { @include DarkThemeOverride {
&::after { &::after {
background: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.5);
} }
} }
&.quad-0 { &.quad-0 {
right: 0; right: 0;
top: 0; top: 0;
align-items: flex-start; align-items: flex-start;
justify-content: flex-end; justify-content: flex-end;
&::after { &::after {
@include S(left, $spacing); @include S(left, $spacing);
@include S(bottom, $arrowDims / 2 + $spacing); @include S(bottom, $arrowDims / 2 + $spacing);
transform: rotate(-45deg); transform: rotate(-45deg);
} }
} }
&.quad-1 { &.quad-1 {
bottom: 0; bottom: 0;
right: 0; right: 0;
align-items: flex-end; align-items: flex-end;
justify-content: flex-end; justify-content: flex-end;
&::after { &::after {
@include S(left, $spacing); @include S(left, $spacing);
@include S(top, $arrowDims / 2 + $spacing); @include S(top, $arrowDims / 2 + $spacing);
transform: rotate(45deg); transform: rotate(45deg);
} }
} }
&.quad-2 { &.quad-2 {
bottom: 0; bottom: 0;
left: 0; left: 0;
align-items: flex-end; align-items: flex-end;
justify-content: flex-start; justify-content: flex-start;
&::after { &::after {
@include S(right, $spacing); @include S(right, $spacing);
@include S(top, $arrowDims / 2 + $spacing); @include S(top, $arrowDims / 2 + $spacing);
transform: rotate(135deg); transform: rotate(135deg);
} }
} }
&.quad-3 { &.quad-3 {
top: 0; top: 0;
left: 0; left: 0;
align-items: flex-start; align-items: flex-start;
justify-content: flex-start; justify-content: flex-start;
&::after { &::after {
@include S(right, $spacing); @include S(right, $spacing);
@include S(bottom, $arrowDims / 2 + $spacing); @include S(bottom, $arrowDims / 2 + $spacing);
transform: rotate(225deg); transform: rotate(225deg);
} }
} }
} }
} }
} }
} }

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

@ -1,335 +1,335 @@
#ingame_HUD_Shop { #ingame_HUD_Shop {
.content { .content {
@include S(padding-right, 10px); @include S(padding-right, 10px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@include S(width, 500px); @include S(width, 500px);
.upgrade { .upgrade {
display: grid; display: grid;
grid-template-columns: auto 1fr auto; grid-template-columns: auto 1fr auto;
background: #eee; background: #eee;
@include S(border-radius, $globalBorderRadius); @include S(border-radius, $globalBorderRadius);
@include S(margin-bottom, 4px); @include S(margin-bottom, 4px);
@include S(padding, 5px, 10px); @include S(padding, 5px, 10px);
@include S(grid-row-gap, 1px); @include S(grid-row-gap, 1px);
@include S(height, 85px); @include S(height, 85px);
grid-template-rows: #{D(20px)} auto; grid-template-rows: #{D(20px)} auto;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
@include DarkThemeOverride { @include DarkThemeOverride {
background: $darkModeControlsBackground; background: $darkModeControlsBackground;
} }
.title { .title {
grid-column: 1 / 3; grid-column: 1 / 3;
grid-row: 1 / 2; grid-row: 1 / 2;
@include PlainText; @include PlainText;
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: row-reverse; flex-direction: row-reverse;
justify-content: flex-end; justify-content: flex-end;
@include DarkThemeOverride { @include DarkThemeOverride {
color: #fff; color: #fff;
} }
.tier { .tier {
@include S(margin-right, 9px); @include S(margin-right, 9px);
background: $colorGreenBright; background: $colorGreenBright;
@include S(border-radius, $globalBorderRadius); @include S(border-radius, $globalBorderRadius);
text-transform: uppercase; text-transform: uppercase;
@include PlainText; @include PlainText;
color: #fff; color: #fff;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
@include S(min-width, 50px); @include S(min-width, 50px);
@include S(padding, 0px, 5px); @include S(padding, 0px, 5px);
&[data-tier="0"] { &[data-tier="0"] {
background-color: rgb(73, 186, 190); background-color: rgb(73, 186, 190);
} }
&[data-tier="1"] { &[data-tier="1"] {
background-color: rgb(88, 110, 207); background-color: rgb(88, 110, 207);
} }
&[data-tier="2"] { &[data-tier="2"] {
background-color: rgb(189, 100, 192); background-color: rgb(189, 100, 192);
} }
&[data-tier="3"] { &[data-tier="3"] {
background-color: rgb(117, 192, 98); background-color: rgb(117, 192, 98);
} }
&[data-tier="4"] { &[data-tier="4"] {
background-color: rgb(243, 77, 48); background-color: rgb(243, 77, 48);
} }
&[data-tier="5"] { &[data-tier="5"] {
background-color: rgb(255, 209, 6); background-color: rgb(255, 209, 6);
} }
&[data-tier="6"] { &[data-tier="6"] {
background-color: rgb(44, 41, 46); background-color: rgb(44, 41, 46);
} }
} }
} }
.icon { .icon {
@include S(width, 40px); @include S(width, 40px);
@include S(height, 40px); @include S(height, 40px);
background: center center / 80% no-repeat; background: center center / 80% no-repeat;
align-self: center; align-self: center;
justify-self: center; justify-self: center;
grid-column: 1 / 2; grid-column: 1 / 2;
grid-row: 2 / 4; grid-row: 2 / 4;
@include S(margin-right, 30px); @include S(margin-right, 30px);
@include S(margin-left, 10px); @include S(margin-left, 10px);
opacity: 0.32; opacity: 0.32;
display: none; display: none;
} }
.description { .description {
grid-column: 2 / 4; grid-column: 2 / 4;
grid-row: 1 / 2; grid-row: 1 / 2;
@include PlainText; @include PlainText;
color: #aaa; color: #aaa;
align-self: start; align-self: start;
justify-self: end; justify-self: end;
} }
.requirements { .requirements {
grid-column: 2 / 3; grid-column: 2 / 3;
grid-row: 3 / 4; grid-row: 3 / 4;
display: grid; display: grid;
grid-auto-flow: column; grid-auto-flow: column;
@include S(grid-gap, 9px); @include S(grid-gap, 9px);
justify-content: start; justify-content: start;
.requirement { .requirement {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@include S(width, 70px); @include S(width, 70px);
overflow: hidden; overflow: hidden;
button.pin { button.pin {
& { & {
/* @load-async */ /* @load-async */
background: uiResource("icons/pin.png") center center / 95% no-repeat; background: uiResource("icons/pin.png") center center / 95% no-repeat;
} }
@include S(width, 12px); @include S(width, 12px);
@include S(height, 12px); @include S(height, 12px);
position: absolute; position: absolute;
@include S(top, 2px); @include S(top, 2px);
@include S(right, 2px); @include S(right, 2px);
opacity: 0.6; opacity: 0.6;
cursor: pointer; cursor: pointer;
pointer-events: all; pointer-events: all;
@include IncreasedClickArea(5px); @include IncreasedClickArea(5px);
transition: opacity 0.12s ease-in-out; transition: opacity 0.12s ease-in-out;
@include DarkThemeInvert; @include DarkThemeInvert;
$disabledOpacity: 0.6; $disabledOpacity: 0.6;
$enabledOpacity: 0.6; $enabledOpacity: 0.6;
&:hover { &:hover {
opacity: $enabledOpacity + 0.1; opacity: $enabledOpacity + 0.1;
} }
&.alreadyPinned { &.alreadyPinned {
opacity: $disabledOpacity !important; opacity: $disabledOpacity !important;
&:hover { &:hover {
opacity: $disabledOpacity + 0.1 !important; opacity: $disabledOpacity + 0.1 !important;
} }
} }
&.isGoal { &.isGoal {
/* @load-async */ /* @load-async */
background: uiResource("icons/current_goal_marker.png") center center / 95% background: uiResource("icons/current_goal_marker.png") center center / 95%
no-repeat; no-repeat;
opacity: $disabledOpacity !important; opacity: $disabledOpacity !important;
cursor: default; cursor: default;
pointer-events: none; pointer-events: none;
} }
&.pinned { &.pinned {
opacity: $disabledOpacity; opacity: $disabledOpacity;
& { & {
/* @load-async */ /* @load-async */
background: uiResource("icons/unpin_shape.png") center center / 75% no-repeat !important; background: uiResource("icons/unpin_shape.png") center center / 75% no-repeat !important;
} }
@include InlineAnimation(0.3s ease-in-out) { @include InlineAnimation(0.3s ease-in-out) {
0% { 0% {
opacity: 1; opacity: 1;
transform: scale(0.8); transform: scale(0.8);
} }
30% { 30% {
opacity: 1; opacity: 1;
transform: scale(1.2); transform: scale(1.2);
} }
100% { 100% {
transform: scale(1); transform: scale(1);
} }
} }
&:hover { &:hover {
opacity: $disabledOpacity + 0.1; opacity: $disabledOpacity + 0.1;
} }
} }
&.unpinned { &.unpinned {
opacity: $enabledOpacity; opacity: $enabledOpacity;
@include InlineAnimation(0.3s ease-in-out) { @include InlineAnimation(0.3s ease-in-out) {
0% { 0% {
opacity: 1; opacity: 1;
transform: scale(0.8); transform: scale(0.8);
} }
30% { 30% {
opacity: 1; opacity: 1;
transform: scale(1.2); transform: scale(1.2);
} }
100% { 100% {
transform: scale(1); transform: scale(1);
} }
} }
&:hover { &:hover {
opacity: $enabledOpacity + 0.1; opacity: $enabledOpacity + 0.1;
} }
} }
} }
button.showInfo { button.showInfo {
@include S(width, 11px); @include S(width, 11px);
@include S(height, 11px); @include S(height, 11px);
position: absolute; position: absolute;
@include S(top, 17px); @include S(top, 17px);
@include S(right, 2.5px); @include S(right, 2.5px);
opacity: 0.5; opacity: 0.5;
cursor: pointer; cursor: pointer;
pointer-events: all; pointer-events: all;
@include IncreasedClickArea(5px); @include IncreasedClickArea(5px);
transition: opacity 0.12s ease-in-out; transition: opacity 0.12s ease-in-out;
@include DarkThemeInvert; @include DarkThemeInvert;
&:hover { &:hover {
opacity: 0.6; opacity: 0.6;
} }
} }
button.showInfo { button.showInfo {
/* @load-async */ /* @load-async */
background: uiResource("icons/info_button.png") center center / 95% no-repeat; background: uiResource("icons/info_button.png") center center / 95% no-repeat;
} }
canvas { canvas {
@include S(width, 40px); @include S(width, 40px);
@include S(height, 40px); @include S(height, 40px);
} }
.amount { .amount {
@include S(margin-top, 4px); @include S(margin-top, 4px);
z-index: 10; z-index: 10;
@include SuperSmallText; @include SuperSmallText;
letter-spacing: 0; letter-spacing: 0;
background: #e2e4e6; background: #e2e4e6;
@include S(line-height, 13px); @include S(line-height, 13px);
@include S(border-radius, $globalBorderRadius); @include S(border-radius, $globalBorderRadius);
@include S(padding, 1px, 0px, 2px); @include S(padding, 1px, 0px, 2px);
position: relative; position: relative;
text-align: center; text-align: center;
@include S(min-width, 50px); @include S(min-width, 50px);
// @include S(max-width, 100px); // @include S(max-width, 100px);
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
@include DarkThemeOverride { @include DarkThemeOverride {
background: #333438; background: #333438;
color: #fff; color: #fff;
} }
.progressBar { .progressBar {
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
@include S(border-radius, $globalBorderRadius); @include S(border-radius, $globalBorderRadius);
position: absolute; position: absolute;
display: inline-block; display: inline-block;
z-index: -1; z-index: -1;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
transition-property: width, background-color; transition-property: width, background-color;
background: #bdbfca; background: #bdbfca;
@include DarkThemeOverride { @include DarkThemeOverride {
background: #8c8d96; background: #8c8d96;
} }
&.complete { &.complete {
background-color: $colorGreenBright; background-color: $colorGreenBright;
@include DarkThemeOverride { @include DarkThemeOverride {
background-color: $colorGreenBright; background-color: $colorGreenBright;
} }
} }
} }
} }
} }
} }
button.buy { button.buy {
grid-column: 3 / 4; grid-column: 3 / 4;
grid-row: 3 / 4; grid-row: 3 / 4;
align-self: center; align-self: center;
justify-self: end; justify-self: end;
// @include S(padding, 4px, 5px); // @include S(padding, 4px, 5px);
// @include PlainText; // @include PlainText;
background-color: $colorGreenBright; background-color: $colorGreenBright;
color: #fff; color: #fff;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
transition-property: background-color, opacity; transition-property: background-color, opacity;
&:not(.buyable) { &:not(.buyable) {
background-color: #aaa; background-color: #aaa;
cursor: default; cursor: default;
pointer-events: none; pointer-events: none;
opacity: 0.3; opacity: 0.3;
} }
&.buyable { &.buyable {
@include InlineAnimation(1s ease-in-out infinite) { @include InlineAnimation(1s ease-in-out infinite) {
0% { 0% {
} }
50% { 50% {
background-color: lighten($colorGreenBright, 10); background-color: lighten($colorGreenBright, 10);
transform: scale(1.02); transform: scale(1.02);
} }
100% { 100% {
} }
} }
} }
} }
&.maxLevel { &.maxLevel {
button.buy { button.buy {
opacity: 0 !important; opacity: 0 !important;
} }
.requirements { .requirements {
display: none; display: none;
} }
.description { .description {
color: $colorGreenBright; color: $colorGreenBright;
} }
} }
} }
} }
} }

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

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

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

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

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

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

262
src/css/main.scss
View File

@ -1,131 +1,131 @@
// Control here whether to inline all resources or instead load them // Control here whether to inline all resources or instead load them
@function uiResource($pth) { @function uiResource($pth) {
@if (str-index($string: $pth, $substring: ".noinline")) { @if (str-index($string: $pth, $substring: ".noinline")) {
@return resolve($pth); @return resolve($pth);
} }
@return inline($pth); @return inline($pth);
} }
@import "resources"; @import "resources";
@import "trigonometry"; @import "trigonometry";
@import "material_colors"; @import "material_colors";
@import "dynamic_ui"; @import "dynamic_ui";
@import "variables"; @import "variables";
@import "mixins"; @import "mixins";
@import "common"; @import "common";
@import "animations"; @import "animations";
@import "game_state"; @import "game_state";
@import "textual_game_state"; @import "textual_game_state";
@import "changelog_skins"; @import "changelog_skins";
@import "states/preload"; @import "states/preload";
@import "states/main_menu"; @import "states/main_menu";
@import "states/ingame"; @import "states/ingame";
@import "states/keybindings"; @import "states/keybindings";
@import "states/settings"; @import "states/settings";
@import "states/about"; @import "states/about";
@import "states/mobile_warning"; @import "states/mobile_warning";
@import "states/changelog"; @import "states/changelog";
@import "states/puzzle_menu"; @import "states/puzzle_menu";
@import "states/mods"; @import "states/mods";
@import "ingame_hud/buildings_toolbar"; @import "ingame_hud/buildings_toolbar";
@import "ingame_hud/building_placer"; @import "ingame_hud/building_placer";
@import "ingame_hud/beta_overlay"; @import "ingame_hud/beta_overlay";
@import "ingame_hud/keybindings_overlay"; @import "ingame_hud/keybindings_overlay";
@import "ingame_hud/unlock_notification"; @import "ingame_hud/unlock_notification";
@import "ingame_hud/shop"; @import "ingame_hud/shop";
@import "ingame_hud/game_menu"; @import "ingame_hud/game_menu";
@import "ingame_hud/dialogs"; @import "ingame_hud/dialogs";
@import "ingame_hud/vignette_overlay"; @import "ingame_hud/vignette_overlay";
@import "ingame_hud/statistics"; @import "ingame_hud/statistics";
@import "ingame_hud/pinned_shapes"; @import "ingame_hud/pinned_shapes";
@import "ingame_hud/notifications"; @import "ingame_hud/notifications";
@import "ingame_hud/settings_menu"; @import "ingame_hud/settings_menu";
@import "ingame_hud/debug_info"; @import "ingame_hud/debug_info";
@import "ingame_hud/entity_debugger"; @import "ingame_hud/entity_debugger";
@import "ingame_hud/tutorial_hints"; @import "ingame_hud/tutorial_hints";
@import "ingame_hud/blueprint_placer"; @import "ingame_hud/blueprint_placer";
@import "ingame_hud/waypoints"; @import "ingame_hud/waypoints";
@import "ingame_hud/interactive_tutorial"; @import "ingame_hud/interactive_tutorial";
@import "ingame_hud/color_blind_helper"; @import "ingame_hud/color_blind_helper";
@import "ingame_hud/shape_viewer"; @import "ingame_hud/shape_viewer";
@import "ingame_hud/sandbox_controller"; @import "ingame_hud/sandbox_controller";
@import "ingame_hud/puzzle_back_to_menu"; @import "ingame_hud/puzzle_back_to_menu";
@import "ingame_hud/puzzle_editor_review"; @import "ingame_hud/puzzle_editor_review";
@import "ingame_hud/puzzle_dlc_logo"; @import "ingame_hud/puzzle_dlc_logo";
@import "ingame_hud/puzzle_editor_controls"; @import "ingame_hud/puzzle_editor_controls";
@import "ingame_hud/puzzle_editor_settings"; @import "ingame_hud/puzzle_editor_settings";
@import "ingame_hud/puzzle_play_settings"; @import "ingame_hud/puzzle_play_settings";
@import "ingame_hud/puzzle_play_metadata"; @import "ingame_hud/puzzle_play_metadata";
@import "ingame_hud/puzzle_complete_notification"; @import "ingame_hud/puzzle_complete_notification";
@import "ingame_hud/puzzle_next"; @import "ingame_hud/puzzle_next";
// prettier-ignore // prettier-ignore
$elements: $elements:
// Base // Base
ingame_Canvas, ingame_Canvas,
ingame_VignetteOverlay, ingame_VignetteOverlay,
ingame_HUD_PuzzleDLCLogo, ingame_HUD_PuzzleDLCLogo,
// Ingame overlays // Ingame overlays
ingame_HUD_Waypoints, ingame_HUD_Waypoints,
ingame_HUD_PlacementHints, ingame_HUD_PlacementHints,
ingame_HUD_PlacerVariants, ingame_HUD_PlacerVariants,
// Regular hud // Regular hud
ingame_HUD_PinnedShapes, ingame_HUD_PinnedShapes,
ingame_HUD_GameMenu, ingame_HUD_GameMenu,
ingame_HUD_KeybindingOverlay, ingame_HUD_KeybindingOverlay,
ingame_HUD_PuzzleBackToMenu, ingame_HUD_PuzzleBackToMenu,
ingame_HUD_PuzzleNextPuzzle, ingame_HUD_PuzzleNextPuzzle,
ingame_HUD_PuzzleEditorReview, ingame_HUD_PuzzleEditorReview,
ingame_HUD_PuzzleEditorControls, ingame_HUD_PuzzleEditorControls,
ingame_HUD_PuzzleEditorTitle, ingame_HUD_PuzzleEditorTitle,
ingame_HUD_PuzzleEditorSettings, ingame_HUD_PuzzleEditorSettings,
ingame_HUD_PuzzlePlaySettings, ingame_HUD_PuzzlePlaySettings,
ingame_HUD_PuzzlePlayMetadata, ingame_HUD_PuzzlePlayMetadata,
ingame_HUD_PuzzlePlayTitle, ingame_HUD_PuzzlePlayTitle,
ingame_HUD_Notifications, ingame_HUD_Notifications,
ingame_HUD_DebugInfo, ingame_HUD_DebugInfo,
ingame_HUD_EntityDebugger, ingame_HUD_EntityDebugger,
ingame_HUD_TutorialHints, ingame_HUD_TutorialHints,
ingame_HUD_InteractiveTutorial, ingame_HUD_InteractiveTutorial,
ingame_HUD_BuildingsToolbar, ingame_HUD_BuildingsToolbar,
ingame_HUD_wires_toolbar, ingame_HUD_wires_toolbar,
ingame_HUD_BlueprintPlacer, ingame_HUD_BlueprintPlacer,
ingame_HUD_Waypoints_Hint, ingame_HUD_Waypoints_Hint,
ingame_HUD_WatermarkClicker, ingame_HUD_WatermarkClicker,
ingame_HUD_ColorBlindBelowTileHelper, ingame_HUD_ColorBlindBelowTileHelper,
ingame_HUD_SandboxController, ingame_HUD_SandboxController,
// Overlays // Overlays
ingame_HUD_BetaOverlay, ingame_HUD_BetaOverlay,
// Dialogs // Dialogs
ingame_HUD_Shop, ingame_HUD_Shop,
ingame_HUD_Statistics, ingame_HUD_Statistics,
ingame_HUD_ShapeViewer, ingame_HUD_ShapeViewer,
ingame_HUD_UnlockNotification, ingame_HUD_UnlockNotification,
ingame_HUD_PuzzleCompleteNotification, ingame_HUD_PuzzleCompleteNotification,
ingame_HUD_SettingsMenu, ingame_HUD_SettingsMenu,
ingame_HUD_ModalDialogs; ingame_HUD_ModalDialogs;
$zindex: 100; $zindex: 100;
@each $elem in $elements { @each $elem in $elements {
##{$elem} { ##{$elem} {
z-index: $zindex; z-index: $zindex;
} }
$zindex: $zindex + 10; $zindex: $zindex + 10;
} }
body.uiHidden { body.uiHidden {
> div:not(.ingameDialog):not(#ingame_HUD_SettingsMenu):not(#ingame_HUD_ModalDialogs):not( > div:not(.ingameDialog):not(#ingame_HUD_SettingsMenu):not(#ingame_HUD_ModalDialogs):not(
#ingame_HUD_UnlockNotification #ingame_HUD_UnlockNotification
):not(#ingame_HUD_PuzzleCompleteNotification) { ):not(#ingame_HUD_PuzzleCompleteNotification) {
display: none !important; 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 /* Forces an element to get rendered on its own layer, increasing
the performance when animated. Use only transform and opacity in animations! */ the performance when animated. Use only transform and opacity in animations! */
@mixin FastAnimation { @mixin FastAnimation {
will-change: transform, opacity, filter; will-change: transform, opacity, filter;
// transform: translateZ(0); // transform: translateZ(0);
backface-visibility: hidden; backface-visibility: hidden;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
} }
// Helper which includes the translateZ webkit fix, use together with Fast animation // Helper which includes the translateZ webkit fix, use together with Fast animation
// $hardwareAcc: translateZ(0); // $hardwareAcc: translateZ(0);
$hardwareAcc: null; $hardwareAcc: null;
// ---------------------------------------- // ----------------------------------------
/** Increased click area for this element, helpful on mobile */ /** Increased click area for this element, helpful on mobile */
@mixin IncreasedClickArea($size) { @mixin IncreasedClickArea($size) {
// &::after { // &::after {
// content: ""; // content: "";
// position: absolute; // position: absolute;
// top: #{D(-$size)}; // top: #{D(-$size)};
// bottom: #{D(-$size)}; // bottom: #{D(-$size)};
// left: #{D(-$size)}; // left: #{D(-$size)};
// right: #{D(-$size)}; // right: #{D(-$size)};
// // background: rgba(255, 0, 0, 0.3); // // background: rgba(255, 0, 0, 0.3);
// } // }
} }
button, button,
.increasedClickArea { .increasedClickArea {
position: relative; position: relative;
@include IncreasedClickArea(15px); @include IncreasedClickArea(15px);
} }
// ---------------------------------------- // ----------------------------------------
/* Duplicates an animation and adds two classes .<classPrefix>Even and .<classPrefix>Odd which uses the /* 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 animation. This can be used to replay the animation by toggling between the classes, because
it is not possible to restart a css animation */ it is not possible to restart a css animation */
@mixin MakeAnimationWrappedEvenOdd($duration, $classPrefix: "anim", $childSelector: "") { @mixin MakeAnimationWrappedEvenOdd($duration, $classPrefix: "anim", $childSelector: "") {
$animName: autogen_anim_#{unique-id()}; $animName: autogen_anim_#{unique-id()};
@at-root { @at-root {
@keyframes #{$animName}_even { @keyframes #{$animName}_even {
@content; @content;
} }
@keyframes #{$animName}_odd { @keyframes #{$animName}_odd {
@content; @content;
} }
} }
&.#{$classPrefix}Even #{$childSelector} { &.#{$classPrefix}Even #{$childSelector} {
animation: #{$animName}_even $duration; animation: #{$animName}_even $duration;
} }
&.#{$classPrefix}Odd #{$childSelector} { &.#{$classPrefix}Odd #{$childSelector} {
animation: #{$animName}_odd $duration; animation: #{$animName}_odd $duration;
} }
} }
// ---------------------------------------- // ----------------------------------------
/* Allows to use and define an animation without specifying its name */ /* Allows to use and define an animation without specifying its name */
@mixin InlineAnimation($duration) { @mixin InlineAnimation($duration) {
$animName: autogen_anim_#{unique-id()}; $animName: autogen_anim_#{unique-id()};
@at-root { @at-root {
@keyframes #{$animName} { @keyframes #{$animName} {
@content; @content;
} }
} }
animation: $animName $duration !important; animation: $animName $duration !important;
} }
// ---------------------------------------- // ----------------------------------------
/* Animation prefab for a double bounce pop-in animation, useful for dialogs */ /* 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) { @mixin DoubleBounceAnim($duration: 0.5s ease-in-out, $amount: 0.2, $initialOpacity: 0) {
@include InlineAnimation($duration) { @include InlineAnimation($duration) {
0% { 0% {
opacity: $initialOpacity; opacity: $initialOpacity;
transform: scale(0) $hardwareAcc; transform: scale(0) $hardwareAcc;
} }
25% { 25% {
opacity: 0.5; opacity: 0.5;
transform: scale(1 + $amount) $hardwareAcc; transform: scale(1 + $amount) $hardwareAcc;
} }
50% { 50% {
opacity: 1; opacity: 1;
transform: scale(1 - $amount * 0.5) $hardwareAcc; transform: scale(1 - $amount * 0.5) $hardwareAcc;
} }
75% { 75% {
transform: scale(1 + $amount * 0.25) $hardwareAcc; transform: scale(1 + $amount * 0.25) $hardwareAcc;
} }
100% { 100% {
transform: scale(1) $hardwareAcc; transform: scale(1) $hardwareAcc;
} }
} }
opacity: 1; opacity: 1;
} }
// ---------------------------------------- // ----------------------------------------
/* Automatically transforms the game state if a hardware keyboard is open */ /* Automatically transforms the game state if a hardware keyboard is open */
@mixin TransformToMatchKeyboard { @mixin TransformToMatchKeyboard {
transition: transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out;
@include AndroidHwKeyboardOpen { @include AndroidHwKeyboardOpen {
@include VerticalStyle { @include VerticalStyle {
transform: translateY(#{D(-125px)}) $hardwareAcc; transform: translateY(#{D(-125px)}) $hardwareAcc;
} }
@include HorizontalStyle { @include HorizontalStyle {
transform: translateY(#{D(-100px)}) $hardwareAcc; transform: translateY(#{D(-100px)}) $hardwareAcc;
} }
} }
} }
// ---------------------------------------- // ----------------------------------------
/* Define a style which is only applied when the viewport is at least X pixels wide */ /* Define a style which is only applied when the viewport is at least X pixels wide */
@mixin StyleAtWidth($minW) { @mixin StyleAtWidth($minW) {
@media (min-width: #{$minW}) { @media (min-width: #{$minW}) {
@content; @content;
} }
} }
// ---------------------------------------- // ----------------------------------------
/* Define a style which is only applied when the viewport is at least X pixels height */ /* Define a style which is only applied when the viewport is at least X pixels height */
@mixin StyleAtHeight($minH) { @mixin StyleAtHeight($minH) {
@media (min-height: #{$minH}) { @media (min-height: #{$minH}) {
@content; @content;
} }
} }
// ---------------------------------------- // ----------------------------------------
/* Define a style which is only applied when the viewport has at least the given dimensions */ /* Define a style which is only applied when the viewport has at least the given dimensions */
@mixin StyleAtDims($minW, $minH) { @mixin StyleAtDims($minW, $minH) {
@media (min-height: #{$minH}) and (min-width: #{$minW}) { @media (min-height: #{$minH}) and (min-width: #{$minW}) {
@content; @content;
} }
} }
// ---------------------------------------- // ----------------------------------------
/* Define a style which is only applied when the viewport has at maximum the given dimensions */ /* Define a style which is only applied when the viewport has at maximum the given dimensions */
@mixin StyleBelowDims($maxW, $maxH) { @mixin StyleBelowDims($maxW, $maxH) {
@media (max-height: #{$maxH}) and (max-width: #{$maxW}) { @media (max-height: #{$maxH}) and (max-width: #{$maxW}) {
@content; @content;
} }
} }
// ---------------------------------------- // ----------------------------------------
/* Define a style which is only applied when the viewport has at maximum the given height */ /* Define a style which is only applied when the viewport has at maximum the given height */
@mixin StyleBelowHeight($maxH) { @mixin StyleBelowHeight($maxH) {
@media (max-height: #{$maxH}) { @media (max-height: #{$maxH}) {
@content; @content;
} }
} }
// ---------------------------------------- // ----------------------------------------
/* Define a style which is only applied when the viewport has at maximum the given width */ /* Define a style which is only applied when the viewport has at maximum the given width */
@mixin StyleBelowWidth($maxW) { @mixin StyleBelowWidth($maxW) {
@media (max-width: #{$maxW}) { @media (max-width: #{$maxW}) {
@content; @content;
} }
} }
// ---------------------------------------- // ----------------------------------------
// Dynamic graphics quality styles // Dynamic graphics quality styles
@mixin BoxShadow3D($bgColor, $size: 3px, $pressEffect: true) { @mixin BoxShadow3D($bgColor, $size: 3px, $pressEffect: true) {
background-color: $bgColor; background-color: $bgColor;
$borderSize: 1.5px; $borderSize: 1.5px;
$borderColor: rgb(18, 20, 24); $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), // 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; // 0 D($size) 0 D($borderSize) $borderColor;
// box-shadow: 0 0 0 D($borderSize) $borderColor, 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); // D(-$size * 1.5) D($size * 2) 0 D($borderSize) rgba(0, 0, 0, 0.1);
// transition: box-shadow 0.1s ease-in-out; // transition: box-shadow 0.1s ease-in-out;
// @if $pressEffect { // @if $pressEffect {
// &.pressed { // &.pressed {
// transform: none !important; // transform: none !important;
// $pSize: max(0, $size - 1.5px); // $pSize: max(0, $size - 1.5px);
// transition: none !important; // transition: none !important;
// box-shadow: 0 0 0 D($borderSize) $borderColor, 0 D($pSize) 0 0px rgba(mix(darken($bgColor, 9), #b0e2ff, 95%), 1), // 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; // 0 D($pSize) 0 D($borderSize) $borderColor;
// top: D($size - $pSize); // top: D($size - $pSize);
// } // }
// } // }
} }
@mixin BorderRadius($v1: 2px, $v2: "", $v3: "", $v4: "") { @mixin BorderRadius($v1: 2px, $v2: "", $v3: "", $v4: "") {
@include S(border-radius, $v1, $v2, $v3, $v4); @include S(border-radius, $v1, $v2, $v3, $v4);
} }
@mixin BoxShadow($x, $y, $blur, $offset, $color) { @mixin BoxShadow($x, $y, $blur, $offset, $color) {
box-shadow: D($x) D($y) D($blur) D($offset) $color; box-shadow: D($x) D($y) D($blur) D($offset) $color;
} }
@mixin DropShadow($yOffset: 2px, $blur: 2px, $amount: 0.2) { @mixin DropShadow($yOffset: 2px, $blur: 2px, $amount: 0.2) {
@include BoxShadow(0, $yOffset, $blur, 0, rgba(#000, $amount)); @include BoxShadow(0, $yOffset, $blur, 0, rgba(#000, $amount));
} }
@mixin TextShadow($yOffset: 2px, $blur: 1px, $amount: 0.6) { @mixin TextShadow($yOffset: 2px, $blur: 1px, $amount: 0.6) {
text-shadow: 0 D($yOffset) D($blur) rgba(#000, $amount); text-shadow: 0 D($yOffset) D($blur) rgba(#000, $amount);
} }
@mixin Button3D($bgColor, $pressEffect: true) { @mixin Button3D($bgColor, $pressEffect: true) {
@include BoxShadow3D($bgColor, 2px, $pressEffect); @include BoxShadow3D($bgColor, 2px, $pressEffect);
} }
@mixin ButtonDisabled3D($bgColor) { @mixin ButtonDisabled3D($bgColor) {
@include BoxShadow3D($bgColor, 0.5px, false); @include BoxShadow3D($bgColor, 0.5px, false);
} }
@mixin BoxShadowInset($bgColor, $size: 3px) { @mixin BoxShadowInset($bgColor, $size: 3px) {
background-color: $bgColor; background-color: $bgColor;
$borderSize: 1px; $borderSize: 1px;
$borderColor: rgb(15, 19, 24); $borderColor: rgb(15, 19, 24);
box-shadow: 0 0 0 D($borderSize) $borderColor, 0 D($size) 0 rgba(#fff, 0.07); box-shadow:
border-top: D($size) solid rgba(#000, 0.1); 0 0 0 D($borderSize) $borderColor,
0 D($size) 0 rgba(#fff, 0.07);
//, 0 D($size) 0 0px rgba(mix(darken($bgColor, 9), #b0e2ff, 95%), 1), border-top: D($size) solid rgba(#000, 0.1);
// 0 D($size + $borderSize) 0 0 $borderColor;
} //, 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;
} @mixin TextShadow3D($color: rgb(222, 234, 238), $borderColor: #000) {
color: $color;
// ---------------------------------------- }
/* String replacement */
@function str-replace($string, $search, $replace: "") { // ----------------------------------------
$index: str-index($string, $search); /* String replacement */
@function str-replace($string, $search, $replace: "") {
@if $index { $index: str-index($string, $search);
@return str-slice($string, 1, $index - 1) + $replace +
str-replace(str-slice($string, $index + str-length($search)), $search, $replace); @if $index {
} @return str-slice($string, 1, $index - 1) + $replace +
str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
@return $string; }
}
@return $string;
@mixin BounceInFromSide($mul, $duration: 0.18s ease-in-out) { }
@include InlineAnimation($duration) {
0% { @mixin BounceInFromSide($mul, $duration: 0.18s ease-in-out) {
transform: translateY(#{D(-100px * $mul)}) scale(0.9); @include InlineAnimation($duration) {
opacity: 0; 0% {
} transform: translateY(#{D(-100px * $mul)}) scale(0.9);
opacity: 0;
100% { }
opacity: 1;
transform: none; 100% {
} opacity: 1;
} transform: none;
opacity: 1; }
transform: none; }
} opacity: 1;
transform: none;
@mixin BreakText { }
word-wrap: break-word;
word-break: break-all; @mixin BreakText {
overflow-wrap: break-all; word-wrap: break-word;
} word-break: break-all;
overflow-wrap: break-all;
@mixin SupportsAndroidNotchQuery { }
@supports (color: constant(--notch-inset-left)) {
@content; @mixin SupportsAndroidNotchQuery {
} @supports (color: constant(--notch-inset-left)) {
} @content;
@mixin SupportsiOsNotchQuery { }
@supports (color: env(safe-area-inset-left, 0px)) { }
@content; @mixin SupportsiOsNotchQuery {
} @supports (color: env(safe-area-inset-left, 0px)) {
} @content;
}
@mixin DarkThemeOverride { }
@at-root html[data-theme="dark"] &,
&[data-theme="dark"] { @mixin DarkThemeOverride {
@content; @at-root html[data-theme="dark"] &,
} &[data-theme="dark"] {
} @content;
}
@mixin DarkThemeInvert { }
@include DarkThemeOverride {
filter: invert(1); @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, $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, constant_signal, logic_gate, lever, filter, wire_tunnel, display, virtual_processor, reader, storage,
transistor, analyzer, comparator, item_producer, constant_producer, goal_acceptor, block; transistor, analyzer, comparator, item_producer, constant_producer, goal_acceptor, block;
@each $building in $buildings { @each $building in $buildings {
[data-icon="building_icons/#{$building}.png"] { [data-icon="building_icons/#{$building}.png"] {
/* @load-async */ /* @load-async */
.icon { .icon {
background-image: uiResource("res/ui/building_icons/#{$building}.png") !important; background-image: uiResource("res/ui/building_icons/#{$building}.png") !important;
} }
} }
} }
$buildingsAndVariants: belt, balancer, underground_belt, underground_belt-tier2, miner, miner-chainable, $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, 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, 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, logic_gate-xor, analyzer, virtual_processor-rotater, virtual_processor-unstacker, item_producer,
constant_producer, virtual_processor-stacker, virtual_processor-painter, wire-second, painter, constant_producer, virtual_processor-stacker, virtual_processor-painter, wire-second, painter,
painter-mirrored, comparator, goal_acceptor, block; painter-mirrored, comparator, goal_acceptor, block;
@each $building in $buildingsAndVariants { @each $building in $buildingsAndVariants {
[data-icon="building_tutorials/#{$building}.png"] { [data-icon="building_tutorials/#{$building}.png"] {
/* @load-async */ /* @load-async */
background-image: uiResource("res/ui/building_tutorials/#{$building}.png") !important; background-image: uiResource("res/ui/building_tutorials/#{$building}.png") !important;
} }
} }
[data-icon="building_tutorials/balancer-merger.png"], [data-icon="building_tutorials/balancer-merger.png"],
[data-icon="building_tutorials/balancer-merger-inverse.png"] { [data-icon="building_tutorials/balancer-merger-inverse.png"] {
/* @load-async */ /* @load-async */
background-image: uiResource("res/ui/building_tutorials/balancer-merger.png") !important; background-image: uiResource("res/ui/building_tutorials/balancer-merger.png") !important;
} }
[data-icon="building_tutorials/balancer-splitter.png"], [data-icon="building_tutorials/balancer-splitter.png"],
[data-icon="building_tutorials/balancer-splitter-inverse.png"] { [data-icon="building_tutorials/balancer-splitter-inverse.png"] {
/* @load-async */ /* @load-async */
background-image: uiResource("res/ui/building_tutorials/balancer-splitter.png") !important; background-image: uiResource("res/ui/building_tutorials/balancer-splitter.png") !important;
} }
[data-icon="building_tutorials/transistor.png"], [data-icon="building_tutorials/transistor.png"],
[data-icon="building_tutorials/transistor-mirrored.png"] { [data-icon="building_tutorials/transistor-mirrored.png"] {
/* @load-async */ /* @load-async */
background-image: uiResource("res/ui/building_tutorials/transistor.png") !important; background-image: uiResource("res/ui/building_tutorials/transistor.png") !important;
} }
// Filter and lever share tutorials // Filter and lever share tutorials
[data-icon="building_tutorials/filter.png"], [data-icon="building_tutorials/filter.png"],
[data-icon="building_tutorials/lever.png"] { [data-icon="building_tutorials/lever.png"] {
/* @load-async */ /* @load-async */
background-image: uiResource("res/ui/building_tutorials/lever.png") !important; background-image: uiResource("res/ui/building_tutorials/lever.png") !important;
} }
// Logic gate // Logic gate
[data-icon="building_tutorials/logic_gate.png"] { [data-icon="building_tutorials/logic_gate.png"] {
/* @load-async */ /* @load-async */
background-image: uiResource("res/ui/building_tutorials/logic_gate-and.png") !important; background-image: uiResource("res/ui/building_tutorials/logic_gate-and.png") !important;
} }
// Virtual processor // Virtual processor
[data-icon="building_tutorials/virtual_processor.png"] { [data-icon="building_tutorials/virtual_processor.png"] {
/* @load-async */ /* @load-async */
background-image: uiResource("res/ui/building_tutorials/virtual_processor-cutter.png") !important; background-image: uiResource("res/ui/building_tutorials/virtual_processor-cutter.png") !important;
} }
$icons: notification_saved, notification_success, notification_upgrade, notification_info, $icons: notification_saved, notification_success, notification_upgrade, notification_info,
notification_warning, notification_error; notification_warning, notification_error;
@each $icon in $icons { @each $icon in $icons {
[data-icon="icons/#{$icon}.png"] { [data-icon="icons/#{$icon}.png"] {
/* @load-async */ /* @load-async */
background-image: uiResource("res/ui/icons/#{$icon}.png") !important; 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, $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; th, hu, pl, ja, kor, no, pt-PT, fi, ro, he;
@each $language in $languages { @each $language in $languages {
[data-languageicon="#{$language}"] { [data-languageicon="#{$language}"] {
background-image: uiResource("languages/#{$language}.svg") !important; background-image: uiResource("languages/#{$language}.svg") !important;
} }
} }
.steam_dlbtn_0 { .steam_dlbtn_0 {
background-image: uiResource("steam_link_btn/0.png") !important; background-image: uiResource("steam_link_btn/0.png") !important;
} }

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

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

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

@ -1,72 +1,72 @@
#state_KeybindingsState { #state_KeybindingsState {
.content { .content {
.topEntries { .topEntries {
display: grid; display: grid;
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
@include S(grid-gap, 5px); @include S(grid-gap, 5px);
@include S(margin-bottom, 10px); @include S(margin-bottom, 10px);
} }
.hint { .hint {
display: block; display: block;
background: #eee; background: #eee;
@include S(padding, 6px, 10px); @include S(padding, 6px, 10px);
@include PlainText; @include PlainText;
@include S(border-radius, $globalBorderRadius); @include S(border-radius, $globalBorderRadius);
} }
.category { .category {
.entry { .entry {
display: grid; display: grid;
@include S(margin-top, 2px); @include S(margin-top, 2px);
@include S(padding-top, 2px); @include S(padding-top, 2px);
@include S(grid-gap, 4px); @include S(grid-gap, 4px);
grid-template-columns: 1fr #{D(100px)} auto auto; grid-template-columns: 1fr #{D(100px)} auto auto;
border-bottom: #{D(1px)} dotted #eee; border-bottom: #{D(1px)} dotted #eee;
color: #888c8f; color: #888c8f;
.mapping { .mapping {
color: $colorBlueBright; color: $colorBlueBright;
text-align: center; text-align: center;
} }
button { button {
@include S(height, 15px); @include S(height, 15px);
@include S(width, 15px); @include S(width, 15px);
@include IncreasedClickArea(0px); @include IncreasedClickArea(0px);
background: transparent center center / 40% no-repeat; background: transparent center center / 40% no-repeat;
opacity: 0.9; opacity: 0.9;
&.editKeybinding { &.editKeybinding {
background-image: uiResource("icons/edit_key.png"); background-image: uiResource("icons/edit_key.png");
} }
&.resetKeybinding { &.resetKeybinding {
background-image: uiResource("icons/reset_key.png"); background-image: uiResource("icons/reset_key.png");
} }
&.disabled { &.disabled {
pointer-events: none; pointer-events: none;
cursor: default; cursor: default;
opacity: 0.1 !important; opacity: 0.1 !important;
} }
} }
} }
} }
} }
@include DarkThemeOverride { @include DarkThemeOverride {
.content { .content {
.hint { .hint {
background: darken($darkModeControlsBackground, 4); background: darken($darkModeControlsBackground, 4);
} }
.category .entry { .category .entry {
color: #c0c4c8; color: #c0c4c8;
border-bottom-color: #888; border-bottom-color: #888;
button { button {
filter: invert(1); filter: invert(1);
} }
} }
} }
} }
} }

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

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

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

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

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

164
src/css/textual_game_state.scss
View File

@ -1,82 +1,82 @@
.gameState.textualState { .gameState.textualState {
display: grid; display: grid;
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
box-sizing: border-box; box-sizing: border-box;
@include S(padding, 32px); @include S(padding, 32px);
height: 100vh; height: 100vh;
.headerBar { .headerBar {
display: flex; display: flex;
h1 { h1 {
display: grid; display: grid;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
align-items: center; align-items: center;
pointer-events: all; pointer-events: all;
cursor: pointer; cursor: pointer;
@include SuperHeading; @include SuperHeading;
text-transform: uppercase; text-transform: uppercase;
color: #333438; color: #333438;
position: relative; position: relative;
@include IncreasedClickArea(10px); @include IncreasedClickArea(10px);
} }
.backButton { .backButton {
@include S(width, 30px); @include S(width, 30px);
@include S(height, 30px); @include S(height, 30px);
@include S(margin-right, 10px); @include S(margin-right, 10px);
@include S(margin-left, -5px); @include S(margin-left, -5px);
& { & {
background: uiResource("icons/state_back_button.png") center center / 70% no-repeat; background: uiResource("icons/state_back_button.png") center center / 70% no-repeat;
} }
} }
@include S(margin-bottom, 20px); @include S(margin-bottom, 20px);
} }
> .container { > .container {
display: flex; display: flex;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
overflow-y: auto; overflow-y: auto;
> .content { > .content {
width: 100%; width: 100%;
background: #fff; background: #fff;
@include S(border-radius, $globalBorderRadius); @include S(border-radius, $globalBorderRadius);
@include S(padding, 10px); @include S(padding, 10px);
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
box-sizing: border-box; box-sizing: border-box;
pointer-events: all; pointer-events: all;
a { a {
color: $colorBlueBright; color: $colorBlueBright;
} }
.categoryLabel { .categoryLabel {
display: block; display: block;
text-transform: uppercase; text-transform: uppercase;
@include S(margin-top, 15px); @include S(margin-top, 15px);
@include S(margin-bottom, 15px); @include S(margin-bottom, 15px);
@include Heading; @include Heading;
} }
} }
} }
@include DarkThemeOverride { @include DarkThemeOverride {
.headerBar { .headerBar {
h1 { h1 {
color: #e2e0db; color: #e2e0db;
} }
.backButton { .backButton {
filter: invert(1); filter: invert(1);
} }
} }
> .container > .content { > .container > .content {
background: $darkModeControlsBackground; background: $darkModeControlsBackground;
color: #eee; color: #eee;
} }
} }
} }

360
src/css/variables.scss
View File

@ -1,180 +1,180 @@
$globalBorderRadius: 6px; $globalBorderRadius: 6px;
// When to reduce control elements size for small devices // When to reduce control elements size for small devices
$layoutExpandMinWidth: 340px; $layoutExpandMinWidth: 340px;
// Font sizes and line heights // Font sizes and line heights
$superHeadingFontSize: 25px; $superHeadingFontSize: 25px;
$superHeadingLineHeight: 24px; $superHeadingLineHeight: 24px;
$breakTooltipShowStatsPx: 1023px; $breakTooltipShowStatsPx: 1023px;
$headingFontSize: 19px; $headingFontSize: 19px;
$headingLineHeight: 21px; $headingLineHeight: 21px;
$textFontSize: 16px; $textFontSize: 16px;
$textLineHeight: 21px; $textLineHeight: 21px;
$plainTextFontSize: 13px; $plainTextFontSize: 13px;
$plainTextLineHeight: 17px; $plainTextLineHeight: 17px;
$superDuperSmallTextFontSize: 8px; $superDuperSmallTextFontSize: 8px;
$superDuperSmallTextLineHeight: 9px; $superDuperSmallTextLineHeight: 9px;
$superSmallTextFontSize: 10px; $superSmallTextFontSize: 10px;
$superSmallTextLineHeight: 13px; $superSmallTextLineHeight: 13px;
$buttonFontSize: 14px; $buttonFontSize: 14px;
$buttonLineHeight: 18px; $buttonLineHeight: 18px;
// Main background color // Main background color
$mainBgColor: #dee1ea; $mainBgColor: #dee1ea;
// Accent colors // Accent colors
$accentColorBright: #e1e4ed; $accentColorBright: #e1e4ed;
$accentColorDark: #7d808a; $accentColorDark: #7d808a;
$colorGreenBright: #66bb6a; $colorGreenBright: #66bb6a;
$colorBlueBright: rgb(74, 151, 223); $colorBlueBright: rgb(74, 151, 223);
$colorRedBright: #ef5072; $colorRedBright: #ef5072;
$colorOrangeBright: #ef9d50; $colorOrangeBright: #ef9d50;
$themeColor: #393747; $themeColor: #393747;
$ingameHudBg: rgba(#33343b, 0.9); $ingameHudBg: rgba(#33343b, 0.9);
$modsColor: rgb(214, 60, 228); $modsColor: rgb(214, 60, 228);
$text3dColor: #f4ffff; $text3dColor: #f4ffff;
$darkModeGameBackground: #535866; $darkModeGameBackground: #535866;
$darkModeControlsBackground: darken($darkModeGameBackground, 5); $darkModeControlsBackground: darken($darkModeGameBackground, 5);
// Dialog properties // Dialog properties
$modalDialogBg: rgba(160, 165, 180, 0.8); $modalDialogBg: rgba(160, 165, 180, 0.8);
$dialogBgColor: lighten($mainBgColor, 10); $dialogBgColor: lighten($mainBgColor, 10);
$lightFontWeight: normal; $lightFontWeight: normal;
$boldFontWeight: 600; $boldFontWeight: 600;
$iconSizeSmall: 30px; $iconSizeSmall: 30px;
$iconSizeMedium: 40px; $iconSizeMedium: 40px;
$iconSizeLarge: 60px; $iconSizeLarge: 60px;
// Poppins 500 // Poppins 500
// Rubik 400 // Rubik 400
// Cairo 400 // Cairo 400
// Viga 400 // Viga 400
// Sniglet 400 // Sniglet 400
$mainFont: "GameFont", sans-serif; $mainFont: "GameFont", sans-serif;
// $mainFont: "DK Canoodle"; // $mainFont: "DK Canoodle";
// $mainFont: "MADE Florence Sans"; // $mainFont: "MADE Florence Sans";
$numberFont: $mainFont; $numberFont: $mainFont;
$textFont: $mainFont; $textFont: $mainFont;
$mainFontWeight: 400; $mainFontWeight: 400;
$mainFontSpacing: 0.01em; $mainFontSpacing: 0.01em;
$mainFontScale: 1; $mainFontScale: 1;
@mixin DebugText($color) { @mixin DebugText($color) {
// font-size: 3px; // font-size: 3px;
// &, // &,
// * { // * {
// color: $color !important; // color: $color !important;
// } // }
} }
@mixin SuperDuperSmallText { @mixin SuperDuperSmallText {
@include ScaleFont($superDuperSmallTextFontSize, $superDuperSmallTextLineHeight); @include ScaleFont($superDuperSmallTextFontSize, $superDuperSmallTextLineHeight);
font-weight: $mainFontWeight; font-weight: $mainFontWeight;
font-family: $mainFont; font-family: $mainFont;
letter-spacing: $mainFontSpacing; letter-spacing: $mainFontSpacing;
@include DebugText(green); @include DebugText(green);
} }
@mixin SuperSmallText { @mixin SuperSmallText {
@include ScaleFont($superSmallTextFontSize, $superSmallTextLineHeight); @include ScaleFont($superSmallTextFontSize, $superSmallTextLineHeight);
font-weight: $mainFontWeight; font-weight: $mainFontWeight;
font-family: $mainFont; font-family: $mainFont;
letter-spacing: $mainFontSpacing; letter-spacing: $mainFontSpacing;
@include DebugText(green); @include DebugText(green);
} }
@mixin PlainText { @mixin PlainText {
@include ScaleFont($plainTextFontSize, $plainTextLineHeight); @include ScaleFont($plainTextFontSize, $plainTextLineHeight);
font-weight: $mainFontWeight; font-weight: $mainFontWeight;
font-family: $mainFont; font-family: $mainFont;
letter-spacing: $mainFontSpacing; letter-spacing: $mainFontSpacing;
@include DebugText(red); @include DebugText(red);
} }
@mixin Text { @mixin Text {
@include ScaleFont($textFontSize, $textLineHeight); @include ScaleFont($textFontSize, $textLineHeight);
font-weight: $mainFontWeight; font-weight: $mainFontWeight;
font-family: $mainFont; font-family: $mainFont;
letter-spacing: $mainFontSpacing; letter-spacing: $mainFontSpacing;
@include DebugText(blue); @include DebugText(blue);
} }
@mixin Heading { @mixin Heading {
@include ScaleFont($headingFontSize, $headingLineHeight); @include ScaleFont($headingFontSize, $headingLineHeight);
font-weight: $mainFontWeight; font-weight: $mainFontWeight;
font-family: $mainFont; font-family: $mainFont;
letter-spacing: $mainFontSpacing; letter-spacing: $mainFontSpacing;
@include DebugText(yellow); @include DebugText(yellow);
} }
@mixin SuperHeading { @mixin SuperHeading {
@include ScaleFont($superHeadingFontSize, $superHeadingLineHeight); @include ScaleFont($superHeadingFontSize, $superHeadingLineHeight);
font-weight: $mainFontWeight; font-weight: $mainFontWeight;
font-family: $mainFont; font-family: $mainFont;
letter-spacing: $mainFontSpacing; letter-spacing: $mainFontSpacing;
@include DebugText(orange); @include DebugText(orange);
} }
@mixin ButtonText { @mixin ButtonText {
@include ScaleFont($buttonFontSize, $buttonLineHeight); @include ScaleFont($buttonFontSize, $buttonLineHeight);
font-weight: $mainFontWeight; font-weight: $mainFontWeight;
font-family: $mainFont; font-family: $mainFont;
letter-spacing: $mainFontSpacing; letter-spacing: $mainFontSpacing;
@include DebugText(purple); @include DebugText(purple);
} }
@function str-split($string, $separator) { @function str-split($string, $separator) {
// empty array/list // empty array/list
$split-arr: (); $split-arr: ();
// first index of separator in string // first index of separator in string
$index: str-index($string, $separator); $index: str-index($string, $separator);
// loop through string // loop through string
@while $index != null { @while $index != null {
// get the substring from the first character to the separator // get the substring from the first character to the separator
$item: str-slice($string, 1, $index - 1); $item: str-slice($string, 1, $index - 1);
// push item to array // push item to array
$split-arr: append($split-arr, $item); $split-arr: append($split-arr, $item);
// remove item and separator from string // remove item and separator from string
$string: str-slice($string, $index + 1); $string: str-slice($string, $index + 1);
// find new index of separator // find new index of separator
$index: str-index($string, $separator); $index: str-index($string, $separator);
} }
// add the remaining string to list (the last item) // add the remaining string to list (the last item)
$split-arr: append($split-arr, $string); $split-arr: append($split-arr, $string);
@return $split-arr; @return $split-arr;
} }
@function _first-index($string, $direction: "left") { @function _first-index($string, $direction: "left") {
@for $i from 1 through str-length($string) { @for $i from 1 through str-length($string) {
$index: if($direction == "left", $i, -$i); $index: if($direction == "left", $i, -$i);
@if str-slice($string, $index, $index) != " " { @if str-slice($string, $index, $index) != " " {
@return $index; @return $index;
} }
} }
@return 0; @return 0;
} }
@function trim($string) { @function trim($string) {
@return str-slice($string, _first-index($string, "left"), _first-index($string, "right")); @return str-slice($string, _first-index($string, "left"), _first-index($string, "right"));
} }