diff --git a/templates/palette.html b/templates/palette.html index beb476d..9c0ce3e 100644 --- a/templates/palette.html +++ b/templates/palette.html @@ -15,15 +15,6 @@
calc
and var
, most of the colour palette can be automated.
@@ -69,17 +40,7 @@
calc
and var
, most of the colour palette can be automated.
@@ -176,13 +137,6 @@
/* === Popup notification shenanigans === */
- @keyframes fade {
- 0% { opacity: 0; transform: translate(-50%, -10%)}
- 20% { opacity: 1;}
- 50% { opacity: 1;}
- 100% { opacity: 0; transform: translate(-50%, -150%)}
- }
-
div.notification {
top: 0em;
border: 1px solid currentcolor;
@@ -263,26 +217,17 @@
document.querySelector("body").appendChild(box);
- box.style.setProperty('animation', 'fade 1s');
- box.style.setProperty('animation-fill-mode', 'forwards');
+ box.animate([
+ { offset: 0, opacity: 1, transform: "translate(-50%, -10%)"},
+ { offset: .3, opacity: 1 },
+ { offset: 1, opacity: 0, transform: "translate(-50%, -200%)"},
+ ], {
+ duration: 1e3
+ }).finished.then(() => box.remove())
+
box.style.setProperty('color', color);
-
- box.addEventListener("animationend", ({box: target}) => box.parentElement.removeChild(box))
}
- document.querySelectorAll('colour-palette button').forEach(button => {
- button.addEventListener('click', event => {
- const prop = name => getComputedStyle(button)
- .getPropertyValue(name)
- .replace(/^ *| *$/g, "")
- const colour = `hsl(${prop("--hue")}, ${prop("--saturation")}, ${prop("--lightness")})`
- navigator.clipboard.writeText(colour).then(() => {
- const box = button.getBoundingClientRect()
- showMessage(`Copied to Clipboard: