From f65c2addca60ba4a49a1daacb059a9e7b30abe89 Mon Sep 17 00:00:00 2001 From: BPplays Date: Wed, 18 Oct 2023 05:56:52 -0700 Subject: [PATCH] separated colors into separate files for easier color theming --- CSS/css-colors/scyfin-theme-backdrop.css | 144 ++++++++++++++++++++++ CSS/css-colors/scyfin-theme.css | 147 +++++++++++++++++++++++ CSS/css-scyfin/scyfin-theme-backdrop.css | 45 +------ CSS/css-scyfin/scyfin-theme.css | 60 +-------- 4 files changed, 297 insertions(+), 99 deletions(-) create mode 100644 CSS/css-colors/scyfin-theme-backdrop.css create mode 100644 CSS/css-colors/scyfin-theme.css diff --git a/CSS/css-colors/scyfin-theme-backdrop.css b/CSS/css-colors/scyfin-theme-backdrop.css new file mode 100644 index 0000000..73d2849 --- /dev/null +++ b/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; +} + diff --git a/CSS/css-colors/scyfin-theme.css b/CSS/css-colors/scyfin-theme.css new file mode 100644 index 0000000..473540a --- /dev/null +++ b/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; +} diff --git a/CSS/css-scyfin/scyfin-theme-backdrop.css b/CSS/css-scyfin/scyfin-theme-backdrop.css index aca3981..4d4a0ba 100644 --- a/CSS/css-scyfin/scyfin-theme-backdrop.css +++ b/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 */ diff --git a/CSS/css-scyfin/scyfin-theme.css b/CSS/css-scyfin/scyfin-theme.css index b3458cf..d44b568 100644 --- a/CSS/css-scyfin/scyfin-theme.css +++ b/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;