Add a basic popup

This commit is contained in:
2025-07-19 12:16:59 -07:00
parent 63fdb1c67e
commit ef451449fd
2 changed files with 75 additions and 3 deletions

35
src/routes/Installs.css Normal file
View File

@@ -0,0 +1,35 @@
@import 'tailwindcss';
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.popup-overlay {
@apply fixed w-screen h-screen z-[9999] flex justify-center items-center animate-[fadeIn_0.2s_ease-out_forwards] left-0 top-0 bg-[rgba(0,0,0,0.5)];
}
.popup-overlay.fade-out {
@apply animate-[fadeOut_0.2s_ease-out_forwards];
}
.popup-box {
@apply relative w-[85vw] h-[80vh] shadow-[0_0_20px_rgba(0,0,0,0.2)] overflow-auto p-6 rounded-lg bg-[#191919];
}
.close-button {
@apply flex justify-center items-center absolute bg-[#363636] hover:bg-[#484848] text-2xl cursor-pointer text-gray-300 hover:text-white h-12 w-12 p-3 rounded-xl border-[none] left-2 top-2 transition-colors;
}