YouTube: Floating Chat Window on Fullscreen

To make floating chat window on fullscreen
Wrap lines
/* ==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;
     }
     

 }
欢迎访问Greasy Fork镜像
