[toc]
# CSS Base Note
|CSS碼|作用|
|:-|:-|
|background-color: 顏色;|更改背景顏色|
|background: linear-gradient(方向, 顏色, 顏色);|背景顏色漸層設定|
|background-image: url('圖片網址');|更改背景圖片|
|background-size: cover or 數字%;|更改背景圖片尺寸|
|background-repeat: no-repeat;|背景圖片是否要重複|
|color: 顏色;|更改文字顏色|
|border: 數字px solid 顏色;|線框顏色與粗細設定|
|border-radius: 數字px;|圓角設定|
|padding: 數字（上）px 數字（右）px 數字（下）px 數字（左）px;|內容與框的間距空間|
|box-shadow: 數字（左右）px 數字（上下）px 數字（模糊程度）px 顏色;|陰影設定（note: inset 內陰影）|
# ChatGPT CSS Note
:::success
背景與開始畫面的標題顏色：
~~~
.relative.flex.h-full.max-w-full.flex-1.flex-col.overflow-hidden {
background-color: pink;
color: black;
}
~~~
:::
:::success
側邊欄的字體顏色：
~~~
.text-token-text-primary {
color: black;
}
~~~
:::
:::success
ChatGPT方的訊息框樣式
~~~
.w-full .markdown {
background-color: white;
color: black;
border-radius: 30px;
padding: 10px 20px 10px 20px;
border: 1px solid pink;
box-shadow: 0 3px 5px darkpink;
}
~~~
:::
:::warning
ChatGPT訊息裡的表格樣式
~~~
table,
th,
td {
border: 1px solid pink !important;
background-color: white !important;
color: black !important;
border-radius: 6px;
border-collapse: collapse;
}
~~~
:::
:::success
使用者方的訊息框樣式
~~~
.bg-token-message-surface {
background-color: lightpink;
color: black;
border-radius: 30px;
padding: 10px 20px 10px 20px;
box-shadow: 0 3px 5px darkpink;
}
:::
:::success
按鈕樣式
>[!Note] 會套用全部可以點擊的地方
~~~
.btn,
button {
background-color: white;
color: pink;
border: none;
border-radius: 30px;
box-shadow: 0 1.5px 3px darkpink;
padding: 1.5px 12px 1.5px 12px;
}
~~~
:::
:::success
>[!Note] 按鈕補充包-新交談
~~~
a[aria-label="新聊天"] {
background-color: #fff0;
color: pink;
border: none;
border-radius: 30px;
box-shadow: none;
padding: 1.5px 12px;
}
~~~
:::
:::success
點選 / 滑到按鈕處的變化
>[!Note] 一樣，會全部套用到可以點擊的地方
~~~
.btn:hover,
button:hover {
background-color: pink;
color: white;
border-radius: 30px;
box-shadow: 0 1.5px 3px darkpink;
padding: 1.5px 12px 1.5px 12px;
}
~~~
:::
:::success
ChatGPT方的照片
>[!Important] [語法出處！←點擊查看](https://www.plurk.com/p/3h3qfm1g5r)
~~~
.group\/conversation-turn.agent-turn:before {
content: " ";
/* 圖片網址 */
background-image: url('https://static.wikia.nocookie.net/robotsupremacy/images/b/b0/JuARaVeInSy.png');
background-size: 30px 30px;
border-radius: 15px;
height: 30px;
width: 30px;
}
~~~
:::
:::success
ChatGPT方的名字
>[!Important] [語法出處！←點擊查看]
~~~
.group\/conversation-turn.agent-turn > div:nth-child(1):before {
/* 暱稱 */
content: "J.A.R.V.A.S";
position: relative;
left: 35px;
top: -5px;
font-weight: 500;
}
.group\/conversation-turn.agent-turn > div:nth-child(1) {
margin-top: -20px;
}
~~~
:::
:::success
使用者方的照片
~~~
div[data-message-author-role="user"]::before {
content: " ";
margin-top: -20px;
/* 圖片網址 */
background-image: url('https://i.ibb.co/SwyQSXXR/DALL-E-2025-04-20-02-40-52-A-romantic-illustration-in-soft-Korean-webtoon-manhwa-style-with-gentle-b.jpg');
background-size: 30px 30px;
border-radius: 15px;
width: 30px;
height: 30px;
z-index: 0;
}
div[data-message-author-role="user"] {
position: relative;
}
~~~
:::
:::success
使用者方的名字
>[!Warning] 名字的位置，需要自己手動調整，才能貼近照片
~~~
div[data-message-author-role="user"]>div:nth-child(1):before {
/* 暱稱 */
content: "User";
position: relative;
right: -695px;
top: -10px;
font-weight: 500;
}
div[data-message-author-role="user"]>div:nth-child(1) {
margin-top: -25px;
}
~~~
:::
:::success
輸入訊息框樣式
~~~
div[class*="composer"] div.bg-token-main-surface-primary {
border: 1px solid white;
background-color: white;
box-shadow: darkpink;
}
~~~
:::
# Different Stylus CSS
>[!Note]
> - 三種配色外觀
> - 雖標註手機版，但書籤電腦跟手機都可以用喔!
## 🌿 Green
Green 效果圖-電腦板
:::spoiler Green CSS (電腦版)
~~~
/* 背景與開始畫面的標題顏色 */
.relative.flex.h-full.max-w-full.flex-1.flex-col.overflow-hidden {
background-color: #ebebe3;
color: gray;
}
/* 側邊欄的字體顏色 */
.text-token-text-primary {
color: gray !important;
}
/* ChatGPT方的訊息框樣式 */
.w-full .markdown {
background-color: white;
color: darkgray;
border-radius: 35px;
padding: 25px 20px 25px 20px;
box-shadow: 0 5px 6px rgb(128, 128, 128, 0.1), 0 5px 6px #ebebe3;
overflow-x: auto;
}
/* ChatGPT訊息裡的表格樣式 */
.table-container {
overflow-x: auto;
}
table,
th,
td {
width: auto;
white-space: nowrap;
text-align: center;
border: 1px gray ;
background-color: rgb(211, 211, 211, 0.15) !important;
color: black !important;
border-collapse: collapse;
font-weight: bold;
}
/* 使用者方的訊息框樣式 */
.bg-token-message-surface {
background-color: #c6d2be;
color: black;
border-radius: 35px;
padding: 25px 20px 25px 20px;
box-shadow: 0 5px 6px rgb(128, 128, 128, 0.1), 0 5px 6px #ebebe3;
}
/* 按鈕樣式 */
.btn,
button {
background-color: #fff0;
color: #c6d2be;
border: none;
border-radius: 0px;
box-shadow: none;
padding: 0px 5px 0px 5px;
}
/* New Chat */
a[aria-label="新聊天"] {
background-color: #fff0;
color: #c6d2be;
border: none;
border-radius: 0px;
box-shadow: none;
padding: 0px 5px;
}
a[aria-label="新聊天"]:hover {
background-color: #fff0;
color: brown;
border: none;
border-radius: 0px;
box-shadow: none;
padding: 0px 5px 0px 5px;
}
/* 點選 / 滑到按鈕處的變化 */
.btn:hover,
button:hover {
background-color: #fff0;
color: brown;
border: none;
border-radius: 0px;
box-shadow: none;
padding: 0px 5px 0px 5px;
}
/* ChatGPT方的照片 */
.group\/conversation-turn.agent-turn:before {
content: " ";
/* 圖片網址 */
background-image: url('https://img.freepik.com/free-vector/natural-abstract-background-vector_53876-164757.jpg');
background-size: 45px 45px;
border-radius: 50px;
height: 45px;
width: 45px;
box-shadow: 0 3.5px 3px rgb(128, 128, 128, 0.15), 0 3.5px 3px #ebebe3;
}
.group\/conversation-turn.agent-turn > div:nth-child(1):before {
/* 暱稱 */
content: "Character";
position: relative;
left: 50px;
top: -5px;
font-weight: 500;
}
.group\/conversation-turn.agent-turn > div:nth-child(1) {
margin-top: -20px;
}
/* 使用者方的照片 */
div[data-message-author-role="user"]::before {
content: " ";
margin-top: -20px;
/* 圖片網址 */
background-image: url('https://img.freepik.com/free-vector/colorful-abstract-background_53876-114824.jpg');
background-size: 45px 45px;
border-radius: 50px;
width: 45px;
height: 45px;
z-index: 0;
box-shadow: 0 3.5px 3px rgb(128, 128, 128, 0.15), 0 3.5px 3px #ebebe3;
}
div[data-message-author-role="user"] {
position: relative;
}
/* 輸入訊息框樣式 */
div[class*="composer"] div.bg-token-main-surface-primary {
border: 1px solid white;
background-color: white;
box-shadow: 0 5px 6px rgb(128, 128, 128, 0.1), 0 5px 6px #ebebe3;
}
~~~
:::
Green 效果圖-手機版
:::spoiler Green 書籤URL （手機版）
~~~
javascript:(function() {
const css = `
.relative.flex.h-full.max-w-full.flex-1.flex-col.overflow-hidden {
background-color: #ebebe3;
color: gray;
}
.text-token-text-primary {
color: gray !important;
}
.w-full .markdown {
background-color: white;
color: darkgray;
border-radius: 35px;
padding: 25px 20px;
box-shadow: 0 5px 6px rgba(128, 128, 128, 0.1), 0 5px 6px #ebebe3;
overflow-x: auto;
}
.table-container {
overflow-x: auto;
}
table, th, td {
width: auto;
white-space: nowrap;
text-align: center;
border: 1px solid gray;
background-color: rgba(211, 211, 211, 0.15) !important;
color: black !important;
border-collapse: collapse;
font-weight: bold;
}
.bg-token-message-surface {
background-color: #c6d2be;
color: black;
border-radius: 35px;
padding: 25px 20px;
box-shadow: 0 5px 6px rgba(128, 128, 128, 0.1), 0 5px 6px #ebebe3;
}
.btn, button {
background-color: transparent;
color: #c6d2be;
border: none;
border-radius: 0;
box-shadow: none;
padding: 0 5px;
}
a[aria-label="新聊天"] {
background-color: transparent;
color: #c6d2be;
border: none;
border-radius: 0;
box-shadow: none;
padding: 0 5px;
}
a[aria-label="新聊天"]:hover,
.btn:hover, button:hover {
background-color: transparent;
color: brown;
border: none;
border-radius: 0;
box-shadow: none;
padding: 0 5px;
}
.group\\/conversation-turn.agent-turn:before {
content: " ";
background-image: url('https://img.freepik.com/free-vector/natural-abstract-background-vector_53876-164757.jpg');
background-size: 45px 45px;
border-radius: 50px;
height: 45px;
width: 45px;
box-shadow: 0 3.5px 3px rgba(128, 128, 128, 0.15), 0 3.5px 3px #ebebe3;
}
.group\\/conversation-turn.agent-turn > div:nth-child(1):before {
content: "Character";
position: relative;
left: 50px;
top: -5px;
font-weight: 500;
}
.group\\/conversation-turn.agent-turn > div:nth-child(1) {
margin-top: -20px;
}
div[data-message-author-role="user"]::before {
content: " ";
margin-top: -20px;
background-image: url('https://img.freepik.com/free-vector/colorful-abstract-background_53876-114824.jpg');
background-size: 45px 45px;
border-radius: 50px;
width: 45px;
height: 45px;
z-index: 0;
box-shadow: 0 3.5px 3px rgba(128, 128, 128, 0.15), 0 3.5px 3px #ebebe3;
}
div[data-message-author-role="user"] {
position: relative;
}
div[class*="composer"] div.bg-token-main-surface-primary {
border: 1px solid white;
background-color: white;
box-shadow: 0 5px 6px rgba(128, 128, 128, 0.1), 0 5px 6px #ebebe3;
}
`;
const style = document.createElement('style');
style.textContent = css;
document.head.appendChild(style);
})();
~~~
:::
## 🎀 Pink
Pink 效果圖-電腦版
:::spoiler Pink CSS （電腦版）
~~~
/* 背景與開始畫面的標題顏色 */
.relative.flex.h-full.max-w-full.flex-1.flex-col.overflow-hidden {
background-color: pink;
color: darkred;
}
/* 側邊欄的字體顏色 */
.text-token-text-primary {
color: #e098ae !important;
}
/* ChatGPT方的訊息框樣式 */
.w-full .markdown {
background-color: white;
color: darkgray;
border-radius: 35px;
padding: 25px 20px 25px 20px;
box-shadow: 0 5px 6px lightpink;
overflow-x: auto;
}
/* ChatGPT訊息裡的表格樣式 */
.table-container {
overflow-x: auto;
}
table,
th,
td {
width: auto;
white-space: nowrap;
text-align: center;
border: 1px gray ;
background-color: rgb(211, 211, 211, 0.15) !important;
color: black !important;
border-collapse: collapse;
font-weight: bold;
}
/* 使用者方的訊息框樣式 */
.bg-token-message-surface {
background-color: #e098ae;
color: white;
border-radius: 35px;
padding: 25px 20px 25px 20px;
box-shadow: 0 5px 6px lightpink;
}
/* 按鈕樣式 */
.btn,
button {
background-color: #fff0;
color: #e098ae;
border: none;
border-radius: 0px;
box-shadow: none;
padding: 0px 5px 0px 5px;
}
/* New Chat */
a[aria-label="新聊天"] {
background-color: #fff0;
color: #e098ae;
border: none;
border-radius: 0px;
box-shadow: none;
padding: 0px 5px;
}
a[aria-label="新聊天"]:hover {
background-color: #fff0;
color: darkred;
border: none;
border-radius: 0px;
box-shadow: none;
padding: 0px 5px 0px 5px;
}
/* 點選 / 滑到按鈕處的變化 */
.btn:hover,
button:hover {
background-color: #fff0;
color: darkred;
border: none;
border-radius: 0px;
box-shadow: none;
padding: 0px 5px 0px 5px;
}
/* ChatGPT方的照片 */
.group\/conversation-turn.agent-turn:before {
content: " ";
/* 圖片網址 */
background-image: url('https://img.freepik.com/free-vector/natural-abstract-background-vector_53876-164757.jpg');
background-size: 45px 45px;
border-radius: 50px;
height: 45px;
width: 45px;
box-shadow: 0 5px 6px lightpink;
}
.group\/conversation-turn.agent-turn > div:nth-child(1):before {
/* 暱稱 */
content: "Character";
color: darkred;
position: relative;
left: 50px;
top: -5px;
font-weight: 500;
}
.group\/conversation-turn.agent-turn > div:nth-child(1) {
margin-top: -20px;
}
/* 使用者方的照片 */
div[data-message-author-role="user"]::before {
content: " ";
margin-top: -20px;
/* 圖片網址 */
background-image: url('https://img.freepik.com/free-vector/colorful-abstract-background_53876-114824.jpg');
background-size: 45px 45px;
border-radius: 50px;
width: 45px;
height: 45px;
z-index: 0;
box-shadow: 0 5px 6px lightpink;
}
div[data-message-author-role="user"] {
position: relative;
}
/* 輸入訊息框樣式 */
div[class*="composer"] div.bg-token-main-surface-primary {
border: 1px solid white;
background-color: white;
box-shadow: 0 5px 6px lightpink;
}
~~~
:::
Pink 效果圖-手機版
:::spoiler Pink 書籤URL （手機版）
~~~
javascript:(function(){
const style = document.createElement('style');
style.innerText = `
.relative.flex.h-full.max-w-full.flex-1.flex-col.overflow-hidden {
background-color: pink;
color: darkred;
}
.text-token-text-primary {
color: #e098ae !important;
}
.w-full .markdown {
background-color: white;
color: darkgray;
border-radius: 35px;
padding: 25px 20px;
box-shadow: 0 5px 6px lightpink;
overflow-x: auto;
}
.table-container {
overflow-x: auto;
}
table, th, td {
width: auto;
white-space: nowrap;
text-align: center;
border: 1px gray;
background-color: rgba(211, 211, 211, 0.15) !important;
color: black !important;
border-collapse: collapse;
font-weight: bold;
}
.bg-token-message-surface {
background-color: #e098ae;
color: white;
border-radius: 35px;
padding: 25px 20px;
box-shadow: 0 5px 6px lightpink;
}
.btn, button {
background-color: #fff0;
color: #e098ae;
border: none;
border-radius: 0px;
box-shadow: none;
padding: 0px 5px;
}
a[aria-label="新聊天"] {
background-color: #fff0;
color: #e098ae;
border: none;
border-radius: 0px;
box-shadow: none;
padding: 0px 5px;
}
a[aria-label="新聊天"]:hover {
background-color: #fff0;
color: darkred;
}
.btn:hover, button:hover {
background-color: #fff0;
color: darkred;
}
.group\\/conversation-turn.agent-turn:before {
content: " ";
background-image: url('https://img.freepik.com/free-vector/natural-abstract-background-vector_53876-164757.jpg');
background-size: 45px 45px;
border-radius: 50px;
height: 45px;
width: 45px;
box-shadow: 0 5px 6px lightpink;
}
.group\\/conversation-turn.agent-turn > div:nth-child(1):before {
content: "Character";
color: darkred;
position: relative;
left: 50px;
top: -5px;
font-weight: 500;
}
.group\\/conversation-turn.agent-turn > div:nth-child(1) {
margin-top: -20px;
}
div[data-message-author-role="user"]::before {
content: " ";
margin-top: -20px;
background-image: url('https://img.freepik.com/free-vector/colorful-abstract-background_53876-114824.jpg');
background-size: 45px 45px;
border-radius: 50px;
width: 45px;
height: 45px;
z-index: 0;
box-shadow: 0 5px 6px lightpink;
}
div[data-message-author-role="user"] {
position: relative;
}
div[class*="composer"] div.bg-token-main-surface-primary {
border: 1px solid white;
background-color: white;
box-shadow: 0 5px 6px lightpink;
}
`;
document.head.appendChild(style);
})();
~~~
:::
## 🍫 Brown
Brown 效果圖-電腦版
:::spoiler Brown CSS （電腦版）
~~~
/* 背景與開始畫面的標題顏色 */
.relative.flex.h-full.max-w-full.flex-1.flex-col.overflow-hidden {
background-color: #e5c1c5;
color: gray;
}
/* 側邊欄的字體顏色 */
.text-token-text-primary {
color: gray !important;
}
/* ChatGPT方的訊息框樣式 */
.w-full .markdown {
background-color: white;
color: darkgray;
border-radius: 35px;
padding: 25px 20px 25px 20px;
box-shadow: 0 5px 6px #e4a99b;
overflow-x: auto;
}
/* ChatGPT訊息裡的表格樣式 */
.table-container {
overflow-x: auto;
}
table,
th,
td {
width: auto;
white-space: nowrap;
text-align: center;
border: 1px gray ;
background-color: rgb(211, 211, 211, 0.15) !important;
color: black !important;
border-collapse: collapse;
font-weight: bold;
}
/* 使用者方的訊息框樣式 */
.bg-token-message-surface {
background-color: #ce8467;
color: white;
border-radius: 35px;
padding: 25px 20px 25px 20px;
box-shadow: 0 5px 6px #e4a99b;
}
/* 按鈕樣式 */
.btn,
button {
background-color: #fff0;
color: #ce8467;
border: none;
border-radius: 0px;
box-shadow: none;
padding: 0px 5px 0px 5px;
}
/* New Chat */
a[aria-label="新聊天"] {
background-color: #fff0;
color: #ce8467;
border: none;
border-radius: 0px;
box-shadow: none;
padding: 0px 5px;
}
a[aria-label="新聊天"]:hover {
background-color: #fff0;
color: brown;
border: none;
border-radius: 0px;
box-shadow: none;
padding: 0px 5px 0px 5px;
}
/* 點選 / 滑到按鈕處的變化 */
.btn:hover,
button:hover {
background-color: #fff0;
color: brown;
border: none;
border-radius: 0px;
box-shadow: none;
padding: 0px 5px 0px 5px;
}
/* ChatGPT方的照片 */
.group\/conversation-turn.agent-turn:before {
content: " ";
/* 圖片網址 */
background-image: url('https://img.freepik.com/free-vector/natural-abstract-background-vector_53876-164757.jpg');
background-size: 45px 45px;
border-radius: 50px;
height: 45px;
width: 45px;
box-shadow: 0 5px 6px #e4a99b;
}
.group\/conversation-turn.agent-turn > div:nth-child(1):before {
/* 暱稱 */
content: "Character";
color: brown;
position: relative;
left: 50px;
top: -5px;
font-weight: 500;
}
.group\/conversation-turn.agent-turn > div:nth-child(1) {
margin-top: -20px;
}
/* 使用者方的照片 */
div[data-message-author-role="user"]::before {
content: " ";
margin-top: -20px;
/* 圖片網址 */
background-image: url('https://img.freepik.com/free-vector/colorful-abstract-background_53876-114824.jpg');
background-size: 45px 45px;
border-radius: 50px;
width: 45px;
height: 45px;
z-index: 0;
box-shadow: 0 5px 6px #e4a99b;
}
div[data-message-author-role="user"] {
position: relative;
}
/* 輸入訊息框樣式 */
div[class*="composer"] div.bg-token-main-surface-primary {
border: 1px solid white;
background-color: white;
box-shadow: 0 5px 6px #e4a99b;
}
~~~
:::
Brown 效果圖-手機版
:::spoiler Brown 書籤URL （手機版）
~~~
javascript:(function() {
const css = `
.relative.flex.h-full.max-w-full.flex-1.flex-col.overflow-hidden {
background-color: #e5c1c5;
color: gray;
}
.text-token-text-primary {
color: gray !important;
}
.w-full .markdown {
background-color: white;
color: darkgray;
border-radius: 35px;
padding: 25px 20px 25px 20px;
box-shadow: 0 5px 6px #e4a99b;
overflow-x: auto;
}
.table-container {
overflow-x: auto;
}
table, th, td {
width: auto;
white-space: nowrap;
text-align: center;
border: 1px gray;
background-color: rgba(211, 211, 211, 0.15) !important;
color: black !important;
border-collapse: collapse;
font-weight: bold;
}
.bg-token-message-surface {
background-color: #ce8467;
color: white;
border-radius: 35px;
padding: 25px 20px 25px 20px;
box-shadow: 0 5px 6px #e4a99b;
}
.btn, button {
background-color: #fff0;
color: #ce8467;
border: none;
border-radius: 0px;
box-shadow: none;
padding: 0px 5px 0px 5px;
}
a[aria-label="新聊天"] {
background-color: #fff0;
color: #ce8467;
border: none;
border-radius: 0px;
box-shadow: none;
padding: 0px 5px;
}
a[aria-label="新聊天"]:hover,
.btn:hover, button:hover {
background-color: #fff0;
color: brown;
border: none;
border-radius: 0px;
box-shadow: none;
padding: 0px 5px 0px 5px;
}
.group\\/conversation-turn.agent-turn:before {
content: " ";
background-image: url('https://img.freepik.com/free-vector/natural-abstract-background-vector_53876-164757.jpg');
background-size: 45px 45px;
border-radius: 50px;
height: 45px;
width: 45px;
box-shadow: 0 5px 6px #e4a99b;
}
.group\\/conversation-turn.agent-turn > div:nth-child(1):before {
content: "Character";
color: brown;
position: relative;
left: 50px;
top: -5px;
font-weight: 500;
}
.group\\/conversation-turn.agent-turn > div:nth-child(1) {
margin-top: -20px;
}
div[data-message-author-role="user"]::before {
content: " ";
margin-top: -20px;
background-image: url('https://img.freepik.com/free-vector/colorful-abstract-background_53876-114824.jpg');
background-size: 45px 45px;
border-radius: 50px;
width: 45px;
height: 45px;
z-index: 0;
box-shadow: 0 5px 6px #e4a99b;
}
div[data-message-author-role="user"] {
position: relative;
}
div[class*="composer"] div.bg-token-main-surface-primary {
border: 1px solid white;
background-color: white;
box-shadow: 0 5px 6px #e4a99b;
}
`;
const style = document.createElement('style');
style.textContent = css;
document.head.appendChild(style);
})();
~~~
:::
Sign in with Wallet
Connect another wallet