separated colors into separate files for easier color theming

CSS/css-colors/scyfin-theme-backdrop.css

@@ -0,0 +1,144 @@
+/* Static left drawer */
+.layout-desktop .mainDrawer {
+    /* Modified background color */
+    background-color: transparent !important;
+}
+
+
+
+
+.innerCardFooterClear {
+    background-color: black !important;
+}
+
+
+
+/* Green watched indicator */
+.playedIndicator {
+    background: #409843 !important;
+}
+
+
+
+
+.navMenuOption:hover:not(.navMenuOption-selected) {
+    background-color: rgba(44, 44, 44, 0.7);
+}
+
+
+
+
+/* Custom button color */
+.navMenuOption-selected {
+    background: rgba(33, 149, 243, 0.2) !important;
+    color: rgb(33, 149, 243) !important;
+}
+
+
+
+/* Transparent header bar */
+.skinHeader {
+    background-color: transparent !important;
+}
+/* Rounded header buttons */
+.headerTabs,
+.headerRight {
+    background-color:rgba(35, 35, 35, 0.5) !important;
+}
+
+
+
+/* Red shutdown button */
+#btnShutdown {
+    background: #AE3739 !important;
+}
+/* Removed ugliness of border-card styling */
+.layout-desktop fieldset.verticalSection-extrabottompadding {
+    border-color: #3B3B3B !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;
+}
+#editItemMetadataPage .btnHeaderSave {
+    background: #00A4DC !important;
+    color: white !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;
+}
+.layout-mobile .mainDetailButtons {
+    background: #181818 !important;
+}
+
+/* Add card around groups section */
+.layout-desktop .detailsGroupItem {
+    background: rgba(35, 35, 35, 0.5) !important;
+}
+
+
+/* Alternative mobile group section card */
+.layout-mobile .itemDetailsGroup {
+    background: #181818 !important;
+}
+
+/* Add card around description */
+.layout-desktop .detailSectionContent {
+    background: rgba(35, 35, 35, 0.5) !important;
+}
+.layout-mobile .detailSectionContent {
+    background: #181818 !important;
+}
+
+/* Add card around track selection */
+.layout-desktop .trackSelections {
+    background: rgba(35, 35, 35, 0.5) !important;
+}
+.layout-mobile .trackSelections {
+    background: #181818 !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;
+}
+.recordingIcon {
+    color: red !important;
+}
+
+
+
+/* Player modifications */
+.upNextContainer {
+    background-color: rgba(0, 0, 0, 0.7) !important;
+}
+.toastVisible {
+    background-color: rgba(35, 35, 35, 0.5) !important;
+}
+.sliderBubble {
+    background-color: rgba(0,0,0,0.5) !important;
+}
+

CSS/css-colors/scyfin-theme.css

@@ -0,0 +1,147 @@
+
+/* Static left drawer */
+.layout-desktop .mainDrawer {
+
+    /* Modified background color */
+    background-color: #181818 !important;
+    /* Added border to right side */
+    border-right: 1px solid #3B3B3B !important;
+    /* Move drawer behind header */
+}
+
+
+.innerCardFooterClear {
+    background-color: black !important;
+}
+
+/* Green watched indicator */
+.playedIndicator {
+    background: #409843 !important;
+}
+
+
+
+
+.navMenuOption:hover:not(.navMenuOption-selected) {
+    background-color: rgba(44, 44, 44, 0.7);
+}
+
+
+
+
+
+/* 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;
+}
+
+
+
+/* Player modifications */
+.upNextContainer {
+    background-color: rgba(0, 0, 0, 0.7) !important;
+}
+.toastVisible {
+    background-color: rgba(35, 35, 35, 0.5) !important;
+}
+.sliderBubble {
+    background-color: rgba(0,0,0,0.5) !important;
+}
+
+
+
+
+/* Settings and dashboard modifications */
+/* Red shutdown button */
+#btnShutdown {
+    background: #AE3739 !important;
+}
+
+/* Removed ugliness of border-card styling */
+.layout-desktop fieldset.verticalSection-extrabottompadding {
+    border-color: #3B3B3B !important;
+}
+
+
+
+/* Metadata editor fixes */
+.jstree-default .jstree-wholerow-clicked {
+    background: rgba(33, 149, 243, 0.2) !important;
+}
+.jstree-wholerow-hovered {
+    background: rgba(35, 35, 35, 0.5) !important;
+}
+#editItemMetadataPage .btnHeaderSave {
+    background: #00A4DC !important;
+    color: white !important;
+}
+
+
+
+
+
+
+/* Transparent ribbon bar */
+.detailRibbon {
+    background: transparent !important;
+}
+
+/* Add card around top-right buttons */
+.mainDetailButtons {
+    background: rgba(35, 35, 35, 0.5) !important;
+}
+
+/* Add card around groups section */
+.layout-desktop .detailsGroupItem {
+    background: #181818 !important;
+}
+
+
+
+/* Alternative mobile group section card */
+.layout-mobile .itemDetailsGroup {
+    background: #181818 !important;
+}
+
+/* Add card around description */
+.layout-desktop .detailSectionContent {
+    background: #181818 !important;
+}
+.layout-mobile .detailSectionContent {
+    background: #181818 !important;
+}
+
+/* Add card around track selection */
+.trackSelections {
+    background: #181818 !important;
+}
+
+
+
+
+/* Live TV */
+/* Modified background color of active guide cells */
+.programCell-active {
+    background: #181818 !important;
+}
+
+.recordingIcon {
+    color: red !important;
+}

CSS/css-scyfin/scyfin-theme-backdrop.css

@@ -85,16 +85,9 @@
 .itemProgressBar {
     height: 8px !important;
 }
-.innerCardFooterClear {
-    background-color: black !important;
-}
 
 
 
-/* Green watched indicator */
-.playedIndicator {
-    background: #409843 !important;
-}
 
 
 
@@ -108,9 +101,6 @@
     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 {
@@ -127,8 +117,6 @@
 
 /* Custom button color */
 .navMenuOption-selected {
-    background: rgba(33, 149, 243, 0.2) !important;
-    color: rgb(33, 149, 243) !important;
     backdrop-filter: blur(50px) !important;
 }
 
@@ -144,7 +132,6 @@
 /* Rounded header buttons */
 .headerTabs,
 .headerRight {
-    background-color:rgba(35, 35, 35, 0.5) !important;
     border-radius: 50px !important;
     backdrop-filter: blur(50px) !important;
 }
@@ -205,10 +192,6 @@
 .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;
@@ -224,7 +207,6 @@
 /* Removed ugliness of border-card styling */
 .layout-desktop fieldset.verticalSection-extrabottompadding {
     border-radius: 15px !important;
-    border-color: #3B3B3B !important;
     padding: 10px 35px !important;
 }
 
@@ -241,20 +223,12 @@
 .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;
 }
 
 
@@ -286,7 +260,6 @@
 
 /* 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;
 }
@@ -297,7 +270,6 @@
 
 /* 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;
@@ -313,35 +285,30 @@
 
 /* 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;
@@ -424,13 +391,8 @@
 
 
 /* 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 */
@@ -440,9 +402,7 @@
 .recordingButton {
     height: 40px !important;
 }
-.recordingIcon {
+
-    color: red !important;
-}
 /* Remove overlapping text */
 .itemMiscInfo.itemMiscInfo-secondary {
     margin-left: 65px !important;
@@ -456,15 +416,12 @@
 }
 .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 */

CSS/css-scyfin/scyfin-theme.css

@@ -13,10 +13,6 @@
     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;
 }
@@ -87,16 +83,11 @@
 .itemProgressBar {
     height: 8px !important;
 }
-.innerCardFooterClear {
-    background-color: black !important;
-}
 
 
 
-/* Green watched indicator */
+
-.playedIndicator {
+
-    background: #409843 !important;
-}
 
 
 
@@ -110,9 +101,7 @@
     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 {
@@ -127,20 +116,11 @@
 
 
 
-/* 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;
-}
 
 
 
@@ -154,7 +134,6 @@ html {
 /* Rounded header buttons */
 .headerTabs,
 .headerRight {
-    background-color:rgba(35, 35, 35, 0.5) !important;
     border-radius: 50px !important;
     backdrop-filter: blur(50px) !important;
 }
@@ -198,15 +177,12 @@ html {
 }
 .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 */
@@ -240,10 +216,6 @@ html {
 .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;
@@ -259,7 +231,6 @@ html {
 /* Removed ugliness of border-card styling */
 .layout-desktop fieldset.verticalSection-extrabottompadding {
     border-radius: 15px !important;
-    border-color: #3B3B3B !important;
     padding: 10px 35px !important;
 }
 
@@ -276,20 +247,12 @@ html {
 .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;
 }
 
 
@@ -321,14 +284,12 @@ html {
 
 /* 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;
@@ -343,27 +304,23 @@ html {
 
 /* 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;
@@ -439,10 +396,6 @@ html {
 
 
 /* Live TV */
-/* Modified background color of active guide cells */
-.programCell-active {
-    background: #181818 !important;
-}
 /* Repositioned record button */
 .recordingFields {
     margin: 5px 0 -7px 0 !important;
@@ -450,9 +403,6 @@ html {
 .recordingButton {
     height: 40px !important;
 }
-.recordingIcon {
-    color: red !important;
-}
 /* Remove overlapping text */
 .itemMiscInfo.itemMiscInfo-secondary {
     margin-left: 65px !important;