/* ==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"                       #b###bc
@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;
}
}
}