This is my latest CSS for using with Stylus or equivalent. I’m using it in Opera with “Custom Style Script.” I cannot figure out how to get the user prompts in the history – this 70% thing – to be wider. Any help would be appreciated, thanks.
P.S. I know, this is NOT about the API, but we had a pretty awesome conversation back in 2023 ( link ).
/* modified, combined and confused from https://community.openai.com/t/customize-your-interface-for-chatgpt-web-custom-css-inside/315446/3 */
/* Allow width to expand for the main chat panel */
.gizmo .gizmo\:xl\:max-w-\[48rem\] {
max-width: 95%;
}
/* Wrap Text in Code Blocks */
.\!whitespace-pre {
white-space: pre-wrap !important;
}
/* Stretch the input box to 95% */
form.stretch {
max-width: 95%;
}
/* Alternate Colors */
.w-full.text-token-text-primary.border-b.border-black\/10.gizmo\:border-0.dark\:border-gray-900\/50.gizmo\:dark\:border-0.bg-gray-50.gizmo\:bg-transparent.dark\:bg-\[\#444654\].gizmo\:dark\:bg-transparent {
background: hsl(180, 50%, 90%);
margin: 10px;
}
/* ---- */
/* Wider chat window */
.xl\:max-w-3xl, .md\:max-w-3xl {
max-width: 95%;
}
/* remove grey space */
.md\:h-48 {
height: 0rem;
}
/* Increase side scroll bar width*/
[class^="react-scroll-to-bottom--"]::-webkit-scrollbar {
width: 15px;
}
/* Increase side scroll bar thumb and scroll speed*/
[class^="react-scroll-to-bottom--"]::-webkit-scrollbar-thumb {
min-height: 60px;
}
[class^="btn relative btn-danger"]
{
border-radius: 10px;
background: #BF5700;
border: 3px solid #BF5700;
color: #fff
}
[class^="btn relative btn-neutral"]
{
border-radius: 10px;
background: #9cadb7;
border: 3px solid #fff;
color: #fff
}
/* Remove prompt suggestions */
.md\:overflow-visible {
display: none;
}
/* Move regenerate button under the prompt input */
.md\:items-end {
align-items: flex-end;
position: absolute;
left: 0;
bottom: +69px;
}
/* Add red bg color to regenerate button*/
button.btn.relative.btn-neutral.whitespace-nowrap.-z-0.border-0.md\:border {
border-radius: 10px;
background: #BF5700;
border: 1px solid #BF5700;
color: #fff
}
/* Regenerate button hover*/
button.btn.relative.btn-neutral.whitespace-nowrap.-z-0.border-0.md\:border:hover {
background: #9cadb7;
border: 1px solid #9cadb7;
transition: 0.25s;
}
/* Add "response" to regenerate button*/
button.btn.relative.btn-neutral.whitespace-nowrap.-z-0.border-0.md\:border .flex.w-full.gap-2.items-center.justify-center:after {
content: "response";
text-size-adjust: 100%;
font-feature-settings: normal;
font-variation-settings: normal;
line-height: 1.5;
tab-size: 4;
text-indent: -.5ch; /* Move "response" one character space to the left */
}
/* Increase horizontal code scroll bar height */
.p-4.overflow-y-auto::-webkit-scrollbar {
height: 20px;
}
#prompt-textarea {
border-radius: 10px;
border: 3px solid #BF5700;
}
/* cyrillic-ext */
@font-face {
font-family: 'Fira Code';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/firacode/v21/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJV37Nv7g.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Fira Code';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/firacode/v21/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJVT7Nv7g.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Fira Code';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/firacode/v21/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJVz7Nv7g.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Fira Code';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/firacode/v21/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJVP7Nv7g.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* latin-ext */
@font-face {
font-family: 'Fira Code';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/firacode/v21/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJV77Nv7g.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Fira Code';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/firacode/v21/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJVD7Ng.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Change the copy code into a button */
.flex.items-center.relative.text-gray-200.bg-gray-800.px-4.py-2.text-xs.font-sans.justify-between.rounded-t-md button.flex.ml-auto.gap-2 {
margin: 0 10px 0 0;
align-items: center;
background: #BF5700;
padding: 5px 10px;
border-radius: 5px;
min-width: 60px;
}
/* Hover state for copy button*/
.flex.items-center.relative.text-gray-200.bg-gray-800.px-4.py-2.text-xs.font-sans.justify-between.rounded-t-md button.flex.ml-auto.gap-2:hover {
background: #9cadb7;
transition: 0.25s;
}
/* Increase size of copy code clipboard*/
.flex.items-center.relative.text-gray-200.bg-gray-800.px-4.py-2.text-xs.font-sans.justify-between.rounded-t-md svg.h-4.w-4 {
width: 25px;
height: 25px;
}
/* Increase the size of the main copy to clipboard*/
button.flex.ml-auto.gap-2.rounded-md.p-1.hover\:bg-gray-100.hover\:text-gray-700.dark\:text-gray-400.dark\:hover\:bg-gray-700.dark\:hover\:text-gray-200.disabled\:dark\:hover\:text-gray-400 svg.h-4.w-4 {
width: 50px;
height: 50px;
}
/* Wrap Text in Code Blocks */
.\!whitespace-pre {
white-space: pre-wrap!important;
}
#prompt-textarea {
padding-left: 5px;
}
// below here it doesn't work at all :(
.max-w-[70%] {
max-width: 98% !important;
}
div.relative.max-w-\[70\%\].rounded-3xl, div.relative.max-w-[70%].rounded-3xl {
max-width: 98% !important;
}
This box on the right:
