Fixed scss spaces

src/css/animations.scss

@@ -3,13 +3,16 @@
         0% {
             transform: scale(1, 1);
         }
+
         50% {
             transform: scale(1.03, 1.03);
         }
+
         100% {
             transform: scale(1, 1);
         }
     }
+
     .#{$animName} {
         animation: $animName 0.2s ease-in-out;
     }

src/css/dynamic_ui.scss

@@ -3,6 +3,7 @@
     @if type-of($number) == "number" and not unitless($number) {
         @return $number / ($number * 0 + 1);
     }
+
     @return $number;
 }
 
@@ -24,15 +25,19 @@
     @if $important == true {
         $impSuffix: "!important";
     }
+
     $v1: D($v1);
     @if $v2 != "" {
         $v2: D($v2);
     }
+
     @if $v3 != "" {
         $v3: D($v3);
     }
+
     @if $v4 != "" {
         $v4: D($v4);
     }
+
     #{$propName}: #{$v1} #{$v2} #{$v3} #{$v4} #{$impSuffix};
 }

src/css/resources.scss

@@ -1,6 +1,7 @@
 $buildings: belt, cutter, miner, mixer, painter, rotater, balancer, stacker, trash, underground_belt, wire,
     constant_signal, logic_gate, lever, filter, wire_tunnel, display, virtual_processor, reader, storage,
     transistor, analyzer, comparator, item_producer;
