Modernize

Author: Prince527GitHub

dist/css/style.css

@@ -80,6 +80,10 @@ body {
     overflow: hidden;
 }
 
+.button.tooltip {
+    overflow: visible;
+}
+
 .button:hover {
     background-color: #171b1f;
 }
@@ -450,7 +454,7 @@ span.ripple {
 }
 
 .tooltip {
-    overflow: auto;
+    position: relative;
 }
 
 .tooltip-text {
@@ -472,25 +476,17 @@ span.ripple {
 }
 
 .modal {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: var(--modal-overlay);
-    z-index: 1;
-}
-
-.modal-content {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background-color: var(--modal-background);
-    padding: 1.25rem;
+    border: none;
     border-radius: 1rem;
+    padding: 1.25rem;
+    background-color: var(--modal-background);
     box-shadow: 0rem 0rem 1.875rem var(--modal-shadow);
+    color: var(--text-color);
+    max-width: 90vw;
+}
+
+.modal::backdrop {
+    background-color: var(--modal-overlay);
 }
 
 .close-btn {

dist/css/style.min.css

@@ -5,48 +5,40 @@ function createRipple(event) {
     const diameter = Math.max(button.clientWidth, button.clientHeight);
     const radius = diameter / 2;
 
-    circle.style.width = circle.style.height = `${diameter}px`;
-    circle.style.left = `${event.offsetX - radius}px`;
-    circle.style.top = `${event.offsetY - radius}px`;
+    Object.assign(circle.style, {
+        width: `${diameter}px`,
+        height: `${diameter}px`,
+        left: `${event.offsetX - radius}px`,
+        top: `${event.offsetY - radius}px`,
+    });
+
     circle.classList.add("ripple");
 
-    const ripple = button.querySelector(".ripple");
-    if (ripple) ripple.remove();
+    button.querySelector(".ripple")?.remove();
 
     button.appendChild(circle);
 }
 
-const buttons = document.querySelectorAll("button[data-ripple]");
-for (const button of buttons) {
-    if (!button.classList.contains("tooltip")) button.addEventListener("click", createRipple);
+for (const button of document.querySelectorAll("button[data-ripple]")) {
+    if (!button.classList.contains("tooltip")) {
+        button.addEventListener("click", createRipple);
+    }
 }
 
-const openModalButtons = document.querySelectorAll("button[data-modal]")
-for (const button of openModalButtons) {
+for (const button of document.querySelectorAll("button[data-modal]")) {
     button.addEventListener("click", () => {
-        const id = button.getAttribute("data-modal");
-        openModal(id);
-
-        document.addEventListener("keydown", (event) => event.key === "Escape" ? closeModal(id) : null);
+        document.getElementById(button.dataset.modal)?.showModal();
     });
 }
 
-const closeButtons = document.querySelectorAll(".close-btn");
-for (const button of closeButtons) {
+for (const button of document.querySelectorAll(".close-btn")) {
     button.addEventListener("click", () => {
-        const id = button.getAttribute("data-modal");
-        closeModal(id);
-
-        document.addEventListener("keydown", (event) => event.key === "Escape" ? closeModal(id) : null);
+        button.closest("dialog")?.close();
     });
 }
 
-function closeModal(id) {
-    const modal = document.getElementById(id);
-    modal.style.display = "none";
-}
-
-function openModal(id) {
-    const modal = document.getElementById(id);
-    modal.style.display = "block";
+for (const dialog of document.querySelectorAll("dialog.modal")) {
+    dialog.addEventListener("click", (event) => {
+        if (event.target === dialog) dialog.close();
+    });
 }