refactor(NextVideoPopup): reduce overall popup size

This commit is contained in:
Tim 2025-01-20 15:29:15 +01:00
parent 6d4117125a
commit 730ca8b9e5

View file

@ -6,8 +6,8 @@
.next-video-popup-container {
display: flex;
flex-direction: row;
width: 50rem;
min-height: 15rem;
width: 38rem;
min-height: 13rem;
animation: slide-fade-in 0.5s ease-in;
@keyframes slide-fade-in {
@ -23,7 +23,7 @@
}
.poster-container {
flex: 1 1 45%;
flex: 1 1 25%;
display: flex;
justify-content: center;
align-items: center;
@ -52,14 +52,16 @@
.details-container {
flex: auto;
padding: 2rem;
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1.5rem 2rem;
.name {
flex: none;
align-self: stretch;
max-height: 2.4em;
font-weight: 700;
margin-bottom: 1.5rem;
color: var(--primary-accent-color);
.label {
@ -72,7 +74,6 @@
align-self: stretch;
max-height: 2.4em;
font-weight: 500;
margin-bottom: 0.5rem;
color: var(--primary-foreground-color);
}
}
@ -80,21 +81,23 @@
.buttons-container {
display: flex;
flex-direction: row;
padding: 0 1rem 2rem;
justify-content: space-between;
gap: 1rem;
padding: 0 1rem 1.5rem;
.spacing {
flex: 0 0 50%;
}
.button-container {
flex: 0 0 45%;
flex: 0 1 50%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 1rem;
height: 3.5rem;
padding: 0 0.5rem;
margin-left: 1rem;
padding: 0 1rem;
border-radius: 1.75rem;
&.play-button {
@ -118,7 +121,6 @@
flex: none;
width: 1.4rem;
height: 1.4rem;
margin-right: 1rem;
color: var(--primary-foreground-color);
}