+
 @each $building in $buildings {
     [data-icon="building_icons/#{$building}.png"] {
         /* @load-async */
@@ -67,6 +68,7 @@ $icons: notification_saved, notification_success, notification_upgrade;
 
 $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;
+
 @each $language in $languages {
     [data-languageicon="#{$language}"] {
         /* @load-async */

src/css/states/main_menu.scss

@@ -3,8 +3,10 @@
     align-items: center;
     justify-content: center;
     flex-direction: column;
+
     // background: #aaacb4 center center / cover !important;
     background: #bbc2cf center center / cover !important;
+
     .topButtons {
         position: absolute;
         @include S(top, 20px);
@@ -12,6 +14,7 @@
         display: grid;
         grid-auto-flow: column;
         @include S(grid-gap, 15px);
+
         .settingsButton,
         .exitAppButton,
         .languageChoose {
@@ -30,11 +33,13 @@
                 opacity: 1;
             }
         }
+
         .exitAppButton {
             /* @load-async */
             background-image: uiResource("icons/main_menu_exit.png");
             background-size: 90%;
         }
+
         .languageChoose {
             @include S(border-radius, 8px);
             border: solid #222428;
@@ -44,6 +49,7 @@
             opacity: 0.8;
         }
     }
+
     .fullscreenBackgroundVideo {
         // display: none !important;
         z-index: -1;
@@ -52,14 +58,17 @@
         bottom: 50%;
         min-width: 100%;
         min-height: 100%;
+
         opacity: 0;
         display: none;
         transform: translate(50%, 50%);
         filter: blur(D(3px));
+
         $opacity: 0.07;
         &.loaded {
             display: block;
             opacity: $opacity;
+
             @include InlineAnimation(0.1s ease-in-out) {
                 0% {
                     opacity: 0;
@@ -70,16 +79,20 @@
             }
         }
     }
+
     .mainWrapper {
         @include S(padding, 0, 10px);
         align-items: start;
         justify-items: center;
+
         @include S(grid-column-gap, 10px);
         display: grid;
         grid-template-columns: 1fr;
+
         &.demo {
             grid-template-columns: 1fr 1fr;
         }
+
         .standaloneBanner {
             background: rgb(255, 75, 84);
             @include S(border-radius, $globalBorderRadius + 4);
@@ -87,12 +100,15 @@
             border: solid rgba(#fff, 0.15);
             @include S(border-width, 4px);
             @include S(padding, 15px);
+
             display: flex;
             flex-direction: column;
+
             strong {
                 font-weight: bold;
                 @include S(margin, 0, 4px);
             }
+
             h3 {
                 @include Heading;
                 font-weight: bold;
@@ -100,10 +116,12 @@
                 text-transform: uppercase;
                 color: #fff;
             }
+
             p {
                 @include Text;
                 color: #fff;
             }
+
             ul {
                 @include S(margin-top, 5px);
                 @include S(padding-left, 20px);
@@ -111,6 +129,7 @@
                     @include Text;
                 }
             }
+
             .steamLink {
                 align-self: center;
                 justify-self: center;
@@ -127,7 +146,9 @@
                 transition: all 0.12s ease-in;
                 transition-property: opacity, transform;
                 transform: skewX(-0.5deg);
+
                 @include S(border-radius, $globalBorderRadius);
+
                 &:hover {
                     transform: scale(1.02);
                     opacity: 0.9;
@@ -135,16 +156,19 @@
             }
         }
     }
+
     .logo {
         display: flex;
         flex-grow: 1;
         align-items: center;
         justify-content: center;
+
         flex-direction: column;
         @include S(padding-top, 20px);
         img {
             @include S(width, 350px);
         }
+
         .demoBadge {
             @include S(margin, 10px, 0);
             @include S(width, 100px);
@@ -155,6 +179,7 @@
             }
             display: inline-block;
         }
+
         position: relative;
         .updateLabel {
             position: absolute;
@@ -164,16 +189,19 @@
             font-weight: bold;
             @include S(right, 40px);
             @include S(bottom, 20px);
+
             @include InlineAnimation(1.3s ease-in-out infinite) {
                 50% {
                     transform: translateX(50%) rotate(-7deg) scale(1.1);
                 }
             }
+
             @include DarkThemeOverride {
                 color: $colorBlueBright;
             }
         }
     }
+
     .betaWarning {
         @include S(width, 400px);
         @include PlainText;
@@ -184,15 +212,18 @@
         @include S(margin-top, 10px);
         border: #{D(2px)} solid rgba(0, 10, 20, 0.1);
     }
+
     .sideContainer {
         display: flex;
         flex-direction: column;
         @include S(width, 300px);
+
         .standaloneBanner {
             flex-grow: 1;
             @include S(margin-bottom, 10px);
         }
     }
+
     .mainContainer {
         display: flex;
         align-items: center;
@@ -205,11 +236,13 @@
         height: 100%;
         width: 100%;
         box-sizing: border-box;
+
         .buttons {
             display: flex;
             flex-direction: column;
             align-items: center;
         }
+
         .browserWarning {
             @include S(margin-bottom, 10px);
             background-color: $colorRedBright;
@@ -219,6 +252,7 @@
             @include S(padding, 5px);
             @include S(width, 300px);
         }
+
         .playButton,
         .continueButton {
             @include SuperHeading;
@@ -230,23 +264,28 @@
             color: #fff;
             background-color: $colorGreenBright;
             transition: transform 0.12s ease-in-out, background-color 0.12s ease-in-out;
+
             &:hover {
                 background-color: darken($colorGreenBright, 4);
                 opacity: 1;
             }
+
             &.continueButton {
                 @include Heading;
             }
         }
+
         .importButton {
             @include S(margin-top, 15px);
             @include IncreasedClickArea(0px);
         }
+
         .newGameButton {
             @include IncreasedClickArea(0px);
             @include S(margin-top, 15px);
             @include S(margin-left, 15px);
         }
+
         .savegames {
             @include S(max-height, 105px);
             overflow-y: auto;
@@ -257,6 +296,7 @@
             grid-auto-flow: row;
             @include S(grid-gap, 5px);
             @include S(margin-top, 10px);
+
             .savegame {
                 background: #eee;
                 @include S(border-radius, $globalBorderRadius);
@@ -266,12 +306,14 @@
                 grid-template-rows: auto auto;
                 @include S(grid-column-gap, 4px);
                 @include S(grid-row-gap, 1px);
+
                 .playtime {
                     grid-column: 2 / 3;
                     grid-row: 2 / 3;
                     @include SuperSmallText;
                     opacity: 0.5;
                 }
+
                 .level {
                     grid-column: 1 / 2;
                     grid-row: 2 / 3;
@@ -284,18 +326,21 @@
                         vertical-align: middle;
                     }
                 }
+
                 .name {
                     grid-column: 1 / 3;
                     grid-row: 1 / 2;
                     @include PlainText;
                     display: inline-flex;
                     align-items: center;
+
                     > span {
                         display: inline-flex;
                         @include S(max-width, 140px);
                         overflow: hidden;
                     }
                 }
+
                 button.resumeGame,
                 button.downloadGame,
                 button.deleteGame,
@@ -307,6 +352,7 @@
                     @include IncreasedClickArea(0px);
                     background: #44484a center center / 40% no-repeat;
                 }
+
                 button.resumeGame {
                     background-color: #44484a;
                     & {
@@ -314,10 +360,12 @@
                         background-image: uiResource("icons/play.png");
                     }
                 }
+
                 button.downloadGame {
                     grid-column: 3 / 4;
                     grid-row: 1 / 2;
                     background-color: transparent;
+
                     & {
                         /* @load-async */
                         background-image: uiResource("icons/download.png");
@@ -328,16 +376,20 @@
                     background-size: 80%;
                     align-self: start;
                     opacity: 0.4;
+
                     &:hover {
                         opacity: 0.5;
                     }
+
                     @include DarkThemeInvert;
                 }
+
                 button.deleteGame {
                     grid-column: 3 / 4;
                     grid-row: 2 / 3;
                     background-color: transparent;
                     @include IncreasedClickArea(0px);
+
                     & {
                         /* @load-async */
                         background-image: uiResource("icons/delete.png");
@@ -347,14 +399,18 @@
                     align-self: end;
                     background-size: 80%;
                     opacity: 0.4;
+
                     &:hover {
                         opacity: 0.5;
                     }
+
                     @include DarkThemeInvert;
                 }
+
                 button.renameGame {
                     background-color: transparent;
                     @include IncreasedClickArea(2px);
+
                     & {
                         /* @load-async */
                         background-image: uiResource("icons/edit_key.png");
@@ -363,19 +419,24 @@
                     @include S(height, 10px);
                     align-self: center;
                     justify-self: center;
+
                     background-size: 90%;
                     opacity: 0.4;
                     @include S(margin-left, 4px);
+
                     &:hover {
                         opacity: 0.5;
                     }
+
                     @include DarkThemeInvert;
                 }
+
                 button.gamemode {
                     display: inline-flex;
                     vertical-align: middle;
                     background-color: transparent;
                     @include IncreasedClickArea(2px);
+
                     & {
                         /* @load-async */
                         background-image: uiResource("icons/edit_key.png");
@@ -384,14 +445,18 @@
                     @include S(height, 8px);
                     align-self: center;
                     justify-self: center;
+
                     background-size: 90%;
                     opacity: 0.4;
                     @include S(margin-left, 4px);
+
                     &:hover {
                         opacity: 0.5;
                     }
+
                     @include DarkThemeInvert;
                 }
+
                 button.resumeGame {
                     grid-column: 4 / 5;
                     grid-row: 1 / 3;
@@ -399,6 +464,7 @@
                     @include S(width, 32px);
                     height: 100%;
                     @include S(margin-left, 4px);
+
                     @include DarkThemeOverride {
                         background-color: lighten($darkModeControlsBackground, 10);
                     }
@@ -406,6 +472,7 @@
             }
         }
     }
+
     .footer {
         display: grid;
         flex-grow: 1;
@@ -416,6 +483,7 @@
         @include S(padding, 10px);
         box-sizing: border-box;
         @include S(grid-gap, 4px);
+
         .author {
             flex-grow: 1;
             text-align: right;
@@ -425,10 +493,13 @@
                 color: #333438;
             }
         }
+
         @include S(padding, 15px);
+
         $linkBg: #fdfdff;
         $linkBgHover: darken($linkBg, 2);
         $linkColor: #55586a;
+
         > .boxLink {
             display: grid;
             align-items: center;
@@ -442,18 +513,22 @@
             @include S(padding-left, 10px);
             @include S(border-radius, $globalBorderRadius);
             @include SuperSmallText();
+
             font-weight: bold;
             box-sizing: border-box;
             text-transform: uppercase;
             color: $linkColor;
+
             transition: background-color 0.12s ease-in-out;
             pointer-events: all;
             @include S(width, 120px);
             @include S(height, 60px);
+
             cursor: pointer;
             &:hover {
                 background-color: $linkBgHover;
             }
+
             .thirdpartyLogo {
                 display: inline-block;
                 @include S(width, 50px);
@@ -470,6 +545,7 @@
                 }
             }
         }
+
         > .sidelinks {
             display: grid;
             align-items: flex-start;
@@ -477,10 +553,12 @@
             grid-template-rows: 1fr 1fr 1fr;
             @include S(grid-gap, 3px);
             @include S(height, 60px);
+
             > a {
                 color: $linkColor;
                 background: $linkBg;
                 height: 100%;
+
                 &:hover {
                     background-color: $linkBgHover;
                 }
@@ -491,6 +569,7 @@
                 display: flex;
                 align-items: center;
                 justify-content: flex-start;
+
                 @include S(padding-left, 25px);
                 box-sizing: border-box;
                 font-weight: bold;
@@ -498,7 +577,9 @@
                 background-size: #{D(12px)};
                 background-repeat: no-repeat;
                 @include S(border-radius, $globalBorderRadius);
+
                 transition: background-color 0.12s ease-in-out;
+
                 &.redditLink {
                     /* @load-async */
                     background-image: uiResource("main_menu/reddit.svg");
@@ -514,26 +595,32 @@
             }
         }
     }
+
     @include DarkThemeOverride {
         background: $darkModeGameBackground center center / cover !important;
+
         .mainContainer {
             background: $darkModeControlsBackground;
+
             .savegames .savegame {
                 background: darken($darkModeControlsBackground, 5);
                 color: white;
             }
         }
+
         .footer {
             > a,
             .sidelinks > a {
                 background-color: $darkModeControlsBackground;
                 color: #eee;
+
                 &:hover {
                     background-color: darken($darkModeControlsBackground, 5);
                 }
             }
             .author {
                 color: #bdbdbd;
+
                 > a {
                     color: white;
                 }