Jellyfin Forum
♾️ Finity - 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: ♾️ Finity (/t-%E2%99%BE%EF%B8%8F-finity)

♾️ Finity - prism2001 - 2025-05-14

https://github.com/prism2001/finity

my friend and i have spent several weeks working on our own jellyfin theme, and i think it's finally at a point where it's ready to be tested by a wider group of people. please check the github repo for more info, such as theme installation, updates, etc. - additional setup is required for all the features of this theme

there is still polishing to be done here and there, and some areas of the UI haven't been completely finalized yet, but most of the main styling is present. PRs are welcomed - whether it be to make things more efficient, performant, or to polish the overall theme. this is our first theme so things may not be perfect

some important notes:
- this theme is meant to be used in conjunction with Jellyfin's included "Dark" user theme (found in your user settings). using any other built-in Jellyfin theme is NOT supported at this time, and will almost certainly look terrible.
- music libraries are not supported at this time, and at the moment I have no immediate plans to work on this. however, I will gladly look at any PRs for them.
- make sure to enable blurred placeholders for images and disable backdrops in your user display settings. not doing so may cause several important aspects of the theme to not render correctly (such as the gradient mask for show backdrops)

screenshots:

home screen (featured content)
[Image: home_featured.png?raw=true]

home screen (media drawers)
[Image: home_drawers.png?raw=true]

show - season page
[Image: show_season.png?raw=true]

movie page
[Image: movie.png?raw=true]

minimal theme - home page
[Image: minimal_home_drawers.png?raw=true]

minimal theme installation:
Code:
@import url("https://cdn.jsdelivr.net/gh/prism2001/finity@main/minimal/finity-minimal.css");


tested on 10.10.7

RE: ♾️ Finity - Rethgash - 2025-05-15

Beautiful theme.

Just one change:

- Add a scroll menu for Subtitles and Audio.

Code:
html {
  box-sizing: border-box;
  font-family: var(--font-family-base) !important;
  margin: 0;
  padding: 0;
  background-color: var(--theme-background-color);
  <div class="scroll-menu">
    <button class="scroll-menu-item">Option 1</button>
    <button class="scroll-menu-item">Option 2</button>
    <button class="scroll-menu-item">Option 3</button>
    <button class="scroll-menu-item">Option 4</button>
    <button class="scroll-menu-item">Option 5</button>
    <!-- Add more items as needed; scrolling will activate if content exceeds max-height -->
</div>
}


Code:
/* Center specific context menus (e.g., Cast, SyncPlay) and adjust their width */
.dialogContainer .focuscontainer.dialog.actionsheet-not-fullscreen.actionSheet.opened.centeredDialog:not(:has(button[data-id="edit"], button[data-id="delete"], button[data-id="addtocollection"], button[data-id="refresh"], button[data-id="download"])),
.dialogContainer .focuscontainer.dialog.actionsheet-not-fullscreen.actionSheet.opened.syncPlayGroupMenu {
    position: fixed !important;
    top: 77% !important;
    left: 85% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    box-sizing: border-box;
    border-radius: var(--theme-roundness-large) !important;
    background-color: var(--header-bg) !important;

    height: auto;
    max-height: 40vh;
    overflow-y: auto;
    padding: 8px 0; /* Padding for menu items */

    /* --- Responsive Width --- */
    /* Default for larger screens (tablets and desktops) */
    width: clamp(340px, 30vw, 600px) !important;

    /* Custom scrollbar styling */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: var(--scrollbar-thumb, rgba(255, 255, 255, 0.5)) var(--scrollbar-track, transparent); /* Firefox */

    /* Webkit browsers (Chrome, Safari, Edge) */
    &::-webkit-scrollbar {
        width: 8px;
    }

    &::-webkit-scrollbar-track {
        background: var(--scrollbar-track, transparent);
    }

    &::-webkit-scrollbar-thumb {
        background: var(--scrollbar-thumb, rgba(255, 255, 255, 0.5));
        border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb:hover {
        background: var(--scrollbar-thumb-hover, rgba(255, 255, 255, 0.7));
    }

    /* Scroll menu container */
    .scroll-menu {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    /* Scroll menu items */
    .scroll-menu-item {
        display: block;
        padding: 12px 16px;
        color: var(--text-color, #fff);
        text-decoration: none;
        background: none;
        border: none;
        width: 100%;
        text-align: left;
        cursor: pointer;
        transition: background-color 0.2s ease;
        font-size: 1rem;
    }

    .scroll-menu-item:hover {
        background-color: var(--hover-bg, rgba(255, 255, 255, 0.1));
    }

    /* Optional: Active/selected state */
    .scroll-menu-item.active {
        background-color: var(--active-bg, rgba(255, 255, 255, 0.2));
    }
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .dialogContainer .focuscontainer.dialog.actionsheet-not-fullscreen.actionSheet.opened.centeredDialog,
    .dialogContainer .focuscontainer.dialog.actionsheet-not-fullscreen.actionSheet.opened.syncPlayGroupMenu {
        width: clamp(280px, 80vw, 400px) !important;
        top: 50% !important;
        left: 50% !important;
    }

    .scroll-menu-item {
        padding: 10px 12px;
        font-size: 0.9rem;
    }
}


RE: ♾️ Finity - prism2001 - 2025-05-15

(2025-05-15, 12:32 AM)Rethgash Wrote: Beautiful theme.

Just one change:

- Add a scroll menu for Subtitles and Audio.

i just checked and there's already scroll bars for subs and audio - both on the episode page, as well as the web player. unless this is for some different menu or browser? (i mainly test on FF, sometimes having a peek with Edge and the Jellyfin Media Player app)

[Image: 9x9xk4.png]
[Image: 68u432.png]

also your changes seem to break the positioning of the context menus, instead of being centered they show up near the bottom right of the screen

[Image: 13r9po.png]

RE: ♾️ Finity - Rethgash - 2025-05-15

My bad, my file didn't have enough subtitles for me to see the scroll  Upside-down-face

(This is personal one) 

I don't like to see the name of the file (again) in "My Media"

Code:
/* Hide card library name*/
@media all and (min-width: 50em) {
  #specialsCollapsible .emby-scroller,
  #musicVideosCollapsible.emby-scroller,
  #scenesCollapsible.emby-scroller {
    margin-right: 0;
  }
  #specialsCollapsible .emby-scrollbuttons,
  #musicVideosCollapsible .emby-scrollbuttons,
  #scenesCollapsible .emby-scrollbuttons {
    display: none;
  }
  #specialsCollapsible .itemsContainer,
  #musicVideosCollapsible .itemsContainer,
  #scenesCollapsible .itemsContainer {
    flex-wrap: wrap;
  }
  #specialsCollapsible .overflowBackdropCard,
  #musicVideosCollapsible .overflowBackdropCard,
  #scenesCollapsible .overflowBackdropCard {
    max-width: 13.4vw !important;
  }
  .verticalSection.section0 .textActionButton {
    display: none;
  }
}

