Flow for Jellyfin

[LitCast]

Flow, A Plex-inspired theme for Jellyfin WebUI

- Built on Scyfin, Ultrachromic

(Also available as a Userstyle)

---

- Outline Cards on hover


- Backdrop Support


Base Theme

Code:

@import url('https://cdn.statically.io/gh/LitCastVlog/Flow/main/CSS/ScyFlow-main.css');

Extras (smaller cast/crew, etc)

Code:

@import url('https://cdn.statically.io/gh/LitCastVlog/Flow/main/CSS/ScyFlow-Extras.css');

•  
• B/W Logo
   
  
• Smaller Cast/Crew section
   
  
• Hide "Upcoming on TV" and "Next Up" section in Season View
  

Options (Add these after/under the base theme)

•      
• Larger logo (for High DPI/Jellyfn Media Player)
  •      
  • Code:

    @import url('https://cdn.statically.io/gh/LitCastVlog/Flow/main/CSS/ScyFlow-HighDPIExtras.css');
       
    
       
  
• Episode Grid (from Ultrachromic)
  
  • Code:

    @import url('https://cdn.statically.io/gh/LitCastVlog/Flow/main/CSS/ScyFlow-EpisodeGrid.css');
       
    
       
  
• Round Cast/Crew/Guests
  •      
  • Code:

    @import url('https://cdn.statically.io/gh/LitCastVlog/Flow/main/CSS/ScyFLow-RoundCastCrew.css');
       
    
       
  

Themes:

•      
• Orange
  •          
  • Code:

    @import url('https://cdn.statically.io/gh/LitCastVlog/Flow/main/CSS/Themes/ScyFlow-Orange.css');
             
    
  •        
    
                     
               
  
• Rainbow
  •          
  • Code:

    @import url('https://cdn.statically.io/gh/LitCastVlog/Flow/main/CSS/Themes/ScyFlow-Rainbow.css');
             
    
  •       
    
           
  
• Darker icons/OLED accents (Add this after everything else):
  
  •          
  • Code:

    @import url('https://cdn.statically.io/gh/LitCastVlog/Flow/main/CSS/Themes/ScyFlow-Dark.css');
      
    
  - (Also Compatible with Scyfin/Ultrachromic themes)   
  

Experimental (Works in progress)

•                           
  
• Horizontal-Scroll Episodes
  •          
  • Code:

    @import url('https://cdn.statically.io/gh/LitCastVlog/Flow/main/CSS/ScyFlow-Scrollable-Episodes-WIP.css');
             
    
  •          
    
                            
  
• Nyan Progress Bar
  •          
  • Code:

    @import url('https://cdn.statically.io/gh/LitCastVlog/Flow/main/CSS/Themes/NyanProgress.css');
             
    
  • 
      
    

Installation:

• Easy install (one-liner) 
  
• Code:

  @import url('https://cdn.statically.io/gh/LitCastVlog/Flow/main/CSS/ScyFlow-oneliner.css');
   
  
• (Mobile/Android one-liner):
  Code:

  @import url('https://cdn.statically.io/gh/LitCastVlog/Flow/main/CSS/ScyFlow-oneliner-mobile.css');
    
   
  
• Mobile/App fixes: if the logo is too big or doesn't apply (iOS, Android), append this line as well (per client)
  •    
  • Code:

    @import url('https://cdn.statically.io/gh/LitCastVlog/Flow/main/CSS/ScyFlow-mobilefixes.css');
     
    
• Smaller Screen/Android fixes: (if the indicators are too big)
     
  
• Code:

  @import url('https://cdn.statically.io/gh/LitCastVlog/Flow/main/CSS/ScyFlow-smallscreen-fixes.css');

Server-wide install: 

• Click the hamburger icon (Top left)
  
• Navigate to "Dashboard" (If you don't see this, make sure you are signed in to your admin account)
  
• Navigate to "General"
  
• Near the bottom, under "Custom CSS code", paste the
  Code:

  @import url
  for the base theme    
  
• Optional - Paste the code/@import url for any options / themes you may want
  
• Click "Save"
  

Single client install: 

• Click the hamburger icon (Top left)
  
• Navigate to "Settings"
  
• Navigate to "Display"
  
• Near the middle, under "Custom CSS code", paste the code/@import url for the base theme
  
• Note -
  •          
  • If there is any server-wide custom CSS, you may want to enable "Disable server-provided custom CSS code", as the two themes WILL interfere with each other
    
     
  

• Optional - Paste the code/@import url for any options/themes you may want     
  
• Click "Save"
  

[SethBacon]

I love the circular cast cutouts & Nyan Progress Bar is joy