TelegramPWA/src/components/main/premium/StarsGiftModal.module.scss
2024-10-20 18:53:58 +02:00

114 lines
1.7 KiB
SCSS

@media (min-width: 451px) {
.modalDialog :global(.modal-dialog) {
max-width: 32rem !important;
}
}
.root :global(.modal-content) {
padding: 0;
}
.root :global(.modal-dialog) {
max-width: 26.25rem;
overflow: hidden;
}
.main {
height: 100%;
overflow-y: scroll;
display: flex;
flex-direction: column;
align-items: center;
}
.headerInfo {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.logo {
margin: 1rem;
width: 6.25rem;
height: 6.25rem;
min-height: 6.25rem;
}
.logoBackground {
position: absolute;
top: 0.75rem;
left: 50%;
transform: translateX(-50%);
height: 8rem;
}
.description {
text-align: center;
margin-inline: 0.5rem;
margin-bottom: 1rem;
text-wrap: balance;
}
.section {
display: flex;
flex-direction: column;
height: 100%;
padding: 0.5rem;
}
.header {
z-index: 2;
display: flex;
align-items: center;
border-bottom: 0.0625rem solid var(--color-borders);
position: absolute;
width: 100%;
left: 0;
top: 0;
height: 3.5rem;
padding: 0.5rem;
background: var(--color-background);
transition: 0.25s ease-out transform;
}
.starHeaderText {
font-size: 1.25rem;
font-weight: 500;
margin: 0 0 0 3.5rem;
unicode-bidi: plaintext;
}
.hiddenHeader {
transform: translateY(-100%);
}
.closeButton {
position: absolute;
top: 0.5rem;
left: 0.5rem;
z-index: 3;
}
.avatar {
margin: 2rem;
}
.center {
text-align: center;
}
.secondaryInfo {
text-align: center;
font-size: 0.875rem;
color: var(--color-text-secondary);
padding: 1rem;
margin-top: auto;
}
@media (max-width: 450px) {
.modalDialog :global(.modal-dialog) {
max-width: 100% !important;
}
}