Jellyfin Forum
Show your theme/style - Printable Version

+- Jellyfin Forum (https://forum.jellyfin.org)
+-- Forum: Support (https://forum.jellyfin.org/f-support)
+--- Forum: Themes & Styles (https://forum.jellyfin.org/f-themes-styles)
+--- Thread: Show your theme/style (/t-show-your-theme-style)

Pages: 1 2

Show your theme/style - Drake97 - 2024-11-14

Hello,

Could you share how you have your Jellyfin configured visually and in style ?
I am asking this because I realized that I am looking for a good theme on the internet, that is nice, minimalist and user friendly, however, there are themes that have 3 good things and 1 bad, there are others that have one good and 3 bad and so on, I have not found one that has everything good.

What imports do you use with your Jellyfin ? Is there a possibility that you show images and/or links to the Custom CSS section to get some ideas ?

Thanks in advance

RE: Show your theme/style - mally_bu - 2024-11-17

Here's my very messy one :

Code:
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/scyfin-theme.css');
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/disable-static-drawer.css');
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-snow.css');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'); body, h1, h2, h3, h4 {
  font-family: 'Quicksand', sans-serif;
}

.emby-textarea {
  font-family: monospace;
  font-size: 10pt;
}

.trackSelections {
      display: none;
}
.itemTags {
      display: none;
}
.itemExternalLinks {
      display: none;
}

.btnPlayTrailer{
      display: none;
}

.btnPlaystate {
      display: none;
}

.btnPreviousChapter {
      display: none;
}

.btnNextChapter {
      display: none;
}

.iconOsd {
      display: none;
}

.videoOsdBottom .buttons .mediaInfoCriticRating {
    display: none;
}

.videoOsdBottom .buttons .mediaInfoItem {
  display: none;
}

.mediaInfoCriticRatingFresh, .mediaInfoCriticRatingRotten {
  display: none;
}

.countIndicator, .fullSyncIndicator, .mediaSourceIndicator, .playedIndicator {
    background: #fff;
}

.layout-desktop .mainDetailButtons .btnPlay::after {
  content: "Lire" !important;
}

#skipIntro {
    &.upNextContainer {
        background-color: transparent !important;
        backdrop-filter: none !important;
    }
    .emby-button {
        border-radius:100px !important;
        background-color: rgba(0, 0, 0, 0.7) !important;
        &:hover, &:focus {
            background-color: rgba(151, 151, 151, 0.7) !important;
        }
    }
}
#skipIntro .emby-button:hover {
                background: rgb(var(--accent));
                box-shadow: 0 0 8px rgba(151, 151, 151, 0.6);
                filter: brightness(1.2);
}
#skipIntro .emby-button:focus {
                background: rgb(var(--accent));
                box-shadow: 0 0 8px rgba(151, 151, 151, 0.6);
            }

.mdl-slider::-webkit-slider-thumb {
              background: #fff;
}


.detailRibbon {
    background: linear-gradient(to top, var(--primary-background-color), transparent) !important;
}
.backdropContainer {
  height: 80vh;
}

.layout-desktop .detailPageContent {
  padding-left: 3.3% !important;
  padding-right: 3.3% !important;
}

[dir=ltr] .padded-right,
[dir=rtl] .padded-left {
  padding-right:0%;
}

.mainDetailButtons {
  margin-right: 3.3%;
}

.emby-scroller {
    margin-right: 0% !important;
}

@media (max-width: 1599px) {
  .layout-desktop .headerRight {
    margin-right: 15px !important;
  }
  .layout-desktop .headerLeft {
    margin-left: 15px !important;
  }
.headerRight {
  position: absolute !important;
  right: 0px !important;
}
}

.layout-mobile .itemBackdrop {
  margin-top: 0px;
}

.layout-mobile .headroom--top .headerRight ,
.layout-mobile .headroom--not-top:has(.headerTabs.sectionTabs:not(.hide)) .headerRight {
    background: rgba(255, 255, 255, 0) !important;
    backdrop-filter: none !important;
}

.layout-mobile .headroom--top,
.layout-mobile .headroom--not-top:has(.headerTabs.sectionTabs:not(.hide)) {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)) !important; !important;
    transition: background .5s ease-in-out !important;
}

.layout-mobile .detailSectionContent {
  padding: 0px 20px !important;
}

.layout-mobile .headerRight {
    background-color: var(--primary-background-transparent) !important;
    backdrop-filter: none !important;
}
.headerTabs {
  backdrop-filter: blur !important;
}

.layout-mobile .itemMiscInfo,
.layout-mobile .itemName,
.layout-mobile .parentName {
  text-align:left;
  justify-content: left;
}


[dir=ltr] .padded-left {
  padding-left:5%;
}

.mainDetailButtons {
  margin-right: 5%;
}

/* Fix for group section labels */
.detailsGroupItem .label, .trackSelections .selectContainer .selectLabel {
    min-width: 95px;
}

.layout-mobile .headroom--not-top {
    background: rgba(0, 0, 0, 0.41) !important;
    transition: backdrop-filter .5s ease-in-out !important;
}

/* Moz */
.mdl-slider::-moz-range-thumb {
    height: 8px !important;
    width: 8px !important;
    border-radius: 100px !important;
}

.mdl-slider-hoverthumb:hover::-moz-range-thumb {
    transform: scale(2);
}

.mdl-slider-background-flex {
    height: 9px !important;
    background: hsla(0,0%,100%,.15) !important;
    backdrop-filter: blur(15px);
}

.videoOsdBottom {
  padding-bottom: 0.65em;
}

.cardOverlayButton-br {
  bottom: initial;
  top: 0;
}

.playedIndicator {
  background: #fff !important;
  color: #222;
}

.listItemImage-large {
  border-radius: 10px;
}

.layout-desktop .detailSectionContent {
  padding: 20px 20px 0px 20px !important;
}

.detailLogo {
  height: 22vh;
  width: 22vw;
}

@media (max-width: 68.75em) {
  .detailLogo {
    display: block;
  }
}

[dir="ltr"] .listItem {
  padding: 10px 10px 10px 10px;
  text-align: left;
}

[dir="ltr"] .cardIndicators {
  right: 0;
  left: .225em;
  padding: 3px;
}

.countIndicator, .playedIndicator {
  border-radius: 11px;
  width: fit-content;
  padding-left: 6px;
  padding-right: 6px;
}

.countIndicator {
  color: #000000e7 !important
}

@media (hover: hover) and (pointer: fine) {
  .paper-icon-button-light:hover:not(:disabled) {
    color: rgb(255, 255, 255) !important;
    transform: scale(1.2);
  }
}

@media (hover: hover) and (pointer: fine) {
  .paper-icon-button-light:hover:not(:disabled) {
    color: var(--primary-accent-color) !important;
    background-color: transparent !important;
  }
}

.alphaPicker {
  display: none;
}

.material-icons.sort_by_alpha::before {
  content: "\e164";
}

.material-icons.view_comfortable::before, .material-icons.view_comfy::before {
  content: "\e5c3";
}

