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

1. 安裝火狐附加元件:
**Stylus**
https://addons.mozilla.org/zh-TW/firefox/addon/styl-us/?src=search

2. 用火狐開啟**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

3. 火狐切換到**電腦版顯示** (很重要,yt會擋手機版畫面,不切的話畫面會空白一片)

4. 設定**Stylus過濾條件:**
選 `匹配正則表示式的網址`

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

5. 修正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已經被火狐黑名單,別再使用

* [瀏覽器擴充程式Stylish化身間諜程式，擅自蒐集用戶瀏覽歷史紀錄遭下架](https://www.ithome.com.tw/news/124338)
* [Blocklist Stylish add-on - sends full page urls to remote server](https://bugzilla.mozilla.org/show_bug.cgi?id=1472948)
* [瀏覽器套件Stylish竊取使用者所有瀏覽記錄](https://www.ptt.cc/bbs/Browsers/M.1530679789.A.FC1.html)

## 意見反應

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

###### tags: `css`, `OBS`