Add a basic popup
This commit is contained in:
35
src/routes/Installs.css
Normal file
35
src/routes/Installs.css
Normal 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;
|
||||
}
|
||||
Reference in New Issue
Block a user