[dir="ltr"] .padded-left {
  padding-left: 4%;
}
[dir="ltr"] .padded-right, [dir="rtl"] .padded-left {
  padding-right: 4%;
}

[dir="ltr"] .itemsContainer > .card > .cardBox {
  margin-left: .6em;
  margin-right: .6em;
}

.layout-desktop .headerTabs {
  margin-left: 0px !important;
}

.sectionTabs {
  background: transparent !important;
}

.selectionCommandsPanel{
  background-color: rgb(21, 21, 21) !important;
}

/* .pageTitleWithDefaultLogo {
    background-image: url('imageURL');
} */

@media (max-width: 1599px) {
  .layout-desktop .headerTabs {
    margin-top: 0px !important;
  }
}

.skip-button {
  font-family: inherit;
  background-color: var(--primary-background-transparent) !important;
  backdrop-filter: blur(9px);
  font-weight: normal;
  color: #fff;
  transition: opacity ease-in 0.2s;
}

.skip-button:hover {
  filter: brightness(1.2);
  transition: opacity ease-in 0.2s;
}

.listItemImage {
  background-size: cover !important;
}
.layout-desktop .skinHeader, .layout-tv .skinHeader {
  padding-top: 0.8em !important;
}
It's scyfin theme from loof2736 but some parts are edited to feel more consistent. I also removed the things I don't need like the codec informations.

   

RE: Show your theme/style - Drake97 - 2024-11-19

(2024-11-17, 09:58 PM)mally_bu Wrote: Here's my very messy one :

Code:
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/scyfin-theme.css');
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/disable-static-drawer.css');
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-snow.css');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'); body, h1, h2, h3, h4 {
  font-family: 'Quicksand', sans-serif;
}

.emby-textarea {
  font-family: monospace;
  font-size: 10pt;
}

.trackSelections {
      display: none;
}
.itemTags {
      display: none;
}
.itemExternalLinks {
      display: none;
}

.btnPlayTrailer{
      display: none;
}

.btnPlaystate {
      display: none;
}

.btnPreviousChapter {
      display: none;
}

.btnNextChapter {
      display: none;
}

.iconOsd {
      display: none;
}

.videoOsdBottom .buttons .mediaInfoCriticRating {
    display: none;
}

.videoOsdBottom .buttons .mediaInfoItem {
  display: none;
}

.mediaInfoCriticRatingFresh, .mediaInfoCriticRatingRotten {
  display: none;
}

.countIndicator, .fullSyncIndicator, .mediaSourceIndicator, .playedIndicator {
    background: #fff;
}

.layout-desktop .mainDetailButtons .btnPlay::after {
  content: "Lire" !important;
}

#skipIntro {
    &.upNextContainer {
        background-color: transparent !important;
        backdrop-filter: none !important;
    }
    .emby-button {
        border-radius:100px !important;
        background-color: rgba(0, 0, 0, 0.7) !important;
        &:hover, &:focus {
            background-color: rgba(151, 151, 151, 0.7) !important;
        }
    }
}
#skipIntro .emby-button:hover {
                background: rgb(var(--accent));
                box-shadow: 0 0 8px rgba(151, 151, 151, 0.6);
                filter: brightness(1.2);
}
#skipIntro .emby-button:focus {
                background: rgb(var(--accent));
                box-shadow: 0 0 8px rgba(151, 151, 151, 0.6);
            }

.mdl-slider::-webkit-slider-thumb {
              background: #fff;
}


.detailRibbon {
    background: linear-gradient(to top, var(--primary-background-color), transparent) !important;
}
.backdropContainer {
  height: 80vh;
}

.layout-desktop .detailPageContent {
  padding-left: 3.3% !important;
  padding-right: 3.3% !important;
}

[dir=ltr] .padded-right,
[dir=rtl] .padded-left {
  padding-right:0%;
}

.mainDetailButtons {
  margin-right: 3.3%;
}

.emby-scroller {
    margin-right: 0% !important;
}

@media (max-width: 1599px) {
  .layout-desktop .headerRight {
    margin-right: 15px !important;
  }
  .layout-desktop .headerLeft {
    margin-left: 15px !important;
  }
.headerRight {
  position: absolute !important;
  right: 0px !important;
}
}

.layout-mobile .itemBackdrop {
  margin-top: 0px;
}

.layout-mobile .headroom--top .headerRight ,
.layout-mobile .headroom--not-top:has(.headerTabs.sectionTabs:not(.hide)) .headerRight {
    background: rgba(255, 255, 255, 0) !important;
    backdrop-filter: none !important;
}

.layout-mobile .headroom--top,
.layout-mobile .headroom--not-top:has(.headerTabs.sectionTabs:not(.hide)) {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)) !important; !important;
    transition: background .5s ease-in-out !important;
}

.layout-mobile .detailSectionContent {
  padding: 0px 20px !important;
}

.layout-mobile .headerRight {
    background-color: var(--primary-background-transparent) !important;
    backdrop-filter: none !important;
}
.headerTabs {
  backdrop-filter: blur !important;
}

.layout-mobile .itemMiscInfo,
.layout-mobile .itemName,
.layout-mobile .parentName {
  text-align:left;
  justify-content: left;
}


[dir=ltr] .padded-left {
  padding-left:5%;
}

.mainDetailButtons {
  margin-right: 5%;
}

/* Fix for group section labels */
.detailsGroupItem .label, .trackSelections .selectContainer .selectLabel {
    min-width: 95px;
}

.layout-mobile .headroom--not-top {
    background: rgba(0, 0, 0, 0.41) !important;
    transition: backdrop-filter .5s ease-in-out !important;
}

.material-icons.fast_rewind::before {
  content: "\e059";
}

.material-icons.fast_forward::before {
  content: "\e057";
}

.material-icons.audiotrack::before {
  content: "\e91f";
}

/* Moz */
.mdl-slider::-moz-range-thumb {
    height: 8px !important;
    width: 8px !important;
    border-radius: 100px !important;
}

.mdl-slider-hoverthumb:hover::-moz-range-thumb {
    transform: scale(2);
}

.mdl-slider-background-flex {
    height: 9px !important;
    background: hsla(0,0%,100%,.15) !important;
    backdrop-filter: blur(15px);
}

.videoOsdBottom {
  padding-bottom: 0.65em;
}

.cardOverlayButton-br {
  bottom: initial;
  top: 0;
}

.playedIndicator {
  background: #fff !important;
  color: #222;
}

.listItemImage-large {
  border-radius: 10px;
}

.layout-desktop .detailSectionContent {
  padding: 20px 20px 0px 20px !important;
}

.detailLogo {
  height: 22vh;
  width: 22vw;
}

@media (max-width: 68.75em) {
  .detailLogo {
    display: block;
  }
}

[dir="ltr"] .listItem {
  padding: 10px 10px 10px 10px;
  text-align: left;
}

[dir="ltr"] .cardIndicators {
  right: 0;
  left: .225em;
  padding: 3px;
}

