aleabodo/SleekFin
1
0
Fork 0
Code Issues Pull Requests Actions 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 */
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;