From 87854e41120f8d92c93f84cd8b50bbf21ab247c4 Mon Sep 17 00:00:00 2001
From: loof2736 <joshwilberger27@gmail.com>
Date: Fri, 31 May 2024 23:56:54 -0400
Subject: [PATCH] Initial support for color themes

---
 .../disable-static-drawer-backdrop.css        |   8 +-
 CSS/css-scyfin/disable-static-drawer.css      |   6 +-
 CSS/css-scyfin/scyfin-theme-backdrop.css      | 271 ++++++++++++------
 CSS/css-scyfin/scyfin-theme.css               | 173 ++++++++---
 CSS/css-scyfin/theme-coral                    |   4 +
 CSS/css-scyfin/theme-seafoam                  |   4 +
 CSS/css-scyfin/theme-snow                     |   4 +
 7 files changed, 337 insertions(+), 133 deletions(-)
 create mode 100644 CSS/css-scyfin/theme-coral
 create mode 100644 CSS/css-scyfin/theme-seafoam
 create mode 100644 CSS/css-scyfin/theme-snow

diff --git a/CSS/css-scyfin/disable-static-drawer-backdrop.css b/CSS/css-scyfin/disable-static-drawer-backdrop.css
index cd2c8f2..b132e60 100644
--- a/CSS/css-scyfin/disable-static-drawer-backdrop.css
+++ b/CSS/css-scyfin/disable-static-drawer-backdrop.css
@@ -11,8 +11,8 @@
     /* Move drawer behind header */
     z-index: 1099 !important;
     /* Modified background color */
-    background-color: rgba(35, 35, 35, 0.5) !important;
-    border-radius: 25px !important;
+    background-color: var(--main-background-transparent) !important;
+    border-radius: var(--rounded-cards) !important;
     backdrop-filter: blur(50px) !important;
 }
 
@@ -71,10 +71,10 @@
 }
 
 /* Background for top left buttons */
-.layout-desktop .headerLeft {
+.layout-desktop .headerLeft:not(.libraryDocument:has(.videoPlayerContainer) .headerLeft) {
     padding: 2px 15px 2px 2px !important;
     top: -3px !important;
-    background-color: rgba(35, 35, 35, 0.5) !important;
+    background-color: var(--main-background-transparent) !important;
     border-radius: 50px !important;
     backdrop-filter: blur(50px) !important;
 }
diff --git a/CSS/css-scyfin/disable-static-drawer.css b/CSS/css-scyfin/disable-static-drawer.css
index 086caf1..4d86cb0 100644
--- a/CSS/css-scyfin/disable-static-drawer.css
+++ b/CSS/css-scyfin/disable-static-drawer.css
@@ -9,6 +9,8 @@
     left: -320px !important;
     /* Move drawer behind header */
     z-index: 1099 !important;
+    background-color: var(--secondary-background-color) !important;
+    border-radius: var(--rounded-cards) !important;
 }
 
 /* Lower drawer buttons */
@@ -65,10 +67,10 @@
 }
 
 /* Background for top left buttons */
