Make YouTube Chat Tints
YouTube Chat Tints by cyfung1031
Imported and mirrored from https://greasyfork.org/scripts/457391-youtube-chat-tints/code/YouTube%20Chat%20Tints.user.css
Details
Authorcyfung1031
LicenseMIT
Categoryyoutube
Created
Updated
Size30 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
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:
- This Userstyle uses
@preprocessor stylus. Please install stylus / stylus beta to use the Userstyles. - This Userstyle uses
:has(...). Please use Chrome/Edge 105+, Safari 15.4+, or FireFox 103+ with configured Firefox setting. - Chrome / Chromium 101-104 might also be able to use this script if you have enabled the
enable-experimental-web-platform-featuresetting inchrome://flags/#enable-experimental-web-platform-feature
Related Userscript / Userstyle:
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name YouTube Chat Tints
@version 0.4.9
@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 range author-icon-transition "Author Icon Transition" [0, 0, 600, 50, 'ms']
@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 author-line-height "Author Line Height" [0, -4, 10, 1]
@var number author-chip-default-order "Author Chip Default Order" [0, 0, 80, 5]
@var number author-chip-pre-badge-order "Author Chip Pre-Badge Order" [0, 0, 80, 5]
@var number author-chip-author-name-order "Author Chip Author-Name Order" [0, 0, 80, 5]
@var number author-chip-member-badge-order "Author Chip Member-Badge Order" [0, 0, 80, 5]
@var range author-chip-member-badge-at "Author Chip Member-Badge Align Top" [-1, -1, 4, 1, 'px']
@var range author-chip-member-badge-mw "Author Chip Member-Badge Min Width" [0, 0, 32, 2, 'px']
@var range author-chip-member-badge-mh "Author Chip Member-Badge Min Height" [0, 0, 32, 2, 'px']
@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 range message-line-height "Message Line Height" [0, -4, 10, 1]
@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
@var number msg-block-margin-2 "Message Block Margin" [20.0, 4.0, 40.0, 4.0, 'px']
@var range msg-block-margin-rr "Message Block Margin Right Ratio" [0, -0.8, 0.8, 0.2]
==/UserStyle== */
/*
@var checkbox ruby-font "Ruby Font" 1
@var checkbox pw-font "Proportional Width Font" 1
*/
ruby-font=0 //
pw-font=0 //
msg-block-margin-1 = 48px //
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) //
authorNameColor()
--yt-live-chat-sponsor-color: color-sponsor-text; //
--yt-live-chat-secondary-text-color: #ddd; //
--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; //
#author-name {
--yt-live-chat-secondary-text-color: color-general-author;
word-break: break-word;
display: inline;
vertical-align: middle;
}
@-moz-document url-prefix("https://www.youtube.com/live_chat") {
msg-line-height-o = (message-line-height + 4) * 0.15rem
msg-line-height-d = message-font-size + msg-line-height-o
msg-min-height = msg-line-height-d * 1.08
line-height-message = msg-line-height-d
line-height-author-name = author-font-size-2 + (author-line-height + 4) * 0.15rem
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);...