/* ==UserStyle==
@name YouTube Chat Tints
@version 0.3.4
@namespace github.com/cyfung1031
@license MIT
@description Make YouTube Chat Tints
@author CY Fung
@preprocessor stylus
@var color color-sponsor-text "Sponsor Text Color" #71ff8c
@var color color-moderator-text "Moderator Text Color" #70a7ff
@var color color-owner-chip-background "Owner Chip Background Color" #ffff3c
@var color color-general-author "General Author Color" #a3e3e3
@var range loading-effect-ms "loading-effect (0ms=disable; 600ms)" [0, 0, 900, 50, 'ms']
@var checkbox chat-author-vline-enable "Enable Chat Author Vline" 1
@var range vline-gap-1 "Vline Gap 1" [0, -2, 18, 1]
@var range vline-gap-2 "Vline Gap 2" [0, -6, 6, 1]
@var checkbox fade-author-icon-enable "Enable Fade Author Icon" 1
@var number author-icon-opacity "Author Icon Opacity" [0.6, 0.2, 1.0, 0.2]
@var range author-icon-size "Author Icon Size" [24,12,36,2,'px']
@var checkbox enable-message-inlining "Enable Message Inlining" 0
@var range author-font-ratio "Author Text Size" [3.6, 2.0, 4.6, 0.2]
@var range member-icon-font-size "Member Icon Font Size" [1.4, 0.6, 2.6, 0.2, 'rem']
@var range message-font-ratio "Message Font Size" [4.6, 2.0, 6.6, 0.2]
@var checkbox emoji-normalize-enable "Emoji Size Adjust" 0
@var range emoji-font-size "Emoji Font Size" [2.0, 0.6, 3.4, 0.2, 'rem']
@var number emoji-vertical-shift "Emoji Vertical Shift" [14, 1, 32, 1]
@var range emoji-margin "Emoji Margin" [2.0, 1.0, 6.0, 1.0, 'px']
@var number emoji-shadow-size "emoji-shadow-size (1=disable)" [3, 1, 4, 1]
@var color emoji-shadow "emoji-shadow" #b5b4b4
@var range padding-left-message "Message Padding Left" [0.4, 0.2, 2, 0.2, 'em']
@var range padding-left-author-icon-x "Author Icon Padding Left" [4, 2, 26, 2, 'px']
@var range padding-right-author-icon "Author Icon Padding Right" [6, 2, 32, 2, 'px']
@var number final-message-opacity "Final Message Opacity" [0.8, 0.5, 1.0, 0.1]
@var number min-content-text-height "Min Content Text Height (0=disable)" [0, 0, 18, 1]
@var range message-opacity-ms "message-opacity-animation (0ms=disable; 250ms)" [0, 0, 600, 50, 'ms']
==/UserStyle== */
/*
@var checkbox ruby-font "Ruby Font" 1
@var checkbox pw-font "Proportional Width Font" 1
*/
ruby-font=0 //
pw-font=0 //
vline-gap-1-px = vline-gap-1 * 1px
vline-gap-2-px = vline-gap-2 * 2px
padding-right-author-icon-diff = padding-right-author-icon - 6px
author-icon-size-diff = author-icon-size - 24px + vline-gap-1-px
cb-w = 78px + author-icon-size-diff + vline-gap-1-px //
cb-ml = -( 48px + cb-w + author-icon-size-diff + padding-right-author-icon-diff + vline-gap-2-px + vline-gap-1-px ) //
padding-left-author-icon = padding-left-author-icon-x + vline-gap-1-px
ds-w = 14px + vline-gap-2-px + vline-gap-1-px //
if chat-author-vline-enable == 0 //
ds-w = 0px //
author-icon-mr = padding-right-author-icon + ds-w //
final-message-opacity-0 = final-message-opacity * 0.2 //
final-message-opacity-10 = final-message-opacity * 0.45 //
message-font-size = message-font-ratio * 0.4rem //
author-font-size-2=author-font-ratio * 0.4rem //
sl-3a = (emoji-vertical-shift - 4) * 0.5px
emoji-vertical-shift-px = sl-3a
dummy()
// dummy
border: 0;
myChars = (A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9)
gen1()
for c1, i in myChars
d1 = '&:has(#img[src*="/%s"])' % c1
{d1}
--author-color-1 'var(--author-color-set-1-%s)' % (i+1)
for c1, i in myChars
d1 = '&:has(#img[src*="%s="])' % c1
{d1}
--author-color-1 'var(--author-color-set-1-%s)' % (i+1)
for c1, i in myChars
d1 = '&:has(.yt-live-chat-author-badge-renderer[src*="/%s"])' % c1
{d1}
--author-color-2 'var(--author-color-set-1-%s)' % (i+1)
@-moz-document url-prefix("https://www.youtube.com/live_chat") {
line-height-message = message-font-size * 1.2
line-height-author-name = author-font-size-2 * 1.2
line-height-min = 0
if message-font-size >0 and author-font-size-2 > 0 {
line-height-min = line-height-message + line-height-author-name
}
html{
--final-message-opacity-0: final-message-opacity-0;
--final-message-opacity-10: final-message-opacity-10;
--final-message-opacity: final-message-opacity;
--emoji-vertical-shift-px: emoji-vertical-shift-px;
}
makeBoxShadow(){
contain: strict;
content-visibility: auto;
position: absolute;
box-shadow-w1 = 32px + author-icon-size-diff + vline-gap-1-px
box-shadow-w2 = box-shadow-w1 + 12px + vline-gap-2-px
--box-shadow-w1: box-shadow-w1;
--box-shadow-w2: box-shadow-w2;
box-shadow: var(--box-shadow-w1) 0px 0px 0px var(--author-color-1), var(--box-shadow-w1) 0px 0px 0px #ddd, var(--box-shadow-w2) 0px 0px 0px var(--author-color-2), var(--box-shadow-w2) 0px 0px 0px #888;
content: '';
width: cb-w;
border-radius: 0;
display: block;
pointer-events: none;
touch-action: none;
user-select: none;
z-index: 0;
bottom: 1px;
top: 1px;
}
#menu.style-scope.yt-live-chat-paid-message-renderer {
z-index: 77;
pointer-events: all;
}
/* */
@keyframes yt-live-chat-text-message-renderer-animation3 {
0% {
opacity: var(--final-message-opacity-0); /* */
}
100% {
opacity: var(--final-message-opacity); /* */
}
}
/* */
@keyframes yt-live-chat-text-message-renderer-animation2 {
0% {
left: 48px;
height: 6px;
width: 32px;
opacity: 0.9;
}
50% {
left: 48px;
height: 3.2px;
width: calc(100% - 72px);
opacity: 0.8;
}
51% {
left: 48px;
height: 3.2px;
width: calc(100% - 72px);
opacity: 0.4;
}
100% {
left: 48px;
height: 3.2px;
width: calc(100% - 72px);
opacity: 0.0;
}
}
/* */
yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip,
yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer,
yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer #image,
yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer #image img {
contain: layout style;
display: inline-flex;
vertical-align: middle;
}
sl-1 = 0px
if emoji-shadow-size > 1 {
sl=(emoji-shadow-size - 1) * 0.5px //
sr=-1 * sl //
sl-1 = sl //
}
sl-2 = sl-1 + emoji-margin
sl-3 = sl-1
.emoji{
--emoji-margin-left: sl-2;
}
.emoji + .emoji {
--emoji-margin-left: sl-1;
}
#message.yt-live-chat-text-message-renderer .emoji.yt-live-chat-text-message-renderer {
contain: layout paint style;
display: inline-block;
if emoji-shadow-size > 1 {
filter: drop-shadow(0px sl 0px emoji-shadow) drop-shadow(sl 0px 0px emoji-shadow) drop-shadow(sr 0px 0px emoji-shadow) drop-shadow(0px sr 0px emoji-shadow);
}
margin-left: var(--emoji-margin-left);
margin-right: sl-2;
margin-top: sl-3;
margin-bottom: sl-1;
border-bottom: var(--emoji-vertical-shift-px) solid transparent;
if emoji-normalize-enable {
--emoji-font-size: emoji-font-size;
height: calc(var(--emoji-font-size) * 1.12);
width: auto;
object-fit: contain;
}
}
body yt-img-shadow#author-photo.style-scope.yt-live-chat-text-message-renderer {
contain-intrinsic-size: author-icon-size author-icon-size;
}
yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer yt-live-chat-author-chip.yt-live-chat-text-message-renderer {
align-items: center;
display: inline-flex;
flex-direction: row;
margin: 0;
font-size: author-font-size-2;
--author-font-size-2: author-font-size-2;
--line-height-author-name: line-height-author-name;
line-height: var(--line-height-author-name);
}
yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer yt-live-chat-author-chip.yt-live-chat-paid-message-renderer {
align-items: center;
display: inline-flex;
flex-direction: row;
font-size: author-font-size-2;
--author-font-size-2: author-font-size-2;
--line-height-author-name: line-height-author-name;
line-height: var(--line-height-author-name);
}
#items yt-live-chat-text-message-renderer { // weak selector
contain: layout style;
} //
xfont-variant-east-asian=unset // ;
if ruby-font { //
xfont-variant-east-asian=ruby //
} //
if pw-font { //
xfont-variant-east-asian=proportional-width //
} //
if ruby-font and pw-font { //
xfont-variant-east-asian=ruby proportional-width //
} //
//
yt-live-chat-item-list-renderer:not([allow-scroll]) #item-scroller.yt-live-chat-item-list-renderer {
overflow-y: scroll;
padding-right: 0;
}
#items.style-scope.yt-live-chat-item-list-renderer {
if chat-author-vline-enable {
paid-msg-pl = 20px
paid-msg-vline-padding = paid-msg-pl + 48px
paid-msg-vline-ml = -120px - paid-msg-pl - author-icon-size-diff + padding-left-author-icon - 2 * vline-gap-1-px - 10px
& > yt-live-chat-paid-message-renderer, & > yt-live-chat-membership-item-renderer {
--paid-msg-pl: paid-msg-pl;
--paid-msg-vline-padding: paid-msg-vline-padding;
--paid-msg-vline-ml: paid-msg-vline-ml;
padding: 4px var(--paid-msg-vline-padding);
position: relative !important;
&::before {
makeBoxShadow()
margin-left: var(--paid-msg-vline-ml);
}
}
.yt-live-chat-paid-message-renderer, .yt-live-chat-membership-item-renderer {
&#author-photo.style-scope.no-transition {
position:fixed;
left:0px;
align-self: center;
display: flex;
padding: 0;
margin: 0;
z-index: 1;
margin: 0 0 0 padding-left-author-icon;
&,
& img[src] {
height: author-icon-size;
object-fit: contain;
width: auto;
}
}
&#header {
padding: 8px 14px 8px 14px;
}
if fade-author-icon-enable {
&#author-photo{
opacity: author-icon-opacity;
transition: opacity 300ms;
&:hover{
opacity: 1;
}
}
}
&#menu.style-scope yt-icon-button {
position:fixed;
right:0;
}
}
} else {
}
& > .yt-live-chat-item-list-renderer #card #header:has(#overlay-image) {
min-height: 48px;
}
// --yt-live-chat-sponsor-color: #2ba640;
--yt-live-chat-sponsor-color: color-sponsor-text; //
// --yt-live-chat-secondary-text-color: rgba(255, 255, 255, 0.7);
--yt-live-chat-secondary-text-color: #ddd; //
// --yt-live-chat-author-chip-owner-background-color: #ffd600;
--yt-live-chat-author-chip-owner-background-color: color-owner-chip-background; // --yt-live-chat-moderator-color: #5e84f1;
--yt-live-chat-moderator-color: color-moderator-text; //
& > yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer #message.yt-live-chat-text-message-renderer {
padding: 0px 0px;
margin-left: padding-left-message;
display: block;
align-items: center;
min-height: 2.6rem;
font-size: message-font-size;
--line-height-message: line-height-message;
line-height: var(--line-height-message);
/*
margin-left:2px;
margin-right:2px;
*/
font-variant-east-asian: xfont-variant-east-asian;
letter-spacing: 0px !important;
}
#author-name {
--yt-live-chat-secondary-text-color: color-general-author;
word-break: break-word;
display: inline;
vertical-align: middle;
}
& > yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer #message.yt-live-chat-text-message-renderer a {
color: inherit !important;
font-variant-east-asian: revert;
}
if enable-message-inlining == 0 {
yt-live-chat-author-chip.yt-live-chat-text-message-renderer {
margin-top: 4px;
margin-bottom: 2px;
display: inline-block;
}
}
#author-photo.yt-live-chat-text-message-renderer {
align-self: center;
display: flex;
padding: 0;
margin: 0 author-icon-mr 0 padding-left-author-icon;
z-index: 1;
}
#author-photo.yt-live-chat-text-message-renderer img[src] {
height: author-icon-size;
object-fit: contain;
width: auto;
}
img.yt-live-chat-author-badge-renderer {
height: member-icon-font-size;
width: auto;
}
#chat-badges.style-scope.yt-live-chat-author-chip {
/* display: inline;*/
flex-direction: row;
align-items: center;
justify-items: center;
}
& > yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer {
padding: 0;
margin: 0;
padding-right: 28px;
margin-right: 4px;
if fade-author-icon-enable {
#author-photo.yt-live-chat-text-message-renderer {
opacity: author-icon-opacity;
transition: opacity 300ms;
}
#author-photo.yt-live-chat-text-message-renderer:hover {
opacity: 1;
}
}
}
if loading-effect-ms > 0 {
& > yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer::before {
content: '';
display: block;
position: absolute;
background: rgba(77, 77, 77, 0.5);
animation: yt-live-chat-text-message-renderer-animation2 loading-effect-ms linear 0ms 1 normal forwards;
pointer-events: none;
touch-action: none;
user-select: none;
transform-origin: 50% 50%;
width: 32px;
bottom: 0;
height: 16px;
border-radius: 32px;
z-index: 1;
}
}
& > yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer:hover #content {
opacity: 1.0 !important;
}
& > yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer #content {
transform-origin: 0 50%;
opacity: final-message-opacity;
if line-height-min > 0 and min-content-text-height > 0 {
--line-height-min: line-height-min;
--line-height-adjust: (min-content-text-height * 2px);
min-height: calc(var(--line-height-min) + var(--line-height-adjust));
}
}
if message-opacity-ms > 0 {
& > yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer #content {
animation: yt-live-chat-text-message-renderer-animation3 message-opacity-ms ease-in 0s 1 normal forwards;
}
}
if chat-author-vline-enable {
& > yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer #content::before {
makeBoxShadow()
margin-left: cb-ml;
}
}
--author-color-set-1-1: #69696918;
--author-color-set-1-2: #a9a9a918;
--author-color-set-1-3: #dcdcdc18;
--author-color-set-1-4: #2f4f4f18;
--author-color-set-1-5: #556b2f18;
--author-color-set-1-6: #6b8e2318;
--author-color-set-1-7: #a0522d18;
--author-color-set-1-8: #228b2218;
--author-color-set-1-9: #80000018;
--author-color-set-1-10: #19197018;
--author-color-set-1-11: #483d8b18;
--author-color-set-1-12: #3cb37118;
--author-color-set-1-13: #bc8f8f18;
--author-color-set-1-14: #66339918;
--author-color-set-1-15: #00808018;
--author-color-set-1-16: #b8860b18;
--author-color-set-1-17: #bdb76b18;
--author-color-set-1-18: #4682b418;
--author-color-set-1-19: #00008018;
--author-color-set-1-20: #d2691e18;
--author-color-set-1-21: #9acd3218;
--author-color-set-1-22: #20b2aa18;
--author-color-set-1-23: #cd5c5c18;
--author-color-set-1-24: #32cd3218;
--author-color-set-1-25: #8fbc8f18;
--author-color-set-1-26: #8b008b18;
--author-color-set-1-27: #b0306018;
--author-color-set-1-28: #d2b48c18;
--author-color-set-1-29: #66cdaa18;
--author-color-set-1-30: #ff000018;
--author-color-set-1-31: #ffa50018;
--author-color-set-1-32: #ffd70018;
--author-color-set-1-33: #ffff0018;
--author-color-set-1-34: #c7158518;
--author-color-set-1-35: #0000cd18;
--author-color-set-1-36: #7fff0018;
--author-color-set-1-37: #00ff0018;
--author-color-set-1-38: #ba55d318;
--author-color-set-1-39: #00fa9a18;
--author-color-set-1-40: #4169e118;
--author-color-set-1-41: #e9967a18;
--author-color-set-1-42: #dc143c18;
--author-color-set-1-43: #00ffff18;
--author-color-set-1-44: #00bfff18;
--author-color-set-1-45: #f4a46018;
--author-color-set-1-46: #9370db18;
--author-color-set-1-47: #0000ff18;
--author-color-set-1-48: #a020f018;
--author-color-set-1-49: #ff634718;
--author-color-set-1-50: #d8bfd818;
--author-color-set-1-51: #ff00ff18;
--author-color-set-1-52: #db709318;
--author-color-set-1-53: #f0e68c18;
--author-color-set-1-54: #6495ed18;
--author-color-set-1-55: #dda0dd18;
--author-color-set-1-56: #87ceeb18;
--author-color-set-1-57: #ff149318;
--author-color-set-1-58: #afeeee18;
--author-color-set-1-59: #ee82ee18;
--author-color-set-1-60: #98fb9818;
--author-color-set-1-61: #7fffd418;
--author-color-set-1-62: #ff69b418;
--author-color-set-1-63: #ffe4c418;
--author-color-set-1-64: #ffb6c118;
--author-color-1-default: var(--author-color-set-1-64);
& > .yt-live-chat-item-list-renderer {
& {
--author-color-1: var(--author-color-1-default);
--author-color-2: var(--author-color-1-default);
}
gen1()
}
}
@supports (contain: layout paint style) {
/*
contain: layout paint style;
// #item-offset uses transform, it is buggy in Opera 93.0 with contain: layout & paint
*/
body yt-live-chat-app {
contain: size layout paint style;
content-visibility: auto;
transform: translate3d(0, 0, 0);
overflow: hidden;
}
#items.style-scope.yt-live-chat-item-list-renderer{
contain: layout paint style;
}
#item-offset.style-scope.yt-live-chat-item-list-renderer {
contain: style;
}
#item-scroller.style-scope.yt-live-chat-item-list-renderer {
contain: size style;
}
#contents.style-scope.yt-live-chat-item-list-renderer,
#chat.style-scope.yt-live-chat-renderer,
img.style-scope.yt-img-shadow[width][height] {
contain: size layout paint style;
}
.style-scope.yt-live-chat-ticker-renderer[role="button"][aria-label],
.style-scope.yt-live-chat-ticker-renderer[role="button"][aria-label]>#container {
contain: layout paint style;
}
yt-img-shadow#author-photo.style-scope {
contain: layout paint style;
content-visibility: auto;
contain-intrinsic-size: 24px 24px;
}
yt-live-chat-text-message-renderer:not([author-is-owner]) #author-photo.style-scope.yt-live-chat-text-message-renderer,
yt-live-chat-text-message-renderer:not([author-is-owner]) yt-live-chat-author-chip.style-scope.yt-live-chat-text-message-renderer {
pointer-events: var(--tabview-msg-pointer-events);
}
yt-live-chat-text-message-renderer:not([author-is-owner]) span#message.style-scope.yt-live-chat-text-message-renderer>img.emoji.yt-formatted-string.style-scope.yt-live-chat-text-message-renderer {
cursor: var(--tabview-msg-cursor);
}
yt-live-chat-text-message-renderer:not([author-is-owner]) span#message.style-scope.yt-live-chat-text-message-renderer,
yt-live-chat-paid-message-renderer #message.yt-live-chat-paid-message-renderer,
yt-live-chat-text-message-renderer:not([author-is-owner]) #timestamp.style-scope.yt-live-chat-text-message-renderer,
yt-live-chat-membership-item-renderer #header-content.style-scope.yt-live-chat-membership-item-renderer,
yt-live-chat-membership-item-renderer #timestamp.style-scope.yt-live-chat-membership-item-renderer,
yt-live-chat-paid-message-renderer #header-content.yt-live-chat-paid-message-renderer,
yt-live-chat-paid-message-renderer #timestamp.style-scope.yt-live-chat-paid-message-renderer,
yt-live-chat-paid-sticker-renderer #content.style-scope.yt-live-chat-paid-sticker-renderer,
yt-live-chat-paid-sticker-renderer #timestamp.style-scope.yt-live-chat-paid-sticker-renderer {
cursor: var(--tabview-msg-cursor);
pointer-events: var(--tabview-msg-pointer-events);
}
yt-live-chat-text-message-renderer.style-scope.yt-live-chat-item-list-renderer,
yt-live-chat-membership-item-renderer.style-scope.yt-live-chat-item-list-renderer,
yt-live-chat-paid-message-renderer.style-scope.yt-live-chat-item-list-renderer,
yt-live-chat-banner-manager.style-scope.yt-live-chat-item-list-renderer {
contain: layout style;
}
tp-yt-paper-tooltip[style*="inset"][role="tooltip"] {
contain: layout paint style;
}
}
#item-offset.style-scope.yt-live-chat-item-list-renderer {
position: relative !important;
height: auto !important;
}
#item-offset.style-scope.yt-live-chat-item-list-renderer > #items.style-scope.yt-live-chat-item-list-renderer {
position: static !important;
}
}
