☰

YouTube Chat Bubbles

Make YouTube Chat Bubbles

当前为 2022-12-30 提交的版本，查看 最新版本。

  1. /* ==UserStyle==
  2. @name           YouTube Chat Bubbles
  3. @version        0.1.1
  4. @namespace      github.com/cyfung1031
  5. @license        MIT
  6. @description    Make YouTube Chat Bubbles
  7. @author         CY Fung
  8. @preprocessor   stylus
  9. @var color      color-bubble-text               "Bubble Text Color"                             #000
  10. @var color      color-bubble-background         "Bubble Background Color"                       #bccbbc
  11. ==/UserStyle== */
  12. @-moz-document url-prefix("https://www.youtube.com/live_chat") {
  13.  
  14.     #message.yt-live-chat-text-message-renderer {
  15.         padding: 3px 10px;
  16.         margin-left: -2px;
  17.         background: color-bubble-background;
  18.         border-radius: 12px;
  19.         color: color-bubble-text;
  20.         display: flex;
  21.         flex-wrap: wrap;
  22.         align-items: center;
  23.         min-height: 2.6rem;
  24.     }
  25.     
  26.     #message.yt-live-chat-text-message-renderer a{
  27.         color: inherit !important;
  28.     }
  29.  
  30.     #message.yt-live-chat-text-message-renderer::before {
  31.         content: '';
  32.         --egl-btn-half-border-size: 7px;
  33.         --egl-btn-color: color-bubble-background;
  34.         display: block;
  35.         position: absolute;
  36.         border-top: 0;
  37.         border-right: 7px inset transparent;
  38.         border-bottom: 10px solid var(--egl-btn-color);
  39.         border-left: 10px inset transparent;
  40.         transform: rotate(46deg);
  41.         margin-left: -18px;
  42.         margin-top: -8px;
  43.         transform-origin: center center;
  44.         pointer-events: none;
  45.         touch-action: none;
  46.         user-select: none;
  47.     }
  48.  
  49.     yt-live-chat-author-chip {
  50.         margin-top: 4px;
  51.         margin-bottom: 2px;
  52.     }
  53.  
  54.     #author-photo {
  55.         align-self: center;
  56.         display: flex;
  57.     }
  58. }