Compare commits

...

137 Commits
v1.0.8 ... main

Author SHA1 Message Date
loof2736
d69ca9a5c5 Update README 2025-10-25 17:32:05 -04:00
loof2736
15baa1ba63 Update install instructions for 10.11.X 2025-10-25 17:30:45 -04:00
loof2736
b5f2fee628 Merge branch 'main' of github.com:loof2736/scyfin 2025-10-22 17:32:40 -04:00
loof2736
a6963bb1b5 Update home button selector to only re-enable button where it was previously visible 2025-10-22 17:32:26 -04:00
Josh Wilberger
caf1875ecb
Remove dashboard image from README
Removed dashboard image from README.
2025-10-20 18:58:30 -04:00
loof2736
d43d697a15 Fix for details page on 10.11.X 2025-10-20 18:54:29 -04:00
loof2736
d9b6ecc0a5 Fix alignment of cancel button on login page for JMP 2025-08-24 21:47:38 -04:00
loof2736
dcfea25d62 Fixed top padding on description box when media info not present 2025-08-17 20:19:04 -04:00
loof2736
5fff995570 Modify styling of dashboard navigation dropdowns 2025-08-10 00:11:04 -04:00
loof2736
a587163d43 Fix for TV layout jumping left when selecting certain items 2025-08-09 23:46:13 -04:00
loof2736
0d6f173b43 Added background to dashboard dropdown navigation buttons 2025-08-09 11:56:06 -04:00
loof2736
e49cb8308c Modify padding of textarea elements 2025-08-09 10:28:29 -04:00
Josh Wilberger
24a5320302
Update README.md 2025-08-09 10:01:31 -04:00
loof2736
abe98d6d59 Modified alignment of cards on details page for mobile 2025-05-17 13:21:30 -04:00
loof2736
00363ff09f Rounded album art on music player to match rest of theme 2025-05-17 12:53:07 -04:00
loof2736
f7ae6d2dab Fix progress bar for miniplayer on mobile 2025-05-17 12:52:21 -04:00
loof2736
569894124c Fixed section title alignment on collection detail page 2025-03-31 19:52:45 -04:00
loof2736
dfbffb40c5 Modify link selector 2025-03-31 19:48:23 -04:00
loof2736
940c08f9c5 Refactoring to support JMP's ancient version of Chrome 2025-03-30 22:04:21 -04:00
loof2736
51ca34070e Fix padding for "cancel" button on login screen if there is no login disclaimer 2025-03-30 21:23:31 -04:00
loof2736
11fd7f77df Hide home and hamburger icon on login screen 2025-03-30 21:13:49 -04:00
loof2736
2522bb8723 Hide drawer pseudo-element for JMP 2025-03-30 20:43:21 -04:00
loof2736
d041906f55 Updated progress bar selector 2025-03-30 20:34:37 -04:00
loof2736
a5d4ab2214 Fix alignment for "Plugins" section of dashboard 2025-02-10 22:13:39 -05:00
loof2736
f09b19998c Updated list item crop setting #40 2024-11-30 14:32:20 -05:00
loof2736
1f055e932c Fixed mobile header scaling on small devices #39 2024-11-30 14:31:21 -05:00
loof2736
a430a08030 Modify player button icons 2024-11-03 13:24:15 -05:00
loof2736
40db1a491b Fixed accent colors not applying correctly in Chromium browsers 2024-09-11 15:54:30 -04:00
loof2736
bddcc14032 Slightly darken alt colors for readability 2024-09-11 15:53:55 -04:00
loof2736
103aeb7e64 Fix for Intro Skip button scaling at end of episode 2024-09-07 00:51:32 -04:00
loof2736
132dedb72f Merge branch 'main' of github.com:loof2736/scyfin 2024-09-05 22:17:12 -04:00
loof2736
c3fe2b36a5 Added support for InPlayerEpisodePreview plugin 2024-09-05 22:16:52 -04:00
loof2736
1162f1f188 Modify positioning of original title 2024-09-03 20:23:17 -04:00
loof2736
3f5e3559f1 Add margin to track selection dropdown 2024-09-03 19:31:46 -04:00
loof2736
567cae1542 Re-positioned title container 2024-09-03 19:30:28 -04:00
Josh Wilberger
9d63e455a7
Update README.md 2024-09-02 12:33:26 -04:00
Josh Wilberger
93ed9e284e
Update README.md 2024-09-02 12:32:23 -04:00
loof2736
5c51f50ebc Removed deprecated options 2024-09-01 19:08:55 -04:00
loof2736
00e9f9102a Updated color format 2024-09-01 19:06:26 -04:00
loof2736
909200962d Added theming to "Active Device" cards in dashboard 2024-09-01 19:02:39 -04:00
loof2736
a4419977f7 Fixed theme color not applying to certain elements 2024-09-01 18:18:05 -04:00
loof2736
d07f74653e Fixed border radius for detail chips with lots of content 2024-08-13 18:32:02 -04:00
loof2736
aa875f2ceb Fixed element layering on chapter markers 2024-08-11 20:05:33 -04:00
loof2736
b4b9a24aba Added transition to chapter markers 2024-08-11 20:02:28 -04:00
loof2736
c59dd9d0af Re-enabled chapter markers and updated colors 2024-08-11 19:23:14 -04:00
loof2736
884d0c7f61 Merge branch 'main' of github.com:loof2736/scyfin 2024-08-11 19:22:35 -04:00
loof2736
43c5b44ff7 Fixed square shadow on progress bar overlay 2024-08-11 19:22:33 -04:00
Josh Wilberger
9afe7a516f
Update README.md 2024-07-28 13:34:52 -04:00
loof2736
5ebfe4df07 Bug fixes 2024-07-24 21:43:43 -04:00
loof2736
0ff4cc37aa Fix black progress slider for OLED theme 2024-06-11 17:27:45 -04:00
loof2736
0f962980d4 Fix backdrop detection for Jellyfin Media Player 2024-06-09 22:37:22 -04:00
loof2736
f0d53f0a0c Fix poster overlapping content in JMP 2024-06-09 21:42:56 -04:00
loof2736
6e0f638efd Update README 2024-06-09 19:51:56 -04:00
loof2736
2279074cbd Update images 2024-06-09 19:51:16 -04:00
loof2736
49ed4b65d2 Update images 2024-06-09 19:40:00 -04:00
loof2736
28710d0f04 Added deprecation warning to dashboard 2024-06-09 19:39:47 -04:00
loof2736
260a4bc6d4 Modified outline colors 2024-06-09 19:39:22 -04:00
loof2736
38239e99aa Initial commit for OLED theme 2024-06-09 17:45:59 -04:00
loof2736
c91f39b38a Merged backdrops version into main theme to be handled dynamically 2024-06-09 17:22:08 -04:00
loof2736
6c9cdbefef Merged options for dynamic changes 2024-06-09 17:21:00 -04:00
loof2736
d22dc84677 Added padding to drawer buttons 2024-06-08 21:15:57 -04:00
loof2736
f5a395b044 Minor changes to dashboard drawer 2024-06-08 20:25:58 -04:00
loof2736
1f94534ce9 Fix for covered video player 2024-06-07 23:24:05 -04:00
loof2736
7c5832bfd2 Fixed metadata editor for 10.9.x 2024-06-07 22:56:34 -04:00
loof2736
436fd9db15 Updated dashboard styling for 10.9.x 2024-06-07 22:42:03 -04:00
loof2736
01ab6af1fe Update images 2024-06-07 22:35:05 -04:00
loof2736
ec67a5d2a3 Update variable names for better clarity 2024-06-07 22:30:09 -04:00
loof2736
a66c990eb3 Update variable names for better clarity 2024-06-07 22:29:16 -04:00
loof2736
9c5c65b1c9 Fixed poster scaling on small-width layouts 2024-06-07 18:21:19 -04:00
loof2736
2564564778 Modify file structure of repo and removed old code 2024-06-06 23:41:57 -04:00
loof2736
7735a84685 Update README and images 2024-06-06 23:40:52 -04:00
loof2736
b8c72f428c Merge branch 'main' of github.com:loof2736/scyfin 2024-06-06 23:04:46 -04:00
loof2736
3ac7b77410 Minor style fixes 2024-06-06 23:04:43 -04:00
Josh Wilberger
b4528d5ed1
Update README.md 2024-06-03 12:24:20 -04:00
Josh Wilberger
0b7cb03ca0
Update README.md 2024-06-02 20:50:43 -04:00
loof2736
468172ccf5 Re-enabled poster on detail page 2024-06-02 20:46:31 -04:00
Josh Wilberger
cae8f35cad
Update README.md 2024-06-01 00:39:32 -04:00
loof2736
2762a53ad8 Fixed checkbox outlines 2024-06-01 00:37:30 -04:00
Josh Wilberger
e8a9e95baf
Update README.md 2024-06-01 00:33:05 -04:00
loof2736
8b3208d730 Minor change to snow theme 2024-06-01 00:30:04 -04:00
Josh Wilberger
076427e012
Update README.md 2024-06-01 00:16:13 -04:00
Josh Wilberger
729ad79890
Update README.md 2024-06-01 00:12:26 -04:00
loof2736
a7e463e7ae Corrected file extension names for themes 2024-06-01 00:08:51 -04:00
loof2736
f7c84b37e2 Merge branch 'main' of github.com:loof2736/scyfin 2024-05-31 23:57:02 -04:00
loof2736
87854e4112 Initial support for color themes 2024-05-31 23:56:54 -04:00
Josh Wilberger
be1b1c925d
Update README.md 2024-05-27 17:40:51 -04:00
loof2736
ad8113d0f7 Re-designed login page 2024-05-27 17:33:23 -04:00
loof2736
32eeb90507 Merge branch 'main' of github.com:loof2736/scyfin 2024-05-21 21:36:42 -04:00
loof2736
4135afa5e9 Re-centered top tab bar 2024-05-21 21:36:37 -04:00
Josh Wilberger
4f8d125726
Update README.md 2024-05-21 20:02:47 -04:00
Josh Wilberger
c1f88ab7df
Update README.md 2024-05-19 20:09:37 -04:00
loof2736
768e3bb122 Merge branch 'main' of github.com:loof2736/scyfin 2024-05-19 20:08:54 -04:00
loof2736
e7b0bf8854 Quick fix for logo size / width 2024-05-19 20:08:48 -04:00
Josh Wilberger
6d93e686ba
Update README.md 2024-05-19 20:06:36 -04:00
loof2736
0138f243be Fixed width of logo with disable-static-drawer 2024-05-19 20:03:03 -04:00
loof2736
1237b38b6f Merge branch 'main' of github.com:loof2736/scyfin 2024-05-19 19:58:11 -04:00
loof2736
9b6eb111f7 Fix for logo size 2024-05-19 19:58:02 -04:00
Josh Wilberger
c4ac109477
Update README.md 2024-05-19 19:34:44 -04:00
loof2736
13bce2712d Improve look of chapter selector 2024-05-19 19:27:16 -04:00
loof2736
039873f396 Re-factored code for top-left item background to be more dynamic 2024-05-19 18:54:43 -04:00
Josh Wilberger
30cf0b7b53
Merge pull request #18 from JamsRepos/main
Fix Header on Static Drawer Disabled
2024-05-19 18:09:50 -04:00
Jam
c614398806 refactor: 💄 Remove border off main drawer to give a more sleek look 2024-05-19 16:08:43 +01:00
Jam
724a2f6248 fix: 🐛 Fixed issue with 10.9 not displaying backdrop behind item logo 2024-05-19 16:07:29 +01:00
Jam
dc346c1df9 fix: 🐛 Reduce size of top left header when the logo is hidden on other routes 2024-05-18 01:20:24 +01:00
Josh Wilberger
e0f16d7a76
Update README.md 2024-05-13 21:00:07 -04:00
Josh Wilberger
a766972616
Merge pull request #16 from JamsRepos/main
Minor 10.9 Amends
2024-05-13 20:54:05 -04:00
loof2736
b1fce11917 Update README 2024-05-13 20:13:33 -04:00
loof2736
9391c217fa Fixes for TV layout and JMP 2024-05-13 20:13:23 -04:00
James Finch
0d22c8272c revert: 🥅 Remove the backdrop blue from the standard version 2024-05-13 23:55:10 +01:00
James Finch
f07fa88124 revert: 🥅 Change colour back to non-backdrop version 2024-05-13 23:53:57 +01:00
James Finch
15b2db15b7 fix: 🐛 Fixed an issue where non-alphabetic characters would leak out of details 2024-05-13 23:49:49 +01:00
James Finch
9b1cc672cd fix: 💄 Fixed issue with dashboard leaking outside of the view 2024-05-13 22:46:36 +01:00
loof2736
7f8956dcc3 Fixes for TV layout in 10.9.0 2024-05-11 20:56:56 -04:00
Josh Wilberger
061d7c8951
Update README.md 2024-01-20 19:51:26 -05:00
loof2736
be1fcc0eae Merge branch 'main' of github.com:loof2736/scyfin 2024-01-20 19:48:46 -05:00
loof2736
9127f2bbd7 Misc fixes for Jellyscrub 2024-01-20 19:48:39 -05:00
loof2736
ab92154da9 Fixed movie title clipping in player 2024-01-20 19:48:21 -05:00
Josh Wilberger
e0732d9791
Update README.md 2024-01-20 14:57:38 -05:00
Josh Wilberger
541d2dbd77
Update README.md 2024-01-20 14:50:09 -05:00
loof2736
2125d33f84 Merge branch 'main' of github.com:loof2736/scyfin 2024-01-20 14:49:26 -05:00
loof2736
dd4289fd48 Fix for music player 2024-01-20 14:49:14 -05:00
Josh Wilberger
0fe8e1e4d4
Update README.md 2024-01-20 14:31:23 -05:00
loof2736
23a48b5bcf Fix for music player 2024-01-20 14:29:06 -05:00
loof2736
719a933f6a Updated README 2023-12-30 15:38:00 -05:00
loof2736
d934806eba Updated README 2023-12-30 15:36:39 -05:00
loof2736
9d85fa0cbc Updated README 2023-12-30 15:34:05 -05:00
loof2736
09617c61f9 Updated README.md 2023-12-30 15:28:24 -05:00
loof2736
52d2a8712e Fix for non-rounded selection menu 2023-12-30 14:49:50 -05:00
Josh Wilberger
7dd461c011
Update README.md 2023-12-03 06:18:50 -05:00
loof2736
f53bc0ce42 Merge branch 'main' of github.com:loof2736/scyfin 2023-12-03 06:07:25 -05:00
loof2736
76b6c4c9ea Fixed scaling issues 2023-12-03 06:07:13 -05:00
Josh Wilberger
eee307258b
Update README.md 2023-12-03 04:51:01 -05:00
loof2736
9ca2bd2cdd Updated README 2023-12-03 04:47:40 -05:00
loof2736
b3b421b591 Added option to disable static left drawer 2023-12-03 04:42:50 -05:00
Josh Wilberger
f31810f4fd
Merge pull request #4 from JamsRepos/main
Fix Dropdown Padding on Tracks
2023-12-03 02:07:24 -05:00
Jam
b3c2c88cd2 Fixed dropdown padding. 2023-10-11 21:40:13 +01:00
loof2736
f63de9286f Updated README 2023-08-03 18:19:41 -04:00
44 changed files with 1606 additions and 1174 deletions

