diff --git a/Theme/ElegantFin-theme-nightly.css b/Theme/ElegantFin-theme-nightly.css index ced3ceb..db6e2c3 100644 --- a/Theme/ElegantFin-theme-nightly.css +++ b/Theme/ElegantFin-theme-nightly.css @@ -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; }