diff --git a/style.css b/style.css index e420ff3..3be7bcc 100644 --- a/style.css +++ b/style.css @@ -8,7 +8,8 @@ body { font-family: 'Noto Sans TC', sans-serif; /* 練習:把背景色改成你喜歡的顏色 */ - background-color: #f0f4f8; + /* 和紙米白 — 日系背景色 */ + background-color: #f5f0e8; display: flex; justify-content: center; align-items: center; @@ -16,9 +17,9 @@ body { } .container { - background: white; + background: #fffdf7; border-radius: 16px; - box-shadow: 0 4px 20px rgba(0,0,0,0.1); + box-shadow: 0 4px 20px rgba(90, 60, 80, 0.12); width: 480px; max-width: 95vw; overflow: hidden; @@ -26,8 +27,9 @@ body { header { /* 練習:把標題列顏色從藍色改成其他顏色 */ - background: #4f8ef7; - color: white; + /* 藤色(Fuji-iro)— 日本傳統藤紫色 */ + background: #6f4e8c; + color: #fff; padding: 20px 24px; } @@ -52,15 +54,17 @@ header .subtitle { font-size: 13px; opacity: 0.85; margin-top: 4px; } } .message.bot { - background: #f0f4f8; - color: #333; + /* 薄萌黃(Usumoeji)— 淡抹茶綠 */ + background: #e8f0e0; + color: #3a3a3a; align-self: flex-start; border-bottom-left-radius: 4px; } .message.user { /* 練習:把使用者訊息顏色從綠色改成你喜歡的顏色 */ - background: #4caf87; + /* 撫子色(Nadeshiko)— 日本石竹花粉 */ + background: #d4607a; color: white; align-self: flex-end; border-bottom-right-radius: 4px; @@ -70,27 +74,29 @@ header .subtitle { font-size: 13px; opacity: 0.85; margin-top: 4px; } display: flex; padding: 16px; gap: 10px; - border-top: 1px solid #eee; + border-top: 1px solid #e8dfd0; } .input-area input { flex: 1; padding: 10px 14px; - border: 1px solid #ddd; + border: 1px solid #c8b8d0; border-radius: 8px; font-size: 14px; outline: none; + background: #fdfaf5; } .input-area input:focus { - border-color: #4f8ef7; + border-color: #6f4e8c; } .input-area button { /* 練習:把按鈕顏色改成你喜歡的顏色 conflict-a 分支:改成 #4f8ef7(藍色) conflict-b 分支:改成 #e84393(粉色) */ - background: #4f8ef7; + /* 深藤色(Fuka-fuji)— 深藤紫 */ + background: #6f4e8c; color: white; border: none; padding: 10px 20px;