Add customizable keybindings & watermark

src/css/common.scss

@@ -523,7 +523,7 @@ canvas {
 }
 
 .checkbox {
-    $bgColor: darken($mainBgColor, 0);
+    $bgColor: darken($mainBgColor, 3);
     background-color: $bgColor;
     @include S(width, 35px);
     @include S(height, 17px);

src/css/main.scss

@@ -23,7 +23,9 @@
 @import "states/preload";
 @import "states/main_menu";
 @import "states/ingame";
+@import "states/keybindings";
 @import "states/settings";
+@import "states/about";
 
 @import "ingame_hud/buildings_toolbar";
 @import "ingame_hud/building_placer";

src/css/states/about.scss

@@ -0,0 +1,5 @@
+#state_AboutState {
+    .content {
+        @include PlainText;
+    }
+}

src/css/states/keybindings.scss

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

src/css/states/main_menu.scss

@@ -9,13 +9,13 @@
 
     .settingsButton {
         position: absolute;
-        @include S(bottom, 30px);
+        @include S(top, 30px);
         @include S(right, 30px);
         @include S(width, 35px);
         @include S(height, 35px);
         pointer-events: all;
         cursor: pointer;
-        background: uiResource("icons/settings.png") center center / contain no-repeat;
+        background: uiResource("icons/main_menu_settings.png") center center / contain no-repeat;
         transition: opacity 0.12s ease-in-out;
         &:hover {
             opacity: 0.9;

src/css/states/settings.scss

@@ -1,13 +1,5 @@
 #state_SettingsState {
     .content {
-        .categoryLabel {
-            display: block;
-            text-transform: uppercase;
-            @include S(margin-top, 15px);
-            @include S(margin-bottom, 15px);
-            @include Heading;
-        }
-
         .versionbar {
             @include S(margin-top, 20px);
             @include SuperSmallText;
@@ -21,9 +13,13 @@
             }
         }
 
+        button.about {
+            background-color: $colorGreenBright;
+        }
+
         .setting {
             @include S(padding, 10px);
-            background: #eee;
+            background: #eeeff5;
             @include S(border-radius, $globalBorderRadius);
             @include S(margin-bottom, 5px);
 

src/css/textual_game_state.scss

@@ -38,13 +38,27 @@
         @include S(margin-bottom, 20px);
     }
 
-    .content {
-        background: #fff;
-        @include S(border-radius, $globalBorderRadius);
-        @include S(padding, 10px);
-        max-height: calc(80vh - #{D(60px)});
-        overflow-y: auto;
-        box-sizing: border-box;
-        pointer-events: all;
+    > .container {
+        > .content {
+            background: #fff;
+            @include S(border-radius, $globalBorderRadius);
+            @include S(padding, 10px);
+            height: calc(80vh - #{D(60px)});
+            overflow-y: auto;
+            box-sizing: border-box;
+            pointer-events: all;
+
+            a {
+                color: $colorBlueBright;
+            }
+
+            .categoryLabel {
+                display: block;
+                text-transform: uppercase;
+                @include S(margin-top, 15px);
+                @include S(margin-bottom, 15px);
+                @include Heading;
+            }
+        }
     }
 }