Kaiteki YouTube Chat by hihumi12

/* ==UserStyle==
@name           Kaiteki YouTube Chat
@namespace      stylus/hihumi12/kaiteki-youtube-chat
@version        1.5.3
@description    YouTube生放送のチャット欄を見やすくします　Makes the chat section of YouTube live broadcasts more visible.
@author         hihumi12 (https://twitter.com/hihumin12)
@license        CC0 1.0
@preprocessor   stylus

@var checkbox emphasize_moderator  'モデレータを強調' 1
@var checkbox hide_user_name  'ユーザー名を非表示' 0
@var checkbox hide_reaction 'リアクションを非表示' 0
@var checkbox hide_playlist 'プレイリストを非表示' 0
@var number   chat_width  "チャット欄の幅（px）" [500, 0, 1000, 10, "px"]
@var number   chat_emoji_height  "絵文字入力欄の高さ（px）" [380, 230, 700, 10, "px"]
@var select milestone_chat "マイルストーンチャット" {
    "all:デフォルト表示 *": "all",
    "plain:目立たない表示": "plain",
    "normal_chat:通常チャット表示": "normal_chat"
}
@var select display_chat "チャットの表示" {
    "all:全て表示 *": "all",
    "only_member:メンバーのみ": "only_member",
    "only_moderator:モデレータのみ": "only_moderator"
}
==/UserStyle== */

@-moz-document url-prefix("https://www.youtube.com/watch?"), url-prefix("https://www.youtube.com/live/") {
    /* --------------------------------------------------------------- */
    /* 動画プレイヤー＆チャット欄 */
    
    #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;
        }
    }
    
    #secondary-inner {
        /* プレイリスト表示がない画面 */
        &:not(:has(ytd-playlist-panel-renderer#playlist[has-playlist-buttons])) {
            /* チャット欄の高さを画面一番下まで伸ばす */
            ytd-live-chat-frame#chat {
                height: calc(100vh - 56px) !important;
                min-height: calc(100vh - 56px) !important;
            }
        }
        /* プレイリスト表示がある画面 */
        &:has(ytd-playlist-panel-renderer#playlist[has-playlist-buttons]) {
            & > ytd-playlist-panel-renderer#playlist {
                margin-bottom: 10px;
            }
            /* チャット欄の高さを閉じたプレイリスト分調整 */
            ytd-live-chat-frame#chat {
                height: calc(100vh - 134px) !important;
                min-height: calc(100vh - 134px) !important;
            }
        }
    }
    
    /* --------------------------------------------------------------- */
    /* プレイリストを非表示にする */
    if hide_playlist {
        #secondary-inner > ytd-playlist-panel-renderer#playlist {
            display: none;
        }
    }
}

