boris/ElegantFin
1
0
Fork 0
mirror of https://github.com/lscambo13/ElegantFin.git synced 2025-09-18 12:40:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

New: On phones, introducing a major overhaul of the main media page

Browse Source 
Changes:
- Inspired from Plex and Netflix
- Positioned the main components at center
- Replaced the text titles with clear arts
- Animated the backdrop when opening the item page
- Added a slight shadow to header buttons when it is fully transparent
- Showed the poster and main title when clear art is not available

Limitations:
- Episode thumbnail not visible anymore in the episode page
- Hidden media title means that users can not go back to the TV show by tapping on it
This commit is contained in:
lscambo13
2025-05-11 18:28:29 +05:30
parent 3b01427bfa
commit ba96445fdb
1 changed files with 97 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
Theme/ElegantFin-theme-nightly.css
View File

@@ -418,10 +418,6 @@ html {
}
}
.detailLogo {
display: none;
}
.detailPageWrapperContainer {
padding-top: unset;
margin-top: unset;
@@ -638,11 +634,6 @@ html {
.layout-mobile .detailImageContainer .card {
max-width: 15vw;
}
.layout-mobile [dir=ltr] .infoWrapper {
padding-left: 25% !important;
}
}
.layout-mobile .itemBackdrop {
@@ -699,22 +690,66 @@ html {
background: linear-gradient(0deg, var(--darkerGradientPoint) 35%, var(--lighterGradientPointAlpha) 100%);
}
@keyframes scaleOnce {
@keyframes scaleUp {
from {
transform: scale(1) translate(0, 0);
transform: scale(1) ;
opacity: 0;
}
to {
transform: scale(1.075) translate(2%, -3%);
transform: scale(1.075);
opacity: 1;
}
}
.backdropImageFadeIn,
.layout-mobile .itemBackdrop {
overflow: hidden;
animation: scaleOnce 3s ease-out forwards;
@keyframes moveDown {
from {
transform: translateY(-2em) ;
opacity: 0;
}
to {
transform: translateY(0) ;
opacity: 1;
}
}
.backdropImageFadeIn
{
transform-origin: bottom left;
animation: scaleUp 3s ease-out forwards;
}
.layout-mobile .itemBackdrop{
animation: moveDown 1s ease-out forwards;
}
.detailLogo {
display: none;
}
@keyframes moveUp {
from {
transform: translateY(-90%);
opacity: 0;
}
to {
transform: translateY(-100%);
opacity: 1;
}
}
.layout-mobile .detailLogo {
display: block;
z-index: 1;
position: absolute;
left: 1em;
top: 44vh;
width: calc(100vw - 2em);
max-height: 20vh;
background-position: bottom;
animation: moveUp 1s ease-out forwards;
}
.backdropContainer::after {
@@ -2488,6 +2523,7 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
margin-top: 4em;
}
/* this is the default header, visible in home and libraries */
.skinHeader-blurred:not(.osdHeader) {
backdrop-filter: var(--blurDefault);
background-color: var(--headerColor);
@@ -2497,6 +2533,7 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
transition-property: background-color, backdrop-filter, transform, border-width;
}
/* this is the transparent header, visible in main media page */
.skinHeader-withBackground.semiTransparent,
.layout-mobile .skinHeader.headroom:not(.osdHeader, .noHomeButtonHeader):has(.pageTitle:empty) {
backdrop-filter: none;
@@ -2506,46 +2543,63 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child {
transition-property: background-color, backdrop-filter, transform, border-width;
}
.skinHeader-withBackground.semiTransparent .headerButton,
.layout-mobile .skinHeader.headroom:not(.osdHeader, .noHomeButtonHeader):has(.pageTitle:empty) .headerButton{
text-shadow: 1px 1px 0px #00000080;
}
/* this keeps the header elements aligned when its height is modified */
.headerTop {
-webkit-align-items: flex-end;
align-items: flex-end;
}
/* this prevents the section tabs from hiding all the way up */
.headroom--unpinned {
-webkit-transform: translateY(-3.7em);
transform: translateY(-3.7em);
}
@media (orientation: portrait) {
/* this brings the buttons and title to the center in main media page */
.layout-mobile [dir=ltr] .infoWrapper,
.layout-mobile .infoWrapper{
padding-left: 0;
}
/* Both the blocks below position the poster in main media page in the center */
.layout-mobile .detailImageContainer{
height: 12em;
display: flex;
align-items: flex-end;
justify-content: center;
padding-left: 0 !important;
}
.layout-mobile [dir=ltr] .infoWrapper:has(.card.backdropCard),
.layout-mobile .itemDetailPage.hide+.itemDetailPage .infoWrapper {
padding-left: 0;
}
.layout-mobile .detailImageContainer .card{
position: inherit !important;
transform-origin: bottom;
opacity: 0;
width: 100% !important;
max-width: 45vw;
}
.layout-mobile .detailImageContainer:has(.card.backdropCard),
.layout-mobile .itemDetailPage.hide+.itemDetailPage .detailImageContainer {
position: inherit;
display: flex;
align-items: center;
justify-content: center;
padding-left: 0 !important;
}
/* this hides the main media title when the clear logo is available*/
.layout-mobile #itemDetailPage:has(.detailLogo:not(.hide)) .infoWrapper .parentNameLast,
.layout-mobile #itemDetailPage:has(.detailLogo:not(.hide)) .infoWrapper .parentName {
z-index: 2;
display: none;
}
.layout-mobile .detailImageContainer .card.backdropCard,
.layout-mobile .itemDetailPage.hide+.itemDetailPage .detailImageContainer .card {
position: inherit !important;
transform-origin: bottom;
}
/* this shows the main media title and the poster when the clear logo is unavailable*/
.layout-mobile #itemDetailPage:has(.detailLogo.hide) .infoWrapper .parentNameLast,
.layout-mobile #itemDetailPage:has(.detailLogo.hide) .detailImageContainer .card {
opacity: 1;
}
.layout-mobile .detailImageContainer .card.backdropCard,
.layout-mobile .itemDetailPage.hide+.itemDetailPage .detailImageContainer .card {
transform: scale(1.75);
}
/* .noHomeButtonHeader .emby-tab-button[data-index="1"] .emby-button-foreground{
display: none;
}
.layout-mobile .detailImageContainer .card.portraitCard {
/* transform: scale(1.25); */
}
}
.noHomeButtonHeader .emby-tab-button[data-index="1"]:after{
content: "Watchlist";
} */