Youtube直播聊天室CSS修正 (手機版火狐瀏覽器)

安裝火狐附加元件:
Stylus
https://addons.mozilla.org/zh-TW/firefox/addon/styl-us/?src=search
用火狐開啟Youtube聊天室網址:

假設你的直播房網址長這樣:
https://www.youtube.com/watch?v=直播亂數編號

那你的聊天室網址就長這樣(等同彈出視窗的網址):
https://www.youtube.com/live_chat?v=直播亂數編號

or 黑暗模式(如果你要暗色系樣式的話可以在結尾加 &dark_theme=1 ,這樣可以少改一點CSS):
https://www.youtube.com/live_chat?v=直播亂數編號&dark_theme=1

火狐切換到電腦版顯示 (很重要,yt會擋手機版畫面,不切的話畫面會空白一片)
設定Stylus過濾條件:
選 匹配正則表示式的網址

^https://www.youtube.com/live_chat(.*?)

修正CSS (2020.09.04更新)
更新後顏色的部份是拿黑暗模式的版本下去改
如果還要改顏色的話就把/*註解*/部份拿掉
























































/*字體*/
body {
    font-family: "Microsoft JhengHei", Arial, 'LiHei Pro', Helvetica, sans-serif;
}

/*字體大小*/
yt-live-chat-text-message-renderer, 
yt-live-chat-paid-message-renderer, 
#author-name.yt-live-chat-paid-message-renderer {
    font-size: 5vmin;
    /* 覺得字體太大的話可以調小一點, 5vmin === 螢幕短邊的5%寬度 */
    /* 可以使用小數點,例如: 4.8vmin */
}

/*聊天框背景色-一般*/
#contents {
    /*background-color: #000;*/
}
/*聊天框背景色-台主*/
yt-live-chat-text-message-renderer[is-highlighted] {
    /*background-color: #000;*/
}

/*留言者名稱顏色-一般*/
#author-name {
    color: yellow !important;
}
/*留言者名稱顏色-台主*/
#author-name[type="owner"].yt-live-chat-author-chip {
    /*color: #000 !important;*/
}
/*留言者內容文字顏色*/
#message {
    /*color: white !important;*/
}

/*上方標題列(上方選擇重要留言或所有留言的位置)*/
yt-live-chat-header-renderer {
    /*background-color: #000;*/
}
paper-button #label-text {
    /*color: white !important;*/
}

/*留言輸入框*/
yt-live-chat-message-input-renderer {
    /*background-color: #000;*/
}
.yt-live-chat-text-input-field-renderer {
    /*color: white !important;*/
}

/*隱藏輸入留言的部份,如果想保留輸入框就不要加這條*/
.yt-live-chat-message-input-renderer {
    /*display: none;*/
}

附註

Stylish已經被火狐黑名單,別再使用

意見反應

Discord: https://discord.gg/8njhfp8

Youtube直播聊天室CSS修正 (手機版火狐瀏覽器)

附註

意見反應

tags: css, OBS

tags: `css`, `OBS`