ChatGPT website is more suitable for wide screens.
ChatGPT responsive + customizations by breat
Mirrored from https://gitlab.com/breatfr/chatgpt/-/raw/main/css/chatgpt-responsive-customizations.user.css
Details
Authorbreat
LicenseAGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
Categorychatgpt.com
Created
Updated
Size3.7 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Support me on:
- ko-fi: https://ko-fi.com/breatfr
- PayPal: https://www.paypal.me/breat
List of available customizations
- bigger textarea
- custom font size
- no chatgpt plus
- wide mode
How to use in few steps
-
Install Stylus browser extension
- Chromium based browsers link: https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne
- Brave
- Chromium
- Google Chrome
- Iridium Browser
- Microsoft Edge
- Opera
- Opera GX
- SRWare Iron
- Ungoogled Chromium
- Vivaldi
- Yandex Browser
- many more
- Firefox based browsers link: https://addons.mozilla.org/firefox/addon/styl-us/
- Mozilla Firefox
- Mullvad Browser
- Tor Browser
- Waterfox
- many more
- Chromium based browsers link: https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne
-
Install the UserStyle.
-
To update the theme, open the
Stylus Management
window and click onCheck for update
and follow the instructions or just wait 24h to automatic update -
Enjoy :)
Source code
/* ==UserStyle==
@name ChatGPT responsive + customizations
@version 1.0.11
@description ChatGPT website is more suitable for wide screens.
@author BreatFR (https://breat.fr)
@namespace https://gitlab.com/breatfr
@homepageURL https://gitlab.com/breatfr/chatgpt
@supportURL https://discord.gg/Q8KSHzdBxs
@license AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
@preprocessor stylus
@var text fontsize "Custom font size" 1.2rem
@var checkbox biggertextarea "Bigger textarea" 1
@var checkbox nochatgptplus "No ChatGPT plus" 1
@var checkbox widemode "Wide mode" 1
==/UserStyle== */
/* === Credits ===
Website https://breat.fr
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 === */
@-moz-document domain("chatgpt.com") {
/* Custom font size */
:root {
font-size: fontsize;
}
if biggertextarea {
.max-h-\\[25dvh\\],
.max-h-52 {
max-height: 80vh;
}
}
if nochatgptplus {
/* Menu obtain ChatGPT Plus */
nav > div:nth-of-type(3) {
display: none;
}
/* You reached limit above textarea */
main > div:nth-of-type(1) > div:nth-of-type(1) > div > div > div > div {
padding-bottom: 0 !important;
}
div[class="flex w-full items-start gap-4 rounded-2xl border border-token-border-light bg-token-main-surface-primary py-4 pl-5 pr-3 text-sm text-token-text-primary [text-wrap:pretty] dark:border-transparent dark:bg-token-main-surface-secondary md:items-center lg:mx-auto shadow-xxs"] {
display: none !important;
}
body:has(form > div > div:nth-of-type(1) > div > div > div[style="opacity: 1; will-change: auto;"] > button) {
main > div:nth-of-type(1) > div:nth-of-type(1) > div > div > div > div {
padding-bottom: 2em !important;
}
}
}
if widemode {
.md\\:max-w-3xl,
.max-w-3xl {
max-width: 100%;
}
pre > div > div:nth-of-type(3) {
box-sizing: border-box !important;
max-width: 100% !important;
overflow: hidden !important;
}
code.hljs {
max-width: 100% !important;
width: 100% !important;
white-space: break-spaces !important;
}
main > div:nth-of-type(1) > div:nth-of-type(1) > div > div > div > div > button {
border-color: var(--text-primary);
height: 50px;
width: 50px;
}
main > div:nth-of-type(1) > div:nth-of-type(1) > div > div > div > div > button > svg {
height: 25px;
width: 25px;
}
main > div:nth-of-type(1) > div:nth-of-type(1) > div > div > div > div > button:hover,
main > div:nth-of-type(1) > div:nth-of-type(1) > div > div > div > div > button:hover svg {
border-color: rgb(254, 132, 132);
stroke: rgb(254, 132, 132);
}
/* Hide scrollbars */
* {
scrollbar-width: none !important;
-ms-overflow-style: none !important;
-moz-overflow-style: none !important;
-webkit-overflow-style: none !important;
}
::-webkit-scrollbar {
display: none !important;
width: 0 !important;
}
}
}