GNAT - Printable Version

GNAT - 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: GNAT (/t-gnat)

GNAT - SethBacon - 2025-06-24

GNAT
Seths MD3 Style

[Image: 1homepage.png]

God, Not Another Theme!
Originally built with Material Design 3 principles and root color definitions in 2023.
Redesigned and released with Material 3 Expressive considerations† in May 2025 for jellyfin v10.10.x.

*GNAT with Spotlight slideshow and Seths UI/OSD (coming soon)
† I've considered it: Googles MDExpressive is ugly, and ive stuck with MD3 here with some glass and blur components, apples liquid-glass gonna eat their lunch..

Shut up and let me Install! (Hacker level: Max Mouse)
Add this to your custom CSS field:

Code:
@import url("https://cdn.jsdelivr.net/gh/JSethCreates/jellyfin-theme-sethstyle/jellyfin-theme-sethstyle.css");

More boring stuff:
GNAT features a number of quality-of-life changes, with a focus on media item pages:
-Fixing the primary action panel in place, while scrolling the right side data
-Prioritizing the cinematic elements (logo, tagline, plot, cast) while shifting more technical buckets like codecs and stream selections lower on the page.
-Custom slider thumb designs on WebKit/Firefox, fixed-position progress bar to prevent bouncing, OSD time text styling and placement
-Replacing header Text-button tabs with Material Icons (or Emoji example coded) and a hundred other little fixes

GNAT follows MD3 guidelines:
-primary action buttons are visually distinct, the color system is fully swappable, and semantic styling makes the entire layout more cohesive.
-MD3 Subtle growth, shadow, and background color transitions, Rounded corners everywhere, Typography & Headings unified
-Styles buttons, FABs, progress indicators, list-item hovers, checkboxes, sliders, spinners, and card placeholders all styled within the 9 color MD3 palette, including hover/focus tints and mix-in backgrounds.

I tried to also make this a solid starting point for anyone creating a new theme. All color targets are already mapped and unified in the initial sections of the CSS.

[Image: 3osd.png]

At its core, MD3 guidelines ensure an accessible and intuitive flow for users. It introduces a dynamic color system powered by customizable key colors and automatic palette generation, allowing for consistent yet unique branding across UIs. It emphasizes personalization, contrast accessibility, and adaptable components that work across light and dark modes seamlessly. Compared to earlier versions, MD3 embraces a more modern aesthetic: larger corner radii, softer elevation effects, bolder typography, and more deliberate spacing, all designed to improve both form and function across screen sizes and devices.
🎓 Learn more about MD3

OH MY GOD IM FALLING ASLEEP... But this allows for:

[Image: 4movie.png]

Custom Colors Install! (Hacker level: Acid Burn)
All colors in the theme are linked and over-ridable. Edit these Hex Colors and paste this block into your CSS box to create your own scheme!:

Code:
@import url("https://cdn.jsdelivr.net/gh/JSethCreates/jellyfin-theme-sethstyle/jellyfin-theme-sethstyle.css");

:root {

  --md-sys-color-primary:                #81d3df !important;

  --md-sys-color-secondary:            #b1cbcf !important;

  --md-sys-color-tertiary:                #b9c6ea !important;

  --md-sys-color-on-primary:                 #00363c !important;

  --md-sys-color-primary-container:        #004f57 !important;

  --md-sys-color-on-primary-container:    #9df0fc !important;

  --md-sys-color-surface:                 #0e1415 !important;

  --md-sys-color-on-surface:            #dee4e4 !important;

  --md-sys-color-outline:                 #899294 !important;

}

Quote: Yo dog, Google heard you like themes, so they put a scheme on your theme on your style on your media player..

Material 3 Expressive (May 2025) promotes more vibrant palettes and you can test, request, adjust, copy and paste MD3 schemes with this tool here:

🎨 Launch Seth's MD3 Palette Tool

[Image: 5series.png]

Final Boss Install! (Hacker level: Trinity)
Copy and paste all this code into your Custom CSS field, there are more easily editable vars at the beginning. Poke around, take chances, get messy, make mistakes!!!!

Note: This theme was designed for use as a lean-back interface for JFWeb on a TV or Android-box, with remote control, at 1080p+.
At resolutions < 1000 pixels wide, this theme will revert to standard JFWeb, with nominal color changes.
[Image: 8portrait.png]

