Skip to content

Instantly share code, notes, and snippets.

@hym3242
Created May 14, 2023 10:51
Show Gist options
  • Save hym3242/12020f082cf57f5e0330d69f7c2ff431 to your computer and use it in GitHub Desktop.
Save hym3242/12020f082cf57f5e0330d69f7c2ff431 to your computer and use it in GitHub Desktop.
Various enhacements for chat.openai.com, including easier to use textarea styling, and less waste of screen real estate
var el = document.querySelector("#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.relative.flex.h-full.max-w-full.flex-1.overflow-hidden > div > main > div.absolute.bottom-0.left-0.w-full.border-t.md\\:border-t-0.dark\\:border-white\\/20.md\\:border-transparent.md\\:dark\\:border-transparent.md\\:bg-vert-light-gradient.bg-white.dark\\:bg-gray-800.md\\:\\!bg-transparent.dark\\:md\\:bg-vert-dark-gradient.pt-2 > form > div > div.flex.flex-col.w-full.py-2.flex-grow.md\\:py-3.md\\:pl-4.relative.border.border-black\\/10.bg-white.dark\\:border-gray-900\\/50.dark\\:text-white.dark\\:bg-gray-700.rounded-md.shadow-\\[0_0_10px_rgba\\(0\\,0\\,0\\,0\\.10\\)\\].dark\\:shadow-\\[0_0_15px_rgba\\(0\\,0\\,0\\,0\\.10\\)\\]");
el.style.boxSizing='border-box';
el.style.backgroundColor='#fafafa';
var ta = document.querySelector("#__next > div.overflow-hidden.w-full.h-full.relative.flex.z-0 > div.relative.flex.h-full.max-w-full.flex-1.overflow-hidden > div > main > div.absolute.bottom-0.left-0.w-full.border-t.md\\:border-t-0.dark\\:border-white\\/20.md\\:border-transparent.md\\:dark\\:border-transparent.md\\:bg-vert-light-gradient.bg-white.dark\\:bg-gray-800.md\\:\\!bg-transparent.dark\\:md\\:bg-vert-dark-gradient.pt-2 > form > div > div.flex.flex-col.w-full.py-2.flex-grow.md\\:py-3.md\\:pl-4.relative.border.border-black\\/10.bg-white.dark\\:border-gray-900\\/50.dark\\:text-white.dark\\:bg-gray-700.rounded-md.shadow-\\[0_0_10px_rgba\\(0\\,0\\,0\\,0\\.10\\)\\].dark\\:shadow-\\[0_0_15px_rgba\\(0\\,0\\,0\\,0\\.10\\)\\] > textarea");
ta.addEventListener('mouseover',function(){
if(document.activeElement != ta){
el.style.boxShadow = '0 0 10px rgba(0,0,0,.22)';
}
});
ta.addEventListener('mouseout',function(){
if(document.activeElement != ta){
el.style.boxShadow = '0 0 10px rgba(0,0,0,.1)';
}
});
var style0 = document.createElement('style');
document.head.appendChild(style0);
document.querySelectorAll("textarea")[0].addEventListener('focus',function(){
el.style.outline='1px solid #9c9c9c';
el.style.backgroundColor='#ffffff';
el.style.boxShadow = '0 0 10px rgba(0,0,0,.27)';
style0.innerHTML = "textarea::placeholder { opacity: 0.4; }";
});
document.querySelectorAll("textarea")[0].addEventListener('blur',function(){
el.style.outline='0px';
el.style.backgroundColor='#fafafa';
el.style.boxShadow = '0 0 10px rgba(0,0,0,.1)';
style0.innerHTML = "textarea::placeholder { opacity: 1.0; }";
});
var style1 = document.createElement('style');
style1.innerHTML = `
@media (min-width:1024px) {
.lg\\:max-w-xl {
max-width: 50rem !important;
}
}
@media (min-width:1280px) {
.lg\\:max-w-xl {
max-width: 70rem !important;
}
}
`;
document.head.appendChild(style1);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment