チャットページのデザインを改善し、よりスムーズな操作感を実現するために、いくつかの簡単な調整を行いました。変更点の概要は以下の通りです。
- 入力中インジケーターの移動：
入力中インジケーターをテキストボックスの下から上に移動させました。これにより、誰かが入力していることがより自然に分かりやすくなりました。 - 入力中インジケーターのフォントサイズ拡大：
入力中インジケーターのフォントサイズを少し大きくしました。これにより、より見やすくなり、一目で認識しやすくなりました。 - 画像の整理：
画像を取り囲んでいたドキュメント名/URLを削除し、画像に小さな角丸を追加しました。これにより、画像がよりクリーンで洗練された外観になり、不要な要素が取り除かれました。 - 入力中インジケーターの動的な表示：
入力中インジケーターにちょっとした動的な効果を追加しました。インジケーターが表示されるとメッセージが少し上にスライドしてスペースを作り、インジケーターが消えるとメッセージが下にスライドして戻ります。このスムーズな遷移により、全体的な操作感がより流動的でインタラクティブになりました。
これらは単なる小さなデザインの調整ですが、私にとってはよりクリーンで、よりスムーズで、全体的により洗練されたものになりました。ご意見をお聞かせください。また、他に提案があればお気軽にお知らせください！
以下にコードを示します。
// 入力中インジケーター
/* 返信インジケーターの下にスペースを追加 */
.chat-replying-indicator-container {
order: -1; /* 返信インジケーターをテキストエリアの上に移動 */
}
.chat-composer__outer-container {
display: flex
;
align-items: center;
box-sizing: border-box;
width: 100%;
padding-inline: 0rem;
padding-bottom: 1rem;
}
.chat-message-collapser .chat-message-collapser-header {
display: none;
align-items: center;
}
.chat-message .onebox img:not(.ytp-thumbnail-image, .onebox-avatar-inline),
.chat-message img.onebox,
.chat-message .chat-uploads img,
.chat-message p img,
.chat-message aside.onebox .onebox-body .aspect-image-full-size,
.chat-message aside.onebox .onebox-body .aspect-image-full-size img,
.chat-message .chat-message-text p img:not(.emoji) {
object-fit: cover; /* border-radius を維持するためにコンテナをカバー */
max-height: 300px;
max-width: 90%;
width: unset;
overflow: hidden;
border-radius: 20px; /* 角丸 */
}
.chat-replying-indicator {
color: var(--primary-medium);
display: inline-flex;
font-size: 1em;
padding-bottom:10px;
}
.chat-replying-indicator-container {
margin-bottom: 10px; /* 必要に応じて値を調整 */
margin-top: -20px;
}
.chat-replying-indicator-container {
margin-top: -30px; /* 入力中でない場合のデフォルト位置 */
transition: margin-top 0.3s ease; /* スムーズな遷移 */
}
.chat-replying-indicator-container:has(.chat-replying-indicator__text) {
margin-top: 0px; /* 入力中の位置 */
}
追伸：これは特にモバイル向けです。
現在の見た目は以下の通りです。