With props to @TedHinklater (https://github.com/tedhinklater) and @alexyle (https://github.com/alexyle), who's souls of Finimalism and Glassmorphism are probably still in here..

RE: GNAT - Ted Hinklater - 2025-06-24

(2025-06-24, 08:46 AM)SethBacon Wrote: GNAT
Seths MD3 Style

Wowww beautifully done! and the Palette Tool is genuinely big-brained, idk how you come up with this stuff man.

I will say I noticed my profile pic is a lil squished

I think it's line 620.

I'll be enjoying playing around with the palettes for quite a while, cheers!

RE: GNAT - 2020 - 2025-06-24

Hi first of all thanks for sharing this great theme.

I've just started trying it out, I don't know if just for me but i've noticed a few issues

1. The view, the play button seam a little big, the genre, tags, next up, are at the bottom after Cast & Crew.

2. Does this theme have a Progress bar ? if so Its hard to see on my side, image attached.

3. the poster seam to be missing a column.

4. the mobile view works but not in all areas.

RE: GNAT - SethBacon - 2025-06-24

Thanks guys this is great feedback!

For Ted: Yes i think my ☘️ emoji pushes the header down for me so i didnt notice the squish ty. EDIT: Fixed and links^ now go to live CSS

But please allow me to jump off from it: https://m3.material.io/components/app-bars/guidelines? modern guidelines suggest the app bar be limited to 1–2 essential actions. Its also part of my larger.. sort of UI script just completely removes the casting (maybe i should put that back) the group play (barely ever used for my users) and jesus what is the back arrow even FOR every browser, every remote control, every mobile OS all have their own 'Back' functions gestures buttons whatever already.

And it begs the largest question thats bugged me for a while; I get it, like if youre in gmail you want to see which acct youre sending from at all times but, and dont know if this is UI heresy but im gonna say it out loud..

Do our users Really need to see their user icon on the homepage at all times.. or ever?

All functions you find by clicking that are also in the left hand hamburger menu under 'settings'. So i just completely took usericon out on my server, but i thought that might be a bridge too far for the CSS style. so you'll notice in my screenshots my users only get search. Its very cleansing.. but i should put Chromecast back. Thank you for visiting my headerbar ted-talk

RE: GNAT - SethBacon - 2025-06-24

For 2020:The theme-proper is only supposed to kick in on wider views, so your first 3 screenshots are because I must have left some settings in the apply-to-all side. -Fixed in 5.3.0-

The next two pics should be an easy one, but that is the kind of challenge in making these themes; designing for all resolutions. I get mixed up when to use vw vs % vs em but i agree, you should see another column in those.

The home improvement pic seems ok to me, but i do want to style those 3 bottom bins better those are:

/* 12) Director / Writers / Studios box */
.detailPageContent .itemDetailsGroup {
}

/* 13) Track-selection form */
.detailPageContent form.trackSelections {
}

/* 14) Tags */
.detailPageContent .itemTags {
} Definitely accepting better styling suggestions for those ( A little 'featuring info box by M0RPH3US' perhaps?)

Your pic with the mummy is actually very interesting, I didnt realize MakD's Jellyfin-Media-Bar pulled the playbtn directly. I may ask him to !important his styling or ill rescope mine. The play buttons are a given pages 'Primary Action Button' so they are made larger and eyecatching by design, but that one shouldnt be on the homepage.

The santa clause progress pic is also looking as intended, and you'll forgive my artistic license on this one - the progress indicator on cards has been changed to a feint glow that washes along the card in our tertiary or emotional color. I dont believe this really needs to be a discrete like hard edged bar as much as just giving users a general sense of how much has elapsed, but i can see how that would bug some people. To adjust it, I suggest you use the Final Boss Install and search for the word 'Shenanigans'

The final one 'Scenes' is a bin I dont really recognize.. is that like chapters or is that movie media like broken into parts? Itll be an easy fix i think but i dont know how to replicate that. Thanks again, this is very helpful feedback

RE: GNAT - 2020 - 2025-06-25

Thanks for the reply.

I understand, I thought I would share my thoughts to maybe help.

1. the first image is to show the mobile, buttons seam to overlap it some areas, I assume you already noticed from the images.

2. The home improvement image, I also wanted to to show the genre, tags, next up, are at the bottom after Cast & Crew. I wanted to have it at the top like before, before ethe cast, would this be possible.

3. the mummy image, would it also be possible to add a bit of spacing, the my media and play button overlap.

4. how do you add the video trailer similar to how you have done it in the video above.

Final screen shot, for the chapters, I've been use the https://repo.jellyfin.org/?path=/plugin/chapter-segments-provider plugin.

Ill try the Final Boss Install and search for the word 'Shenanigans' over the weekend. Im not great with CSS, would you be able to offer a bit of help.

maybe a some help to make some custom changes if its not to much trouble ?
since part of the design was based on finimalism, and I really like the larger poster images and divide bar of finimalism, and the TV Show/Move section, I was wondering if I would be possible for me to add this ?