.itemsContainer > .card > .cardBox:hover {
  transform: translateY(-5px);
}

[Image: PRQaYHr.png]

-------------------------------------

(Also personal)

I like to see the metadata icons xD

Code:
/* Metadata Icons */
a[href*="imdb.com"]::before,
a[href*="trakt.tv"]::before,
a[href*="themoviedb.org"]::before,
a[href*="themoviedb.org/collection"]::before,
a[href*="thetvdb.com/movies"]::before,
a[href*="thetvdb.com/series"]::before,
a[href*="thetvdb.com/tv"]::before,
a[href*="thetvdb.com/?tab=series"]::before,
a[href*="tvmaze.com"]::before,
a[href*="anidb.net"]::before {
  content: "";
  display: inline-block;
  width: 36px;
  height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  box-sizing: border-box;
}
a[href*="imdb.com"]::before {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/6/69/IMDB_Logo_2016.svg);
}
a[href*="trakt.tv"]::before {
  background-image: url(https://trakt.tv/assets/logos/logo.default.negative-7c28b25bb270dc291faa5d7794b9bfd6fcdf4698ee5e6504151167fbecd8a197.svg);
  transform: scale(1.2);
}
a[href*="themoviedb.org"]::before {
  background-image: url(https://www.themoviedb.org/assets/2/v4/logos/v2/blue_square_1-5bdc75aaebeb75dc7ae79426ddd9be3b2be1e342510f8202baf6bffa71d7f5c4.svg);
}
a[href*="themoviedb.org/collection"]::before {
  background-image: url(https://i.imgur.com/Vguav7a.png);
}
a[href*="thetvdb.com/movies"]::before,
a[href*="thetvdb.com/series"]::before,
a[href*="thetvdb.com/tv"]::before,
a[href*="thetvdb.com/?tab=series"]::before {
  background-image: url(https://www.thetvdb.com/images/logo.svg);
}
a[href*="tvmaze.com"]::before {
  background-image: url(https://static.tvmaze.com/images/tvm-header-logo.png);
  transform: scale(1.2);
}
a[href*="anidb.net"]::before {
  background-image: url(https://i.imgur.com/7hpyHRn.png);
}
a[href*="imdb.com"],
a[href*="trakt.tv"],
a[href*="themoviedb.org"],
a[href*="themoviedb.org/collection"],
a[href*="thetvdb.com"],
a[href*="tvmaze.com"],
a[href*="anidb.net"] {
  font-size: 0;
  display: flex;
  align-items: center;
}
.itemExternalLinks.focuscontainer-x {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff0 !important;
  margin: 1.5em 0 !important;
}

[Image: bn9QsDj.png]