.countIndicator, .playedIndicator {
  border-radius: 11px;
  width: fit-content;
  padding-left: 6px;
  padding-right: 6px;
}

.countIndicator {
  color: #000000e7 !important
}

@media (hover: hover) and (pointer: fine) {
  .paper-icon-button-light:hover:not(:disabled) {
    color: rgb(255, 255, 255) !important;
    transform: scale(1.2);
  }
}

@media (hover: hover) and (pointer: fine) {
  .paper-icon-button-light:hover:not(:disabled) {
    color: var(--primary-accent-color) !important;
    background-color: transparent !important;
  }
}

.alphaPicker {
  display: none;
}

.material-icons.sort_by_alpha::before {
  content: "\e164";
}

.material-icons.view_comfortable::before, .material-icons.view_comfy::before {
  content: "\e5c3";
}

[dir="ltr"] .padded-left {
  padding-left: 4%;
}
[dir="ltr"] .padded-right, [dir="rtl"] .padded-left {
  padding-right: 4%;
}

[dir="ltr"] .itemsContainer > .card > .cardBox {
  margin-left: .6em;
  margin-right: .6em;
}

.layout-desktop .headerTabs {
  margin-left: 0px !important;
}

.sectionTabs {
  background: transparent !important;
}

.selectionCommandsPanel{
  background-color: rgb(21, 21, 21) !important;
}

/* .pageTitleWithDefaultLogo {
    background-image: url(https://custom_image.png);
} */

@media (max-width: 1599px) {
  .layout-desktop .headerTabs {
    margin-top: 0px !important;
  }
}
It's scyfin theme from loof2736 but some parts are edited to feel more consistent.


I gave it a try and it looks amazing, good customization.
I did change the font to Jetbrains-Mono, which is a bit more to my liking, thanks

RE: Show your theme/style - Iskelderon - 2024-11-23

I like to tweak themes to display more information in the available space:
Code:
@import url("https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@latest/finimalism-just-black.css");

/* Disable scrolling of home cards */
@media all and (min-width: 50em) {
  .homePage .emby-scroller,
  #specialsCollapsible .emby-scroller,
  #musicVideosCollapsible.emby-scroller,
  #scenesCollapsible.emby-scroller {
    margin-right: 0;
  }
  .homePage .emby-scrollbuttons,
  #specialsCollapsible .emby-scrollbuttons,
  #musicVideosCollapsible .emby-scrollbuttons,
  #scenesCollapsible .emby-scrollbuttons  {
    display: none;
  }

  .homePage .itemsContainer,
  #specialsCollapsible .itemsContainer,
  #musicVideosCollapsible .itemsContainer,
  #scenesCollapsible .itemsContainer {
    flex-wrap: wrap;
  }

  #specialsCollapsible .overflowBackdropCard,
  #musicVideosCollapsible .overflowBackdropCard,
  #scenesCollapsible .overflowBackdropCard {
    max-width: 13.4vw !important;
  }

/* More home cards */
.overflowBackdropCard, .overflowSmallBackdropCard {
    max-width: 18.5vw !important;
}

/* Identify search results */
.detailPagePrimaryContent  .selectContainer select {
    min-width: 50%
}

.identificationSearchResultList .scalableCard{
min-width: 33%;
}

div[data-title="AV"]  .card.backdropCard {
    min-width: 24%
}

.layout-desktop div[data-index="1"] .overflowPortraitCard {
    width: 12.3em;
}

.homePage .verticalSection.section1 .itemsContainer .card.overflowBackdropCard,
.homePage .verticalSection.section2 .itemsContainer .card.overflowBackdropCard,
.homePage .verticalSection.section3 .itemsContainer .card.overflowBackdropCard,
.homePage .verticalSection.section4 .itemsContainer .card.overflowBackdropCard {
    width: 22.9em !important;
}

.bannerCard  .cardScalable {
    min-height: 12em;
}

.layout-desktop #childrenContent .listItemBodyText.secondary.listItem-overview.listItemBodyText {
    transition: filter 0.8s, opacity 0.8s;
    filter: blur(0px);
    opacity: 0.7;
    max-height: 9em;
    overflow-y: auto;
}



/* Description: Crunchyroll subtitle style */

.htmlvideoplayer::cue {
    font-family: Trebuchet MS !important;
   
    color: white !important; /* Text color */
    --stroke-color: black; /* Outline color */
    --stroke-width: 4px;
    --drop-shadow-offset: 2px;
   
    text-shadow:
        calc(var(--stroke-width) * 1) calc(var(--stroke-width) * 0) 0 var(--stroke-color),
        calc(var(--stroke-width) * 0.9239) calc(var(--stroke-width) * 0.3827) 0 var(--stroke-color),
        calc(var(--stroke-width) * 0.7071) calc(var(--stroke-width) * 0.7071) 0 var(--stroke-color),
        calc(var(--stroke-width) * 0.3827) calc(var(--stroke-width) * 0.9239) 0 var(--stroke-color),
        calc(var(--stroke-width) * 0) calc(var(--stroke-width) * 1) 0 var(--stroke-color),
        calc(var(--stroke-width) * -0.3827) calc(var(--stroke-width) * 0.9239) 0 var(--stroke-color),
        calc(var(--stroke-width) * -0.7071) calc(var(--stroke-width) * 0.7071) 0 var(--stroke-color),
        calc(var(--stroke-width) * -0.9239) calc(var(--stroke-width) * 0.3827) 0 var(--stroke-color),
        calc(var(--stroke-width) * -1) calc(var(--stroke-width) * 0) 0 var(--stroke-color),
        calc(var(--stroke-width) * -0.9239) calc(var(--stroke-width) * -0.3827) 0 var(--stroke-color),
        calc(var(--stroke-width) * -0.7071) calc(var(--stroke-width) * -0.7071) 0 var(--stroke-color),
        calc(var(--stroke-width) * -0.3827) calc(var(--stroke-width) * -0.9239) 0 var(--stroke-color),
        calc(var(--stroke-width) * 0) calc(var(--stroke-width) * -1) 0 var(--stroke-color),
        calc(var(--stroke-width) * 0.3827) calc(var(--stroke-width) * -0.9239) 0 var(--stroke-color),
        calc(var(--stroke-width) * 0.7071) calc(var(--stroke-width) * -0.7071) 0 var(--stroke-color),
        calc(var(--stroke-width) * 0.9239) calc(var(--stroke-width) * -0.3827) 0 var(--stroke-color),
        calc(var(--stroke-width) * 0.5) calc(var(--stroke-width) * 0.866) 0 var(--stroke-color),
        calc(var(--stroke-width) * 0.866) calc(var(--stroke-width) * 0.5) 0 var(--stroke-color),
        calc(var(--stroke-width) * 0.5) calc(var(--stroke-width) * -0.866) 0 var(--stroke-color),
        calc(var(--stroke-width) * -0.5) calc(var(--stroke-width) * -0.866) 0 var(--stroke-color),
        calc(var(--stroke-width) * -0.866) calc(var(--stroke-width) * -0.5) 0 var(--stroke-color),
        calc(var(--stroke-width) * -0.5) calc(var(--stroke-width) * 0.866) 0 var(--stroke-color),
        calc(var(--stroke-width) * 0.866) calc(var(--stroke-width) * -0.5) 0 var(--stroke-color),
        calc(var(--stroke-width) * -0.866) calc(var(--stroke-width) * 0.5) 0 var(--stroke-color),
        calc(var(--stroke-width) + var(--drop-shadow-offset)) calc(var(--stroke-width) + var(--drop-shadow-offset)) 15px var(--stroke-color) !important;
}


RE: Show your theme/style - Drake97 - 2024-11-26

(2024-11-23, 11:40 AM)Iskelderon Wrote: I like to tweak themes to display more information in the available space:
Code:
@import url("https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@latest/finimalism-just-black.css");

/* Disable scrolling of home cards */
@media all and (min-width: 50em) {
  .homePage .emby-scroller,
  #specialsCollapsible .emby-scroller,
  #musicVideosCollapsible.emby-scroller,
  #scenesCollapsible.emby-scroller {
    margin-right: 0;
  }
  .homePage .emby-scrollbuttons,
  #specialsCollapsible .emby-scrollbuttons,
  #musicVideosCollapsible .emby-scrollbuttons,
  #scenesCollapsible .emby-scrollbuttons  {
    display: none;
  }

  .homePage .itemsContainer,
  #specialsCollapsible .itemsContainer,
  #musicVideosCollapsible .itemsContainer,
  #scenesCollapsible .itemsContainer {
    flex-wrap: wrap;
  }

  #specialsCollapsible .overflowBackdropCard,
  #musicVideosCollapsible .overflowBackdropCard,
  #scenesCollapsible .overflowBackdropCard {
    max-width: 13.4vw !important;
  }

/* More home cards */
.overflowBackdropCard, .overflowSmallBackdropCard {
    max-width: 18.5vw !important;
}

/* Identify search results */
.detailPagePrimaryContent  .selectContainer select {
    min-width: 50%
}

.identificationSearchResultList .scalableCard{
min-width: 33%;
}

div[data-title="AV"]  .card.backdropCard {
    min-width: 24%
}

.layout-desktop div[data-index="1"] .overflowPortraitCard {
    width: 12.3em;
}

.homePage .verticalSection.section1 .itemsContainer .card.overflowBackdropCard,
.homePage .verticalSection.section2 .itemsContainer .card.overflowBackdropCard,
.homePage .verticalSection.section3 .itemsContainer .card.overflowBackdropCard,
.homePage .verticalSection.section4 .itemsContainer .card.overflowBackdropCard {
    width: 22.9em !important;
}

.bannerCard  .cardScalable {
    min-height: 12em;
}

.layout-desktop #childrenContent .listItemBodyText.secondary.listItem-overview.listItemBodyText {
    transition: filter 0.8s, opacity 0.8s;
    filter: blur(0px);
    opacity: 0.7;
    max-height: 9em;
    overflow-y: auto;
}



/* Description: Crunchyroll subtitle style */

.htmlvideoplayer::cue {
    font-family: Trebuchet MS !important;
   
    color: white !important; /* Text color */
    --stroke-color: black; /* Outline color */
    --stroke-width: 4px;
    --drop-shadow-offset: 2px;
   
    text-shadow:
        calc(var(--stroke-width) * 1) calc(var(--stroke-width) * 0) 0 var(--stroke-color),
        calc(var(--stroke-width) * 0.9239) calc(var(--stroke-width) * 0.3827) 0 var(--stroke-color),
        calc(var(--stroke-width) * 0.7071) calc(var(--stroke-width) * 0.7071) 0 var(--stroke-color),
        calc(var(--stroke-width) * 0.3827) calc(var(--stroke-width) * 0.9239) 0 var(--stroke-color),
        calc(var(--stroke-width) * 0) calc(var(--stroke-width) * 1) 0 var(--stroke-color),
        calc(var(--stroke-width) * -0.3827) calc(var(--stroke-width) * 0.9239) 0 var(--stroke-color),
        calc(var(--stroke-width) * -0.7071) calc(var(--stroke-width) * 0.7071) 0 var(--stroke-color),
        calc(var(--stroke-width) * -0.9239) calc(var(--stroke-width) * 0.3827) 0 var(--stroke-color),
        calc(var(--stroke-width) * -1) calc(var(--stroke-width) * 0) 0 var(--stroke-color),
        calc(var(--stroke-width) * -0.9239) calc(var(--stroke-width) * -0.3827) 0 var(--stroke-color),
        calc(var(--stroke-width) * -0.7071) calc(var(--stroke-width) * -0.7071) 0 var(--stroke-color),
        calc(var(--stroke-width) * -0.3827) calc(var(--stroke-width) * -0.9239) 0 var(--stroke-color),
        calc(var(--stroke-width) * 0) calc(var(--stroke-width) * -1) 0 var(--stroke-color),
        calc(var(--stroke-width) * 0.3827) calc(var(--stroke-width) * -0.9239) 0 var(--stroke-color),
        calc(var(--stroke-width) * 0.7071) calc(var(--stroke-width) * -0.7071) 0 var(--stroke-color),
        calc(var(--stroke-width) * 0.9239) calc(var(--stroke-width) * -0.3827) 0 var(--stroke-color),
        calc(var(--stroke-width) * 0.5) calc(var(--stroke-width) * 0.866) 0 var(--stroke-color),
        calc(var(--stroke-width) * 0.866) calc(var(--stroke-width) * 0.5) 0 var(--stroke-color),
        calc(var(--stroke-width) * 0.5) calc(var(--stroke-width) * -0.866) 0 var(--stroke-color),
        calc(var(--stroke-width) * -0.5) calc(var(--stroke-width) * -0.866) 0 var(--stroke-color),
        calc(var(--stroke-width) * -0.866) calc(var(--stroke-width) * -0.5) 0 var(--stroke-color),
        calc(var(--stroke-width) * -0.5) calc(var(--stroke-width) * 0.866) 0 var(--stroke-color),
        calc(var(--stroke-width) * 0.866) calc(var(--stroke-width) * -0.5) 0 var(--stroke-color),
        calc(var(--stroke-width) * -0.866) calc(var(--stroke-width) * 0.5) 0 var(--stroke-color),
        calc(var(--stroke-width) + var(--drop-shadow-offset)) calc(var(--stroke-width) + var(--drop-shadow-offset)) 15px var(--stroke-color) !important;
}

Hello, I liked the customization, especially the one of the subtitles, but I have a doubt, what parameter could I modify so that my media use the entire screen instead of leaving that space with nothing (marked with red crosses) ?

[Image: hCda7FG.png]

I mean that rows of 4 above and 4 below are displayed

thx in advance

RE: Show your theme/style - Iskelderon - 2024-11-26

That usually happens if the containers are just slightly too big to fit another one. Make the value for the home cards slightly smaller until the row gets filled.

RE: Show your theme/style - Ssiswent - 2024-11-27

(2024-11-17, 09:58 PM)mally_bu Wrote: Here's my very messy one :

Code:
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/scyfin-theme.css');
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/disable-static-drawer.css');
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-snow.css');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'); body, h1, h2, h3, h4 {
  font-family: 'Quicksand', sans-serif;
}

.emby-textarea {
  font-family: monospace;
  font-size: 10pt;
}

.trackSelections {
      display: none;
}
.itemTags {
      display: none;
}
.itemExternalLinks {
      display: none;
}

.btnPlayTrailer{
      display: none;
}

.btnPlaystate {
      display: none;
}

.btnPreviousChapter {
      display: none;
}

.btnNextChapter {
      display: none;
}

.iconOsd {
      display: none;
}

.videoOsdBottom .buttons .mediaInfoCriticRating {
    display: none;
}

.videoOsdBottom .buttons .mediaInfoItem {
  display: none;
}

.mediaInfoCriticRatingFresh, .mediaInfoCriticRatingRotten {
  display: none;
}

.countIndicator, .fullSyncIndicator, .mediaSourceIndicator, .playedIndicator {
    background: #fff;
}

.layout-desktop .mainDetailButtons .btnPlay::after {
  content: "Lire" !important;
}

#skipIntro {
    &.upNextContainer {
        background-color: transparent !important;
        backdrop-filter: none !important;
    }
    .emby-button {
        border-radius:100px !important;
        background-color: rgba(0, 0, 0, 0.7) !important;
        &:hover, &:focus {
            background-color: rgba(151, 151, 151, 0.7) !important;
        }
    }
}
#skipIntro .emby-button:hover {
                background: rgb(var(--accent));
                box-shadow: 0 0 8px rgba(151, 151, 151, 0.6);
                filter: brightness(1.2);
}
#skipIntro .emby-button:focus {
                background: rgb(var(--accent));
                box-shadow: 0 0 8px rgba(151, 151, 151, 0.6);
            }

.mdl-slider::-webkit-slider-thumb {
              background: #fff;
}


.detailRibbon {
    background: linear-gradient(to top, var(--primary-background-color), transparent) !important;
}
.backdropContainer {
  height: 80vh;
}

.layout-desktop .detailPageContent {
  padding-left: 3.3% !important;
  padding-right: 3.3% !important;
}

[dir=ltr] .padded-right,
[dir=rtl] .padded-left {
  padding-right:0%;
}

.mainDetailButtons {
  margin-right: 3.3%;
}

.emby-scroller {
    margin-right: 0% !important;
}

@media (max-width: 1599px) {
  .layout-desktop .headerRight {
    margin-right: 15px !important;
  }
  .layout-desktop .headerLeft {
    margin-left: 15px !important;
  }
.headerRight {
  position: absolute !important;
  right: 0px !important;
}
}

.layout-mobile .itemBackdrop {
  margin-top: 0px;
}

.layout-mobile .headroom--top .headerRight ,
.layout-mobile .headroom--not-top:has(.headerTabs.sectionTabs:not(.hide)) .headerRight {
    background: rgba(255, 255, 255, 0) !important;
    backdrop-filter: none !important;
}

.layout-mobile .headroom--top,
.layout-mobile .headroom--not-top:has(.headerTabs.sectionTabs:not(.hide)) {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)) !important; !important;
    transition: background .5s ease-in-out !important;
}

.layout-mobile .detailSectionContent {
  padding: 0px 20px !important;
}

.layout-mobile .headerRight {
    background-color: var(--primary-background-transparent) !important;
    backdrop-filter: none !important;
}
.headerTabs {
  backdrop-filter: blur !important;
}

.layout-mobile .itemMiscInfo,
.layout-mobile .itemName,
.layout-mobile .parentName {
  text-align:left;
  justify-content: left;
}


[dir=ltr] .padded-left {
  padding-left:5%;
}

.mainDetailButtons {
  margin-right: 5%;
}

/* Fix for group section labels */
.detailsGroupItem .label, .trackSelections .selectContainer .selectLabel {
    min-width: 95px;
}

.layout-mobile .headroom--not-top {
    background: rgba(0, 0, 0, 0.41) !important;
    transition: backdrop-filter .5s ease-in-out !important;
}

.material-icons.fast_rewind::before {
  content: "\e059";
}

.material-icons.fast_forward::before {
  content: "\e057";
}

.material-icons.audiotrack::before {
  content: "\e91f";
}

/* Moz */
.mdl-slider::-moz-range-thumb {
    height: 8px !important;
    width: 8px !important;
    border-radius: 100px !important;
}

.mdl-slider-hoverthumb:hover::-moz-range-thumb {
    transform: scale(2);
}

.mdl-slider-background-flex {
    height: 9px !important;
    background: hsla(0,0%,100%,.15) !important;
    backdrop-filter: blur(15px);
}

.videoOsdBottom {
  padding-bottom: 0.65em;
}

.cardOverlayButton-br {
  bottom: initial;
  top: 0;
}

.playedIndicator {
  background: #fff !important;
  color: #222;
}

.listItemImage-large {
  border-radius: 10px;
}

.layout-desktop .detailSectionContent {
  padding: 20px 20px 0px 20px !important;
}

.detailLogo {
  height: 22vh;
  width: 22vw;
}

@media (max-width: 68.75em) {
  .detailLogo {
    display: block;
  }
}

[dir="ltr"] .listItem {
  padding: 10px 10px 10px 10px;
  text-align: left;
}

[dir="ltr"] .cardIndicators {
  right: 0;
  left: .225em;
  padding: 3px;
}

.countIndicator, .playedIndicator {
  border-radius: 11px;
  width: fit-content;
  padding-left: 6px;
  padding-right: 6px;
}

.countIndicator {
  color: #000000e7 !important
}

@media (hover: hover) and (pointer: fine) {
  .paper-icon-button-light:hover:not(:disabled) {
    color: rgb(255, 255, 255) !important;
    transform: scale(1.2);
  }
}

@media (hover: hover) and (pointer: fine) {
  .paper-icon-button-light:hover:not(:disabled) {
    color: var(--primary-accent-color) !important;
    background-color: transparent !important;
  }
}

.alphaPicker {
  display: none;
}

.material-icons.sort_by_alpha::before {
  content: "\e164";
}

.material-icons.view_comfortable::before, .material-icons.view_comfy::before {
  content: "\e5c3";
}

[dir="ltr"] .padded-left {
  padding-left: 4%;
}
[dir="ltr"] .padded-right, [dir="rtl"] .padded-left {
  padding-right: 4%;
}

[dir="ltr"] .itemsContainer > .card > .cardBox {
  margin-left: .6em;
  margin-right: .6em;
}

.layout-desktop .headerTabs {
  margin-left: 0px !important;
}

.sectionTabs {
  background: transparent !important;
}

.selectionCommandsPanel{
  background-color: rgb(21, 21, 21) !important;
}

