From 2e15baa612c11b2d84d131276cd5226ae63fc8e5 Mon Sep 17 00:00:00 2001 From: lscambo13 Date: Thu, 12 Jun 2025 12:27:58 -0700 Subject: [PATCH] Fix: Expand overview button was overlapping other elements when external link buttons were unavailable New: Moved headings to top in media details table New: Added backdrop blur when hovering over list items Fix: Disabled extra transition properties from the header Fix: Tweaked some margins and paddings New: Updated the backdrop animation dev: code cleanup --- Theme/ElegantFin-theme-nightly.css | 124 ++++++++++++++++------------- 1 file changed, 67 insertions(+), 57 deletions(-) diff --git a/Theme/ElegantFin-theme-nightly.css b/Theme/ElegantFin-theme-nightly.css index b4c5df7..26719ee 100644 --- a/Theme/ElegantFin-theme-nightly.css +++ b/Theme/ElegantFin-theme-nightly.css @@ -13,23 +13,23 @@ /* Base theme colors */ color-scheme: dark; --darkerGradientPoint: #111827; - --darkerGradientPointAlpha: rgba(17, 24, 39, 0.85); + --darkerGradientPointAlpha: rgba(17, 24, 39, .85); --lighterGradientPoint: #1d2635; - --lighterGradientPointAlpha: rgba(29, 38, 53, 0.85); - --headerColor: rgba(30, 40, 54, 0.8); - --drawerColor: rgba(30, 40, 54, 0.9); + --lighterGradientPointAlpha: rgba(29, 38, 53, .85); + --headerColor: rgba(30, 40, 54, .8); + --drawerColor: rgba(30, 40, 54, .9); --borderColor: hsl(214, 13%, 32%); --darkerBorderColor: hsl(214, 13%, 22%); - --lighterBorderColor: hsla(0, 0%, 100%, 0.2); + --lighterBorderColor: hsla(0, 0%, 100%, .2); --selectorBackgroundColor: rgb(55, 65, 81); - --selectorBackgroundColorAlpha: rgba(55, 65, 81, 0.5); + --selectorBackgroundColorAlpha: rgba(55, 65, 81, .5); - --activeColorAlpha: rgba(119, 91, 244, 0.9); + --activeColorAlpha: rgba(119, 91, 244, .9); --activeColor: rgb(119, 91, 244); --osdSeekBarPlayedColor: var(--textColor); - --osdSeekBarBufferedColorAlpha: rgba(128, 128, 128, 0.5); + --osdSeekBarBufferedColorAlpha: rgba(128, 128, 128, .5); --osdSeekBarThumbColor: white; --tableBodyColor: rgb(31 41 55 / 1); --uiAccentColor: rgb(117 111 226); @@ -58,13 +58,13 @@ --headerBlurMask: linear-gradient(180deg, white 50%, 85%, transparent); --cardFooterGradient: linear-gradient(0deg, rgb(0 0 0 / 90%), 40%, transparent); - --topOSDGradient: linear-gradient(180deg, hsla(0, 0%, 0%, 0.8), 45%, hsla(0, 0%, 0%, 0)); - --bottomOSDGradient: linear-gradient(0deg, hsla(0, 0%, 0%, 0.8), 45%, hsla(0, 0%, 0%, 0)); + --topOSDGradient: linear-gradient(180deg, hsla(0, 0%, 0%, .8), 45%, hsla(0, 0%, 0%, 0)); + --bottomOSDGradient: linear-gradient(0deg, hsla(0, 0%, 0%, .8), 45%, hsla(0, 0%, 0%, 0)); --hoverGradientV: linear-gradient(0deg, transparent, rgb(255 255 255 / 100%) 45%, rgb(255 255 255 / 100%) 55%, transparent); --hoverGradientH: linear-gradient(90deg, transparent, rgb(255 255 255 / 100%) 45%, rgb(255 255 255 / 100%) 55%, transparent); - --ditheringMask: url(https://grainy-gradients.vercel.app/noise.svg); + /* --ditheringMask: url(https://grainy-gradients.vercel.app/noise.svg); */ --itemBackdropMask: linear-gradient(180deg, rgba(0, 0, 0, .8), 75%, transparent); /* login page customizations */ @@ -91,7 +91,7 @@ --blurLargest: blur(20px); /* --shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12), 0 3px 1px -2px rgba(0, 0, 0, .2); */ - --shadow: .1em .1em .15em hsla(0, 0%, 0%, 0.3); + --shadow: .1em .1em .15em hsla(0, 0%, 0%, .3); /* to revert to old icons, use 'Material Icons'*/ --iconPack: 'Material Icons Round'; @@ -265,7 +265,7 @@ html { } .card.squareCard[data-type="TvChannel"] .cardImageContainer.cardContent { - background-color: rgba(255, 255, 255, 0.2); + background-color: rgba(255, 255, 255, .2); } .cardImageContainer>.cardDefaultText { @@ -308,7 +308,7 @@ html { transform: scale(1); } -.cardScalable:has(.cardOverlayContainer .cardOverlayButton:hover)>.cardImageContainer { +.cardScalable:has(.cardOverlayButton:hover)>.cardImageContainer { transform: scale(1); } @@ -383,7 +383,7 @@ html { bottom: .75em; right: .5em; display: var(--extraCardButtonsVisibility); - transform: scale(.8); + transform: scale(.85); z-index: 1; } @@ -399,8 +399,8 @@ html { .layout-mobile .cardOverlayButton-br, [dir=ltr] .layout-mobile .cardOverlayButton-br { - bottom: .5em; - right: .5em; + bottom: .25em; + right: .25em; } .layout-mobile .portraitCard .cardOverlayButton-br:not([data-action="menu"]), @@ -959,7 +959,7 @@ h2 { .tagline { font-size: 1.3em; font-weight: 400; - margin-bottom: 0; + margin: 0; font-style: italic; color: var(--textColor); } @@ -1013,19 +1013,21 @@ html { @keyframes animScaleUp { from { - transform: scale(1); + transform: scale(1) translateY(-2.5%); opacity: 0; + filter: var(--blurLarge); } to { - transform: scale(1.1); + transform: scale(1) translateY(0%); opacity: 1; + filter: blur(0); } } .backdropImageFadeIn { transform-origin: bottom center; - animation: animScaleUp 3s ease-out forwards; + animation: animScaleUp 1s ease-out forwards; } .appfooter { @@ -1079,7 +1081,7 @@ html { .itemProgressBar:not(.backgroundProgress, .playbackProgress, .transcodingProgress) { backdrop-filter: var(--blurLarge); background-color: var(--osdSeekBarBufferedColorAlpha) !important; - height: 0.35em; + height: .35em; overflow: hidden; border-radius: var(--largeRadius); } @@ -1133,7 +1135,7 @@ progress+span { .mdl-spinner__circle { border-color: var(--textColor); border-style: inset; - border-width: 0.25em; + border-width: .25em; } .mdl-slider-container { @@ -1154,7 +1156,7 @@ progress+span { height: .4em; margin-top: -.2em; background: var(--osdSeekBarBufferedColorAlpha); - transition: all 0.2s linear; + transition: .2s linear; } .sliderContainer:active .mdl-slider-background-flex { @@ -1244,7 +1246,7 @@ progress+span { .btnHeaderSave.button-flat { color: var(--uiAccentColor) !important; - gap: 0.3em; + gap: .3em; border-radius: var(--smallRadius); } @@ -1254,7 +1256,7 @@ progress+span { .button-flat:active { color: unset; - background-color: rgba(255, 255, 255, 0.2); + background-color: rgba(255, 255, 255, .2); } .playstatebutton-icon-played { @@ -1307,7 +1309,7 @@ progress+span { .detailsGroupItem { margin: 0 !important; justify-content: space-between; - padding: 0.5em 0.9em; + padding: .5em .9em; align-items: baseline; } @@ -1416,7 +1418,7 @@ progress+span { .overview-expand.emby-button { padding: 0; - margin-block: 1.5em; + margin-block: 1.3em; color: transparent; } @@ -1446,6 +1448,14 @@ progress+span { height: 0; } +.detailSectionContent:has(.itemExternalLinks.hide) .overview-controls { + height: 1em; +} + +#seriesAirTime { + margin-top: .5em; +} + .itemMiscInfo { align-items: flex-end !important; } @@ -1525,7 +1535,7 @@ progress+span { .formDialogHeaderTitle { margin-inline: 0 !important; text-align: center; - padding: 0 0.5em !important; + padding: 0 .5em !important; } .formDialogFooter:not(.formDialogFooter-clear.formDialogFooter-flex)>.formDialogFooterItem { @@ -1555,7 +1565,7 @@ progress+span { .emby-checkbox:checked+span+.checkboxOutline { border-radius: var(--smallerRadius) !important; - box-shadow: inset 0em 7em 10em 20px rgba(0, 0, 0, 0.8); + box-shadow: inset 0em 7em 10em 20px rgba(0, 0, 0, .8); background: transparent; border-color: white; border-style: solid; @@ -1861,15 +1871,12 @@ div[data-type="PhotoAlbum"] .play_arrow:before { .btnPlay>.detailButton-content::after { padding-inline: 1ch; - /* padding-right: .5em; */ place-content: center; } .layout-mobile [dir=ltr] .mainDetailButtons { flex-wrap: wrap; padding-inline: 1.25em; - /* center content on desktop */ - /* justify-content: center; */ } @media (min-width: 100em) { @@ -1978,7 +1985,7 @@ div[data-role=controlgroup] a.ui-btn-active { } [dir=ltr] .listItem:not(.actionSheetMenuItem, .childrenItemsContainer .listItem, .activityLogListWidget .listItem) { - padding: 0.375em !important; + padding: .375em !important; } [dir=ltr] .listItem:not(.actionSheetMenuItem, .childrenItemsContainer .listItem, .activityLogListWidget .listItem):not(:last-child) { @@ -2042,7 +2049,7 @@ div[data-role=controlgroup] a.ui-btn-active { .listItem:active, .navMenuOption:active { - background: rgba(255, 255, 255, 0.125); + background: rgba(255, 255, 255, .125); } .listItem-border { @@ -2136,7 +2143,7 @@ div[data-role=controlgroup] a.ui-btn-active { .detailsGroupItem, .trackSelections .selectContainer { max-width: unset !important; - align-items: center; + align-items: baseline; } .selectArrowContainer { @@ -2189,7 +2196,7 @@ div[data-role=controlgroup] a.ui-btn-active { .alphaPickerButton { font-family: monospace; margin: .15em; - color: rgba(255, 255, 255, 0.25); + color: rgba(255, 255, 255, .25); } .alphaPickerButton-selected { @@ -2339,7 +2346,7 @@ div[data-role=controlgroup] a.ui-btn-active { } .skip-button:active { - background-color: rgba(245, 245, 245, 0.7); + background-color: rgba(245, 245, 245, .7); box-shadow: none; } @@ -2366,7 +2373,7 @@ div[data-role=controlgroup] a.ui-btn-active { } .actionSheetMenuItem.emby-button:has(.listItemIcon.material-icons.check[style*="hidden"]):hover { - background-color: rgba(255, 255, 255, 0.125); + background-color: rgba(255, 255, 255, .125); } .emby-select-withcolor:hover:not(.emby-select[disabled], :focus), @@ -2387,7 +2394,7 @@ div[data-role=controlgroup] a.ui-btn-active { } .button-flat:hover { - background-color: rgba(255, 255, 255, 0.2); + background-color: rgba(255, 255, 255, .2); color: white; } @@ -2402,12 +2409,13 @@ div[data-role=controlgroup] a.ui-btn-active { .listItem:hover, .navMenuOption:hover { - background: rgba(255, 255, 255, 0.125); + background: rgba(255, 255, 255, .125); + backdrop-filter: var(--blurLargest); } .searchfields-icon:hover, .inputContainer .emby-input-iconbutton:hover { - color: rgba(255, 255, 255, 0.8); + color: rgba(255, 255, 255, .8); } #scenesContent .cardScalable:hover { @@ -2473,7 +2481,7 @@ div[data-role=controlgroup] a.ui-btn-active { } .inputContainer .emby-input-iconbutton { - color: rgba(255, 255, 255, 0.5); + color: rgba(255, 255, 255, .5); margin-left: -2.5em; background-color: transparent !important; } @@ -2488,12 +2496,12 @@ div[data-role=controlgroup] a.ui-btn-active { margin-left: -1.75em; margin-bottom: 0; border-radius: var(--largeRadius); - color: rgba(255, 255, 255, 0.5); + color: rgba(255, 255, 255, .5); } .searchfields-icon:active, .inputContainer .emby-input-iconbutton:active { - color: rgba(255, 255, 255, 0.8); + color: rgba(255, 255, 255, .8); } .searchFields>.searchFieldsInner { @@ -2542,8 +2550,7 @@ div[data-role=controlgroup] a.ui-btn-active { } .itemName.originalTitle { - /* font-weight: 400; */ - padding-block: .5em; + padding-block: .25em; color: var(--dimTextColor); } @@ -2667,13 +2674,13 @@ table:not(.MuiTable-root.MuiTable-stickyHeader) { ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child { /* ! Don't change these units. They are rem because that is standard for MUI */ - gap: 0.5rem; + gap: .5rem; } .playerStats, .iconOsd { border-radius: var(--largeRadius); - background-color: rgba(69, 69, 69, 0.69); + background-color: rgba(69, 69, 69, .69); backdrop-filter: var(--blurDefault); } @@ -2712,7 +2719,7 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child { #loginPage .padded-left.padded-right.padded-bottom-page { width: 28em; - background: rgba(30, 40, 54, 0.7); + background: rgba(30, 40, 54, .7); padding: 2em 2em 1em 2em !important; border-radius: var(--largerRadius); backdrop-filter: var(--blurDefault); @@ -2856,7 +2863,7 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child { /* animation: rainbowGlow 8s linear infinite; */ /* z-index: -1; */ /* behind the image */ - /* opacity: 0.8; */ + /* opacity: .8; */ } /* Make sure the container is positioned relative so ::before works */ @@ -2963,7 +2970,7 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child { } #dialogToc { - background-color: rgba(0, 0, 0, 0.5); + background-color: rgba(0, 0, 0, .5); max-height: unset; max-width: unset; } @@ -3027,13 +3034,17 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child { /* transition-property: background-color, backdrop-filter, transform, border-width; */ } +.headroom { + transition: transform .5s; +} + .skinHeader-blurred:not(.osdHeader) { backdrop-filter: none; background-color: transparent; border: none; border-width: 0 0 var(--borderWidth) 0; - transition: .5s ease-in-out; - transition-property: background-color, backdrop-filter, transform, border-width; + /* transition: .5s ease-in-out; */ + /* transition-property: background-color, backdrop-filter, transform, border-width; */ background: var(--headerColorGradient); padding-top: .75em; } @@ -3063,8 +3074,8 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child { background-color: transparent; background: none; border: none; - transition: .5s ease-in-out; - transition-property: background-color, backdrop-filter, transform, border-width; + /* transition: .5s ease-in-out; */ + /* transition-property: background-color, backdrop-filter, transform, border-width; */ } .skinHeader-withBackground.semiTransparent .headerButton, @@ -3147,7 +3158,6 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense>div:first-child { align-self: center; -webkit-justify-content: center; justify-content: center; - /* margin-top: -4.3em; */ margin-top: -3em; position: relative; width: auto;