local and global graph

quartz/components/styles/graph.scss

@@ -0,0 +1,68 @@
+.graph {
+  & > h3 {
+    font-size: 1rem;
+    margin: 0
+  }
+
+  & > .graph-outer {
+    border-radius: 5px;
+    border: 1px solid var(--lightgray);
+    box-sizing: border-box;
+    height: 250px;
+    width: 300px;
+    margin: 0.5em 0;
+    position: relative;
+
+    & > #global-graph-icon {
+      color: var(--dark);
+      opacity: 0.5;
+      width: 18px;
+      height: 18px;
+      position: absolute;
+      padding: 0.2rem;
+      margin: 0.3rem;
+      top: 0;
+      right: 0;
+      border-radius: 4px;
+      background-color: transparent; 
+      transition: background-color 0.5s ease;
+      cursor: pointer;
+      &:hover {
+        background-color: var(--lightgray);
+      }
+    }
+
+    & > #graph-container > svg {
+      margin-bottom: -5px;
+    }
+  }
+
+  & > #global-graph-outer {
+    position: fixed;
+    z-index: 9999;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100%;
+    overflow: scroll;
+    backdrop-filter: blur(4px);
+    display: none;
+
+    &.active {
+      display: inline-block;
+    }
+
+    & > #global-graph-container {
+      border: 1px solid var(--lightgray);
+      background-color: var(--light); 
+      border-radius: 5px;
+      box-sizing: border-box;
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      height: 60vh;
+      width: 50vw;
+    }
+  }
+}