☰

YouTube: Floating Chat Window on Fullscreen

To make floating chat window on fullscreen

  1. /* ==UserStyle==
  2. @name           YouTube: Floating Chat Window on Fullscreen
  3. @version        0.3.8
  4. @namespace      github.com/cyfung1031
  5. @license        MIT
  6. @description    To make floating chat window on fullscreen
  7. @author         CY Fung
  8. @preprocessor   stylus
  9. @var color      color-handle-light               "Handle Color (Light Theme)"                       #0cb8da
  10. @var color      color-handle-dark                "Handle Color (Dark Theme)"                        #0c74e4
  11. @var number     message-font-weight              "Message Font-Weight"                  [400, 100, 900, 100]
  12. @var select     message-text-shadow              "Message Text-Shadow"        {
  13. "none": "none",
  14. "shadow-bT": "sd01$",
  15. "shadow-g0t": "sd02$0",
  16. "shadow-g1t": "sd02$1",
  17. "shadow-g2t": "sd02$2",
  18. "shadow-g3t": "sd02$3",
  19. "shadow-g4t": "sd02$4",
  20. "shadow-s3": "sd03$",
  21. "shadow-s4": "sd04$",
  22. "shadow-s5": "sd05$"
  23. }
  24.  
  25. @var color      color-shadow-d1               "Shadow Color D1"                         #06f
  26. @var color      color-shadow-d2               "Shadow Color D2"                         #036
  27. @var color      color-text                    "Text Color"                         #fff
  28.  
  29. ==/UserStyle== */
  30.  
  31. dummy = 1
  32.  
  33. shadowOption = split('$', message-text-shadow)
  34.  
  35. cD1 = color-shadow-d1
  36. cD2 = color-shadow-d2
  37.  
  38. $text-shadow = 0;
  39.  
  40. if shadowOption[0] == "sd01" {
  41.  
  42.     tpx = 1px
  43.     spx = -1px
  44.  
  45.     $text-shadow =  spx tpx cD1, tpx tpx cD1, tpx 0 cD1, 0 spx cD1;
  46. }
  47.  
  48. if shadowOption[0] == "sd02" {
  49.  
  50.     vt = convert(shadowOption[1])
  51.  
  52.     vpx = '%spx' % vt // grow radius
  53.  
  54.  
  55.     tpx = 1px
  56.     spx = -1px
  57.  
  58.     $text-shadow =   0 0 vpx cD1, 0 0 vpx cD1, 0 0 vpx cD1, 0 0 vpx cD1,
  59.     spx tpx cD2, tpx tpx cD2, spx 0 cD2, 0 tpx cD2;
  60.  
  61. }
  62.  
  63.  
  64.  
  65. // ----- Main Frame ------
  66.  
  67. @-moz-document url-prefix("https://www.youtube.com/") {
  68.  
  69.  
  70.     userscript-control[enable-floating-chat-window] {
  71.         top:0;
  72.     }
  73.  
  74.  
  75.     html[floating-chat-window]{
  76.         --f7-handle-color: color-handle-light;
  77.     }
  78.     html[dark][floating-chat-window]{
  79.         --f7-handle-color: color-handle-dark;
  80.     }
  81.  
  82.  
  83.  
  84. }
  85.  
  86. set-text-shadow = length($text-shadow) > 1
  87.  
  88.  
  89. // ----- Iframe ------
  90.  
  91. @-moz-document url-prefix("https://www.youtube.com/live_chat") {
  92.     
  93.     
  94.  
  95.     userscript-control[floating-chat-iframe] {
  96.         top:0;
  97.     }
  98.     
  99.     html {
  100.         --floodcolor: color-shadow-d1;
  101.     }
  102.  
  103.      .youtube-floating-chat-iframe #message.style-scope.yt-live-chat-text-message-renderer {
  104.          if ( set-text-shadow ) {
  105.              --f7-message-text-shadow: $text-shadow;
  106.          }
  107.          --f7-message-font-weight: message-font-weight;
  108.      }
  109.  
  110.      .youtube-floating-chat-iframe #message.style-scope.yt-live-chat-text-message-renderer,
  111.      .youtube-floating-chat-iframe #message.style-scope.yt-live-chat-text-message-renderer > * {
  112.          if ( set-text-shadow ) {
  113.              text-shadow: var(--f7-message-text-shadow, initial);
  114.          }
  115.          font-weight: var(--f7-message-text-shadow, initial);
  116.          color: color-text;
  117.  
  118.              
  119.              
  120.      }
  121.      
  122.      
  123.      html.youtube-floating-chat-iframe #message.style-scope.yt-live-chat-text-message-renderer{
  124.  
  125.              if shadowOption[0] == "sd03" {
  126.  
  127.  
  128.                  filter: none;
  129.              }
  130.              
  131.              if shadowOption[0] == "sd04" {
  132.  
  133.  
  134.                  filter: none;
  135.              }
  136.  
  137.  
  138.      }
  139.      
  140.      html[hpkns].youtube-floating-chat-iframe #message.style-scope.yt-live-chat-text-message-renderer{
  141.  
  142.              if shadowOption[0] == "sd03" {
  143.  
  144.  
  145.                  filter:url(#stroke-text-svg-filter-03);
  146.              }
  147.  
  148.              if shadowOption[0] == "sd04" {
  149.  
  150.  
  151.                  filter:url(#stroke-text-svg-filter-04);
  152.              }
  153.  
  154.      }
  155.      
  156.      
  157.      .youtube-floating-chat-iframe #message.style-scope.yt-live-chat-text-message-renderer > * {
  158.          
  159.              if shadowOption[0] == "sd03" {
  160.  
  161.  
  162.                  filter: none;
  163.              }
  164.  
  165.              if shadowOption[0] == "sd04" {
  166.  
  167.  
  168.                  filter: none;
  169.              }
  170.  
  171.      }
  172.      
  173.      
  174.      .youtube-floating-chat-iframe #message.style-scope.yt-live-chat-text-message-renderer{
  175.  
  176.              if shadowOption[0] == "sd05" {
  177.  
  178.  
  179.                   -webkit-text-stroke:0.5px color-shadow-d1;
  180.                   -webkit-text-fill-color:color-text;
  181.              }
  182.  
  183.      }
  184.      
  185.  
  186.  
  187.      yt-live-chat-author-badge-renderer {
  188.          --f7-message-text-shadow: invalid;
  189.          --f7-message-font-weight: invalid;
  190.      }
  191.  
  192.      tp-yt-paper-tooltip, [role="tooltip"], [tabindex] {
  193.          --f7-message-text-shadow: initial;
  194.          --f7-message-font-weight: initial;
  195.      }
  196.      
  197.  
  198.  }