Make YouTube Chat Tints
当前为
/* ==UserStyle==
@name YouTube Chat Tints
@version 0.3.11
@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 v-transparent "Vline Transparency" [0.1, 0.01, 0.32, 0.01]
@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 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']
@var checkbox enable-smaller-super-chat "enable-smaller-super-chat" 1
==/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;
cc(colorCode)
transparentify(colorCode, v-transparent)
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*="m/%s"])' % c1
{d1}
--author-color-1 'var(--vline-color-%s)' % (i+1+1000)
for c1, i in myChars
d1 = '&:has(#img[src*="%s="])' % c1
{d1}
--author-color-1 'var(--vline-color-%s)' % (i+1+1000)
for c1, i in myChars
d1 = '&:has(.yt-live-chat-author-badge-renderer[src*="m/%s"])' % c1
{d1}
--author-color-2 'var(--vline-color-%s)' % (i+1+1000)
@-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;
--author-chip-display: !invalid;
--author-chip-mt: !invalid;
--author-chip-mb: !invalid;
}
yt-live-chat-author-chip {
display: var(--author-chip-display);
margin-top: var( --author-chip-mt);
margin-bottom: var( --author-chip-mb);
}
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;
line-height: normal; /* 120% */
}
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;
line-height: normal; /* 120% */
}
#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: normal; /* 120% */
/*
margin-left:2px;
margin-right:2px;
*/
font-variant-east-asian: xfont-variant-east-asian;
letter-spacing: 0px !important;
line-break: anywhere;
}
#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;
}
yt-live-chat-author-chip.yt-live-chat-text-message-renderer {
--author-chip-display: inline-block;
--author-chip-mt: 4px;
--author-chip-mb: 2px;
}
#author-photo.yt-live-chat-text-message-renderer {
align-self: center;
display: flex;
padding: 0;
margin-top: 0
margin-right: author-icon-mr !important; /* important for Kaitei */
margin-bottom:0;
margin-left: 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;
}
}
--vline-color-1001: cc(#696969);
--vline-color-1002: cc(#a9a9a9);
--vline-color-1003: cc(#dcdcdc);
--vline-color-1004: cc(#2f4f4f);
--vline-color-1005: cc(#556b2f);
--vline-color-1006: cc(#6b8e23);
--vline-color-1007: cc(#a0522d);
--vline-color-1008: cc(#228b22);
--vline-color-1009: cc(#800000);
--vline-color-1010: cc(#191970);
--vline-color-1011: cc(#483d8b);
--vline-color-1012: cc(#3cb371);
--vline-color-1013: cc(#bc8f8f);
--vline-color-1014: cc(#663399);
--vline-color-1015: cc(#008080);
--vline-color-1016: cc(#b8860b);
--vline-color-1017: cc(#bdb76b);
--vline-color-1018: cc(#4682b4);
--vline-color-1019: cc(#000080);
--vline-color-1020: cc(#d2691e);
--vline-color-1021: cc(#9acd32);
--vline-color-1022: cc(#20b2aa);
--vline-color-1023: cc(#cd5c5c);
--vline-color-1024: cc(#32cd32);
--vline-color-1025: cc(#8fbc8f);
--vline-color-1026: cc(#8b008b);
--vline-color-1027: cc(#b03060);
--vline-color-1028: cc(#d2b48c);
--vline-color-1029: cc(#66cdaa);
--vline-color-1030: cc(#ff0000);
--vline-color-1031: cc(#ffa500);
--vline-color-1032: cc(#ffd700);
--vline-color-1033: cc(#ffff00);
--vline-color-1034: cc(#c71585);
--vline-color-1035: cc(#0000cd);
--vline-color-1036: cc(#7fff00);
--vline-color-1037: cc(#00ff00);
--vline-color-1038: cc(#ba55d3);
--vline-color-1039: cc(#00fa9a);
--vline-color-1040: cc(#4169e1);
--vline-color-1041: cc(#e9967a);
--vline-color-1042: cc(#dc143c);
--vline-color-1043: cc(#00ffff);
--vline-color-1044: cc(#00bfff);
--vline-color-1045: cc(#f4a460);
--vline-color-1046: cc(#9370db);
--vline-color-1047: cc(#0000ff);
--vline-color-1048: cc(#a020f0);
--vline-color-1049: cc(#ff6347);
--vline-color-1050: cc(#d8bfd8);
--vline-color-1051: cc(#ff00ff);
--vline-color-1052: cc(#db7093);
--vline-color-1053: cc(#f0e68c);
--vline-color-1054: cc(#6495ed);
--vline-color-1055: cc(#dda0dd);
--vline-color-1056: cc(#87ceeb);
--vline-color-1057: cc(#ff1493);
--vline-color-1058: cc(#afeeee);
--vline-color-1059: cc(#ee82ee);
--vline-color-1060: cc(#98fb98);
--vline-color-1061: cc(#7fffd4);
--vline-color-1062: cc(#ff69b4);
--vline-color-1063: cc(#ffe4c4);
--vline-color-1064: cc(#ffb6c1);
--author-color-1-default: var(--vline-color-1064);
& > .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;
}
#sticker #img[width][height] {
max-width: var( --sticker-width);
max-height: var( --sticker-height);
}
if enable-smaller-super-chat {
yt-live-chat-paid-sticker-renderer.yt-live-chat-item-list-renderer #sticker.yt-live-chat-paid-sticker-renderer #img[width="144"][height="144"] {
/* two row height */
--sticker-width: 8em;
--sticker-height: 8em;
}
}
}
QingJ © 2025
镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址