Skip to content

Claude responsive + customizations by breat

Mirrored from https://gitlab.com/breatfr/claude/-/raw/main/css/claude-responsive-customizations.user.css

Screenshot of Claude responsive + customizations
Homepage Write a review Install Get Stylus

Details

Authorbreat

LicenseAGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt

Categoryclaude.ai

Created

Updated

Size14 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Claude website is more suitable for wide screens.

Notes

Support me on:

List of available customizations

  • claude icon menu instead of anthropic icon
  • font size of your choice for bubbles and textarea
  • hide avatar in bubbles
  • limited bubbles width (much better with "our bubbles on right")
  • our bubbles on right (like in a real chat)
  • wide mode

How to use in few steps

  1. Install Stylus browser extension

  2. Install the UserStyle.

  3. To update the theme, open the Stylus Management window and click on Check for update and follow the instructions or just wait 24h to automatic update

  4. Enjoy :)

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name           Claude responsive + customizations
@version        1.0.16
@description    Claude website is more suitable for wide screens.
@author         BreatFR (https://breat.fr)
@namespace      https://gitlab.com/breatfr
@homepageURL    https://gitlab.com/breatfr/claude
@supportURL     https://discord.gg/Q8KSHzdBxs
@license        AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
@preprocessor   stylus

@var    checkbox    claudeicon      "Claude icon menu"      1
@var    text        fontsize        "Font size"             1.2rem
@var    checkbox    hideavatar      "Hide avatar in chat"   1
@var    checkbox    bubbleswidth    "Limited bubbles width" 1
@var    checkbox    bubblesright    "Our bubbles on right"  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("claude.ai") {
    :root {
        --themeversion: 'Theme v1.0.16 by BreatFR (https://breat.fr)';
        --install1: ' usercssjs.breat.fr ';
        --install2: ' gitlab.com/breatfr/claude';
        --space: '\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
        --support1: ' ko-fi.com/breatfr ';
        --support2: ' paypal.me/breat';
        --fontsize: fontsize;
    }

    .inline-block.max-w-full.align-middle.max-md\\:line-clamp-2.max-md\\:break-words.md\\:overflow-hidden.md\\:overflow-ellipsis::after {
        background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
        background-clip: text;
        -o-background-clip: text;
        -moz-background-clip: text;
        -ms-background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        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);
        display: flex;
        flex-direction: column;
        font-family: var(--font-styrene-b), ui-sans-serif, system-ui, sans-serif;
        font-size: calc(var(--fontsize) + .2rem);
        line-height: 1.5;
        top: 20px;
        right: 20px;
        position: absolute;
        text-align: center;
        width: max-content;
        white-space: pre-line;        
    }
    
    .font-claude-message a,
    .font-user-message a {
        color: #da7756;
    }
    
    /* Custom font size */
    code,
    [data-testid="delete-chat-trigger"],
    [data-testid="rename-chat-trigger"],
    .font-claude-message,
    .font-tiempos,
    .font-user-message,
    .ProseMirror {
        font-size: fontsize;
        line-height: 1.5;
    }
    .inline-block.underline-offset-2.transition-opacity.hover\\:underline.opacity-100.duration-700,
    .text-xs {
        font-size: calc(var(--fontsize) - .2rem);
        line-height: 1.2;
    }
    /* Claude model choice under textarea */
    .font-tiempos.inline-flex.gap-\\[4px\\].text-\\[14px\\].leading-none {
        position: relative;
    }
    .font-tiempos.inline-flex.gap-\\[4px\\].text-\\[14px\\].leading-none > div {
        margin-left: 50px;
    }
    .font-tiempos.inline-flex.gap-\\[4px\\].text-\\[14px\\].leading-none > svg {
        position: absolute;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    
    .md\\:h-12 {
        height: auto;
    }
    
    if claudeicon {
        .ml-px.flex.h-9.flex-1.items-center.leading-none.max-md\\:pointer-events-none.max-md\\:opacity-0 > a > svg,
        .ml-px.flex.h-9.flex-1.items-center.leading-none > a > svg {
            background-color: #da7756;
            fill: none;
            height: 2.25rem;
            margin: 10px 0 0 5px;
            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");
            -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");
            -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");
            -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....

Reviews

No reviews yet.