☰

YouTube Chat Bubbles

Make YouTube Chat Bubbles

当前为 2022-12-30 提交的版本，查看 最新版本。

/* ==UserStyle==
@name           YouTube Chat Bubbles
@version        0.1.1
@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
==/UserStyle== */
@-moz-document url-prefix("https://www.youtube.com/live_chat") {

    #message.yt-live-chat-text-message-renderer {
        padding: 3px 10px;
        margin-left: -2px;
        background: color-bubble-background;
        border-radius: 12px;
        color: color-bubble-text;
        display: flex;
        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;
    }
}