2 files changed, 39 insertions(+), 5 deletions(-)

A starkingdoms-client/src/components/ui/Checkbox.svelte
M starkingdoms-client/src/pages/Play.svelte

@@ 0,0 1,36 @@
+<script lang="ts">
+  let clazz: string = "";
+  export { clazz as class };
+  export let id = "";
+  export let disabled = false;
+  export let style = "";
+  export let title = "";
+</script>
+
+<input type="checkbox" {id} class="svcmp-Checkbox {clazz}" {disabled} on:click on:focus {style} {title}>
+
+<style lang="scss">
+  .svcmp-Checkbox {
+    appearance: none;
+    background: transparent;
+    color: var(--text);
+    padding: 0.3rem;
+    vertical-align: baseline;
+    border-radius: 0.25rem;
+    cursor: text;
+    border: 2px solid var(--links);
+    transition: 0.1s ease-in-out;
+    background-size: cover;
+    margin: 0;
+  }
+  .svcmp-Checkbox:not(:disabled):hover {
+    cursor: pointer;
+    background-color: var(--links-transparent);
+  }
+  .svcmp-Checkbox:checked {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAPnAAAD5wHDtfxxAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAfxJREFUWIW9ls2LTnEUxz/PY6Jhmh1qSkRJ9ChlQamZLRuWbCTZjA1lRXZSFlJKyUJTkz/AxsbCRtmoyUuTRHlZKMlLMobG+Fg89+Zxnfvc5+Xee+pXt9895/f5nnPuPfc2VGq0I8B+YBpYAECta02oH23bM7Wl0qipAg3gTpJ9aovA6WYddOBkBg4wCkzVUYEtwCNgLLP/DmhVXYER4FYAFzgBfKr6wTtvbNdSnyrhu9SfAfylOla1gFXqkwC+pO7p9K1KwJUArnoh61sFfJ+6HMDn1JVVCxhXXwfwHyaTL7vKfg2vAhuD/bPA0zCixOwPBpmr3lebeXFlTcK1SYbrM/tfgZ3Am7zAslpwPYADnOoGB0ppwfGc0t/uJX7YFmwCHgPjmf0PQAt4X3TAMC1oAjMBHNp/PIVw4J8WHFNn1dU9lv5MTulv9tPC9GKH+i05YE7dXBC4Xf0ewF/ZHkZ9CVijzmcO+qIeygkaUR8G8GV1qh94KmAmOEz1t3rJ/4fIxRz/y/3CUwFH/Vv+yO6p65KAveqvwGdeHR1UAOo24+93am/VSfV5cG9J3T0IvFMASQY3uoiIMlc9Nyg8KyBdRS3ptAfqirIF9NIS1QV16zDwbgJ6acn0sPAiAemKRNxVG3UJQD2gLibwz+qGMuD9CMD2LHihHi4LrvIH6xoIB63GYHwAAAAASUVORK5CYII=');
+  }
+  .svcmp-Checkbox:disabled {
+    opacity: 0.5;
+  }
+</style>

@@ 9,6 9,7 @@
   import Chatbox from "../components/Chatbox.svelte";
   import { onMount } from "svelte";
   import Popup from "../components/ui/Popup.svelte";
+  import Checkbox from "../components/ui/Checkbox.svelte";
 
   let config = DEFAULT_CONFIG;
 


@@ 102,11 103,8 @@
     minimizable
     style="width: 20vw; position: absolute;">
     <label for="dev_mode">Developer mode (Advanced)</label>
-    <input type="checkbox" id="dev_mode" />
-    <span>
-      Enables parts of the client intended only for StarKingdoms developers.
-      Buggy. Use at your own risk.
-    </span>
+    <Checkbox 
+      title="Enables tools intended only for the developers. Buggy. Use at your own risk."/>
   </Popup>
 </div>