YT chat版面調整

修改YouTube聊天室延伸;字體大小;留言縮緊排版,分類明顯化

当前为 2023-09-03 提交的版本,查看 最新版本

/* ==UserStyle==
@name           YT chat版面調整
@version        1.2
@namespace      1
@license        MIT
@description    修改YouTube聊天室延伸;字體大小;留言縮緊排版,分類明顯化
@author         Leadra
@preprocessor   stylus
@var checkbox   font_shadow1                             "文字輪廓"                                   0
@var checkbox   font_shadow2                             "文字光暈"                                   0
@var range      font_shadow                           "文字陰影"                                   [1.5, 0, 5, 0.5, "px"]
@var checkbox      hide_reaction                 "YT提醒+愛心動畫隱藏"                         0
@var checkbox   chat_pr                                 "name分行"                                                 1
@var checkbox      hide_user_name             "name+徽章隱藏"                                   0
@var checkbox      hide_pic                             "大頭貼隱藏"                                   0
@var checkbox   show-message-lines                  "會員訊息右側綠線條"                    1
@var checkbox   superchat_size                             "SC框放大透明"                                      1
@var checkbox   alternate-background                "交叉背景色"                          1
@var checkbox   chat_scroll                      "chat卷軸隱藏"                          1
@var checkbox   input_down                            "input復原"                          0

@var range     chat_head                   "chat置頂透明"                          [0.8, 0, 1, 0.1]

@var range      message-font-size                   "聊天字體大小"                           [18, 14, 20, 1, "px"]
@var range      name_size                           "name字體大小"                           [14, 0, 20, 1, "px"]
@var range      profile-picture-size                "大頭貼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-font-size                 "時間軸Size"                   [14, 14, 20, 1, "px"]

@var checkbox   chatheight                          "(失效)聊天室延伸(tabview衝突)"                 0
@var number     chat_width                          "(失效)chat欄寬"                         [400, 300, 800, 10, "px"]
==/UserStyle== */
@-moz-document url-prefix("https://www.youtube.com/live_chat") {    //要改回才能調整聊天室https://www.youtube.com/watch?v=

    /* --------------------------------------------------------------- */
    // 動画プレイヤー&チャット欄
    #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;
                }}}       
/* chat聊天欄位_寬度コメント欄の幅を指定の幅にする */
        & > #secondary {
            width: chat_width;
        }}
    // チャット欄を画面一番下まで伸ばす 聊天室延伸(tabview腳本衝突)
if chatheight{ ytd-live-chat-frame#chat {
                height: calc(100vh *0.92) !important; /* height: calc(100vh - 100px) !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: rgba(87, 64, 64, .17);        /* var(--yt-spec-general-background-c); */
    }}
/* 板手+版主強調背景色 */
        yt-live-chat-text-message-renderer[author-type="moderator"] {
            padding: 2px 12px;
            background: rgba(7, 5, 255, .3);
            & > #content > span#message {
                color: #fff;
            }
        }
yt-live-chat-text-message-renderer[author-type="owner"] {
                        background-color: rgba(239, 239, 0, .3);
                    }
        /* 版主聊天置頂復原樣式_上部固定をすると見た目が変わるため、各種スタイルを打ち消す必要がある*/
        //#contents > yt-live-chat-text-message-renderer[author-type="moderator"]  {            background-color: #d40213 !important;}/* message lines會員訊息右側線條 */
    if show-message-lines {
        yt-live-chat-text-message-renderer {
/*會員左右邊界線條*/           
//border-left: left-message-line solid;
            border-left: 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);     /* 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-picture-size;
        height: profile-picture-size;
        margin: 0px;
        padding: 0px;
        align-self: center;
/*隱藏大頭貼*/
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 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 ;
        padding: 0px;   
    }
/* header聊天室頂部欄位 */
    yt-live-chat-header-renderer {
        padding: 0px;   
    }
/*superchat*/
       yt-live-chat-paid-message-renderer #message.yt-live-chat-paid-message-renderer {
    padding: 0px;
    margin: -5px -10px -5px -10px ;
    font-size: message-font-size;
    line-height: message-font-size+1px;
    letter-spacing:0.5px;/*字元間距*/
    }
/*SC+會員每月留言外框*/
if superchat_size{  
    yt-live-chat-membership-item-renderer , yt-live-chat-paid-message-renderer,ytd-sponsorships-live-chat-header-renderer,
yt-live-chat-paid-message-renderer[allow-animations] #content.yt-live-chat-paid-message-renderer, yt-live-chat-paid-message-renderer[allow-animations] #header.yt-live-chat-paid-message-renderer{
    padding: 5px 10px 5px 15px;
    margin: 0px -0px -0px -0px ;
    opacity:0.9;   //background-color:rgba(7, 124, 136, .71)
   }
   //#author-photo.yt-live-chat-paid-message-renderer{width: badge-size*2;height: badge-size*2;   }
              }

/* message */
    //yt-live-chat-text-input-field-renderer , #content.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: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px ;
    font-size: message-font-size;
    line-height: message-font-size+1px;
    letter-spacing:0.5px;//字元間距