/* .pageTitleWithDefaultLogo {
    background-image: url(https://custom_image.png);
} */

@media (max-width: 1599px) {
  .layout-desktop .headerTabs {
    margin-top: 0px !important;
  }
}
It's scyfin theme from loof2736 but some parts are edited to feel more consistent.

Thank you for sharing, but can I ask why there are so many CSS features not working on my Jellyfin? (Background, transparent style and so on, I have enabled Settings -> Display -> Backdrops option)

RE: Show your theme/style - bpawnz - 2024-12-18

This theme is actually excellent.. good job!

I did some modifications to your theme and cleaned up some things a bit.. All though I 100% based it off the look you were going for.  If ur interested see below. I added some animations, mouse over effects, and colors in certain area.

Also do you know how to style playlist in grid format? I cant seem to make that happen?  just something i personally want for my collection

Code:
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/scyfin-theme.css');
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/disable-static-drawer.css');
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-snow.css');

/* Custom Google Font with more variety */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&family=Orbitron:wght@400;500;700&display=swap');

/* Root Variables for Custom Color Scheme */
:root {
    --custom-primary-color: #3498db;
    --custom-secondary-color: #2ecc71;
    --custom-accent-color: #e74c3c;
    --custom-background-dark: #1a1a2e;
    --custom-background-light: #16213e;
}

/* Enhanced Global Styling */
body, h1, h2, h3, h4 {
    font-family: 'Quicksand', sans-serif;
    letter-spacing: 0.5px;
    text-rendering: optimizeLegibility;
}

.emby-textarea {
    font-family: monospace;
    font-size: 10pt;
}

/* Unique Hover and Interaction Effects */
@media (hover: hover) and (pointer: fine) {
    .paper-icon-button-light:hover:not(:disabled) {
        color: var(--custom-secondary-color) !important;
        transform: scale(1.2) rotate(5deg);
        transition: all 0.3s ease;
    }
}

/* Enhanced Button Styles */
.emby-button {
    transition: all 0.3s ease;
    border-radius: 15px !important;
    text-transform: uppercase;
    font-weight: 600;
}

#skipIntro {
    &.upNextContainer {
        background-color: transparent !important;
        backdrop-filter: none !important;
    }

    .emby-button {
        border-radius: 100px !important;
        background-color: rgba(0, 0, 0, 0.7) !important;

        &:hover, &:focus {
            background-color: rgba(151, 151, 151, 0.7) !important;
        }
    }
}

#skipIntro .emby-button:hover {
    background: rgb(var(--accent));
    box-shadow: 0 0 8px rgba(151, 151, 151, 0.6);
    filter: brightness(1.2);
    transform: translateY(-3px);
}

#skipIntro .emby-button:focus {
    background: rgb(var(--accent));
    box-shadow: 0 0 8px rgba(151, 151, 151, 0.6);
}

/* Modernized Backdrop and Detail Views */
.backdropContainer {
    height: 85vh;
    filter: brightness(0.8);
    transition: filter 0.3s ease;
}

.backdropContainer:hover {
    filter: brightness(1);
}

.detailRibbon {
    background: linear-gradient(to top, var(--custom-background-dark), transparent) !important;
}

.layout-desktop .detailPageContent {
    padding-left: 3.3% !important;
    padding-right: 3.3% !important;
}

/* Enhanced Login Page */
#loginPage {
    background: linear-gradient(45deg, var(--custom-background-dark), var(--custom-background-light)) !important;
    background-size: 400% 400% !important;
    animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}

/* Card and Item Styling */
.listItemImage-large {
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}

.listItemImage-large:hover {
    transform: scale(1.05);
}

/* Slider and Progress Enhancements */
.mdl-slider::-webkit-slider-thumb {
    background: #fff;
}

.mdl-slider-background-flex {
    height: 9px !important;
    background: hsla(0,0%,100%,.15) !important;
    backdrop-filter: blur(15px);
}

/* Responsive Adjustments */
@media (max-width: 1599px) {
    .playlistContainer {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 15px;
    }
}

/* Additional Unique Touches */
.countIndicator, .fullSyncIndicator, .mediaSourceIndicator, .playedIndicator {
    background: #fff;
    font-family: 'Orbitron', sans-serif;
}

.layout-desktop .mainDetailButtons .btnPlay::after {
    content: "Lire" !important;
}

/* Hide Unnecessary Elements */
.trackSelections,
.itemTags,
.itemExternalLinks,
.btnPlayTrailer,
.btnPlaystate,
.btnPreviousChapter,
.btnNextChapter,
.iconOsd,
.videoOsdBottom .buttons .mediaInfoCriticRating,
.videoOsdBottom .buttons .mediaInfoItem,
.mediaInfoCriticRatingFresh,
.mediaInfoCriticRatingRotten,
.alphaPicker {
    display: none;
}

/* Additional Mobile and Responsive Styles */
.layout-mobile .itemBackdrop {
    margin-top: 0px;
}

.layout-mobile .detailSectionContent {
    padding: 0px 20px !important;
}

.headerTabs {
    backdrop-filter: blur !important;
}

/* Other existing styles from the original theme */
.mainDetailButtons {
    margin-right: 3.3%;
}

.emby-scroller {
    margin-right: 0% !important;
}

/* Additional specific styles */
.selectionCommandsPanel {
    background-color: rgb(21, 21, 21) !important;
}

.sectionTabs {
    background: transparent !important;
}

/* Login Background */
#loginPage {
    background: url(https://i.imgur.com/EIu7XYn.png) !important;
    background-size: cover !important;
    background-position: center !important;
}


RE: Show your theme/style - mally_bu - 2024-12-18

(2024-11-27, 08:39 AM)Ssiswent Wrote:
(2024-11-17, 09:58 PM)mally_bu Wrote: Here's my very messy one :

Code:
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/scyfin-theme.css');
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/disable-static-drawer.css');
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-snow.css');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'); body, h1, h2, h3, h4 {
  font-family: 'Quicksand', sans-serif;
}

.emby-textarea {
  font-family: monospace;
  font-size: 10pt;
}

.trackSelections {
      display: none;
}
.itemTags {
      display: none;
}
.itemExternalLinks {
      display: none;
}

.btnPlayTrailer{
      display: none;
}

.btnPlaystate {
      display: none;
}

.btnPreviousChapter {
      display: none;
}

.btnNextChapter {
      display: none;
}

.iconOsd {
      display: none;
}

.videoOsdBottom .buttons .mediaInfoCriticRating {
    display: none;
}

.videoOsdBottom .buttons .mediaInfoItem {
  display: none;
}

.mediaInfoCriticRatingFresh, .mediaInfoCriticRatingRotten {
  display: none;
}

.countIndicator, .fullSyncIndicator, .mediaSourceIndicator, .playedIndicator {
    background: #fff;
}

.layout-desktop .mainDetailButtons .btnPlay::after {
  content: "Lire" !important;
}

