修改YouTube聊天室延伸;字體大小;留言縮緊排版,分類明顯化
目前為
/* ==UserStyle==
@name YT live chat版面調整
@version 1
@namespace 1
@license MIT
@description 修改YouTube聊天室延伸;字體大小;留言縮緊排版,分類明顯化
@author Leadra
@preprocessor stylus
@var checkbox alternate-background "Alternate Background" 1
@var checkbox chat_pr "分行" 1
@var checkbox chatheight "聊天室延伸(tabview衝突)" 0
@var number chat_width "chat欄寬（px）" [500, 0, 1000, 10, "px"]
@var range message-font-size "聊天字體大小" [17, 12, 20, 1, "px"]
@var range name_size "name字體大小" [14, 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== */
@-moz-document url-prefix("https://www.youtube.com/watch?") {
/* --------------------------------------------------------------- */
// 動画プレイヤー＆チャット欄
#columns {
/* 横幅を広く使うことでチャット欄を広くする */
margin: 0 0 !important;
max-width: 100% !important;
/* 動画プレイヤーの上の余白を詰める */
& > #primary,
& > #secondary{
padding-top: 0!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;
}
}
}
/* コメント欄の幅を指定の幅にする */
& > #secondary {
width: chat_width;
}
}
// チャット欄を画面一番下まで伸ばす
if chatheight{ ytd-live-chat-frame#chat {
/* 画面 */
// height: calc(100vh - 100px) !important;
height: calc(100vh *0.94) !important;
}
}}
@-moz-document 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);
}
}
// 版主を強調
/* 版主背景色 */
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;
}
/* 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;
if chat_pr {
//分行聊天室格式 複數行に渡るチャットユーザー名＆メッセージを真ん中に揃える、餘白を詰める
& > #content {
width: 100%;
display: flex;
align-items: center;
& > yt-live-chat-author-chip {
align-items: center;
margin: 0px;
// 用戶名格式チャットユーザー名 - 幅を固定＆小さくすることでメッセージを見やすくする
& > #author-name {
width: 45px;
font-size: 15px;
max-height: 1.7em;
line-height: 1em;
//word-break: break-all;
//名稱破行自動斷行
}}}}
}
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 0 0 0 0;
padding: 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 0px 0px 0px ;
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;
margin: 0px 0px 0px 0px ;
}
/* header */
yt-live-chat-header-renderer {
padding: 0px;
}
/* message */
//yt-live-chat-text-input-field-renderer,
//#content.yt-live-chat-text-message-renderer { }yt-live-chat-text-message-renderer {
yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer
#message.yt-live-chat-text-message-renderer {
padding: 1px;
margin: 0px 0 0 0 ;
font-size: message-font-size;
line-height: message-font-size;
}
/* name字體*/
yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer yt-live-chat-author-chip.yt-live-chat-text-message-renderer {
// align-items: center;
display: inline-flex;
flex-direction: row;
margin: 0 2px 0 0px;
font-size: name_size;
line-height: name_size ;
// line-height: line-height-author-name; /* 120% */
}
/* 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;
}}