|
// ==UserScript== |
|
// @name ChatGPT CSS fixes |
|
// @version 2026-07-23 |
|
// @description Adjusts the ChatGPT web UI for convenience: wider chat area, colored message bubbles, clearer code blocks, multi-line history items, and a few other tweaks for heavy ChatGPT use. ❤️ CONSIDER SUPPORT: ko-fi.com/alexchexes ❤️ |
|
// @updateURL https://gist.github.com/alexchexes/d2ff0b9137aa3ac9de8b0448138125ce/raw/chatgpt_ui_fix.user.js |
|
// @downloadURL https://gist.github.com/alexchexes/d2ff0b9137aa3ac9de8b0448138125ce/raw/chatgpt_ui_fix.user.js |
|
// @author alexchexes |
|
// @website https://ko-fi.com/alexchexes |
|
// @namespace http://tampermonkey.net/ |
|
// @match https://chat.openai.com/* |
|
// @match https://chatgpt.com/* |
|
// @icon https://www.google.com/s2/favicons?sz=64&domain=openai.com |
|
// @grant GM_addStyle |
|
// ==/UserScript== |
|
|
|
/* global GM_addStyle */ |
|
|
|
console.info( |
|
"%c'ChatGPT CSS fixes' userscript is connected", |
|
"color: #8ff; background: #000", |
|
); |
|
|
|
(function () { |
|
const SELECTORS = { |
|
PROMPT_INPUT: `div#prompt-textarea.ProseMirror`, |
|
SIDEBAR: `#stage-slideover-sidebar[style*="sidebar-width"]`, |
|
CHAT_MESSAGE: `[data-turn]`, |
|
}; |
|
|
|
// Prevent chatGPT bug that breaks interface when PageUp/PgDown key is pressed when textarea is focused and not empty |
|
document.addEventListener("keydown", function (e) { |
|
if ( |
|
(e.key === "PageUp" || e.key === "PageDown") && |
|
e.target.matches(SELECTORS.PROMPT_INPUT) |
|
) { |
|
e.preventDefault(); |
|
} |
|
}); |
|
|
|
const accentForDark = `#f39c12`; |
|
|
|
const defaultSettings = { |
|
// Main UI background color |
|
mainBgColor: { |
|
enabled: true, |
|
bgColorDark: `#292828`, |
|
}, |
|
|
|
/* CHAT ELEMENTS */ |
|
|
|
chatWidth: { |
|
enabled: true, |
|
maxWidth: `90%`, |
|
}, |
|
|
|
userInputWidth: { |
|
enabled: true, |
|
maxWidth: `70%`, |
|
}, |
|
|
|
projectScreenWidth: { |
|
enabled: true, |
|
maxWidth: `70vw`, |
|
}, |
|
|
|
textAreaHeight: { |
|
enabled: true, |
|
maxHeight: "50dvh", |
|
}, |
|
|
|
codeBlockFont: { |
|
enabled: true, |
|
fontFamily: `Consolas`, |
|
}, |
|
|
|
codeBlockBackground: { |
|
enabled: true, |
|
bgColorDark: `#181818`, |
|
// bgColorLight: `#252525`, |
|
}, |
|
|
|
codeBlockLineBreaks: { enabled: true }, |
|
inlineCodeColor: { enabled: true }, |
|
codeBlocksInUserMessages: { enabled: true }, |
|
|
|
userMessageVisibility: { |
|
enabled: true, |
|
backgroundDark: `linear-gradient(135deg, #34437a, #2b2f54)`, |
|
backgroundLight: `#c1d6f6`, |
|
}, |
|
|
|
botAvatarVisibility: { enabled: true }, |
|
|
|
botThinkingHeadings: { |
|
enabled: true, |
|
colorDark: `#66ceff`, |
|
colorLight: `#0047c2`, |
|
}, |
|
|
|
responseVariantsVisibility: { enabled: true }, |
|
|
|
tableMargins: { enabled: true }, |
|
|
|
/* TOP BAR */ |
|
|
|
topBarTransparency: { enabled: true }, |
|
|
|
projectChatNameVisibility: { enabled: true }, |
|
|
|
gptVersionVisibility: { |
|
enabled: true, |
|
colorLegacy: accentForDark, |
|
}, |
|
|
|
/* SIDEBAR */ |
|
|
|
sidebarWidth: { |
|
enabled: true, |
|
sidebarWidth: `330px`, |
|
}, |
|
sidebarHeadingsVisibility: { |
|
enabled: true, |
|
color: accentForDark, |
|
}, |
|
multilineHistoryTitles: { |
|
enabled: true, |
|
}, |
|
|
|
/* MISC (chatGPT) */ |
|
|
|
// modal in Personalisation > Memory height |
|
saneModalHeight: { |
|
enabled: true, |
|
}, |
|
|
|
projectChatsSubtitles: { |
|
enabled: true, |
|
}, |
|
|
|
projectChatsListWidth: { |
|
enabled: true, |
|
}, |
|
|
|
projectChatsPaddings: { |
|
enabled: true, |
|
}, |
|
|
|
headersColor: { |
|
enabled: true, |
|
}, |
|
|
|
listBulletsColors: { |
|
enabled: true |
|
}, |
|
|
|
chatTypeButtonColor: { |
|
enabled: true, |
|
color: `var(--theme-secondary-btn-bg)`, |
|
}, |
|
|
|
/* CODEX */ |
|
inTaskTextAreaSize: { |
|
enabled: true, |
|
}, |
|
}; |
|
|
|
const constructFeaturesCss = () => { |
|
const cssByFeature = { |
|
// Main UI BG color |
|
mainBgColor: ` |
|
html.dark, |
|
html.dark body, |
|
html.dark .bg-token-sidebar-surface-primary, |
|
html.dark .bg-surface-primary, |
|
html.dark .bg-\\(--sidebar-surface-primary\\), |
|
html.dark .dark\\:bg-token-bg-secondary-surface, |
|
html.dark .bg-token-main-surface-primary, |
|
html.dark #thread-bottom-container:after |
|
{ |
|
background-color: ${defaultSettings.mainBgColor.bgColorDark} !important; |
|
} |
|
|
|
html.dark .content-fade:after { |
|
background-color: ${defaultSettings.mainBgColor.bgColorDark} !important; |
|
-webkit-mask-image: linear-gradient(to bottom, #0000 0, ${defaultSettings.mainBgColor.bgColorDark} var(--content-fade-distance), ${defaultSettings.mainBgColor.bgColorDark} 100%) !important; |
|
-webkit-mask-image: linear-gradient(to bottom, #0000 0, ${defaultSettings.mainBgColor.bgColorDark} var(--content-fade-distance), ${defaultSettings.mainBgColor.bgColorDark} 100%) !important; |
|
-webkit-mask-image: linear-gradient(to bottom, #0000 0, ${defaultSettings.mainBgColor.bgColorDark} var(--content-fade-distance), ${defaultSettings.mainBgColor.bgColorDark} 100%) !important; |
|
-webkit-mask-image: linear-gradient(to bottom, #0000 0, ${defaultSettings.mainBgColor.bgColorDark} var(--content-fade-distance), ${defaultSettings.mainBgColor.bgColorDark} 100%) !important; |
|
mask-image: linear-gradient(to bottom, #0000 0, ${defaultSettings.mainBgColor.bgColorDark} var(--content-fade-distance), ${defaultSettings.mainBgColor.bgColorDark} 100%) !important; |
|
} |
|
|
|
[data-testid="thread-disclaimer"] { |
|
display: none; |
|
} |
|
`, |
|
|
|
/*------------------------------* |
|
* CHAT ELEMENTS * |
|
*-------------------------------*/ |
|
|
|
/* Main chat section width */ |
|
chatWidth: ` |
|
@container (min-width: 768px) { |
|
${SELECTORS.CHAT_MESSAGE} > div > .\\[--thread-content-max-width\\:40rem\\], |
|
/* group chats: */ |
|
main > div[role="presentation"] > section > div > div > .\\[--thread-content-max-width\\:40rem\\] |
|
{ |
|
max-width: ${defaultSettings.chatWidth.maxWidth} !important; |
|
} |
|
|
|
/* Deep Research containers */ |
|
${SELECTORS.CHAT_MESSAGE} > div > .\\[--thread-content-max-width\\:40rem\\] .p-4.sm\\:p-8, |
|
${SELECTORS.CHAT_MESSAGE} > div > .\\[--thread-content-max-width\\:40rem\\] .p-4.sm\\:p-8 > .\\[--thread-content-max-width\\:40rem\\] { |
|
max-width: 100%; |
|
} |
|
} |
|
`, |
|
|
|
userInputWidth: ` |
|
@container (min-width: 768px) { |
|
#thread-bottom-container .\\[--thread-content-max-width\\:40rem\\] { |
|
max-width: ${defaultSettings.userInputWidth.maxWidth} !important; |
|
} |
|
} |
|
`, |
|
|
|
projectScreenWidth: ` |
|
@container (min-width: 850px) { |
|
.px-\\(--thread-content-margin\\).h-full > .mx-auto.flex.max-w-\\(--thread-content-max-width\\).flex-1.text-base.flex-col { |
|
max-width: ${defaultSettings.projectScreenWidth.maxWidth} !important; |
|
} |
|
} |
|
`, |
|
|
|
textAreaHeight: ` |
|
@media (min-width: 768px) { |
|
.max-h-\\[25dvh\\].overflow-auto { |
|
max-height: ${defaultSettings.textAreaHeight.maxHeight}; |
|
} |
|
} |
|
`, |
|
|
|
/* Code blocks font */ |
|
codeBlockFont: ` |
|
code, pre { |
|
font-family: ${defaultSettings.codeBlockFont.fontFamily}, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace !important; |
|
font-size: 14px; |
|
} |
|
`, |
|
|
|
/* Code blocks background color */ |
|
codeBlockBackground: ` |
|
/* DARK */ |
|
html.dark pre > div.rounded-md, |
|
html.dark .bg-token-bg-elevated-secondary { |
|
background-color: ${defaultSettings.codeBlockBackground.bgColorDark}; |
|
} |
|
`, |
|
|
|
// Break lines in code blocks (both chatGPT and user messages) |
|
codeBlockLineBreaks: ` |
|
@media (min-width: 768px) { |
|
pre .cm-content, |
|
pre.overflow-x-auto > code { |
|
white-space: pre-wrap !important; |
|
overflow-wrap: anywhere !important; |
|
min-width: unset !important; |
|
} |
|
} |
|
`, |
|
|
|
inlineCodeColor: ` |
|
html.dark [data-message-author-role="user"] div > code, |
|
html.dark .prose code:not(:where(pre code)) { |
|
color: #eab38a; |
|
background: #272727; |
|
border: 1px solid rgba(94, 93, 89, 0.25); |
|
} |
|
html.dark .prose a>code:not(:where(pre code)) { |
|
color: inherit; |
|
} |
|
`, |
|
|
|
/* Code blocks inside user messages */ |
|
codeBlocksInUserMessages: ` |
|
/* inline code */ |
|
[data-message-author-role="user"] div > code { |
|
font-size: 14px; |
|
background: #00000030 !important; |
|
border-radius: .25rem; |
|
padding: 1px 5px; |
|
border: 1px solid #00000026 !important; |
|
} |
|
|
|
/* multiline code blocks */ |
|
[data-message-author-role="user"] pre { |
|
background: #00000030; |
|
padding: 2px 7px; |
|
border-radius: 11px; |
|
} |
|
|
|
/* multiline code blocks FONT SIZE */ |
|
[data-message-author-role="user"] pre > code { |
|
font-size: 14px; |
|
} |
|
`, |
|
|
|
/* Make our messages more visible. */ |
|
userMessageVisibility: ` |
|
/* DARK */ |
|
html.dark .user-message-bubble-color { |
|
background: ${defaultSettings.userMessageVisibility.backgroundDark}; |
|
} |
|
|
|
/* LIGHT */ |
|
html.light .user-message-bubble-color { |
|
background: ${defaultSettings.userMessageVisibility.backgroundLight}; |
|
} |
|
`, |
|
|
|
/* Make bot message start more visible by increasing visibility of its avatar. */ |
|
botAvatarVisibility: ` |
|
/* DARK */ |
|
html.dark .gizmo-bot-avatar > div { |
|
background: linear-gradient(45deg, #3F51B5, #00BCD4); |
|
} |
|
html.dark .gizmo-bot-avatar { |
|
outline: none; |
|
} |
|
|
|
/* LIGHT */ |
|
html.light .gizmo-bot-avatar > div { |
|
background: #252525; |
|
color: #ffffff; |
|
} |
|
`, |
|
|
|
botThinkingHeadings: ` |
|
html.dark ${SELECTORS.CHAT_MESSAGE} p strong.font-semibold.text-token-text-primary { |
|
color: ${defaultSettings.botThinkingHeadings.colorDark}; |
|
} |
|
html.light ${SELECTORS.CHAT_MESSAGE} p strong.font-semibold.text-token-text-primary { |
|
color: ${defaultSettings.botThinkingHeadings.colorLight}; |
|
} |
|
`, |
|
|
|
responseVariantsVisibility: ` |
|
${SELECTORS.CHAT_MESSAGE} div.has-data-\\[state\\=open\\]\\:opacity-100:has(button[aria-label="Previous response"]) { |
|
opacity: 1 !important; |
|
} |
|
button[aria-label="Previous response"] + div.tabular-nums { |
|
background: #f39c12; |
|
border-radius: 6px; |
|
color: #181818; |
|
padding: 0 5px; |
|
} |
|
`, |
|
|
|
tableMargins: ` |
|
${SELECTORS.CHAT_MESSAGE} [class*="_tableContainer"] { |
|
width: 100%; |
|
max-width: 100%; |
|
margin: 0; |
|
scrollbar-width: auto; |
|
pointer-events: auto; |
|
} |
|
${SELECTORS.CHAT_MESSAGE} [class*="_tableContainer"] > [class*="_tableWrapper"] { |
|
margin: 0; |
|
} |
|
`, |
|
|
|
/*----------------* |
|
* TOP BAR * |
|
*-----------------*/ |
|
|
|
/* Make top bar transparent as it consumes vertical space for no reason */ |
|
topBarTransparency: ` |
|
#page-header { |
|
background: transparent !important; |
|
width: 100%; |
|
box-shadow: none; |
|
} |
|
|
|
/* Background for top bar element that shows the current GPT version */ |
|
/* DARK */ |
|
html.dark #page-header button:not(:hover):not([data-state="on"]):not([data-state="off"]), |
|
html.dark .translucent-surface { |
|
background-color: #2121218a; |
|
border-radius: 8px; |
|
backdrop-filter: blur(2px); |
|
} |
|
|
|
/* LIGHT */ |
|
html.light #page-header button:not(:hover) { |
|
background-color: #ffffffb0; |
|
border-radius: 8px; |
|
backdrop-filter: blur(2px); |
|
} |
|
`, |
|
|
|
/* Project chat name visibility */ |
|
projectChatNameVisibility: ` |
|
/* DARK */ |
|
html.dark main .sticky.top-0 .flex.items-center.gap-0.overflow-hidden button > div.truncate { |
|
color: #e9cc9e; |
|
} |
|
/* LIGHT */ |
|
html.light main .sticky.top-0 .flex.items-center.gap-0.overflow-hidden button > div.truncate { |
|
color: #000; |
|
} |
|
`, |
|
|
|
/* GPT version visibility */ |
|
gptVersionVisibility: ` |
|
/* OLD: */ |
|
/* DARK */ |
|
html.dark .sticky.top-0 [type="button"] > div > span.text-token-text-tertiary { |
|
color: ${defaultSettings.gptVersionVisibility.colorLegacy}; |
|
} |
|
/* LIGHT */ |
|
html.light .sticky.top-0 [type="button"] > div > span.text-token-text-tertiary { |
|
color: #000; |
|
} |
|
|
|
/* NEW (2026-04) */ |
|
button.__composer-pill--neutral > span { |
|
color: var(--default-theme-entity-accent); |
|
} |
|
`, |
|
|
|
/*------------------* |
|
* SIDEBAR * |
|
*-------------------*/ |
|
|
|
/* Sidebar width */ |
|
sidebarWidth: ` |
|
@media not all and (max-width: 768px) { |
|
${SELECTORS.SIDEBAR}, |
|
${SELECTORS.SIDEBAR} .w-\\(--sidebar-width\\) { |
|
width: ${defaultSettings.sidebarWidth.sidebarWidth} !important; |
|
} |
|
} |
|
`, |
|
|
|
/* History periods headings (like "Today", "Yesterday") visibility */ |
|
sidebarHeadingsVisibility: ` |
|
/* DARK */ |
|
html.dark ${SELECTORS.SIDEBAR} h3 { |
|
color: ${defaultSettings.sidebarHeadingsVisibility.color}; |
|
} |
|
|
|
/* LIGHT */ |
|
html.light ${SELECTORS.SIDEBAR} h3 { |
|
font-weight: 700; |
|
} |
|
`, |
|
|
|
multilineHistoryTitles: ` |
|
${SELECTORS.SIDEBAR} #history a[draggable="true"] .truncate { |
|
overflow: visible; |
|
white-space: normal; |
|
} |
|
${SELECTORS.SIDEBAR} #history a[draggable="true"] > div.text-token-text-tertiary.flex.items-center.self-stretch { |
|
position: absolute; |
|
right: 5px; |
|
top: 50%; |
|
translate: 0 -50%; |
|
} |
|
`, |
|
|
|
/* MISC */ |
|
saneModalHeight: ` |
|
div[role="dialog"] .h-\\[24rem\\] { |
|
height: 75vh; |
|
} |
|
`, |
|
|
|
projectChatsSubtitles: ` |
|
html.dark li.hover\\:bg-token-bg-tertiary a .text-token-text-secondary.truncate.text-sm { |
|
color: #999999; |
|
} |
|
`, |
|
|
|
projectChatsListWidth: ` |
|
.text-base.overflow-y-auto.my-auto.mx-auto:has(li.hover\\:bg-token-bg-tertiary) { |
|
width: 100%; |
|
} |
|
`, |
|
|
|
projectChatsPaddings: ` |
|
li.hover\\:bg-token-bg-tertiary .group.relative.flex.flex-col.gap-1.p-4 { |
|
padding-block: 8px; |
|
} |
|
`, |
|
|
|
headersColor: ` |
|
html.dark ${SELECTORS.CHAT_MESSAGE} h1, |
|
html.dark ${SELECTORS.CHAT_MESSAGE} h2, |
|
html.dark ${SELECTORS.CHAT_MESSAGE} h3, |
|
html.dark ${SELECTORS.CHAT_MESSAGE} h4, |
|
html.dark ${SELECTORS.CHAT_MESSAGE} h5, |
|
html.dark ${SELECTORS.CHAT_MESSAGE} h6 { |
|
color: #ffcc6d; |
|
} |
|
`, |
|
|
|
listBulletsColors: ` |
|
html.dark ${SELECTORS.CHAT_MESSAGE} li::marker { |
|
color: #e4cc9e; |
|
} |
|
`, |
|
|
|
chatTypeButtonColor: ` |
|
html.dark #page-header button[data-state="on"]:not(:hover) { |
|
background-color: ${defaultSettings.chatTypeButtonColor.color}; |
|
} |
|
`, |
|
|
|
inTaskTextAreaSize: ` |
|
._prosemirror-parent_kfgfu_2 { |
|
max-height: 50vh !important; |
|
} |
|
`, |
|
}; |
|
|
|
// Adding a unique string to find our <style> element later |
|
const cssIdComment = `/* USERSCRIPT_FEATURES_STYLES */`; |
|
|
|
const cssBase = ` |
|
#stage-sidebar-tiny-bar { |
|
cursor: pointer; |
|
} |
|
`; |
|
|
|
let cssStyles = cssIdComment + cssBase; |
|
|
|
// Combine feature CSS blocks into a single CSS string if enabled in the current settings |
|
for (let key in cssByFeature) { |
|
if (Object.prototype.hasOwnProperty.call(cssByFeature, key)) { |
|
if ( |
|
typeof defaultSettings[key] !== "undefined" && |
|
defaultSettings[key].enabled |
|
) { |
|
cssStyles += cssByFeature[key] + "\n"; |
|
} |
|
} |
|
} |
|
|
|
cssStyles = cssStyles.replaceAll("\t", " "); |
|
return cssStyles; |
|
}; |
|
|
|
const renderFeaturesStyles = () => { |
|
const css = constructFeaturesCss(); |
|
GM_addStyle(css); |
|
}; |
|
|
|
/* Stub for the later update */ |
|
// const removeFeaturesStyles = () => { |
|
// let style_elements = document.querySelectorAll('style'); |
|
|
|
// style_elements.forEach(style_el => { |
|
// if (style_el.innerHTML.includes('USERSCRIPT_FEATURES_STYLES')) { |
|
// style_el.remove(); |
|
// } |
|
// }); |
|
// }; |
|
|
|
renderFeaturesStyles(); |
|
})(); |
@yagoiroot Fixed, tell me if you still see any problems after updating.