☰

YouTube: fadeInChatMessage

To fade in Chat Messages (with YouTube Super Fast Chat)

  1. /* ==UserStyle==
  2. @name           YouTube: fadeInChatMessage
  3. @namespace      github.com/openstyles/stylus
  4. @version        0.1.2
  5. @description    To fade in Chat Messages (with YouTube Super Fast Chat)
  6. @author         CY Fung
  7. @preprocessor   stylus
  8. @var number     from-opacity              "From Opacity"                  [0.3, 0, 1, 0.05]
  9. @var number     to-opacity                "To Opacity"                    [1, 0, 1, 0.05]
  10. @var number     fade-duration             "Fade Duration"                 [350, 10, 900, 10, 'ms']
  11. @var select     timing-fx                 "Timing Fx"                     {
  12. "cubic-bezier(.4,.9,.5,1)": "cubic-bezier(.4,.9,.5,1)",
  13. "linear": "linear",
  14. "ease-in-out": "ease-in-out"
  15. }
  16. ==/UserStyle== */
  17.  
  18. @-moz-document url-prefix("https://www.youtube.com/live_chat") {
  19.     
  20.     
  21.     if 1 {
  22.         $animation = fadeInChatMessage fade-duration timing-fx 0s 1 normal forwards
  23.     }
  24.     
  25.     @keyframes fadeInChatMessage {
  26.         from{
  27.             opacity:from-opacity;
  28.         }
  29.         to{
  30.             opacity:to-opacity;
  31.         }
  32.     }
  33.  
  34.  
  35.     .cyt-chat-last-message {
  36.  
  37.         animation: $animation;
  38.     }
  39.     
  40.     /* Insert code here... */
  41. }