Finimalism [Updated for 10.11.X]

[Blurryface]

This is just with 

@import url("https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@main/finimalism10.11.css");

Everything is wrapped, there should be no going off-screen

This is what I am using for my branding, cache has been cleared. Here are also photos showing the season wrap issue and album issue using these as well. 

@import url("https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@main/finimalism10.11.css");
@import url("https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@main/no-animation.css");
@import url("https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@latest/horizontal-scrolling.css");

[Ted Hinklater]

That is fixed (jsdelivr hasn't updated horizontal-scrolling yet, i sent a purge request a couple of hours ago), if you use this instead

@import url("https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@main/finimalism10.11.css");
@import url("https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@main/no-animation.css");
.layout-desktop #indexPage .itemsContainer,
.layout-tv #indexPage .itemsContainer,
.layout-desktop #itemDetailPage .verticalSection.detailVerticalSection.moreFromSeasonSection.emby-scroller-container .scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX,
.layout-tv #itemDetailPage .verticalSection.detailVerticalSection.moreFromSeasonSection.emby-scroller-container .scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX,
.layout-desktop #castCollapsible .scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX,
.layout-tv #castCollapsible .scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX,
.layout-desktop #guestCastCollapsible .scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX,
.layout-tv #guestCastCollapsible .scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX,
.layout-desktop #similarCollapsible .scrollSlider.focuscontainer-x.itemsContainer.similarContent.animatedScrollX,
.layout-tv #similarCollapsible .scrollSlider.focuscontainer-x.itemsContainer.similarContent.animatedScrollX,
.layout-desktop #specialsCollapsible .scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX,
.layout-tv #specialsCollapsible .scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX {display: flex !important; flex-wrap: nowrap !important; gap: unset;}
#indexPage button[data-direction="left"], #indexPage button[data-direction="right"] {opacity: 0.5; padding-right: 1em;}
#itemDetailPage button[data-direction="left"], #itemDetailPage button[data-direction="right"] { opacity: 0.5; }
.verticalSection[data-type="MusicAlbum"] .itemsContainer.padded-right.vertical-wrap { flex-wrap: wrap! important;}
.layout-desktop #itemDetailPage .scrollSlider.itemsContainer, .layout-tv #itemDetailPage .scrollSlider.itemsContainer { flex-wrap: nowrap !important; white-space: normal !important;}

[Blurryface]

That is fixed (jsdelivr hasn't updated horizontal-scrolling yet, i sent a purge request a couple of hours ago), if you use this instead

@import url("https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@main/finimalism10.11.css");
@import url("https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@main/no-animation.css");
.layout-desktop #indexPage .itemsContainer,
.layout-tv #indexPage .itemsContainer,
.layout-desktop #itemDetailPage .verticalSection.detailVerticalSection.moreFromSeasonSection.emby-scroller-container .scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX,
.layout-tv #itemDetailPage .verticalSection.detailVerticalSection.moreFromSeasonSection.emby-scroller-container .scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX,
.layout-desktop #castCollapsible .scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX,
.layout-tv #castCollapsible .scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX,
.layout-desktop #guestCastCollapsible .scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX,
.layout-tv #guestCastCollapsible .scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX,
.layout-desktop #similarCollapsible .scrollSlider.focuscontainer-x.itemsContainer.similarContent.animatedScrollX,
.layout-tv #similarCollapsible .scrollSlider.focuscontainer-x.itemsContainer.similarContent.animatedScrollX,
.layout-desktop #specialsCollapsible .scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX,
.layout-tv #specialsCollapsible .scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX {display: flex !important; flex-wrap: nowrap !important; gap: unset;}
#indexPage button[data-direction="left"], #indexPage button[data-direction="right"] {opacity: 0.5; padding-right: 1em;}
#itemDetailPage button[data-direction="left"], #itemDetailPage button[data-direction="right"] { opacity: 0.5; }
.verticalSection[data-type="MusicAlbum"] .itemsContainer.padded-right.vertical-wrap { flex-wrap: wrap! important;}
.layout-desktop #itemDetailPage .scrollSlider.itemsContainer, .layout-tv #itemDetailPage .scrollSlider.itemsContainer { flex-wrap: nowrap !important; white-space: normal !important;}

So use this for the time being until jsdelivr is clear I am guessing to fix the album/TV show season issue as well?

[daft.dog]

Thank you!

[Blurryface]

That is fixed (jsdelivr hasn't updated horizontal-scrolling yet, i sent a purge request a couple of hours ago), if you use this instead

@import url("https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@main/finimalism10.11.css");
@import url("https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@main/no-animation.css");
.layout-desktop #indexPage .itemsContainer,
.layout-tv #indexPage .itemsContainer,
.layout-desktop #itemDetailPage .verticalSection.detailVerticalSection.moreFromSeasonSection.emby-scroller-container .scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX,
.layout-tv #itemDetailPage .verticalSection.detailVerticalSection.moreFromSeasonSection.emby-scroller-container .scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX,
.layout-desktop #castCollapsible .scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX,
.layout-tv #castCollapsible .scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX,
.layout-desktop #guestCastCollapsible .scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX,
.layout-tv #guestCastCollapsible .scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX,
.layout-desktop #similarCollapsible .scrollSlider.focuscontainer-x.itemsContainer.similarContent.animatedScrollX,
.layout-tv #similarCollapsible .scrollSlider.focuscontainer-x.itemsContainer.similarContent.animatedScrollX,
.layout-desktop #specialsCollapsible .scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX,
.layout-tv #specialsCollapsible .scrollSlider.focuscontainer-x.itemsContainer.animatedScrollX {display: flex !important; flex-wrap: nowrap !important; gap: unset;}
#indexPage button[data-direction="left"], #indexPage button[data-direction="right"] {opacity: 0.5; padding-right: 1em;}
#itemDetailPage button[data-direction="left"], #itemDetailPage button[data-direction="right"] { opacity: 0.5; }
.verticalSection[data-type="MusicAlbum"] .itemsContainer.padded-right.vertical-wrap { flex-wrap: wrap! important;}
.layout-desktop #itemDetailPage .scrollSlider.itemsContainer, .layout-tv #itemDetailPage .scrollSlider.itemsContainer { flex-wrap: nowrap !important; white-space: normal !important;}

Ok update, with your update and the 3 imports below. Everything is now back to how it was from 10.10.7 with the TV shows, seasons and music albums. 

@import url("https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@main/finimalism10.11.css");
@import url("https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@main/no-animation.css");
@import url("https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@latest/horizontal-scrolling.css");

[2020]

Using the latest the latest 11 but I want it to look more like  finimalism7  finimalism7 

Few things
1. by default jellyfin  finimalism 11 leaves one row empty.
2. is it possible to increase the size of the my media section, they look tiny and unbalanced compared to the rest. 
3. is it possible to make the design slightly more like finimalism7 with banner above, logo in the middle and poster on the size.

The above code has helped fix some issues

[Ted Hinklater]

Hi mate youre using very old versions of finimalism and the featured content bar, make sure you update your css import and copy the latest home-html snippet and download the latest spotlight.html

Code:

@import url("https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@main/finimalism10.11.css");

download - spotlight.html

latest home-html.chunk.js -

Code:

"use strict";
(self.webpackChunk = self.webpackChunk || []).push([[8372], {
  5939: function (a, e, t) {
    t.r(e);
    e.default = `
<div id="indexPage" style="outline:0" data-role="page" data-dom-cache="true"
  class="page homePage libraryPage allLibraryPage backdropPage pageWithAbsoluteTabs withTabs"
  data-backdroptype="movie,series,book">

  <style>
    .featurediframe {
      width: 100vw; height: 100vh; display: block; border: 0;
      margin: 0 auto; margin-bottom: -26em; margin-top: -3.5em;
      transition: height 300ms ease, margin 300ms ease;
    }
    @media (min-width: 951px) and (min-height: 700px) {
      .featurediframe { min-height: 70em; }
    }
    @media (max-width: 1000px) and (orientation: portrait) {
      .featurediframe { height: 25em; margin-bottom: -1em; }
    }
    @media (max-width: 1000px) and (orientation: landscape) {
      .featurediframe { height: 26em; margin-bottom: -1em; }
    }
    @media (max-width: 421px) and (orientation: portrait) {
      .featurediframe { height: 100vh; margin-bottom: -28em; margin-top: -6.5em; }
    }
    @media (max-height: 421px) and (orientation: landscape) {
      .featurediframe { height: 100vh; margin-bottom: -6em; margin-top: -6.5em; }
    }
  </style>

  <div class="tabContent pageTabContent" id="homeTab" data-index="0">
    <iframe class="featurediframe" src="/web/ui/spotlight.html"></iframe>
    <div class="sections"></div>
  </div>

  <div class="tabContent pageTabContent" id="favoritesTab" data-index="1">
    <div class="sections"></div>
  </div>

</div>`;
  }
}]);

document.addEventListener("DOMContentLoaded", () => {
  const homeTab = document.getElementById("homeTab");
  if (!homeTab) return;

  const spotlightIframe = homeTab.querySelector(".featurediframe");
  if (!spotlightIframe) return;

  const observer = new MutationObserver(() => {
    const isHomeTabActive = homeTab.classList.contains("is-active");
    spotlightIframe.style.display = isHomeTabActive ? "block" : "none";
  });

  observer.observe(homeTab, { attributes: true, attributeFilter: ["class"] });
});

[4r5hw45twh]

Hi mate

It seems still ignoring my reply above, but I found another issue....the CSS that you gave me that fixed my initial issue now has its own issue with your latest updates. See below. I just want the theme to work again without hacky CSS stuff.
It now added some overlapping thing on the far-left of the screen that gives white rectangular blocks all the way down that links to different things.

[Ted Hinklater]

Yeah I put white blocks there for christmas

[4r5hw45twh]

Yeah I put white blocks there for christmas

What? Unless I'm missing something, that doesn't make sense. It just covers the "My Media," etc. text areas. I don't think you're understanding, so here is a video example.

https://i.imgur.com/FiXDYdI.mp4