Mistral Chat responsive + customizations

Mistral Chat website is more suitable for wide screens.
As of 2024-12-31. See the latest version.
Visit the author's site for support, ask a question, post a review, or report the script.
Wrap lines
/* ==UserStyle==
@name           Mistral Chat responsive + customizations
@version        1.0.0
@description    Mistral Chat website is more suitable for wide screens.
@author         BreatFR (https://breat.fr)
@namespace      https://gitlab.com/breatfr
@homepageURL    https://gitlab.com/breatfr/mistral-chat
@supportURL     https://discord.gg/Q8KSHzdBxs
@license        AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
@preprocessor   stylus

@var    checkbox    darkmode    "Better dark mode"  1
@var    checkbox    avatar      "Custom avatar"     1
@var    text        avatarurl   "Custom avatar URL" "URL between quotes"
@var    text        fontsize    "Custom font size"  1.2rem
@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("chat.mistral.ai") {
    /* Custom font size */
    .prose,
    code,
    textarea,
    .max-w-screen-md:has(textarea) button {
        font-size: fontsize !important;
        line-height: 1.5 !important;
    }
    textarea.py-2 {
        min-height: max-content !important;
    }
    
    if avatar {
        [data-sidebar="menu-button"] > div:nth-of-type(1) {
            background: transparent;
            color: transparent;
        }
        [class="group relative flex w-full gap-3"] > span > span {
            display: none;
        }
        [data-sidebar="menu-button"] > div:nth-of-type(1):before,
        [class="group relative flex w-full gap-3"] > span:before {
            background: url(avatarurl) no-repeat center center / cover;
            border-radius: 50%;
            content: "";
            display: inline-block;
            height: 32px;
            width: 32px;
        }
    }
    
    if chatmode {
        [class="group relative flex w-full gap-3"] > span {
            order: 2;
        }
        [class="group relative flex w-full gap-3"] > div {
            order: 1;
        }
        [class="group relative flex w-full gap-3"] > div > div:nth-of-type(1) > div > div {
            align-items: flex-end !important;
            justify-content: flex-end !important;
        }
        [class="group flex w-full gap-3"] {
            border-bottom: 1px solid rgba(255, 149, 0, 0.4);
            border-top: 1px solid rgba(255, 149, 0, 0.4);
            margin-bottom: 28px;
            padding-top: 28px;
        }
        [class="group flex w-full gap-3"]:last-child {
            border-bottom: 0;
            border-top: 1px solid rgba(255, 149, 0, 0.4);
        }
    }
    
    if darkmode {
        .dark,
        .light {
            --background: 240 5.9% 10%;
            --secondary-200: 240 5.9% 10%;
            --sidebar-background: 0 0% 5%;
        }
        
        .shadow-lg {
            box-shadow: rgba(255, 149, 0, 0.4) -2px -2px 2px 2px,
                        rgba(255, 149, 0, 0.4) -2px 2px 2px 2px,
                        rgba(255, 69, 0, 0.4) 2px -2px 2px 2px,
                        rgba(255, 69, 0, 0.4) 2px 2px 2px 2px;
        }
    }
    
    if widemode {
        .max-w-screen-md {
            max-width: 100%;
        }
        .max-w-screen-md:has(textarea) {
            max-width: 100%;
            padding: 20px;
        }
        
        /* Avatars */
        .h-7 {
            height: 32px;
        }
        .w-7 {
            width: 32px;
        }
    }
}