if font_shadow1 {
    text-shadow:  -1px  1px #06f, 1px 1px #06f,1px 0 #06f, 0  -1px #06f;//陰影輪廓
}
if font_shadow2{
    text-shadow: 0 0 font_shadow #06f, 0 0 font_shadow #06f, 0 0 font_shadow #06f, 0 0 font_shadow #06f,
 0 0 1px #036, 0 0 1px #036, 0 0 1px #036, 0 0 1px #036;
       font-weight:bold;
    //text-shadow: 0 0 0.1em #000, 0 0 0.1em #000,0 0 0.1em #000;//陰影發光
}}

if chat_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 {
                    width: 45px;
                    font-size: 15px;
                    max-height: 1.7em;
                    line-height: 1em;
                    word-break: break-word;//名稱破行自動斷行break-all
                    //margin: 0px 0px 0px 0px;
                    //padding: 0px;
                    //align-items: baseline;//center
                    //letter-spacing:-0px;//字元間距
                /*   text-shadow: 
                    0 0 font_shadow #0009, 0 0 font_shadow #0009, 0 0 font_shadow #0009, 0 0 font_shadow #0009,
                    0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff;
                    font-weight:bold;*/
}}}}
/*分行的 profile picture */
    #author-photo.yt-live-chat-text-message-renderer,
    #author-photo.yt-live-chat-text-message-renderer > img {
        margin: 0px;
        opacity:0.9;
        align-self: center;
   }
/*分行的 badge會員徽章 */
    img.yt-live-chat-author-badge-renderer, yt-icon.yt-live-chat-author-badge-renderer {
        margin: -0px -0px 0px -15px ;
        padding: 0px;   
        opacity:0.4;
        position: relative;//相對層級-10
        z-index:-10;
            }
/*分行的 顯示破框name*/
             #items yt-live-chat-text-message-renderer{ // weak selector
        contain: layout style;
    }
        }
/*  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: 0px 2px 0px 0px;
    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-font-size;
        margin-right: 5px;
        vertical-align: middle;
       letter-spacing:0px;//間距
    }
/* input打字輸入區 */
    yt-live-chat-message-input-renderer {
        padding: 0px 0 5px 0px;
        margin:0px 0px 0px -5px;
        overflow: hidden;
        background-color:rgba(255, 53, 53, .1)
    }
/*input區塊*/
#input-panel.yt-live-chat-renderer.iron-selected {
    padding: 0px 0 0px 0px;
    margin:0px 0px -0px 0px;
    overflow: hidden;
}
/*input名字*/
#input-container > yt-live-chat-author-chip {display: none;}
/*input貼圖+SC按鈕*/
yt-live-chat-icon-toggle-button-renderer {
    margin:-30px -0px -25px 0px;
    background-color:rgba(120, 3, 23, .2);
//圖標重複yt-icon, .yt-icon-container.yt-icon {display: flex;}
}
/*input貼圖框架*/
#buttons.yt-live-chat-message-input-renderer ,.yt-icon-container.yt-icon {margin:-10px 0px -0px 0px;}
/*input右邊圖*/
#message-buttons.yt-live-chat-message-input-renderer { display: none; }
/*input頭像*/
#avatar.yt-live-chat-message-input-renderer {margin:0px 45px -0px 0px ;visibility:hidden;display:block;}
//貼圖框
yt-emoji-picker-renderer.yt-live-chat-message-input-renderer {display:inline-flex;height:250px;}
/*貼圖內框*/
#categories-wrapper.style-scope.yt-emoji-picker-renderer{ margin:0px 0px 20px -7px ;}
/*貼圖內框-文字搜尋*/
#search-panel.style-scope.yt-emoji-picker-renderer{ display: none;}
/*貼圖內框-分類*/
#category-buttons.style-scope.yt-emoji-picker-renderer{margin:-20px 0px 0px 0px;}
/*貼圖內框-標題*/
#title.style-scope.yt-emoji-picker-category-renderer{margin:-10px 0px -15px 0px;opacity:0.3;background-color:rgba(216, 192, 192, .3)}
/*SC內視窗標題*/
#title.style-scope.yt-live-chat-product-picker-renderer {display: none;}
//chat卷軸
if chat_scroll {#item-scroller.yt-live-chat-item-list-renderer::-webkit-scrollbar { display: none !important; }}
//未知iron-input.tp-yt-paper-input > input.tp-yt-paper-input{display: none;height:20px;}
if input_down {
    /*input貼圖框架*/
#buttons.yt-live-chat-message-input-renderer ,.yt-icon-container.yt-icon {margin:15px 0px -0px 0px;}
/*input右邊圖*/
#message-buttons.yt-live-chat-message-input-renderer { display: none; }
/*input頭像*/
#avatar.yt-live-chat-message-input-renderer {margin:0px 0px -0px 0px ;visibility:visible;display:block;}
//貼圖框yt-emoji-picker-renderer.yt-live-chat-message-input-renderer {display:inline-flex;height:250px;}
}
//???yt-live-chat-author-chip #style-scope {display:none;}
/*聊天置頂*/
yt-live-chat-banner-manager[has-active-banner]{ opacity:chat_head;
text-shadow:  -0.5px  0.5px #000;
}
/* 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-chat-viewer-engagement-message-renderer.yt-live-chat-item-list-renderer {display: none;}
        #chat > #reaction-control-panel-overlay.yt-live-chat-renderer {display: none;}}    
    }

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址