5 Commits

Author SHA1 Message Date
lscambo13
9a60e664e5 Fix: Used a higher quality info_outline icon 2025-11-11 23:19:03 +05:30
lscambo13
ab8627eb66 Fix: Thumbnails were slightly off-center in the episode grid 2025-11-11 23:05:24 +05:30
lscambo13
c7abd97dfb New: Redesigned the episode lists to be 'grid' on desktop 2025-11-11 22:51:58 +05:30
lscambo13
23542f197e Fix: Used standard colors in episode lists
dev: simplified some selectors to improve compatibility with HSS plugin
2025-11-11 22:43:26 +05:30
lscambo13
5641b4c7d6 Fix: Continue watching progress bar and the chapter cards were bugged on Firefox 2025-11-11 22:40:26 +05:30

View File

@@ -209,7 +209,8 @@ html {
} }
.material-icons.info_outline:before { .material-icons.info_outline:before {
font-family: Material Icons; content: "\e88e";
font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
} }
.dashboardFooter { .dashboardFooter {
@@ -505,11 +506,82 @@ html {
font-size: x-small; 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; */
box-sizing: border-box;
}
.layout-desktop .listItem-largeImage .listItemBody {
order: 2;
grid-column: 1 / 3;
padding: 1em 0.125em;
}
.layout-desktop .listItem-largeImage .listViewUserDataButtons {
flex-direction: column; flex-direction: column;
font-size: small; font-size: small;
order: 2;
grid-column: 3;
align-self: center;
} }
/* episode grid end */
.portraitCard { .portraitCard {
min-width: 5em; min-width: 5em;
} }
@@ -1909,17 +1981,20 @@ progress + span {
justify-content: center; justify-content: center;
} }
.innerCardFooter,
.chapterCardImageContainer {
width: 100%;
box-sizing: border-box;
}
.innerCardFooter, .innerCardFooter,
.chapterThumbTextContainer { .chapterThumbTextContainer {
background: var(--cardFooterGradient); background: var(--cardFooterGradient);
text-shadow: 0.1em 0.1em 0px black; text-shadow: 0.1em 0.1em 0px black;
width: 100%;
height: 100%;
width: -webkit-fill-available;
height: -webkit-fill-available;
padding: 0em 2em 2em 2em; padding: 0em 2em 2em 2em;
align-content: end; align-content: end;
display: grid; display: grid;
height: 100%;
} }
.chapterCardImageContainer { .chapterCardImageContainer {
@@ -2459,9 +2534,19 @@ div[data-role="controlgroup"] a.ui-btn-active {
background-color: rgba(255, 255, 255, 0.07); background-color: rgba(255, 255, 255, 0.07);
} }
[dir="ltr"] .listItem:not(.actionSheetMenuItem)[data-type="Episode"] .listItemBodyText:not(.secondary) { /* [dir="ltr"] .listItem:not(.actionSheetMenuItem)[data-type="Episode"] .listItemBodyText:not(.secondary) {
font-size: 1.17em; font-size: 1.17em;
font-weight: 600; font-weight: 600;
} */
.listItem-largeImage .listItemBodyText:not(.secondary) {
font-size: 1.17em;
font-weight: 600;
color: var(--textColor);
}
.listItemBodyText.secondary {
color: var(--dimTextColor);
} }
.listItemBody > .listItemBodyText:not(.secondary) { .listItemBody > .listItemBodyText:not(.secondary) {
@@ -3462,13 +3547,23 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
} }
/* this :not() is needed to prevent affecting the mixed media libraries on the home page */ /* this :not() is needed to prevent affecting the mixed media libraries on the home page */
#homeTab .overflowBackdropCard[data-isfolder="true"]:not(.groupedCard) .cardPadder-overflowBackdrop { /* #homeTab .overflowBackdropCard[data-isfolder="true"]:not(.groupedCard) .cardPadder-overflowBackdrop {
padding-bottom: 50%; padding-bottom: 50%;
} }
#homeTab .overflowBackdropCard[data-isfolder="true"]:not(.groupedCard) .cardText-first, #homeTab .overflowBackdropCard[data-isfolder="true"]:not(.groupedCard) .cardText-first,
#homeTab .overflowBackdropCard[data-isfolder="true"]:not(.groupedCard) .cardText.cardTextCentered { #homeTab .overflowBackdropCard[data-isfolder="true"]:not(.groupedCard) .cardText.cardTextCentered {
display: var(--libraryLabelVisibility); display: var(--libraryLabelVisibility);
} */
.overflowBackdropCard[data-type="CollectionFolder"] .cardPadder-overflowBackdrop,
.overflowBackdropCard[data-type="UserView"] .cardPadder-overflowBackdrop {
padding-bottom: 50%;
}
.overflowBackdropCard[data-type="CollectionFolder"] .cardText-first,
.overflowBackdropCard[data-type="UserView"] .cardText-first {
display: var(--libraryLabelVisibility);
} }
.nowPlayingButtonsContainer { .nowPlayingButtonsContainer {