Compare commits

...

6 Commits

Author SHA1 Message Date
Samira eee19b47e0 Applied itemsContainer styling from desktop to mobile as well
Deploy to Unraid Share / copy-file (push) Successful in 5s
2026-04-29 22:58:40 +02:00
Samira a4afdf96e2 Changed horizontal padding to 5%
Deploy to Unraid Share / copy-file (push) Successful in 10s
2026-04-29 22:39:36 +02:00
Samira df38f118d3 Fixed hiding of characters left by moving around season title on mobile 2026-04-29 20:06:33 +02:00
Samira 15d3e3ba52 Matched media titles padding on mobile to homepage
Deploy to Unraid Share / copy-file (push) Successful in 10s
2026-04-29 19:23:31 +02:00
Samira 295d42f322 Refactor for clarity 2026-04-29 19:15:27 +02:00
Samira 96f9485a1e Added padding to titles on mobile 2026-04-29 19:14:55 +02:00
+35 -9
View File
@@ -90,6 +90,7 @@ div:has(> div > .emby-scroller-container) {
/* ============================== */ /* ============================== */
/* Homepage /* Homepage
/* ============================== */ /* ============================== */
/* Center sections on desktop */
.layout-desktop .sections > div { .layout-desktop .sections > div {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@@ -98,6 +99,17 @@ div:has(> div > .emby-scroller-container) {
padding-right: unset !important; padding-right: unset !important;
} }
/* Match padding to other pages on mobile */
.layout-mobile .verticalSection > * {
padding-left: 5% !important;
padding-right: 5% !important;
}
/* Remove margin in favour of flex gap */
.itemsContainer > * {
margin: unset !important;
}
/* ============================== */ /* ============================== */
/* Media detail page /* Media detail page
/* ============================== */ /* ============================== */
@@ -186,6 +198,12 @@ div:has(> div > .emby-scroller-container) {
background: rgba(0,0,0,0) !important; background: rgba(0,0,0,0) !important;
} }
/* Add padding to titles on mobile */
.layout-mobile .nameContainer > * {
padding-left: 5% !important;
padding-right: 5% !important;
}
/* Media title */ /* Media title */
.nameContainer h1 { .nameContainer h1 {
/* Position on top of logo to keep link */ /* Position on top of logo to keep link */
@@ -212,17 +230,20 @@ div:has(> div > .emby-scroller-container) {
font-size: var(--logo-height); font-size: var(--logo-height);
} }
/* Season */ /* Episode title */
.nameContainer h3.itemName.infoText.subtitle bdi { .nameContainer h3.itemName.infoText.subtitle bdi {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
place-items: center; place-items: center;
gap: 1em; gap: 1em;
font-size: larger;
/* Hide characters left by moving around season title */
text-indent: -1ch; text-indent: -1ch;
overflow: hidden; overflow: hidden;
font-size: larger;
} }
/* Season title */
.nameContainer h3.itemName.infoText.subtitle bdi [data-type="Season"] { .nameContainer h3.itemName.infoText.subtitle bdi [data-type="Season"] {
text-indent: 0; text-indent: 0;
font-size: .72em; font-size: .72em;
@@ -255,12 +276,17 @@ div:has(> div > .emby-scroller-container) {
background: rgba(0,0,0,0); background: rgba(0,0,0,0);
} }
.layout-desktop .detailPageContent { .layout-desktop .detailPageContent {
padding: unset !important;
width: 75%; width: 75%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.layout-mobile .detailPageContent > div > * {
padding-left: 5% !important;
padding-right: 5% !important;
}
.detailPageContent {
padding: unset !important;
}
/* Disable right padding */ /* Disable right padding */
.layout-desktop .detailPageContent .padded-right { .layout-desktop .detailPageContent .padded-right {
@@ -323,17 +349,17 @@ div:has(> div > .emby-scroller-container) {
/* List of seasons */ /* List of seasons */
/* Replace margin with gap */ /* Replace margin with gap */
.layout-desktop .itemsContainer { .itemsContainer {
display: flex;
gap: 1.2em; gap: 1.2em;
} }
.layout-desktop .itemsContainer > .card > .cardBox { .itemsContainer > .card > .cardBox {
margin-right: unset !important; margin-right: unset !important;
} }
.itemsContainer.padded-right:not(.padded-left) {
.layout-desktop .itemsContainer.padded-right:not(.padded-left) {
padding: unset !important; /* Remove right padding if left padding is not present */ padding: unset !important; /* Remove right padding if left padding is not present */
} }
.layout-desktop .itemsContainer.vertical-wrap { .itemsContainer.vertical-wrap {
justify-content: center; /* Only center if wrapping is enabled */ justify-content: center; /* Only center if wrapping is enabled */
} }