YT Theater Chat

YouTube Livestreams Theater Mode ---css fix for反向修正擴充的CSS

目前为 2023-11-16 提交的版本。查看 最新版本

/* ==UserStyle==
@name           YT Theater Chat
@namespace      1
@version        1.1
@description    YouTube Livestreams Theater Mode ---css fix for反向修正擴充的CSS
@author         hihumi12 / Leadra
@license        MIT
@preprocessor   stylus
@var range      text_pr                "聊天行距"                           [0, 0, 10, 1, "px"]

@var checkbox theater_chat  '劇場模式chat邊界' 1
@var checkbox user_pic  '劇場模式大頭貼顯示' 1
@var checkbox input_set  'input打字區調整' 0
@var checkbox emphasize_moderator  '版主強調' 0
@var checkbox hide_user_name  'name非表示' 0
@var checkbox hide_reaction '愛心❤❤❤非表示' 0
@var select milestone_chat "會員免費留言框" {
    "all:預設 *": "all",
    "plain:簡約": "plain",
    "normal_chat:同chat": "normal_chat"
}
@var select display_chat "chat分類" {
    "all:全て表示 *": "all",
    "only_member:僅會員": "only_member",
    "only_moderator:僅版主": "only_moderator"
}
==/UserStyle== */

@-moz-document url-prefix("https://www.youtube.com/live_chat") {
    /* --------------------------------------------------------------- */
/*YouTube Livestreams Theater Mode 邊界調整*/
if theater_chat {
[data-ytlstm-theater-mode] yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer {
        margin: -0px -0px -0px -10px ;
}
/*
 #items {
    padding: 0px 0px 0px -0px !important;
    margin: -0px -0px -0px -0px !important;
}*/
/*聊天行距*/
 #items > * {padding: 0px 0px 0px 10px !important;margin: text_pr -0px -0px -10px !important;}

/*相容tabview後規則失效-使用上面的items全面更改
[data-ytlstm-theater-mode] yt-live-chat-text-message-renderer.yt-live-chat-item-list-renderer
#chat #items .yt-live-chat-text-message-renderer {padding: 0px 0px 0px 0px;margin: 0px 0px -0px -0px ;}*/
[data-ytlstm-theater-mode] 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: 10px 0px -0px -0px ;}

    [data-ytlstm-chat-over-video] yt-live-chat-text-message-renderer #content {
  padding: 0px;
    margin: 0px 0px -0px -0px ;
  border-radius: 10px;
}
 /* 大頭貼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 {
        margin: 0px;
        /*強制顯示大頭貼*/
    if user_pic {display: block!important;}
    }
/*chat聊天室框架恢復原設定*/
html:not(:hover)[data-ytlstm-chat-over-video] yt-live-chat-message-input-renderer,
[data-ytlstm-chat-over-video] yt-live-chat-banner-manager,
[data-ytlstm-chat-over-video] yt-live-chat-restricted-participation-renderer,   
html:not(:hover)[data-ytlstm-chat-over-video] #contents #ticker,
html:not(:hover)[data-ytlstm-chat-over-video] #contents #separator ,
html:hover[data-ytlstm-chat-over-video] #contents #ticker,
html:hover[data-ytlstm-chat-over-video] #contents #separator ,
html:hover[data-ytlstm-chat-over-video] yt-live-chat-message-input-renderer,
//html:hover[data-ytlstm-chat-over-video] yt-live-chat-header-renderer,
//html:not(:hover)[data-ytlstm-chat-over-video] yt-live-chat-header-renderer,
{
    display: block!important;
    margin:  -0px;
}
html:hover[data-ytlstm-chat-over-video] yt-live-chat-header-renderer{display: block;}//position: absolute;z-index:1;
html:not(:hover)[data-ytlstm-chat-over-video] yt-live-chat-header-renderer{display: none;}
html:not(:hover)[data-ytlstm-chat-over-video] yt-live-chat-ticker-renderer{display: none!important;}
html:hover[data-ytlstm-chat-over-video] yt-live-chat-ticker-renderer{display: block!important;}

