diff --git a/Theme/ElegantFin-theme-nightly.css b/Theme/ElegantFin-theme-nightly.css index 0c5c6a0..954a10f 100644 --- a/Theme/ElegantFin-theme-nightly.css +++ b/Theme/ElegantFin-theme-nightly.css @@ -120,6 +120,10 @@ /* use "" to enable the card hover effect [default]; use none (without quotes) to disable it */ --cardHoverEffect: ""; + + /* use 6em to enable the fading app bar (seamless); + use 5em to get the solid app bar (cleaner with border) */ + --appBarHeight: 5em; } html { @@ -3503,6 +3507,11 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child { .headerTop { -webkit-align-items: flex-end; align-items: flex-end; + padding: .6em 0; +} + +.layout-desktop .headerTop { + padding: .6em; } /* this prevents the section tabs from hiding all the way up */ @@ -3571,7 +3580,7 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child { align-self: center; -webkit-justify-content: center; justify-content: center; - margin-top: -3em; + margin-top: -3.25em; position: relative; width: auto; } @@ -3593,13 +3602,45 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child { .layout-tv .headerLeft { overflow: unset; - margin: .25em .5em; + margin: 0em .6em; } .remoteControlContent { padding: 0 var(--sidePadding) !important; } +/* this allows switching between the header styles easily */ +#reactRoot>div:nth-of-type(3) { + container-name: skinHeader; + container-type: size; + height: var(--appBarHeight); +} + +@container skinHeader (max-height: 5em) { + + .skinHeader-blurred:not(.osdHeader):not(.semiTransparent) { + backdrop-filter: var(--blurLarge); + background: var(--headerColor); + border: var(--defaultBorder); + border-width: 0 0 var(--borderWidth) 0; + } + + .skinHeader-blurred:not(.osdHeader):not(.semiTransparent)::after { + content: none; + } + + .headerTabs.sectionTabs { + height: 3.9em; + } + + .headroom--unpinned { + -webkit-transform: translateY(-3.9em); + transform: translateY(-3.9em); + } + +} + + /* Uncomment this to bring back the original ElegantFin header design - start */ /* .skinHeader-blurred:not(.osdHeader):not(.semiTransparent) { @@ -3617,4 +3658,19 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child { height: 4em; } */ -/* Uncomment this to bring back the original ElegantFin header design - end */ \ No newline at end of file +/* Uncomment this to bring back the original ElegantFin header design - end */ + +/* .headroom:not(.osdHeader):not(.semiTransparent) { + backdrop-filter: var(--blurLarge); + background: var(--headerColor); + border: var(--defaultBorder); + border-width: 0 0 var(--borderWidth) 0; +} + +.headroom:not(.osdHeader):not(.semiTransparent)::after { + content: none; +} + +.headroom .headerTabs.sectionTabs { + height: 3.9em; +} */ \ No newline at end of file