View File

@ -1,504 +0,0 @@
/* Increase size of Jellyfin logo */
.layout-desktop .pageTitleWithLogo {
margin-left: 15px !important;
height: 40px !important;
margin-top: 5px !important;
}
/* Static left drawer */
.layout-desktop .mainDrawer {
transform: none !important;
left: 0 !important;
top: 0 !important;
width: 250px !important;
/* Modified background color */
background-color: transparent !important;
/* Move drawer behind header */
z-index: 998 !important;
}
/* Lower drawer buttons */
.layout-desktop .mainDrawer-scrollContainer {
margin-top: 95px !important;
}
.layout-mobile .mainDrawer-scrollContainer {
margin-top: 20px !important;
}
/* Shift content to the right */
.layout-desktop .libraryPage:not(#editItemMetadataPage) {
margin-left: 250px !important;
}
/* Fix for Jellyfin Media Player */
.quickConnectSettingsContainer {
margin-left: 250px !important;
}
/* Hide transition on page load */
.layout-desktop .touch-menu-la.transition {
transition: none !important;
}
/* Hide hamburger button */
.layout-desktop .mainDrawerButton {
display: none !important;
}
/* Fix for dashboard drawer button height */
.layout-desktop .dashboardDocument .mainDrawer-scrollContainer {
padding-top: 0 !important;
}
/* Hide home button */
.layout-desktop .headerHomeButton {
display: none !important;
}
.layout-desktop .dashboardDocument .headerHomeButton {
display: block !important;
}
/* Fix for video player and login page */
.layout-desktop .hide-scroll .mainDrawer,
.layout-desktop .hideMainDrawer .mainDrawer {
left: -320px !important;
}
/* Fix for scroll menus on home page */
.emby-scroller {
margin-right: -2% !important;
}
/* Rounded cards */
.cardContent,
.cardPadder,
.cardOverlayContainer,
.blurhash-canvas,
.dialog {
border-radius: 10px !important;
}
/* Floating progress bar */
.innerCardFooter {
bottom: 5% !important;
width: 90% !important;
margin: auto !important;
border-radius: 100px !important;
}
.itemProgressBar {
height: 8px !important;
}
.innerCardFooterClear {
background-color: black !important;
}
/* Green watched indicator */
.playedIndicator {
background: #409843 !important;
}
/* Rounded left drawer buttons */
.navMenuOption,
.navMenuOption:hover,
.navMenuOption-selected {
border-radius: 100px !important;
width: 85% !important;
margin: auto !important;
text-align: center !important;
height: 45px !important;
}
.navMenuOption:hover:not(.navMenuOption-selected) {
background-color: rgba(44, 44, 44, 0.7);
}
/* Center icons and text and shift to the left */
.navMenuOptionIcon,
.navMenuOptionText {
position: inherit !important;
left: -10% !important;
margin-top: 0 !important;
}
/* Fix for header buttons */
.layout-desktop .emby-button-foreground {
top: -9px !important;
}
/* Custom button color */
.navMenuOption-selected {
background: rgba(33, 149, 243, 0.2) !important;
color: rgb(33, 149, 243) !important;
backdrop-filter: blur(50px) !important;
}
/* Transparent header bar */
.skinHeader {
background-color: transparent !important;
}
.layout-desktop .skinHeader {
padding-top: 1.5em !important;
}
/* Rounded header buttons */
.headerTabs,
.headerRight {
background-color:rgba(35, 35, 35, 0.5) !important;
border-radius: 50px !important;
backdrop-filter: blur(50px) !important;
}
.layout-desktop .headerTabs,
.layout-desktop .headerRight {
margin-left: 250px !important;
margin-bottom: 10px !important;
}
/* Button height */
.headerRight,
.emby-tab-button {
height: 45px !important;
}
/* Lower header and add padding to right buttons */
.layout-desktop .headerRight {
padding: 0px 5px !important;
}
/* Move left header back up */
.layout-desktop .headerLeft {
position: relative !important;
top: -17px !important;
}
/* Mobile fixes */
.layout-mobile .headroom--unpinned {
transform: translateY(-50%);
}
.layout-mobile .sectionTabs {
margin-left: auto !important;
margin-right: auto !important;
width: auto !important;
}
.layout-mobile .emby-button-foreground {
top: -2px !important;
}
/* Settings and dashboard modifications */
.emby-input,
.emby-textarea,
.paperList,
.listItem:hover,
.subtitleappearance-preview {
border-radius: 15px !important;
}
.button-submit,
.emby-select,
.checkboxOutline,
.btnRefresh,
#btnShutdown,
.raised {
border-radius: 100px !important;
}
/* Modify username placement on profile page */
.layout-desktop #userProfilePage .readOnlyContent div:not([class]), div[class=""]{
align-items: initial !important;
}
.layout-desktop .username {
margin: 0px 0px 10px 10px !important;
}
/* Red shutdown button */
#btnShutdown {
background: #AE3739 !important;
}
/* Remove border under certain dashboard items */
.listItem-border {
border: 0 !important;
}
/* Add padding to list items */
.layout-desktop .listItem {
padding-left: 15px !important;
}
/* Rounded dashboard cards */
.cardBox {
border-radius: 15px !important;
}
/* Removed ugliness of border-card styling */
.layout-desktop fieldset.verticalSection-extrabottompadding {
border-radius: 15px !important;
border-color: #3B3B3B !important;
padding: 10px 35px !important;
}
/* Metadata editor fixes */
.editPageSidebar {
margin-left: 250px !important;
width: 20% !important;
}
.layout-desktop #editItemMetadataPage {
margin-left: 215px !important;
}
.jstree-default-large .jstree-node {
line-height: 35px !important;
}
.jstree-default .jstree-wholerow-clicked {
background: rgba(33, 149, 243, 0.2) !important;
}
.jstree-wholerow-hovered {
background: rgba(35, 35, 35, 0.5) !important;
}
.jstree-children {
margin-left: -10px !important;
}
#editItemMetadataPage .btnHeaderSave {
background: #00A4DC !important;
border-radius: 100px !important;
height: 40px !important;
color: white !important;
}
/* Remove show/movie image on details page */
.layout-desktop .detailImageContainer {
display: none !important;
}
/* Re-position content on details page */
.layout-desktop .detailSection {
margin-right: 0 !important;
}
.layout-desktop .detailPageContent {
padding-left: 4% !important;
}
/* Re-position logo */
.layout-desktop .detailLogo {
right: 0 !important;
left: 4% !important;
top: 14vh !important;
}
/* Transparent ribbon bar */
.detailRibbon {
background: transparent !important;
}
/* Add card around top-right buttons */
.layout-desktop .mainDetailButtons {
background: rgba(35, 35, 35, 0.5) !important;
border-radius: 100px !important;
backdrop-filter: blur(10px) !important;
}
.layout-mobile .mainDetailButtons {
background: #181818 !important;
border-radius: 100px !important;
}
/* Add card around groups section */
.layout-desktop .detailsGroupItem {
background: rgba(35, 35, 35, 0.5) !important;
padding: 10px 20px !important;
border-radius: 100px !important;
width: fit-content !important;
max-width: max-content !important;
backdrop-filter: blur(40px) !important;
}
/* Fix for groups section card */
.layout-desktop .content.focuscontainer-x {
white-space: nowrap !important;
padding-right: 48px !important;
}
/* Alternative mobile group section card */
.layout-mobile .itemDetailsGroup {
background: #181818 !important;
padding: 15px 20px 5px 20px !important;
border-radius: 15px !important;
}
/* Add card around description */
.layout-desktop .detailSectionContent {
background: rgba(35, 35, 35, 0.5) !important;
border-radius: 15px !important;
padding: 40px 20px 10px 20px !important;
margin-top: 50px !important;
backdrop-filter: blur(40px) !important;
}
.layout-mobile .detailSectionContent {
background: #181818 !important;
border-radius: 15px !important;
padding: 10px 20px !important;
}
/* Add card around track selection */
.layout-desktop .trackSelections {
background: rgba(35, 35, 35, 0.5) !important;
border-radius: 15px !important;
padding: 10px 20px !important;
margin-top: 20px !important;
backdrop-filter: blur(40px) !important;
}
.layout-mobile .trackSelections {
background: #181818 !important;
border-radius: 15px !important;
padding: 10px 20px !important;
margin-top: 20px !important;
}
/* Re-position title */
.layout-desktop .infoWrapper {
margin-top: 245px !important;
}
.layout-desktop .detailPagePrimaryContainer {
padding-left: 4% !important;
}
.layout-desktop .nameContainer {
position: absolute !important;
margin-top: -55px !important;
}
.layout-desktop .itemMiscInfo {
position: absolute !important;
margin-left: 21px !important;
margin-top: 16px !important;
}
/* Move track selection box */
.detailSection {
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
}
.detailSection .detailSectionContent {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
box-ordinal-group: 1;
}
.detailSection .recordingFields {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
}
.detailSection .trackSelections {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
box-ordinal-group: 3;
}
.detailSection .itemDetailsGroup {
-webkit-box-ordinal-group: 4;
-moz-box-ordinal-group: 4;
box-ordinal-group: 4;
}
/* Fix for backdrops */
.layout-desktop #itemBackdrop {
display: none !important;
}
.layout-desktop .detailPageWrapperContainer {
padding-top: 20% !important;
}
/* Move episode title */
.layout-desktop .nameContainer {
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
}
.layout-desktop .nameContainer .parentName {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
box-ordinal-group: 1;
}
.layout-desktop .nameContainer .itemName {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
margin: 0.45em 0 0 0 !important;
}
/* Live TV */
/* Modified background color of active guide cells */
.programCell-active {
background: #181818 !important;
}
/* Translucent buttons */
.raised.emby-button:not(.button-submit) {
background: rgba(35, 35, 35, 0.5) !important;
backdrop-filter: blur(40px) !important;
}
/* Repositioned record button */
.recordingFields {
margin: 5px 0 -7px 0 !important;
}
.recordingButton {
height: 40px !important;
}
.recordingIcon {
color: red !important;
}
/* Remove overlapping text */
.itemMiscInfo.itemMiscInfo-secondary {
margin-left: 65px !important;
}
/* Player modifications */
.upNextContainer, .toastVisible, .sliderBubble {
backdrop-filter: blur(50px) !important;
}
.upNextContainer {
border-radius: 15px !important;
background-color: rgba(0, 0, 0, 0.7) !important;
}
.toastVisible {
border-radius: 30px !important;
background-color: rgba(35, 35, 35, 0.5) !important;
}
.sliderBubble {
border-radius: 15px !important;
background-color: rgba(0,0,0,0.5) !important;
height: 55px !important
}
/* Support for Jellyscrub plugin */
.chapterThumbContainer {
margin-bottom: 135px !important;
border-radius: 15px !important;
}
/* Fix for scaling issues */
@media (width: 1600px) {
.layout-desktop .headerRight {
margin-bottom: 0 !important;
}
.layout-desktop .emby-button-foreground {
top: -4px !important;
}
}
@media (max-width: 1599px) {
.layout-desktop .pageTitleWithLogo {
margin-left: 25px !important;
}
.layout-desktop .headerTabs {
margin-top: -65px !important;
}
.layout-desktop .headerRight {
margin-right: 15px !important;
}
.layout-desktop .sectionTabs {
width: auto !important;
align-self: center !important;
}
.layout-desktop .emby-button-foreground {
top: -2px !important;
}
}

