Krampus' Chat Tweaks by Krampus-update

/* ==UserStyle==
@name           Krampus' Chat Tweaks
@namespace      Janitor Chat Tweaks
@version        1.0.0
@description    the aims of this userstyle is to add things to Janitor's chat, for now you can just change chat color, trying to implement custom themes, presets and much more.
@author         Krampus <pedro_br14@hotmail.com> (linktr.ee/umKrampus)
@homepageURL    https://userstyles.world/style/16953/krampus-chat-tweaks
@preprocessor stylus

@var select preset "What preset you want to use?" ["Custom","Krampus"]
@var color bgColor "What color should be the background?" #fff0
@var color playerColor "What color do you want to use?" #fff0 
@var color playerBG "What color should be your BG?" #fff0
@var color botColor "What color should the bot use?" #fff0
@var color botBG "What color should be the bot BG?" #fff0
@var checkbox fullWidth "Use full width mode?" 0
@var checkbox avatarBall "Should the avatar in chat be a ball?" 0
@var range chatRoundness "How round are text bubble?" [0,0,40,'px',1]
==/UserStyle== */
@-moz-document url-prefix("https://janitorai.com/chats/") {
    /**/
    /*My Preset*/
    if preset=="Krampus" {
        .css-h1rntf {
            border-radius: 20px!important;
        }
        .css-1iksg6g {
            width: 0!important;
            height: 0!important;
        }
        .css-1ciw5tz {
            max-width: none!important;
        }
        .css-1sla4fc {
            max-width: none!important;
        }
        .css-if548y {
            max-width: none;
            width: 100% !important;
        }
        body {
            --chat-padding: 2px!important;
            --text-padding: 10px!important;
            --name-padding: 7px!important;
            --player-color: none!important;
            --player-bg: #000000!important;
            --bot-color: none!important;
            --bot-bg: #1e0018b0!important;
            --chat-roundness: 20px!important;
            --bg-color: #00000069!important;
        }
    }
    else {
        /*all others configs*/
        body {
            --chat-padding: 2px;
            --text-padding: 10px;
            --name-padding: 7px;
            --player-color: playerColor;
            --player-bg: playerBG;
            --bot-color: botColor;
            --bot-bg: botBG;
            --chat-roundness: chatRoundness;
            --bg-color: bgColor
        }
    }
    /*Full Witdth Mode*/
    if fullWidth {
        .css-1ciw5tz {
            max-width: none;
        }
        .css-1sla4fc {
            max-width: none;
        }
        .css-if548y {
            max-width: none;
            width: 100% !important;
        }
    }
    /*Avatar Ball Mode*/
    if avatarBall {
        .css-i9mtpv {
            border-radius: 50%!important;
            position: relative!important;
            bottom: 6px!important;
            left: 6px!important;
        }
        .css-1iksg6g {
            width: 0!important;
            height: 0!important;
        }
    }
    else {
        .css-i9mtpv {
            border-radius: 10px;
            position: relative;
            bottom: 6px;
            left: 6px;
        }
    }
    #root > div > div {
        background: var(--bg-color);
    }
    /*User Background*/
    .css-4z774a > div > div > div > div:nth-child(2) {
        /*USER PART // USER PART // USER PART // USER PART // USER PART // USER PART*/
        > div:not(:has([alt="Character Icon"])) {
            margin-top: 5px;
            padding: var(--chat-padding);
            background: var(--player-color);
            border-radius: var(--chat-roundness);
            > li > div > div {
                > div:nth-child(1) > div {
                    background: var(--player-bg);
                    padding: var(--name-padding);
                    margin-bottom: 2px;
                    border-radius: var(--chat-roundness);
                }
                /*--//--//--//--//--//--//--//--//--//--//--//--//--*/
                > div:nth-child(2) {
                    background: var(--player-bg);
                    padding: var(--text-padding);
                    border-radius: var(--chat-roundness);
                }
            }
            if dark(playerBG) {
                > .css-10c6i1g > div > div > p {
                    color: white;
                    > em {
                        color: darken(white, 30%);
                    }
                }
                > .css-16u3s6f {
                    color: white;
                }
            }
            else {
                > .css-10c6i1g > div > div > p {
                    color: lighten(black, 60%);
                    > em {
                        color: black;
                    }
                }
                > .css-16u3s6f {
                    color: black;
                }
            }
        }
        /*BOT PART // BOT PART // BOT PART // BOT PART// BOT PART // BOT PART*/
        > div:has([alt="Character Icon"]) {
            margin-top: 5px;
            padding: var(--chat-padding);
            background: var(--bot-color);
            border-radius: var(--chat-roundness);
            > li > div > div > div:nth-child(1) > div {
                background: var(--bot-bg);
                padding: var(--name-padding);
                margin-bottom: 5px;
                border-radius: var(--chat-roundness);
            }
            > li > div > div > div:nth-child(2) {
                background: var(--bot-bg);
                padding: var(--text-padding);
                border-radius: var(--chat-roundness);
            }
        }
    }
    /*BOT NEW/GENERATING MESSAGE THIS*/
    /*Bot Name*/
    .css-16u3s6f {
        background: var(--bot-bg);
        padding: var(--name-padding);
        margin-bottom: 5px;
        border-radius: var(--chat-roundness);
    }
    /*Bot Action*/
    .css-10c6i1g {
        background: var(--bot-bg);
        padding: var(--text-padding);
        margin-bottom: 5px;
        border-radius: var(--chat-roundness);
    }
    if dark(botBG) {
        > .css-10c6i1g > div > div > p {
            color: white;
            > em {
                color: darken(white, 22%);
            }
        }
        > .css-16u3s6f {
            color: white;
        }
    }
    else {
        > .css-10c6i1g > div > div > p {
            color: lighten(black, 60%);
            > em {
                color: lighten(black, 40%);
            }
        }
        > .css-16u3s6f {
            color: lighten(black, 60%);
        }
    }
}