138d8ec

app.css

@@ -8,6 +8,27 @@
   background-color: rgba(38, 38, 38, var(--tw-bg-opacity));
 }
 
+.border-gray-50 {
+  --tw-border-opacity: 1;
+  border-color: rgba(250, 250, 250, var(--tw-border-opacity));
+}
+
+.border-t-0 {
+  border-top-width: 0px;
+}
+
+.border-r-0 {
+  border-right-width: 0px;
+}
+
+.border-l-0 {
+  border-left-width: 0px;
+}
+
+.border-b {
+  border-bottom-width: 1px;
+}
+
 .flex {
   display: flex;
 }
@@ -28,10 +49,22 @@
   justify-content: flex-start;
 }
 
+.justify-end {
+  justify-content: flex-end;
+}
+
 .justify-center {
   justify-content: center;
 }
 
+.flex-1 {
+  flex: 1 1 0%;
+}
+
+.flex-none {
+  flex: none;
+}
+
 .h-7 {
   height: 1.75rem;
 }
@@ -45,6 +78,10 @@
   line-height: 1.25rem;
 }
 
+.mr-6 {
+  margin-right: 1.5rem;
+}
+
 .ml-auto {
   margin-left: auto;
 }
@@ -82,6 +119,11 @@
   --tw-ring-shadow: 0 0 #0000;
 }
 
+.text-gray-50 {
+  --tw-text-opacity: 1;
+  color: rgba(250, 250, 250, var(--tw-text-opacity));
+}
+
 .select-none {
   user-select: none;
 }
@@ -90,6 +132,10 @@
   visibility: visible;
 }
 
+.w-16 {
+  width: 4rem;
+}
+
 .w-auto {
   width: auto;
 }
@@ -149,8 +195,8 @@ body {
   height: 100%;
   font-family: sans-serif;
   overflow: hidden;
-  --topNavH: 48px;
-  --sideNavW: 240px;
+  --topNavH: 3rem;
+  --sideNavW: 15rem;
 }
 
 #c {
@@ -177,6 +223,14 @@ body {
   width: var(--sideNavW);
 }
 
+.dialog {
+  position: absolute;
+  height: var(--topNavH);
+  left:0;
+  right:0;
+  top:0;
+}
+
 #labels > div {
   position: absolute;
   color: white;
@@ -245,6 +299,26 @@ body {
   border-top: none;
 }
 
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+
+input[type=number] {
+  -moz-appearance: textfield;
+  /* border:none; */
+  background-color:transparent;
+  outline: none;
+  text-align:right;
+}
+
+/* input:focus[type=number] { */
+
+/* } */
+
 @media (min-width: 640px) {
 }
 
@@ -259,3 +333,4 @@ body {
 
 @media (min-width: 1536px) {
 }
+

index.html

@@ -25,7 +25,6 @@
   <script src="app.bundle.js"></script>
   <script src="scene.bundle.js"></script>
   <script src="solver.js"></script>
-  <script src="lz-string.min.js"></script>
 </body>
 
 </html>