☰

YouTube Chat Tints

Make YouTube Chat Tints

  1. /* ==UserStyle==
  2. @name           YouTube Chat Tints
  3. @version        0.4.9
  4. @namespace      github.com/cyfung1031
  5. @license        MIT
  6. @description    Make YouTube Chat Tints
  7. @author         CY Fung
  8. @preprocessor   stylus
  9. @var color      color-sponsor-text               "Sponsor Text Color"                               #71ff8c
  10. @var color      color-moderator-text             "Moderator Text Color"                             #70a7ff
  11. @var color      color-owner-chip-background      "Owner Chip Background Color"                      #ffff3c
  12. @var color      color-general-author             "General Author Color"                             #a3e3e3
  13. @var range      loading-effect-ms                "loading-effect (0ms=disable; 600ms)"              [0, 0, 900, 50, 'ms']
  14. @var checkbox   chat-author-vline-enable         "Enable Chat Author Vline"                         1
  15. @var range      v-transparent                    "Vline Transparency"                               [0.1, 0.01, 0.32, 0.01]
  16. @var range      vline-gap-1                      "Vline Gap 1"                                      [0, -2, 18, 1]
  17. @var range      vline-gap-2                      "Vline Gap 2"                                      [0, -6, 6, 1]
  18. @var checkbox   fade-author-icon-enable          "Enable Fade Author Icon"                          1
  19. @var range      author-icon-transition           "Author Icon Transition"                           [0, 0, 600, 50, 'ms']
  20. @var number     author-icon-opacity              "Author Icon Opacity"                              [0.6, 0.2, 1.0, 0.2]
  21. @var range      author-icon-size                 "Author Icon Size"                                 [24, 12, 36, 2, 'px']
  22. @var range      author-font-ratio                "Author Text Size"                                 [3.6, 2.0, 4.6, 0.2]
  23. @var range      author-line-height               "Author Line Height"                               [0, -4, 10, 1]
  24. @var number     author-chip-default-order        "Author Chip Default Order"                        [0, 0, 80, 5]
  25. @var number     author-chip-pre-badge-order      "Author Chip Pre-Badge Order"                      [0, 0, 80, 5]
  26. @var number     author-chip-author-name-order    "Author Chip Author-Name Order"                    [0, 0, 80, 5]
  27. @var number     author-chip-member-badge-order   "Author Chip Member-Badge Order"                   [0, 0, 80, 5]
  28. @var range      author-chip-member-badge-at      "Author Chip Member-Badge Align Top"               [-1, -1, 4, 1, 'px']
  29. @var range      author-chip-member-badge-mw      "Author Chip Member-Badge Min Width"               [0, 0, 32, 2, 'px']
  30. @var range      author-chip-member-badge-mh      "Author Chip Member-Badge Min Height"              [0, 0, 32, 2, 'px']
  31. @var range      member-icon-font-size            "Member Icon Font Size"                            [1.4, 0.6, 2.6, 0.2, 'rem']
  32. @var range      message-font-ratio               "Message Font Size"                                [4.6, 2.0, 6.6, 0.2]
  33. @var range      message-line-height              "Message Line Height"                              [0, -4, 10, 1]
  34. @var checkbox   emoji-normalize-enable           "Emoji Size Adjust"                                0
  35. @var range      emoji-font-size                  "Emoji Font Size"                                  [2.0, 0.6, 3.4, 0.2, 'rem']
  36. @var number     emoji-vertical-shift             "Emoji Vertical Shift"                             [14, 1, 32, 1]
  37. @var range      emoji-margin                     "Emoji Margin"                                     [2.0, 1.0, 6.0, 1.0, 'px']
  38. @var number     emoji-shadow-size                "emoji-shadow-size (1=disable)"                    [3, 1, 4, 1]
  39. @var color      emoji-shadow                     "emoji-shadow"                                     #b5b4b4
  40.  
  41. @var range      padding-left-message             "Message Padding Left"                             [0.4, 0.2, 2, 0.2, 'em']
  42. @var range      padding-left-author-icon-x       "Author Icon Padding Left"                         [4, 2, 26, 2, 'px']
  43. @var range      padding-right-author-icon        "Author Icon Padding Right"                        [6, 2, 32, 2, 'px']
  44.  
  45. @var number     final-message-opacity            "Final Message Opacity"                            [0.8, 0.5, 1.0, 0.1]
  46. @var number     min-content-text-height          "Min Content Text Height (0=disable)"              [0, 0, 18, 1]
  47. @var range      message-opacity-ms               "message-opacity-animation (0ms=disable; 250ms)"   [0, 0, 600, 50, 'ms']
  48.  
  49. @var checkbox   enable-smaller-super-chat        "enable-smaller-super-chat"                        1
  50. @var number     msg-block-margin-2               "Message Block Margin"                             [20.0, 4.0, 40.0, 4.0, 'px']
  51. @var range      msg-block-margin-rr               "Message Block Margin Right Ratio"                       [0, -0.8, 0.8, 0.2]
  52.  
  53. ==/UserStyle== */
  54. /*
  55.  
  56. @var checkbox   ruby-font                        "Ruby Font"                                        1
  57. @var checkbox   pw-font                          "Proportional Width Font"                          1
  58. */
  59. ruby-font=0 // 
  60. pw-font=0 // 
  61.  
  62. msg-block-margin-1 = 48px //
  63.  
  64. vline-gap-1-px = vline-gap-1 * 1px //
  65. vline-gap-2-px = vline-gap-2 * 2px //
  66. padding-right-author-icon-diff = padding-right-author-icon - 6px //
  67. author-icon-size-diff =  author-icon-size - 24px + vline-gap-1-px //
  68. cb-w = 78px + author-icon-size-diff + vline-gap-1-px //
  69. cb-ml = -( 48px + cb-w + author-icon-size-diff + padding-right-author-icon-diff + vline-gap-2-px + vline-gap-1-px )   //
  70. padding-left-author-icon = padding-left-author-icon-x + vline-gap-1-px //
  71. ds-w = 14px + vline-gap-2-px + vline-gap-1-px //
  72.  
  73. if chat-author-vline-enable == 0 //
  74.     ds-w = 0px //
  75.  
  76. author-icon-mr = padding-right-author-icon + ds-w  //
  77.  
  78. final-message-opacity-0 = final-message-opacity * 0.2 //
  79. final-message-opacity-10 = final-message-opacity * 0.45 //
  80.  
  81.  
  82. message-font-size = message-font-ratio * 0.4rem //
  83. author-font-size-2=author-font-ratio * 0.4rem //
  84.  
  85.  
  86. sl-3a = (emoji-vertical-shift - 4) * 0.5px //
  87. emoji-vertical-shift-px = sl-3a //
  88.  
  89. dummy()
  90.     // dummy
  91.     border: 0;
  92.  
  93.  
  94.  
  95. cc(colorCode)
  96.     transparentify(colorCode, v-transparent)
  97.  
  98.  
  99. 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)
  100.  
  101.  
  102. gen1()
  103.  
  104.     for c1, i in myChars
  105.         d1 = '&:has(#img[src*="m/%s"])' % c1
  106.         {d1} //
  107.             --author-color-1 'var(--vline-color-%s)' % (i+1+1000) //
  108.  
  109.     for c1, i in myChars
  110.         d1 = '&:has(#img[src*="%s="])' % c1
  111.         {d1} //
  112.             --author-color-1 'var(--vline-color-%s)' % (i+1+1000) //
  113.  
  114.     for c1, i in myChars
  115.         d1 = '&:has(.yt-live-chat-author-badge-renderer[src*="m/%s"])' % c1
  116.         {d1} //
  117.             --author-color-2 'var(--vline-color-%s)' % (i+1+1000) //
  118.  
  119.  
  120. authorNameColor()
  121.     
  122.    --yt-live-chat-sponsor-color: color-sponsor-text; //
  123.    --yt-live-chat-secondary-text-color: #ddd; //
  124.    --yt-live-chat-author-chip-owner-background-color: color-owner-chip-background; //    --yt-live-chat-moderator-color: #5e84f1;
  125.    --yt-live-chat-moderator-color: color-moderator-text; //
  126.  
  127.    #author-name {
  128.        --yt-live-chat-secondary-text-color: color-general-author;
  129.        word-break: break-word;
  130.        display: inline;
  131.        vertical-align: middle;
  132.    }
  133. @-moz-document url-prefix("https://www.youtube.com/live_chat") {
  134.  
  135.     msg-line-height-o = (message-line-height + 4) * 0.15rem
  136.     msg-line-height-d = message-font-size + msg-line-height-o
  137.     msg-min-height = msg-line-height-d * 1.08
  138.  
  139.     line-height-message = msg-line-height-d
  140.     line-height-author-name = author-font-size-2 + (author-line-height + 4) * 0.15rem
  141.     line-height-min = 0
  142.  
  143.     if message-font-size >0 and author-font-size-2 > 0 {
  144.         line-height-min = line-height-message + line-height-author-name
  145.     }
  146.  
  147.     html{
  148.         --final-message-opacity-0: final-message-opacity-0;
  149.         --final-message-opacity-10: final-message-opacity-10;
  150.         --final-message-opacity: final-message-opacity;
  151.         --emoji-vertical-shift-px: emoji-vertical-shift-px;
  152.         --author-chip-display: !invalid;
  153.         --author-chip-mt: !invalid;
  154.         --author-chip-mb: !invalid;
  155.  
  156.     }
  157.  
  158.     yt-live-chat-author-chip {
  159.         display: var(--author-chip-display);
  160.         margin-top: var( --author-chip-mt);
  161.         margin-bottom: var( --author-chip-mb);
  162.     }
  163.  
  164.     makeBoxShadow(){
  165.  
  166.  
  167.         contain: strict;
  168.         content-visibility: auto;
  169.  
  170.         position: absolute;
  171.         box-shadow-w1 = 32px + author-icon-size-diff + vline-gap-1-px
  172.         box-shadow-w2 = box-shadow-w1 + 12px + vline-gap-2-px
  173.         --box-shadow-w1: box-shadow-w1;
  174.         --box-shadow-w2: box-shadow-w2;
  175.         box-shadow: var(--box-shadow-w1) 0px 0px 0px var(--author-color-1), var(--box-shadow-w1) 0px 0px 0px #ddd, var(--box-shadow-w2) 0px 0px 0px var(--author-color-2), var(--box-shadow-w2) 0px 0px 0px #888;
  176.         content: '';
  177.         width: cb-w;
  178.         border-radius: 0;
  179.         display: block;
  180.         pointer-events: none;
  181.         touch-action: none;
  182.         user-select: none;
  183.         z-index: 0;
  184.         bottom: 1px;
  185.         top: 1px;
  186.  
  187.     }
  188.  
  189.  
  190.     #menu.style-scope.yt-live-chat-paid-message-renderer {
  191.         z-index: 77;
  192.         pointer-events: all;
  193.     }
  194.  
  195.  
  196.     /* */
  197.     @keyframes yt-live-chat-text-message-renderer-animation3 {
  198.  
  199.         0% {
  200.             opacity: var(--final-message-opacity-0); /* */
  201.         }
  202.  
  203.  
  204.         100% {
  205.             opacity: var(--final-message-opacity); /* */
  206.         }
  207.  
  208.     }
  209.     /* */
  210.  
  211.     @keyframes yt-live-chat-text-message-renderer-animation2 {
  212.         0% {
  213.             left: 48px;
  214.  
  215.             height: 6px;
  216.             width: 32px;
  217.             opacity: 0.9;
  218.         }
  219.  
  220.         50% {
  221.             left: 48px;
  222.  
  223.             height: 3.2px;
  224.  
  225.             width: calc(100% - 72px);
  226.             opacity: 0.8;
  227.         }
  228.  
  229.         51% {
  230.             left: 48px;
  231.  
  232.             height: 3.2px;
  233.  
  234.             width: calc(100% - 72px);
  235.             opacity: 0.4;
  236.         }
  237.  
  238.         100% {
  239.             left: 48px;
  240.  
  241.             height: 3.2px;
  242.  
  243.             width: calc(100% - 72px);
  244.             opacity: 0.0;
  245.         }
  246.     }
  247.  
  248.     /* */
  249.  
  250.  
  251.     yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip,
  252.     yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer,
  253.     yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer #image,
  254.     yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer #image img {
  255.         contain: layout style;
  256.         display: inline-flex;
  257.         vertical-align: middle;
  258.     }
  259.  
  260.  
  261.  
  262.     sl-1 = 0px
  263.  
  264.     if emoji-shadow-size > 1 {
  265.  
  266.         sl=(emoji-shadow-size - 1) * 0.5px //
  267.         sr=-1 * sl //
  268.         sl-1 = sl //
  269.  
  270.     }
  271.  
  272.     sl-2 = sl-1 + emoji-margin
  273.     sl-3 = sl-1
  274.  
  275.     .emoji{
  276.         --emoji-margin-left: sl-2;
  277.     }
  278.     .emoji + .emoji {
  279.         --emoji-margin-left: sl-1;
  280.     }
  281.  
  282.  
  283.     #message.yt-live-chat-text-message-renderer .emoji.yt-live-chat-text-message-renderer {
  284.         contain: layout paint style;
  285.  
  286.         display: inline-block;
  287.  
  288.  
  289.         if emoji-shadow-size > 1 {
  290.  
  291.             filter: drop-shadow(0px sl 0px emoji-shadow) drop-shadow(sl 0px 0px emoji-shadow) drop-shadow(sr 0px 0px emoji-shadow) drop-shadow(0px sr 0px emoji-shadow); 
  292.  
  293.         }
  294.  
  295.  
  296.         margin-left: var(--emoji-margin-left);
  297.         margin-right: sl-2;
  298.         margin-top: sl-3;
  299.         margin-bottom: sl-1;
  300.         border-bottom: var(--emoji-vertical-shift-px) solid transparent;
  301.  
  302.         if emoji-normalize-enable {
  303.  
  304.             --emoji-font-size: emoji-font-size;
  305.  
  306.             height: calc(var(--emoji-font-size) * 1.12);
  307.             width: auto;
  308.             object-fit: contain;
  309.         }
  310.     }
  311.     
  312.     yt-live-chat-pinned-message-renderer#pinned-message #message.yt-live-chat-pinned-message-renderer #card #message .emoji {
  313.         
  314.         if emoji-shadow-size > 1 {
  315.  
  316.             filter: drop-shadow(0px sl 0px emoji-shadow) drop-shadow(sl 0px 0px emoji-shadow) drop-shadow(sr 0px 0px emoji-shadow) drop-shadow(0px sr 0px emoji-shadow); 
  317.  
  318.         }
  319.     }
  320.  
  321.     body yt-img-shadow#author-photo.style-scope.yt-live-chat-text-message-renderer {
  322.         contain-intrinsic-size: author-icon-size author-icon-size;
  323.     }
  324.  
  325.  
  326.  
  327.     yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer yt-live-chat-author-chip.yt-live-chat-text-message-renderer {
  328.         align-items: center;
  329.         display: inline-flex;
  330.         flex-direction: row;
  331.         margin: 0;
  332.  
  333.         font-size: author-font-size-2;
  334.         line-height: line-height-author-name; /* 120% */
  335.     }
  336.  
  337.     yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer yt-live-chat-author-chip.yt-live-chat-paid-message-renderer {
  338.         align-items: center;
  339.         display: inline-flex;
  340.         flex-direction: row;
  341.  
  342.         font-size: author-font-size-2;
  343.         line-height: line-height-author-name; /* 120% */
  344.     }
  345.  
  346.  
  347.  
  348.     #items yt-live-chat-text-message-renderer { // weak selector
  349.     contain: layout style;
  350. } //
  351.     xfont-variant-east-asian=unset // ;
  352.     if ruby-font { //
  353.         xfont-variant-east-asian=ruby //
  354.     } //
  355.     if pw-font { //
  356.         xfont-variant-east-asian=proportional-width //
  357.     } //
  358.     if ruby-font and pw-font { //
  359.         xfont-variant-east-asian=ruby proportional-width //
  360.     } //
  361.     //
  362.  
  363.  
  364.     yt-live-chat-item-list-renderer:not([allow-scroll]) #item-scroller.yt-live-chat-item-list-renderer {
  365.         overflow-y: scroll;
  366.         padding-right: 0;
  367.     }
  368.     
  369.     yt-live-chat-message-input-renderer {
  370.         
  371.         authorNameColor()
  372.         
  373.     }
  374.  
  375.     #items.style-scope.yt-live-chat-item-list-renderer {
  376.  
  377.         if chat-author-vline-enable {
  378.  
  379.             paid-msg-pl = msg-block-margin-2 + author-icon-size-diff + vline-gap-2-px 
  380.             paid-msg-vline-padding = paid-msg-pl + msg-block-margin-1
  381.             paid-msg-vline-ml = -120px - paid-msg-pl - author-icon-size-diff + padding-left-author-icon - 2 * vline-gap-1-px - 10px
  382.  
  383.  
  384.             & > yt-live-chat-paid-message-renderer, & > yt-live-chat-membership-item-renderer, & > yt-live-chat-paid-sticker-renderer {
  385.  
  386.                 --paid-msg-vline-ml: paid-msg-vline-ml;
  387.                 --paid-msg-vline-padding-l: paid-msg-vline-padding;
  388.                 --paid-msg-vline-padding-r: '%s' % (paid-msg-vline-padding * (msg-block-margin-rr + 1.0));
  389.                     padding: 4px var(--paid-msg-vline-padding-r) 4px var(--paid-msg-vline-padding-l);
  390.                 position: relative !important;
  391.  
  392.  
  393.                 &::before {
  394.  
  395.                     makeBoxShadow()
  396.                     margin-left:  var(--paid-msg-vline-ml);
  397.                 }
  398.  
  399.             }
  400.  
  401.  
  402.             .yt-live-chat-paid-message-renderer, .yt-live-chat-membership-item-renderer, .yt-live-chat-paid-sticker-renderer {
  403.  
  404.  
  405.  
  406.  
  407.             &#author-photo.style-scope.no-transition {
  408.                     position:fixed;
  409.                     left:0px;
  410.  
  411.                     align-self: center;
  412.                     display: flex;
  413.                     padding: 0;
  414.                     margin: 0;
  415.                     z-index: 1;
  416.  
  417.                     margin: 0 0 0 padding-left-author-icon;
  418.  
  419.                     &,
  420.                     & img[src] {
  421.  
  422.                         height: author-icon-size;
  423.                         object-fit: contain;
  424.                         width: auto;
  425.                     }
  426.  
  427.                 }
  428.  
  429.  
  430.                 &#header {
  431.  
  432.                     padding: 8px 14px 8px 14px;
  433.                 }
  434.  
  435.  
  436.  
  437.                 if fade-author-icon-enable {
  438.  
  439.  
  440.                     &#author-photo {
  441.                         opacity: author-icon-opacity;
  442.                         if author-icon-transition && (author-icon-transition > 0) {
  443.                             transition: 'opacity %s' % author-icon-transition;
  444.                         }
  445.  
  446.                         &:hover {
  447.                             opacity: 1;
  448.  
  449.                         }
  450.                     }
  451.  
  452.                 }
  453.  
  454.  
  455.  
  456.                 &#menu.style-scope yt-icon-button {
  457.                     position:fixed;
  458.                     right:0;
  459.                 }
  460.             }
  461.  
  462.  
  463.         } else {
  464.  
  465.  
  466.  
  467.         }
  468.  
  469.  
  470.  
  471.         & > .yt-live-chat-item-list-renderer #card #header:has(#overlay-image) {
  472.  
  473.             min-height: 48px;
  474.  
  475.  
  476.         }
  477.  
  478.  
  479.         authorNameColor()
  480.         
  481.         & > yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer #message.yt-live-chat-text-message-renderer {
  482.             padding: 0px 0px;
  483.             margin-left: padding-left-message;
  484.             display: block;
  485.             align-items: center;
  486.             font-size: message-font-size;
  487.             line-height: normal; /* 120% */
  488.             min-height: msg-min-height;
  489.             line-height: msg-line-height-d;
  490.             --padding-v: 'calc( 4px + %s )' % ((msg-line-height-d - message-font-size)/2);
  491.                 padding-top: var(--padding-v) !important;
  492.             padding-bottom: var(--padding-v) !important;
  493.             /*
  494.             margin-left:2px;
  495.             margin-right:2px;
  496.             */
  497.  
  498.             font-variant-east-asian: xfont-variant-east-asian;
  499.             letter-spacing: 0px !important;
  500.  
  501.             line-break: auto;
  502.             text-align:justify;
  503.             word-break: break-word;
  504.             white-space: pre-line;
  505.             overflow-wrap: break-word;
  506.             -ms-word-break: break-word;
  507.             word-break: break-word;
  508.             -ms-hyphens: auto;
  509.             -moz-hyphens: auto;
  510.             -webkit-hyphens: auto;
  511.             hyphens: auto;
  512.         }
  513.  
  514.  
  515.         & > yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer #message.yt-live-chat-text-message-renderer a {
  516.             color: inherit !important;
  517.             font-variant-east-asian: revert;
  518.         }
  519.  
  520.  
  521.  
  522.         yt-live-chat-author-chip.yt-live-chat-text-message-renderer {
  523.             --author-chip-display: inline-block;
  524.             --author-chip-mt: 4px;
  525.             --author-chip-mb: 2px;
  526.         }
  527.  
  528.         #author-photo.yt-live-chat-text-message-renderer {
  529.             align-self: center;
  530.             display: flex;
  531.             padding: 0;
  532.             margin-top: 0 
  533.             margin-right: author-icon-mr !important; /* important for Kaitei */
  534.             margin-bottom:0;
  535.             margin-left: padding-left-author-icon;
  536.             z-index: 1;
  537.         }
  538.  
  539.         #author-photo.yt-live-chat-text-message-renderer img[src] {
  540.             height: author-icon-size;
  541.             object-fit: contain;
  542.             width: auto;
  543.         }
  544.  
  545.         img.yt-live-chat-author-badge-renderer {
  546.             height: member-icon-font-size;
  547.             width: auto;
  548.         }
  549.  
  550.  
  551.         #chat-badges.style-scope.yt-live-chat-author-chip {
  552.             /*        display: inline;*/
  553.             flex-direction: row;
  554.             align-items: center;
  555.             justify-items: center;
  556.         }
  557.  
  558.  
  559.         & > yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer {
  560.             padding: 0;
  561.             margin: 0;
  562.             padding-right: 28px;
  563.             margin-right: 4px;
  564.  
  565.  
  566.             if fade-author-icon-enable {
  567.  
  568.  
  569.                 #author-photo.yt-live-chat-text-message-renderer {
  570.                     opacity: author-icon-opacity;
  571.                     if author-icon-transition > 0 {
  572.                         transition: 'opacity %s' % author-icon-transition;
  573.                     }
  574.                 }
  575.  
  576.                 #author-photo.yt-live-chat-text-message-renderer:hover {
  577.                     opacity: 1;
  578.                 }
  579.             }
  580.         }
  581.  
  582.         if loading-effect-ms > 0 {
  583.  
  584.  
  585.             & > yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer::before {
  586.                 content: '';
  587.                 display: block;
  588.                 position: absolute;
  589.                 background: rgba(77, 77, 77, 0.5);
  590.                 animation: yt-live-chat-text-message-renderer-animation2 loading-effect-ms linear 0ms 1 normal forwards;
  591.  
  592.                 pointer-events: none;
  593.                 touch-action: none;
  594.                 user-select: none;
  595.                 transform-origin: 50% 50%;
  596.  
  597.                 width: 32px;
  598.                 bottom: 0;
  599.                 height: 16px;
  600.                 border-radius: 32px;
  601.                 z-index: 1;
  602.             }
  603.         }
  604.  
  605.  
  606.         & > yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer:hover #content {
  607.             opacity: 1.0 !important;
  608.         }
  609.  
  610.         & > yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer #content {
  611.             transform-origin: 0 50%;
  612.             opacity: final-message-opacity;
  613.  
  614.             if line-height-min > 0 and min-content-text-height > 0 {
  615.                 --line-height-min: line-height-min;
  616.                 --line-height-adjust: (min-content-text-height * 2px);
  617.                     min-height: calc(var(--line-height-min) + var(--line-height-adjust));
  618.                 }
  619.             }
  620.  
  621.  
  622.         if message-opacity-ms > 0 {
  623.  
  624.             & > yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer #content {
  625.                 animation: yt-live-chat-text-message-renderer-animation3 message-opacity-ms ease-in 0s 1 normal forwards;
  626.             }
  627.         }
  628.  
  629.         if chat-author-vline-enable {
  630.  
  631.  
  632.             & > yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer #content::before {
  633.  
  634.                 makeBoxShadow()
  635.                 margin-left:  cb-ml;
  636.             }
  637.         }
  638.  
  639.         --vline-color-1001: cc(#696969);
  640.         --vline-color-1002: cc(#a9a9a9);
  641.         --vline-color-1003: cc(#dcdcdc);
  642.         --vline-color-1004: cc(#2f4f4f);
  643.         --vline-color-1005: cc(#556b2f);
  644.         --vline-color-1006: cc(#6b8e23);
  645.         --vline-color-1007: cc(#a0522d);
  646.         --vline-color-1008: cc(#228b22);
  647.         --vline-color-1009: cc(#800000);
  648.         --vline-color-1010: cc(#191970);
  649.         --vline-color-1011: cc(#483d8b);
  650.         --vline-color-1012: cc(#3cb371);
  651.         --vline-color-1013: cc(#bc8f8f);
  652.         --vline-color-1014: cc(#663399);
  653.         --vline-color-1015: cc(#008080);
  654.         --vline-color-1016: cc(#b8860b);
  655.         --vline-color-1017: cc(#bdb76b);
  656.         --vline-color-1018: cc(#4682b4);
  657.         --vline-color-1019: cc(#000080);
  658.         --vline-color-1020: cc(#d2691e);
  659.         --vline-color-1021: cc(#9acd32);
  660.         --vline-color-1022: cc(#20b2aa);
  661.         --vline-color-1023: cc(#cd5c5c);
  662.         --vline-color-1024: cc(#32cd32);
  663.         --vline-color-1025: cc(#8fbc8f);
  664.         --vline-color-1026: cc(#8b008b);
  665.         --vline-color-1027: cc(#b03060);
  666.         --vline-color-1028: cc(#d2b48c);
  667.         --vline-color-1029: cc(#66cdaa);
  668.         --vline-color-1030: cc(#ff0000);
  669.         --vline-color-1031: cc(#ffa500);
  670.         --vline-color-1032: cc(#ffd700);
  671.         --vline-color-1033: cc(#ffff00);
  672.         --vline-color-1034: cc(#c71585);
  673.         --vline-color-1035: cc(#0000cd);
  674.         --vline-color-1036: cc(#7fff00);
  675.         --vline-color-1037: cc(#00ff00);
  676.         --vline-color-1038: cc(#ba55d3);
  677.         --vline-color-1039: cc(#00fa9a);
  678.         --vline-color-1040: cc(#4169e1);
  679.         --vline-color-1041: cc(#e9967a);
  680.         --vline-color-1042: cc(#dc143c);
  681.         --vline-color-1043: cc(#00ffff);
  682.         --vline-color-1044: cc(#00bfff);
  683.         --vline-color-1045: cc(#f4a460);
  684.         --vline-color-1046: cc(#9370db);
  685.         --vline-color-1047: cc(#0000ff);
  686.         --vline-color-1048: cc(#a020f0);
  687.         --vline-color-1049: cc(#ff6347);
  688.         --vline-color-1050: cc(#d8bfd8);
  689.         --vline-color-1051: cc(#ff00ff);
  690.         --vline-color-1052: cc(#db7093);
  691.         --vline-color-1053: cc(#f0e68c);
  692.         --vline-color-1054: cc(#6495ed);
  693.         --vline-color-1055: cc(#dda0dd);
  694.         --vline-color-1056: cc(#87ceeb);
  695.         --vline-color-1057: cc(#ff1493);
  696.         --vline-color-1058: cc(#afeeee);
  697.         --vline-color-1059: cc(#ee82ee);
  698.         --vline-color-1060: cc(#98fb98);
  699.         --vline-color-1061: cc(#7fffd4);
  700.         --vline-color-1062: cc(#ff69b4);
  701.         --vline-color-1063: cc(#ffe4c4);
  702.         --vline-color-1064: cc(#ffb6c1);
  703.  
  704.  
  705.  
  706.         --author-color-1-default: var(--vline-color-1064);
  707.  
  708.         & > .yt-live-chat-item-list-renderer {
  709.  
  710.  
  711.  
  712.  
  713.             & {
  714.                 --author-color-1: var(--author-color-1-default);
  715.                 --author-color-2: var(--author-color-1-default);
  716.             }
  717.  
  718.             gen1()
  719.         }
  720.  
  721.     }
  722.  
  723.  
  724.  
  725.   @supports (contain: layout paint style) {
  726.  
  727.     /*
  728.     contain: layout paint style;
  729.     // #item-offset uses transform, it is buggy in Opera 93.0 with contain: layout & paint
  730.     */
  731.  
  732.     #items.style-scope.yt-live-chat-item-list-renderer{
  733.         contain: layout paint style;
  734.     }
  735.  
  736.     #item-offset.style-scope.yt-live-chat-item-list-renderer {
  737.         contain: style;
  738.     }
  739.  
  740.     #item-scroller.style-scope.yt-live-chat-item-list-renderer {
  741.         contain: size style;
  742.     }
  743.  
  744.     #contents.style-scope.yt-live-chat-item-list-renderer,
  745.     #chat.style-scope.yt-live-chat-renderer,
  746.     img.style-scope.yt-img-shadow[width][height] {
  747.         contain: size layout paint style;
  748.     }
  749.  
  750.     .style-scope.yt-live-chat-ticker-renderer[role="button"][aria-label],
  751.     .style-scope.yt-live-chat-ticker-renderer[role="button"][aria-label]>#container {
  752.         contain: layout paint style;
  753.     }
  754.  
  755.  
  756.     yt-img-shadow#author-photo.style-scope {
  757.         contain: layout paint style;
  758.         content-visibility: auto;
  759.         contain-intrinsic-size: 24px 24px;
  760.     }
  761.  
  762.     yt-live-chat-text-message-renderer:not([author-is-owner]) #author-photo.style-scope.yt-live-chat-text-message-renderer,
  763.     yt-live-chat-text-message-renderer:not([author-is-owner]) yt-live-chat-author-chip.style-scope.yt-live-chat-text-message-renderer {
  764.         pointer-events: var(--tabview-msg-pointer-events);
  765.     }
  766.  
  767.     yt-live-chat-text-message-renderer:not([author-is-owner]) span#message.style-scope.yt-live-chat-text-message-renderer>img.emoji.yt-formatted-string.style-scope.yt-live-chat-text-message-renderer {
  768.         cursor: var(--tabview-msg-cursor);
  769.     }
  770.  
  771.  
  772.     yt-live-chat-text-message-renderer:not([author-is-owner]) span#message.style-scope.yt-live-chat-text-message-renderer,
  773.     yt-live-chat-paid-message-renderer #message.yt-live-chat-paid-message-renderer,
  774.     yt-live-chat-text-message-renderer:not([author-is-owner]) #timestamp.style-scope.yt-live-chat-text-message-renderer,
  775.     yt-live-chat-membership-item-renderer #header-content.style-scope.yt-live-chat-membership-item-renderer,
  776.     yt-live-chat-membership-item-renderer #timestamp.style-scope.yt-live-chat-membership-item-renderer,
  777.     yt-live-chat-paid-message-renderer #header-content.yt-live-chat-paid-message-renderer,
  778.     yt-live-chat-paid-message-renderer #timestamp.style-scope.yt-live-chat-paid-message-renderer,
  779.     yt-live-chat-paid-sticker-renderer #content.style-scope.yt-live-chat-paid-sticker-renderer,
  780.     yt-live-chat-paid-sticker-renderer #timestamp.style-scope.yt-live-chat-paid-sticker-renderer {
  781.         cursor: var(--tabview-msg-cursor);
  782.         pointer-events: var(--tabview-msg-pointer-events);
  783.     }
  784.  
  785.     yt-live-chat-text-message-renderer.style-scope.yt-live-chat-item-list-renderer,
  786.     yt-live-chat-membership-item-renderer.style-scope.yt-live-chat-item-list-renderer,
  787.     yt-live-chat-paid-message-renderer.style-scope.yt-live-chat-item-list-renderer,
  788.     yt-live-chat-banner-manager.style-scope.yt-live-chat-item-list-renderer {
  789.         contain: layout style;
  790.     }
  791.  
  792.     tp-yt-paper-tooltip[style*="inset"][role="tooltip"] {
  793.         contain: layout paint style;
  794.     }
  795.  
  796. }
  797.  
  798.   #item-offset.style-scope.yt-live-chat-item-list-renderer {
  799.  
  800.       position: relative !important;
  801.       height: auto !important;
  802.  
  803.   }
  804.  
  805.   #item-offset.style-scope.yt-live-chat-item-list-renderer > #items.style-scope.yt-live-chat-item-list-renderer {
  806.       position: static !important;
  807.   }
  808.  
  809.  
  810.       #sticker #img[width][height] {
  811.  
  812.           max-width: var( --sticker-width);
  813.           max-height: var( --sticker-height);
  814.  
  815.       }
  816.  
  817.  
  818.   if enable-smaller-super-chat {
  819.  
  820.       yt-live-chat-paid-sticker-renderer.yt-live-chat-item-list-renderer #sticker.yt-live-chat-paid-sticker-renderer #img[width="144"][height="144"] {
  821.  
  822.           /* two row height */
  823.           --sticker-width: 8em;
  824.           --sticker-height: 8em; 
  825.  
  826.       }
  827.  
  828.   }
  829.  
  830.   html {
  831.       --author-chip-child-order: author-chip-default-order;
  832.   }
  833.  
  834.   #prepend-chat-badges {
  835.       --author-chip-child-order: author-chip-pre-badge-order;
  836.   }
  837.  
  838.   #author-name {
  839.       --author-chip-child-order: author-chip-author-name-order;
  840.   }
  841.   #chat-badges {
  842.       --author-chip-child-order: author-chip-member-badge-order;
  843.   }
  844.  
  845.   yt-live-chat-author-chip.yt-live-chat-text-message-renderer > .yt-live-chat-author-chip {
  846.       order: var(--author-chip-child-order);
  847.   }
  848.  
  849.  
  850.   if ( author-chip-member-badge-at > -1px ) {
  851.  
  852.       yt-live-chat-author-chip.yt-live-chat-text-message-renderer > #chat-badges.yt-live-chat-author-chip:not(:empty) {
  853.            align-self: flex-start;
  854.            padding-top: author-chip-member-badge-at;
  855.            display: inline-block;
  856.        }
  857.  
  858.    }
  859.  
  860.   if ( author-chip-member-badge-order < max(author-chip-pre-badge-order, author-chip-author-name-order, author-chip-default-order) ) {
  861.  
  862.       yt-live-chat-author-chip.yt-live-chat-text-message-renderer > yt-live-chat-author-badge-renderer.yt-live-chat-author-chip {
  863.           margin: 0 0 0 0;
  864.       }
  865.  
  866.       yt-live-chat-author-chip.yt-live-chat-text-message-renderer {
  867.           column-gap: 2px;
  868.       }
  869.  
  870.   }
  871.  
  872.   if ( author-chip-member-badge-mw > 0px) {
  873.  
  874.       yt-live-chat-author-chip.yt-live-chat-text-message-renderer > #chat-badges {
  875.           min-width: author-chip-member-badge-mw;
  876.           text-align: center;
  877.       }
  878.  
  879.       yt-live-chat-author-chip.yt-live-chat-text-message-renderer > #author-name.owner ~ #chat-badges:empty {
  880.           min-width: initial;
  881.       }
  882.  
  883.   }
  884.  
  885.  
  886.   if ( author-chip-member-badge-mh > 0px) {
  887.  
  888.       #chat-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer #image img {
  889.           min-height: author-chip-member-badge-mh;
  890.       }
  891.  
  892.   }
  893.  
  894. }