Backdrop replacement v1

This commit is contained in:
Emily 2021-01-02 23:20:45 +01:00
parent 9850279e61
commit 54f39d0ad8
2 changed files with 40 additions and 24 deletions

View File

@ -1,3 +1,8 @@
:root {
--btn-dark: #1C1C1C;
--btn-light: #E3E3E3;
}
@font-face { @font-face {
font-family: 'Lato'; font-family: 'Lato';
src: url('fonts/Lato-Regular.ttf'); src: url('fonts/Lato-Regular.ttf');
@ -50,31 +55,11 @@ main {
border: none; border: none;
background: none; background: none;
color: #000; color: var(--btn-dark);
font: unset; font: unset;
border-radius: 100vw; 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 { @keyframes cbtn-click {
from { from {
@ -111,4 +96,29 @@ main {
} }
.btn.sbtn::after { .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;
} }

View File

@ -2,11 +2,11 @@ addEventListener("load", () => {
const onAnimationFinished = (e) => { const onAnimationFinished = (e) => {
e.target.remove(); e.target.remove();
}; };
const onClick = (e) => { const onClick = (e, btn) => {
const clickElement = document.createElement("div"); const clickElement = document.createElement("div");
clickElement.className = "click"; clickElement.className = "click";
clickElement.addEventListener("animationend", onAnimationFinished); clickElement.addEventListener("animationend", onAnimationFinished);
e.target.appendChild(clickElement); btn.appendChild(clickElement);
}; };
for (const btn of document.getElementsByClassName("btn")) { for (const btn of document.getElementsByClassName("btn")) {
btn.addEventListener("focusin", () => { btn.addEventListener("focusin", () => {
@ -15,6 +15,12 @@ addEventListener("load", () => {
btn.addEventListener("focusout", () => { btn.addEventListener("focusout", () => {
console.log("OUT"); 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);
}; };
}); });