From dd041f9acb5f3ec9eb8b58bcebc42e2f2af9d18a Mon Sep 17 00:00:00 2001
From: HighImKevin <kevinjohncampbell@gmail.com>
Date: Fri, 25 Sep 2026 05:00:10 -0400
Subject: [PATCH] Improve CSS for Custom Page handling

---
 kefinTweaks-plugin.js | 54 +++++++++++++++++++++++++++++++++----------
 1 file changed, 42 insertions(+), 12 deletions(-)

diff --git a/kefinTweaks-plugin.js b/kefinTweaks-plugin.js
index 1fb54da..294c671 100644
--- a/kefinTweaks-plugin.js
+++ b/kefinTweaks-plugin.js
@@ -1687,25 +1687,22 @@ window.KefinTweaksConfig = ${JSON.stringify(config, null, 2)};`;
 
     function injectCustomPageStyles(config) {
         if (!shouldInjectCustomPageStyles(config)) return;
-        if (document.getElementById('kefin-custom-page-styles')) return;
 
-        const style = document.createElement('style');
-        style.id = 'kefin-custom-page-styles';
-        style.textContent = `
-#reactRoot .skinBody:has(.customPage:not(.hide)) #fallbackPage {
+        const css = `
+#reactRoot.kefin-custom-page-active .skinBody #fallbackPage {
 	display: none;
 }
 
-#reactRoot:not(:has(.skinBody .customPage:not(.hide))) .pageTitle {
-    display: none !important;
+#reactRoot:not(.kefin-custom-page-active) .pageTitle {
+	display: none !important;
 }
 
-#reactRoot .skinBody:not(:has(.customPage:not(.hide))) #fallbackPage > * {
-    display: none;
+#reactRoot:not(.kefin-custom-page-active) .skinBody #fallbackPage > * {
+	display: none;
 }
 
-#reactRoot:not(:has(.skinBody .customPage:not(.hide))) #fallbackPage::after {
-	content:'';
+#reactRoot:not(.kefin-custom-page-active) #fallbackPage::after {
+	content: '';
 	display: inline-block;
 	width: 20px;
 	height: 20px;
@@ -1718,8 +1715,41 @@ window.KefinTweaksConfig = ${JSON.stringify(config, null, 2)};`;
 	transform: translateX(-50%);
 	top: 1em;
 }
+
+#reactRoot.kefin-custom-page-active .backdropImage {
+	background: none !important;
+}
+
+header.MuiPaper-root + main.MuiBox-root .customPage {
+	margin-top: 3rem;
+}
+
+.layout-mobile .kefin-custom-page-active .MuiToolbar-root > .MuiStack-root > :nth-child(n+2),
+.layout-mobile .kefin-custom-page-active .MuiToolbar-root > .MuiStack-root > :first-child .MuiButton-icon img {
+  display: none;
+}
+.layout-mobile .kefin-custom-page-active .MuiToolbar-root > .MuiStack-root > :first-child .MuiButton-icon::after {
+  content: '\\e88a';
+  font-family: 'Material Icons';
+  font-size: 1.2rem;
+}
+.layout-mobile .kefin-custom-page-active .MuiToolbar-root > .MuiStack-root > :first-child {
+  font-size: 0px;
+}
+main.MuiBox-root .customPage.libraryPage:not(.noSecondaryNavPage)[data-kefin-custom-page] {
+  padding-top:  1rem !important;
+}
+.layout-mobile :not(main.MuiBox-root) .customPage.libraryPage:not(.noSecondaryNavPage)[data-kefin-custom-page] {
+  padding-top:  5rem !important;
+}
 `;
-        (document.head || document.documentElement).appendChild(style);
+        let style = document.getElementById('kefin-custom-page-styles');
+        if (!style) {
+            style = document.createElement('style');
+            style.id = 'kefin-custom-page-styles';
+            (document.head || document.documentElement).appendChild(style);
+        }
+        style.textContent = css;
     }
 
     // Initialize the installer (no login/admin gate — admin is checked when rendering the card)