@charset "UTF-8"; /**************************** tab *************************/ .tabs { margin-top: 50px; margin: 0 auto; } .tab_item { width: calc(100% / 2); height: 50px; border-bottom: 5px solid #0070ca; background-color: #e0e0e0; line-height: 50px; font-size: 16px; text-align: center; color: #323743; display: block; float: left; text-align: center; font-weight: bold; transition: all 0.2s ease; } .msg_notification { display: none; } .tab_item:hover { opacity: 0.75; } input[name="tab_item"] { display: none; } .tab_content { display: none; clear: both; overflow: hidden; } #tabMyGroupOnMakeRoom:checked ~ #tab1_content, #tabAllGroupOnMakeRoom:checked ~ #tab2_content{ display: block; } #tabMyGroupOnAddUser:checked ~ #tab1_content, #tabAllGroupOnAddUser:checked ~ #tab2_content{ display: block; } #tabMyGroup:checked ~ #tab1_content, #tabAllGroup:checked ~ #tab2_content{ display: block; } #tabGroup:checked ~ #tab1_content, #tabDM:checked ~ #tab2_content{ display: block; } .tabs input:checked + .tab_item { background-color: #0070ca; color: #fff; } /**************************** chat list *************************/ .chat_list ul { padding: 0; margin-top: 1rem; } .chat_list img { width: 90px; max-height: 60px; } .chat_list ul li { list-style: none; border-bottom: 1px solid #e2e8f0; position: relative; } .chat_list ul li:first-child { border-top: 1px solid #e2e8f0; } .chat_list .chat_item_t, .chat_list .chat_item_desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat_item_l { margin: 0 15px; } .chat_item_m { white-space: nowrap; overflow: hidden; width: calc(100% - 160px); } .chat_item_r { padding-left: 0; text-align: center; position: absolute; right: 0px; } #searchList { margin-bottom: 140px; overflow: hidden; } /* リスト */ .chat_list .chat_item:hover { background: aliceblue; } /* サムネイル画像 */ .chat_item_l .thumbnail { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; margin: 0 auto; } .chat_item_l .thumbnail img{ width: 50px; height: 50px; } .chat_item_l .thumbnail4 img { width: 25px; height: 25px; float: left; } .chat_item_l .thumbnail3 .img_wrap:nth-child(1) { width: 25px; height: 50px; position: relative; overflow: hidden; float: left; } .chat_item_l .thumbnail3 .img_wrap:nth-child(1) img { width: 50px; height: 50px; position: absolute; left: -12px; } .chat_item_l .thumbnail3 .img_wrap:nth-child(2) { width: 25px; height: 25px; position: relative; overflow: hidden; float: left; } .chat_item_l .thumbnail3 .img_wrap:nth-child(2) img, .chat_item_l .thumbnail3 .img_wrap:nth-child(3) img { width: 25px; height: 30px; } .chat_item_l .thumbnail3 .img_wrap:nth-child(3) { width: 25px; height: 25px; position: relative; overflow: hidden; float: left; } .chat_item_l .thumbnail2 .img_wrap:nth-child(1) { width: 25px; height: 50px; position: relative; overflow: hidden; float: left; } .chat_item_l .thumbnail2 .img_wrap:nth-child(2) { width: 25px; height: 50px; position: relative; overflow: hidden; } .chat_item_l .thumbnail2 .img_wrap img { width: 50px; height: 50px; position: absolute; left: -12px; } .chat_item { height: 90px; } .chat_list li { list-style: none; } .chat_list a { color: #323743; } .chat_make_room a { color: #323743; } /* タイトル(グループ名、個人名) */ .chat_item_ttl, .chat_item_num { font-weight: bold; } /* 投稿時間 */ .chat_item_time { font-weight: 600; text-align: center; } /* 未読件数 */ .chat_item_unread { max-width: 60px; text-align: center; background-color: #ff4747; color: #fff; padding: 2px 10px; margin: 5px auto; border-radius: 30px; } /* 既読 */ .already_read { background-color: #f1f2f2; } /* ダウンロードボタン*/ .fa-download { width: 100%; } /**************************** make room *************************/ .chat_list .category { text-align: left; font-size: 1.4rem; height: 30px; font-size: 16px; cursor: pointer; position: relative; line-height: 30px; background: #c4c4c4; padding-left: 10px; } .category_name { white-space: nowrap; overflow: scroll; width: 90%; } .chat_list .category.open::after { content: "\f106"; } .chat_list .category::after { position: absolute; top: 0; right: 10px; content: "\f107"; font: 25px FontAwesome; } /* お気に入り */ .star.active:before { content: "\f005"; font: 26px FontAwesome; font-family: "Font Awesome 5 Free"; font-weight: 900; color: #F5D256; padding: 20px; } .star.disable:before { content: "\f005"; font: 26px FontAwesome; font-family: "Font Awesome 5 Free"; font-weight: 400; color: #C4C4C4; padding: 20px; } /* メンバー選択チェックボックス */ .chat_item_l_chk { height: 100%; display: table; margin-right: 20px; width: 50px; } .checkbox { text-align: center; display: table-cell; vertical-align: middle; } .checkbox-input { display: none; } .checkbox-parts { position: relative; } .checkbox-parts::before { display: block; position: absolute; border: 2px solid #0070ca; content: ""; width: 40px; height: 40px; border-radius: 50%; top: 5px; right: 0; bottom: 0; left: 0; margin: auto; } .checkbox-input:checked + .checkbox-parts::after { display: block; position: absolute; content: "\f107"; font: 40px FontAwesome; color: white; width: 40px; height: 40px; top: 5px; right: 0; bottom: 0; left: 0; margin: auto; background: #0070ca; border-radius: 50%; } /* ルームボタン */ .make_room_btn button, .make_room_confirm_btn button, .add_user_confirm_btn button, .add_user_btn button { height: 60px; position: fixed; bottom: 0; width: 100%; background: #0070ca; color: #fff; border: none; font-size: 18px; max-width: 1280px; } .select_member { font-size: 14px; } #chat_make_room_confirm .room_name, #chat_change_room_name .room_name { width: 90%; margin: 0 auto; } #chat_make_room_confirm .room_name h2, #chat_change_room_name .room_name h2 { margin-top: 20px; font-size: 18px; } #chat_make_room_confirm .chat_list h2, #chat_add_user_confirm .chat_list h2 { font-size: 18px; } #chat_make_room_confirm .chat_list, #chat_add_user_confirm .chat_list { padding: 20px 0; width: 90%; margin: 0 auto; } /* ルーム名入力フォーム */ .input_name_room { padding-left: 10px; width: 100%; border: none; border-bottom: 1px solid #bdbdbd; height: 40px; margin-bottom: 20px; } /* ルーム名変更ボタン */ .change_room_name_btn { text-align: center; } .change_room_name_btn button { text-align: center; height: 48px; width: 172px; background: #0070ca; color: #fff; border: none; font-size: 18px; } /**************************** chat room *************************/ #chat_room { margin-top: 150px; } .chat_room_src_form input { padding-left: 10px; border: 1px solid #bdbdbd; border-radius: 5px; height: 40px; margin: 10px 0; padding-left: 35px; width: 100%; } .chat_room_src_form { position: relative; margin: 0 5px; } .chat_room_src_form .src_icon { position: absolute; top: 23px; left: 10px; background-image: url("../icon/icon_search.png"); background-size: contain; width: 16px; height: 16px; } .chat_room_src_form .cancel { width: 120px; font-size: 14px; padding: 0 10px; color: #8f8f8f; text-align: center; } /* ユーザーリスト */ .user_list { position: fixed; top: 60px; background: #fff; width: 100%; overflow-x: scroll; z-index: 2; } .user_list .user_item { margin: 10px; text-align: center; } .user_list .user_item span { width: 60px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; } .user_list .user_item a { color: #323743; } /* ユーザーリストフィルター */ #filter .user_item .img_wrap { position: relative; } #filter .user_item .img_wrap.filter:after { position: absolute; content: "\f107"; font: 50px FontAwesome; width: 50px; height: 50px; color: #fff; left: 5px; background: #0070ca82; border-radius: 50%; } .user_list .user_item img { width: 50px; height: 50px; border-radius: 50%; margin: 0 auto; } .room_container { padding: 0; background: #f3f3f3; overflow: hidden; margin: 20px auto; margin-bottom: 140px; } /* 会話部分 */ .room_contents { padding: 10px; overflow: hidden; line-height: 150%; } .scroll { overflow-y: scroll; } /* 相手の会話 */ .room_left { width: fit-content; position: relative; margin-bottom: 20px; max-width: 70%; clear: both; } /* 既読 */ .room_left .read { position: absolute; height: 48px; top: 30px; right: -70px; font-size: 12px; } /* 未読数 */ .room_left .unread { position: absolute; height: 48px; top: 22px; right: -80px; font-size: 12px; } .room_right .unread { position: absolute; height: 48px; text-align: right; top: -10px; left: -10px; font-size: 12px; } .unread span { background: #c4c4c4; color: #fff; border-radius: 15px; padding: 0 5px; min-width: 25px; height: 25px; text-align: center; line-height: 25px; } /* アイコン画像 */ .room_left figure { width: 50px; position: absolute; top: 0; left: 0; padding: 0; margin: 0; } .room_left figure img { border-radius: 50%; width: 50px; height: 50px; } .room_left .img_wrap { display: table-cell; text-align: center; border-radius: 8px; line-height: 140px; overflow: hidden; } .room_right .img_wrap { display: block; text-align: center; border-radius: 8px; line-height: 140px; margin-left: 80px; overflow: hidden; } .img_wrap img { width: 100%; vertical-align: middle; } .room_left-text { margin-left: 70px; position: relative; } .room_left-text .name { font-weight: bold; font-size: 14px; margin-bottom: 5px; } /* コメントエリア */ .room_left-text .text { margin: 0; position: relative; padding: 10px; border-radius: 8px; background-color: #ffffff; font-size: 18px; word-break: break-word; } .room_left-text.latest .text, .room_left-text.latest .img_wrap { box-shadow: 5px 5px 5px rgb(0 0 0 / 40%); } /* 吹き出し */ .room_left-text .text::after { content: ""; position: absolute; display: block; width: 0; height: 0; left: -10px; top: 5px; border-right: 10px solid #ffffff; border-top: 10px solid #ffffff; border-bottom: 10px solid transparent; border-left: 10px solid transparent; } /* 既読エリア */ .room_left .date { position: absolute; width: 110px; text-align: left; top: 30px; right: -120px; font-size: 12px; } /* 自分の会話 */ .room_right { margin-left: 40%; position: relative; margin-bottom: 20px; max-width: 75%; float: right; margin-right: 15px; clear: both; } .room_right .date { position: absolute; width: 80px; text-align: right; top: 0px; left: -10px; bottom: 0px; font-size: 12px; } .room_right .read { position: absolute; height: 48px; text-align: right; top: 0px; left: 10px; font-size: 12px; } /* コメントエリア */ .room_right .text { padding: 10px; border-radius: 8px; background-color: #0070ca; color: #fff; margin: 0; margin-left: 110px; font-size: 18px; word-break: break-word; } /* 吹き出し */ .room_right .text::after { content: ""; position: absolute; right: -10px; top: 5px; border-left: 10px solid #0070ca; border-right: 10px solid transparent; border-top: 10px solid #0070ca; border-bottom: 10px solid transparent; } /* 日付 */ .room_right .date { position: absolute; width: 110px; text-align: right; top: 0px; left: -10px; bottom: 0px; font-size: 12px; } /* システムメッセージ */ .sys_msg { background: rgb(198, 198, 198, 0.5); color: #909090; padding: 2px 10px; width: 200px; border-radius: 10px; margin: 10px auto 20px auto; font-size: 14px; clear: both; line-height: normal; } /* 通話エリア */ .collabo_area_container { padding-bottom: 20px; width: 320px; margin: 0 auto; display: table; } .collabo_date span { font-size: 12px; } .collabo_area .collabo_desc { background: rgb(0, 112, 202, 0.6); border-radius: 5px; padding: 5px 10px; } .collabo_area.disable .collabo_desc { background: rgb(91, 102, 111, 0.6); } .collabo_desc .collabo_user_list img { width: 30px; height: 30px; border-radius: 50%; margin: 5px; border: 2px solid #fff; } .collabo_user_list .num { width: 30px; height: 30px; border-radius: 15px; background: #b8b8b8; text-align: center; color: #fff; margin: 5px; } .collabo_user_list .num span { line-height: 30px; } .collabo_room_name { color: #fff; max-width: 300px; } .collabo_room_name span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .collabo_room_name span:nth-child(2) { white-space: nowrap; } .collabo_time { color: #fff; font-weight: 100; } .collabo_area .collabo_btn { margin: 10px auto; text-align: center; } .collabo_area .collabo_btn button { width: 100%; line-height: 45px; background: #0070ca; border: none; color: #fff; border-radius: 25px; font-size: 18px; outline: none; } .collabo_area.disable .collabo_btn button { background: #5b666f; } .message_input_send { border-radius: 8px; margin: auto 10px; text-align: center; height: 45px; width: 90px; background: #0070CA; color: #fff; border: none; font-size: 18px; } .dow { margin-left: 10px; } /**************************** modal *************************/ /* メニューモーダル */ .modal-body #modal_image { width: 100%; height: 100%; } .menu_modal .modal-body ul { list-style: none; padding-left: 0; } .menu_modal .modal-body ul li img { max-width: 28px; max-height: 28px; width: 100%; height: auto; margin-right: 10px; } .menu_modal .modal-body ul li { border-bottom: 1px solid #c6c6c6; height: 40px; } .menu_modal .modal-body ul li a { line-height: 40px; display: block; color: #323743; } .menu_modal .modal-body ul li a:hover { background: aliceblue; } @media screen and (max-width: 768px) { /* chat item */ .tab_item { font-size: 16px; margin-bottom: 1rem; } .chat_item_ttl { font-size: 16px; } .chat_item_ttl, .chat_item_num { font-size: 16px; } .chat_item_m { font-size: 14px; } .chat_item_time, .chat_item_unread { font-size: 14px; } .chat_item { height: 70px; } /* room button */ .make_room_btn button, .make_room_confirm_btn button, .add_user_confirm_btn button, .add_user_btn button { font-size: 16px; } /* check radio */ .checkbox-parts::before { width: 30px; height: 30px; } .checkbox-input:checked + .checkbox-parts::after { font: 30px FontAwesome; width: 30px; height: 30px; } .chat_item_l_chk { margin-right: 15px; width: 30px; } #chat_make_room_confirm .room_name h2, #chat_change_room_name .room_name h2 { font-size: 16px; } #chat_make_room_confirm .chat_list h2, #chat_add_user_confirm .chat_list h2 { font-size: 16px; } /* ルーム名入力フォーム */ .input_name_room { font-size: 14px; } /* チャットルーム */ .room_left figure img { width: 40px; height: 40px; } .room_left-text { margin-left: 50px; } .room_right { max-width: 95%; } .room_left { max-width: 75%; } }