Backdrop replacement v1
This commit is contained in:
parent
9850279e61
commit
54f39d0ad8
52
css/main.css
52
css/main.css
|
@ -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 {
|
||||||
|
@ -112,3 +97,28 @@ 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;
|
||||||
|
}
|
12
js/button.js
12
js/button.js
|
@ -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);
|
||||||
};
|
};
|
||||||
});
|
});
|
Loading…
Reference in New Issue
Block a user