@charset "UTF-8"; /**************************** header *************************/ #collabo_header{ max-width: 1280px; height: 60px; position: fixed; top: 0; width: 100%; padding: 0 10px; background: #1D1D1D; z-index: 10; } .collabo_nav_l{ color: #fff; } .collabo_nav_r .img_wrap{ width: 45px; height: 45px; } .collabo_nav_r .img_wrap img{ width: 100%; height: 100%; } /**************************** main *************************/ #collabo_main { height: calc( 100vh - 180px ); position: relative; margin-bottom: 120px;} #collabo_main .user_list_wrap, #collabo_main .document_wrap, #overlay_user_list .user_list_wrap { height: 100%; background: #525252;} #collabo_main .user_list,#overlay_user_list .user_list { background: #525252; padding-bottom: 120px;} #collabo_main .user_list .img_wrap,#overlay_user_list .user_list .img_wrap{ position: absolute; top: 0; left: 0; right: 0; margin: 5px auto; height: 100%; } .user_item .name { position: absolute; top: 65px; left: 0; right: 0; color: #fff; width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 auto; } #collabo_main .user_list .img_wrap img, #overlay_user_list .user_list .img_wrap img{ width: 80px; height: 80px; border-radius: 50%; } .noscroll{ overflow: hidden; position: fixed;} .none{ display: none;} #collabo_main .user_item.host:before,#overlay_user_list .user_item.host:before{ content: ""; top: 0; right: 0; background: url("../icon/icon_host_tag.png"); position: absolute; z-index: 2; width: 64px; height: 64px; } .user_item { width: calc( 50% - 5px ); position: relative; text-align: center; border: 1px solid white; border-radius: 5px; margin: 5px auto; height: calc( 100vh / 3 ); line-height: calc( 100vh / 3 ); overflow: hidden; } .user_item a { display: block; height: 100%; } /**************************** overlay *************************/ .btn{ background-color: transparent; border: none; width: 60px; height: 60px; background-repeat: no-repeat; background-position: center; } .btn.menu_btn{ background-image: url("../icon/icon_collabo_menu.png"); } .btn.user_btn{ background-image: url("../icon/icon_member_white.png"); } .btn.add_user_btn{ background-image: url("../icon/icon_add_member_white.png"); } .btn.menu_btn.hide,.btn.add_user_btn.hide,.btn.user_btn.hide{ transition: .3s; background-image: url("../icon/icon_close.png"); } .overlay { transition: .7s; position: absolute; top: 60px; width: 100%; right: -100%; background: #525252; height: 100vh; } .fixed{ position: fixed; } .overlay.slidein { top: 60px; right: 0; left: 0; background: #525252; height: 100vh; z-index: 5; width: 100%; max-width: 1280px; margin: 0 auto; } /* メニュー */ #overlay_menu .menu_wrap .menu .item { width: 50%; padding: 10px 0; } #overlay_menu .menu_wrap .menu { width: 220px; } #overlay_menu .menu_wrap .menu .item a{ text-align: center; color: #fff; } #overlay_menu .img_wrap { width: 80px; height: 80px; line-height: 80px; background: #0070CA; border-radius: 8px; margin: 5px; } #overlay_menu .overlay_menu_wrap { height: calc( 100vh - 180px ); } /* ユーザー追加 */ #overlay_add_user_list { position: fixed; z-index: 100; top: 0; background: white; height: 100%; width: 100%; max-width: 1280px; } #add_user_list .user_list li { list-style: none; border-bottom: 1px solid #E2E8F0; position: relative; } #add_user_list .user_list li:first-child { border-top: 1px solid #E2E8F0; } #add_user_list .chat_item_ttl { font-weight: bold; } #add_user_list .user_item { height: 90px; } #add_user_list .user_item_l_chk { height: 100%; display: table; margin-right: 20px; width: 50px; } #add_user_list .checkbox-parts { position: relative; } #add_user_list .checkbox { text-align: center; display: table-cell; vertical-align: middle; } #add_user_list .checkbox-input { display: none; } #add_user_list .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; } #add_user_list .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%; } #add_user_list .user_item_l { margin: 0 15px; } #add_user_list .chat_item_l .thumbnail { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; margin: 0 auto; } #add_user_list .user_item_l .thumbnail img { width: 50px; height: 50px; border-radius: 50%; } #overlay_add_user_list a { color: #323743; } /**************************** zoomin zoomout *************************/ .s_ac .img_wrap{ width: 40px; height: 40px; border-radius: 5px; margin: 5px; line-height: 36px; text-align: center; } .s_ac .img_wrap img{ width: 35px; height: 35px; } .s_ac { position: fixed; top: 60px; z-index: 2; height: calc( 100% - 180px ); } .s_ac_c { margin: auto 0; } /**************************** modal *************************/ #captyaModal .modal-header span, #changeHostModal .modal-header span, #hostRequestModal .modal-header span { width: 100%; text-align: center; font-weight: bold; font-size: 20px; } #captyaModal .modal-body, #changeHostModal .modal-body, #hostRequestModal .modal-body { text-align: center; } #captyaModal .modal-footer button { width: 30%; height: 60px; border-radius: 10px; } #changeHostModal .modal-footer button, #hostRequestModal .modal-footer button { width: 50%; height: 50px; border-radius: 10px; } /**************************** footer *************************/ #collabo_footer{ max-width: 1280px; background: #1D1D1D; height: 120px; margin-top: 20px; position: fixed; bottom: 0; width: 100%; border:none; z-index: 10; } #collabo_footer .footer-wrap{ margin: 0 auto; height: 100%; max-width: 300px; } #collabo_footer .footer_item a{ display: inline-block; } #collabo_footer .img_wrap{ width: 60px; height: 60px; border-radius: 50%; line-height: 55px; } /**************************** footer-menu *************************/ #collabo_footer_menu { transition: .7s; max-width: 1280px; height: 70px; position: fixed; width: 100%; margin: 0; border: none; bottom: 120px; z-index: 3; } #collabo_footer_menu.hide{ transition: .7s; } #collabo_footer_menu .footer_menu_btn{ background-color: white; border: 1px solid #7A7A7A; border-radius: 5px 5px 0 0; width: 80px; height: 40px; background-image: url(../icon/icon_arrow_down.png); background-repeat: no-repeat; background-position: center; position: absolute; bottom: 70px; } #collabo_footer_menu .footer_menu_btn.hide{ background-image: url(../icon/icon_arrow_up.png); } #collabo_footer_menu .footer_menu-wrap { background: #1D1D1D; height: 40px; } #collabo_footer_menu .footer_menu_item .img_wrap { width: 48px; height: 48px; line-height: 45px; border-radius: 8px; text-align: center; margin: 0 5px; } #collabo_footer_menu .footer_menu_item .img_wrap.wide { width: 140px; height: 48px; line-height: 45px; border-radius: 8px; text-align: center; margin: 0 5px; color: #fff; } @media screen and (max-width: 768px){ #add_user_list .user_item_ttl{ font-size: 16px; } #add_user_list .user_item_ttl{ font-size: 16px; } #add_user_list .user_item_m { font-size: 14px; } #add_user_list .user_item { height: 70px; } /* check radio */ #add_user_list .checkbox-parts::before { width: 30px; height: 30px; } #add_user_list .checkbox-input:checked + .checkbox-parts::after { font: 30px FontAwesome; width: 30px; height: 30px; } #add_user_list .user_item_l_chk { margin-right: 15px; width: 30px; } }