/*chatheader聊天頂部欄位調整*/
yt-live-chat-header-renderer {
    margin:-15px 0px -15px 0px!important;
    padding: unset;
}
    yt-dropdown-menu.yt-sort-filter-sub-menu-renderer {
margin: 10px 0px 0px 0px;
    }
}

    
if input_set{
/*input頭像*/
    //#avatar.yt-live-chat-message-input-renderer {margin:0px 0px -0px 0px !important;visibility:hidden!important;display:block;}
/* input打字輸入區 */
    yt-live-chat-message-input-renderer {
        padding: 0px 0px 0px 0px!important;
        margin:0px 0px 0px -0px!important;
        overflow: unset;//隱藏元素不消除佔位
    }
    /*input總區塊*/
#input-panel.yt-live-chat-renderer.iron-selected {
            background-color:rgba(0, 0, 0,0.1);
    }
    }
/*
yt-live-chat-message-input-renderer ,yt-live-chat-renderer.iron-selected #input #input-container{
  display: unset!important;
      padding: 0px 0px 0px 0px!important;
    margin: 0px 0px -0px -0px!important ;
}*/

    
    /* モデレータを強調 */
    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;
        }
    }

    /* ユーザー名を非表示 */
    if hide_user_name {
        yt-live-chat-text-message-renderer > #content > yt-live-chat-author-chip > #author-name {
            display: none;
        }
    }

    /* リアクションを非表示 */
    if hide_reaction {
        #chat > #reaction-control-panel-overlay.yt-live-chat-renderer {
            display: none;
        }
    }
    
    /* マイルストーンチャットを目立たなくする */
    if (milestone_chat == plain || milestone_chat == normal_chat) {
        yt-live-chat-membership-item-renderer[has-primary-header-text] {
            padding: 2px 12px;
            & > #card {
                position: relative;
                align-items: center;
                
                /* 横並びにする */
                display: flex;
                flex-direction: row;
                box-shadow: none;
                
                /* 上部 */
                & > #header {
                    position: static;
                    width: 142px;
                    padding: 0;
                    background-color: transparent;
                    & > yt-img-shadow,
                    & > yt-img-shadow img{
                        height: 24px !important;
                        width: 24px !important;
                        margin-right: 6px;
                    }
                    /* ユーザー情報 */
                    #header-content > #header-content-primary-column {
                        display: flex;
                        flex-direction: column;
                        #header-content-inner-column {
                            display: flex;
                            flex-direction: column;
                            /* 名前&メンバーバッジ */
                            & > yt-live-chat-author-chip {
                                overflow: hidden;
                                align-items: center;
                                & > #author-name {
                                    width: 90px;
                                    max-height: 3em;
                                    line-height: 1em;
                                    word-break: break-all;
                                    font-size: 11px;
                                    color: rgb(43, 166, 64);
                                }
                                & > #chat-badges {
                                    margin-left: 2px;
                                }
                            }
                            /* メンバー歴 */
                            & > #header-primary-text {
                                font-size: 10px;
                                color: var(--yt-live-chat-primary-text-color,var(--yt-spec-text-primary));
                            }
                            /* メンバー歴:非表示 */
                            if (milestone_chat == normal_chat) {
                                & > #header-primary-text {
                                    display: none;
                                }
                            }
                        }
                        /* メンバーシップ名 */
                        #header-subtext {
                            margin: 0;
                            word-break: break-all;
                            font-size: 10px !important;
                            color: var(--yt-live-chat-primary-text-color,var(--yt-spec-text-primary));
                        }
                        /* メンバーシップ名:非表示 */
                        if (milestone_chat == normal_chat) {
                            #header-subtext {
                                display: none;
                            }
                        }
                    }
                    /* メニュー */
                    & > #menu {
                        position: absolute;
                        right: 0;
                        top: 0;
                    }
                }
                /* 下部 */
                & > #content {
                    width: calc(100% - 142px);
                    margin-left: 2px;
                    padding: 0;
                    background-color: transparent;
                    color: var(--yt-live-chat-primary-text-color,var(--yt-spec-text-primary));
                    font-size: 13px;
                    line-height: 16px;
                }
            }
        }
    }

    
    /* 特定のチャットのみ表示 */
    if (display_chat == only_member) {
        /* メンバーのみ */
        yt-live-chat-text-message-renderer[author-type=""] {
            display: none;
        }
    } else if (display_chat == only_moderator) {
        /* モデレータのみ */
        yt-live-chat-text-message-renderer:not([author-type="moderator"]) {
            display: none;
        }
        /* スパチャ&メンバーシップ加入のメッセージを非表示 */
        yt-live-chat-paid-message-renderer,
        yt-live-chat-membership-item-renderer{
            display: none;
        }
    }
}

QingJ © 2025

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