UI layout

1 files changed, 48 insertions, 43 deletions

diff --git a/styles.css b/styles.css
index 69ab118..8279e75 100644
--- a/styles.css
+++ b/styles.css
@@ -95,10 +95,36 @@ html
 
 .Dialog
 {
-    max-width: 800px;
+    max-width: 910px;
     margin: 0px auto;
 }
 
+.LabeledPanel
+{
+    border-top: solid var(--color-border-light-1) 1px;
+    border-right: solid var(--color-border-dark-1) 1px;
+    border-bottom: solid var(--color-border-dark-1) 1px;
+    border-left: solid var(--color-border-light-1) 1px;
+
+    box-shadow: 1px 1px var(--color-border-light-1),
+                -1px -1px var(--color-border-dark-1);
+    padding: 1ex;
+    padding-top: 0px;
+    margin: 2ex 0px;
+}
+
+.LabeledPanel > h3, .LabeledPanel > h2
+{
+    font-weight: normal;
+    display: inline-block;
+    position: relative;
+    top: calc(-0.5em);
+    left: 1ex;
+    background-color: var(--color-bg);
+    padding: 0px 1ex 0px 1ex;
+    margin: 0px;
+}
+
 input[type="number"]
 {
     appearance: none;
@@ -248,28 +274,6 @@ table.InputFields
     flex-grow: 1;
 }
 
-.Asset
-{
-    display: inline-block;
-    border: solid black 1px;
-    width: 34px;
-    height: 34px;
-}
-
-
-
-/* Prevent SVG elements from interferring with drag n drop. */
-#Grid *
-{
-    pointer-events: none;
-}
-
-nav
-{
-    display: flex;
-    justify-content: space-between;
-}
-
 #Links
 {
     box-shadow: inset -1px -1px var(--color-border-light-2),
@@ -302,28 +306,29 @@ table.TableView
     }
 }
 
-#Links table
+.MainWrapper
 {
-    table-layout: fixed;
-
-    th:nth-child(1)
-    {
-        width: 10em;
-    }
+    display: flex;
+    gap: 10px;
+}
 
-    td:nth-child(2)
-    {
-        overflow: hidden;
-        white-space: nowrap;
-    }
+.Asset
+{
+    display: inline-block;
+    border: solid black 1px;
+    width: 34px;
+    height: 34px;
+}
 
-    th:nth-child(3), th:nth-child(4)
-    {
-        width: 55px;
-    }
+#EntryIndicator
+{
+    font-size: 150%;
+    text-align: center;
+    margin-bottom: 10px;
+}
 
-    td:nth-child(3), td:nth-child(4)
-    {
-        text-align: center;
-    }
+/* Prevent SVG elements from interferring with drag n drop. */
+#Grid *
+{
+    pointer-events: none;
 }