mirror of
https://github.com/loof2736/scyfin.git
synced 2025-11-04 00:18:52 +01:00
76 lines
2.7 KiB
Markdown
76 lines
2.7 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');
|
|
|
|
Note: If you use the Jellyfin Media Player desktop app, you need to add this CSS bit (navigate to Settings>Display>Custom CSS Code if you only want it to apply to one client, ie the desktop app) or else the content will be covered by the sidebar:
|
|
|
|
```
|
|
/* Scyfin Media Player fix */
|
|
.layout-desktop .libraryPage:not(#editItemMetadataPage) {margin-left: 250px !important;}
|
|
```
|
|
|
|
---
|
|
|
|
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');
|
|
|
|
Note: If you use the Jellyfin Media Player desktop app, you need to add this CSS bit (navigate to Settings>Display>Custom CSS Code if you only want it to apply to one client, ie the desktop app) or else the content will be covered by the sidebar:
|
|
|
|
```
|
|
/* Scyfin Media Player fix */
|
|
.layout-desktop .libraryPage:not(#editItemMetadataPage) {margin-left: 250px !important;}
|
|
```
|
|
|
|
---
|
|
|
|
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');
|