Stylings

components/visualize/ProducingGraph/ProducingGraph.module.css

@@ -0,0 +1,45 @@
+.plane {
+    position: relative;
+    display: flex;
+    width: fit-content;
+    flex-direction: column;
+    padding: 2em;
+    box-shadow: 0 0 0 1px red; /* Border left */
+    gap: 10em;
+}
+
+.svg {
+    position: absolute;
+    z-index: -10;
+    inset: 0;
+    pointer-events: none;
+    stroke: black;
+}
+
+.row {
+    display: flex;
+    justify-content: space-evenly;
+    gap: 2em;
+}
+
+.node {
+    padding: 0.5em;
+    border: 1px solid #ddd;
+    background-color: #eee;
+    border-radius: 4px;
+}
+
+.hidden {
+    width: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+    .svg {
+        stroke: white;
+    }
+
+    .node {
+        border-color: #444;
+        background-color: #222;
+    }
+}