html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
#your_container{
/* 高さや幅など、好きな様に設定
bms_messages_containerの方で、縦横いっぱいに広がってくれるので、
ここで充てた高さと横幅がそのままスタイルになる仕組み */
height:100vh;/*ここはご自由に*/
width: 100vw;/*ここはご自由に*/
}
/* チャットの外側部分① */
#bms_messages_container{
height:94.5vh;/*your_containerに対して100%になる */
width: 100vw;/*your_containerに対して100%になる */
background-color: #eee;
display: flex;
flex-direction: column;
}
/* ヘッダー部分② */
#bms_chat_header {
padding: 6px;/*隙間調整*/
font-size: 16px;
height: 34px;
background: #ddd;
border: 1px solid #ccc;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
/* ステータスマークとユーザー名 */
#bms_chat_user_status {
float: left;/* bms_chat_headerに対して左寄せ */
}
/* ステータスマーク */
#bms_status_icon {
float: left;/* bms_chat_user_statusに対して左寄せ */
line-height: 2em;/*高さ調整*/
}
/* ユーザー名 */
#bms_chat_user_name {
float: left;/* bms_chat_user_statusに対して左寄せ */
line-height: 2em;/*高さ調整*/
padding-left: 8px;
}
/* タイムライン部分③ */
#bms_messages {
overflow: auto;
height: 100vh;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
background-color: #eee;
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2) inset;
position: relative;
bottom: 1em;
margin-top: 63px;
flex: 1;
overflow-y: auto;
}
/* メッセージ全般のスタイル */
.bms_message {
margin: 0px;
padding: 0 14px;/*吹き出しがタイムラインの側面にひっつかない様に隙間を開ける*/
font-size: 16px;
word-wrap: break-word;/* 吹き出し内で自動で改行 */
white-space: normal;/*指定widthに合わせて、文字を自動的に改行*/
}
/* メッセージ１（左側） */
.bms_left {
float: left;/*吹き出しをbms_messagesに対して左寄せ*/
line-height: 1.3em;
}
/* メッセージ２（右側） */
.bms_right {
float: right;/*吹き出しをbms_messagesに対して右寄せ*/
line-height: 1.3em;
}
/* 回り込みを解除 */
.bms_clear {
clear: both; /* 左メッセージと右メッセージの回り込み(float)の効果の干渉を防ぐために必要（これが無いと、自分より下のメッセージにfloatが影響する） */
}
/* テキストエリア、送信ボタン④ */
#bms_send {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
/* padding: 4px;*/
background-color:#eee;/*タイムラインの色と同じにする*/
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
border-bottom: 1px solid #ddd;
margin-top: auto; /* 空いているスペースを自動的に埋める */
justify-content: space-between;
padding: 10px;
}
#bms_send_message{
width: calc(100% - 75px);/*常に送信ボタンの横幅を引いたサイズに動的に計算*/
line-height: 16px;
height: 48px;
padding: 14px 6px 0px 6px;/*文字がテキストエリアの中心になる様に隙間調整*/
border: 1px solid #ccc;
border-radius: 4px;/*角丸*/
text-align: left;/*文字を左寄せ*/
box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.2) inset;/*内側に影を入れてテキストエリアらしくした*/
box-sizing: border-box;/*paddingとborderの要素の高さと幅の影響をなくす（要素に高さと幅を含める）*/
margin-right: 2vh;
}
#bms_send_btn {
width: 72px;
height: 48px;
font-size: 16px;
line-height: 3em;
float: right;/*bms_sendに対して右寄せ*/
color: #fff;
font-weight: bold;
background: #bcbcbc;
text-align: center;/*文字をボタン中央に表示*/
border: 1px solid #bbb;
border-radius: 4px;/*角丸*/
box-sizing: border-box;/*paddingとborderの要素の高さと幅の影響をなくす（要素に高さと幅を含める）*/
margin-right: 2vh;
}
#bms_send_btn:hover {
background: #13178E; /*マウスポインタを当てた時にアクティブな色になる*/
cursor: pointer;/*マウスポインタを当てた時に、カーソルが指の形になる*/
}
/*
*追加
*/
.bms_message_box{
margin-top: 20px;/*上下の吹き出しがひっつかない様に隙間を入れる*/
max-width: 100%;/*文字が長くなった時に吹き出しがタイムラインからはみ出さない様にする*/
font-size: 16px;
}
/*
*追加
*/
.bms_message_content{
padding: 20px;/*文字や画像（コンテンツ）の外側に隙間を入れる*/
}
/* メッセージ１（左側） */
.bms_left {
float: left;/*吹き出しをbms_messagesに対して左寄せ*/
line-height: 1.3em;
}
/*
*追加
*/
.bms_left .bms_message_box {
color: #333;/*テキストを黒にする*/
background: #fff;
border: 2px solid #13178E;
border-radius: 30px 30px 30px 0px;/*左下だけ尖らせて吹き出し感を出す*/
margin-right: 50px;/*左側の発言だとわかる様に、吹き出し右側に隙間を入れる*/
}
/* メッセージ２（右側） */
.bms_right {
float: right;/*吹き出しをbms_messagesに対して右寄せ*/
line-height: 1.3em;
}
/*
*追加
*/
.bms_right .bms_message_box {
color: #fff;/*テキストを白にする*/
background: #13178E;
border: 2px solid #13178E;
border-radius: 30px 30px 0px 30px;/*右下だけ尖らせて吹き出し感を出す*/
margin-left: 50px;/*右側の発言だとわかる様に、吹き出し左側に隙間を入れる*/
}
/* ローディング画面背景 */
.loader-bg {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background-color: #dadcdd;
display: flex;
justify-content: center;
align-items: center;
}
/* ローディングアニメーション */
.loader {
font-size: 10px;
margin: 50px auto;
text-indent: -9999em;
width: 11em;
height: 11em;
border-radius: 50%;
background: #ffffff;
background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
position: relative;
-webkit-animation: load3 1.4s infinite linear;
animation: load3 1.4s infinite linear;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.loader:before {
width: 50%;
height: 50%;
background: #ffffff;
border-radius: 100% 0 0 0;
position: absolute;
top: 0;
left: 0;
content: '';
}
.loader:after {
background: #dadcdd;
width: 75%;
height: 75%;
border-radius: 50%;
content: '';
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
@-webkit-keyframes load3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}