diff options
Diffstat (limited to 'CSS')
| -rw-r--r-- | CSS/chatgpt.com.css | 208 |
1 files changed, 208 insertions, 0 deletions
diff --git a/CSS/chatgpt.com.css b/CSS/chatgpt.com.css new file mode 100644 index 0000000..ae1a3f9 --- /dev/null +++ b/CSS/chatgpt.com.css @@ -0,0 +1,208 @@ +/* ==UserStyle== +@name ChatGPT +@namespace github.com/openstyles/stylus +@version 1.0.0 +@description A new userstyle +@author Me +==/UserStyle== */ + +@-moz-document url-prefix("https://chatgpt.com/"), url-prefix("https://chat.openai.com/") { + + html, body { + height: 100% !important; + background-image: url("https://images.unsplash.com/photo-1485470733090-0aae1788d5af?fm=jpg&q=60&w=3000&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8NGslMjBtb3VudGFpbnxlbnwwfHwwfHx8MA%3D%") !important; + background-size: cover !important; + background-position: center center !important; + background-repeat: no-repeat !important; + background-attachment: fixed !important; + overflow: hidden !important; + } + + /* React root */ + #__next { + background: transparent !important; + height: 100% !important; + } + + /* Main scrolling container */ + main { + background: transparent !important; + overflow-y: auto !important; + } +} + +@-moz-document url-prefix("https://chatgpt.com/"), url-prefix("https://chat.openai.com/") { + + /* Assistant message bubble */ + div[data-message-author-role="assistant"] { + padding: 12px 16px !important; + border-radius: 14px !important; + margin: 8px 0 !important; + + /* Bubble effect without changing colors */ + border: 1px solid rgba(17, 190, 191, 0.8) !important; + background-color: rgba(0, 54, 54, 0.7); + } + +} + +.content-fade::after { + background: none !important; +} + +@-moz-document url-prefix("https://chatgpt.com/"), url-prefix("https://chat.openai.com/") { + + /* Target the ChatGPT prompt (composer) background */ + [data-type="unified-composer"] .bg-token-bg-primary, + #prompt-textarea, + .ProseMirror { + background-color: #003636 !important; + } + + /* Also ensure the textarea wrapper reflects the new color */ + .wcDTda_prosemirror-parent { + background-color: #003636 !important; + } + +} + +@-moz-document url-prefix("https://chatgpt.com/"), url-prefix("https://chat.openai.com/") { + + /* make the main chat area and messages wider */ + .max-w-\(--thread-content-max-width\) { + max-width: 85vw !important; + width: 85vw !important; + } + + /* if the sidebar is present, subtract its width (about 16rem) */ + body:has(aside) .max-w-\(--thread-content-max-width\) { + max-width: calc(85vw - 16rem) !important; + width: calc(85vw - 16rem) !important; + } + + /* prevent horizontal overflow */ + body { + overflow-x: hidden !important; + } +} + +@-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 { + 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; + } + + /* Individual chat items */ + #history > *, + [data-testid="history"] > *, + [role="list"] > * { + background-color: #003636 !important; + } + + /* Scroll container that wraps history */ + div:has(> #history) { + background-color: #003636 !important; + } + + /* Sidebar header (ChatGPT logo + collapse button) */ + #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 { + background-color: #003636 !important; + background-image: none !important; + } + + + /* Apps / Projects wrapper */ + div[class^="pb-["] { + background-color: #003636 !important; + } + + /* Apps & Projects rows */ + .__menu-item[data-sidebar-item="true"] { + background-color: #003636 !important; + background-image: none !important; + } + + /* Apps button specifically */ + [data-testid="apps-button"] { + background-color: #003636 !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; + } + + /* Sidebar elevated surfaces (account section, sticky footer) */ + #stage-slideover-sidebar { + --bg-elevated-secondary: #003636 !important; + } + + /* Kill the shadow/fade edge */ + #stage-slideover-sidebar .shadow-sharp-edge-bottom { + box-shadow: none !important; + } + + +} |