scyfin/README.md
2022-12-06 00:46:29 -05:00

62 lines
2.0 KiB
Markdown

<img src="./images/scyfin-full.svg" alt="scyfin logo" width="200"/>
---
Custom CSS bits for the Jellyfin WebUI and a complete custom theme (Plus a backdrops supported version)
---
Scyfin Complete Theme
<img src="./images/scyfin/scyfin1.png" alt="scyfin1" width="80%"/>
<img src="./images/scyfin/scyfin2.png" alt="scyfin2" width="80%"/>
<img src="./images/scyfin/scyfin3.jpg" alt="scyfin3" width="80%"/>
<img src="./images/scyfin/scyfin4.png" alt="scyfin4" width="80%"/>
<img src="./images/scyfin/scyfin5.png" alt="scyfin5" width="80%"/>
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@v1.0.7/CSS/css-scyfin/scyfin-theme.css');
---
Scyfin Complete Theme - Backdrops Supported
Note - Backdrops need to be enabled in Jellyfin (Settings > Display > Backdrops) for backdrop supported version to display properly
<img src="./images/scyfin/scyfin-backdrop1.jpg" alt="scyfin-backdrop1" width="80%"/>
<img src="./images/scyfin/scyfin-backdrop2.png" alt="scyfin-backdrop2" width="80%"/>
<img src="./images/scyfin/scyfin-backdrop3.jpg" alt="scyfin-backdrop3" width="80%"/>
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@v1.0.7/CSS/css-scyfin/scyfin-theme-backdrop.css');
---
Static Left Drawer
<img src="./images/static-left-drawer-demo.png" alt="static left drawer" width="80%"/>
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@m0.0.1-alpha/CSS/static-left-drawer.css');
---
Rounded Cards
<img src="./images/rounded-cards-demo.png" alt="rounded cards" width="80%"/>
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@m0.0.1-alpha/CSS/rounded-cards.css');
---
Rounded Drawer Buttons
<img src="./images/rounded-drawer-buttons-demo.png" alt="rounded drawer buttons" width="80%"/>
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@m0.0.1-alpha/CSS/rounded-drawer-buttons.css');
---
Transparent Header
<img src="./images/transparent-header-alt-demo.png" alt="transparent header alt" width="80%"/>
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@m0.0.1-alpha/CSS/transparent-header.css');