@charset "UTF-8"; /* チャット領域 */ #property-chatroom { min-height: 100%; background-color: #ffffff; } /* 日付ヘッダ */ #property-chatroom .chat-messages { margin: 90px 0 0; padding: 25px 25px 130px; } #property-chatroom .chat-messages .date-header { width: 70%; margin: 10px auto; padding: 0; line-height: 25px; font-size: 16px; text-align: center; color: #ffffff; background-color: #5a8aa2; } #property-chatroom .chat-messages .date-header { border-radius: 5px; } /* メッセージ(共通) */ #property-chatroom .chat-messages .contents { position: relative; } #property-chatroom .chat-messages .contents .destination_user { max-width: 70%; line-height: 11px; color: #34495e; white-space: normal; } #property-chatroom .chat-messages .contents .destination_user span { margin: 0 3px; font-size: 11px; line-height: 11px; } #property-chatroom .chat-messages .contents .speech-bubble { position: relative; display: inline-block; max-width: 70%; margin: 0; padding: 10px 15px; } #property-chatroom .chat-messages .contents .speech-bubble { border-radius: 20px; } #property-chatroom .chat-messages .contents .speech-bubble::before { position: absolute; content: ""; margin: auto 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; } #property-chatroom .chat-messages .contents .message { display: inline-block; line-height: 16px; font-size: 16px; white-space: pre-wrap; text-align: left; word-break: break-all; } #property-chatroom .chat-messages .contents .file { display: block; border: none; } #property-chatroom .chat-messages .contents .file img { display: block; border: none; } #property-chatroom .chat-messages .contents .file img { border-radius: 10px; } #property-chatroom .chat-messages .contents .file img::before { content:""; display: block; padding-top: 75%; } #property-chatroom .chat-messages .contents .file .file_name { color: #3d7cb9; white-space: normal; word-break: break-all; } #property-chatroom .chat-messages .contents .read_count { position: absolute; top: 5px; font-size: 10px; line-height: 10px; color: #444444; white-space: nowrap; padding: 0 5px; } #property-chatroom .chat-messages .contents .read_count.exist { color: #4444bb; cursor: pointer; } #property-chatroom .chat-messages .contents .post_time { position: absolute; bottom: 5px; font-size: 10px; line-height: 10px; color: #888888; white-space: nowrap; padding: 0 5px; } #property-chatroom .chat-messages .contents .remove { position: absolute; top: 0; font-size: 20px; color: #888888; cursor: pointer; } #property-chatroom .chat-messages .contents .tofolder { position: absolute; bottom: 20px; font-size: 25px; color: #5a8aa2; cursor: pointer; } /* メッセージ(相手側) */ #property-chatroom .chat-messages .contents { padding: 25px 0 15px 0; text-align: left; } #property-chatroom .chat-messages .contents .destination_user { margin: 0 auto 0 0; text-align: left; } #property-chatroom .chat-messages .contents .contractor_name { display: block; max-width: 70%; font-size: 12px; line-height: 12px; color: #888888; white-space: normal; } #property-chatroom .chat-messages .contents .speech-bubble { background-color: #e1e5e8; } #property-chatroom .chat-messages .contents .speech-bubble::before { top: 10px; right: auto; bottom: auto; left: -20px; border-left: none; border-right: 30px solid #e1e5e8; } #property-chatroom .chat-messages .contents .message { color: #3d7cb9; } #property-chatroom .chat-messages .contents .file .file_name { color: #3d7cb9; } #property-chatroom .chat-messages .contents .read_count { right: auto; left: 100%; } #property-chatroom .chat-messages .contents .post_time { right: auto; left: 100%; } #property-chatroom .chat-messages .contents .tofolder { right: -36px; left: auto; } /* メッセージ(自分側) */ #property-chatroom .chat-messages .contents.self { padding: 20px 0 5px 0; text-align: right; } #property-chatroom .chat-messages .contents.self .destination_user { margin: 0 0 0 auto; text-align: right; } #property-chatroom .chat-messages .contents.self .speech-bubble { background-color: #3d7cb9; } #property-chatroom .chat-messages .contents.self .speech-bubble::before { top: auto; right: -20px; bottom: 10px; left: auto; border-right: none; border-left: 30px solid #3d7cb9; } #property-chatroom .chat-messages .contents.self .message { color: #ffffff; } #property-chatroom .chat-messages .contents.self .file .file_name { color: #ffffff; } #property-chatroom .chat-messages .contents.self .read_count { left: auto; right: 100%; } #property-chatroom .chat-messages .contents.self .post_time { left: auto; right: 100%; } #property-chatroom .chat-messages .contents.self .remove { left: auto; right: -20px; } #property-chatroom .chat-messages .contents.self .tofolder { left: -36px; right: auto; } /* メッセージ(削除) */ #property-chatroom .chat-messages .contents.deleted .speech-bubble { opacity: 0.3; } /* メッセージ入力領域 */ #property-chatroom .message-input-form { position: fixed; bottom: 7vh; width: 100%; margin: 0; padding: 0; } #property-chatroom .message-input-form .upper { width: 100%; margin: 0; padding: 0; vertical-align: bottom; } #property-chatroom .message-input-form .upper { display: flex; display: -ms-flexbox; flex-flow: row nowrap; -ms-flex-flow: row nowrap; align-items: flex-end; -ms-flex-align: flex-end; } #property-chatroom .message-input-form .upper div { flex: 0 0 140px; display: block; height: 50px; margin: 0; border: none; background: none; text-align: center; background-color: #a9c6d1; } #property-chatroom .message-input-form .upper div[name=sendto] { border-radius: 0 10px 0 0; cursor: pointer; white-space: nowrap; } #property-chatroom .message-input-form .upper div[name=phrase] { border-radius: 10px 0 0 0; cursor: pointer; } #property-chatroom .message-input-form .upper div span { color: #34495e; font-size: 20px; line-height: 50px; } #property-chatroom .message-input-form .upper .spacer { flex: 1 1 auto; display: block; height: 1px; margin: 0; border: none; padding: 0; background-color: transparent; } #property-chatroom .message-input-form .lower { width: 100%; margin: 0; padding: 0; vertical-align: middle; background-color: #a9c6d1; } #property-chatroom .message-input-form .lower { display: flex; display: -ms-flexbox; flex-flow: row nowrap; -ms-flex-flow: row nowrap; } #property-chatroom .message-input-form textarea { flex: 1 1 auto; display: block; height: 60px; margin: 5px 0 5px 5px; border: none; padding: 3px 2px; font-size: 20px; line-height: 20px; resize: none; } #property-chatroom .message-input-form textarea { border-radius: 5px; } #property-chatroom .message-input-form textarea::placeholder { color: #bbbbbb; } #property-chatroom .message-input-form textarea:-ms-input-placeholder { color: #bbbbbb; } #property-chatroom .message-input-form textarea::-ms-input-placeholder { color: #bbbbbb; } #property-chatroom .message-input-form .lower button { flex: 0 0 60px; display: block; height: 60px; margin: 5px; border: none; background: none; text-align: center; } #property-chatroom .message-input-form .lower button span { color: #34495e; font-size: 30px; line-height: 26px; } #property-chatroom .message-input-form .lower input[type=file] { display: none; } #app.upmove #property-chatroom .chat-messages { padding: 10px 25px 200px; } #app.downmove #property-chatroom .chat-messages { padding: 10px 25px 200px; } #app.upmove #property-chatroom .message-input-form { animation: UpAnime 0.5s forwards; } #app.downmove #property-chatroom .message-input-form { animation: DownAnime 0.5s forwards; }