#skipIntro {
    &.upNextContainer {
        background-color: transparent !important;
        backdrop-filter: none !important;
    }
    .emby-button {
        border-radius:100px !important;
        background-color: rgba(0, 0, 0, 0.7) !important;
        &:hover, &:focus {
            background-color: rgba(151, 151, 151, 0.7) !important;
        }
    }
}
#skipIntro .emby-button:hover {
                background: rgb(var(--accent));
                box-shadow: 0 0 8px rgba(151, 151, 151, 0.6);
                filter: brightness(1.2);
}
#skipIntro .emby-button:focus {
                background: rgb(var(--accent));
                box-shadow: 0 0 8px rgba(151, 151, 151, 0.6);
            }

.mdl-slider::-webkit-slider-thumb {
              background: #fff;
}


.detailRibbon {
    background: linear-gradient(to top, var(--primary-background-color), transparent) !important;
}
.backdropContainer {
  height: 80vh;
}

.layout-desktop .detailPageContent {
  padding-left: 3.3% !important;
  padding-right: 3.3% !important;
}

[dir=ltr] .padded-right,
[dir=rtl] .padded-left {
  padding-right:0%;
}

.mainDetailButtons {
  margin-right: 3.3%;
}

.emby-scroller {
    margin-right: 0% !important;
}

@media (max-width: 1599px) {
  .layout-desktop .headerRight {
    margin-right: 15px !important;
  }
  .layout-desktop .headerLeft {
    margin-left: 15px !important;
  }
.headerRight {
  position: absolute !important;
  right: 0px !important;
}
}

.layout-mobile .itemBackdrop {
  margin-top: 0px;
}

.layout-mobile .headroom--top .headerRight ,
.layout-mobile .headroom--not-top:has(.headerTabs.sectionTabs:not(.hide)) .headerRight {
    background: rgba(255, 255, 255, 0) !important;
    backdrop-filter: none !important;
}

.layout-mobile .headroom--top,
.layout-mobile .headroom--not-top:has(.headerTabs.sectionTabs:not(.hide)) {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)) !important; !important;
    transition: background .5s ease-in-out !important;
}

.layout-mobile .detailSectionContent {
  padding: 0px 20px !important;
}

.layout-mobile .headerRight {
    background-color: var(--primary-background-transparent) !important;
    backdrop-filter: none !important;
}
.headerTabs {
  backdrop-filter: blur !important;
}

.layout-mobile .itemMiscInfo,
.layout-mobile .itemName,
.layout-mobile .parentName {
  text-align:left;
  justify-content: left;
}


[dir=ltr] .padded-left {
  padding-left:5%;
}

.mainDetailButtons {
  margin-right: 5%;
}

/* Fix for group section labels */
.detailsGroupItem .label, .trackSelections .selectContainer .selectLabel {
    min-width: 95px;
}

.layout-mobile .headroom--not-top {
    background: rgba(0, 0, 0, 0.41) !important;
    transition: backdrop-filter .5s ease-in-out !important;
}

.material-icons.fast_rewind::before {
  content: "\e059";
}

.material-icons.fast_forward::before {
  content: "\e057";
}

.material-icons.audiotrack::before {
  content: "\e91f";
}

/* Moz */
.mdl-slider::-moz-range-thumb {
    height: 8px !important;
    width: 8px !important;
    border-radius: 100px !important;
}

.mdl-slider-hoverthumb:hover::-moz-range-thumb {
    transform: scale(2);
}

.mdl-slider-background-flex {
    height: 9px !important;
    background: hsla(0,0%,100%,.15) !important;
    backdrop-filter: blur(15px);
}

.videoOsdBottom {
  padding-bottom: 0.65em;
}

.cardOverlayButton-br {
  bottom: initial;
  top: 0;
}

.playedIndicator {
  background: #fff !important;
  color: #222;
}

.listItemImage-large {
  border-radius: 10px;
}

.layout-desktop .detailSectionContent {
  padding: 20px 20px 0px 20px !important;
}

.detailLogo {
  height: 22vh;
  width: 22vw;
}

@media (max-width: 68.75em) {
  .detailLogo {
    display: block;
  }
}

[dir="ltr"] .listItem {
  padding: 10px 10px 10px 10px;
  text-align: left;
}

[dir="ltr"] .cardIndicators {
  right: 0;
  left: .225em;
  padding: 3px;
}

.countIndicator, .playedIndicator {
  border-radius: 11px;
  width: fit-content;
  padding-left: 6px;
  padding-right: 6px;
}

.countIndicator {
  color: #000000e7 !important
}

@media (hover: hover) and (pointer: fine) {
  .paper-icon-button-light:hover:not(:disabled) {
    color: rgb(255, 255, 255) !important;
    transform: scale(1.2);
  }
}

@media (hover: hover) and (pointer: fine) {
  .paper-icon-button-light:hover:not(:disabled) {
    color: var(--primary-accent-color) !important;
    background-color: transparent !important;
  }
}

.alphaPicker {
  display: none;
}

.material-icons.sort_by_alpha::before {
  content: "\e164";
}

.material-icons.view_comfortable::before, .material-icons.view_comfy::before {
  content: "\e5c3";
}

[dir="ltr"] .padded-left {
  padding-left: 4%;
}
[dir="ltr"] .padded-right, [dir="rtl"] .padded-left {
  padding-right: 4%;
}

[dir="ltr"] .itemsContainer > .card > .cardBox {
  margin-left: .6em;
  margin-right: .6em;
}

.layout-desktop .headerTabs {
  margin-left: 0px !important;
}

.sectionTabs {
  background: transparent !important;
}

.selectionCommandsPanel{
  background-color: rgb(21, 21, 21) !important;
}

/* .pageTitleWithDefaultLogo {
    background-image: url(https://custom_image.png);
} */

@media (max-width: 1599px) {
  .layout-desktop .headerTabs {
    margin-top: 0px !important;
  }
}
It's scyfin theme from loof2736 but some parts are edited to feel more consistent.

Thank you for sharing, but can I ask why there are so many CSS features not working on my Jellyfin? (Background, transparent style and so on, I have enabled Settings -> Display -> Backdrops option)

I prefer when background images are disabled so I didn't really considered them when making my edits. You might have to remove some stuff like the gradients or the backdrop container height.

RE: Show your theme/style - bpawnz - 2024-12-19

(2024-12-18, 11:40 PM)mally_bu Wrote:
(2024-11-27, 08:39 AM)Ssiswent Wrote:
(2024-11-17, 09:58 PM)mally_bu Wrote: Here's my very messy one :

Code:
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/scyfin-theme.css');
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/disable-static-drawer.css');
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-snow.css');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'); body, h1, h2, h3, h4 {
  font-family: 'Quicksand', sans-serif;
}

.emby-textarea {
  font-family: monospace;
  font-size: 10pt;
}

.trackSelections {
      display: none;
}
.itemTags {
      display: none;
}
.itemExternalLinks {
      display: none;
}

.btnPlayTrailer{
      display: none;
}

.btnPlaystate {
      display: none;
}

.btnPreviousChapter {
      display: none;
}

