Skip to content

YouTube Chat Bubbles by cyfung1031

Mirrored from https://greasyfork.org/scripts/457375-youtube-chat-bubbles/code/YouTube%20Chat%20Bubbles.user.css

Screenshot of YouTube Chat Bubbles

Details

Authorcyfung1031

LicenseMIT

Categoryyoutube

Created

Updated

Size2.4 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Make YouTube Chat Bubbles

Notes

(This Userstyle might not be actively maintained.)

Stylus Beta - Chrome: https://chrome.google.com/webstore/detail/stylus-beta/apmmpaebfobifelkijhaljbmpcgbjbdo
Stylus - Firefox: https://addons.mozilla.org/en-US/firefox/addon/styl-us/

GreasyFork (Latest) / UserStyles.world (Hourly Update)

Notes:

  1. This Userstyle uses @preprocessor stylus. Please install stylus / stylus beta to use the Userstyles.

Source code

/* ==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;
        }
    }
}

Reviews

No reviews yet.