refactor

web/css/modal.css

@@ -0,0 +1,87 @@
+.modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out; /* Fade-in/out transition */
+    z-index: 20; /* Ensure the modal is above other content */
+    color: var(--color-4);
+    backdrop-filter: blur(10px);
+}
+
+/* Style for the modal content */
+.modal-content {
+    box-sizing: border-box; 
+    position: absolute;
+    top: 50vh;
+    left: 50vw;
+    transform: translate(-50%, -50%);
+    background-color: var(--color-main);
+    padding: 30px;
+    border-radius: 30px;
+    opacity: 1;
+    transition: opacity 0.3s ease-in-out; /* Fade-in/out transition */
+    z-index: 21; /* Ensure the modal content is above the modal background */
+    min-width: 500px;
+}
+
+.modal-content p {
+    margin: 0;
+}
+
+.modal-title {
+    font-size: 20px;
+    position: absolute;
+    font-weight: 300;
+    top: 14px;
+    left: 30px;
+}
+
+/* Style for the close button */
+.close {
+    position: absolute;
+    top: 17px;
+    right: 30px;
+    cursor: pointer;
+    transition: 0.3s ease-in-out color;
+}
+
+.close:hover {
+    color: white;
+}
+
+.modal-content .button-close {
+    position: absolute;
+    bottom: 25px;
+    right: 35px;
+    width: 100px;
+    height: 48px;
+    border-radius: 30px;
+    background: var(--color-4);
+    font-weight: bold;
+    border: 0;
+    transition: 0.35s ease-in-out background;
+    cursor: pointer;
+}
+
+.modal-content .button-close:hover {
+    background: var(--color-5);
+}
+
+.modal label {
+    font-size: 12px;
+    font-weight: bold;
+    text-transform: uppercase;
+    display: block;
+}
+
+@media only screen and (max-width: 768px) {
+    .modal-content {
+        min-width: 90% !important;
+        margin: auto;
+    }
+}