View File

@ -1,489 +0,0 @@
/* Increase size of Jellyfin logo */
.layout-desktop .pageTitleWithLogo {
margin-left: 15px !important;
height: 40px !important;
margin-top: 5px !important;
}
/* Static left drawer */
.layout-desktop .mainDrawer {
transform: none !important;
left: 0 !important;
top: 0 !important;
width: 250px !important;
/* Modified background color */
background-color: #181818 !important;
/* Added border to right side */
border-right: 1px solid #3B3B3B !important;
/* Move drawer behind header */
z-index: 998 !important;
}
/* Lower drawer buttons */
.layout-desktop .mainDrawer-scrollContainer {
margin-top: 95px !important;
}
.layout-mobile .mainDrawer-scrollContainer {
margin-top: 20px !important;
}
/* Shift content to the right */
.layout-desktop .libraryPage:not(#editItemMetadataPage) {
margin-left: 250px !important;
}
/* Fix for Jellyfin Media Player */
.quickConnectSettingsContainer {
margin-left: 250px !important;
}
/* Hide transition on page load */
.layout-desktop .touch-menu-la.transition {
transition: none !important;
}
/* Hide hamburger button */
.layout-desktop .mainDrawerButton {
display: none !important;
}
/* Fix for dashboard drawer button height */
.layout-desktop .dashboardDocument .mainDrawer-scrollContainer {
padding-top: 0 !important;
}
/* Hide home button */
.layout-desktop .headerHomeButton {
display: none !important;
}
.layout-desktop .dashboardDocument .headerHomeButton {
display: block !important;
}
/* Fix for video player and login page */
.layout-desktop .hide-scroll .mainDrawer,
.layout-desktop .hideMainDrawer .mainDrawer {
left: -320px !important;
}
/* Fix for scroll menus on home page */
.emby-scroller {
margin-right: -2% !important;
}
/* Rounded cards */
.cardContent,
.cardPadder,
.cardOverlayContainer,
.blurhash-canvas,
.dialog {
border-radius: 10px !important;
}
/* Floating progress bar */
.innerCardFooter {
bottom: 5% !important;
width: 90% !important;
margin: auto !important;
border-radius: 100px !important;
}
.itemProgressBar {
height: 8px !important;
}
.innerCardFooterClear {
background-color: black !important;
}
/* Green watched indicator */
.playedIndicator {
background: #409843 !important;
}
/* Rounded left drawer buttons */
.navMenuOption,
.navMenuOption:hover,
.navMenuOption-selected {
border-radius: 100px !important;
width: 85% !important;
margin: auto !important;
text-align: center !important;
height: 45px !important;
}
.navMenuOption:hover:not(.navMenuOption-selected) {
background-color: rgba(44, 44, 44, 0.7);
}
/* Center icons and text and shift to the left */
.navMenuOptionIcon,
.navMenuOptionText {
position: inherit !important;
left: -10% !important;
margin-top: 0 !important;
}
/* Fix for header buttons */
.layout-desktop .emby-button-foreground {
top: -9px !important;
}
/* Custom button color */
.navMenuOption-selected {
background: rgba(33, 149, 243, 0.2) !important;
color: rgb(33, 149, 243) !important;
}
/* Modified background color */
.backgroundContainer,
.dialog,
html {
background-color: #0F0F0F !important;
}
/* Transparent header bar */
.skinHeader {
background-color: transparent !important;
}
.layout-desktop .skinHeader {
padding-top: 1.5em !important;
}
/* Rounded header buttons */
.headerTabs,
.headerRight {
background-color:rgba(35, 35, 35, 0.5) !important;
border-radius: 50px !important;
backdrop-filter: blur(50px) !important;
}
.layout-desktop .headerTabs,
.layout-desktop .headerRight {
margin-left: 250px !important;
margin-bottom: 10px !important;
}
/* Button height */
.headerRight,
.emby-tab-button {
height: 45px !important;
}
/* Lower header and add padding to right buttons */
.layout-desktop .headerRight {
padding: 0px 5px !important;
}
/* Move left header back up */
.layout-desktop .headerLeft {
position: relative !important;
top: -17px !important;
}
/* Mobile fixes */
.layout-mobile .headroom--unpinned {
transform: translateY(-50%);
}
.layout-mobile .sectionTabs {
margin-left: auto !important;
margin-right: auto !important;
width: auto !important;
}
.layout-mobile .emby-button-foreground {
top: -2px !important;
}
/* Player modifications */
.upNextContainer, .toastVisible, .sliderBubble {
backdrop-filter: blur(50px) !important;
}
.upNextContainer {
border-radius: 15px !important;
background-color: rgba(0, 0, 0, 0.7) !important;
}
.toastVisible {
border-radius: 30px !important;
background-color: rgba(35, 35, 35, 0.5) !important;
}
.sliderBubble {
border-radius: 15px !important;
background-color: rgba(0,0,0,0.5) !important;
height: 55px !important
}
/* Support for Jellyscrub plugin */
.chapterThumbContainer {
margin-bottom: 135px !important;
border-radius: 15px !important;
}
/* Settings and dashboard modifications */
.emby-input,
.emby-textarea,
.paperList,
.listItem:hover,
.subtitleappearance-preview {
border-radius: 15px !important;
}
.button-submit,
.emby-select,
.checkboxOutline,
.btnRefresh,
#btnShutdown,
.raised {
border-radius: 100px !important;
}
/* Modify username placement on profile page */
.layout-desktop #userProfilePage .readOnlyContent div:not([class]), div[class=""]{
align-items: initial !important;
}
.layout-desktop .username {
margin: 0px 0px 10px 10px !important;
}
/* Red shutdown button */
#btnShutdown {
background: #AE3739 !important;
}
/* Remove border under certain dashboard items */
.listItem-border {
border: 0 !important;
}
/* Add padding to list items */
.layout-desktop .listItem {
padding-left: 15px !important;
}
/* Rounded dashboard cards */
.cardBox {
border-radius: 15px !important;
}
/* Removed ugliness of border-card styling */
.layout-desktop fieldset.verticalSection-extrabottompadding {
border-radius: 15px !important;
border-color: #3B3B3B !important;
padding: 10px 35px !important;
}
/* Metadata editor fixes */
.editPageSidebar {
margin-left: 250px !important;
width: 20% !important;
}
.layout-desktop #editItemMetadataPage {
margin-left: 215px !important;
}
.jstree-default-large .jstree-node {
line-height: 35px !important;
}
.jstree-default .jstree-wholerow-clicked {
background: rgba(33, 149, 243, 0.2) !important;
}
.jstree-wholerow-hovered {
background: rgba(35, 35, 35, 0.5) !important;
}
.jstree-children {
margin-left: -10px !important;
}
#editItemMetadataPage .btnHeaderSave {
background: #00A4DC !important;
border-radius: 100px !important;
height: 40px !important;
color: white !important;
}
/* Remove show/movie image on details page */
.layout-desktop .detailImageContainer {
display: none !important;
}
/* Re-position content on details page */
.layout-desktop .detailSection {
margin-right: 0 !important;
}
.layout-desktop .detailPageContent {
padding-left: 4% !important;
}
/* Re-position logo */
.layout-desktop .detailLogo {
right: 0 !important;
left: 4% !important;
top: 14vh !important;
}
/* Transparent ribbon bar */
.detailRibbon {
background: transparent !important;
}
/* Add card around top-right buttons */
.mainDetailButtons {
background: rgba(35, 35, 35, 0.5) !important;
border-radius: 100px !important;
backdrop-filter: blur(10px) !important;
}
/* Add card around groups section */
.layout-desktop .detailsGroupItem {
background: #181818 !important;
padding: 10px 20px !important;
border-radius: 100px !important;
width: fit-content !important;
max-width: max-content !important;
}
/* Fix for groups section card */
.layout-desktop .content.focuscontainer-x {
white-space: nowrap !important;
padding-right: 48px !important;
}
/* Alternative mobile group section card */
.layout-mobile .itemDetailsGroup {
background: #181818 !important;
padding: 15px 20px 5px 20px !important;
border-radius: 15px !important;
}
/* Add card around description */
.layout-desktop .detailSectionContent {
background: #181818 !important;
border-radius: 15px !important;
padding: 40px 20px 10px 20px !important;
margin-top: 50px !important;
}
.layout-mobile .detailSectionContent {
background: #181818 !important;
border-radius: 15px !important;
padding: 10px 20px !important;
}
/* Add card around track selection */
.trackSelections {
background: #181818 !important;
border-radius: 15px !important;
padding: 10px 20px !important;
margin-top: 20px !important;
}
/* Re-position title */
.layout-desktop .infoWrapper {
margin-top: 245px !important;
}
.layout-desktop .detailPagePrimaryContainer {
padding-left: 4% !important;
}
.layout-desktop .nameContainer {
position: absolute !important;
margin-top: -55px !important;
}
.layout-desktop .itemMiscInfo {
position: absolute !important;
margin-left: 21px !important;
margin-top: 16px !important;
}
/* Move track selection box */
.detailSection {
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
}
.detailSection .detailSectionContent {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
box-ordinal-group: 1;
}
.detailSection .recordingFields {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
}
.detailSection .trackSelections {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
box-ordinal-group: 3;
}
.detailSection .itemDetailsGroup {
-webkit-box-ordinal-group: 4;
-moz-box-ordinal-group: 4;
box-ordinal-group: 4;
}
/* Move episode title */
.layout-desktop .nameContainer {
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
}
.layout-desktop .nameContainer .parentName {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
box-ordinal-group: 1;
}
.layout-desktop .nameContainer .itemName {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
margin: 0.45em 0 0 0 !important;
}
/* Live TV */
/* Modified background color of active guide cells */
.programCell-active {
background: #181818 !important;
}
/* Repositioned record button */
.recordingFields {
margin: 5px 0 -7px 0 !important;
}
.recordingButton {
height: 40px !important;
}
.recordingIcon {
color: red !important;
}
/* Remove overlapping text */
.itemMiscInfo.itemMiscInfo-secondary {
margin-left: 65px !important;
}
/* Fix for scaling issues */
@media (width: 1600px) {
.layout-desktop .headerRight {
margin-bottom: 0 !important;
}
.layout-desktop .emby-button-foreground {
top: -4px !important;
}
}
@media (max-width: 1599px) {
.layout-desktop .pageTitleWithLogo {
margin-left: 25px !important;
}
.layout-desktop .headerTabs {
margin-top: -65px !important;
}
.layout-desktop .headerRight {
margin-right: 15px !important;
}
.layout-desktop .sectionTabs {
width: auto !important;
align-self: center !important;
}
.layout-desktop .emby-button-foreground {
top: -2px !important;
}
}