.btnNextChapter {
      display: none;
}

.iconOsd {
      display: none;
}

.videoOsdBottom .buttons .mediaInfoCriticRating {
    display: none;
}

.videoOsdBottom .buttons .mediaInfoItem {
  display: none;
}

.mediaInfoCriticRatingFresh, .mediaInfoCriticRatingRotten {
  display: none;
}

.countIndicator, .fullSyncIndicator, .mediaSourceIndicator, .playedIndicator {
    background: #fff;
}

.layout-desktop .mainDetailButtons .btnPlay::after {
  content: "Lire" !important;
}

#skipIntro {
    &.upNextContainer {
        background-color: transparent !important;
        backdrop-filter: none !important;
    }
    .emby-button {
        border-radius:100px !important;
        background-color: rgba(0, 0, 0, 0.7) !important;
        &:hover, &:focus {
            background-color: rgba(151, 151, 151, 0.7) !important;
        }
    }
}
#skipIntro .emby-button:hover {
                background: rgb(var(--accent));
                box-shadow: 0 0 8px rgba(151, 151, 151, 0.6);
                filter: brightness(1.2);
}
#skipIntro .emby-button:focus {
                background: rgb(var(--accent));
                box-shadow: 0 0 8px rgba(151, 151, 151, 0.6);
            }

.mdl-slider::-webkit-slider-thumb {
              background: #fff;
}


.detailRibbon {
    background: linear-gradient(to top, var(--primary-background-color), transparent) !important;
}
.backdropContainer {
  height: 80vh;
}

.layout-desktop .detailPageContent {
  padding-left: 3.3% !important;
  padding-right: 3.3% !important;
}

[dir=ltr] .padded-right,
[dir=rtl] .padded-left {
  padding-right:0%;
}

.mainDetailButtons {
  margin-right: 3.3%;
}

.emby-scroller {
    margin-right: 0% !important;
}

@media (max-width: 1599px) {
  .layout-desktop .headerRight {
    margin-right: 15px !important;
  }
  .layout-desktop .headerLeft {
    margin-left: 15px !important;
  }
.headerRight {
  position: absolute !important;
  right: 0px !important;
}
}

.layout-mobile .itemBackdrop {
  margin-top: 0px;
}

.layout-mobile .headroom--top .headerRight ,
.layout-mobile .headroom--not-top:has(.headerTabs.sectionTabs:not(.hide)) .headerRight {
    background: rgba(255, 255, 255, 0) !important;
    backdrop-filter: none !important;
}

.layout-mobile .headroom--top,
.layout-mobile .headroom--not-top:has(.headerTabs.sectionTabs:not(.hide)) {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)) !important; !important;
    transition: background .5s ease-in-out !important;
}

.layout-mobile .detailSectionContent {
  padding: 0px 20px !important;
}

.layout-mobile .headerRight {
    background-color: var(--primary-background-transparent) !important;
    backdrop-filter: none !important;
}
.headerTabs {
  backdrop-filter: blur !important;
}

.layout-mobile .itemMiscInfo,
.layout-mobile .itemName,
.layout-mobile .parentName {
  text-align:left;
  justify-content: left;
}


[dir=ltr] .padded-left {
  padding-left:5%;
}

.mainDetailButtons {
  margin-right: 5%;
}

/* Fix for group section labels */
.detailsGroupItem .label, .trackSelections .selectContainer .selectLabel {
    min-width: 95px;
}

.layout-mobile .headroom--not-top {
    background: rgba(0, 0, 0, 0.41) !important;
    transition: backdrop-filter .5s ease-in-out !important;
}

.material-icons.fast_rewind::before {
  content: "\e059";
}

.material-icons.fast_forward::before {
  content: "\e057";
}

.material-icons.audiotrack::before {
  content: "\e91f";
}

/* Moz */
.mdl-slider::-moz-range-thumb {
    height: 8px !important;
    width: 8px !important;
    border-radius: 100px !important;
}

.mdl-slider-hoverthumb:hover::-moz-range-thumb {
    transform: scale(2);
}

.mdl-slider-background-flex {
    height: 9px !important;
    background: hsla(0,0%,100%,.15) !important;
    backdrop-filter: blur(15px);
}

.videoOsdBottom {
  padding-bottom: 0.65em;
}

.cardOverlayButton-br {
  bottom: initial;
  top: 0;
}

.playedIndicator {
  background: #fff !important;
  color: #222;
}

.listItemImage-large {
  border-radius: 10px;
}

.layout-desktop .detailSectionContent {
  padding: 20px 20px 0px 20px !important;
}

.detailLogo {
  height: 22vh;
  width: 22vw;
}

@media (max-width: 68.75em) {
  .detailLogo {
    display: block;
  }
}

[dir="ltr"] .listItem {
  padding: 10px 10px 10px 10px;
  text-align: left;
}

[dir="ltr"] .cardIndicators {
  right: 0;
  left: .225em;
  padding: 3px;
}

.countIndicator, .playedIndicator {
  border-radius: 11px;
  width: fit-content;
  padding-left: 6px;
  padding-right: 6px;
}

.countIndicator {
  color: #000000e7 !important
}

@media (hover: hover) and (pointer: fine) {
  .paper-icon-button-light:hover:not(:disabled) {
    color: rgb(255, 255, 255) !important;
    transform: scale(1.2);
  }
}

@media (hover: hover) and (pointer: fine) {
  .paper-icon-button-light:hover:not(:disabled) {
    color: var(--primary-accent-color) !important;
    background-color: transparent !important;
  }
}

.alphaPicker {
  display: none;
}

.material-icons.sort_by_alpha::before {
  content: "\e164";
}

.material-icons.view_comfortable::before, .material-icons.view_comfy::before {
  content: "\e5c3";
}

[dir="ltr"] .padded-left {
  padding-left: 4%;
}
[dir="ltr"] .padded-right, [dir="rtl"] .padded-left {
  padding-right: 4%;
}

[dir="ltr"] .itemsContainer > .card > .cardBox {
  margin-left: .6em;
  margin-right: .6em;
}

.layout-desktop .headerTabs {
  margin-left: 0px !important;
}

.sectionTabs {
  background: transparent !important;
}

.selectionCommandsPanel{
  background-color: rgb(21, 21, 21) !important;
}

/* .pageTitleWithDefaultLogo {
    background-image: url(https://custom_image.png);
} */

@media (max-width: 1599px) {
  .layout-desktop .headerTabs {
    margin-top: 0px !important;
  }
}
It's scyfin theme from loof2736 but some parts are edited to feel more consistent.

Thank you for sharing, but can I ask why there are so many CSS features not working on my Jellyfin? (Background, transparent style and so on, I have enabled Settings -> Display -> Backdrops option)

I prefer when background images are disabled so I didn't really considered them when making my edits. You might have to remove some stuff like the gradients or the backdrop container height.

I am running the linuxserver docker build and everything is working perfect. https://docs.linuxserver.io/images/docker-jellyfin

strange you are having differences. how are u currently deploying Jellyfin?