From 54f39d0ad8dc16468597fd2ff045272c2b0bda7e Mon Sep 17 00:00:00 2001
From: Sunpy <sunpy@osufx.com>
Date: Sat, 2 Jan 2021 23:20:45 +0100
Subject: [PATCH] Backdrop replacement v1

---
 css/main.css | 52 +++++++++++++++++++++++++++++++---------------------
 js/button.js | 12 +++++++++---
 2 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/css/main.css b/css/main.css
index 99c834a..5267630 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,3 +1,8 @@
+:root {
+    --btn-dark: #1C1C1C;
+    --btn-light: #E3E3E3;
+}
+
 @font-face {
     font-family: 'Lato';
     src: url('fonts/Lato-Regular.ttf');
@@ -50,31 +55,11 @@ main {
 
     border: none;
     background: none;
-    color: #000;
+    color: var(--btn-dark);
     font: unset;
 
     border-radius: 100vw;
 }
-.btn.cbtn::after {
-    content: "";
-    position: absolute;
-    z-index: 1000;
-
-    padding: 0rem;
-
-    width: 0;
-    height: 0;
-
-    border-radius: 100vw;
-
-    backdrop-filter: invert(1);
-    transition: padding .2s;
-}
-/* When deployed on a platform, choose one or the other, not both */
-.btn.cbtn:focus::after, /* TV */
-.btn.cbtn:hover::after  /* PC */ {
-    padding: inherit;
-}
 
 @keyframes cbtn-click {
     from {
@@ -111,4 +96,29 @@ main {
 }
 .btn.sbtn::after {
     
+}
+
+.shadow {
+    display: inherit;
+    place-content: center;
+    place-items: center;
+    position: absolute;
+
+    filter: invert(1);
+    background: var(--btn-light);;
+    overflow: hidden;
+
+    padding: 0rem;
+
+    width: 0;
+    height: 0;
+
+    border-radius: 100vw;
+
+    transition: padding .2s;
+}
+/* When deployed on a platform, choose one or the other, not both */
+.btn.cbtn:focus > .shadow, /* TV */
+.btn.cbtn:hover > .shadow  /* PC */ {
+    padding: inherit;
 }
\ No newline at end of file
diff --git a/js/button.js b/js/button.js
index 1a4309f..4daecbd 100644
--- a/js/button.js
+++ b/js/button.js
@@ -2,11 +2,11 @@ addEventListener("load", () => {
     const onAnimationFinished = (e) => {
         e.target.remove();
     };
-    const onClick = (e) => {
+    const onClick = (e, btn) => {
         const clickElement = document.createElement("div");
         clickElement.className = "click";
         clickElement.addEventListener("animationend", onAnimationFinished);
-        e.target.appendChild(clickElement);
+        btn.appendChild(clickElement);
     };
     for (const btn of document.getElementsByClassName("btn")) {
         btn.addEventListener("focusin", () => {
@@ -15,6 +15,12 @@ addEventListener("load", () => {
         btn.addEventListener("focusout", () => {
             console.log("OUT");
         });
-        btn.addEventListener("click", onClick);
+        btn.addEventListener("click", (e) => onClick(e, btn) );
+
+        // Add backdrop-filter replacement
+        const bdfr = document.createElement("div");
+        bdfr.className = "shadow";
+        bdfr.innerHTML = btn.innerHTML;
+        btn.appendChild(bdfr);
     };
 });
\ No newline at end of file