fix: styles on event modal

This commit is contained in:
Timothy Z. 2024-12-17 15:20:26 +02:00
parent 3dc0e37e02
commit d9a9fb2d4f

View file

@ -23,13 +23,13 @@
.modal-dialog-content {
overflow-y: visible;
}
.image {
width: 100%;
height: 100%;
margin-top: -10rem;
}
.info-container {
display: flex;
flex-direction: column;
@ -38,7 +38,7 @@
gap: 2.5rem;
padding: 1rem 4rem;
margin-top: -7rem;
.title-container {
display: flex;
flex-direction: column;
@ -50,7 +50,7 @@
text-align: center;
padding: 0 6rem;
}
.label {
color: var(--primary-foreground-color);
font-size: 1rem;
@ -58,7 +58,7 @@
opacity: 0.5;
}
}
.addon-container {
display: flex;
align-items: center;
@ -76,19 +76,19 @@
color: var(--primary-foreground-color);
}
}
.action-button {
background-color: var(--primary-foreground-color);
border: 2px solid var(--primary-foreground-color);
padding: 0.8rem 2rem;
border-radius: 2rem;
.button-label {
color: var(--primary-accent-color);
font-size: 1rem;
font-weight: 700;
}
&:hover {
background-color: transparent;
}
@ -96,15 +96,37 @@
}
}
}
}
@media only screen and (max-width: @minimum) {
@media (orientation: landscape) and (max-height: @xsmall) {
.event-modal {
.modal-dialog-container {
.modal-dialog-content {
.image {
height: 125%;
width: 125%;
overflow-y: auto;
display: flex;
flex-direction: column;
align-items: center;
.modal-dialog-content {
overflow-y: auto;
}
.image {
margin-top: -5rem;
}
.info {
margin-top: 0rem;
}
}
}
}
}
@media only screen and (max-width: @minimum) {
.event-modal {
.modal-dialog-container {
.modal-dialog-content {
.info-container {
.title-container {
.title {
@ -120,4 +142,4 @@
}
}
}
}
}