adjust styles for chota

src/lib/components/ShipEdit/Carrier/Squadron.svelte

@@ -30,4 +30,7 @@ $: dispatch.setSquadronType({type, id});
 </script>
 
 <style>
+select {
+    width: inherit;
+}
 </style>

src/lib/components/ShipEdit/Carrier/index.svelte

@@ -1,7 +1,7 @@
 <Section label="carrier">
   <ShipItem {...reqs}>
     <Field label="bays">
-      <input type="number" min="0" bind:value={bays} />
+      <input class="short" type="number" min="0" bind:value={bays} />
     </Field>
   </ShipItem>
 

src/lib/components/ShipEdit/Propulsion/Drive/index.svelte

@@ -1,7 +1,7 @@
 <ShipItem {...reqs}>
   <div>
     <Field label="thrust rating">
-      <input type="number" bind:value={rating} min="0" max="20" step="1" />
+      <input class="short" type="number" bind:value={rating} min="0" max="20" step="1" />
     </Field>
 
     <label><input type="checkbox" bind:checked={advanced} /> advanced</label>

src/lib/components/ShipEdit/ShipCost.svelte

@@ -1,6 +1,6 @@
 <div class="mass">
     <Field label="ship tonnage">
-        <input bind:value={mass} type="number" min="10" max="300" />
+        <input class="short" bind:value={mass} type="number" min="10" max="300" />
         <span class="mass_symbol" />
 
         <div class="note" class:warning={!withinBudget}>
@@ -53,6 +53,7 @@
     }
     input {
         width: 5em;
+        display: inline !important;
     }
     .mass_symbol:after {
         content: url("/mass.svg");
@@ -74,7 +75,7 @@
     }
 
     .mass {
-        grid-column: 2;
+        width: 15em;
     }
     div.cost {
         grid-column: 3;

src/lib/components/ShipEdit/Structure/Armor.svelte

@@ -2,7 +2,7 @@
   <div>
     <div class="nbr_layers">
       <Field label="armour layers">
-        <input type="number" min="0" bind:value={nbr_layers} />
+        <input class="short" type="number" min="0" bind:value={nbr_layers} />
       </Field>
     </div>
 

src/lib/components/ShipEdit/Structure/Armor/Layer.svelte

@@ -1,5 +1,5 @@
 <Field label={`layer ${layer}`}>
-  <input type="number" min="0" bind:value={rating} />
+  <input class="short" type="number" min="0" bind:value={rating} />
 </Field>
 
 <script>

src/lib/components/ShipEdit/Structure/Cargo.svelte

@@ -1,6 +1,6 @@
 <ShipItem {...reqs}>
   <Field label="cargo">
-    <input type="number" min="0" bind:value={space} />
+    <input class="short" type="number" min="0" bind:value={space} />
   </Field>
 </ShipItem>
 

src/lib/components/ShipEdit/Structure/Hull.svelte

@@ -1,6 +1,6 @@
   <ShipItem {...reqs}>
     <Field label="hull">
-      <input bind:value={rating} type="number" {min} {max} />
+      <input class="short" bind:value={rating} type="number" {min} {max} />
     </Field>
   </ShipItem>
 

src/lib/components/ShipEdit/Structure/Screens.svelte

@@ -1,11 +1,11 @@
 <ShipItem {...reqs}>
   <div>
     <Field label="screens">
-      <input type="number" bind:value={standard} min="0" />
+      <input class='short' type="number" bind:value={standard} min="0" />
     </Field>
 
     <Field label="advanced screens">
-      <input type="number" bind:value={advanced} min="0" />
+      <input class='short' type="number" bind:value={advanced} min="0" />
     </Field>
   </div>
 </ShipItem>

src/lib/components/ShipEdit/Weaponry/AddWeapon.svelte

@@ -5,7 +5,7 @@
         {/each}
   </select>
 
-  <button class="button small blue" on:click={addWeapon} >add weapon</button>
+  <button class="button small primary" on:click={addWeapon} >add weapon</button>
 </Field>
 
 <script>
@@ -20,3 +20,10 @@
 
   const addWeapon = () => ship.dispatch.addWeapon(type);
 </script>
+
+<style>
+select {
+    width: inherit;
+    display: inline-block;
+}
+</style>

src/lib/style/index.css

@@ -2,3 +2,7 @@
   --main-font-family: "Dosis", -apple-system, BlinkMacSystemFont, "Segoe UI",
     Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 }
+
+input.short {
+    width: 5em !important;
+}

src/routes/index.svelte

@@ -3,10 +3,7 @@
 <script>
   import { setContext } from "svelte";
 
-
-  import "../../static/fonts/faktos.css";
-  import "../../static/fonts/dosis/dosis.css";
-  import "../../static/global.css";
+  import '$lib/style/index.js';
   import shipStore from "$lib/store/ship.js";
 
   import App from "$lib/components/App.svelte";

static/global.css

@@ -79,24 +79,6 @@ input[type="range"] {
 	height: 0;
 }
 
-button {
-	color: #333;
-	background-color: #f4f4f4;
-	outline: none;
-}
-
-button:disabled {
-	color: #999;
-}
-
-button:not(:disabled):active {
-	background-color: #ddd;
-}
-
-button:focus {
-	border-color: #666;
-}
-
 /*  ---- inputs --- */
 
 input, select {