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
10.11.x NOTES:
the theme should be mostly functional on 10.11 now. there are some bugs and minor styling issues i need to work out soon, but it's more or less the same now and not completely broken.

users of the complete theme WILL have to make a few minor changes though:
1. in your Jellyfin webroot's index.html, in the line that imports the slideshowpure.js script, change async to defer
2. move the list.txt file OUT of the avatars folder, and into the webroot itself.
3. remove the Featured line from list.txt. all that should remain are the media IDs, there is no need for a label as the first line anymore.

if there are any 10.10.x holdouts, there is a legacy-10.10 branch for you, which will be a permanently frozen, as-is version of the theme and its scripts before the 10.11 update. if you wish to use that version, make sure to update the imports in index.html as shown in the legacy-10.10 branch's README.

original description:

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");

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]

RE: ♾️ Finity - Rethgash - 2025-10-23

Just one question, are you going to update CSS to version 10.11.0?

I really like your theme.

RE: ♾️ Finity - prism2001 - 2025-10-24

(2025-10-23, 04:32 AM)Rethgash Wrote: Just one question, are you going to update CSS to version 10.11.0?

I really like your theme.

i don't have an active Jellyfin server at the moment, is it broken in 10.11?

RE: ♾️ Finity - Rethgash - 2025-10-25

(2025-10-24, 05:55 PM)prism2001 Wrote:
(2025-10-23, 04:32 AM)Rethgash Wrote: Just one question, are you going to update CSS to version 10.11.0?

I really like your theme.

i don't have an active Jellyfin server at the moment, is it broken in 10.11?

Some parts are broken  Weary-face

RE: ♾️ Finity - prism2001 - 2025-10-26

the theme should be mostly functional now. there are some bugs and minor styling issues i need to work out soon but it's more or less the same now.

users of the complete theme WILL have to make a few minor changes though:
1. in your Jellyfin webroot's index.html, in the line that imports the slideshowpure.js script, change async to defer
2. **move** the list.txt file OUT of the avatars folder, and into the webroot itself.
3. remove the Featured line from list.txt. all that should remain are the media IDs, there is no need for a label as the first line anymore.

let me know how it goes for you. if there are any 10.10.x holdouts, there is a legacy-10.10 branch for you, which will be a permanently frozen, as-is version of the script before the 10.11 update. if you wish to use that version, make sure to update the imports in index.html as shown in the legacy-10.10 branch's README.

RE: ♾️ Finity - Rethgash - 2025-10-26

(10 hours ago)prism2001 Wrote: the theme should be mostly functional now. there are some bugs and minor styling issues i need to work out soon but it's more or less the same now.

users of the complete theme WILL have to make a few minor changes though:
1. in your Jellyfin webroot's index.html, in the line that imports the slideshowpure.js script, change async to defer
2. **move** the list.txt file OUT of the avatars folder, and into the webroot itself.
3. remove the Featured line from list.txt. all that should remain are the media IDs, there is no need for a label as the first line anymore.

let me know how it goes for you. if there are any 10.10.x holdouts, there is a legacy-10.10 branch for you, which will be a permanently frozen, as-is version of the script before the 10.11 update. if you wish to use that version, make sure to update the imports in index.html as shown in the legacy-10.10 branch's README.

Thank you S2