Character.AI - Widescreen Chat

Widens the Character.AI chat fields. Also slightly widens the search page.
Stel een vraag, plaats een beoordeling of rapporteer dit script.
Regels afbreken
// ==UserScript==
// @name         Character.AI - Widescreen Chat
// @namespace    https://greasyfork.org/en/users/1628373-suihtil-cod
// @version      1.0.0
// @description  Widens the Character.AI chat fields. Also slightly widens the search page.
// @match        https://character.ai/*
// @icon         https://character.ai/favicon.ico
// @license      MIT
// @grant        none
// ==/UserScript==

// Inspired by "WideScreen Chat" userscript by Teleman Florentin.
// Development assisted by ChatGPT (OpenAI).

(function(){

    // Inject the custom stylesheet used by this userscript.
    function injectCustomStyles(){

        const style=document.createElement("style");

        // All rules are scoped under the "widechat" class so they
        // only take effect when that class is present on <body>.
        style.textContent=".widechat .max-w-xl,.widechat .max-w-3xl,.widechat .max-w-2xl{max-width:60rem!important;min-width:95%!important}.widechat .transition-width.w-7{width:0!important}.widechat .ml-7{margin-left:0!important}.widechat .chat-message{text-align:left!important}.widechat [data-testid='completed-message'],.widechat [data-testid='completed-message']>*{justify-content:flex-start!important;text-align:left!important}";

        document.head.appendChild(style);
    }

    // Enable the stylesheet by adding our namespace class.
    function addWideChatClass(){
        document.body.classList.add("widechat");
    }

    // Character AI frequently mutates the page, so make sure the
    // class remains present after any DOM changes.
    function observeBody(){
        new MutationObserver(()=>addWideChatClass()).observe(document.body,{childList:true,subtree:true});

        // Apply immediately.
        addWideChatClass();
    }

    // Initialize.
    injectCustomStyles();
    observeBody();
})();