Make YouTube Chat Bubbles
/* ==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;
}
}
}