-.layout-desktop .headerLeft {
+.layout-desktop .headerLeft:not(.libraryDocument:has(.videoPlayerContainer) .headerLeft) {
     padding: 2px 15px 2px 2px !important;
     top: -3px !important;
-    background-color: rgba(35, 35, 35, 0.5) !important;
+    background-color: var(--main-background-transparent) !important;
     border-radius: 50px !important;
     backdrop-filter: blur(50px) !important;
 }
diff --git a/CSS/css-scyfin/scyfin-theme-backdrop.css b/CSS/css-scyfin/scyfin-theme-backdrop.css
index db7c60b..3d26a6f 100644
--- a/CSS/css-scyfin/scyfin-theme-backdrop.css
+++ b/CSS/css-scyfin/scyfin-theme-backdrop.css
@@ -1,3 +1,45 @@
+/* Variables */
+:root {
+    --main-accent-color: #00a4dc;
+    --secondary-accent-color: rgba(0, 164, 220, 0.2);
+    --main-background-color: #0F0F0F;
+    --secondary-background-color: var(--secondary-background-color);
+    --main-background-transparent: rgba(35,35,35,0.5);
+    --secondary-background-transparent: rgba(0,0,0,0.6);
+    --rounded-cards: 15px;
+}
+
+/* Setting accent color variable */
+.listItemIcon:not(.listItemIcon-transparent):not(.notification_important),
+.emby-checkbox:checked + span + .checkboxOutline,
+.countIndicator {
+    background: var(--main-accent-color) !important;
+}
+.emby-checkbox:checked + span + .checkboxOutline,
+.emby-input:focus,
+.emby-textarea:focus,
+.emby-select-withcolor:focus,
+.mdl-spinner__layer-1,
+.mdl-spinner__layer-2,
+.mdl-spinner__layer-3,
+.mdl-spinner__layer-4 {
+    border-color: var(--main-accent-color) !important;
+}
+.button-link:not(.itemDetailPage .button-link),
+.selectLabelFocused,
+.textareaLabelFocused,
+.inputLabelFocused,
+.emby-tab-button:hover,
+.metadataSidebarIcon {
+    color: var(--main-accent-color) !important;
+}
+@media (hover: hover) and (pointer: fine) {
+    .paper-icon-button-light:hover:not(:disabled) {
+        color: var(--main-accent-color) !important;
+        background-color: var(--secondary-accent-color) !important;
+    }
+}
+
 /* Increase size of Jellyfin logo */
 .layout-desktop .pageTitleWithLogo {
     margin-left: 10px !important;
@@ -61,6 +103,10 @@
 .emby-scroller {
     margin-right: -2% !important;
 }
+/* Fix for collection items misalignment */
+.layout-desktop .collectionItems .collectionItemsContainer {
+    padding-left: 0% !important;
+}
 
 
 
@@ -71,11 +117,11 @@
 .blurhash-canvas,
 .dialog,
 .itemSelectionPanel {
-    border-radius: 10px !important;
+    border-radius: var(--rounded-cards) !important;
 }
 /* Rounded selection menu */
 .itemSelectionPanel {
-    border: 2px solid #00a4dc !important;
+    border: 2px solid var(--main-accent-color) !important;
 }
 .itemSelectionPanel .checkboxOutline {
     margin: 7px !important;
@@ -85,7 +131,7 @@
 
 /* Floating progress bar */
 .innerCardFooter {
-    border-radius: 15px !important;
+    border-radius: var(--rounded-cards) !important;
     width: 100px !important;
     margin-left: 5px !important;
     margin-bottom: 5px !important;
@@ -102,7 +148,7 @@
 }
 .itemProgressBar {
     height: 10px !important;
-    background: rgba(35,35,35,0.75) !important;
+    background: var(--main-background-transparent) !important;
     backdrop-filter: blur(2px) !important;
 }
 .innerCardFooterClear {
@@ -113,6 +159,7 @@
 }
 .itemProgressBarForeground {
     border-radius: 100px !important;
+    background: var(--main-accent-color) !important;
 }
 
 
@@ -156,8 +203,8 @@
 
 /* Custom button color */
 .navMenuOption-selected {
-    background: rgba(33, 149, 243, 0.2) !important;
-    color: rgb(33, 149, 243) !important;
+    background: var(--secondary-accent-color) !important;
+    color: var(--main-accent-color) !important;
     backdrop-filter: blur(50px) !important;
 }
 
@@ -177,7 +224,7 @@
 /* Rounded header buttons */
 .headerTabs,
 .headerRight {
-    background-color:rgba(35, 35, 35, 0.5) !important;
+    background-color: var(--main-background-transparent) !important;
     border-radius: 50px !important;
     backdrop-filter: blur(50px) !important;
 }
@@ -223,13 +270,71 @@
 
 
 
+/* Player modifications */
+.upNextContainer, .toastVisible {
+    backdrop-filter: blur(50px) !important;
+}
+.upNextContainer {
+    border-radius: var(--rounded-cards) !important;
+    background-color: rgba(0, 0, 0, 0.7) !important;
+}
+.toastVisible {
+    border-radius: 30px !important;
+    background-color: var(--main-background-transparent) !important;
+}
+.sliderBubble {
+    border-radius: var(--rounded-cards) !important;
+    background-color: var(--secondary-background-transparent) !important;
+    backdrop-filter: blur(10px) !important;
+}
+.mdl-slider-background-flex {
+    height: 10px !important;
+    margin-top: -5px !important;
+    border-radius: 100px !important;
+    background: hsla(0,0%,100%,.2) !important;
+}
+.mdl-slider-background-lower {
+    border-radius: 100px !important;
+    background-color: var(--main-accent-color) !important;
+}
+.mdl-slider::-moz-range-thumb {
+    background: rgba(0,0,0,0) !important;
+}
+.mdl-slider-background-upper {
+    display: none !important;
+}
+.iconOsdProgressInner {
+    background: var(--main-accent-color) !important;
+}
+
+/* Support for Jellyscrub plugin */
+.chapterThumbContainer {
+    background: none !important;
+    border-radius: var(--rounded-cards) !important;
+}
+.chapterThumb {
+    border-radius: var(--rounded-cards) !important;
+    margin-bottom: 40px !important;
+}
+.chapterThumbTextContainer {
+    background: none !important;
+}
+.chapterThumbText {
+    text-align: center !important;
+}
+.chapterThumbText-dim {
+    display: none !important;
+}
+
+
+
 /* Settings and dashboard modifications */
 .emby-input,
 .emby-textarea,
 .paperList,
 .listItem:hover,
 .subtitleappearance-preview {
-    border-radius: 15px !important;
+    border-radius: var(--rounded-cards) !important;
 }
 .button-submit,
 .emby-select,
@@ -239,6 +344,9 @@
 .raised {
     border-radius: 100px !important;
 }
+.button-submit {
+    background: var(--main-accent-color) !important;
+}
 /* Modify username placement on profile page */
 .layout-desktop #userProfilePage .readOnlyContent div:not([class]), div[class=""]{
     align-items: initial !important;
@@ -261,15 +369,33 @@
 }
 /* Rounded dashboard cards */
 .cardBox {
-    border-radius: 15px !important;
+    border-radius: var(--rounded-cards) !important;
 }
 /* Removed ugliness of border-card styling */
 .layout-desktop fieldset.verticalSection-extrabottompadding,
 .layout-tv fieldset.verticalSection-extrabottompadding {
-    border-radius: 15px !important;
+    border-radius: var(--rounded-cards) !important;
     border-color: #3B3B3B !important;
     padding: 10px 35px !important;
 }
+/* Rounded tab selections in dashboard */
+.layout-desktop .localnav {
+    border-radius: 100px !important;
+    background: #202020 !important;
+    width: fit-content !important;
+}
+.layout-desktop a[data-role="button"] {
+    background: none !important;
+
+}
+.layout-desktop div[data-role="controlgroup"] a.ui-btn-active {
+    background: var(--main-accent-color) !important;
+    border-radius: 100px !important;
+}
+/* Re-align active devices in dashboard */
+.activeDevices.itemsContainer {
+    margin: 0px !important;
+}
 
 
 
@@ -285,16 +411,16 @@
     line-height: 35px !important;
 }
 .jstree-default .jstree-wholerow-clicked {
-    background: rgba(33, 149, 243, 0.2) !important;
+    background: var(--secondary-accent-color) !important;
 }
 .jstree-wholerow-hovered {
-    background: rgba(35, 35, 35, 0.5) !important;
+    background: var(--main-background-transparent) !important;
 }
 .jstree-children {
     margin-left: -10px !important;
 }
 #editItemMetadataPage .btnHeaderSave {
-    background: #00A4DC !important;
+    background: var(--main-accent-color) !important;
     border-radius: 100px !important;
     height: 40px !important;
     color: white !important;
@@ -330,18 +456,18 @@
 
 /* Add card around top-right buttons */
 .layout-desktop .mainDetailButtons {
-    background: rgba(35, 35, 35, 0.5) !important;
+    background: var(--main-background-transparent) !important;
     border-radius: 100px !important;
     backdrop-filter: blur(10px) !important;
 }
 .layout-mobile .mainDetailButtons {
-    background: #181818 !important;
+    background: var(--secondary-background-color) !important;
     border-radius: 100px !important;
 }
 
 /* Add card around groups section */
 .layout-desktop .detailsGroupItem {
-    background: rgba(35, 35, 35, 0.5) !important;
+    background: var(--main-background-transparent) !important;
     padding: 10px 20px !important;
     border-radius: 100px !important;
     width: fit-content !important;
@@ -360,36 +486,36 @@
 
 /* Alternative mobile group section card */
 .layout-mobile .itemDetailsGroup {
-    background: #181818 !important;
+    background: var(--secondary-background-color) !important;
     padding: 15px 20px 5px 20px !important;
-    border-radius: 15px !important;
+    border-radius: var(--rounded-cards) !important;
 }
 
 /* Add card around description */
 .layout-desktop .detailSectionContent {
-    background: rgba(35, 35, 35, 0.5) !important;
-    border-radius: 15px !important;
+    background: var(--main-background-transparent) !important;
+    border-radius: var(--rounded-cards) !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;
+    background: var(--secondary-background-color) !important;
+    border-radius: var(--rounded-cards) !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;
+    background: var(--main-background-transparent) !important;
+    border-radius: var(--rounded-cards) !important;
     padding: 10px 20px !important;
     margin-top: 20px !important;
     backdrop-filter: blur(40px) !important;
 }
 .layout-mobile .trackSelections {
-    background: #181818 !important;
-    border-radius: 15px !important;
+    background: var(--secondary-background-color) !important;
+    border-radius: var(--rounded-cards) !important;
     padding: 10px 20px !important;
     margin-top: 20px !important;
 }
@@ -472,13 +598,30 @@
     box-ordinal-group: 2;
     margin: 0.45em 0 0 0 !important;
 }
+/* Modify play button */
+.layout-desktop .mainDetailButtons .btnPlay::after {
+    content: "Play" !important;
+}
+.layout-desktop .mainDetailButtons .btnPlay {
+    position: relative !important;
+    margin-right: -85px !important;
+    padding-right: 20px !important;
+    right: 110px !important;
+    background: var(--main-accent-color) !important;
+    border-radius: 100px !important;
+    color: var(--secondary-background-color) !important;
+}
+.layout-desktop .mainDetailButtons .detailButton {
+    -webkit-flex-direction: row !important;
+    flex-direction: row !important;
+}
 
 
 
 /* Live TV */
 /* Modified background color of active guide cells */
 .programCell-active {
-    background: #181818 !important;
+    background: var(--secondary-background-color) !important;
 }
 /* Translucent buttons */
 .raised.emby-button:not(.button-submit) {
@@ -502,60 +645,6 @@
 
 
 
-/* Player modifications */
-.upNextContainer, .toastVisible {
-    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.6) !important;
-    backdrop-filter: blur(10px) !important;
-}
-.mdl-slider-background-flex {
-    height: 10px !important;
-    margin-top: -5px !important;
-    border-radius: 100px !important;
-    background: hsla(0,0%,100%,.2) !important;
-}
-.mdl-slider-background-lower {
-    border-radius: 100px !important;
-}
-.mdl-slider::-moz-range-thumb {
-    background: rgba(0,0,0,0) !important;
-}
-.mdl-slider-background-upper {
-    display: none !important;
-}
-
-/* Support for Jellyscrub plugin */
-.chapterThumbContainer {
-    background: none !important;
-    border-radius: 15px !important;
-}
-.chapterThumb {
-    border-radius: 15px !important;
-    margin-bottom: 40px !important;
-}
-.chapterThumbTextContainer {
-    background: none !important;
-}
-.chapterThumbText {
-    text-align: center !important;
-}
-.chapterThumbText-dim {
-    display: none !important;
-}
-
-
-
 /* Music Player */
 .layout-desktop .appfooter {
     margin-left: 250px !important;
@@ -564,13 +653,19 @@
     margin-left: 10px !important;
 }
 .layout-desktop .volumeOsd {
-    border-radius: 10px !important;
-    background: rgba(0,0,0,.6) !important;
+    border-radius: var(--rounded-cards) !important;
+    background: var(--secondary-background-transparent) !important;
 }
 .layout-desktop .nameContainer .musicParentName {
     margin-top: 18px !important;
     margin-right: 22px !important;
 }
+.layout-desktop .appfooter .nowPlayingBar {
+    margin-top: 20px !important;
+}
+.layout-desktop .appfooter .nowPlayingBar .nowPlayingBarPositionContainer {
+    top: -15px !important;
+}
 
 
 
@@ -616,12 +711,12 @@
 
 /* Login page */
 .layout-desktop #loginPage {
-    display: flex !important;
-    justify-content: center !important;
-    align-items: center !important;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 .layout-desktop #loginPage .padded-left.padded-right.padded-bottom-page.margin-auto-y {
-    background: #181818 !important;
+    background: var(--secondary-background-color) !important;
     width: 400px !important;
     border-radius: 25px !important;
     padding: 50px !important;
@@ -636,7 +731,7 @@
 }
 .layout-desktop #loginPage .visualLoginForm {
     position: relative !important;
-    background: #181818 !important;
+    background: var(--secondary-background-color) !important;
     z-index: 1000 !important;
 }
 .layout-desktop #loginPage .btnForgotPassword {
diff --git a/CSS/css-scyfin/scyfin-theme.css b/CSS/css-scyfin/scyfin-theme.css
index 97c9f56..2d9ee51 100644
--- a/CSS/css-scyfin/scyfin-theme.css
+++ b/CSS/css-scyfin/scyfin-theme.css
@@ -1,3 +1,45 @@
+/* Variables */
+:root {
+    --main-accent-color: #00a4dc;
+    --secondary-accent-color: rgba(0, 164, 220, 0.2);
+    --main-background-color: #0F0F0F;
+    --secondary-background-color: #181818;
+    --main-background-transparent: rgba(35,35,35,0.5);
+    --secondary-background-transparent: rgba(0,0,0,0.6);
+    --rounded-cards: 15px;
+}
+
+/* Setting accent color variable */
+.listItemIcon:not(.listItemIcon-transparent):not(.notification_important),
+.emby-checkbox:checked + span + .checkboxOutline,
+.countIndicator {
+    background: var(--main-accent-color) !important;
+}
+.emby-checkbox:checked + span + .checkboxOutline,
+.emby-input:focus,
+.emby-textarea:focus,
+.emby-select-withcolor:focus,
+.mdl-spinner__layer-1,
+.mdl-spinner__layer-2,
+.mdl-spinner__layer-3,
+.mdl-spinner__layer-4 {
+    border-color: var(--main-accent-color) !important;
+}
+.button-link:not(.itemDetailPage .button-link),
+.selectLabelFocused,
+.textareaLabelFocused,
+.inputLabelFocused,
+.emby-tab-button:hover,
+.metadataSidebarIcon {
+    color: var(--main-accent-color) !important;
+}
+@media (hover: hover) and (pointer: fine) {
+    .paper-icon-button-light:hover:not(:disabled) {
+        color: var(--main-accent-color) !important;
+        background-color: var(--secondary-accent-color) !important;
+    }
+}
+
 /* Increase size of Jellyfin logo */
 .layout-desktop .pageTitleWithLogo {
     margin-left: 10px !important;
@@ -10,7 +52,7 @@
     top: 0 !important;
     width: 250px !important;
     /* Modified background color */
-    background-color: #181818 !important;
+    background-color: var(--secondary-background-color) !important;
     /* Move drawer behind header */
     z-index: 998 !important;
 }
