☰

Stumblechat horizontal (bottom chat)

With 2 different styles and various options.

/* ==UserStyle==
@name           Stumblechat horizontal (bottom chat)
@namespace      https://greasyfork.org/en/users/1244737
@version        2
@description    With 2 different styles and various options.
@author         robomoist
@license        MIT
@preprocessor   stylus
@var range sizeCamsHeight "Cams height (%)" [50, 10, 80, 5, "%"]
@var checkbox userlistSide "Side user list" 1
@var checkbox chatCompact "Compact chat" 1
@var checkbox chatSmallTextbox "Compact text box" 1
==/UserStyle== */

@-moz-document url-prefix("https://stumblechat.com/room/") {
    @media (min-width: 652px) {

        :root {
         --width-userlist: 222px;
         --height-videolist: sizeCamsHeight;

        }
        
        #room-content { display: block; }

        sc-userlist, sc-chat, sc-videolist
        {
            display: block!important;
            position: absolute!important;
            margin: 0!important;
        }

        
        sc-userlist {
            right: 0;
            left: unset;
            top: var(--height-videolist);
            width: var(--width-userlist);
            height: calc(100% - var(--height-videolist));
        }

        sc-videolist {
            top: 0!important;
            width: 100%!important;
            height: var(--height-videolist);
        }

        sc-chat {
            height: calc(100% - var(--height-videolist));
            top: var(--height-videolist);
            width: calc(100% - var(--width-userlist));
        }

        sc-modal {
            z-index: 10;
            position: absolute;
            left: 6%;
            width: 100%!important;
        }

        #user-options {
            top: var(--height-videolist)!important;
            position: absolute;
            bottom: unset!important;
            display: block!important;
        }
    
        .message center { text-align: left; }
        .message center video { width: unset; }

        .message .timestamp {
            display: revert!important;
            position: absolute;
            left: -6em;
            z-index: 20;
            width: max-content;
            color: gray;
        }

        #chat-content > .message {
            margin-left: 6em;
            overflow: visible;
        }

        .message .content:hover .timestamp,
        .message:hover .timestamp {
            text-align: unset!important;
            font-size: unset!important;
            background: #070707!important;
            font-weight: unset!important;
            z-index: 21;
        }
        
        if userlistSide {
            sc-userlist {
                left: 0;
                top: 0;
                height: 100%;
            }

            sc-videolist, sc-chat {
                 left: var(--width-userlist)!important;
             }
             
             sc-videolist { width: calc(100% - var(--width-userlist))!important; }
        }
        
        if chatSmallTextbox {
            #textarea { height: 28px!important; }
        }

        
        if chatCompact {
            /* Just a copy of...
            @import url("https://update.greasyfork.org/scripts/484175/Stumblechat%20chat%20compact.user.css"); */
            .message .nickname ~ .content {
                margin-left: 2px;
                margin-right: 0.125;
            }
            .message .nickname ~ .content span { line-height: 1.5em; }
            .message .nickname {
                padding: 3px 4px!important;
                margin-bottom: 4px!important;
            }

            span.message {
                overflow-wrap: anywhere;
                white-space: break-spaces; 
                padding: 4px 1px;
            }

            .message .nickname,
            .content {
                display: inline!important;
            }


            #chat-content > .message.noavatar { min-height: 28px; }
            #chat-content > .message.common { min-height: 42px; }
            #chat-content > .message:not(.system) { padding-bottom: 4px; }

            .message .content {
                padding: 4px 3px!important;
                line-height: 2em!important;
                border-radius: unset!important;
            }
            .message .content:last-child { border-radius: 0 5px 5px 0!important; }
            .message .nickname + .content { border-radius: 5px 0 0 5px!important; }
            .message .nickname:nth-child(-n+2) + .content:last-child { border-radius: 5px!important; }
        }
    }

}