View File

@ -0,0 +1,118 @@
/* Reset size of Jellyfin logo */
.layout-desktop .pageTitleWithLogo {
height: 30px !important;
width: 100px !important;
margin: 0 1em 0 .5em !important;
}
[dir="ltr"] .pageTitle {
margin: 0 1em 0 .5em !important;
}
/* Un-static left drawer */
.layout-desktop .mainDrawer:not(.dashboardDocument) {
left: -320px !important;
z-index: 1099 !important;
border-top-right-radius : var(--rounded-cards) !important;
border-bottom-right-radius : var(--rounded-cards) !important;
background: var(--secondary-background-color) !important;
backdrop-filter: none !important;
}
.layout-desktop:has(.backgroundContainer.withBackdrop) .mainDrawer:not(.dashboardDocument) {
width: 275px !important;
background-color: var(--primary-background-transparent) !important;
backdrop-filter: blur(var(--blur)) !important;
}
@supports not selector(:has(*)) {
.layout-desktop .backgroundContainer.withBackdrop + div .mainDrawer {
background: var(--secondary-background-color) !important;
backdrop-filter: none !important;
}
.layout-desktop #itemDetailPage.noBackdropTransparency::after {
display: none !important;
}
}
/* Lower drawer buttons */
.layout-desktop .mainDrawer-scrollContainer {
margin-top: 15px !important;
}
/* Shift content back to the left */
.layout-desktop .libraryPage:not(#editItemMetadataPage) {
margin-left: 0px !important;
}
/* Fix for Jellyfin Media Player */
.quickConnectSettingsContainer {
margin-left: 0px !important;
}
/* Add transition back */
.layout-desktop .touch-menu-la.transition {
transition: transform .24s ease-out,left .26s ease-out,-webkit-transform .24s ease-out !important;
}
/* Show hamburger button */
.layout-desktop body:not(.hideMainDrawer) .mainDrawerButton:not(.dashboardDocument) {
display: inline-flex !important;
}
/* Fix for dashboard */
.layout-desktop .dashboardDocument .mainDrawer {
top: 0px !important;
left: 0px !important;
width: 300px !important;
z-index: 998 !important;
}
.layout-desktop .dashboardDocument .mainDrawer-scrollContainer {
padding-top: 75px !important;
}
/* Re-center header buttons */
.layout-desktop .headerTabs {
margin-left: 0px !important;
}
/* Re-enable home button */
.layout-desktop body:not(.hideMainDrawer) .skinHeader:not(.noHomeButtonHeader) .headerHomeButton {
display: block !important;
}
.layout-desktop body:not(.hideMainDrawer) .dashboardDocument .headerHomeButton {
display: block !important;
}
/* Fix for scroll menus on home page */
.emby-scroller {
margin-right: 3.3% !important;
}
/* Background for top left buttons */
.layout-desktop body:not(.hideMainDrawer) .headerLeft:not(.libraryDocument:has(.videoPlayerContainer) .headerLeft) {
padding: 2px !important;
top: -3px !important;
background-color: var(--primary-background-transparent) !important;
border-radius: 50px !important;
backdrop-filter: blur(var(--blur)) !important;
}
/* Fix for JMP */
@supports not selector(:has(*)) {
.layout-desktop body:not(.hideMainDrawer) .headerLeft {
padding: 2px !important;
top: -3px !important;
background-color: var(--primary-background-transparent) !important;
border-radius: 50px !important;
backdrop-filter: blur(var(--blur)) !important;
}
}
.headerLeft {
flex-grow: 0 !important;
-webkit-flex-grow: 0 !important;
}
.headerRight {
position: absolute !important;
right: 12px !important;
}
/* Music Player */
.layout-desktop .appfooter {
margin-left: 0px !important;
}

