From f0a4e6748be49e73ebeab48db1356d2a58ee6f14 Mon Sep 17 00:00:00 2001
From: kleap-admin <admin@kleap.co>
Date: Thu, 15 Jan 2026 13:40:15 +0000
Subject: [PATCH] Update components/common.module.css

---
 components/common.module.css | 159 +++++++++++++++++++++++++++++++++++
 1 file changed, 159 insertions(+)
 create mode 100644 components/common.module.css

diff --git a/components/common.module.css b/components/common.module.css
new file mode 100644
index 0000000..14a1def
--- /dev/null
+++ b/components/common.module.css
@@ -0,0 +1,159 @@
+.gridLineHorizontal {
+  --background: #ffffff;
+  --color: rgba(0, 0, 0, 0.2);
+  --height: 1px;
+  --width: 5px;
+  --fade-stop: 90%;
+  /* Bleed in or out from the container */
+  --offset: -100px;
+
+  position: absolute;
+  width: calc(100% + var(--offset));
+  height: var(--height);
+  left: calc(var(--offset) / 2 * -1);
+
+  background: linear-gradient(
+    to right,
+    var(--color),
+    var(--color) 50%,
+    transparent 0,
+    transparent
+  );
+  background-size: var(--width) var(--height);
+
+  /* Fade out the edges */
+  mask: linear-gradient(
+      to left,
+      var(--background) var(--fade-stop),
+      transparent
+    ),
+    linear-gradient(to right, var(--background) var(--fade-stop), transparent),
+    linear-gradient(black, black);
+  -webkit-mask: linear-gradient(
+      to left,
+      var(--background) var(--fade-stop),
+      transparent
+    ),
+    linear-gradient(to right, var(--background) var(--fade-stop), transparent),
+    linear-gradient(black, black);
+  mask-composite: exclude;
+  -webkit-mask-composite: exclude;
+  z-index: 20;
+}
+
+.gridLineHorizontalDark {
+  --background: #ffffff;
+  --color: rgba(255, 255, 255, 0.2);
+  --height: 1px;
+  --width: 5px;
+  --fade-stop: 90%;
+  /* Bleed in or out from the container */
+  --offset: -100px;
+
+  position: absolute;
+  width: calc(100% + var(--offset));
+  height: var(--height);
+  left: calc(var(--offset) / 2 * -1);
+
+  background: linear-gradient(
+    to right,
+    var(--color),
+    var(--color) 50%,
+    transparent 0,
+    transparent
+  );
+  background-size: var(--width) var(--height);
+
+  /* Fade out the edges */
+  mask: linear-gradient(
+      to left,
+      var(--background) var(--fade-stop),
+      transparent
+    ),
+    linear-gradient(to right, var(--background) var(--fade-stop), transparent),
+    linear-gradient(black, black);
+  -webkit-mask: linear-gradient(
+      to left,
+      var(--background) var(--fade-stop),
+      transparent
+    ),
+    linear-gradient(to right, var(--background) var(--fade-stop), transparent),
+    linear-gradient(black, black);
+  mask-composite: exclude;
+  -webkit-mask-composite: exclude;
+  z-index: 20;
+}
+
+.gridLineVertical {
+  --background: #ffffff;
+  --color: rgba(0, 0, 0, 0.2);
+  --height: 5px;
+  --width: 1px;
+  --fade-stop: 90%;
+  --offset: -100px;
+
+  position: absolute;
+  height: calc(100% + var(--offset));
+  width: var(--width);
+  top: calc(var(--offset) / 2 * -1);
+
+  background: linear-gradient(
+    to bottom,
+    var(--color),
+    var(--color) 50%,
+    transparent 0,
+    transparent
+  );
+  background-size: var(--width) var(--height);
+
+  mask: linear-gradient(to top, var(--background) var(--fade-stop), transparent),
+    linear-gradient(to bottom, var(--background) var(--fade-stop), transparent),
+    linear-gradient(black, black);
+  -webkit-mask: linear-gradient(
+      to top,
+      var(--background) var(--fade-stop),
+      transparent
+    ),
+    linear-gradient(to bottom, var(--background) var(--fade-stop), transparent),
+    linear-gradient(black, black);
+  mask-composite: exclude;
+  -webkit-mask-composite: exclude;
+  z-index: 20;
+}
+
+.gridLineVerticalDark {
+  --background: #ffffff;
+  --color: rgba(255, 255, 255, 0.2);
+  --height: 5px;
+  --width: 1px;
+  --fade-stop: 90%;
+  --offset: -100px;
+
+  position: absolute;
+  height: calc(100% + var(--offset));
+  width: var(--width);
+  top: calc(var(--offset) / 2 * -1);
+
+  background: linear-gradient(
+    to bottom,
+    var(--color),
+    var(--color) 50%,
+    transparent 0,
+    transparent
+  );
+  background-size: var(--width) var(--height);
+
+  mask: linear-gradient(to top, var(--background) var(--fade-stop), transparent),
+    linear-gradient(to bottom, var(--background) var(--fade-stop), transparent),
+    linear-gradient(black, black);
+  -webkit-mask: linear-gradient(
+      to top,
+      var(--background) var(--fade-stop),
+      transparent
+    ),
+    linear-gradient(to bottom, var(--background) var(--fade-stop), transparent),
+    linear-gradient(black, black);
+  mask-composite: exclude;
+  -webkit-mask-composite: exclude;
+  z-index: 20;
+}