Greasy Fork 镜像站

YouTube Sticky Live Chat

Pin the latest message written by live owner or moderator to the top
Đặt câu hỏi, đăng đánh giá, hoặc báo cáo tập lệnh.
Wrap lines
// ==UserScript==
// @name         YouTube Sticky Live Chat
// @name:ja      YouTube Sticky Live Chat
// @namespace    https://i544c.github.io
// @version      0.4.1
// @description  Pin the latest message written by live owner or moderator to the top
// @description:ja  生放送主とモデレータの最新のコメントを上に固定するユーザスクリプト
// @author       i544c
// @match        https://www.youtube.com/live_chat*
// @match        https://www.youtube.com/live_chat_replay*
// @grant        none
// @license      MIT
// ==/UserScript==

(() => {
  const style = document.createElement('style');
  style.textContent = `
    yt-live-chat-app {
      /* Global variables */
      --ysl-line-length: 3;
      --ysl-message-height: calc(1em * var(--ysl-line-length) + 4px);
    }

    #item-offset {
      overflow: visible !important;
    }

    #items {
      transform: none !important;
    }

    yt-live-chat-text-message-renderer[author-type="owner"],
    yt-live-chat-text-message-renderer[author-type="moderator"] {
      background: var(--yt-live-chat-message-highlight-background-color);
      position: sticky;
      top: -1px;
      z-index: 1;
      height: var(--ysl-message-height);
      min-height: var(--ysl-message-height);
    }

    yt-live-chat-text-message-renderer[author-type="owner"]:hover,
    yt-live-chat-text-message-renderer[author-type="moderator"]:hover {
      height: 100% !important;
    }

    yt-live-chat-text-message-renderer[author-type="owner"] #content,
    yt-live-chat-text-message-renderer[author-type="moderator"] #content {
      align-self: normal;
      /* String truncate */
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: var(--ysl-line-length);
      overflow: hidden;
    }

    yt-live-chat-text-message-renderer[author-type="owner"] #content:hover,
    yt-live-chat-text-message-renderer[author-type="moderator"] #content:hover {
      -webkit-box-orient: inline-axis;
    }
  `;
  document.body.appendChild(style);
})();
扫码关注【爱吃馍】
