2024-06-11 17:13:45 +00:00

152 lines
2.5 KiB
Plaintext
Executable File

.playlistCreator {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
//justify-content: center;
width: 50vw;
height: 100%;
min-width: 800px;
transition: all 0.3s ease-in-out;
.stepContent {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
padding: 20px 0;
}
.stepActions {
position: sticky;
bottom: 0;
right: 0;
display: flex;
flex-direction: row;
align-items: center;
//justify-content: flex-end;
width: 100%;
padding: 20px;
gap: 10px;
background-color: var(--background-color-accent);
border-radius: 12px;
}
.playlistCreator_layout_row {
display: flex;
flex-direction: row;
width: 100%;
gap: 20px;
.playlistCreator_layout_column {
display: flex;
flex-direction: column;
width: 100%;
gap: 20px;
}
}
.actions {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 20px;
}
.field {
display: inline-flex;
flex-direction: column;
align-self: start;
width: 100%;
margin-bottom: 20px;
gap: 10px;
color: var(--text-color);
.field_header {
font-size: 1rem;
}
.inputText {
width: 100%;
background-color: transparent;
outline: 1px solid var(--border-color);
}
}
.coverPreview {
display: flex;
flex-direction: column;
gap: 10px;
.coverPreview_preview {
align-self: center;
width: 15vw;
height: 15vw;
max-width: 300px;
max-height: 300px;
img {
width: 15vw;
height: 15vw;
max-width: 300px;
max-height: 300px;
border-radius: 12px;
object-fit: cover;
}
}
.coverPreview_actions {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
width: 100%;
}
svg {
margin: 0 !important;
}
}
.ant-steps-icon {
svg {
margin: 0 !important;
}
}
}