---
# System prepended metadata
title: Onecomme Theme - EN 5 Year Anniversary
---
---
title: 'Onecomme Theme - EN 5 Year Anniversary'
disqus: soma
---
目錄
===
[TOC]
主題安裝
===
>OneComme主題安裝可通過手動以及設定裡的主題模板導入[color=#3b75c6]
---
## 手動導入：
1. 客製主題一般存放在 %appData%\onecomme\templates\custom，可通過複製文件途徑到文件管理路徑直接訪問。
2. 也可以通過模板所在的文件所在路勁 OneComme -> 右菜單 -> 模板 -> 任何模板 -> 打開文件所在
3. 解壓文件主題的.zip壓縮至templates\custom
4. 注意：文件夾結構需保持 templates\custom\ ==主題名字==
5. 重啟OneComme程序即可生效。
---
## 主題模板導入：
1. 通過OneComme -> 右菜單 -> 模板 導入主題.zip 即可
---
OBS上使用onecomme主題
===
>OBS設置彈幕機和選用主題[color=#3b75c6]
---
1. 獲取onecomme 的URL鏈接：通過點模板預覽獲取鏈接。
2. 此時彈幕會彈跳到瀏覽器並獲得如一下的IP鏈接http://192.168.0.244:11180/templates/custom/mycomme/
3. 避免下次開機因動態IP更換而導致彈幕機失效，可以將IP調整成如以下url
http://==192.168.0.244==:11180/templates/custom/mycomme/
http://==localhost==:11180/templates/custom/mycomme/
4. 在OBS添加一個Browser的資源
5. 填入url，設置寬度需在600px或以上
6. 完成！
---
主題文件結構
===
>文件夾結構[color=#3b75c6]
---
├ 主題文件夾
├demo_chat\ ==【預覽數據】==
├fonts\ ==【字體文件】==
├images\ ==【圖像】==
├presets\ ==【主題預設】==
├animations.css ==【css動畫】==
├config.css ==【主題參數設定】==
├fonts.css ==【字體載入文件】==
├index.html ==【主題結構】==
├Readme.txt ==【操作手冊】==
├script.js ==【js數據類處理】==
├script-Demo.js ==【js預覽數據類處理】==
├script-Normal.js ==【js正常數據類處理】==
├sensitiveWords.json ==【敏感詞庫】==
├style.css ==【主題樣式主文件】==
└thumb.png ==【OneComme主題預覽圖】==
---
主題預覽和正常模式
===
>主題script.js控制彈幕數據。在預覽模式下用戶可預覽主題元素，在調試過程更加便捷。[color=#EFA92A]
---
1. script.js 默認是正常對接各大平台的數據，而script-Demo.js則是用來預覽主題使用。
2. 預覽數據.json存放在**demo_chat**文件夾。
:::danger
#### **切換預覽模式 操作方法**
1. 刪除原有的script.js
2. 複製script-Demo.js
3. 更名複製的js文件為script.js
4. 刷新瀏覽器 或 清楚OBS緩存即可生效。
5. 更換json數據，同等以上概念切換demo_chat裡的文件。
6. 默認文件夾名是 chats.json
7. 可根據想要預覽的彈幕進行更名切換chats.json。
8. 刷新！
:::
:::success
#### **恢復正常模式 操作方法**
1. 刪除原有的script.js
2. 複製script-Normal.js
3. 更名複製的js文件為script.js
4. 刷新！
:::
主題 設定
===
>config.css 本主題所有細節全局性調整文件。可根據自身需要進行調整。[color=#00687C]
---
## **常規 字體設定**
:::warning
字體設定
:::
```css=
/* General Font Setting 常規 字體 樣式 */
--general-font-size: 24px; /* 全局 字體 大小 24px = 1em */
--general-line-height: 1.5; /* 全局 字行 默認 高度 24px x 1.5 */
--general-font-normal: MiSans-Normal; /* 一般 字體 */
--general-font-bold: MiSans-Bold; /* 粗體 字體 */
--general-font-semi-bold: MiSans-Semibold; /* 半粗體 字體 */
```
| 變量 | 參數 | 說明 |
| -------- | -------- | -------- |
| general-font-size | 24px | 全局字體em單位參考，表示1em=24px |
| general-line-height | 1.5 | 一行字默認高度 1.5x24px= 36px |
| general-font-normal | MiSans-Normal | 一般Font 樣式 |
| general-font-bold | MiSans-Bold | 粗體Font 樣式 |
| general-font-semi-bold| MiSans-Semibold | 半粗體Font 樣式 |
:::info
備註①：==general-font-size== 指定1em的字體單位佔用多少個px，默認情況是16px = 1em,大解析度則 24px = 1em,超大解析度可達到36px = 1em
:::
:::info
備註②：==general-line-height== 指定一行字的高度，當留言變成兩行時，上一行和下一行的間距。
:::
:::info
備註③：==general-font== 採用的字體Front，默認採用主題自帶的自定義字體，也可以套用操作系統上的字體，但名字需準確。例如："Times New Roman"
:::
---
## **常規 字體大小**
:::warning
字體大小
:::
```css=
--username-font-size: 0.9em; /* 暱稱 字體 大小 */
--comment-font-size: 0.9em; /* 留言 字體 大小 */
--comment-font-weight:600; /* 留言 字體 重量 */
--comment-gift-size: 2em; /* 留言 禮物圖 大小 */
--comment-emoji-size: 1em; /* 留言 表情圖 大小 */
--comment-emoji-margin: 0.2em; /* 留言 表情圖 外邊距 */
--member-title-font-size: 1em; /* 會員 字體 標題 大小 */
--member-subtitle-font-size: 0.7em; /* 會員 字體 副標題 大小 */
--gift-text-size: 0.9em; /* 禮物 行 字體 大小 0.1-1.5em */
--sc-paidTextOnly-font-size: 1.2em; /* SC框 價格 字體 大小 0.1-1.5em*/
--sc-paidText-font-size: 0.6em; /* SC框 價格小框 字體 大小 0.1-1.5em*/
--sc-membername-font-size: 0.6em; /* SC 里程碑 粉絲牌 字體 大小 */
--sc-mile-duration-font-size: 0.6em; /* SC 里程碑 訂閱年齡 字體 大小 */
```
| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | username-font-size | 0.9em | 暱稱 字體 大小 em單位|
| 2 | comment-font-size | 0.9em | 留言 字體 大小 em單位|
| 3 | comment-font-weight | 600 | 留言 字體 重量：輕100,200,300,400，一般500，600以上為粗體 |
| 4 | comment-gift-size | 2em | 留言 禮物圖 大小 em單位|
| 5 | comment-emoji-size | 1em | 留言 表情圖 大小 em單位|
| 6 | comment-emoji-margin | 0.2em | 留言 表情圖 外邊距 em單位 |
| 7 | member-title-font-size | 1em | 會員 字體 標題 大小 |
| 8 | member-subtitle-font-size | 0.7em | 會員 字體 副標題 大小 |
| 9 | gift-text-size | 0.9em | 禮物 行 字體 大小 0.1-1.5em |
| 10 | sc-paidTextOnly-font-size | 1.2em | SC框 價格 字體 大小 0.1-1.5em |
| 11 | sc-paidText-font-size | 0.6em | SC框 價格小框 字體 大小 0.1-1.5em |
| 12 | sc-membername-font-size | 0.6em | SC 里程碑 粉絲牌 字體 大小 |
| 13 | sc-mile-duration-font-size | 0.6em | SC 里程碑 訂閱年齡 字體 大小 |
---
```css
--comment-supersticker-size: 80px; /* 留言 YT 超級貼圖 大小 */
```
| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | --comment-supersticker-size | 80px | YT 超級貼圖 大小 px|
---
## **常規 圖源**
:::warning
圖源 路徑
:::
```css=
/* 圖源 */
--img-listener-left-url: url('images/listener2.gif'); /* 圖源 */
--img-listener-right-url: url('images/listener.gif'); /* 圖源 */
--img-icon-youtube-url: url('images/yt.png'); /* YT 圖源 */
--img-icon-twitch-url: url('images/twitch.png'); /* twitch 圖源 */
--img-icon-bilibili-url: url('images/bilibili.png'); /* Bilibili 圖源 */
--img-icon-other-url: url('images/other.png'); /* 其他 圖源 */
```
| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | img-listener-left-url | url() | 飾品 左邊 文件路徑|
| 2 | img-listener-right-url | url() | 飾品 右邊 文件路徑|
| 3 | img-icon-youtube-url | url() | 平台Logo Youtube 文件路徑|
| 4 | img-icon-twitch-url | url() | 平台Logo Twitch 文件路徑|
| 5 | img-icon-bilibili-url | url() | 平台Logo Bilibili 文件路徑|
| 6 | img-icon-other-url | url() | 平台Logo 其他 文件路徑|
---
## **常規 文字內容**
:::warning
文字內容
:::
```css=
/* 文字 禮物&脫換&SC */
--text-yt-act-sponsor: "贈送了"; /* 文字 動作 贈送 YT */
--text-yt-unit-sponsor: "件會籍"; /* 文字 動作 單位 YT */
--text-yt-act-getGift: "獲得贈送會籍"; /* 文字 動作 獲得 YT */
--text-tw-act-sponsor: "投了"; /* 文字 動作 贈送 Twitch */
--text-tw-act-reward: "脫換了"; /* 文字 動作 脫換 Twitch */
--text-tw-act-getMember: "獲得會籍"; /* 文字 動作 獲得會員 Twitch */
--text-tw-cheer-unitName: "小奇點"; /* 文字 SC 貨幣單位 Twitch */
--text-act-congrate: "恭喜"; /* 文字 動作 祝賀 */
--text-tw-name-memberName: "會籍"; /* 文字 會員顯示名稱 Twitch */
--text-bi-currency-unitName: "￥"; /* 文字 SC 貨幣單位 Bilibili */
```
| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | text-yt-act-sponsor | 文字 | YT 投禮物 動作|
| 2 | text-yt-unit-sponsor | 文字 | YT 禮物 名稱|
| 3 | text-yt-act-getGift | 文字 | YT 獲得禮物 動作|
| 4 | text-tw-act-sponsor | 文字 | Twitch 投禮物 動作|
| 5 | text-tw-act-reward | 文字 | Twitch 兌換東西 動作|
| 6 | text-tw-act-getMember | 文字 | Twitch 獲得禮物 動作|
| 7 | text-tw-cheer-unitName | 文字 | Twitch 小奇點 單位|
| 8 | text-act-congrate | 文字 | 全局 祝賀詞|
| 9 | text-tw-name-memberName | 文字 | Twitch 會員 名稱|
| 10 | text-bi-currency-unitName| 文字 | Bilibili SC 單位|
---
## **常規 文字 會員內容**
:::warning
文字 會員 內容
:::
```css=
/* 文字 會員 */
--text-yt-act-member: "加入會員"; /* 文字 動作 成為會員 YT */
--text-tw-act-member: "加入會員"; /* 文字 動作 成為會員 Twitch */
--text-tw-sub1-member: "歡迎訂閱了"; /* 文字 副標題1 成為會員 Twitch */
--text-tw-sub2-member: "個月會籍"; /* 文字 副標題2 成為會員 Twitch */
--text-bi-member-title1: "舰长"; /* 文字 會員 艦長 Bilibili */
--text-bi-member-title2: "提督"; /* 文字 會員 提督 Bilibili */
--text-bi-member-title3: "总督"; /* 文字 會員 總督 Bilibili */
--text-bi-member-sub: "WELCOME!"; /* 文字 會員 副標題 Bilibili */
```
| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | text-yt-act-member | 文字 | YT 加入會員 動作|
| 2 | text-tw-act-member | 文字 | TW 加入會員 動作|
| 3 | text-tw-sub1-member | 文字 | TW 歡迎 動作|
| 4 | text-tw-sub2-member | 文字 | TW 會籍 單位名稱|
| 5 | text-bi-member-title1 | 文字 | B站 會員 舰长 名稱|
| 6 | text-bi-member-title1 | 文字 | B站 會員 提督 名稱|
| 7 | text-bi-member-title1 | 文字 | B站 會員 总督 名稱|
| 8 | text-bi-member-sub | 文字 | B站 會員 副標題|
---
## **常規 大小設定 用戶相關**
:::warning
大小設定 暱稱 徽章
:::
```css=
--name-max-width: 225px; /* 暱稱框 最大 長度 */
--name-min-width: 100px; /* 暱稱框 最小 長度 */
--username-border-size: 4px; /* 暱稱框 邊框 0-6px */
--username-block-top-margin: 0px; /* 暱稱框 上外邊距 -10-10px */
--username-block-left-margin: 85px; /* 暱稱框 上外邊距 0-100px */
--badges-border-size: 3px; /* 徽章 邊框 0-3px */
--badges-block-height: 38px; /* 徽章 上外邊距 30-46px */
```
| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | name-max-width | 225px | 暱稱框 最大 長度 px|
| 2 | name-min-width | 100px | 暱稱框 最小 長度 px|
| 3 | username-border-size | 4px | 暱稱框 邊框 大小 0-6px|
| 4 | username-block-top-margin | 0px | 暱稱框 上外邊距 -10-10px|
| 5 | username-block-left-margin | 85px | 暱稱框 上外邊距 0-100px|
| 6 | badges-border-size | 3px | 徽章 邊框 0-3px|
| 7 | badges-block-height | 38px | 徽章 上外邊距 30-46px|
---
## **常規 大小設定 頭像**
:::warning
大小設定 頭像
:::
```css=
--img-avatar-size: 30px; /* 頭像 大小 */
--img-avatar-border: 3px; /* 頭像 邊框 大小 0-5px */
--img-avatar-right-margin: 1px; /* 頭像 暱稱右邊外邊距 0-10px */
```
| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | img-avatar-size | 30px | 頭像 大小 px|
| 2 | img-avatar-border | 3px | 頭像 邊框 大小 0-5px|
| 3 | img-avatar-right-margin | 1px | 頭像 暱稱右邊外邊距 0-10px|
---
## **常規 大小設定 對話框**
:::warning
大小設定 對話框
:::
```css=
--content-border-size: 5px; /* 對話框 邊框 0-8px */
--content-top-margin: 42px; /* 對話框 上外邊距 30-60px */
--content-left-margin: 55px; /* 對話框 左外邊距 10-120px */
```
| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | content-border-size | 5px | 對話框 邊框 0-8px|
| 2 | content-top-margin | 42px | 對話框 上外邊距 30-60px|
| 3 | content-left-margin | 55px | 對話框 左外邊距 10-120px|
---
## **常規 大小設定 對話框 內邊距**
:::warning
大小設定 對話框 內邊距
:::
```css=
/* 對話框 內邊距 參數順序：Top（上）、Right（右）、Bottom（下）、Left（左） */
--nor-content-padding: 20px 10px 5px 35px; /* 一般 對話框 內邊距 */
--mem-content-padding: 10px 10px 10px 29px; /* 會員 對話框 內邊距 */
--sct-content-padding: 6px 10px 5px 29px; /* SC 對話框 內邊距 */
--oth-content-padding: 6px 10px 5px 29px; /* 其他 對話框 內邊距 */
```
:::info
定義元素邊框與元素內容之間的空間，即上右下左的內邊距。
參數順序：Top（上）、Right（右）、Bottom（下）、Left（左）
:::
| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | nor-content-padding | 20px 10px 5px 35px | 一般 對話框 內邊距 |
| 2 | mem-content-padding | 10px 10px 10px 29px | 會員 對話框 內邊距 |
| 3 | sct-content-padding | 6px 10px 5px 29px | SC 對話框 內邊距 |
| 4 | oth-content-padding | 6px 10px 5px 29px | 其他 對話框 內邊距 |
---
## **常規 大小設定 SC相關 外邊距**
:::warning
大小設定 SC相關 外邊距
:::
```css=
--sc-paidText-right-margin: 5px; /* SC框 價格小框 右邊距離 0-40px*/
--sc-paidText-border-size: 2px; /* SC框 價格小框 邊框 大小 0-40px*/
--sc-membername-left-margin: 5px; /* SC 里程碑 會員名稱 左邊 距離 0-20px*/
--sc-milestone-right-margin: 5px; /* SC 里程碑 訂閱年齡 右邊 距離 0-20px*/
--sc-milestone-bottom-margin: 0px; /* SC 里程碑 訂閱年齡 底部 距離 0-20px*/
```
| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | sc-paidText-right-margin | 5px | SC框 價格小框 右邊距離 0-40px |
| 2 | sc-paidText-border-size | 2px | SC框 價格小框 邊框 大小 0-40px |
| 3 | sc-membername-left-margin | 5px | SC 里程碑 會員名稱 左邊 距離 0-20px|
| 4 | sc-milestone-right-margin | 5px | SC 里程碑 訂閱年齡 右邊 距離 0-20px|
| 5 | sc-milestone-bottom-margin| 0px | SC 里程碑 訂閱年齡 底部 距離 0-20px|
---
## **常規 大小設定 禮物 外邊距**
:::warning
大小設定 禮物 外邊距
:::
```css=
--gift-min-height: 50px; /* 禮物 行 高度 最小值 40-60px */
--gift-top-margin: 16px; /* 禮物 行 邊距 頂部 0-30px */
--gift-bottom-margin: 0px; /* 禮物 行 邊距 底部 0-30px */
--gift-dot-left-margin: 50px; /* 禮物 三點裝飾 邊距 左邊 0-150px */
--gift-dot-size: 7px; /* 禮物 三點裝飾 大小 0-12px */
--gift-dot-special-size: 9px; /* 禮物 三點裝飾 大小 0-12px */
--gift-dot-align-left-margin: 1px; /* 禮物 三點裝飾 視覺對齊 調整 0-5px */
--gift-line-aligment: center; /* 禮物 行 視覺對齊 調整 左(start), 居中(center),右(end) */
--gift-kusa-size: 0.79em; /* 禮物 行 草苗 大小 0.1-1.5em */
--gift-kusa-right-margin: 10px; /* 禮物 行 草苗 右邊 邊距 0-20px */
--gift-image-size: 2em; /* 禮物 行 礼物图 大小 0.1-2.5em */
```
| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | gift-min-height | 50px | SC框 價格小框 右邊距離 0-40px |
| 2 | gift-top-margin | 16px | SC框 價格小框 邊框 大小 0-40px |
| 3 | gift-bottom-margin | 0px | SC 里程碑 會員名稱 左邊 距離 0-20px|
| 4 | gift-dot-left-margin | 5px | SC 里程碑 訂閱年齡 右邊 距離 0-20px|
| 5 | gift-dot-size| 0px | 禮物 三點裝飾 大小 0-12px|
| 6 | gift-dot-special-size| 9px | 禮物 三點裝飾 大小 0-12px|
| 7 | gift-dot-align-left-margin| 1px | 禮物 三點裝飾 視覺對齊 調整 0-5px|
| 8 | gift-line-aligment| center | 禮物 行 視覺對齊 調整 左(start), 居中(center),右(end)|
| 9 | gift-kusa-size| 0.79em | 禮物 行 草苗 大小 0.1-1.5em|
| 10 | gift-kusa-right-margin| 10px | 禮物 行 草苗 右邊 邊距 0-20px|
| 11 | gift-image-size| 2em | 禮物 行 礼物图 大小 0.1-2.5em|
---
主題 預設
===
>本主題具備本體內置預設和外置預設（OBS CSS 預設）[color=#3b75c6]
---
:::info
1. css預設是通過代碼疊層覆寫實現，也就是代碼疊層的情況下，內置預設 （preset.css）的參數將會被外置預設（OBS CSS 預設）覆蓋
2. preset.css 文件是主要預設，文件刪除將導致主題崩壞。
3. OBS置入的CSS則是副預設，可覆寫preset.css的參數。
:::
:::warning
1. **==內置預設==**：preset.css是整個主題的全局預設，可通過備用模板如：preset-orange.css切換彈幕主題色。
2. **==外置預設==**：在OBS置入預設可提供主播在調整直播間上的便利。可根據場景進行主題適配保存，不需要切換preset.css改動全局預設。
:::
## **預設結構**
>內置預設和外置預設結構相同，使用相同的變量[color=#3b75c6]
---
* 所有的變量參數Parameter 需放置在 ==:root{...}==
### **顯示或隱藏元素**
:::success
參數說明：
1. flex：開 / 顯示
2. none：關 / 隱藏
:::
```css=
--img-avatar-show: flex; /* 頭像 */
--badges-section-show: flex; /* 徽章 */
--ribbon-normal-show: flex; /* 元素 半圓環 一般彈幕 */
--ribbon-special-show: flex; /* 元素 直線條 SC、會員 彈幕 */
--ribbon-gift-show: flex; /* 元素 直線條 禮物彈幕 */
```
| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | img-avatar-show | flex | 顯示、隱藏 頭像 |
| 2 | badges-section-show | flex | 顯示、隱藏 徽章 |
| 3 | ribbon-normal-show | flex | 顯示、隱藏 元素 半圓環 一般彈幕|
| 4 | ribbon-special-show | flex | 顯示、隱藏 元素 直線條 SC、會員 彈幕|
| 5 | ribbon-gift-show | flex | 顯示、隱藏 元素 直線條 禮物彈幕|
---
```css=
--bx-normal-show: none; /* 元素 框裝飾 一般彈幕 */
--bx-special-left-show: none; /* 元素 框裝飾 左邊 SC、會員彈幕 */
--bx-special-right-show: none; /* 元素 框裝飾 右邊 SC、會員彈幕 */
--bx-milestonechat-show: none; /* 元素 框裝飾 YT會員milestone彈幕 */
--background-icon-show: flex; /* 元素 背景平台圖標 SC、會員彈幕 */
```
| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | bx-normal-show | flex | 顯示、隱藏 頭像 |
| 2 | bx-special-left-show | flex | 顯示、隱藏 徽章 |
| 3 | bx-special-right-show | flex | 顯示、隱藏 元素 半圓環 一般彈幕|
| 4 | bx-milestonechat-show | flex | 顯示、隱藏 元素 直線條 SC、會員 彈幕|
| 5 | background-icon-show | flex | 顯示、隱藏 元素 直線條 禮物彈幕|
---
### **顏色碼**
:::success
常用的顏色碼：
1. hex color code 如：#EFE7F3 【包含透明參數】
2. rgb 如：rgb(216, 196, 226) 【rgb不包含透明參數】
3. rgba 如：rgb(216, 196, 226, 0.5) 【含透明參數,尾參數0.00-1.00】
備註： 使用Visual Studio Code 容易查找和轉換顏色碼
:::
### **顏色碼 一般對話框**
```css=
/* 一般彈幕 相關 */
--one-normal-bg-color: #EFE7F3; /* 背景 */
--one-normal-bd-color: #A563C6; /* 邊框 */
--one-normal-text-color: #BC5CED; /* 彈幕 字體 顏色 */
--one-n-name-bg-color: #E3D5EA; /* 名字 背景 */
--one-n-name-bd-color: #C576ED; /* 名字 邊框 */
--one-n-name-text-color: #af45e4; /* 名字 字體 顏色 */
--one-n-badge-bg-color: #E3D5EA; /* 徽章 背景 */
--one-n-badge-bd-color: #C576ED; /* 徽章 邊框 */
```
| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | one-normal-bg-color | #EFE7F3 | 背景 |
| 2 | one-normal-bd-color | #A563C6 | 邊框 |
| 3 | one-normal-text-color | #BC5CED | 彈幕 字體 顏色|
| 4 | one-n-name-bg-color | #E3D5EA | 名字 背景|
| 5 | one-n-name-bd-color | #C576ED | 名字 邊框|
| 6 | one-n-name-text-color | #af45e4 | 名字 字體 顏色|
| 7 | one-n-badge-bg-color | #E3D5EA | 徽章 背景|
| 8 | one-n-badge-bd-color | #C576ED | 徽章 邊框|
---
### **顏色碼 禮物、兌換彈幕**
```css=
/* 禮物彈幕 相關 */
--one-gf-text-color: #BC5CED; /* 彈幕 字體 顏色 */
--one-gf-shadowText1-color: rgba(216, 196, 226, 0.7); /* 彈幕 字體 影子 顏色 */
--one-gf-shadowText2-color: rgba(216, 196, 226, 0.6); /* 彈幕 字體 影子 顏色 2*/
--one-gf-shadow-size: 2px; /* 彈幕 字體 影子 大小*/
--one-gf-shadowBlur: 1px; /* 彈幕 字體 影子 模糊度*/
```
| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | one-gf-text-color | #BC5CED | 彈幕 字體 顏色 |
| 2 | one-gf-shadowText1-color | rgba(216, 196, 226, 0.7) | 彈幕 字體 影子 顏色 |
| 3 | one-gf-shadowText2-color | rgba(216, 196, 226, 0.6) | 彈幕 字體 影子 顏色 2|
| 4 | one-gf-shadow-size | 2px | 彈幕 字體 影子 大小 px|
| 5 | one-gf-shadowBlur | 1px | 彈幕 字體 影子 模糊度 px|
---
### **顏色碼 會員彈幕**
```css=
/* 會員 相關 */
--one-mb-bg-color: #EFE7F3; /* 背景 */
--one-mb-bd-color: #A563C6; /* 邊框 */
--one-mb-text-color: #BC5CED; /* 彈幕 字體 顏色 */
--one-mb-secText-color: #f98289; /* 彈幕 字體 顏色 2 */
--one-mb-name-bg-color: #E3D5EA; /* 名字 背景 */
--one-mb-name-bd-color: #C576ED; /* 名字 邊框 */
--one-mb-name-text-color: #af45e4; /* 名字 字體 顏色 */
--one-mb-badge-bg-color: #E3D5EA; /* 徽章 背景 */
--one-mb-badge-bd-color: #C576ED; /* 徽章 邊框 */
```
| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | one-mb-bg-color | #EFE7F3 | 背景 |
| 2 | one-mb-bd-color | #A563C6 | 邊框 |
| 3 | one-mb-text-color | #BC5CED | 彈幕 字體 顏色|
| 4 | one-mb-secText-color | #f98289 | 名字 背景|
| 5 | one-mb-name-bg-color | #E3D5EA | 名字 邊框|
| 6 | one-mb-name-bd-color | #C576ED | 名字 字體 顏色|
| 7 | one-mb-name-text-color | #af45e4 | 徽章 背景|
| 8 | one-mb-badge-bg-color | #E3D5EA | 徽章 邊框|
| 9 | one-mb-badge-bd-color | #C576ED | 徽章 邊框|
---
### 顏色碼 **SuperChat & Milestone 彈幕**
```css=
/* SuperChat & Milestone Chat 相關 */
--one-sc-bg-color: #EFE7F3; /* 背景 */
--one-sc-bd-color: #A563C6;; /* 邊框 */
--one-sc-text-color: #BC5CED; /* 彈幕 字體 顏色 */
--one-sc-secText-color: #872841; /* 名字 背景 */
--one-sc-thrText-color: #430960; /* 名字 字體 顏色 */
--one-sc-name-bg-color: #E3D5EA; /* 名字 背景 */
--one-sc-name-bd-color: #C576ED; /* 名字 邊框 */
--one-sc-name-text-color: #af45e4; /* 名字 字體 顏色 */
--one-sc-badge-bg-color: #E3D5EA; /* 徽章 背景 */
--one-sc-badge-bd-color: #C576ED; /* 徽章 邊框 */
--one-sc-paid-bg-color: #C977F2; /* 付費 背景 */
--one-sc-paid-bd-color: #5E0914; /* 付費 邊框 */
--one-sc-paidText-color: #F7ECFD; /* 付費 字體 顏色 */
```
| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | one-sc-bg-color | #EFE7F3 | 背景 |
| 2 | one-sc-bd-color | #A563C6 | 邊框 |
| 3 | one-sc-text-color | #BC5CED | 彈幕 字體 顏色|
| 4 | one-sc-secText-color | #872841 | 名字 背景|
| 5 | one-sc-thrText-color | #430960 | 名字 邊框|
| 6 | one-sc-name-bg-color | #E3D5EA | 名字 背景|
| 7 | one-sc-name-bd-color | #C576ED | 名字 邊框|
| 8 | one-sc-name-text-color | #af45e4 | 名字 字體 顏色|
| 9 | one-sc-badge-bg-color | #E3D5EA | 徽章 背景|
| 10| one-sc-badge-bd-color | #C576ED | 徽章 邊框|
| 11| one-sc-paid-bg-color | #C977F2 | 付費 背景|
| 12| one-sc-paid-bd-color | #5E0914 | 付費 邊框|
| 13| one-sc-paidText-color | #F7ECFD | 付費 字體 顏色|
---
### 顏色碼 **裝飾物 相關**
```css=
/* 裝飾物 相關 */
--one-dot-color: #CDB3D9; /* 裝飾 圓點 顏色 */
--one-dot2-color: #AF38EA; /* 裝飾 +點 顏色 */
```
| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | one-dot-color | #CDB3D9 | 裝飾 圓點 顏色 |
| 2 | one-dot2-color | #AF38EA | 裝飾 +點 顏色 |
---
### 顏色碼 **裝飾物 相關 2**
```css=
--one-bx1-color:#ffcc33; /* 裝飾 1 顏色 */
--one-bx2-color:#6eff75; /* 裝飾 2 顏色 */
--one-bx3-color:#3db2b6; /* 裝飾 3 顏色 */
--one-bx4-color:#ff4444; /* 裝飾 4 顏色 */
```
| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | one-bx1-color | #ffcc33 | 裝飾 1 顏色 |
| 2 | one-bx2-color | #6eff75 | 裝飾 2 顏色 |
| 3 | one-bx2-color | #3db2b6 | 裝飾 3 顏色 |
| 4 | one-bx2-color | #ff4444 | 裝飾 4 顏色 |
---
```css=
/* 會員閃光 相關 */
--one-kirakira-gradient-start:rgba(250, 239, 255, 0);
--one-kirakira-gradient-end:rgba(250, 239, 255, 0.65);
```
| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | one-kirakira-gradient-start | rgba(250, 239, 255, 0) | 閃光層 開始 |
| 2 | one-kirakira-gradient-end | rgba(250, 239, 255, 0.65) | 閃光層 結束 |
---
:::info
1. 閃光層默認使用rgba(),尾數 (xxx,xxx,xxx,1)指的是透明度，數值 0.00-1
:::
## **CSS File Preset Setting**
>CSS預設文件[color=#3b75c6]
* 本主題預設了五款主題色，可根據需要進行自定調整。
1. preset.css ==【默認】==
2. preset-benihi.css
3. preset-cyan.css
4. preset-green.css
5. preset-orange.css
6. preset-pink.css
7. preset-violet.css
* 默認文件是preset.css。
* 複製preset.css 可保存自定義預設。
* 通過命名可替換成其它預設,如：將preset-xxxx.css 改成 preset.css
* 注意：此操作將會是全局主題替換。
---
## **OBS CSS Preset Setting**
>調整OBS主題顏色預設[color=#3b75c6]
---
* 複製預設文件裡的:root{...}所包含的參數植入OBS彈幕資源裡的Custom CSS （自定義CSS）欄裡：
* 刷新緩存並保存即可生效。（示範採用綠色系）
* 多預設保存預覽
---
Gank 进度条 美化
===
>Gank进度条美化[color=#3b75c6]
---
:::info
配置Gank進度條美化之前需要了解本操作原理
:::
1. 本美化纯靠外掛css实现，因此无法修改任何数据架框。
2. 由於無法修改伺服器資源，字體font需要預先安裝到電腦才能獲取。
3. 所有圖像資源需要靠圖床或者伺服器，因此這裡使用OneComme的伺服器作為靠掛。
4. 需開啟OneComme才能加載到圖。
## 主題 背景
>本主題背景為透明，但有些外邊距（margin）和內邊距（padding）需要補充[color=#3b75c6]
---
```css
--layout-margin-top: 0;
--layout-margin-bottom: 0;
--layout-margin-left: 30px;
--layout-margin-right: 60px;
--layout-padding-top: 30px;
--layout-padding-bottom: 10px;
--layout-padding-left: 16px;
--layout-padding-right: 50px;
--layout-image-url: url('http://localhost:11180/templates/custom/en_5anniversary/images/kitsune.png');
--layout-image-width: 150px;
--layout-image-height: 150px;
--layout-image-top: 0px;
--layout-image-bottom: auto;
--layout-image-left: auto;
--layout-image-right: -50px;
--layout-image-z-index: 0;
```
* 紅色框外的空間
| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | layout-margin-top | 0 | 背景 上外邊距 默認是 0px 裝飾圖需要空間可以增減 |
| 2 | layout-margin-bottom | 0 | 背景 下外邊距 默認是 0px 裝飾圖需要空間可以增減 |
| 3 | layout-margin-left | 30px | 背景 左外邊距 默認是 30px 裝飾圖需要空間可以增減 |
| 4 | layout-margin-right | 60px | 背景 右外邊距 默認是 30px 裝飾圖需要空間可以增減 |
* 紅色框內的空間
| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | layout-padding-top | 30px | 背景 上內邊距 默認是 30px 裝飾圖需要空間可以增減 |
| 2 | layout-padding-bottom | 10px | 背景 下內邊距 默認是 10px 裝飾圖需要空間可以增減 |
| 3 | layout-padding-left | 16px | 背景 左內邊距 默認是 16px 裝飾圖需要空間可以增減 |
| 4 | layout-padding-right | 50px | 背景 右內邊距 默認是 50px 裝飾圖需要空間可以增減 |
:::success
右內邊距 需要比較多的空間，是為了擠入狐狸那張圖
:::
* 绿色框內的空間，红色则是背景框的界线
| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | layout-image-url | url() | 圖 資源鏈接 |
| 2 | layout-image-width | 150px | 圖 寬度 px |
| 3 | layout-image-height| 150px | 圖 長度 px |
| 4 | layout-image-top | 0 | 圖 上 定位 px 默認是0 如果需要空間請調整 layout-padding-top|
| 5 | layout-image-bottom | auto | 圖 下 定位 px 默認是auto |
| 6 | layout-image-left| auto | 圖 左 定位 px 默認是auto |
| 7 | layout-image-right| -50px | 圖 右 定位 默認是 -50px 裝飾圖需要空間可以增減 |
| 8 | layout-image-z-index| 0 | 图z轴高度 值为 0-99 0最底层 1,2,3 为上层次 类似图层结构 |
:::success
4-7 是一组类似 XY轴定位，X轴是left&right各取一个属性使用，想靠右操作就用right。
Y是top&bottom各取一个属性使用，想靠上就用top操作。
其余不动的属性就设置auto，不可放0，0有值量表示固定定位。
:::
:::success
z-index 表示图层顺序，0 是底层，也可以 -1 或 1,2,3来表示顺序
:::
## 主題 大標題
>本主題大標題參數[color=#3b75c6]
---
```css
--title-font-family: MiSans;
--title-font-size: 1em;
--title-text-align: center;
--title-text-color: rgb(0,0,0);
--title-text-shadow: 0 0 .05em rgba(0, 0, 0, .75);
--title-padding-top: 4px;
--title-padding-bottom: 4px;
--title-margin-top: 0px;
--title-margin-bottom: 18px;
--title-margin-left: auto;
--title-margin-right: auto;
```
* 橙色框內的範圍
| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | title-font-family | MiSans | 字體樣式 需要將字體安裝到系統 |
| 2 | title-font-size | 1em | 字體 大小 單位 em |
| 3 | title-text-align | center | 字體對齊（left，center，right） |
| 4 | title-text-color | rgb(0,0,0) | 字體 顏色 rgb hex |
| 5 | title-text-shadow | 0 0 .05em rgba(0, 0, 0, .75) | 字體影子 |
:::warning
title-text-shadow
0 0 .05em rgba(0, 0, 0, .75)
水平偏移 垂直偏移 模糊半徑 rgb+透明度（0-1）
:::
:::info
字體安裝 點擊ttf 安裝即可
:::
* 橙色框內的（padding）| 框外（margin）
| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | title-padding-top | 4px | 標題 上 內邊距 px|
| 2 | title-padding-bottom | 4px | 標題 下 內邊距 px|
| 3 | title-margin-top | 0px | 標題 上 外邊距 px |
| 4 | title-margin-bottom | 18px | 標題 下 外邊距 px |
| 5 | title-margin-left | auto | 標題 左 外邊距 px 默認auto 需要偏移才添加參數 |
| 6 | title-margin-right | auto | 標題 右 外邊距 px 默認auto 需要偏移才添加參數 |
---
## 主題 副標題
>本主題副標題參數[color=#3b75c6]
---
```css
--subtitle-font-family: MiSans;
--subtitle-font-size: 0.7em;
--subtitle-text-color: #7B4B55;
--subtitle-top: -26px;
--subtitle-margin-left: auto;
--subtitle-margin-right: auto;
--subtitle-z-index: 0;
```
* 橙色框內的（padding）| 框外（margin）
| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | subtitle-font-family | MiSans | 字體樣式 需要將字體安裝到系統 |
| 2 | subtitle-font-size | 0.7em |字體 大小 單位 em |
| 3 | subtitle-text-color | #7B4B55 | 字體 顏色 rgb hex |
| 4 | subtitle-top | 18px | 副標題 上 定位 px |
| 5 | subtitle-margin-left | auto | 標題 左 外邊距 px 默認auto 需要偏移才添加參數 |
| 6 | subtitle-margin-right | auto | 標題 右 外邊距 px 默認auto 需要偏移才添加參數 |
| 7 | subtitle-z-index | auto | 图z轴高度 值为 0-99 0最底层 1,2,3 为上层次 类似图层结构，原本參數可疊加在進度條上，若放置在進度條上，可以調整為1或2顯示在最上層 |
---
## 主題 進度條背景
>本主題 進度條背景[color=#3b75c6]
---
```css
--bar-height: 45px;
--bar-border-radius: 15px;
--bar-background-color: #E0CCD0;
--bar-border-size: 3px;
--bar-border-color: #FFFFFF;
--bar-box-shadow: 0 0 .1em #DD3053;
--bar-margin-top: 10px;
```
| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | bar-height | 45px | 進度條厚度 px |
| 2 | bar-border-radius | 15px |進度條 背景 邊角弧度 px |
| 3 | bar-background-color | #E0CCD0 |進度條 背景 顏色 rgb hex |
| 4 | bar-border-size | 3px | 進度條 邊框大小 px |
| 5 | bar-border-color | #FFFFFF | 進度條 邊框 顏色 rgb hex |
| 6 | bar-box-shadow | 0 0 .1em #DD3053 | 進度條 影子 |
| 7 | bar-margin-top | 10px | 進度條 上 外邊距 px |
---
## 主題 進度條 設定
>本主題 進度條進度條[color=#3b75c6]
---
```css
--bar-progress-border-radius: 15px;
--bar-progress-background: #73a9df;
--bar-progress-gradient-degree: -45deg;
--bar-progress-gradient-color: rgba(255, 255, 255, 0.2);
--bar-progress-z-index: 1;
--bar-progress-background-size: 50px 50px;
--bar-progress-animation-speed: 6s;
```
| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | bar-progress-border-radius | 15px | 進度條 邊角弧度 px |
| 2 | bar-progress-background | #73a9df |進度條 顏色 rgb hex |
| 3 | bar-progress-gradient-degree | -45deg |進度條 漸變斜條 角度 deg |
| 4 | bar-progress-gradient-color | rgba(255, 255, 255, 0.2) | 進度條 漸變斜 顏色 rgb hex |
| 5 | bar-progress-z-index | 1 | 進度條 圖層順序 需高於 進度條背景 1-99 |
| 6 | bar-progress-background-size | 50px 50px | 進度條 漸變大小 大小 |
| 7 | bar-progress-animation-speed | 6s | 進度條 動畫進度 速度 |
*進度條裝飾物
```css
--bar-progress-image: url('http://localhost:11180/templates/custom/en_5anniversary/images/listener2.gif');
--bar-progress-image-width: 100px;
--bar-progress-image-height: 100px;
--bar-progress-image-top: -35px;
--bar-progress-image-right: -50px;
--bar-progress-image-z-index: 1;
```
*綠色框內
| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | bar-progress-image | url() | 裝飾物 資源 鏈接 |
| 2 | bar-progress-image-width | 100px |裝飾物 寬度 px |
| 3 | bar-progress-image-height | 100px |裝飾物 高度 px |
| 4 | bar-progress-image-top | -35px | 圖片 上 定位 鎖定距離，當進度移動會跟隨 |
| 5 | bar-progress-image-right | 1 | 圖片 右 定位 鎖定距離，當進度移動會跟隨|
| 6 | bar-progress-image-z-index | 1 | 圖層順序 需高於進度條 |
---
## 主題 底部 數字顯示條
>本主題 數字顯示條[color=#3b75c6]
---
```css
--footer-text-shadow: 0 0 .05em rgba(0, 0, 0, .75);
--footer-margin-top: 10px;
--footer-left-position: 16px;
--footer-right-position: 30px;
--footer-left-z-index: 0;
--footer-right-z-index: 2;
--footer-text-color: gray;
--footer-show: flex;
```
*紅色框內
| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | footer-text-shadow | 0 0 .05em rgba(0, 0, 0, .75) | 數字 影子 |
| 2 | footer-margin-top | 10px |數字 上 外邊距 與 進度條的距離 |
| 3 | footer-left-position | 16px | 左邊 數字 定位 - 向外 + 向內 |
| 4 | footer-right-position | -35px | 右邊 數字 定位 - 向外 + 向內 |
| 5 | footer-left-z-index | 0 | 左 字體圖層順序 要是被遮擋可調整 |
| 6 | footer-right-z-index | 2 | 右 字體圖層順序 要是被遮擋可調整 |
| 7 | footer-text-color | gray | 字體 顏色 rgb hex |
| 8 | footer-show | flex | 是否顯示 數字 flex：顯示，none：隱藏 |
---
* 數字 外觀設定
```css
--footer-target-background-color: transparent;
--footer-target-padding: 0px 0px 0px 0px;
--footer-target-text-align: initial;
--footer-target-text-box-min-width: auto;
--footer-target-border: none;
--footer-target-border-radius: none;
```
*紫色框內
| No | 變量 | 參數 | 說明 |
| -------- | -------- | -------- |-------- |
| 1 | footer-target-background-color | transparent | 背景顏色， transparent 則無需顏色 |
| 2 | footer-target-padding | 0px 0px 0px 0px |如果需要背景則需要設置內邊框，參數順序是：上右下左 |
| 3 | footer-target-text-align | initial | 字對齊，參數為：initial（初始無），left，center，right |
| 4 | footer-target-text-box-min-width | auto | 無邊框需設定為 auto，顯示邊框需要設定最小80px |
| 5 | footer-target-border | none | 若果需要邊框需切換 成 px solid color_code; |
| 6 | footer-target-border-radius | none | 若需要 邊框弧度可自定義設定 |
---
## 主題參考線
>為了方便調整參數就調出參考線[color=#3b75c6]
---
:::warning
複製以下需要的段落代碼貼到css裡就能生效，在調試完畢後請記得移除該段代碼。
:::
```css
/* 大框參考線 */
.layout-standard{
border: 1px solid red;
}
/* 大框 裝飾圖 參考線 */
.layout-standard::before{
border: 1px solid green;
}
/* 大標題 參考線 */
.layout-standard .title {
border: 1px solid orange;
}
/* 副標題 參考線 */
.layout-standard .bar .progress{
border: 1px solid blue;
}
/* 進度條 裝飾物 */
.layout-standard .bar .bar-progress::after{
border: 1px solid green;
}
/* 底部 參考線 */
.layout-standard .footer{
border: 1px solid yellow;
}
/* 底部 數字 參考線 */
.layout-standard .footer .min-amount,
.layout-standard .footer .target-amount{
border: 1px solid violet;
}
```