Show your theme/style

[Drake97]

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

[mally_bu]

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.

[Drake97]

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