View File

@ -1,8 +0,0 @@
/* Rounded cards */
.cardContent,
.cardPadder,
.cardOverlayContainer,
.blurhash-canvas,
.dialog {
border-radius: 15px !important;
}

View File

@ -1,20 +0,0 @@
/* Rounded buttons */
.navMenuOption,
.navMenuOption:hover,
.navMenuOption-selected {
border-radius: 100px !important;
width: 85% !important;
margin: auto !important;
/* Modify button height (optional)
height: 45px !important;
*/
}
/* Center content vertically and shift to the left */
.navMenuOptionIcon,
.navMenuOptionText {
position: inherit !important;
left: -7% !important;
margin-top: 0 !important;
}

1300
CSS/scyfin-theme.css Normal file

File diff suppressed because it is too large Load Diff

View File

@ -1,37 +0,0 @@
/* Static left drawer */
.layout-desktop .mainDrawer {
transform: none !important;
left: 0 !important;
top: 65px !important;
width: 250px !important;
}
/* Shift content to the right */
.layout-desktop .libraryPage {
margin-left: 225px !important;
}
/* Hide transition on page load */
.layout-desktop .touch-menu-la.transition {
transition: none !important;
}
/* Hide hamburger button */
.layout-desktop .mainDrawerButton {
display: none !important;
}
/* Fix for dashboard height */
.layout-desktop .dashboardDocument .mainDrawer {
top: 0px !important;
}
/* Re-center header buttons */
.layout-desktop .headerTabs {
margin-left: 250px !important;
}
/* Fix for video player and login page */
.layout-desktop .hide-scroll .mainDrawer,
.layout-desktop .hideMainDrawer .mainDrawer {
left: -320px !important;
}

