修改YouTube影片聊天室版面,字體,訊息Modifies the YouTube live chat to show deleted messages and condense things for better readability.
目前為
/* ==UserStyle==
@name youtube版面(L) live chat
@namespace 1
@version 1.2
@license MIT
@description 修改YouTube影片聊天室版面,字體,訊息Modifies the YouTube live chat to show deleted messages and condense things for better readability.
@author Leadra
@preprocessor stylus
@var checkbox alternate-background "Alternate Background" 1
@var checkbox chat_pr "分行" 1
@var checkbox chatheight "聊天室延伸(tabview衝突)" 0
@var range message-font-size "聊天字體大小" [17, 12, 20, 1, "px"]
@var range badge-size "Badge Size" [16, 8, 32, 4, "px"]
@var range emoji-size "Emoji Size" [20, 8, 32, 4, "px"]
@var range profile-picture-size "Profile Picture Size" [26, 10, 48, 2, "px"]
@var range timestamp-font-size "Timestamp Font Size" [10, 8, 14, 1, "px"]
@var checkbox show-message-lines "Show Message Lines" 1
@var checkbox show-deleted-messages "Show Deleted Messages" 1
==/UserStyle== */
//@var range header-height "Header Height" [38, 28, 56, 1, "px"]
//@var range left-message-line "Left Message Line" [0, 0, 5, 1, "px"]
//@var range deleted-message-transparency "Deleted Message Transparency" [80, 10, 100, 5, "%"]
//@var color deleted-message-background-color "Deleted Message Background Color" #232323
//@var color deleted-message-color "Deleted Message Color" #FF0000
//@var range right-message-line "Right Message Line" [2, 0, 5, 1, "px"]
//@var color default-line-color "Default Line Color" rgba(255,255,255,0)
@-moz-document url-prefix("https://www.youtube.com/watch?v="), url-prefix("https://www.youtube.com/live_chat") {
/* background */
if alternate-background {
yt-live-chat-text-message-renderer:nth-child(even) {
background-color: var(--yt-spec-general-background-c);
}
}
/* message lines */
if show-message-lines {
yt-live-chat-text-message-renderer {
//border-left: left-message-line solid;
border-right: 2px solid; //right-message-line solid
border-color: rgba(255,255,255,0)//default-line-color;
}
yt-live-chat-text-message-renderer[is-deleted] {
border-color: #ff0000 //deleted-message-color;
}
yt-live-chat-text-message-renderer[author-type="member"] {
border-color: var(--yt-live-chat-sponsor-color);
}
yt-live-chat-text-message-renderer[author-type="moderator"] {
border-color: var(--yt-live-chat-moderator-color);
}
yt-live-chat-text-message-renderer[author-type="owner"] {
border-color: var(--yt-live-chat-author-chip-owner-background-color);
}
}
/* deleted messages */
if show-deleted-messages {
yt-live-chat-text-message-renderer[is-deleted]:not([show-original]) {
opacity: 80%;//deleted-message-transparency
background-color: deleted-message-background-color;
}
yt-live-chat-text-message-renderer[is-deleted]:not([show-original]):hover {
opacity: 1;
}
yt-live-chat-text-message-renderer[is-deleted]:not([show-original]) #message.yt-live-chat-text-message-renderer {
display: inline;
color: #ff0000;//deleted-message-color;
}
#deleted-state.yt-live-chat-text-message-renderer {
display: block;
}
yt-live-chat-text-message-renderer[is-deleted]:not([show-original]) .emoji.yt-live-chat-text-message-renderer,
yt-live-chat-text-message-renderer[is-deleted]:not([show-original]) #author-photo.yt-live-chat-text-message-renderer {
filter: grayscale(1);
}
yt-live-chat-text-message-renderer[is-deleted]:not([show-original]):hover .emoji.yt-live-chat-text-message-renderer,
yt-live-chat-text-message-renderer[is-deleted]:not([show-original]):hover #author-photo.yt-live-chat-text-message-renderer {
filter: grayscale(0);
}
}
/* profile picture */
#avatar.yt-live-chat-message-input-renderer,
#avatar.yt-live-chat-message-input-renderer > img,
#author-photo.yt-live-chat-text-message-renderer,
#author-photo.yt-live-chat-text-message-renderer > img {
width: profile-picture-size;
height: profile-picture-size;
margin: 0px;
}
#author-photo.yt-live-chat-text-message-renderer {
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
/* emoji */
#input.yt-live-chat-text-input-field-renderer img.yt-live-chat-text-input-field-renderer,
#message.yt-live-chat-text-message-renderer .emoji.yt-live-chat-text-message-renderer {
margin: 0px 1px;
width: emoji-size;
height: emoji-size;
vertical-align: middle;
}
/* badge */
img.yt-live-chat-author-badge-renderer, yt-icon.yt-live-chat-author-badge-renderer {
width: badge-size;
height: badge-size;
}
/* header */
yt-live-chat-header-renderer {
padding: 0px;
}
/* message */
yt-live-chat-text-input-field-renderer,
#content.yt-live-chat-text-message-renderer {
font-size: message-font-size;
}
yt-live-chat-text-message-renderer {
padding: 2px 8px;
}
/* timestamp */
#count.yt-live-chat-message-input-renderer,
#timestamp.yt-live-chat-text-message-renderer {
font-size: timestamp-font-size;
margin-right: 0px;
vertical-align: middle;
}
/* input */
yt-live-chat-message-input-renderer {
padding: 0px 0px;
overflow-y: hidden;
}
#input-container > yt-live-chat-author-chip {
display: none;
}
}
// 動畫プレイヤー＆チャット欄
#columns {
// 橫幅を広く使うことでチャット欄を広くする
margin: 0 0 !important;
max-width: 100% !important;
// コメント欄の幅を広げた狀態で畫面幅を狹めると畫面が崩れる問題を防止
& > #primary > #primary-inner > #player > #player-container-outer {
.html5-video-container {
height: 100% !important;
& > video.video-stream.html5-main-video {
max-width: 100% !important;
max-height: 100% !important;
}
}
}}
// 動畫プレイヤーの上の餘白を詰める
& > #primary,
& > #secondary{
padding-top: 0!important;
}
/* コメント欄の幅を指定の幅にする */
& > #secondary {
width: chat_width;
}
// 聊天室延伸
if chatheight{
ytd-live-chat-frame#chat {
/* 畫面 */
// height: calc(102vh ) !important;
height: calc(98vh - 100px) !important;
}
}
if chat_pr {
/*聊天室字體 チャットメッセージ全體をコンパクトにする */
padding: 0px px;
font-size: 16px;
align-items: center;
//聊天室格式 複數行に渡るチャットユーザー名＆メッセージを真ん中に揃える、餘白を詰める
& > #content {
width: 100%;
display: flex;
align-items: center;
& > yt-live-chat-author-chip {
align-items: center;
margin-right: 0px;
// 用戶名格式チャットユーザー名 - 幅を固定＆小さくすることでメッセージを見やすくする
& > #author-name {
width: 65px;
font-size: 15px;
max-height: 2em;
line-height: 1em;
word-break: break-all;
}}}}
// 版主を強調
if emphasize_moderator {
/* 版主背景色 */
yt-live-chat-text-message-renderer[author-type="moderator"] {
padding: 2px 12px;
background: #debabe;
& > #content > span#message {
color: #222;
}
}
// 版主聊天置頂
#contents > yt-live-chat-text-message-renderer[author-type="moderator"] > #content > span#message {
/* 上部固定をすると見た目が変わるため、各種スタイルを打ち消す必要がある */
color: #f5f5f5;
}
}
QingJ © 2025
镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址