From 1e3d71b45809efe11905e91817de0950d685df42 Mon Sep 17 00:00:00 2001 From: bh Date: Thu, 15 Jan 2026 17:29:36 +0800 Subject: Added some new stuff to userChrome and treeStyleTabs. Refactored CSS for chatgpt --- CSS/chatgpt.com.css | 122 +++++++++++++++------------------------------------- treeStyleTabs.css | 20 +++++++++ userChrome.css | 36 ++++++++++++++++ 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; +} + -- cgit v1.2.3