Last active
April 2, 2024 22:34
-
-
Save jaggzh/7b483b183562db31bde6f9bc972f126e to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* gist-paste -u https://gist.github.com/jaggzh/7b483b183562db31bde6f9bc972f126e manifest.json content-script.js */ | |
(function() { | |
const accentColor = `#f39c12`; | |
const messagesCss = ` | |
/* Message body width */ | |
@media (min-width: 1280px) { | |
.xl\\:max-w-3xl { | |
max-width: 90% !important; | |
} | |
} | |
@media (min-width: 1024px) { | |
.lg\\:max-w-\\[38rem\\] { | |
max-width: 90% !important; | |
} | |
} | |
@media (min-width: 768px) { | |
.md\\:max-w-2xl { | |
max-width: 90% !important; | |
} | |
.md\\:max-w-3xl { | |
max-width: 90% !important; | |
} | |
} | |
/* Code blocks font */ | |
code, pre { | |
font-family: Consolas,Söhne Mono,Monaco,Andale Mono,Ubuntu Mono,monospace!important; | |
/* font-family: Iosevka Custom, Söhne Mono,Monaco,Andale Mono,Ubuntu Mono,monospace!important; */ | |
/* font-size: 12px !important; */ | |
} | |
/* Code blocks background color */ | |
pre > div.rounded-md { | |
background-color: #121214; | |
} | |
/* Code blocks headings background color */ | |
pre > div.rounded-md > div.flex.items-center.relative { | |
background-color: #323235; | |
} | |
/* Bring back background destinction between bot and user messages */ | |
/* DARK THEME */ | |
html.dark .flex.flex-col.pb-9.text-sm .w-full.text-token-text-primary[data-testid]:nth-child(odd) { | |
background-color: #151517; | |
} | |
/* LIGHT THEME */ | |
html.light .flex.flex-col.pb-9.text-sm .w-full.text-token-text-primary[data-testid]:nth-child(odd) { | |
background-color: #d2d2d2; | |
} | |
/* Make top bar transparent as it consumes vertical space for no reason */ | |
/* DARK THEME */ | |
html.dark div.sticky.top-0.flex.items-center.justify-between.z-10.h-14.p-2.font-semibold { | |
background-color: rgba(52,53,65,0); | |
background-image: linear-gradient(90deg, #0d0d0d 0%, transparent 20%); | |
} | |
/* LIGHT THEME */ | |
html.light div.sticky.top-0.flex.items-center.justify-between.z-10.h-14.p-2.font-semibold { | |
background-color: rgba(52,53,65,0); | |
background-image: linear-gradient(90deg, #fff 0%, transparent 20%); | |
} | |
/* Make GPT version number more visible */ | |
html.dark .group.flex.cursor-pointer.items-center.gap-1.rounded-xl.py-2.px-3.text-lg.font-medium.hover\\:bg-gray-50.radix-state-open\\:bg-gray-50.dark\\:hover\\:bg-black\\/10.dark\\:radix-state-open\\:bg-black\\/20 span.text-token-text-secondary { | |
color: ${accentColor}; | |
} | |
/* BREAK LINES IN CODE BLOCKS */ | |
code.\\!whitespace-pre { | |
white-space: pre-wrap !important; | |
} | |
`; | |
const sidebar_new_width = `330px`; | |
const sidebar_container_selector = `.flex-shrink-0.overflow-x-hidden[style^="width: 260px"]`; | |
// html.TridactylThemeDefault.dark body.antialiased div#__next div.relative.z-0.flex.h-full.w-full.overflow-hidden div.relative.flex.h-full.max-w-full.flex-1.flex-col.overflow-hidden main.relative.h-full.w-full.flex-1.overflow-auto.transition-width div.fixed.left-0.top-1/2.z-40 button span div.flex.h-[72px].w-8.items-center.justify-center div.flex.h-6.w-6.flex-col.items-center | |
const sidebarCss = ` | |
/* Sidebar width */ | |
${sidebar_container_selector}, | |
${sidebar_container_selector} .w-\\[260px\\] { | |
width: ${sidebar_new_width} !important; | |
} | |
/* Adjust position of the new show/hide-sidebar control button to match the new width */ | |
main div.fixed.left-0.top-1\\/2.z-40 { | |
/* translateX(15em) !important; */ | |
/* transform: translateX(50px) translateY(-50%) rotate(180deg) translateZ(0px) !important; */ | |
} | |
/*------------------*/ | |
/* Sidebar elements */ | |
/*------------------*/ | |
/* History periods headings color */ | |
html.dark h3.h-9.pb-2.pt-3.px-2.text-xs.font-medium.text-ellipsis.overflow-hidden.break-all.text-token-text-tertiary { | |
color: ${accentColor}; | |
} | |
/* Buttons on active chat (to make it visible when title is too long) */ | |
html.dark div.group.relative.rounded-lg.active\\:opacity-90.bg-token-sidebar-surface-secondary button.flex.items-center.justify-center.text-token-text-primary.transition.hover\\:text-token-text-secondary.radix-state-open\\:text-token-text-secondary svg > path { | |
fill: ${accentColor}; | |
} | |
ol > li > div > a > div.relative.grow.overflow-hidden.whitespace-nowrap { | |
overflow: visible; | |
white-space: unset; | |
} | |
ol > li > div > a > div.relative.grow.overflow-hidden.whitespace-nowrap > div.absolute.to-transparent { | |
background-image: none; | |
} | |
a.hover\\:pr-4:hover, | |
a.flex.py-3.px-3.items-center.gap-3.relative.rounded-md.hover\\:bg-gray-100.dark\\:hover\\:bg-\\[\\#2A2B32\\].cursor-pointer.break-all.bg-gray-50.hover\\:pr-4.dark\\:bg-gray-900.group | |
{ | |
padding-right: unset !important; | |
} | |
div.absolute.inset-y-0.right-0.w-8.z-10.bg-gradient-to-l.dark\\:from-gray-900.from-gray-50.group-hover\\:from-gray-100.dark\\:group-hover\\:from-\\[\\#2A2B32\\] { | |
background: none; | |
} | |
`; | |
const cssStyles = (messagesCss + sidebarCss).replaceAll("\t", ' '); | |
// Create a new <style> element and set its content to the CSS rules | |
var styleElement = document.createElement("style"); | |
styleElement.innerHTML = cssStyles; | |
// Append the new <style> element to the <head> section of the document | |
document.head.appendChild(styleElement); | |
})(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"manifest_version": 2, | |
"name": "ChatGPT UI Fix", | |
"version": "1.0", | |
"description": "Customize the appearance of chat.openai.com.", | |
"permissions": [ | |
"activeTab" | |
], | |
"content_scripts": [ | |
{ | |
"matches": ["*://chat.openai.com/*"], | |
"js": ["content-script.js"] | |
} | |
], | |
"icons": { | |
"48": "icons/border-48.png" | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment