YouTube Chat Bubbles

Make YouTube Chat Bubbles
Ask a question, post a review, or report the script.
Wrap lines
/* ==UserStyle==
@name           YouTube Chat Bubbles
@version        0.1.5
@namespace      github.com/cyfung1031
@license        MIT
@description    Make YouTube Chat Bubbles
@author         CY Fung
@preprocessor   stylus
@var color      color-bubble-text               "Bubble Text Color"                             #000
@var color      color-bubble-background         "Bubble Background Color"                       #bccbbc
@var checkbox   bubble-shift                    "Bubble Shift"                                  1
@var range      bubble-shift-px                 "Bubble Shift px (10: 0px)"                      [8, 1, 20]
==/UserStyle== */


@-moz-document url-prefix("https://www.youtube.com/live_chat") {
    
    #items yt-live-chat-text-message-renderer{ // weak selector
        contain: layout style;
    }
    
    bubble-shift-px = bubble-shift-px - 10

    #items.style-scope.yt-live-chat-item-list-renderer {

        #message.yt-live-chat-text-message-renderer {
            padding: 3px 10px !important;
            if bubble-shift {
                margin-left: '%s !important' % (bubble-shift-px * 1px);
            }
            background: color-bubble-background;
            border-radius: 12px;
            color: color-bubble-text;
            display: flex !important;
            max-width: max-content;
            flex-wrap: wrap;
            align-items: center;
            min-height: 2.6rem;
        }

        #message.yt-live-chat-text-message-renderer a {
            color: inherit !important;
        }

        #message.yt-live-chat-text-message-renderer::before {
            content: '';
            --egl-btn-half-border-size: 7px;
            --egl-btn-color: color-bubble-background;
            display: block;
            position: absolute;
            border-top: 0;
            border-right: 7px inset transparent;
            border-bottom: 10px solid var(--egl-btn-color);
            border-left: 10px inset transparent;
            transform: rotate(46deg);
            margin-left: -18px;
            margin-top: -8px;
            transform-origin: center center;
            pointer-events: none;
            touch-action: none;
            user-select: none;
        }


        yt-live-chat-author-chip {
            margin-top: 4px;
            margin-bottom: 2px;
        }

        #author-photo {
            align-self: center;
            display: flex;
        }
    }
}