Simple CSS for Stylus etc. to widen ChatGPT

FixChapGTP.css

/*!
 * --------------------------------------------------------------------------
 * CSS Style Sheet by Dan Rosenstark
 * --------------------------------------------------------------------------
 *
 * Author: Dan Rosenstark
 * Gist URL: https://gist.github.com/drosenstark/2f505257df4c71f64cccb79aeda87746
 *
 * Description:
 * This CSS file is designed to enhance and customize the appearance of web pages.
 * It includes a variety of styles that can be applied to different elements to improve
 * user interface and user experience.
 *
 * Note:
 * This stylesheet has been modified, combined, and confused from an original thread found here:
 * https://community.openai.com/t/customize-your-interface-for-chatgpt-web-custom-css-inside/315446/3
 *
 * License:
 * This work is free to use, modify, and distribute for any purpose.
 * No attribution is required, but always appreciated!
 *
 * --------------------------------------------------------------------------
 */

/* Light Mode Code Blocks */

.bg-gray-950 {
    background-color: white;
    border: 0.1px solid lightgray !important;
}

/* Sets the default text color for code blocks */
code.hljs,
code[class*=language-],
pre[class*=language-] {
    color: black !important;
}

span.hljs-selector-tag,
code[class*=language-] span.hljs-tag,
pre[class*=language-] span.hljs-tag {
    color: orange;
}

span.hljs-selector-attr,
code[class*=language-] span.hljs-attribute,
pre[class*=language-] span.hljs-attribute {
    color: green;
}

span.hljs-selector-class,
code[class*=language-] span.hljs-class,
pre[class*=language-] span.hljs-class {
    color: darkgray;
}

span.hljs-keyword,
code[class*=language-] span.hljs-keyword,
pre[class*=language-] span.hljs-keyword {
    color: #a71d5d;
    /* A shade of darker pink to make keywords distinct */
}

span.hljs-string,
code[class*=language-] span.hljs-string,
pre[class*=language-] span.hljs-string {
    color: #183691;
    /* Dark blue for string literals */
}

span.hljs-number,
code[class*=language-] span.hljs-number,
pre[class*=language-] span.hljs-number {
    color: #0086b3;
    /* Teal for numbers to differentiate from strings */
}

span.hljs-comment,
code[class*=language-] span.hljs-comment,
pre[class*=language-] span.hljs-comment {
    color: #969896;
    /* Gray for comments to reduce visual prominence */
}

/* Additional types and identifiers */
span.hljs-type,
code[class*=language-] span.hljs-type,
pre[class*=language-] span.hljs-type,
span.hljs-identifier,
code[class*=language-] span.hljs-identifier,
pre[class*=language-] span.hljs-identifier {
    color: #b52a1d;
    /* Rust red, good for types and unique identifiers */
}

/* ---- from Open AI Forums ----- */


/* Allow width to expand for the main chat panel */
.gizmo .gizmo\:xl\:max-w-\[48rem\] {
    max-width: 95%;
}

/* 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;
}