Added some new stuff to userChrome and treeStyleTabs. Refactored CSS for chatgpt

3 files changed, 90 insertions, 88 deletions

diff --git a/CSS/chatgpt.com.css b/CSS/chatgpt.com.css
index ae1a3f9..ab036ad 100644
--- a/CSS/chatgpt.com.css
+++ b/CSS/chatgpt.com.css
@@ -88,120 +88,66 @@
 
 @-moz-document url-prefix("https://chatgpt.com/"), url-prefix("https://chat.openai.com/") {
 
-    /* The actual sidebar container */
-    aside {
-        background-color: #003636 !important;
-        background-image: none !important;
-    }
-
-    /* EVERYTHING inside the sidebar */
-    aside *,
-    aside *::before,
-    aside *::after {
+    /* ========== SIDEBAR BASE ========== */
+    aside,
+    #stage-slideover-sidebar {
         background-color: #003636 !important;
         background-image: none !important;
-    }
-    
-
-}
-
-@-moz-document url-prefix("https://chatgpt.com/"), url-prefix("https://chat.openai.com/") {
-
-    /* Chat history container itself */
-    #history,
-    [data-testid="history"],
-    [role="list"] {
-        background-color: #003636 !important;
+        --sidebar-bg: #003636 !important;
+        --bg-elevated-secondary: #003636 !important;
     }
 
-    /* Individual chat items */
-    #history > *,
-    [data-testid="history"] > *,
-    [role="list"] > * {
-        background-color: #003636 !important;
+    #stage-slideover-sidebar .shadow-sharp-edge-bottom {
+        box-shadow: none !important;
     }
 
-    /* Scroll container that wraps history */
-    div:has(> #history) {
-        background-color: #003636 !important;
-    }
-    
-        /* Sidebar header (ChatGPT logo + collapse button) */
+    /* ========== SIDEBAR HEADER ========== */
     #sidebar-header {
         background-color: #003636 !important;
-        background-image: none !important;
     }
 
-    /* Anything inside the sidebar header */
-    #sidebar-header *,
-    #sidebar-header *::before,
-    #sidebar-header *::after {
-        background-color: #003636 !important;
-        background-image: none !important;
-    }
-    
-    
-    /* Wrapper under sidebar header */
     .touch\:px-1\.5.px-2 {
         background-color: #003636 !important;
-        background-image: none !important;
     }
 
-    /* Anything inside it */
-    .touch\:px-1\.5.px-2 *,
-    .touch\:px-1\.5.px-2 *::before,
-    .touch\:px-1\.5.px-2 *::after {
+    /* ========== MENU ITEMS BASE ========== */
+    .__menu-item[data-sidebar-item="true"] {
         background-color: #003636 !important;
-        background-image: none !important;
+        border-radius: 10px !important;
     }
 
-    
-        /* Apps / Projects wrapper */
-    div[class^="pb-["] {
-        background-color: #003636 !important;
+    /* Hover (solid) */
+    .__menu-item[data-sidebar-item="true"]:hover {
+        background-color: #004344 !important;
     }
 
-    /* Apps & Projects rows */
-    .__menu-item[data-sidebar-item="true"] {
-        background-color: #003636 !important;
-        background-image: none !important;
-    }
+    /* ========== CHAT HISTORY ITEMS ========== */
 
-    /* Apps button specifically */
-    [data-testid="apps-button"] {
-        background-color: #003636 !important;
+    /* The REAL clickable paint layer */
+    a[data-sidebar-item="true"]
+    > div.flex.min-w-0.grow.items-center.gap-2\.5 {
+        border-radius: 10px !important;
     }
 
-    /* Inner contents (icon + text) */
-    .__menu-item *,
-    .__menu-item *::before,
-    .__menu-item *::after {
-        background-color: #003636 !important;
-        background-image: none !important;
-    }
-    
-    
-    /* Sidebar root */
-    #stage-slideover-sidebar {
-        --sidebar-bg: #003636 !important;
-        background-color: #003636 !important;
-    }
-    
-    
-    /* Main sidebar */
-    #stage-slideover-sidebar {
-        --sidebar-bg: #003636 !important;
-        background-color: #003636 !important;
+    /* Hover (non-active) */
+    a[data-sidebar-item="true"]:hover:not([data-active])
+    > div.flex.min-w-0.grow.items-center.gap-2\.5 {
+        background-color: #004344 !important;
     }
 
-    /* Sidebar elevated surfaces (account section, sticky footer) */
-    #stage-slideover-sidebar {
-        --bg-elevated-secondary: #003636 !important;
+/* ACTIVE / CURRENT CHAT — FULL BOX */
+.__menu-item[data-sidebar-item="true"][data-active] {
+    background-color: #008282 !important;
+    border-radius: 10px !important;
+}
+    /* ========== ACCOUNT SECTION ========== */
+    [data-testid="accounts-profile-button"] {
+        background-color: #003636 !important;
+        border-radius: 10px !important;
     }
 
-    /* Kill the shadow/fade edge */
-    #stage-slideover-sidebar .shadow-sharp-edge-bottom {
-        box-shadow: none !important;
+    [data-testid="accounts-profile-button"]:hover {
+        background-color: #004344 !important;
     }
     
     
diff --git a/treeStyleTabs.css b/treeStyleTabs.css
index 1a63270..ffbc5e5 100644
--- a/treeStyleTabs.css
+++ b/treeStyleTabs.css
@@ -192,3 +192,23 @@ tab-item {
   scrollbar-color: var(--browser-toolbar_text-darker, var(--theme-colors-toolbar_bottom_separator, var(--in-content-button-background-hover-mixed)))
                    var(--theme-colors-toolbar, var(--in-content-box-background));
 }
+
+
+/* ═══════════════════════════════════════════════════════════════════
+   🔤 FONT SIZE CUSTOMIZATION
+   ═══════════════════════════════════════════════════════════════════ */
+
+/* Set tab font size to 13px */
+tab-item,
+tab-item *,
+.label,
+tab-label {
+  font-size: 13px !important;
+}
+
+/* Set font size for other sidebar elements */
+.after-tabs button,
+.after-tabs [role="button"],
+#subpanel-container {
+  font-size: 13px !important;
+}
diff --git a/userChrome.css b/userChrome.css
index ca6a255..3b7ac24 100644
--- a/userChrome.css
+++ b/userChrome.css
@@ -141,3 +141,39 @@ treechildren::-moz-tree-row(even) {
     display: none !important;
 }
 
+
+/* ═══════════════════════════════════════════════════════════════════
+   📏 COMPACT TOP BAR
+   ═══════════════════════════════════════════════════════════════════ */
+
+/* Make navigation bar taller than URL bar */
+#nav-bar {
+  max-height: 40px !important;
+  min-height: 40px !important;
+  padding-top: 4px !important;
+  padding-bottom: 4px !important;
+}
+
+/* Set font size to 13px for top bar elements */
+#nav-bar,
+#nav-bar * {
+  font-size: 13px !important;
+}
+
+/* Compact URL bar */
+#urlbar,
+#urlbar-input {
+  font-size: 13px !important;
+  min-height: 28px !important;
+}
+
+/* Compact toolbar buttons */
+#nav-bar toolbarbutton {
+  padding: 2px !important;
+}
+
+/* Compact URL bar container */
+#urlbar-container {
+  max-height: 28px !important;
+}
+