SZUT/casino
5
1
Fork 0
Code Issues Pull requests 1 Releases 65 Wiki Activity Actions

feat(deposit): implement modal animations with GSAP

Browse source
This commit is contained in:
Jan-Marlon Leibl 2025-03-06 11:52:31 +01:00
parent c651337d30
commit 08a1a5e877
Signed by: jleibl
GPG key ID: 300B2F906DC6F1D5
9 changed files with 177 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

26
frontend/src/styles.css
View file

@ -144,13 +144,33 @@ a {
}
.modal-bg {
@apply fixed inset-0 bg-black/70 z-50 focus:outline-none focus:ring-2 focus:ring-emerald-light;
@apply fixed inset-0 bg-black/80 backdrop-blur-sm z-50 focus:outline-none focus:ring-2 focus:ring-emerald-light;
}
.modal-card {
@apply bg-deep-blue-contrast overflow-hidden hover:shadow-xl transition-shadow duration-300 p-4 fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 p-6 rounded-lg shadow-lg z-50 min-w-[300px];
@apply bg-deep-blue-contrast overflow-hidden hover:shadow-xl transition-shadow duration-300 p-6 rounded-xl shadow-2xl z-50 min-w-[300px] max-w-[400px] w-full mx-auto border border-deep-blue-light/20 fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
}
.modal-heading {
@apply text-xl font-bold text-text-primary;
@apply text-2xl font-bold text-text-primary mb-4;
}
.modal-card input {
@apply w-full px-4 py-2.5 bg-deep-blue-light/50 text-white rounded-lg my-1 border border-deep-blue-light/30 focus:border-emerald/50 focus:ring-1 focus:ring-emerald/50 outline-none transition-all duration-200;
}
.modal-card label {
@apply text-text-secondary text-sm font-medium mb-1 block;
}
.modal-card button {
@apply transition-all duration-200;
}
.modal-card .button-primary {
@apply bg-emerald hover:bg-emerald-dark text-text-primary transition-all duration-300 active:scale-95 shadow-lg shadow-emerald/20;
}
.modal-card .button-secondary {
@apply bg-deep-blue-light/50 hover:bg-deep-blue-light w-full py-2.5 my-2 border border-deep-blue-light/30 hover:border-deep-blue-light/50;
}