ChatGPT website interface is reworked to offer a cleaner and comfortable experience on desktop, with visual adjustments that adapt to your needs.
/* ==UserStyle==
@name ChatGPT optimized & customizable for wide screens
@description ChatGPT website interface is reworked to offer a cleaner and comfortable experience on desktop, with visual adjustments that adapt to your needs.
@version 1.1.8
@author BreatFR (https://breat.fr)
@namespace https://breat.fr
@homepageURL https://usercssjs.breat.fr/c/chatgpt
@supportURL https://discord.gg/W7FKesJ9aG
@license AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
@preprocessor stylus
@var text separator1 "🌐 WHOLE WEBSITE 🌐" "_"
@var text fontsize "Custom font size" 1.2rem
@var checkbox hidescrollbars "Hide scrollbars" 1
@var checkbox widemode "Wide mode" 1
@var text separator2 "💬 CHATGPT CHATS 💬" "_"
@var checkbox chatmode "Chat mode" 1
@var checkbox hidechatgptplus "Hide ChatGPT plus" 1
@var checkbox hidevocalmode "Hide vical mode" 1
@var text separator3 "🔤 CHATGPT TRANSLATE 🔤" "_"
@var checkbox distractionfreemode "Distraction-free mode" 1
==/UserStyle== */
/* ==Credits==
Website https://breat.fr
Bluesky https://bsky.app/profile/breatfroff.bsky.social
facebook https://www.facebook.com/breatfroff
mastodon https://mastodon.social/@breat_fr
telegram https://t.me/breatfr
vk https://vk.com/breatfroff
X (twitter) https://x.com/breatfroff
==/Credits== */
/* ==Support==
brave Creators https://publishers.basicattentiontoken.org/c/breatfr
Buy me a coffee https://buymeacoffee.com/breatfr
ko-fi https://ko-fi.com/breatfr
PayPal https://paypal.me/breat
==/Support== */
@-moz-document domain("chatgpt.com") {
/* ===================================
General
=================================== */
/* Versions */
:root {
--themeversion: 'Theme v1.1.8 by BreatFR (https://breat.fr)';
--install: ' usercssjs.breat.fr/c/chatgpt';
--help: ' discord.gg/W7FKesJ9aG';
--support1: ' ko-fi.com/breatfr ';
--support2: ' paypal.me/breat';
}
@media (min-width: 900px) {
body::after,
body::before {
background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
background-clip: text;
color: transparent;
display: block;
font-family: inherit;
font-size: 1.2rem;
line-height: calc(60px / 2);
pointer-events: none;
position: absolute;
text-align: center;
top: 0;
transition: left 1s ease;
width: auto;
white-space: pre-line;
z-index: 9999;
}
html:has([data-testid="login-button"]) body::after,
html:has(#stage-slideover-sidebar) body::after {
left: 30%;
}
body::after {
content: var(--themeversion) '\A Help: ' url("https://code.breat.fr/share/images/icons/discord.png") var(--help);
left: 0;
transition: left 1s ease .01s;
}
body::before {
content: 'Install: ' url("https://code.breat.fr/share/images/icons/breat.fr.png") var(--install) '\ASupport me: ' url("https://code.breat.fr/share/images/icons/ko-fi.png") var(--support1) url("https://code.breat.fr/share/images/icons/paypal.png") var(--support2);
right: 15%;
}
}
/* Custom font size */
#prompt-textarea * {
font-size: fontsize !important;
line-height: 1.5 !important;
}
#stage-slideover-sidebar {
background: #181818 !important;
border: 0 !important;
}
if hidechatgptplus {
header > div:nth-of-type(1) {
display: none;
}
}
if hidescrollbars {
* {
scrollbar-width: none !important;
}
}
/* Dark mode */
header,
#stage-sidebar-tiny-bar,
#stage-slideover-sidebar nav,
#stage-slideover-sidebar nav > div,
.bg-\\(--sidebar-surface-primary\\) {
background: #101010 !important;
}
.composer-parent > div,
#thread > div > div:nth-of-type(1),
#thread-bottom-container > div {
background: rgb(24, 24, 24) !important;
}
if widemode {
header {
height: 60px;
max-height: 60px;
pointer-events: auto;
position: fixed;
right: 0;
top: 0;
max-width: 100%;
width: 100%;
}
}
}
@-moz-document url-prefix("https://chatgpt.com/apps") {
/* ====================================================
ChatGPT Applications
==================================================== */
if widemode {
:root {
--container-4xl: 100%
}
main > div:nth-of-type(3) {
margin-top: 0;
}
}
}
@-moz-document url-prefix("https://chatgpt.com/c/") {
/* ==================================================
ChatGPT Chats
================================================== */
/* Custom font size */
[data-message-author-role="assistant"] *,
[data-message-author-role="user"] * {
font-size: fontsize !important;
line-height: 1.5 !important;
}
div:has(> article) {
margin-top: 60px;
}
if chatmode {
:root {
--user-chat-width: 100%;
}
[data-message-author-role="assistant"],
[data-message-author-role="user"] {
max-width: 80% !important;
width: 80% !important;
}
[data-message-author-role="user"] {
margin-left: auto;
}
}
if hidevocalmode {
button:has(svg use[href="/cdn/assets/sprites-core-i9agxugi.svg#f8aa74"]) {
display: none !important;
}
}
if widemode {
:root {
--user-chat-width: 100%;
--thread-content-width: 100%;
}
[data-message-author-role="assistant"],
[data-message-author-role="user"] {
max-width: 100% !important;
}
[data-message-author-role="assistant"] div {
width: 100%;
}
[class*="[--thread-content-max-width:40rem]"] {
--thread-content-max-width: 100% !important;
}
article > div {
padding: 2em;
}
div:has(>article) {
padding-bottom: 0 !important;
}
div.group:not([data-sidebar-item="true"]) {
margin: 0;
}
.TyagGW_tableContainer {
margin-inline: 0 !important;
}
code span,
code[class*="language-"] span {
overflow-wrap: anywhere;
white-space: pre-wrap;
}
#thread-bottom > div {
padding: 0 2em !important;
}
#thread-bottom-container > div:nth-of-type(3) > div {
margin-top: 0 !important;
}
#thread > div > div > div {
padding-bottom: 0 !important;
}
#thread-bottom > div > div {
padding: 0 !important;
width: 100%;
}
div[class*="px-(--thread-content-margin)"]:not(#thread-bottom > div > div[class*="px-(--thread-content-margin)"]) {
margin-top: 5em;
padding: 0 2em !important;
}
}
}
@-moz-document url-prefix("https://chatgpt.com/codex") {
/* =====================================================
ChatGPT Codex
===================================================== */
/* Versions */
body::after {
left: 25%;
}
if widemode {
:root {
--container-3xl: 97%
}
}
}
@-moz-document url-prefix("https://chatgpt.com/gpts") {
/* ====================================================
ChatGPT GPTs
==================================================== */
if widemode {
:root {
--container-3xl: 100%
}
}
}
@-moz-document url-prefix("https://chatgpt.com/images") {
/* ======================================================
ChatGPT Images
====================================================== */
if widemode {
main > div > div > div {
gap: 1em;
padding-top: 2em;
}
main > div > div > div > div:nth-of-type(3) {
max-width: 100%;
}
}
}
@-moz-document regexp("^https:\\/\\/chatgpt\\.com\\/[A-Za-z]{2}-[A-Za-z]{2}\\/translate\\/?$") {
/* ======================================================
ChatGPT Translate
====================================================== */
/* Version */
body::after {
left: 20%;
}
if distractionfreemode {
a[data-discover="true"],
div:has(> main) > div,
div:has(> main) > section,
nav,
footer {
display: none !important;
}
}
if widemode {
div:has(> main) {
padding: 0;
}
main {
max-width: 100%;
padding: 0 2em;
}
main h1 {
padding-block: 0 .5em !important;
}
main > div > div:nth-of-type(1) * {
font-size: fontsize !important;
line-height: 1.5 !important;
}
main > div > div:nth-of-type(2) > div textarea {
font-size: fontsize !important;
line-height: 1.5 !important;
min-height: calc(100vh - 64px - 70px - 50.8px - 87px - 4em) !important;
padding: 1em;
}
main > div > section > button {
font-size: fontsize !important;
line-height: 1.5 !important;
min-width: 0 !important;
padding: .5em 1em;
text-align: center;
width: auto!important;
}
}
}
@-moz-document regexp("(chrome|moz)-extension://.+") {
/* ===================================================
Stylus popup
=================================================== */
html:has([href*="domain=chatgpt.com"]):has(label:nth-of-type(10):last-of-type) {
if hidescrollbars {
#stylus-popup * {
scrollbar-width: none !important;
}
}
/* Title */
#stylus-popup #message-box-title {
width: 100%;
}
/* Input content */
#stylus-popup #message-box .config-body > label input {
border-radius: .5em;
text-align: center;
}
/* Range */
#stylus-popup #message-box .config-body > label span:nth-of-type(2) {
text-align: right;
}
/* Color picker size */
#stylus-popup #message-box .config-body > label .colorview-swatch,
#stylus-popup #message-box .config-body > label .colorview-swatch a,
#stylus-popup #message-box .config-body > label .colorview-swatch::before {
border-radius: .5em;
}
/* Select size */
#stylus-popup #message-box .config-body > label select {
border-radius: .5em;
text-align: center;
}
/* Fake spaces to improve presentation */
/* Whole website */
#stylus-popup #message-box .config-body > label:nth-of-type(1) input,
/* Lumo */
#stylus-popup #message-box .config-body > label:nth-of-type(5) input,
/* MMail */
#stylus-popup #message-box .config-body > label:nth-of-type(9) input {
height: 0;
max-width: 0;
min-width: 0;
opacity: 0;
padding: 0;
pointer-events: none;
width: 0;
}
/* Avoid move when click on fake titles */
#stylus-popup #message-box .config-body > label:nth-of-type(1),
#stylus-popup #message-box .config-body > label:nth-of-type(5),
#stylus-popup #message-box .config-body > label:nth-of-type(9) {
pointer-events: none;
}
/* Bigger lines for fake titles */
#stylus-popup #message-box .config-body > label:nth-of-type(1) *,
#stylus-popup #message-box .config-body > label:nth-of-type(5) *,
#stylus-popup #message-box .config-body > label:nth-of-type(9) * {
line-height: 3;
}
/* Center fake titles */
#stylus-popup #message-box .config-body > label:nth-of-type(1) span,
#stylus-popup #message-box .config-body > label:nth-of-type(5) span,
#stylus-popup #message-box .config-body > label:nth-of-type(9) span {
margin-right: 0;
min-width: 100%;
text-align: center;
}
}
}