聊天室排版修改YouTube Live Chat layout modify
/* ==UserStyle==
@name YT chat版面
@version 2.0.8
@namespace https://greasyfork.org/zh-TW/users/4839
@license MIT
@description 聊天室排版修改YouTube Live Chat layout modify
@author Leadra
@preprocessor stylus
@var number chat_top "訊息置頂透明度" [0.8, 0, 1, 0.1]
@var number chat_tophead "訊息置頂高度" [0, 0, 30, 10, "px"]
@var range font_shadow "文字陰影" [1.5, 0, 5, 0.5, "px"]
@var color font_shadow_color "文字陰影背景色1" #000
@var color font_shadow_color2 "文字陰影背景色2" #036
@var color manager_background "板手+版主強調背景色" rgba(0, 0, 255, .5)
@var checkbox superchat_size "SC框延長+透明0.8" 1
@var checkbox hide_sc_head "SC計時列縮小" 1
@var number sc_head ">SC計時列高度" [15, 0, 30, 5, "px"]
@var checkbox hide_survey "投票調查隱藏" 1
@var checkbox hide_reaction "提醒+愛心隱藏" 1
@var checkbox hide_tooltip "貼圖註解隱藏" 1
@var checkbox message_lines "會員訊息右側線" 1
@var checkbox chat_scroll "聊天室Y卷軸隱藏" 1
@var checkbox alternate_background "聊天交叉背景色" 1
@var checkbox message_pr "聊天斷行" 0
@var checkbox name_pr "name斷行" 0
@var checkbox name_pr2 "name靠右" 0
@var checkbox hide_user_name "name+徽章隱藏" 0
@var checkbox hide_pic "大頭貼隱藏" 0
@var checkbox input_down "打字區+貼圖框縮緊固定" 1
@var range emoji_member ">會員貼圖放大" [35, 10, 50, 5, "px"]
@var range emoji_normal ">一般貼圖間距" [2.5, 1, 5, 0.5, "px"]
@var range text_pr "聊天行距" [0, -6, 10, 1, "px"]
@var range message_fontsize "聊天字體size" [18, 14, 20, 1, "px"]
@var range name_size "名稱size" [14, 0, 20, 1, "px"]
@var range profile_picturesize "大頭貼Size" [26, 0, 48, 2, "px"]
@var range badge_size "會員徽章Size" [14, 8, 32, 2, "px"]
@var range emoji_size "貼圖Emoji Size" [24, 0, 32, 2, "px"]
@var range timestamp_fontsize "時間軸Size" [14, 14, 20, 1, "px"]
==/UserStyle== */
/*特別感謝
https://userstyles.world/style/2625/kaiteki-youtube-chat
https://userstyles.world/style/3515/youtube-live-chat-tweaks
https://greasyfork.org/zh-TW/users/371179-𝖢𝖸-𝖥𝗎𝗇𝗀
*/
@-moz-document url-prefix("https://www.youtube.com/live_chat") {
//#06f淺藍
//header全部聊天欄位yt-live-chat-header-renderer {padding: 0px!important;margin: 0px!important;}
/*版主聊天置頂復原樣式_上部固定をすると見た目が変わるため、各種スタイルを打ち消す必要がある*/
//#contents > yt-live-chat-text-message-renderer[author-type="moderator"] {background-color: #d40213 !important;}
/*alternate交叉背景色*/
if alternate_background {
yt-live-chat-text-message-renderer:nth-child(even) {background-color: rgba(100, 100, 100, .2);}
/*2方法yt-live-chat-text-message-renderer.yt-chat-item-even[class] {background-color: var(--yt-live-chat-message-background-color);}
yt-live-chat-text-message-renderer.yt-chat-item-odd[class] {background-color: var(--yt-live-chat-message-highlight-background-color);}*/
}
/*板手+版主強調背景色*/
yt-live-chat-text-message-renderer[author-type="moderator"] {
padding: 2px 12px;
background: manager_background!important;
& > #content > span#message {
color: #fff;
text-shadow: 1px -1px #000, -1px -1px #000, -1px 1px #000,1px 1px #000,
0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000;
}
}
yt-live-chat-text-message-renderer[author-type="owner"] {
background-color: rgba(239, 239, 0, .3)!important;
}
/*message lines會員訊息右側線*/
if message_lines {
yt-live-chat-text-message-renderer {
//border-left: left-message-line solid;
border-right: 2px solid;
border-color: rgba(255,255,255,0)//default-line-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); // var(--yt-spec-general-background-c);
}
}
/*大頭貼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_picturesize;
height: profile_picturesize;
margin: 0px;
//強制顯示大頭貼if profile_picturesize >= 0{display: unset!important;}
/*隱藏大頭貼*/
if hide_pic {display: none!important;}
}
/*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 0x 0px ;
padding: 0px 0px 0x 0px ;
width: emoji_size;
height: emoji_size;
line-height: emoji_size;
align-self: center;//垂直對齊：中間
align-items: center;
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 ;
}
/*superchat*/
yt-live-chat-paid-message-renderer #message.yt-live-chat-paid-message-renderer {
padding: 0px;
margin: -0px -0px -0px -0px ;
font-size: message_fontsize;
line-height: message_fontsize;
letter-spacing:0.5px;/*字元間距*/
}
/*放大透明化_SC+會員每月留言+贈送會員外框+SC貼圖*/
if superchat_size {
yt-live-chat-paid-message-renderer,yt-live-chat-membership-item-renderer {
margin: 0px -0px -0px -0px!important ;
padding: 2px 5px;
opacity:0.8;
line-height:1em;
& > #card {
position: relative;//相對位置
//align-items: center;//置中背景不填滿
//SC+每月上半部
& > #header {padding: 2px 10px!important;min-height:32px;}
//SC+每月下半部
& > #content {padding: 0px 5px 3px 5px !important; font-size: message-font-size;}
}
}
//喜歡按鈕
yt-live-chat-like-button-view-model {
position: fixed;//absolute
right:2em;
top:5px;
}
//贈送會員外框
#header.ytd-sponsorships-live-chat-header-renderer{
min-height:10px;
opacity:0.7;
position: relative;//相對層級
z-index:100;
& > yt-img-shadow,& > yt-img-shadow img{height: 50px;width: 50px; position: absolute;z-index:-100;right:0px;}
}
//SC貼圖(大頭貼)
yt-live-chat-paid-sticker-renderer {opacity:0.8;margin: 0px -0px -0px -0px;
& > #card{
yt-img-shadow , yt-img-shadow img{max-height: 50px;max-width: 50px;}
}
}
}
/*message聊天斷行*/
if message_pr {
yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer #message.yt-live-chat-text-message-renderer {
display: block;
}}
/*message+聊天行距*/
yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer
#message.yt-live-chat-text-message-renderer {
padding: 0px 0px 0px 0px!important;
margin: text_pr 0px text_pr 0px!important;
font-size: message_fontsize;
line-height: message_fontsize;
align-items: center;//大頭貼垂直置中
vertical-align: middle;//文字垂直置中
//letter-spacing:0.5px;//字元間距
//align-self: center;//垂直對齊：中間
//text-align:justify;//左右對齊
/*文字陰影+模糊_右上-左上-左下-右下+短模糊*4*/
if font_shadow >= 0.5 {
text-shadow: 0.5px -0.5px font_shadow font_shadow_color, -0.5px -0.5px font_shadow_color, -0.5px 0.5px font_shadow font_shadow_color, 0.5px 0.5px font_shadow font_shadow_color,
0 0 0.5px font_shadow_color2, 0 0 0.5px font_shadow_color2, 0 0 0.5px font_shadow_color2, 0 0 0.5px font_shadow_color2;
}//font-weight:bold;
/*
html[dark][data-ytlstm-overlay-text-shadow][data-ytlstm-chat-over-video] yt-live-chat-text-message-renderer #content{
text-shadow: black 1px 1px 1px, black -1px -1px 1px, black 1px -1px 1px, black -1px 1px 1px;
}
*/
}
/*name字體*/
yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer yt-live-chat-author-chip.yt-live-chat-text-message-renderer {
display: inline-flex;
flex-direction: row;
margin: 0px 0px 0px 0px!important;
padding: 0px 0px 0px 0px;
letter-spacing: 0px;//間距
text-shadow: -0.5px 0.5px #000;
font-size: name_size;
line-height: name_size;
vertical-align: center;//垂直對齊：中間
--yt-live-chat-sponsor-color: #71ff8c;//會員名稱顏色
--yt-live-chat-secondary-text-color: #ddd; //一般名稱顏色
}
/*timestamp*/
#timestamp.yt-live-chat-text-message-renderer {
font-size: timestamp_fontsize;
margin-right: 5px;
vertical-align: middle;
letter-spacing:0px;//間距
}
/*打字區input縮緊固定*/
if input_down {
//input總區塊
//舊版#input-panel.yt-live-chat-renderer.iron-selected {}
html #panel-pages.yt-live-chat-renderer > #input-panel.yt-live-chat-renderer.iron-selected > *:first-child{
padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px;
//min-height:3.6em;
//height:2.6em!important;
}
//input打字輸入區
//yt-live-chat-message-input-renderer {overflow: hidden;}//隱藏卷軸元素不消除佔位
#input-container.yt-live-chat-message-input-renderer{
margin:0px -0px -0px 35px;
padding: 0px 0px 0px 0px;
height:3em;
//min-height:3em;
}
#input.yt-live-chat-text-input-field-renderer{
min-height:1.6em;
line-height:1em;
padding: 10px 0px 0px 0px;
margin:0px -0px 0px 0px;
background-color:rgba(250, 200, 200, .2);
border-radius: 5px;
font-size:20px!important;
}
//input名字
#input-container > yt-live-chat-author-chip {display: none;}
//input貼圖框架
#buttons.yt-live-chat-message-input-renderer {margin:-0px 0px -0px 0px;}//,.yt-icon-container.yt-icon
//input右邊圖
#message-buttons.yt-live-chat-message-input-renderer {display: none;}
//input頭像
#avatar.yt-live-chat-message-input-renderer {display:none;}//margin:0px 50px -0px 0px ;visibility:hidden;display:block;
//input貼圖按鈕+SC按鈕
#button.yt-live-chat-icon-toggle-button-renderer {
margin:-0px 0px -0px -0px;
background-color:rgba(120, 3, 23, .2);
position: fixed;//absolute
z-index:10;
left:0px;
bottom:0px;
}
#input-container.yt-live-chat-message-input-renderer yt-live-chat-text-input-field-renderer.style-scope.yt-live-chat-message-input-renderer + #emoji-picker-button {
position: absolute;
}
button.yt-icon-button{}
yt-live-chat-icon-toggle-button-renderer#emoji>#button.yt-live-chat-icon-toggle-button-renderer{}
yt-live-chat-message-input-renderer[system-icons] #picker-buttons.yt-live-chat-message-input-renderer>*.yt-live-chat-message-input-renderer{
margin:0px -0px 0px -0px;
}
//SC按鈕(YT設定打字時會隱藏)//#input-panel
#picker-buttons .yt-live-chat-icon-toggle-button-renderer{
margin:0px -0px 0px 0px;
position: relative;
z-index:10;
left:0px;
}
//貼圖框設定
yt-emoji-picker-renderer.yt-live-chat-message-input-renderer {margin:-0px -0px -0px -20px;min-height:300px!important;}//display:inline-flex;
#pickers.yt-live-chat-message-input-renderer{
background-color:rgba(0, 0, 0, 1);
margin:0px -0px -0px 0px;
position: absolute;
z-index:0;
left:0px;
right:0px;
bottom:40px;
}
//貼圖框內-會員貼圖放大(加會員前/後)
#emoji.yt-emoji-picker-upsell-category-renderer img {height:emoji_member;width:emoji_member;padding:0px 2px;margin:0px;}//加會員前
#emoji.CATEGORY_TYPE_CUSTOM.style-scope.yt-emoji-picker-category-renderer img {height:emoji_member;width:emoji_member;padding:0px 2px;margin:0px;}
//貼圖框內-一般貼圖
#emoji.yt-emoji-picker-category-renderer img {padding:1px emoji_normal;}
//貼圖框內
#categories-wrapper.style-scope.yt-emoji-picker-renderer{margin:0px -0px 0px -0px; ::-webkit-scrollbar{display: none;}}
//貼圖框內-文字搜尋
#search-panel.style-scope.yt-emoji-picker-renderer{display:inline-flex;height:10px;margin:-0px 0px -0px 10px!important;}
//貼圖框內-分類
#category-buttons.style-scope.yt-emoji-picker-renderer{margin:-20px -100px 0px 0px;}
//貼圖框內-標題
#title.style-scope.yt-emoji-picker-category-renderer{padding:0;margin:-10px 0px -5px 0px;opacity:0.3;background-color:rgba(216, 192, 192, .3);}
}
//聊天室Y卷軸隱藏
if chat_scroll {
::-webkit-scrollbar {display: none;}//#item-scroller.yt-live-chat-item-list-renderer
//針對新版chrome在YT框架內優先設定
html {
scrollbar-color: auto !important;
scrollbar-width: auto !important;
}
}
/*name斷行*/
if name_pr {
yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer {
//斷行聊天室格式 複數行に渡るチャットユーザー名＆メッセージを真ん中に揃える、餘白を詰める
& > #content {
width: 100%;display: inline-flex;align-items: center;
& > yt-live-chat-author-chip {
align-items: center;
margin: 0px -0px 0px -0px;
position: relative;//相對層級100
z-index:100;
// 用戶名格式チャットユーザー名 - 幅を固定＆小さくすることでメッセージを見やすくする
& > #author-name {
max-width: 4em;
font-size: 15px;
max-height: 1.5em;
line-height: 1em;
word-break: break-word;//名稱破行自動斷行break-all//keep-all//word-wrap: break-all;
//align-items: baseline;//center
border-top: 0.1px solid;
}}}}
//斷行的 profile picture
#author-photo.yt-live-chat-text-message-renderer,
#author-photo.yt-live-chat-text-message-renderer > img {
margin: 0px;
opacity:0.9;
}
//斷行的 badge會員徽章
img.yt-live-chat-author-badge-renderer, yt-icon.yt-live-chat-author-badge-renderer {
margin: -0px -0px 0px -15px ;
opacity:0.4;
position: relative;//相對層級-10
z-index:-10;
}
//斷行的 顯示破框name
#items yt-live-chat-text-message-renderer{contain: layout style;}
}
/*name靠右*/
if name_pr2 {
yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer {
& > #content > yt-live-chat-author-chip {
max-width:10em;
max-height:1em;
line-height: 1em;
word-break:break-all ;//名稱破行自動斷行break-all//keep-all//word-wrap: break-all;break-word;
align-items: stretch ;
margin: 0px -0px 0px 0px;
padding:0;
position: absolute;
z-index:0;
right:0px;//top:1em;
bottom: 0em;
opacity:0.8;
}}
}
/*訊息置頂透明度*/
yt-live-chat-banner-manager[has-active-banner]{
opacity:chat_top;
margin: 0px 0px 0px 0px !important;
padding: chat_tophead 0px 0px 0px;
text-shadow: -0.5px 0.5px #000;
if chat_top ==0{display:none;}
}
//投票調查表隱藏
if hide_survey {#contents > yt-live-chat-poll-renderer {display:none;}}
//置頂意見調查#contents.yt-live-chat-banner-renderer{display:none;}
/*name+徽章隱藏*/
if hide_user_name {
yt-live-chat-text-message-renderer > #content > yt-live-chat-author-chip > #author-name {display: none !important;}
img.yt-live-chat-author-badge-renderer, yt-icon.yt-live-chat-author-badge-renderer {display: none !important;}
}
/*YT提醒+愛心動畫隱藏*/
if hide_reaction {
//YT剛進入LIVE在聊天室的提醒文字
yt-live-chat-viewer-engagement-message-renderer.yt-live-chat-item-list-renderer {display: none;}
//愛心動畫#chat > #reaction-control-panel-overlay.yt-live-chat-renderer {display: none;}
#reaction-control-panel.yt-reaction-control-panel-overlay-view-model {display: none;}
//YT輸入提醒框//yt-tooltip-renderer是包含所有的提醒
#content.yt-tooltip-renderer,#Wrapper.tp-yt-iron-dropdown ,yt-tooltip-renderer{display: none;}
}
/*貼圖註解隱藏_chat貼圖-SC貼圖-會員徽章-每月會員*/
if hide_tooltip {
tp-yt-paper-tooltip.style-scope.yt-live-chat-text-message-renderer[role="tooltip"],
tp-yt-paper-tooltip.style-scope.yt-live-chat-paid-message-renderer[role="tooltip"],
tp-yt-paper-tooltip.style-scope.yt-live-chat-author-badge-renderer[role="tooltip"] ,
tp-yt-paper-tooltip.style-scope.yt-live-chat-membership-item-renderer[role="tooltip"],
{display: none;}
}
/*SC倒數計時調整*/
if hide_sc_head {
yt-live-chat-ticker-renderer.style-scope.yt-live-chat-renderer {max-height:0px;margin: -0px -0px -0px 0px;background:rgba(0, 0, 0, 0);opacity:0.7;
if sc_head == 0{display:none;}
}
/*每月會員計時背景調整*/
#content.yt-live-chat-ticker-sponsor-item-renderer{max-height:10px;margin: -0px -0px -0px 0px;}
#text.yt-live-chat-ticker-sponsor-item-renderer{margin: -0px -0px 0px 5px;}
/*SC計時背景調整*/
#content.yt-live-chat-ticker-paid-message-item-renderer{max-height:10px;margin: -0px -0px -0px 0px;}
#username-text.yt-live-chat-ticker-paid-message-item-renderer{margin: -0px -0px -0px 0px;}
#container.run-ticker, yt-live-chat-ticker-renderer[class] #content,#items[class] > *[class] > #container.run-ticker[class ]{max-height:sc_head;margin: -0px -0px -0px 0px;}
}
}