Claude website interface is reworked to offer a cleaner and comfortable experience on desktop, with visual adjustments that adapt to your needs.
/* ==UserStyle==
@name Claude optimized & customizable for wide screens
@description Claude website interface is reworked to offer a cleaner and comfortable experience on desktop, with visual adjustments that adapt to your needs.
@version 1.1.0
@author BreatFR (https://breat.fr)
@namespace https://breat.fr
@homepageURL https://usercssjs.breat.fr/c/claude
@supportURL https://discord.gg/W7FKesJ9aG
@license AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
@preprocessor stylus
@var checkbox chatmode "Chat mode" 1
@var checkbox claudeicon "Claude icon menu" 1
@var text fontsize "Custom font size" 1.2rem
@var checkbox hidescrollbars "Hide scrollbars" 1
@var checkbox widemode "Wide 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("claude.ai") {
/* =================================
Claude
================================= */
/* Versions */
:root {
--themeversion: 'Theme v1.1.0 by BreatFR (https://breat.fr)';
--install: ' usercssjs.breat.fr/c/claude';
--help: ' discord.gg/W7FKesJ9aG';
--support1: ' ko-fi.com/breatfr ';
--support2: ' paypal.me/breat';
--fontsize: fontsize;
}
@media screen and (min-width: 900px) {
header::after,
header::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(48px / 2);
pointer-events: none;
position: absolute;
text-align: center;
top: 0;
width: auto;
white-space: pre-line;
z-index: 9999;
}
header::after {
content: var(--themeversion) '\A Help: ' url("https://code.breat.fr/share/images/icons/discord.png") var(--help);
left: 15%;
}
header::before {
content: 'Install & Infos: ' url("https://code.breat.fr/share/images/icons/breat.fr.png") var(--install) '\A Support 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%;
}
}
.font-claude-message a,
.font-user-message a {
color: #da7756;
}
/* Custom font size */
code,
input,
nav *,
[data-testid="model-selector-dropdown"] *,
[data-radix-popper-content-wrapper] *,
.font-base,
.font-base-bold,
.ProseMirror,
.ProseMirror > .is-editor-empty,
.standard-markdown,
.standard-markdown *,
.text-text-200,
.text-text-300,
.text-text-400,
.text-text-500,
.text-text-500 > button {
font-size: fontsize !important;
line-height: 1.5 !important;
}
if chatmode {
[data-test-render-count] {
max-width: 80% !important;
width: auto !important;
}
[data-test-render-count]:has([data-testid="user-message"]) {
margin-left: auto !important;
}
}
if claudeicon {
[style="width:18rem;"]>nav > div:nth-of-type(1),
[style="width: 18rem;"]>nav > div:nth-of-type(1)::before {
content: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' class='text-text-000 h-6 sm:h-7' fill='currentColor'%3E%3Cpath d='m7.75 26.27 7.77-4.36.13-.38-.13-.21h-.38l-1.3-.08-4.44-.12-3.85-.16-3.73-.2-.94-.2L0 19.4l.09-.58.79-.53 1.13.1 2.5.17 3.75.26 2.72.16 4.03.42h.64l.09-.26-.22-.16-.17-.16-3.88-2.63-4.2-2.78-2.2-1.6L3.88 11l-.6-.76-.26-1.66L4.1 7.39l1.45.1.37.1 1.47 1.13 3.14 2.43 4.1 3.02.6.5.24-.17.03-.12-.27-.45L13 9.9l-2.38-4.1-1.06-1.7-.28-1.02c-.1-.42-.17-.77-.17-1.2L10.34.21l.68-.22 1.64.22.69.6 1.02 2.33 1.65 3.67 2.56 4.99.75 1.48.4 1.37.15.42h.26v-.24l.21-2.81.39-3.45.38-4.44.13-1.25.62-1.5L23.1.57l.96.46.79 1.13-.11.73-.47 3.05-.92 4.78-.6 3.2h.35l.4-.4 1.62-2.15 2.72-3.4 1.2-1.35 1.4-1.49.9-.71h1.7l1.25 1.86-.56 1.92-1.75 2.22-1.45 1.88-2.08 2.8-1.3 2.24.12.18.31-.03 4.7-1 2.54-.46 3.03-.52 1.37.64.15.65-.54 1.33-3.24.8-3.8.76-5.66 1.34-.07.05.08.1 2.55.24 1.09.06h2.67l4.97.37 1.3.86.78 1.05-.13.8-2 1.02-2.7-.64-6.3-1.5-2.16-.54h-.3v.18l1.8 1.76 3.3 2.98 4.13 3.84.21.95-.53.75-.56-.08-3.63-2.73-1.4-1.23-3.17-2.67h-.21v.28l.73 1.07 3.86 5.8.2 1.78-.28.58-1 .35-1.1-.2L26 33.14l-2.33-3.57-1.88-3.2-.23.13-1.11 11.95-.52.61-1.2.46-1-.76-.53-1.23.53-2.43.64-3.17.52-2.52.47-3.13.28-1.04-.02-.07-.23.03-2.36 3.24-3.59 4.85-2.84 3.04-.68.27-1.18-.61.11-1.09.66-.97 3.93-5 2.37-3.1 1.53-1.79-.01-.26h-.09L6.8 30.56l-1.86.24-.8-.75.1-1.23.38-.4 3.14-2.16Z' fill='%23D97757' shape-rendering='optimizeQuality'/%3E%3C/svg%3E");
display: inline-block;
height: 32px;
margin-right: .3em;
width: 32px;
}
}
if hidescrollbars {
* {
scrollbar-width: none !important;
}
}
if widemode {
[class*="max-w-"]:not([data-state="closed"],[data-state="open"]) {
max-width: 100%;
width: 100%;
}
.truncate {
overflow: visible;
}
/* Textarea */
[data-testid="chat-input-grid-area"] {
padding: 0 1em;
}
/* Model selector */
[data-testid="model-selector-dropdown"] *{
align-items: center;
display: flex;
}
/* User submenu */
[data-radix-popper-content-wrapper] > div {
width: auto;
}
}
}
@-moz-document url-prefix("https://claude.ai/chat/") {
/* ==========================================
Chat
========================================== */
/* Versions */
header::after {
left: 35%;
}
header::before {
right: 10%;
}
}
@-moz-document url("https://claude.ai/new") {
/* ==========================================
New
========================================== */
/* Versions */
@media screen and (min-width: 900px) {
main::after,
main::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(48px / 2);
pointer-events: none;
position: absolute;
text-align: center;
top: 0;
width: auto;
white-space: pre-line;
z-index: 9999;
}
main::after {
content: var(--themeversion) '\A Help: ' url("https://code.breat.fr/share/images/icons/discord.png") var(--help);
left: 15%;
}
main::before {
content: 'Install & Infos: ' url("https://code.breat.fr/share/images/icons/breat.fr.png") var(--install) '\A Support 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%;
}
}
}