@@ -61,6 +103,10 @@
 .emby-scroller {
     margin-right: -2% !important;
 }
+/* Fix for collection items misalignment */
+.layout-desktop .collectionItems .collectionItemsContainer {
+    padding-left: 0% !important;
+}
 
 
 
@@ -71,11 +117,11 @@
 .blurhash-canvas,
 .dialog,
 .itemSelectionPanel {
-    border-radius: 10px !important;
+    border-radius: var(--rounded-cards) !important;
 }
 /* Rounded selection menu */
 .itemSelectionPanel {
-    border: 2px solid #00a4dc !important;
+    border: 2px solid var(--main-accent-color) !important;
 }
 .itemSelectionPanel .checkboxOutline {
     margin: 7px !important;
@@ -85,7 +131,7 @@
 
 /* Floating progress bar */
 .innerCardFooter {
-    border-radius: 15px !important;
+    border-radius: var(--rounded-cards) !important;
     width: 100px !important;
     margin-left: 5px !important;
     margin-bottom: 5px !important;
@@ -102,7 +148,7 @@
 }
 .itemProgressBar {
     height: 10px !important;
-    background: rgba(35,35,35,0.75) !important;
+    background: var(--main-background-transparent) !important;
     backdrop-filter: blur(2px) !important;
 }
 .innerCardFooterClear {
@@ -113,6 +159,7 @@
 }
 .itemProgressBarForeground {
     border-radius: 100px !important;
+    background: var(--main-accent-color) !important;
 }
 
 
@@ -156,14 +203,14 @@
 
 /* Custom button color */
 .navMenuOption-selected {
-    background: rgba(33, 149, 243, 0.2) !important;
-    color: rgb(33, 149, 243) !important;
+    background: var(--secondary-accent-color) !important;
+    color: var(--main-accent-color) !important;
 }
 
 /* Modified background color */
 .dialog,
 html {
-    background-color: #0F0F0F !important;
+    background-color: var(--main-background-color) !important;
 }
 
 
@@ -181,7 +228,7 @@ html {
 /* Rounded header buttons */
 .headerTabs,
 .headerRight {
-    background-color:rgba(35, 35, 35, 0.5) !important;
+    background-color: var(--main-background-transparent) !important;
     border-radius: 50px !important;
     backdrop-filter: blur(50px) !important;
 }
@@ -232,16 +279,16 @@ html {
     backdrop-filter: blur(50px) !important;
 }
 .upNextContainer {
-    border-radius: 15px !important;
+    border-radius: var(--rounded-cards) !important;
     background-color: rgba(0, 0, 0, 0.7) !important;
 }
 .toastVisible {
     border-radius: 30px !important;
-    background-color: rgba(35, 35, 35, 0.5) !important;
+    background-color: var(--main-background-transparent) !important;
 }
 .sliderBubble {
-    border-radius: 15px !important;
-    background-color: rgba(0,0,0,0.6) !important;
+    border-radius: var(--rounded-cards) !important;
+    background-color: var(--secondary-background-transparent) !important;
     backdrop-filter: blur(10px) !important;
 }
 .mdl-slider-background-flex {
@@ -252,6 +299,7 @@ html {
 }
 .mdl-slider-background-lower {
     border-radius: 100px !important;
+    background-color: var(--main-accent-color) !important;
 }
 .mdl-slider::-moz-range-thumb {
     background: rgba(0,0,0,0) !important;
@@ -259,14 +307,17 @@ html {
 .mdl-slider-background-upper {
     display: none !important;
 }
+.iconOsdProgressInner {
+    background: var(--main-accent-color) !important;
+}
 
 /* Support for Jellyscrub plugin */
 .chapterThumbContainer {
     background: none !important;
-    border-radius: 15px !important;
+    border-radius: var(--rounded-cards) !important;
 }
 .chapterThumb {
-    border-radius: 15px !important;
+    border-radius: var(--rounded-cards) !important;
     margin-bottom: 40px !important;
 }
 .chapterThumbTextContainer {
@@ -287,7 +338,7 @@ html {
 .paperList,
 .listItem:hover,
 .subtitleappearance-preview {
-    border-radius: 15px !important;
+    border-radius: var(--rounded-cards) !important;
 }
 .button-submit,
 .emby-select,
@@ -297,6 +348,9 @@ html {
 .raised {
     border-radius: 100px !important;
 }
+.button-submit {
+    background: var(--main-accent-color) !important;
+}
 /* Modify username placement on profile page */
 .layout-desktop #userProfilePage .readOnlyContent div:not([class]), div[class=""]{
     align-items: initial !important;
@@ -319,15 +373,33 @@ html {
 }
 /* Rounded dashboard cards */
 .cardBox {
-    border-radius: 15px !important;
+    border-radius: var(--rounded-cards) !important;
 }
 /* Removed ugliness of border-card styling */
 .layout-desktop fieldset.verticalSection-extrabottompadding,
 .layout-tv fieldset.verticalSection-extrabottompadding {
-    border-radius: 15px !important;
+    border-radius: var(--rounded-cards) !important;
     border-color: #3B3B3B !important;
     padding: 10px 35px !important;
 }
+/* Rounded tab selections in dashboard */
+.layout-desktop .localnav {
+    border-radius: 100px !important;
+    background: #202020 !important;
+    width: fit-content !important;
+}
+.layout-desktop a[data-role="button"] {
+    background: none !important;
+
+}
+.layout-desktop div[data-role="controlgroup"] a.ui-btn-active {
+    background: var(--main-accent-color) !important;
+    border-radius: 100px !important;
+}
+/* Re-align active devices in dashboard */
+.activeDevices.itemsContainer {
+    margin: 0px !important;
+}
 
 
 
@@ -343,16 +415,16 @@ html {
     line-height: 35px !important;
 }
 .jstree-default .jstree-wholerow-clicked {
-    background: rgba(33, 149, 243, 0.2) !important;
+    background: var(--secondary-accent-color) !important;
 }
 .jstree-wholerow-hovered {
-    background: rgba(35, 35, 35, 0.5) !important;
+    background: var(--main-background-transparent) !important;
 }
 .jstree-children {
     margin-left: -10px !important;
 }
 #editItemMetadataPage .btnHeaderSave {
-    background: #00A4DC !important;
+    background: var(--main-accent-color) !important;
     border-radius: 100px !important;
     height: 40px !important;
     color: white !important;
@@ -388,14 +460,14 @@ html {
 
 /* Add card around top-right buttons */
 .mainDetailButtons {
-    background: rgba(35, 35, 35, 0.5) !important;
+    background: var(--main-background-transparent) !important;
     border-radius: 100px !important;
     backdrop-filter: blur(10px) !important;
 }
 
 /* Add card around groups section */
 .layout-desktop .detailsGroupItem {
-    background: #181818 !important;
+    background: var(--secondary-background-color) !important;
     padding: 10px 20px !important;
     border-radius: 100px !important;
     width: fit-content !important;
@@ -413,28 +485,28 @@ html {
 
 /* Alternative mobile group section card */
 .layout-mobile .itemDetailsGroup {
-    background: #181818 !important;
+    background: var(--secondary-background-color) !important;
     padding: 15px 20px 5px 20px !important;
-    border-radius: 15px !important;
+    border-radius: var(--rounded-cards) !important;
 }
 
 /* Add card around description */
 .layout-desktop .detailSectionContent {
-    background: #181818 !important;
-    border-radius: 15px !important;
+    background: var(--secondary-background-color) !important;
+    border-radius: var(--rounded-cards) !important;
     padding: 40px 20px 10px 20px !important;
     margin-top: 50px !important;
 }
 .layout-mobile .detailSectionContent {
-    background: #181818 !important;
-    border-radius: 15px !important;
+    background: var(--secondary-background-color) !important;
+    border-radius: var(--rounded-cards) !important;
     padding: 10px 20px !important;
 }
 
 /* Add card around track selection */
 .trackSelections {
-    background: #181818 !important;
-    border-radius: 15px !important;
+    background: var(--secondary-background-color) !important;
+    border-radius: var(--rounded-cards) !important;
     padding: 10px 20px !important;
     margin-top: 20px !important;
 }
@@ -510,13 +582,30 @@ html {
     box-ordinal-group: 2;
     margin: 0.45em 0 0 0 !important;
 }
+/* Modify play button */
+.layout-desktop .mainDetailButtons .btnPlay::after {
+    content: "Play" !important;
+}
+.layout-desktop .mainDetailButtons .btnPlay {
+    position: relative !important;
+    margin-right: -85px !important;
+    padding-right: 20px !important;
+    right: 110px !important;
+    background: var(--main-accent-color) !important;
+    border-radius: 100px !important;
+    color: var(--secondary-background-color) !important;
+}
+.layout-desktop .mainDetailButtons .detailButton {
+    -webkit-flex-direction: row !important;
+    flex-direction: row !important;
+}
 
 
 
 /* Live TV */
 /* Modified background color of active guide cells */
 .programCell-active {
-    background: #181818 !important;
+    background: var(--secondary-background-color) !important;
 }
 /* Repositioned record button */
 .recordingFields {
@@ -543,13 +632,19 @@ html {
     margin-left: 10px !important;
 }
 .layout-desktop .volumeOsd {
-    border-radius: 10px !important;
-    background: rgba(0,0,0,.6) !important;
+    border-radius: var(--rounded-cards) !important;
+    background: var(--secondary-background-transparent) !important;
 }
 .layout-desktop .nameContainer .musicParentName {
     margin-top: 18px !important;
     margin-right: 22px !important;
 }
+.layout-desktop .appfooter .nowPlayingBar {
+    margin-top: 20px !important;
+}
+.layout-desktop .appfooter .nowPlayingBar .nowPlayingBarPositionContainer {
+    top: -15px !important;
+}
 
 
 
@@ -595,12 +690,12 @@ html {
 
 /* Login page */
 .layout-desktop #loginPage {
-    display: flex !important;
-    justify-content: center !important;
-    align-items: center !important;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 .layout-desktop #loginPage .padded-left.padded-right.padded-bottom-page.margin-auto-y {
-    background: #181818 !important;
+    background: var(--secondary-background-color) !important;
     width: 400px !important;
     border-radius: 25px !important;
     padding: 50px !important;
@@ -615,7 +710,7 @@ html {
 }
 .layout-desktop #loginPage .visualLoginForm {
     position: relative !important;
-    background: #181818 !important;
+    background: var(--secondary-background-color) !important;
     z-index: 1000 !important;
 }
 .layout-desktop #loginPage .btnForgotPassword {
diff --git a/CSS/css-scyfin/theme-coral b/CSS/css-scyfin/theme-coral
new file mode 100644
index 0000000..84935f3
--- /dev/null
+++ b/CSS/css-scyfin/theme-coral
@@ -0,0 +1,4 @@
+:root {
+    --main-accent-color: #EA7070;
+    --secondary-accent-color: rgba(234, 112, 112, 0.2);
+}
\ No newline at end of file
diff --git a/CSS/css-scyfin/theme-seafoam b/CSS/css-scyfin/theme-seafoam
new file mode 100644
index 0000000..a80b8af
--- /dev/null
+++ b/CSS/css-scyfin/theme-seafoam
@@ -0,0 +1,4 @@
+:root {
+    --main-accent-color: #6D9887;
+    --secondary-accent-color: rgba(109, 152, 135, 0.2);
+}
\ No newline at end of file
diff --git a/CSS/css-scyfin/theme-snow b/CSS/css-scyfin/theme-snow
new file mode 100644
index 0000000..913c36a
--- /dev/null
+++ b/CSS/css-scyfin/theme-snow
@@ -0,0 +1,4 @@
+:root {
+    --main-accent-color: #E8ECEF;
+    --secondary-accent-color: rgba(232, 236, 239, 0.2);
+}
\ No newline at end of file