7
CSS/theme-coral.css Normal file
View File

@ -0,0 +1,7 @@
:root {
--primary-r: 234;
--primary-g: 112;
--primary-b: 112;
--primary-accent-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 1.0);
--secondary-accent-color: rgba(234, 112, 112, 0.2);
}

71
CSS/theme-oled.css Normal file
View File

@ -0,0 +1,71 @@
/* Variables */
:root {
--primary-background-color: #000;
--secondary-background-color: #101010;
--tertiary-background-color: #181818;
--outline-color: #252525;
--primary-background-transparent: rgba(35,35,35,0.5);
--secondary-background-transparent: rgba(0,0,0,0.6);
}
.fab,
.raised,
.collapseContent,
.formDialogFooter:not(.formDialogFooter-clear),
.formDialogHeader:not(.formDialogHeader-clear),
.paperList,
.visualCardBox {
background: var(--secondary-background-color) !important;
}
.checkboxList.paperList {
background: var(--primary-background-color) !important;
border: 2px solid var(--outline-color) !important;
}
.MuiPaper-root.MuiPopover-paper {
background: var(--tertiary-background-color) !important;
}
.button-submit {
background: var(--secondary-accent-color) !important;
color: var(--primary-accent-color) !important;
}
.emby-checkbox:checked + span + .checkboxOutline {
background: var(--secondary-accent-color) !important;
border-color: var(--secondary-accent-color) !important;
}
.checkboxIcon {
color: var(--primary-accent-color)
}
.layout-desktop .detailSectionContent,
.trackSelections,
.layout-desktop .detailsGroupItem,
.layout-desktop .localnav {
background: var(--primary-background-color) !important;
border: 2px solid var(--outline-color) !important;
}
.listItem:hover {
background: var(--secondary-background-color) !important;
}
select,
textarea,
input:not(.mdl-slider) {
background: var(--primary-background-color) !important;
border: 2px solid var(--outline-color) !important;
}
.navMenuOption:hover:not(.navMenuOption-selected) {
background: var(--tertiary-background-color) !important;
}
.emby-checkbox:focus:not(:checked) + span + .checkboxOutline {
border-color: var(--secondary-accent-color) !important;
}
.checkboxOutline {
border-color: var(--outline-color) !important;
}

7
CSS/theme-seafoam.css Normal file
View File

@ -0,0 +1,7 @@
:root {
--primary-r: 147;
--primary-g: 215;
--primary-b: 182;
--primary-accent-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 1.0);
--secondary-accent-color: #93D7B620;
}

24
CSS/theme-snow.css Normal file
View File

@ -0,0 +1,24 @@
:root {
--primary-r: 232;
--primary-g: 236;
--primary-b: 239;
--primary-accent-color: rgba(var(--primary-r), var(--primary-g), var(--primary-b), 1.0);
--secondary-accent-color: rgba(232, 236, 239, 0.2);
/* Alternate accents*/
--primary-alt1: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 0.85);
--primary-alt2: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 0.7);
--primary-alt3: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 0.55);
--primary-alt4: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 0.4);
--primary-alt5: rgb(calc(var(--primary-r) - 30), calc(var(--primary-g) - 30), calc(var(--primary-b) - 30), 0.25);
}
.layout-desktop .button-submit,
.layout-desktop .checkboxIcon,
.layout-desktop .countIndicator {
color: var(--secondary-background-color) !important;
}
#skipIntro .emby-button:hover {
color: #000 !important;
}

View File

@ -1,79 +0,0 @@
/* Transparent header bar */
.skinHeader {
background-color: transparent !important;
}
/* Rounded header buttons */
.headerTabs,
.headerRight {
background-color:rgba(35, 35, 35, 0.5) !important;
border-radius: 50px !important;
backdrop-filter: blur(50px) !important;
}
/* Lower header and add padding to right buttons */
.layout-desktop .headerRight {
padding: 5px !important;
}
/* Header size */
.layout-desktop .headerTabs {
height: 52px !important;
top: 1px !important;
}
.layout-mobile .headerTabs {
height: 45px !important;
}
/* Center text */
.emby-button-foreground {
top: -6px !important;
}
/* Mobile fixes */
.layout-mobile .headroom--unpinned {
transform: translateY(-50%);
}
.layout-mobile .sectionTabs {
margin-left: auto !important;
margin-right: auto !important;
width: auto !important;
}
.layout-mobile .emby-button-foreground {
top: -2px !important;
}
/* Fix for scaling issues */
@media (width: 1600px) {
.layout-desktop .headerRight {
margin-bottom: 0 !important;
}
.layout-desktop .headerTabs {
top: -7px !important;
}
}
@media (max-width: 1600px) {
.layout-desktop .emby-button-foreground {
top: -1px !important;
}
}
@media (max-width: 1599px) {
.layout-desktop .pageTitleWithLogo {
margin-left: 25px !important;
}
.layout-desktop .headerTabs {
margin-top: -65px !important;
}
.layout-desktop .headerRight {
margin-right: 15px !important;
}
.layout-desktop .sectionTabs {
width: auto !important;
align-self: center !important;
}
}
@media (max-width: 100em) {
.withSectionTabs .headerTop {
padding-bottom: 1em !important;
}
}