@-moz-document url-prefix("https://www.youtube.com/live_chat"), url-prefix("https://www.youtube.com/live/") {
    /* --------------------------------------------------------------- */
    /* チャット欄　共通 */

    yt-live-chat-text-message-renderer {
        /* チャットメッセージ全体をコンパクトにする */
        padding: 0px 12px;
        font-size: 13px;
        align-items: center;
        
        /* 複数行に渡るチャットユーザー名＆メッセージを真ん中に揃える、余白を詰める */
        & > #content {
            width: 100%;
            display: flex;
            align-items: center;
            
            & > yt-live-chat-author-chip {
                align-items: center;
                margin-right: 3px;
                
                /* チャットユーザー名 - 幅を固定＆小さくすることでメッセージを見やすくする */
                & > #author-name {
                    width: 90px;
                    font-size: 11px;
                    max-height: 2em;
                    line-height: 1em;
                    word-break: break-all;
                }
                
                /* チャットユーザー名 - 一般チャットにメンバーバッジ空間を空けることで位置を揃える */
                & > #chat-badges {
                    min-width: 18px;
                }
            }
            
            /* スタンプ・絵文字を少し大きく表示する（未使用） */
            /* & > span#message > img.emoji {
                width: 26px;
                height: 26px;
            } */
        }
        
        /* チャットユーザーアイコン - 余白を詰める  */
        & > yt-img-shadow {
            margin-right: 6px !important;
            
            /* アイコン画像 */
            & > img {
                /* 少し大きくする */
                height: 26px;
                width: 26px;
            }
        }
    }
    
    /* チャット絵文字入力欄 */
    yt-live-chat-message-input-renderer[emoji-open] {
        height: chat_emoji_height;
        yt-emoji-picker-renderer {
            height: "calc(%s - 100px)" % chat_emoji_height;
            max-height: none;
        }
    }
    

    /* --------------------------------------------------------------- */
    /* スーパーチャット */
    yt-live-chat-paid-message-renderer {
        padding: 0 5px !important;
        
        & > #card {
            /* 上部 */
            & > #header {
                padding: 1px 5px;
                
                /* ユーザーアイコン */
                & > #author-photo,
                & > #author-photo > img {
                    width: 36px;
                    height: 36px;
                }
                
                /* ユーザー名＆金額部分 */
                & > #header-content > #header-content-primary-column {
                    /* 金額表示を右側に移動 */
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    width: 100%;
                    
                    /* ユーザー名 */
                    & > #author-name {
                        font-size: 13px;
                    }
                }
            }
            /* 下部 */
            & > #content {
                /* 余白を詰めてフォントを小さくする */
                padding: 3px 10px;
                font-size: 12px;
            }
        }
    }
    

    /* --------------------------------------------------------------- */
    /* スーパーステッカー */
    yt-live-chat-paid-sticker-renderer {
        padding: 0 5px !important;
        
        & > #card {
            padding: 1px 5px !important;
            
            /* 名前 */
            & > #author-info > #content > #content-primary-column > #author-name {
                font-size: 13px;
            }
            
            /* ステッカー画像 */
            & > #sticker-container > yt-img-shadow > img {
                /* 小さくする */
                width: 50px;
                height: 50px;
            }
        }
    }
    
    
    /* --------------------------------------------------------------- */
    /* メンバーシップ関連メッセージ */
    yt-live-chat-membership-item-renderer {
        padding: 0 5px;
        
        & > #card {
            /* メンバーシップ加入メッセージ または マイルストーンチャット上部 */
            & > #header {
                /* 余白を詰める */
                padding: 1px 8px;

                /* ユーザーアイコン */
                & > #author-photo,
                & > #author-photo > img {
                    /* 少し小さくする */
                    width: 36px;
                    height: 36px;
                }

                /* ユーザー名＆加入メッセージ部分 */
                & > #header-content > #header-content-primary-column {
                    /* ユーザー名とメッセージを左右に並べる */
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    width: 100%;

                    & > #header-content-inner-column,
                    & > #header-subtext {
                        /* フォントを小さくする */
                        font-size: 12px;
                    }
                }
            }
            /* マイルストーンチャット下部 */
            & > #content {
                /* 余白を詰めてフォントを小さくする */
                padding: 3px 10px;
                font-size: 12px;
            }
        }
    }

    
    /* --------------------------------------------------------------- */
    /* チャンネルユーザーのチャット */
    yt-live-chat-text-message-renderer[author-type="owner"] {
        background: #d0ecf1;
        /* padding: 20px 4px; */
        
        & > #content > span#message {
            color: #222;
        }
    }

    /* 上部に固定されたチャンネルユーザーのチャット */
    #contents > yt-live-chat-text-message-renderer {
        /* 上部固定をすると見た目が変わるため、各種スタイルを打ち消す必要がある */
        &[author-type="owner"] > #content > span#message {
            color: #f5f5f5;
            text-shadow: 1px 1px 0px #000;
        }
        & > #content > yt-live-chat-author-chip > #author-name {
            width: auto;
            max-height: none;
        }
        & > #content > yt-live-chat-author-chip > #chat-badges {
            min-width: auto;
        }
    }

    
    /* --------------------------------------------------------------- */

    /* モデレータを強調 */
    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] {
            paddi...