To make floating chat window on fullscreen
/* ==UserStyle==
@name YouTube: Floating Chat Window on Fullscreen
@version 0.3.8
@namespace github.com/cyfung1031
@license MIT
@description To make floating chat window on fullscreen
@author CY Fung
@preprocessor stylus
@var color color-handle-light "Handle Color (Light Theme)" #0cb8da
@var color color-handle-dark "Handle Color (Dark Theme)" #0c74e4
@var number message-font-weight "Message Font-Weight" [400, 100, 900, 100]
@var select message-text-shadow "Message Text-Shadow" {
"none": "none",
"shadow-bT": "sd01$",
"shadow-g0t": "sd02$0",
"shadow-g1t": "sd02$1",
"shadow-g2t": "sd02$2",
"shadow-g3t": "sd02$3",
"shadow-g4t": "sd02$4",
"shadow-s3": "sd03$",
"shadow-s4": "sd04$",
"shadow-s5": "sd05$"
}
@var color color-shadow-d1 "Shadow Color D1" #06f
@var color color-shadow-d2 "Shadow Color D2" #036
@var color color-text "Text Color" #fff
==/UserStyle== */
dummy = 1
shadowOption = split('$', message-text-shadow)
cD1 = color-shadow-d1
cD2 = color-shadow-d2
$text-shadow = 0;
if shadowOption[0] == "sd01" {
tpx = 1px
spx = -1px
$text-shadow = spx tpx cD1, tpx tpx cD1, tpx 0 cD1, 0 spx cD1;
}
if shadowOption[0] == "sd02" {
vt = convert(shadowOption[1])
vpx = '%spx' % vt // grow radius
tpx = 1px
spx = -1px
$text-shadow = 0 0 vpx cD1, 0 0 vpx cD1, 0 0 vpx cD1, 0 0 vpx cD1,
spx tpx cD2, tpx tpx cD2, spx 0 cD2, 0 tpx cD2;
}
// ----- Main Frame ------
@-moz-document url-prefix("https://www.youtube.com/") {
userscript-control[enable-floating-chat-window] {
top:0;
}
html[floating-chat-window]{
--f7-handle-color: color-handle-light;
}
html[dark][floating-chat-window]{
--f7-handle-color: color-handle-dark;
}
}
set-text-shadow = length($text-shadow) > 1
// ----- Iframe ------
@-moz-document url-prefix("https://www.youtube.com/live_chat") {
userscript-control[floating-chat-iframe] {
top:0;
}
html {
--floodcolor: color-shadow-d1;
}
.youtube-floating-chat-iframe #message.style-scope.yt-live-chat-text-message-renderer {
if ( set-text-shadow ) {
--f7-message-text-shadow: $text-shadow;
}
--f7-message-font-weight: message-font-weight;
}
.youtube-floating-chat-iframe #message.style-scope.yt-live-chat-text-message-renderer,
.youtube-floating-chat-iframe #message.style-scope.yt-live-chat-text-message-renderer > * {
if ( set-text-shadow ) {
text-shadow: var(--f7-message-text-shadow, initial);
}
font-weight: var(--f7-message-text-shadow, initial);
color: color-text;
}
html.youtube-floating-chat-iframe #message.style-scope.yt-live-chat-text-message-renderer{
if shadowOption[0] == "sd03" {
filter: none;
}
if shadowOption[0] == "sd04" {
filter: none;
}
}
html[hpkns].youtube-floating-chat-iframe #message.style-scope.yt-live-chat-text-message-renderer{
if shadowOption[0] == "sd03" {
filter:url(#stroke-text-svg-filter-03);
}
if shadowOption[0] == "sd04" {
filter:url(#stroke-text-svg-filter-04);
}
}
.youtube-floating-chat-iframe #message.style-scope.yt-live-chat-text-message-renderer > * {
if shadowOption[0] == "sd03" {
filter: none;
}
if shadowOption[0] == "sd04" {
filter: none;
}
}
.youtube-floating-chat-iframe #message.style-scope.yt-live-chat-text-message-renderer{
if shadowOption[0] == "sd05" {
-webkit-text-stroke:0.5px color-shadow-d1;
-webkit-text-fill-color:color-text;
}
}
yt-live-chat-author-badge-renderer {
--f7-message-text-shadow: invalid;
--f7-message-font-weight: invalid;
}
tp-yt-paper-tooltip, [role="tooltip"], [tabindex] {
--f7-message-text-shadow: initial;
--f7-message-font-weight: initial;
}
}