Make YouTube Chat Color Names
/* ==UserStyle==
@name YouTube Chat Color Names
@version 0.1.0
@namespace github.com/cyfung1031
@license MIT
@description Make YouTube Chat Color Names
@author CY Fung
@preprocessor stylus
==/UserStyle== */
v-transparent = 1.0;
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)
$colorList = #FF0000, #00FF00, #B22222,
#FF7F50, #9ACD32, #FF4500,
#2E8B57, #DAA520, #D2691E,
#5F9EA0, #1E90FF, #FF69B4,
#8A2BE2, #00FF7F
gen1()
for c1, i in myChars
d1 = '&:has(#img[src*="m/%s"])' % c1
{d1}
--author-color-x 'var(--atine-color-%s)' % (i+1+1000)
for c1, i in myChars
d1 = '&:has(#img[src*="%s="])' % c1
{d1}
--author-color-x 'var(--atine-color-%s)' % (i+1+1000)
$nLen = length(myChars)
$kLen = $nLen + 2
gen2()
for $i in 1..$kLen
$k = $i - 1
$n = length($colorList)
$color = $colorList[$k % $n] // Reuse colors cyclically
{"--atine-color-" + ($i+1000)} cc($color)
@-moz-document url-prefix("https://www.youtube.com/live_chat") {
html {
gen2()
--author-color-1-default: "var(--atine-color-%s)" % (1000 + $kLen);
}
.yt-live-chat-item-list-renderer {
gen1()
--author-color-x: var(--author-color-1-default);
}
.yt-live-chat-item-list-renderer #author-name.style-scope.yt-live-chat-author-chip {
color: var(--author-color-x);
}
}