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

Fix: Expand overview button was overlapping other elements when external link buttons were unavailable

Browse Source 
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
This commit is contained in:
lscambo13
2025-06-12 12:27:58 -07:00
parent 34bcd1f260
commit 2e15baa612
1 changed files with 67 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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