From 039873f396a230236aade4ea388ec9e89ef27864 Mon Sep 17 00:00:00 2001
From: loof2736 <joshwilberger27@gmail.com>
Date: Sun, 19 May 2024 18:54:43 -0400
Subject: [PATCH] Re-factored code for top-left item background to be more
 dynamic

---
 .../disable-static-drawer-backdrop.css        | 25 +++++++++----------
 CSS/css-scyfin/disable-static-drawer.css      | 25 +++++++++----------
 CSS/css-scyfin/scyfin-theme-backdrop.css      |  2 --
 CSS/css-scyfin/scyfin-theme.css               |  2 --
 4 files changed, 24 insertions(+), 30 deletions(-)

diff --git a/CSS/css-scyfin/disable-static-drawer-backdrop.css b/CSS/css-scyfin/disable-static-drawer-backdrop.css
index 73cdca4..862c9bd 100644
--- a/CSS/css-scyfin/disable-static-drawer-backdrop.css
+++ b/CSS/css-scyfin/disable-static-drawer-backdrop.css
@@ -71,29 +71,28 @@
     margin-right: 3.3% !important;
 }
 
-/* Background for home, hamburger, and Jellyfin */
-.layout-desktop:not(.transparentDocument) .headerLeft::before {
-    content: "";
-    position: absolute;
-    top: 39px;
-    left: 10px;
-    width: 245px;
-    height: 45px;
+/* Background for top left buttons */
+.layout-desktop .headerLeft {
+    padding: 2px 15px 2px 2px !important;
+    top: -3px !important;
     background-color: rgba(35, 35, 35, 0.5) !important;
     border-radius: 50px !important;
     backdrop-filter: blur(50px) !important;
 }
+.headerLeft {
+    flex-grow: 0 !important;
+    -webkit-flex-grow: 0 !important;
+}
+.headerRight {
+    position: absolute !important;
+    right: 12px !important;
+}
 
 /* Reduce the size of the header when the logo is not present */
 .layout-desktop .skinHeader.semiTransparent .headerTop .headerLeft::before {
     width: 160px;
 }
 
-.layout-desktop .headerLeft {
-    padding: 2px !important;
-    top: -3px !important;
-}
-
 .layout-desktop .pageTitle {
     z-index: 1099 !important;
 }
diff --git a/CSS/css-scyfin/disable-static-drawer.css b/CSS/css-scyfin/disable-static-drawer.css
index 8c01d3a..017babc 100644
--- a/CSS/css-scyfin/disable-static-drawer.css
+++ b/CSS/css-scyfin/disable-static-drawer.css
@@ -65,29 +65,28 @@
     margin-right: 3.3% !important;
 }
 
-/* Background for home, hamburger, and Jellyfin */
-.layout-desktop:not(.transparentDocument) .headerLeft::before {
-    content: "";
-    position: absolute;
-    top: 39px;
-    left: 10px;
-    width: 245px;
-    height: 45px;
+/* Background for top left buttons */
+.layout-desktop .headerLeft {
+    padding: 2px 15px 2px 2px !important;
+    top: -3px !important;
     background-color: rgba(35, 35, 35, 0.5) !important;
     border-radius: 50px !important;
     backdrop-filter: blur(50px) !important;
 }
+.headerLeft {
+    flex-grow: 0 !important;
+    -webkit-flex-grow: 0 !important;
+}
+.headerRight {
+    position: absolute !important;
+    right: 12px !important;
+}
 
 /* Reduce the size of the header when the logo is not present */
 .layout-desktop .skinHeader.semiTransparent .headerTop .headerLeft::before {
     width: 160px;
 }
 
-.layout-desktop .headerLeft {
-    padding: 2px !important;
-    top: -3px !important;
-}
-
 .layout-desktop .pageTitle {
     z-index: 1099 !important;
 }
diff --git a/CSS/css-scyfin/scyfin-theme-backdrop.css b/CSS/css-scyfin/scyfin-theme-backdrop.css
index 80a33c0..f286823 100644
--- a/CSS/css-scyfin/scyfin-theme-backdrop.css
+++ b/CSS/css-scyfin/scyfin-theme-backdrop.css
@@ -1,9 +1,7 @@
 /* Increase size of Jellyfin logo */
 .layout-desktop .pageTitleWithLogo {
-    margin-left: 15px !important;
     width: 100px !important;
     height: 40px !important;
-    margin-top: 5px !important;
 }
 
 /* Static left drawer */
diff --git a/CSS/css-scyfin/scyfin-theme.css b/CSS/css-scyfin/scyfin-theme.css
index c4b23cf..5f996e5 100644
--- a/CSS/css-scyfin/scyfin-theme.css
+++ b/CSS/css-scyfin/scyfin-theme.css
@@ -1,9 +1,7 @@
 /* Increase size of Jellyfin logo */
 .layout-desktop .pageTitleWithLogo {
-    margin-left: 15px !important;
     width: 100px !important;
     height: 40px !important;
-    margin-top: 5px !important;
 }
 
 /* Static left drawer */