Greasy Fork is available in English.

YT chat版面調整

聊天室排版修改YouTube Live Chat layout modify

유저 스타일로 설치?
개발자의 추천 스크립트

YouTube Live Borderless는 어떤가요?

유저 스타일로 설치
질문, 리뷰하거나, 이 스크립트를 신고하세요.
/* ==UserStyle==
@name           YT chat版面調整
@version        2.0.5
@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 range      font_shadow            "文字陰影"                    [1.5, 0, 5, 0.5, "px"]
@var color      font_shadow_color      "文字陰影背景色1"              #06f
@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 checkbox   hide_survey            "投票調查隱藏"                1
@var checkbox   hide_reaction          "YT提醒+貼圖註解+愛心隱藏"     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") {
    //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: 1px -1px font_shadow font_shadow_color, -1px  -1px  font_shadow_color, -1px  1px font_shadow font_shadow_color, 1px 1px font_shadow font_shadow_color,
 0 0 1px font_shadow_color2, 0 0 1px font_shadow_color2, 0 0 1px font_shadow_color2, 0 0 1px font_shadow_color2;}//font-weight:bold;
}

/*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;
    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 30px;
    height:2.6em;
    }
    #input.yt-live-chat-text-input-field-renderer{
    min-height:1.6em;
    line-height:1.6em;
    padding: 0px 0px 0px 0px;
    margin:0px -0px -0px 0px;
    background-color:rgba(250, 200, 200, .2);
    border-radius: 5px;
    font-size:1.6em!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;
    }
    //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;}
    //針對新版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: 20px 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;}
    //YT輸入提醒框//yt-tooltip-renderer是包含所有的提醒
    #content.yt-tooltip-renderer,#Wrapper.tp-yt-iron-dropdown  ,yt-tooltip-renderer{display: none;}
    /*貼圖註解隱藏_chat貼圖-SC貼圖-會員徽章-每月會員*/
    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;}
    /*每月會員計時背景調整*/
    #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:10px;margin: -0px -0px -0px 0px;}
    }
}