☰

Claude responsive + customizations

Claude website is more suitable for wide screens.

  1. /* ==UserStyle==
  2. @name           Claude responsive + customizations
  3. @version        1.0.16
  4. @description    Claude website is more suitable for wide screens.
  5. @author         BreatFR (https://breat.fr)
  6. @namespace      https://gitlab.com/breatfr
  7. @homepageURL    https://gitlab.com/breatfr/claude
  8. @supportURL     https://discord.gg/Q8KSHzdBxs
  9. @license        AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
  10. @preprocessor   stylus
  11.  
  12. @var    checkbox    claudeicon      "Claude icon menu"      1
  13. @var    text        fontsize        "Font size"             1.2rem
  14. @var    checkbox    hideavatar      "Hide avatar in chat"   1
  15. @var    checkbox    bubbleswidth    "Limited bubbles width" 1
  16. @var    checkbox    bubblesright    "Our bubbles on right"  1
  17. @var    checkbox    widemode        "Wide mode"             1
  18. ==/UserStyle== */
  19.  
  20. /* === Credits ===
  21. Website         https://breat.fr
  22. facebook        https://www.facebook.com/breatfroff
  23. mastodon        https://mastodon.social/@breat_fr
  24. telegram        https://t.me/breatfr
  25. vk              https://vk.com/breatfroff
  26. X (twitter)     https://x.com/breatfroff
  27. === Credits === */
  28.  
  29. @-moz-document domain("claude.ai") {
  30.     :root {
  31.         --themeversion: 'Theme v1.0.16 by BreatFR (https://breat.fr)';
  32.         --install1: ' usercssjs.breat.fr ';
  33.         --install2: ' gitlab.com/breatfr/claude';
  34.         --space: '\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
  35.         --support1: ' ko-fi.com/breatfr ';
  36.         --support2: ' paypal.me/breat';
  37.         --fontsize: fontsize;
  38.     }
  39.  
  40.     .inline-block.max-w-full.align-middle.max-md\\:line-clamp-2.max-md\\:break-words.md\\:overflow-hidden.md\\:overflow-ellipsis::after {
  41.         background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
  42.         background-clip: text;
  43.         -o-background-clip: text;
  44.         -moz-background-clip: text;
  45.         -ms-background-clip: text;
  46.         -webkit-background-clip: text;
  47.         color: transparent;
  48.         content: var(--themeversion) '\A' 'Install: ' url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/icon_breat.fr.png") var(--install1) var(--space) url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/icon_gitlab.png") var(--install2) '\A' 'Support me: ' url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/icon_ko-fi.png") var(--support1) var(--space)  url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/icon_paypal.png") var(--support2);
  49.         display: flex;
  50.         flex-direction: column;
  51.         font-family: var(--font-styrene-b), ui-sans-serif, system-ui, sans-serif;
  52.         font-size: calc(var(--fontsize) + .2rem);
  53.         line-height: 1.5;
  54.         top: 20px;
  55.         right: 20px;
  56.         position: absolute;
  57.         text-align: center;
  58.         width: max-content;
  59.         white-space: pre-line;        
  60.     }
  61.     
  62.     .font-claude-message a,
  63.     .font-user-message a {
  64.         color: #da7756;
  65.     }
  66.     
  67.     /* Custom font size */
  68.     code,
  69.     [data-testid="delete-chat-trigger"],
  70.     [data-testid="rename-chat-trigger"],
  71.     .font-claude-message,
  72.     .font-tiempos,
  73.     .font-user-message,
  74.     .ProseMirror {
  75.         font-size: fontsize;
  76.         line-height: 1.5;
  77.     }
  78.     .inline-block.underline-offset-2.transition-opacity.hover\\:underline.opacity-100.duration-700,
  79.     .text-xs {
  80.         font-size: calc(var(--fontsize) - .2rem);
  81.         line-height: 1.2;
  82.     }
  83.     /* Claude model choice under textarea */
  84.     .font-tiempos.inline-flex.gap-\\[4px\\].text-\\[14px\\].leading-none {
  85.         position: relative;
  86.     }
  87.     .font-tiempos.inline-flex.gap-\\[4px\\].text-\\[14px\\].leading-none > div {
  88.         margin-left: 50px;
  89.     }
  90.     .font-tiempos.inline-flex.gap-\\[4px\\].text-\\[14px\\].leading-none > svg {
  91.         position: absolute;
  92.         top: 50% !important;
  93.         transform: translateY(-50%) !important;
  94.     }
  95.     
  96.     .md\\:h-12 {
  97.         height: auto;
  98.     }
  99.     
  100.     if claudeicon {
  101.         .ml-px.flex.h-9.flex-1.items-center.leading-none.max-md\\:pointer-events-none.max-md\\:opacity-0 > a > svg,
  102.         .ml-px.flex.h-9.flex-1.items-center.leading-none > a > svg {
  103.             background-color: #da7756;
  104.             fill: none;
  105.             height: 2.25rem;
  106.             margin: 10px 0 0 5px;
  107.             mask-image: 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");
  108.             -o-mask-image: 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");
  109.             -moz-mask-image: 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");
  110.             -ms-mask-image: 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");
  111.             -webkit-mask-image: 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");
  112.             mask-position: center;
  113.             -o-mask-position: center;
  114.             -moz-mask-position: center;
  115.             -ms-mask-position: center;
  116.             -webkit-mask-position: center;
  117.             mask-repeat: no-repeat;
  118.             -o-mask-repeat: no-repeat;
  119.             -moz-mask-repeat: no-repeat;
  120.             -ms-mask-repeat: no-repeat;
  121.             -webkit-mask-repeat: no-repeat;
  122.             width: 2.25rem;
  123.         }
  124.     }
  125.     
  126.     if hideavatar {
  127.         .flex.flex-row.gap-2>.shrink-0,
  128.         .flex.flex-row.gap-2>.shrink-0>div {
  129.             display: none;
  130.             height: 0;
  131.             width: 0;
  132.         }
  133.     }
  134.     
  135.     if bubbleswidth {
  136.         [style="height: auto; opacity: 1;"],
  137.         .mb-1.mt-1 {
  138.             max-width: 80% !important;
  139.             width: fit-content;
  140.         }
  141.     }
  142.     
  143.     if bubblesright {
  144.         .mb-1.mt-1,
  145.         [data-testid="paste.txt"],
  146.         [data-testid="image.png"] {
  147.             margin-left: auto;
  148.         }
  149.         .flex.flex-wrap.gap-0\\.5,
  150.         .flex.flex-wrap.gap-2 {            
  151.             flex-direction: row-reverse;
  152.         }
  153.     }
  154.     
  155.     if widemode {
  156.         .max-w-\\[60rem\\],
  157.         .max-w-\\[75ch\\],
  158.         .max-w-\\[60ch\\],
  159.         .max-w-3xl,
  160.         .max-w-2xl,
  161.         .max-w-xl {
  162.             max-width: 100%;
  163.             width: 100%;
  164.         }
  165.         .w-\\[36rem\\] {
  166.             max-width: 100%;
  167.             width: 100%;
  168.             min-width: 36rem;
  169.         }
  170.     }
  171. }
  172.  
  173. @-moz-document url("https://claude.ai/new") {
  174.     if widemode {
  175.         .\\32xl\\:pr-20 {
  176.             max-width: 100%;
  177.             width: 100%;
  178.         }
  179.     }
  180. }
  181.  
  182. @-moz-document url-prefix("https://claude.ai/settings/billing") {
  183.     if widemode {
  184.         .max-w-3xl {
  185.             max-width: 48rem;
  186.         }
  187.     }
  188. }
  189.  
  190. @-moz-document url("https://claude.ai/upgrade/pro") {
  191.     if widemode {
  192.         .max-w-xl {
  193.             max-width: 36rem;
  194.         }
  195.     }
  196. }
  197.  
  198. @-moz-document domain("anthropic.com") {
  199.     if widemode {
  200.         .lg\\:max-w-160,
  201.         .w-240 {
  202.             max-width: 100%;
  203.             width: 100%;
  204.         }
  205.         
  206.         .s\\:grid-12 {
  207.             grid-template-columns: auto;
  208.         }
  209.         .s\\:col-start-3 {
  210.             grid-column-start: 1;
  211.         }
  212.     }
  213. }