From 231dd959afb5f96dec654ba1367e97a82ad805ea Mon Sep 17 00:00:00 2001
From: Brian Rogers <captbrogers@gmail.com>
Date: Tue, 12 Dec 2023 13:56:57 -0700
Subject: [PATCH] adding some gradient border CSS

---
 src/resources/css/utilities.css | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/src/resources/css/utilities.css b/src/resources/css/utilities.css
index 22da5da..73ee7b0 100644
--- a/src/resources/css/utilities.css
+++ b/src/resources/css/utilities.css
@@ -1,3 +1,30 @@
 .button-row {
     @apply inline-grid grid-flow-col auto-cols-max items-center; /* intentionally leaving gap out so that it can be set on per-case basis */
 }
+
+    .gradBorder i {
+  content: '';
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  border-radius: 30px;
+  padding: 1.5px; /* the thickness of the border */
+  /* the below will do the magic */
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    /* this will cover only the content area (no padding) */
+      linear-gradient(#fff 0 0); /* this will cover all the area */
+  -webkit-mask-composite: xor; /* needed for old browsers until the below is more supported */
+  mask-composite: exclude; /* this will exclude the first layer from the second so only the padding area will be kept visible */
+}
+
+.gradBorder i::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(180deg, #ffffff73 0%, #ffffff10 50%);
+  transition: transform 0.7s linear;
+}