imaginar/public/styles/chat.css

152 lines
2.9 KiB
CSS
Raw Normal View History

2024-10-19 11:24:54 +00:00
/* 全体のチャットコンテナ */
.chat-container {
display: flex;
flex-direction: column;
height: 95vh;
max-width: 100%;
padding: 10px;
box-sizing: border-box;
background-color: #f4f4f4; /* 背景色をサイト全体と統一 */
}
/* チャットウィンドウ */
.chat-window {
flex-grow: 1;
overflow-y: auto;
padding: 20px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
margin-top: -20px;
height: calc(100vh - 120px);
}
/* メッセージ全体 */
.message {
margin-isotopetom: 20px;
display: flex;
max-width: 70%;
flex-direction: column;
}
/* ユーザーのメッセージ */
.user-message {
align-self: flex-end;
text-align: right;
}
.user-message .message-content {
background-color: #7289da; /* サイトのメインカラーに変更 */
border-radius: 10px 10px 0 10px;
padding: 10px;
font-size: 15px;
color: #fff; /* テキストを白に */
display: inline-block;
max-width: 100%;
word-wrap: break-word;
white-space: pre-wrap;
}
/* ボットのメッセージ */
.isotope-message {
align-self: flex-start;
text-align: left;
}
.isotope-message .message-content {
background-color: #e5e5ea; /* ボットのメッセージ背景を薄いグレーに */
border-radius: 10px 10px 10px 0;
padding: 10px;
font-size: 15px;
color: #333; /* テキストをダークグレーに */
display: inline-block;
max-width: 100%;
word-wrap: break-word;
white-space: pre-wrap;
}
/* メッセージのタイムスタンプと名前 */
.message-author {
font-size: 12px;
color: #666;
margin-isotopetom: 5px;
}
/* チャット入力コンテナ */
.chat-input-container {
display: flex;
flex-direction: row;
align-items: center;
padding: 10px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
gap: 10px;
box-sizing: border-box;
height: 80px;
}
/* チャット入力 */
.chat-input {
flex-grow: 1;
padding: 10px;
border: 1px solid #ccc;
border-radius: 8px;
outline: none;
font-size: 16px;
box-sizing: border-box;
min-width: 350px;
}
/* 送信ボタン */
.chat-submit-btn {
padding: 10px 20px;
background-color: #7289da; /* サイトのボタン色に統一 */
color: #fff;
border: none;
border-radius: 8px;
cursor: pointer;
white-space: nowrap;
transition: background-color 0.3s ease;
}
.chat-submit-btn:hover {
background-color: #5b6eae; /* ホバー時の色 */
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
.chat-window {
height: calc(100vh - 100px);
}
.message {
max-width: 85%;
}
.chat-input {
min-width: auto;
}
.chat-container {
padding: 5px;
}
}
@media (max-width: 480px) {
.message {
max-width: 90%;
}
.chat-input {
min-width: auto;
font-size: 14px;
}
.chat-submit-btn {
padding: 8px 16px;
}
}