Mistral Chat responsive + customizations

Mistral Chat website is more suitable for wide screens.
Verze ze dne 31. 12. 2024. Zobrazit nejnovější verzi.
Navštivte stránky autora pro podporu, zeptejte se na otázku, přidejte recenzi nebo skript nahlašte.
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;
        }
    }
}