Clean up SCSS stylesheets

Can have minor effect on game appearance, most importantly the removal
of letter-spacing by default. Styles are now much lighter though.
Changes all keybinding code to use kbd instead of code as well.

gulp/preloader/preloader.css

@@ -9,14 +9,13 @@
 * {
     margin: 0;
     padding: 0;
-    touch-action: pan-x pan-y !important;
+    touch-action: pan-x pan-y;
     pointer-events: none;
     -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
 }
 
 html {
     position: fixed;
-    touch-action: pan-x, pan-y;
     top: 0;
     left: 0;
     bottom: 0;
@@ -28,23 +27,9 @@ body {
     color: #555;
     user-select: none;
     background: inherit !important;
-    text-transform: none;
-    white-space: normal;
-    word-break: normal;
-    word-spacing: normal;
     word-wrap: break-word;
-    font-style: normal;
-    line-break: auto;
-    font-stretch: 100%;
     text-rendering: optimizeLegibility;
-    text-decoration: none;
-    text-size-adjust: 100%;
-    letter-spacing: normal;
     -webkit-font-smoothing: antialiased;
-    -webkit-touch-callout: none;
-    /* prevent callout to copy image, etc when tap to hold */
-    -webkit-text-size-adjust: none;
-    /* prevent webkit from resizing text to fit */
 }
 
 #ll_fp {

src/css/common.scss

@@ -2,7 +2,7 @@
 * {
     margin: 0;
     padding: 0;
-    touch-action: pan-x pan-y !important;
+    touch-action: pan-x pan-y;
     pointer-events: none;
     -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
 }
@@ -21,16 +21,7 @@ body {
 }
 
 html {
-    position: fixed;
-    // scroll-behavior: smooth;
     background: $mainBgColor;
-    // Disable zooming and thus
-    touch-action: pan-x, pan-y;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    background: #dee1ea;
     @include DarkThemeOverride {
         background: $darkModeGameBackground;
     }
@@ -39,41 +30,11 @@ html {
 body {
     color: #555;
     user-select: none;
-    background: inherit !important;
+    background: inherit;
-    text-transform: none;
-    white-space: normal;
-    word-break: normal;
-    word-spacing: normal;
     word-wrap: break-word;
-    font-style: normal;
-    line-break: auto;
-    font-stretch: 100%;
     text-rendering: optimizeLegibility;
-    text-decoration: none;
-    text-size-adjust: 100%;
-    letter-spacing: normal;
     -webkit-font-smoothing: antialiased;
-    -webkit-touch-callout: none;
-    /* prevent callout to copy image, etc when tap to hold */
-    overflow: hidden;
     @include Text;
-    // For recording the bg video
-    // filter: blur(5px);
-    // &::after {
-    //   position: fixed;
-    //   top: 0;
-    //   left: 0;
-    //   right: 0;
-    //   bottom: 0;
-    //   z-index: 9999;
-    //   content: " ";
-    //   background: rgba($ingameHudBg, 0.5);
-    // }
-}
-
-img {
-    -webkit-touch-callout: none;
-    /* prevent callout to copy image, etc when tap to hold */
 }
 
 i {
@@ -94,8 +55,6 @@ input,
 textarea,
 select {
     font-size: inherit;
-    font-weight: inherit;
-    font-family: inherit;
     line-height: inherit;
 }
 
@@ -106,69 +65,24 @@ button {
     cursor: pointer;
     position: relative;
     @include TextShadow3D;
-    &.prefab_BuyButtonWithResources {
-        display: flex;
-        box-sizing: border-box;
-        @include S(padding, 6px, 4px);
-        // letter-spacing: 0;
-        background-color: color($cyan, 400);
-        flex-direction: row;
-        justify-content: center;
-        align-items: center;
-        @include S(width, 85px);
-        &.tooExpensive {
-            color: $colorRedBright;
-            background-color: #555;
-            cursor: default;
-        }
-        .cost_entry {
-            display: flex;
-            flex-grow: 1;
-            justify-content: center;
-            align-items: center;
-        }
-        b {
-            display: flex;
-            flex-grow: 1;
-            justify-content: center;
-            align-items: center;
-        }
-        &.tooExpensive {
-            cursor: default !important;
-            background-color: #565859 !important;
-            b {
-                color: $colorRedBright !important;
-            }
-            .cost_entry {
-                opacity: 0.6;
-            }
-        }
-    }
 }
 
 .styledButton {
-    background: $themeColor;
     text-transform: uppercase;
     box-sizing: content-box;
     @include S(padding, 3px, 10px);
-    @include IncreasedClickArea(10px);
-    @include TextShadow3D(#fff, $borderColor: #28292a);
     @include ButtonText;
     border: 0;
     background: $colorBlueBright;
     color: #fff;
-
     @include S(border-radius, 0.8 * $globalBorderRadius);
-    // border: #{D(1px)} solid rgba(0, 10, 20, 0.2);
+    transition: opacity 0.12s ease-in-out;
-    @include S(border-bottom-width, 2px);
+
-    // color: $accentColorDark;
-    letter-spacing: 0em !important;
-    // box-shadow: 0 #{D(1px)} #{D(2px)} 0 rgba(0, 10, 20, 0.2);
     .keybinding {
         @include S(bottom, -2.5px);
         @include S(right, -2px);
     }
-    transition: opacity 0.12s ease-in-out;
+
     &:hover {
         opacity: 0.9;
     }
@@ -184,7 +98,6 @@ input[type="email"] {
     @include S(padding, 11px, 12px);
     @include S(margin, 10px, 0);
     border: 0;
-    cursor: text;
     display: block;
     text-align: left;
     box-sizing: border-box;
@@ -194,7 +107,6 @@ input[type="email"] {
     user-select: text !important;
     pointer-events: all !important;
     @include Text;
-    @include IncreasedClickArea(15px);
     @include S(border-radius, $globalBorderRadius);
     &::placeholder {
         color: #fff;
@@ -239,8 +151,6 @@ a {
 
 a {
     text-decoration: none;
-    cursor: pointer;
-    pointer-events: all;
 }
 
 i {
@@ -250,28 +160,15 @@ i {
 input {
     user-select: text;
     pointer-events: all;
-    cursor: text;
     border-radius: 0;
 }
 
 canvas {
     pointer-events: all;
-    // image-rendering: pixelated;
-    // &.smoothed {
-    // }1
-    // &.unsmoothed {
-    // }
-    letter-spacing: 0 !important;
     transform: translateZ(0);
     backface-visibility: hidden;
 }
 
-.fontPreload {
-    position: absolute;
-    top: -100px;
-    left: -100px;
-}
-
 // Scrollbar
 ::-webkit-scrollbar {
     @include S(width, 6px);
@@ -292,21 +189,6 @@ canvas {
     background: #d8dce0;
 }
 
-#uiTestPlaybackCursor {
-    position: fixed;
-    top: 100px;
-    left: 100px;
-    z-index: 9999;
-    border-radius: 50%;
-    background: rgba(255, 255, 0, 0.4);
-    width: 24px;
-    height: 24px;
-    border: 3px solid rgba(0, 0, 0, 0.5);
-    margin-top: -12px;
-    margin-left: -12px;
-    box-sizing: border-box;
-}
-
 .pressed:not(.noPressEffect) {
     transform: scale(0.98) !important;
     animation: none !important;
@@ -334,8 +216,7 @@ canvas {
     color: color($purple, 300);
 }
 
-.prefab_LoadingTextWithAnim,
+.prefab_LoadingTextWithAnim {
-.prefab_LoadingTextWithAnimDelayed {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -368,20 +249,6 @@ canvas {
     }
 }
 
-.prefab_LoadingTextWithAnimDelayed {
-    @include InlineAnimation(0.6s ease-in-out) {
-        0% {
-            opacity: 0;
-        }
-        50% {
-            opacity: 0;
-        }
-        100% {
-            opacity: 1;
-        }
-    }
-}
-
 .prefab_LoadingProgressIndicator {
     @include PlainText;
     @include S(margin-top, 20px);
@@ -392,43 +259,6 @@ canvas {
     text-align: center;
 }
 
-.prefab_FeatureComingSoon {
-    position: relative;
-    &::after {
-        @include S(top, -5px);
-        @include S(left, -5px);
-        @include S(right, -5px);
-        @include S(bottom, -5px);
-        content: "Coming soon!";
-        z-index: 10000;
-        background: rgba(lighten($mainBgColor, 0), 0.4);
-        @include S(border-radius, $globalBorderRadius);
-        position: absolute;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        pointer-events: all;
-        @include PlainText;
-        text-transform: uppercase;
-    }
-    opacity: 0.6;
-    > * {
-        opacity: 0.5 !important;
-    }
-}
-
-.prefab_InfoIcon {
-    @include S(width, 25px);
-    @include S(height, 25px);
-    z-index: 100;
-    opacity: 0.8;
-    cursor: pointer;
-    pointer-events: all;
-    display: inline-block;
-    position: relative;
-    @include IncreasedClickArea(10px);
-}
-
 .gameState.prefab_LoadingState {
     text-align: center;
     display: flex;
@@ -545,7 +375,6 @@ canvas {
         box-shadow 0.4s ease-in-out !important;
     position: relative;
     @include BorderRadius(20px);
-    @include IncreasedClickArea(10px);
     @include BoxShadow3D($bgColor, $size: 2px);
     &.loading {
         opacity: 0.2;
@@ -637,6 +466,7 @@ input.rangeInput {
 .keybinding {
     background: #fff;
     text-transform: uppercase;
+    font-family: inherit;
     @include S(padding, 1.5px, 3px, 2px);
     @include PlainText;
     @include S(border-radius, 0.5 * $globalBorderRadius);
@@ -644,12 +474,8 @@ input.rangeInput {
     > span {
         @include S(font-size, 9px);
         @include S(line-height, 11px);
-        font-weight: bold !important;
-        text-shadow: none !important;
-        // font-family: Arial, sans-serif !important;
     }
 
-    font-weight: bold;
     color: $accentColorDark;
     text-align: center;
     justify-content: center;

src/css/dynamic_ui.scss

@@ -13,12 +13,6 @@
     @return calc(#{$baseValue} * var(--ui-scale));
 }
 
-// Helper method to scale the font size
-@mixin ScaleFont($fontSize, $lineHeight) {
-    font-size: D($fontSize * $mainFontScale);
-    line-height: D($lineHeight * $mainFontScale);
-}
-
 // Helper method to scale a property value
 @mixin S($propName, $v1, $v2: "", $v3: "", $v4: "", $important: false) {
     $impSuffix: "";

src/css/game_state.scss

@@ -6,22 +6,10 @@ $gameStateTransition: 0.2s ease-out;
 }
 
 .gameState {
-    display: block;
-    // background: $mainBgColor;
-    height: 100%;
-    width: 100%;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 0;
-    overflow: hidden !important;
     @include Text;
 
     @include StateAnim(opacity, transform, filter);
     opacity: 0;
-    // transform: scaleX(0.99) skewX(1deg) translate(1%, 0.5%);
 
     &.arrived {
         opacity: 1;

src/css/ingame_hud/debug_info.scss

@@ -28,7 +28,6 @@
         font-size: 14px;
         line-height: 15px;
         padding: 1px;
-        font-family: "GameFont";
         border-radius: 3px;
     }
 }

src/css/ingame_hud/dialogs.scss

@@ -215,7 +215,6 @@
                     @include S(height, 25px);
                     position: relative;
                     cursor: pointer;
-                    @include IncreasedClickArea(3px);
 
                     &:hover {
                         opacity: 0.9;

src/css/ingame_hud/game_menu.scss

@@ -11,7 +11,6 @@
     > button,
     > .button {
         @include PlainText;
-        @include IncreasedClickArea(0px);
         background: green;
         @include S(width, 30px);
         @include S(height, 30px);

src/css/ingame_hud/keybindings_overlay.scss

@@ -41,11 +41,12 @@
             // @include S(margin, 0, 3px);
         }
 
-        code {
+        kbd {
             position: relative;
             top: unset;
             left: unset;
             margin: 0;
+
             &.rightMouse {
                 /* @load-async */
                 background: #fff uiResource("icons/mouse_right.png") center center / 85% no-repeat;

src/css/ingame_hud/pinned_shapes.scss

@@ -71,7 +71,6 @@
             @include S(top, 13px);
             @include S(left, -7px);
             @include DarkThemeInvert;
-            @include IncreasedClickArea(2px);
             transition: opacity 0.12s ease-in-out;
             z-index: 100;
 
@@ -93,7 +92,6 @@
             @include S(top, 3px);
             @include S(left, -7px);
             @include DarkThemeInvert;
-            @include IncreasedClickArea(2px);
             transition: opacity 0.12s ease-in-out;
             z-index: 100;
 

src/css/ingame_hud/puzzle_complete_notification.scss

@@ -100,7 +100,6 @@
                         transition:
                             opacity 0.12s ease-in-out,
                             background-color 0.12s ease-in-out;
-                        @include IncreasedClickArea(0px);
 
                         &.liked-yes {
                             /* @load-async */
@@ -153,7 +152,6 @@
                     @include S(min-width, 100px);
                     @include S(padding, 8px, 16px);
                     @include S(margin, 0, 6px);
-                    @include IncreasedClickArea(0px);
                 }
             }
 

src/css/ingame_hud/puzzle_editor_review.scss

@@ -11,7 +11,6 @@
 
     > .button {
         @include ButtonText;
-        @include IncreasedClickArea(0px);
         pointer-events: all;
         cursor: pointer;
         position: relative;

src/css/ingame_hud/puzzle_editor_settings.scss

@@ -35,7 +35,6 @@
                 justify-content: center;
                 @include S(width, 15px);
                 @include S(height, 15px);
-                @include IncreasedClickArea(0px);
             }
 
             .value {

src/css/ingame_hud/puzzle_next.scss

@@ -11,7 +11,6 @@
 
     > .button {
         @include ButtonText;
-        @include IncreasedClickArea(0px);
         pointer-events: all;
         cursor: pointer;
         position: relative;

src/css/ingame_hud/sandbox_controller.scss

@@ -33,7 +33,6 @@
             justify-content: center;
             @include S(width, 15px);
             @include S(height, 15px);
-            @include IncreasedClickArea(0px);
         }
     }
 
@@ -43,7 +42,6 @@
         @include S(margin-top, 10px);
         button {
             @include S(margin-bottom, 2px);
-            @include IncreasedClickArea(0px);
             @include SuperSmallText;
         }
     }

src/css/ingame_hud/shop.scss

@@ -126,7 +126,6 @@
                         opacity: 0.6;
                         cursor: pointer;
                         pointer-events: all;
-                        @include IncreasedClickArea(5px);
                         transition: opacity 0.12s ease-in-out;
 
                         @include DarkThemeInvert;
@@ -215,7 +214,6 @@
                         opacity: 0.5;
                         cursor: pointer;
                         pointer-events: all;
-                        @include IncreasedClickArea(5px);
                         transition: opacity 0.12s ease-in-out;
                         @include DarkThemeInvert;
 
@@ -237,7 +235,6 @@
                         @include S(margin-top, 4px);
                         z-index: 10;
                         @include SuperSmallText;
-                        letter-spacing: 0;
                         background: #e2e4e6;
 
                         @include S(line-height, 13px);

src/css/ingame_hud/statistics.scss

@@ -14,7 +14,6 @@
             @include S(padding, 1px, 10px);
             border: 0;
             box-shadow: none;
-            @include IncreasedClickArea(1px);
             @include S(min-width, 30px);
             color: #fff;
             opacity: 0.25;

src/css/ingame_hud/tutorial_hints.scss

@@ -58,7 +58,6 @@
 
         button.toggleHint {
             @include PlainText;
-            @include IncreasedClickArea(0px);
         }
     }
 

src/css/ingame_hud/waypoints.scss

@@ -87,7 +87,6 @@
             pointer-events: all;
             cursor: pointer;
             position: relative;
-            @include IncreasedClickArea(2px);
             transition: transform 0.04s ease-in-out;
 
             &:hover {

src/css/main.scss

@@ -7,7 +7,6 @@
 }
 
 @import "resources";
-@import "trigonometry";
 @import "material_colors";
 @import "dynamic_ui";
 @import "variables";

src/css/mixins.scss

@@ -11,25 +11,6 @@ the performance when animated. Use only transform and opacity in animations! */
 // $hardwareAcc: translateZ(0);
 $hardwareAcc: null;
 
-// ----------------------------------------
-/** Increased click area for this element, helpful on mobile */
-@mixin IncreasedClickArea($size) {
-    // &::after {
-    //     content: "";
-    //     position: absolute;
-    //     top: #{D(-$size)};
-    //     bottom: #{D(-$size)};
-    //     left: #{D(-$size)};
-    //     right: #{D(-$size)};
-    //     // background: rgba(255, 0, 0, 0.3);
-    // }
-}
-button,
-.increasedClickArea {
-    position: relative;
-    @include IncreasedClickArea(15px);
-}
-
 // ----------------------------------------
 /* Duplicates an animation and adds two classes .<classPrefix>Even and .<classPrefix>Odd which uses the
   animation. This can be used to replay the animation by toggling between the classes, because
@@ -101,20 +82,6 @@ button,
     opacity: 1;
 }
 
-// ----------------------------------------
-/* Automatically transforms the game state if a hardware keyboard is open */
-@mixin TransformToMatchKeyboard {
-    transition: transform 0.2s ease-in-out;
-    @include AndroidHwKeyboardOpen {
-        @include VerticalStyle {
-            transform: translateY(#{D(-125px)}) $hardwareAcc;
-        }
-        @include HorizontalStyle {
-            transform: translateY(#{D(-100px)}) $hardwareAcc;
-        }
-    }
-}
-
 // ----------------------------------------
 /* Define a style which is only applied when the viewport is at least X pixels wide */
 @mixin StyleAtWidth($minW) {
@@ -233,19 +200,6 @@ button,
     color: $color;
 }
 
-// ----------------------------------------
-/* String replacement */
-@function str-replace($string, $search, $replace: "") {
-    $index: str-index($string, $search);
-
-    @if $index {
-        @return str-slice($string, 1, $index - 1) + $replace +
-            str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
-    }
-
-    @return $string;
-}
-
 @mixin BounceInFromSide($mul, $duration: 0.18s ease-in-out) {
     @include InlineAnimation($duration) {
         0% {
@@ -268,17 +222,6 @@ button,
     overflow-wrap: break-all;
 }
 
-@mixin SupportsAndroidNotchQuery {
-    @supports (color: constant(--notch-inset-left)) {
-        @content;
-    }
-}
-@mixin SupportsiOsNotchQuery {
-    @supports (color: env(safe-area-inset-left, 0px)) {
-        @content;
-    }
-}
-
 @mixin DarkThemeOverride {
     @at-root html[data-theme="dark"] &,
         &[data-theme="dark"] {

src/css/resources.scss

@@ -78,7 +78,3 @@ $languages: en, de, cs, da, et, es-419, fr, it, pt-BR, sv, tr, el, ru, uk, zh-TW
         background-image: uiResource("languages/#{$language}.svg") !important;
     }
 }
-
-.steam_dlbtn_0 {
-    background-image: uiResource("steam_link_btn/0.png") !important;
-}

src/css/states/keybindings.scss

@@ -32,7 +32,6 @@
                 button {
                     @include S(height, 15px);
                     @include S(width, 15px);
-                    @include IncreasedClickArea(0px);
                     background: transparent center center / 40% no-repeat;
                     opacity: 0.9;
                     &.editKeybinding {

src/css/states/main_menu.scss

@@ -29,7 +29,6 @@
 
             cursor: pointer;
             transition: opacity 0.12s ease-in-out;
-            @include IncreasedClickArea(2px);
             opacity: 0.85;
             &:hover {
                 opacity: 1;
@@ -152,17 +151,6 @@
         }
     }
 
-    .betaWarning {
-        @include S(width, 400px);
-        @include PlainText;
-        background: $colorRedBright;
-        @include S(padding, 10px);
-        @include S(border-radius, $globalBorderRadius);
-        color: #fff;
-        @include S(margin-top, 10px);
-        border: #{D(2px)} solid rgba(0, 10, 20, 0.1);
-    }
-
     .sideContainer {
         display: flex;
         width: 100%;
@@ -170,287 +158,6 @@
         flex-direction: column;
         @include S(grid-gap, 20px);
 
-        .mainNews {
-            background: linear-gradient(220deg, rgb(74, 93, 201), rgb(93, 255, 150));
-            &::before {
-                background: uiResource("shapez2.png") center center / 100% no-repeat;
-                content: "";
-                @include S(width, 100px);
-                @include S(height, 100px);
-                position: absolute;
-                top: 55%;
-                right: 8%;
-                pointer-events: none;
-                transform: translateY(-50%);
-                transition: transform 0.5s ease-in-out;
-            }
-
-            // .close {
-            //     position: absolute;
-            //     pointer-events: all;
-            //     background: uiResource("icons/main_menu_exit.png") center center / 50% no-repeat;
-            //     display: inline-flex;
-            //     @include S(width, 15px);
-            //     @include S(height, 15px);
-            //     @include S(top, 2px);
-            //     opacity: 0.3;
-            //     @include S(right, 2px);
-            //     z-index: 200;
-            //     transition: opacity 0.12s ease-in-out;
-            //     &:hover {
-            //         opacity: 0.7;
-            //     }
-            // }
-
-            &:hover::before {
-                transform: translate(0, -51%);
-            }
-
-            box-shadow: 0 D(9px) D(15px) rgba(#000, 0.2);
-            width: 100%;
-            display: flex;
-            flex-direction: column;
-            @include S(height, 60px);
-
-            pointer-events: all;
-            flex-grow: 1;
-            z-index: 100;
-            position: relative;
-            grid-row: 2 / 3;
-            @include S(border-radius, $globalBorderRadius);
-            justify-content: center;
-            @include S(padding, 10px);
-            @include S(padding-right, 100px);
-            box-sizing: border-box;
-            transition: opacity 0.12s ease-in-out;
-            cursor: pointer;
-            &:hover {
-                opacity: 0.85;
-            }
-
-            .text {
-                @include SuperSmallText;
-                @include S(width, 100px);
-                color: rgba(#000, 1);
-            }
-        }
-
-        .standaloneBanner {
-            background: transparent;
-            @include S(border-radius, $globalBorderRadius);
-            @include S(min-width, 320px);
-            @include S(max-width, 370px);
-            width: 100%;
-            box-sizing: border-box;
-            grid-row: 1 / 3;
-
-            display: flex;
-            flex-direction: column;
-            margin: 0;
-
-            strong {
-                font-weight: 700 !important;
-            }
-
-            h3 {
-                @include Heading;
-                font-weight: bold;
-                @include S(margin-bottom, 20px);
-                text-align: center;
-                color: #222;
-                text-shadow: 0 D(1px) D(5px) rgba(#fff, 0.7);
-            }
-
-            p {
-                @include Text;
-                color: #333;
-            }
-
-            ul {
-                @include S(margin-top, 5px);
-                @include S(padding-left, 20px);
-                li {
-                    @include Text;
-                    color: #fff;
-                }
-            }
-
-            .playtimeDisclaimer {
-                color: #333;
-                @include S(margin-top, 15px);
-                @include SuperSmallText;
-                text-align: center;
-            }
-
-            .steamLink {
-                align-self: center;
-                justify-self: center;
-                width: 100%;
-                @include S(height, 40px * 1.2);
-                @include S(width, 180px * 1.2);
-                background: #171a23 center center / contain no-repeat;
-                // overflow: hidden;
-                display: block;
-                cursor: pointer;
-                @include S(margin-top, 15px);
-                pointer-events: all;
-                transition: all 0.12s ease-in;
-                transition-property: opacity, transform;
-                position: relative;
-                @include S(border-radius, $globalBorderRadius);
-                color: transparent;
-
-                box-shadow: 0 D(3px) D(7px) rgba(#000, 0.3);
-                &:hover {
-                    opacity: 0.9;
-                }
-
-                @include InlineAnimation(1s ease-in-out infinite) {
-                    50% {
-                        transform: scale(1.02, 1.03);
-                    }
-                }
-
-                > .discount {
-                    position: absolute;
-                    @include S(top, -7px);
-                    @include S(right, -5px);
-                    background: #4c6b22;
-                    color: #c5ea3f;
-                    @include S(border-radius, $globalBorderRadius);
-                    @include S(padding, 1px, 3px, 1px, 4px);
-                    @include PlainText;
-                    text-transform: uppercase;
-                    transform: rotate(5deg);
-                }
-            }
-            .specialOffer {
-                color: #000000;
-                @include PlainText;
-                align-self: center;
-                text-align: center;
-                @include S(margin-top, 5px);
-                @include InlineAnimation(1s ease-in-out infinite) {
-                    50% {
-                        transform: scale(1.02, 1.03) translateY(2%);
-                    }
-                }
-            }
-
-            .points {
-                display: grid;
-                grid-template-columns: 1fr 1fr;
-                width: 100%;
-                @include S(grid-gap, 5px);
-            }
-
-            .point {
-                display: grid;
-                grid-template-columns: #{D(27px)} auto;
-                grid-template-rows: 1fr 1fr;
-                background: #fff #{D(10px)} center / #{D(17px)} no-repeat;
-                @include S(grid-row-gap, 2px);
-                align-items: center;
-                @include S(padding, 6px);
-                @include S(border-radius, $globalBorderRadius);
-                @include S(height, 26px);
-                box-shadow: 0 D(5px) D(10px) rgba(#000, 0.2);
-
-                > strong {
-                    grid-column: 2 / 3;
-                    grid-row: 1 / 2;
-                    @include PlainText;
-                    @include S(font-size, 12px);
-                    line-height: 0.8em;
-                    white-space: nowrap;
-                    text-transform: uppercase;
-                    font-weight: bold;
-                    align-self: end;
-                }
-
-                > p {
-                    grid-column: 2 / 3;
-                    grid-row: 2 / 3;
-                    @include SuperSmallText;
-                    @include S(font-size, 8px);
-                    line-height: 1em;
-                    align-self: center;
-
-                    opacity: 0.8;
-                }
-
-                &.levels {
-                    background-image: uiResource("res/ui/icons/advantage_new_levels.png");
-                    > strong {
-                        color: #f13555;
-                    }
-                }
-
-                &.upgrades {
-                    background-image: uiResource("res/ui/icons/advantage_upgrades.png");
-                    > strong {
-                        color: #8a00ff;
-                    }
-                }
-
-                &.buildings {
-                    background-image: uiResource("res/ui/icons/advantage_buildings.png");
-                    > strong {
-                        color: #3fce8b;
-                    }
-                }
-
-                &.wires {
-                    background-image: uiResource("res/ui/icons/advantage_wires.png");
-                    > strong {
-                        color: #ef2fdb;
-                    }
-                }
-
-                &.markers {
-                    background-image: uiResource("res/ui/icons/advantage_markers.png");
-                    > strong {
-                        color: #4294ff;
-                    }
-                }
-
-                &.mods {
-                    background-image: uiResource("res/ui/icons/advantage_mods.png");
-                    > strong {
-                        color: #8a00ff;
-                    }
-                }
-
-                &.savegames {
-                    background-image: uiResource("res/ui/icons/advantage_savegames.png");
-                    > strong {
-                        color: #ff9500;
-                    }
-                }
-
-                &.darkmode {
-                    background-image: uiResource("res/ui/icons/advantage_dark_mode.png");
-                    > strong {
-                        color: #292c32;
-                    }
-                }
-
-                &.support {
-                    background-image: uiResource("res/ui/icons/advantage_support.png");
-                    > strong {
-                        color: #e72d2d;
-                    }
-                }
-
-                &.achievements {
-                    background-image: uiResource("res/ui/icons/advantage_achievements.png");
-                    > strong {
-                        color: #ffac0f;
-                    }
-                }
-            }
-        }
-
         .puzzleContainer {
             display: flex;
             align-items: center;
@@ -527,54 +234,6 @@
                     box-shadow: 0 D(2px) D(9px) rgba(#000, 0.4);
                 }
             }
-
-            &.notOwned {
-                @include S(height, 200px);
-                @include S(width, 250px);
-                border: 0;
-                background: uiResource("puzzle_460x215_15.png") center D(-5px) / 100% repeat;
-                .dlcLogo {
-                    display: none;
-                }
-                &::before {
-                    content: "";
-                    position: absolute;
-                    top: 0;
-                    right: 0;
-                    bottom: 0;
-                    left: 0;
-                    background: linear-gradient(180deg, rgba(#222529, 0.1) 40%, rgba(#222529, 1) 70%);
-                }
-
-                p {
-                    position: absolute;
-                    left: 0;
-                    right: 0;
-                    @include S(bottom, 35px);
-                    z-index: 50;
-                    box-sizing: border-box;
-                    display: block;
-                    @include PlainText;
-                    color: rgba(#fff, 0.9);
-                    @include S(padding, 10px);
-                    @include SuperSmallText;
-                }
-                > button {
-                    pointer-events: all;
-                    @include S(padding, 4px, 10px);
-                    margin: 0;
-                    background: #47c599;
-                    box-sizing: border-box;
-                    position: absolute;
-                    @include S(bottom, 10px);
-                    @include S(right, 10px);
-                    z-index: 100;
-                    @include PlainText;
-                    z-index: 200;
-                    color: #111215;
-                    box-shadow: 0 D(2px) D(4px) rgba(#000, 1);
-                }
-            }
         }
 
         .modsOverview {
@@ -717,11 +376,9 @@
                 @include SuperHeading;
                 width: 100%;
                 @include S(padding, 15px, 10px);
-                letter-spacing: 0.1em !important;
+                letter-spacing: 0.1em;
-                @include IncreasedClickArea(0px);
                 box-sizing: border-box;
                 font-weight: bold;
-                color: #fff;
                 background-color: $colorGreenBright;
                 transition:
                     transform 0.12s ease-in-out,
@@ -762,16 +419,7 @@
                     box-sizing: border-box;
                 }
 
-                .importButton {
-                    @include IncreasedClickArea(0px);
-                }
-
-                .newGameButton {
-                    @include IncreasedClickArea(0px);
-                }
-
                 .modsButton {
-                    @include IncreasedClickArea(0px);
                     background-color: $modsColor !important;
                 }
             }
@@ -866,7 +514,6 @@
                         padding: 0;
                         align-self: center;
                         justify-self: center;
-                        @include IncreasedClickArea(0px);
                         background: #44484a center center / 40% no-repeat;
                     }
 
@@ -886,7 +533,6 @@
                             background-image: uiResource("icons/download.png");
                         }
                         @include S(width, 15px);
-                        @include IncreasedClickArea(0px);
                         @include S(height, 15px);
                         background-size: 80%;
                         align-self: start;
@@ -904,7 +550,6 @@
                         grid-column: 3 / 4;
                         grid-row: 2 / 3;
                         background-color: transparent;
-                        @include IncreasedClickArea(0px);
 
                         & {
                             background-image: uiResource("icons/delete.png");
@@ -925,7 +570,6 @@
 
                     button.renameGame {
                         background-color: transparent;
-                        @include IncreasedClickArea(2px);
 
                         & {
                             background-image: uiResource("icons/edit_key.png");
@@ -1067,11 +711,6 @@
                     background-size: 60%;
                     background-position: 60% 60%;
                 }
-
-                &.steamLogo {
-                    background-image: uiResource("main_menu/steam.svg");
-                    background-size: 105%;
-                }
             }
         }
     }

src/css/states/mods.scss

@@ -1,22 +1,19 @@
 #state_ModsState {
     .modsGrid {
         display: grid;
-        grid-template-columns: repeat(3, 1fr);
+        grid-template-columns: 1fr auto;
-        gap: 0.5em;
+        align-items: center;
 
-        .noMods {
+        > h1 {
-            grid-template-columns: unset;
+            justify-self: start;
-            place-items: center;
+        }
+
+        .openModsFolder {
+            background-color: $modsColor;
         }
     }
 
-    .mod {
+    .modsStats {
-        display: flex;
-        flex-direction: column;
-        padding: 0.6em;
-        gap: 0.3em;
-        background-color: $mainBgColor;
-        @include S(border-radius, 0.75 * $globalBorderRadius);
         @include PlainText;
 
         .title b {

src/css/textual_game_state.scss

@@ -18,7 +18,6 @@
             text-transform: uppercase;
             color: #333438;
             position: relative;
-            @include IncreasedClickArea(10px);
         }
 
         .backButton {

src/css/trigonometry.scss

@@ -1,66 +0,0 @@
-///////////////////////////////////////////////////////////
-// Plain SASS Trigonometry Algorithm in Taylor Expansion //
-//                                                       //
-// Based on                                              //
-//      http://japborst.net/posts/sass-sines-and-cosines //
-///////////////////////////////////////////////////////////
-
-$pi: 3.14159265359;
-$_precision: 10;
-
-@function pow($base, $exp) {
-    $value: $base;
-    @if $exp > 1 {
-        @for $i from 2 through $exp {
-            $value: $value * $base;
-        }
-    }
-    @if $exp < 1 {
-        @for $i from 0 through -$exp {
-            $value: $value / $base;
-        }
-    }
-    @return $value;
-}
-
-@function fact($num) {
-    $fact: 1;
-    @if $num > 0 {
-        @for $i from 1 through $num {
-            $fact: $fact * $i;
-        }
-    }
-    @return $fact;
-}
-
-@function _to_unitless_rad($angle) {
-    @if unit($angle) == "deg" {
-        $angle: $angle / 180deg * $pi;
-    }
-    @if unit($angle) == "rad" {
-        $angle: $angle / 1rad;
-    }
-    @return $angle;
-}
-
-@function sin($angle) {
-    $a: _to_unitless_rad($angle);
-    $sin: $a;
-    @for $n from 1 through $_precision {
-        $sin: $sin + (pow(-1, $n) / fact(2 * $n + 1)) * pow($a, (2 * $n + 1));
-    }
-    @return $sin;
-}
-
-@function cos($angle) {
-    $a: _to_unitless_rad($angle);
-    $cos: 1;
-    @for $n from 1 through $_precision {
-        $cos: $cos + (pow(-1, $n) / fact(2 * $n)) * pow($a, 2 * $n);
-    }
-    @return $cos;
-}
-
-@function tan($angle) {
-    @return sin($angle) / cos($angle);
-}

src/css/variables.scss

@@ -68,10 +68,6 @@ $mainFont: "GameFont", sans-serif;
 $numberFont: $mainFont;
 $textFont: $mainFont;
 
-$mainFontWeight: 400;
-$mainFontSpacing: 0.01em;
-$mainFontScale: 1;
-
 @mixin DebugText($color) {
     // font-size: 3px;
     // &,
@@ -81,100 +77,43 @@ $mainFontScale: 1;
 }
 
 @mixin SuperDuperSmallText {
-    @include ScaleFont($superDuperSmallTextFontSize, $superDuperSmallTextLineHeight);
+    font-size: D($superDuperSmallTextFontSize);
-    font-weight: $mainFontWeight;
+    line-height: D($superDuperSmallTextLineHeight);
-    font-family: $mainFont;
-    letter-spacing: $mainFontSpacing;
     @include DebugText(green);
 }
 
 @mixin SuperSmallText {
-    @include ScaleFont($superSmallTextFontSize, $superSmallTextLineHeight);
+    font-size: D($superSmallTextFontSize);
-    font-weight: $mainFontWeight;
+    line-height: D($superSmallTextLineHeight);
-    font-family: $mainFont;
-    letter-spacing: $mainFontSpacing;
     @include DebugText(green);
 }
 
 @mixin PlainText {
-    @include ScaleFont($plainTextFontSize, $plainTextLineHeight);
+    font-size: D($plainTextFontSize);
-    font-weight: $mainFontWeight;
+    line-height: D($plainTextLineHeight);
-    font-family: $mainFont;
-    letter-spacing: $mainFontSpacing;
-
     @include DebugText(red);
 }
 
 @mixin Text {
-    @include ScaleFont($textFontSize, $textLineHeight);
+    font-size: D($textFontSize);
-    font-weight: $mainFontWeight;
+    line-height: D($textLineHeight);
-    font-family: $mainFont;
-
-    letter-spacing: $mainFontSpacing;
-
     @include DebugText(blue);
 }
 
 @mixin Heading {
-    @include ScaleFont($headingFontSize, $headingLineHeight);
+    font-size: D($headingFontSize);
-    font-weight: $mainFontWeight;
+    line-height: D($headingLineHeight);
-    font-family: $mainFont;
-    letter-spacing: $mainFontSpacing;
-
     @include DebugText(yellow);
 }
 
 @mixin SuperHeading {
-    @include ScaleFont($superHeadingFontSize, $superHeadingLineHeight);
+    font-size: D($superHeadingFontSize);
-    font-weight: $mainFontWeight;
+    line-height: D($superHeadingLineHeight);
-    font-family: $mainFont;
-    letter-spacing: $mainFontSpacing;
-
     @include DebugText(orange);
 }
 
 @mixin ButtonText {
-    @include ScaleFont($buttonFontSize, $buttonLineHeight);
+    font-size: D($buttonFontSize);
-    font-weight: $mainFontWeight;
+    line-height: D($buttonLineHeight);
-    font-family: $mainFont;
-    letter-spacing: $mainFontSpacing;
     @include DebugText(purple);
 }
-
-@function str-split($string, $separator) {
-    // empty array/list
-    $split-arr: ();
-    // first index of separator in string
-    $index: str-index($string, $separator);
-    // loop through string
-    @while $index != null {
-        // get the substring from the first character to the separator
-        $item: str-slice($string, 1, $index - 1);
-        // push item to array
-        $split-arr: append($split-arr, $item);
-        // remove item and separator from string
-        $string: str-slice($string, $index + 1);
-        // find new index of separator
-        $index: str-index($string, $separator);
-    }
-    // add the remaining string to list (the last item)
-    $split-arr: append($split-arr, $string);
-
-    @return $split-arr;
-}
-
-@function _first-index($string, $direction: "left") {
-    @for $i from 1 through str-length($string) {
-        $index: if($direction == "left", $i, -$i);
-
-        @if str-slice($string, $index, $index) != " " {
-            @return $index;
-        }
-    }
-
-    @return 0;
-}
-
-@function trim($string) {
-    @return str-slice($string, _first-index($string, "left"), _first-index($string, "right"));
-}

src/js/core/modal_dialog_elements.ts

@@ -207,7 +207,7 @@ export class Dialog<T extends string = never, U extends unknown[] = []> {
                 if (isEnter || isEscape) {
                     // if (this.app.settings.getShowKeyboardShortcuts()) {
                     // Show keybinding
-                    const spacer = document.createElement("code");
+                    const spacer = document.createElement("kbd");
                     spacer.classList.add("keybinding");
                     spacer.innerHTML = getStringForKeyCode(isEnter ? kbEnter : kbCancel);
                     button.appendChild(spacer);

src/js/game/hud/parts/building_placer.js

@@ -1,3 +1,4 @@
+import { makeOffscreenBuffer } from "../../../core/buffer_utils";
 import { ClickDetector } from "../../../core/click_detector";
 import { globalConfig } from "../../../core/config";
 import { DrawParameters } from "../../../core/draw_parameters";
@@ -5,21 +6,20 @@ import { drawRotatedSprite } from "../../../core/draw_utils";
 import { Loader } from "../../../core/loader";
 import { clamp, makeDiv, removeAllChildren } from "../../../core/utils";
 import {
+    Vector,
+    enumDirection,
     enumDirectionToAngle,
     enumDirectionToVector,
     enumInvertedDirections,
-    Vector,
-    enumDirection,
 } from "../../../core/vector";
 import { T } from "../../../translations";
+import { getCodeFromBuildingData } from "../../building_codes";
 import { KEYMAPPINGS } from "../../key_action_mapper";
 import { defaultBuildingVariant } from "../../meta_building";
+import { layers } from "../../root";
 import { THEME } from "../../theme";
 import { DynamicDomAttach } from "../dynamic_dom_attach";
 import { HUDBuildingPlacerLogic } from "./building_placer_logic";
-import { makeOffscreenBuffer } from "../../../core/buffer_utils";
-import { layers } from "../../root";
-import { getCodeFromBuildingData } from "../../building_codes";
 
 export class HUDBuildingPlacer extends HUDBuildingPlacerLogic {
     /**
@@ -130,7 +130,7 @@ export class HUDBuildingPlacer extends HUDBuildingPlacerLogic {
             const binding = this.root.keyMapper.getBinding(rawBinding);
             this.buildingInfoElements.hotkey.innerHTML = T.ingame.buildingPlacement.hotkeyLabel.replace(
                 "<key>",
-                "<code class='keybinding'>" + binding.getKeyCodeString() + "</code>"
+                "<kbd class='keybinding'>" + binding.getKeyCodeString() + "</kbd>"
             );
         } else {
             this.buildingInfoElements.hotkey.innerHTML = "";
@@ -197,11 +197,11 @@ export class HUDBuildingPlacer extends HUDBuildingPlacerLogic {
             ["explanation"],
             T.ingame.buildingPlacement.cycleBuildingVariants.replace(
                 "<key>",
-                "<code class='keybinding'>" +
+                "<kbd class='keybinding'>" +
                     this.root.keyMapper
                         .getBinding(KEYMAPPINGS.placement.cycleBuildingVariants)
                         .getKeyCodeString() +
-                    "</code>"
+                    "</kbd>"
             )
         );
 

src/js/game/hud/parts/keybinding_overlay.js

@@ -290,13 +290,13 @@ export class HUDKeybindingOverlay extends BaseHUDPart {
 
                 switch (key) {
                     case KEYCODE_LMB:
-                        html += `<code class="keybinding leftMouse"></code>`;
+                        html += `<kbd class="keybinding leftMouse"></kbd>`;
                         break;
                     case KEYCODE_RMB:
-                        html += `<code class="keybinding rightMouse"></code>`;
+                        html += `<kbd class="keybinding rightMouse"></kbd>`;
                         break;
                     case KEYCODE_MMB:
-                        html += `<code class="keybinding middleMouse"></code>`;
+                        html += `<kbd class="keybinding middleMouse"></kbd>`;
                         break;
                     case DIVIDER_TOKEN:
                         html += `<i></i>`;
@@ -305,9 +305,9 @@ export class HUDKeybindingOverlay extends BaseHUDPart {
                         html += `+`;
                         break;
                     default:
-                        html += `<code class="keybinding">${getStringForKeyCode(
+                        html += `<kbd class="keybinding">${getStringForKeyCode(
                             mapper.getBinding(/** @type {KeyCode} */ (key)).keyCode
-                        )}</code>`;
+                        )}</kbd>`;
                 }
             }
             html += `<label>${handle.label}</label>`;

src/js/game/hud/parts/waypoints.js

@@ -54,9 +54,9 @@ export class HUDWaypoints extends BaseHUDPart {
             <strong class='title'>${T.ingame.waypoints.waypoints}</strong>
             <span class='desc'>${T.ingame.waypoints.description.replace(
                 "<keybinding>",
-                `<code class='keybinding'>${this.root.keyMapper
+                `<kbd class='keybinding'>${this.root.keyMapper
                     .getBinding(KEYMAPPINGS.navigation.createMarker)
-                    .getKeyCodeString()}</code>`
+                    .getKeyCodeString()}</kbd>`
             )}</span>
         `
             );

src/js/game/key_action_mapper.js

@@ -386,7 +386,7 @@ export class Keybinding {
         if (IS_MOBILE) {
             return null;
         }
-        const spacer = document.createElement("code");
+        const spacer = document.createElement("kbd");
         spacer.classList.add("keybinding");
         spacer.innerHTML = getStringForKeyCode(this.keyCode);
         elem.appendChild(spacer);