From: Ardis Lu <ardisglu@gmail.com>
Date: Thu, 1 Jun 2023 06:24:41 +0000 (-0700)
Subject: Add field background effect on focus
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=e9d4d3950f65733a4c7b57f69d06f21be43e8e3a;p=google-forms-frontend

Add field background effect on focus
---

diff --git a/index.html b/index.html
index 0da7694..5572c4f 100644
--- a/index.html
+++ b/index.html
@@ -112,6 +112,48 @@
       transition: transform 400ms;
     }
 
+    @keyframes shiftRight {
+      from {
+        background-position: 30%;
+      }
+
+      to {
+        background-position: 50%;
+      }
+    }
+
+    div::after {
+      content: "";
+      display: block;
+      position: absolute;
+      z-index: -1;
+      top: 0;
+      left: -8px;
+      inline-size: calc(100% + 16px);
+      block-size: 100%;
+      border-radius: 0 8px 8px 0;
+      background: linear-gradient(90deg,
+          hsl(354deg 50% 50%) 0%,
+          hsl(347deg 51% 55%) 4%,
+          hsl(341deg 50% 59%) 9%,
+          hsl(333deg 47% 63%) 14%,
+          hsl(323deg 40% 67%) 20%,
+          hsl(308deg 32% 71%) 27%,
+          hsl(288deg 31% 76%) 36%,
+          hsl(269deg 34% 81%) 46%,
+          hsl(252deg 33% 86%) 61%,
+          hsl(236deg 29% 90%) 99%);
+      background-size: 400%;
+      animation: shiftRight 3s linear infinite alternate;
+      filter: opacity(0);
+      transition: filter 300ms;
+    }
+
+    div:focus-within::after {
+      filter: opacity(0.4);
+      transition: filter 150ms;
+    }
+
     label {
       font-weight: 700;
     }