mirror of https://github.com/FreeTubeApp/FreeTube
73 lines
1.2 KiB
CSS
73 lines
1.2 KiB
CSS
.routerView {
|
|
display: flex;
|
|
}
|
|
|
|
.playlistInfo {
|
|
background-color: var(--card-bg-color);
|
|
box-sizing: border-box;
|
|
block-size: calc(100vh - 132px);
|
|
margin-inline-end: 1em;
|
|
overflow-y: auto;
|
|
padding: 10px;
|
|
position: sticky;
|
|
inset-block-start: 96px;
|
|
inline-size: 30%;
|
|
}
|
|
|
|
.playlistItems {
|
|
display: flex;
|
|
flex-direction: column;
|
|
grid-gap: 10px;
|
|
margin: 0;
|
|
padding: 10px;
|
|
inline-size: 60%;
|
|
}
|
|
|
|
.playlistItem {
|
|
display: grid;
|
|
grid-template-columns: max-content auto;
|
|
column-gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.videoIndex {
|
|
color: var(--tertiary-text-color);
|
|
}
|
|
|
|
.loadNextPageWrapper {
|
|
/* about the same height as the button */
|
|
max-block-size: 7vh;
|
|
}
|
|
|
|
:deep(.videoThumbnail) {
|
|
margin-block-start: auto;
|
|
margin-block-end: auto;
|
|
}
|
|
|
|
:deep(.thumbnailImage) {
|
|
max-inline-size: 25vw;
|
|
}
|
|
|
|
@media only screen and (max-width: 850px) {
|
|
.routerView {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.playlistInfo {
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
inset-block-start: 0;
|
|
block-size: auto;
|
|
inline-size: 100%;
|
|
}
|
|
|
|
.playlistItems {
|
|
box-sizing: border-box;
|
|
inline-size: 100%;
|
|
}
|
|
|
|
:deep(.thumbnailImage) {
|
|
max-inline-size: 35vw;
|
|
}
|
|
}
|