Merge branch 'main' of github.com:Shy/party

Shy · Jul 22, 2024 · 3b140a8 · 3b140a8
2 parents bfe4879 + ea7a1bc
commit 3b140a8
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 10 deletions.
diff --git a/app/static/css/style.css b/app/static/css/style.css
@@ -600,8 +600,9 @@ a:hover {
 }
 
 .dropdown-menu {
+  --radius: 0.6em;
   width: 100%;
-  border-radius: 0.6em;
+  border-radius: var(--radius);
   margin-bottom: 0.6em;
   border: none;
   background-color: rgb(0, 0, 0);
@@ -612,24 +613,51 @@ a:hover {
 }
 
 .dropdown-content {
-  background-color: rgba(255, 255, 255, 0.3);
+  background-color: unset;
   font-family: "DotGothic16", sans-serif;
   overflow: auto;
   cursor: pointer;
   z-index: 10;
-  background: none;
   color: white;
-  border-radius: 0.6em;
   border: none;
   position: relative;
-  background: linear-gradient(270deg, #020024, #64dcdc, #00d4ff);
-  background-size: 600% 600%;
-  -webkit-animation: AnimationName 4s ease infinite;
-  -moz-animation: AnimationName 4s ease infinite;
-  -o-animation: AnimationName 4s ease infinite;
-  animation: AnimationName 4s ease infinite;
 }
 
 .dropdown-item {
   color: white;
 }
+
+/* inspo: https://twitter.com/jh3yy/status/1752903535488823789 */
+/* prototype: https://codepen.io/yefim/pen/rNgZjrw */
+[data-glow] {
+  position: absolute;
+  inset: 0;
+  border: 4px solid transparent;
+  border-radius: var(--radius);
+  mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
+  mask-clip: padding-box, border-box;
+  mask-composite: intersect;
+}
+
+[data-glow]::after {
+  background: radial-gradient(
+      circle at right,
+      hsl(0 0% 100% / 0.75),
+      transparent 50%
+    ),
+    radial-gradient(circle at right, hsl(195 100% 50% / 1) 50%, transparent);
+  content: "";
+  height: 160px;
+  aspect-ratio: 1 / 1;
+  offset-path: rect(0 auto auto 0 round 160px);
+  offset-anchor: 100% 50%;
+  animation: loop 4.6s infinite linear;
+  display: inline-block;
+  position: absolute;
+}
+
+@keyframes loop {
+  to {
+    offset-distance: 100%;
+  }
+}
diff --git a/app/templates/attendee_rsvp.html b/app/templates/attendee_rsvp.html
@@ -52,6 +52,8 @@
                 </button>
               </div>
               <div class="dropdown-menu" role="menu">
+                <span data-glow="true"></span>
+
                 <p class="title-dropdown">
                   Pick a chore to confirm your attendance
                 </p>