danvics/ElegantFin
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

New: Redesigned the episode lists to be 'grid' on desktop

Browse source
This commit is contained in:
lscambo13 2025-11-11 22:48:58 +05:30
parent 23542f197e
commit c7abd97dfb
1 changed files with 71 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
Theme/ElegantFin-theme-nightly.css
View file

@ -505,11 +505,81 @@ html {
font-size: x-small;
}
.listItem-largeImage[data-type="Episode"] .listViewUserDataButtons {
/* episode grid start */
.layout-desktop .detailSection > #listChildrenCollapsible .vertical-list,
.layout-desktop .detailPageContent > #childrenCollapsible .vertical-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--itemColumnGap);
}
@media (max-width: 100em) {
.layout-desktop .detailSection > #listChildrenCollapsible .vertical-list,
.layout-desktop .detailPageContent > #childrenCollapsible .vertical-list {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 64em) {
.layout-desktop .listItemImage-large {
width: 100%;
}
.layout-desktop .detailSection > #listChildrenCollapsible .vertical-list,
.layout-desktop .detailPageContent > #childrenCollapsible .vertical-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 40em) {
.layout-desktop .detailSection > #listChildrenCollapsible .vertical-list,
.layout-desktop .detailPageContent > #childrenCollapsible .vertical-list {
grid-template-columns: repeat(1, 1fr);
}
}
.layout-desktop .listItem-largeImage {
display: grid;
margin-bottom: 0 !important;
}
.layout-desktop .listItem-largeImage > .listItem-content {
display: grid;
grid-template-columns: 1fr 1fr 2em;
order: 1;
height: 100%;
align-items: start;
}
.layout-desktop .listItem-largeImage > .listItem-bottomoverview {
order: 2;
}
.layout-desktop .listItem-largeImage .listItemImage-large {
order: 1;
grid-column: 1 / -1;
height: max-content;
width: 100%;
aspect-ratio: 16 / 9;
margin: 0 !important;
}
.layout-desktop .listItem-largeImage .listItemBody {
order: 2;
grid-column: 1 / 3;
padding: 1em 0.125em;
}
.layout-desktop .listItem-largeImage .listViewUserDataButtons {
flex-direction: column;
font-size: small;
order: 2;
grid-column: 3;
align-self: center;
}
/* episode grid end */
.portraitCard {
min-width: 5em;
}