diff options
| -rw-r--r-- | userContent.css | 251 |
1 files changed, 4 insertions, 247 deletions
diff --git a/userContent.css b/userContent.css index 4218d06..847d551 100644 --- a/userContent.css +++ b/userContent.css @@ -3,256 +3,13 @@ ╚════════════════════════════════════════════════════════════╝ */ /* userContent.css */ @-moz-document url(about:newtab), url("about:home") { - html { - --newtab-background-color: transparent !important; - --newtab-background-color-secondary: transparent !important; - background: transparent !important; - } - - body { - background: transparent !important; - } -} - - -/* ╔════════════════════════════════════════════════════════════╗ - ║ CHATGPT ║ - ╚════════════════════════════════════════════════════════════╝ */ -@-moz-document url-prefix("https://chatgpt.com/"), url-prefix("https://chat.openai.com/") { - - /* ╔════════════════════════════════════════════════════════════╗ - ║ PAGE BACKGROUND ║ - ╚════════════════════════════════════════════════════════════╝ */ - - html, - body { - min-height: 100% !important; - overflow-x: hidden !important; - overflow-y: hidden !important; - background: transparent !important; - } - - body::before { - content: "" !important; - position: fixed !important; - inset: 0 !important; - z-index: -1 !important; - background-image: transparent !important; - background-size: cover !important; - background-position: center center !important; - background-repeat: no-repeat !important; - } - - #__next { - background: transparent !important; - min-height: 100% !important; - height: auto !important; - } - - main { - background: transparent !important; - min-height: auto !important; - height: auto !important; - overflow: visible !important; - padding-top: 0 !important; - } - - - /* ╔════════════════════════════════════════════════════════════╗ - ║ ASSISTANT MESSAGE BUBBLES ║ - ╚════════════════════════════════════════════════════════════╝ */ - - div[data-message-author-role="assistant"] { - margin: 8px 0 !important; - padding: 12px 16px !important; - /* border: 1px solid rgba(17, 190, 191, 0.8) !important; */ - border-radius: 14px !important; - background-color: rgba(0, 54, 54, 0) !important; - } - - -/* ╔════════════════════════════════════════════════════════════╗ - ║ COMPOSER / PROMPT ║ - ╚════════════════════════════════════════════════════════════╝ */ - - [data-type="unified-composer"] .bg-token-bg-primary { - background-color: rgba(0, 35, 35, 1) !important; - } - - - /* ╔════════════════════════════════════════════════════════════╗ - ║ MAIN CHAT WIDTH ║ - ╚════════════════════════════════════════════════════════════╝ */ - - .max-w-\(--thread-content-max-width\) { - width: 85vw !important; - max-width: 85vw !important; - } - - body:has(aside) .max-w-\(--thread-content-max-width\) { - width: calc(85vw - 16rem) !important; - max-width: calc(85vw - 16rem) !important; - } - - body { - overflow-x: hidden !important; - } - - - /* ╔════════════════════════════════════════════════════════════╗ - ║ SIDEBAR FOUNDATION ║ - ╚════════════════════════════════════════════════════════════╝ */ - - aside, - #stage-slideover-sidebar { - background-color: #003636 !important; - background-image: none !important; - --sidebar-bg: #003636 !important; - --bg-elevated-secondary: #003636 !important; - } - - #stage-slideover-sidebar .shadow-sharp-edge-bottom { - box-shadow: none !important; - } - - #sidebar-header, - .touch\:px-1\.5.px-2 { - background-color: #003636 !important; - } - - - /* ╔════════════════════════════════════════════════════════════╗ - ║ SIDEBAR ITEMS ║ - ╚════════════════════════════════════════════════════════════╝ */ - - .__menu-item[data-sidebar-item="true"] { - background-color: #003636 !important; - border-radius: 10px !important; - } - - .__menu-item[data-sidebar-item="true"]:hover { - background-color: #004344 !important; - } - - a[data-sidebar-item="true"] > div.flex.min-w-0.grow.items-center.gap-2\.5 { - border-radius: 10px !important; - } - - a[data-sidebar-item="true"]:hover:not([data-active]) > div.flex.min-w-0.grow.items-center.gap-2\.5 { - background-color: #004344 !important; - } - - .__menu-item[data-sidebar-item="true"][data-active] { - background-color: #008282 !important; - border-radius: 10px !important; - } - - - /* ╔════════════════════════════════════════════════════════════╗ - ║ ACCOUNT / PROFILE ║ - ╚════════════════════════════════════════════════════════════╝ */ - - [data-testid="accounts-profile-button"] { - background-color: #003636 !important; - border-radius: 10px !important; - } - - [data-testid="accounts-profile-button"]:hover { - background-color: #004344 !important; - } - - - /* ╔════════════════════════════════════════════════════════════╗ - ║ HEADER STYLING ║ - ╚════════════════════════════════════════════════════════════╝ */ - - header, - [data-testid="conversation-header"] { - background-color: #003636 !important; - background-image: none !important; - backdrop-filter: none !important; - } - - @media (min-width: 1024px) { - header, - [data-testid="conversation-header"] { - background-color: transparent !important; - background-image: none !important; - backdrop-filter: none !important; - } - } - - /* ╔════════════════════════════════════════════════════════════╗ - ║ CODE BLOCK STYLING ║ - ╚════════════════════════════════════════════════════════════╝ */ - - /* CODE BLOCK STYLING */ - div.rounded-3xl.bg-token-bg-elevated-secondary:has(#code-block-viewer) { - background-color: rgba(0, 35, 35, 0.5) !important; - } - - - /* ╔════════════════════════════════════════════════════════════╗ - ║ REMOVE BOTTOM GREY / BLUR ║ - ╚════════════════════════════════════════════════════════════╝ */ - - .content-fade::after, - .content-fade, - .bg-token-bg-elevated-secondary, - .bg-token-bg-primary, - .bg-token-main-surface-primary, - .bg-token-main-surface-secondary, - .bg-token-sidebar-surface-primary, - .bg-token-sidebar-surface-secondary { + html { + --newtab-background-color: transparent !important; + --newtab-background-color-secondary: transparent !important; background: transparent !important; - background-color: transparent !important; - background-image: none !important; - backdrop-filter: none !important; - -webkit-backdrop-filter: none !important; } - /* Composer / bottom dock wrappers */ - [data-type="unified-composer"], - [data-type="unified-composer"] > div, - form:has(#prompt-textarea), - form:has(.ProseMirror) { + body { background: transparent !important; - background-color: transparent !important; - background-image: none !important; - backdrop-filter: none !important; - -webkit-backdrop-filter: none !important; - box-shadow: none !important; - } - - .content-fade::after, - .content-fade, - .bg-token-sidebar-surface-primary, - .bg-token-sidebar-surface-secondary { - background-image: linear-gradient( - to bottom, - rgba(0, 54, 54, 0) 0%, - rgba(0, 54, 54, 0.06) 20%, - rgba(0, 54, 54, 0.18) 45%, - rgba(0, 54, 54, 0.42) 70%, - rgba(0, 54, 54, 0.75) 88%, - rgba(0, 54, 54, 1) 100% - ) !important; } - - /* ╔════════════════════════════════════════════════════════════╗ - ║ FORCE SIDEBAR BACKGROUND COLOR ║ - ╚════════════════════════════════════════════════════════════╝ */ - - #stage-slideover-sidebar, - #stage-slideover-sidebar nav, - #stage-slideover-sidebar nav > aside:first-of-type, - #stage-slideover-sidebar .bg-token-sidebar-surface-primary, - #stage-slideover-sidebar .bg-token-sidebar-surface-secondary { - background-color: #003636 !important; - background-image: none !important; - backdrop-filter: none !important; - -webkit-backdrop-filter: none !important; - box-shadow: none !important; - } - } |