boris/ElegantFin
1
0
Fork 0
mirror of https://github.com/lscambo13/ElegantFin.git synced 2026-02-11 08:45:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix: Improved responsiveness of header tabs and page padding

Browse Source 
- Prevented header tabs from shifting up too early on TVs
- Updated the page padding-top to adjust in sync with header tabs position
- Made the page top padding aware of the header height to prevent overlaps
This commit is contained in:
lscambo13
2025-12-30 21:38:02 +05:30
parent c665c54f53
commit 8112d4401b
1 changed files with 26 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3825,13 +3825,6 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
overflow: visible !important; overflow: visible !important;
} }
.layout-tv .sectionTabs {
/* this prevents the section tabs from being off-center in the music library
after I set the overflow to visible to fix visual glitches */
width: 70%;
margin-right: 2em;
}
.sectionTabs .emby-tab-button { .sectionTabs .emby-tab-button {
display: inline-flex; display: inline-flex;
margin: 0.25em 0.5em; margin: 0.25em 0.5em;
@@ -3849,6 +3842,11 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
background-color: var(--textColor); background-color: var(--textColor);
} }
/* this increases page top padding when section tabs are expanded */
.libraryPage:not(.noSecondaryNavPage) {
padding-top: calc(var(--appBarHeight) * 2 + 0.5em) !important;
}
@media (min-width: 75em) { @media (min-width: 75em) {
.sectionTabs { .sectionTabs {
-webkit-align-items: center; -webkit-align-items: center;
@@ -3857,14 +3855,15 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
align-self: center; align-self: center;
-webkit-justify-content: center; -webkit-justify-content: center;
justify-content: center; justify-content: center;
/* this collapses the section tabs expanded earlier than the default 100em max-width */
margin-top: calc(-1 * var(--appBarHeight)); margin-top: calc(-1 * var(--appBarHeight));
position: relative; position: relative;
width: auto; width: auto;
} }
/* this reduces top page padding when section tabs are minimised */ /* this reduces page top padding when section tabs are collapsed */
.libraryPage:not(.noSecondaryNavPage):not(.layout-tv .libraryPage) { .libraryPage:not(.noSecondaryNavPage) {
padding-top: 6.8em !important; padding-top: calc(var(--appBarHeight) + 0.5em) !important;
} }
/* this fixes the header like on desktop on larger tablet screens */ /* this fixes the header like on desktop on larger tablet screens */
@@ -3874,11 +3873,28 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
} }
} }
@media (min-width: 100em) {
/* this reduces top padding when section tabs are collapsed on TVs */
.layout-tv .libraryPage:not(.noSecondaryNavPage) {
padding-top: calc(var(--appBarHeight) + 0.5em) !important;
}
}
@media (max-width: 100em) { @media (max-width: 100em) {
/* this makes the font size consistent */ /* this makes the font size consistent */
.sectionTabs { .sectionTabs {
font-size: 100%; font-size: 100%;
} }
/* this keeps the section tabs expanded on TVs under 100em width */
.layout-tv .sectionTabs {
margin-top: unset;
}
/* this increases page top padding when section tabs are expanded on TVs*/
.layout-tv .libraryPage:not(.noSecondaryNavPage) {
padding-top: calc(var(--appBarHeight) * 2 + 0.5em) !important;
}
} }
@media (max-width: 75em) { @media (max-width: 75em) {
@@ -3892,16 +3908,6 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
} }
} }
/* this increased top page padding when section tabs are maximised */
.libraryPage:not(.noSecondaryNavPage) {
padding-top: 9.5em !important;
}
/* this limits top page padding when section tabs always on TVs */
.layout-tv .libraryPage:not(.noSecondaryNavPage) {
padding-top: 6em !important;
}
.layout-tv .headerLeft { .layout-tv .headerLeft {
overflow: unset; overflow: unset;
margin: 0em 0.6em; margin: 0em 0.6em;