global: snapshot

website/styles/chart.css

@@ -57,75 +57,8 @@
     }
   }
 
-  > #chart-list {
-    margin-top: 1rem;
-    position: relative;
+  .chart-list {
     margin-left: var(--negative-main-padding);
     margin-right: calc(var(--negative-main-padding) - 0.5rem);
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    min-height: 0;
-    z-index: 20;
-
-    > .chart-wrapper {
-      height: 100%;
-      position: relative;
-      min-height: 0px;
-      width: 100%;
-      cursor: crosshair;
-
-      &:has(+ .chart-wrapper:not([hidden])) {
-        height: calc(100% - 62px);
-      }
-
-      > fieldset {
-        pointer-events: none;
-        position: absolute;
-        left: 0px;
-        top: 0px;
-        z-index: 10;
-        display: flex;
-        align-items: center;
-        padding-left: var(--main-padding);
-        padding-right: var(--main-padding);
-        font-size: var(--font-size-xs);
-        line-height: var(--line-height-xs);
-        gap: 0.5rem;
-        color: var(--off-color);
-
-        > div.field {
-          display: flex;
-          align-items: center;
-          font-size: var(--font-size-xs);
-          line-height: var(--line-height-xs);
-          gap: 1rem;
-
-          > legend,
-          > div {
-            flex-shrink: 0;
-          }
-
-          > hr {
-            min-width: 1rem;
-          }
-
-          label {
-            padding: 0.5rem;
-            margin: -0.5rem;
-          }
-
-          > div {
-            display: flex;
-            gap: 0.5rem;
-          }
-        }
-      }
-
-      > .chart-div {
-        width: 100%;
-        height: 100%;
-      }
-    }
   }
 }

website/styles/live-price.css

@@ -0,0 +1,7 @@
+#live-price {
+  > h1 {
+    font-size: 2.5rem;
+    line-height: 4rem;
+    text-align: center;
+  }
+}

website/styles/simulation.css

@@ -4,14 +4,17 @@
   height: 100%;
   width: 100%;
 
+  > div:first-child {
+    max-width: 20rem;
+    border-right: 1px;x
+  }
+
   > div {
     flex: 1;
-    /* min-height: 0; */
     overflow-y: auto;
     display: flex;
     flex-direction: column;
-    width: 32rem;
-    gap: 1rem;
+    gap: 3rem;
 
     > div {
       display: flex;
@@ -26,4 +29,29 @@
     gap: 0.5rem;
     align-items: center;
   }
+
+  .chart-list {
+    max-height: 500px;
+    /* margin-left: var(--negative-main-padding);*/
+    margin-right: calc(var(--negative-main-padding) - 0.5rem);
+  }
+
+  li {
+    label:has(input:not(:checked)) + ul {
+      display: none;
+    }
+
+    ul {
+      padding-left: 0.75rem;
+      margin-left:0.25rem;
+      border-left: 1px;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.25rem;
+
+      li {
+        display: inline;
+      }
+    }
+  }
 }