116
README.md
View File

@ -1,47 +1,89 @@
<img src="./images/scyfin-full.svg" alt="scyfin logo" width="200"/> <img src="./images/scyfin-full.png" alt="scyfin logo" width="200"/>
### **Modern CSS theme for Jellyfin with support for backdrops and custom accent colors**
[Go to installation](#installation)
--- ---
Custom CSS theme for Jellyfin (plus a backdrops supported version) ### **Scyfin Base Theme**
---
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 */ @import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/scyfin-theme.css');
.layout-desktop .libraryPage:not(#editItemMetadataPage) {margin-left: 250px !important;} ```
<img src="./images/homepage.png" alt="homepage" width="100%"/>
<img src="./images/homepage-backdrops.png" alt="homepage-backdrops" width="100%"/>
<img src="./images/details.png" alt="details" width="100%"/>
<img src="./images/details-backdrops.png" alt="details-backdrops" width="100%"/>
<img src="./images/movies.png" alt="movies" width="100%"/>
<img src="./images/login.png" alt="login" width="100%"/>
---
### **Options (Add these below the base theme)**
### Disable static left drawer
```
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/disable-static-drawer.css');
``` ```
--- ---
Scyfin Complete Theme - Backdrops Supported ### **Themes:**
### Seafoam
Note -
Only add 1 version of the theme, do not add both the normal Scyfin theme and the backdrops supported version together
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 */ @import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-seafoam.css');
.layout-desktop .libraryPage:not(#editItemMetadataPage) {margin-left: 250px !important;}
``` ```
<img src="./images/seafoam.png" alt="seafoam-theme" width="40%"/>
### Coral
```
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-coral.css');
```
<img src="./images/coral.png" alt="coral-theme" width="40%"/>
### Snow
```
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-snow.css');
```
<img src="./images/snow.png" alt="snow-theme" width="40%"/>
### OLED
```
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-oled.css');
```
<img src="./images/homepage-oled.png" alt="homepage-oled" width="90%"/>
<img src="./images/details-oled.png" alt="details-oled" width="90%"/>
---
### **Installation:**
---
**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 "Branding"
* Near the bottom, under "Custom CSS code", paste the `@import url` for the base Scyfin theme
* Example:
* <img src="./images/install-server-base.png" alt="install-server-base" width="80%"/>
* Optional - Paste the `@import url` for any options / themes you may want
* Example:
* <img src="./images/install-server-options.png" alt="install-server-options" width="80%"/>
* 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 `@import url` for the base Scyfin 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
* Example:
* <img src="./images/install-client-base.png" alt="install-client-base" width="80%"/>
* Optional - Paste the `@import url` for any options / themes you may want
* Example:
* <img src="./images/install-client-options.png" alt="install-client-options" width="80%"/>
* Click "Save"

Binary file not shown.

Before

Width:  |  Height:  |  Size: 311 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 MiB

BIN
images/coral.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
images/dashboard.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 349 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 MiB

BIN
images/details-oled.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
images/details.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
images/homepage-oled.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
images/homepage.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1004 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

BIN
images/login.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

BIN
images/movies.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 268 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 481 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 421 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 136 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 102 KiB

BIN
images/seafoam.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
images/snow.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 MiB