Commit 77fb1c5d by Kim Peace

Merge branch 'design' into 'release_sp3'

Design

See merge request !5
parents 64d2007a 2938a08d
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title>
<link rel="stylesheet" href="./css/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/archive.css">
<link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css">
</head>
<body>
<!-- ナビメニュー -->
<nav>
<div class="row h-100 align-items-center">
<div class="col-4 pr-0">
<div class="nav-item">
<div class="nav_prev">
<a href="archive.html"><span>アーカイブ</span></a>
</div>
</div>
</div>
<div class="col-4 p-0">
<div class="nav-item p-0">
<h1 class="nav-ttl">詳細</h1>
</div>
</div>
<div class="col-4 pl-0">
<div class="nav-item text-right">
</div>
</div><!-- .col -->
</div><!-- .row -->
</nav><!-- nav -->
<!-- コンテンツ -->
<main id="archive">
<!-- アーカイブ詳細 -->
<div class="archive_detail">
<div class="archive_detail_hero text-center">
<div class="img_wrap">
<img src="img/capture.png" alt="サンプル画像">
</div>
<div class="img_wrap">
<img src="img/controller.png" alt="サンプル画像">
</div>
</div>
<div class="archive_detail_desc">
<div class="archive_detail_fl_nm item">
<h2 class="ttl">ファイル名</h2>
<span>filename.mp4</span>
</div>
<div class="archive_detail_sv_date item">
<h2 class="ttl">保存日</h2>
<span>2021/02/24 16:14</span>
</div>
<div class="archive_detail_room_nm item">
<h2 class="ttl">チャットルーム名</h2>
<span>チャットルーム名チャットルーム名チャットルーム名チャットルーム名</span>
</div>
<div class="archive_detail_sv_user item">
<h2 class="ttl">保存ユーザー</h2>
<div class="d-flex flex-row">
<div class="d-flex flex-column">
<img src="img/noImage.png" alt="プロフィール画像">
<span>名前名前名前名前名前名前</span>
</div>
</div>
</div>
<div class="archive_detail_user_list item">
<h2 class="ttl">参加ユーザー</h2>
<ul class="d-flex flex-row">
<li>
<div class="d-flex flex-column">
<img src="img/noImage.png" alt="プロフィール画像">
<span>名前名前名前名前名前名前</span>
</div>
</li>
<li>
<div class="d-flex flex-column">
<img src="img/noImage.png" alt="プロフィール画像">
<span>名前名前</span>
</div>
</li>
<li>
<div class="d-flex flex-column">
<img src="img/noImage.png" alt="プロフィール画像">
<span>名前名前</span>
</div>
</li>
<li>
<div class="d-flex flex-column">
<img src="img/noImage.png" alt="プロフィール画像">
<span>名前名前名前名前名前名前</span>
</div>
</li>
<li>
<div class="d-flex flex-column">
<img src="img/noImage.png" alt="プロフィール画像">
<span>名前名前名前名前名前名前</span>
</div>
</li>
<li>
<div class="d-flex flex-column">
<img src="img/noImage.png" alt="プロフィール画像">
<span>名前名前</span>
</div>
</li>
<li>
<div class="d-flex flex-column">
<img src="img/noImage.png" alt="プロフィール画像">
<span>名前名前</span>
</div>
</li>
<li>
<div class="d-flex flex-column">
<img src="img/noImage.png" alt="プロフィール画像">
<span>名前名前</span>
</div>
</li>
<li>
<div class="d-flex flex-column">
<img src="img/noImage.png" alt="プロフィール画像">
<span>名前名前</span>
</div>
</li>
<li>
<div class="d-flex flex-column">
<img src="img/noImage.png" alt="プロフィール画像">
<span>名前名前</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</main>
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/archive.js"></script>
<script src="./js/common.js"></script>
</body>
</html>
\ No newline at end of file
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title>
<link rel="stylesheet" href="./css/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/chat.css">
<link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css">
</head>
<body>
<!-- ナビメニュー -->
<nav>
<div class="row h-100 align-items-center">
<div class="col-4 pr-0">
<div class="nav-item">
<div class="nav_prev">
<a href="chat_add_user.html"><span>招待</span></a>
</div>
</div>
</div>
<div class="col-4 p-0">
<div class="nav-item p-0">
<h1 class="nav-ttl">ユーザー確認</h1>
</div>
</div>
<div class="col-4 pl-0">
<div class="nav-item text-right">
</div>
</div><!-- .col -->
</div><!-- .row -->
</nav><!-- nav -->
<!-- コンテンツ -->
<main id="chat_add_user_confirm">
<form action="chat_room.html" method="post">
<!-- 参加者一覧 -->
<div class="chat_list">
<h2>参加者</h2>
<ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前 太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前 太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前 太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前 太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前 太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前 太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前 太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前 太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前 太郎</span>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- ユーザー招待ボタン -->
<div class="add_user_btn">
<button type="button" name="button">招待</button>
</div>
</form>
</main>
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script>
</body>
</html>
\ No newline at end of file
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title>
<link rel="stylesheet" href="./css/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/chat.css">
<link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css">
</head>
<body>
<!-- ナビメニュー -->
<nav>
<div class="row h-100 align-items-center">
<div class="col-4 pr-0">
<div class="nav-item">
<div class="nav_prev">
<a href="chat_room.html"><span>ルーム</span></a>
</div>
</div>
</div>
<div class="col-4 p-0">
<div class="nav-item p-0">
<h1 class="nav-ttl">ルーム名</h1>
</div>
</div>
<div class="col-4 pl-0">
<div class="nav-item text-right">
</div>
</div><!-- .col -->
</div><!-- .row -->
</nav><!-- nav -->
<!-- コンテンツ -->
<main id="chat_change_room_name">
<form action="chat_room.html" method="post">
<!-- ルーム名入力 -->
<div class="room_name">
<label for="room_name">
<h2>ルーム名</h2>
</label>
<input type="text" class="input_name_room" name="room_name" placeholder="ルーム名を入力してください">
</div>
<!-- ルーム名変更ボタン -->
<div class="change_room_name_btn">
<button type="button" name="button">保存</button>
</div>
</form>
</main>
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script>
</body>
</html>
\ No newline at end of file
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title>
<link rel="stylesheet" href="./css/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/chat.css">
<link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css">
</head>
<body>
<!-- ナビメニュー -->
<nav>
<div class="row h-100 align-items-center">
<div class="col-4 pr-0">
<div class="nav-item">
<div class="nav_prev">
<a href="chat_make_room.html"><span>ルーム開設</span></a>
</div>
</div>
</div>
<div class="col-4 p-0">
<div class="nav-item p-0">
<h1 class="nav-ttl">チャット開始</h1>
</div>
</div>
<div class="col-4 pl-0">
<div class="nav-item text-right">
</div>
</div><!-- .col -->
</div><!-- .row -->
</nav><!-- nav -->
<!-- コンテンツ -->
<main id="chat_make_room_confirm">
<form action="chat_room.html" method="post">
<!-- ルーム名入力 -->
<div class="room_name">
<label for="room_name">
<h2>ルーム名</h2>
</label>
<input type="text" class="input_name_room" name="room_name" placeholder="ルーム名を入力してください">
</div>
<!-- 参加者一覧 -->
<div class="chat_list">
<h2>参加者</h2>
<ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎名前太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前 太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前 太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前 太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前 太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前 太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前 太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前 太郎</span>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- ルーム解説ボタン -->
<div class="make_room_btn">
<button type="button" name="button">
チャット開始</button>
</div>
</form>
</main>
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script>
</body>
</html>
\ No newline at end of file
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title>
<link rel="stylesheet" href="./css/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/collaboration.css">
<link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css">
</head>
<body>
<!-- ナビメニュー -->
<header id="collabo_header">
<div class="d-flex align-items-center h-100">
<div class="collabo_nav_l text-left w-100">
通話中
<span>15:20</span>
</div>
<div class="collabo_nav_r">
<div class="text-right d-flex align-items-center">
<button type="button" name="button" class="btn user_btn"></button>
<button type="button" name="button" class="btn add_user_btn"></button>
<button type="button" name="button" class="btn menu_btn"></button>
</div>
</div>
</div>
</header><!-- header -->
<!-- 拡大縮小機能 -->
<!--#include virtual="zoom.html" -->
<!-- コンテンツ -->
<main id="collabo_main">
<div class="document_wrap">
</div>
</main>
<!-- ユーザー追加オーバーレイ -->
<div id="overlay_add_user_list" class="none">
<nav>
<div class="row h-100 align-items-center">
<div class="col-4 pr-0">
<div class="nav-item">
<a href="#" class="close_btn">閉じる</a>
</div>
</div>
<div class="col-4 p-0">
<div class="nav-item p-0">
<h1 class="nav-ttl">ユーザー選択</h1>
</div>
</div>
<div class="col-4 pl-0">
<div class="nav-item text-right">
<a href="#" class="inv_btn">招待</a>
</div>
</div><!-- .col -->
</div><!-- .row -->
</nav><!-- nav -->
<!-- ユーザー検索 -->
<div class="search_form">
<form>
<input type="search" name="search" placeholder="ユーザー検索">
<span class="src_icon"></span>
<a href="#" class="cancel none">キャンセル</a>
</form>
</div>
<!-- ユーザーリスト -->
<div id="add_user_list"></div>
</div>
<!-- オーバーレイ メニュー -->
<!--#include virtual="collaboration_video_overlay_menu.html" -->
<!-- オーバーレイ ユーザーリスト -->
<div id="overlay_user_list" class="overlay noscroll">
<!--#include virtual="collabotarion_overlay_user_list.html" -->
</div>
<!-- キャプチャ モーダル -->
<!--#include virtual="modal_collabo_capture.html" -->
<!-- プロフィールモーダル -->
<!--#include virtual="modal_collabo_profile.html" -->
<!--#include virtual="modal_collabo_profile2.html" -->
<!-- ホスト変更モーダル -->
<!--#include virtual="modal_collabo_change_host.html" -->
<!-- ホストリクエストモーダル -->
<!--#include virtual="modal_collabo_host_request.html" -->
<!-- フッター -->
<footer id="collabo_footer_menu" class="active">
<button type="button" name="button" class="footer_menu_btn"></button>
<div class="footer_menu-wrap d-flex justify-content-around h-100">
<div class="d-flex align-items-center h-100">
<div class="footer_menu_item">
<a href="#">
<div class="img_wrap bg_blue">
<img src="icon/icon_collabo_pen_white.png" alt="ペン">
</div>
</a>
</div>
<div class="footer_menu_item">
<a href="#">
<div class="img_wrap bg_blue">
<img src="icon/icon_collabo_place_white.png" alt="場所">
</div>
</a>
</div>
<div class="footer_menu_item">
<a href="#">
<div class="img_wrap bg_blue">
<img src="icon/icon_collabo_delete_white.png" alt="削除">
</div>
</a>
</div>
</div>
<div class="d-flex align-items-center h-100">
<div class="footer_menu_item">
<a href="#">
<div class="img_wrap bg_gray">
<img src="icon/icon_collabo_rewind_white.png" alt="戻る">
</div>
</a>
</div>
<div class="footer_menu_item">
<a href="#">
<div class="img_wrap bg_gray">
<img src="icon/icon_collabo_forward_white.png" alt="進む">
</div>
</a>
</div>
</div>
</div>
</footer>
<!-- フッター -->
<!--#include virtual="footer_collabo.html" -->
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/common.js"></script>
<script src="./js/collaboration.js"></script>
</body>
</html>
\ No newline at end of file
<div id="overlay_menu" class="overlay fixed">
<div class="overlay_menu_wrap">
<div class="overlay_menu h-100 d-flex justify-content-center align-items-center">
<div class="menu_wrap">
<div class="menu d-flex flex-row flex-wrap">
<div class="item">
<a href="collaboration_picture.html" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_picture.png" alt="写真共有">
</div>
<span>写真共有</span>
</a>
</div>
<div class="item">
<a href="collaboration_video.html" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_videocam.png" alt="動画共有">
</div>
<span>動画共有</span>
</a>
</div>
<div class="item">
<a href="collaboration_documents.html" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_document.png" alt="文書共有">
</div>
<span>文書共有</span>
</a>
</div>
<div class="item">
<a href="collaboration_whiteboard.html" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_whiteboad.png" alt="落書き">
</div>
<span>落書き</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
<!-- ユーザーリスト -->
<div class="user_list">
<ul class="p-0">
<li class="d-flex align-items-center">
<div class="user_item d-flex flex-row align-items-center w-100">
<div class="user_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="user_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="user_item_m">
<div class="d-flex flex-column">
<div class="user_item_t">
<span class="chat_item_ttl">名前 太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="user_item d-flex flex-row align-items-center w-100">
<div class="user_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="user_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="user_item_m">
<div class="d-flex flex-column">
<div class="user_item_t">
<span class="chat_item_ttl">名前 太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="user_item d-flex flex-row align-items-center w-100">
<div class="user_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="user_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="user_item_m">
<div class="d-flex flex-column">
<div class="user_item_t">
<span class="chat_item_ttl">名前 太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="user_item d-flex flex-row align-items-center w-100">
<div class="user_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="user_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="user_item_m">
<div class="d-flex flex-column">
<div class="user_item_t">
<span class="chat_item_ttl">名前 太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="user_item d-flex flex-row align-items-center w-100">
<div class="user_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="user_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="user_item_m">
<div class="d-flex flex-column">
<div class="user_item_t">
<span class="chat_item_ttl">名前 太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="user_item d-flex flex-row align-items-center w-100">
<div class="user_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="user_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="user_item_m">
<div class="d-flex flex-column">
<div class="user_item_t">
<span class="chat_item_ttl">名前 太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="user_item d-flex flex-row align-items-center w-100">
<div class="user_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="user_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="user_item_m">
<div class="d-flex flex-column">
<div class="user_item_t">
<span class="chat_item_ttl">名前 太郎</span>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="user_item d-flex flex-row align-items-center w-100">
<div class="user_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="user_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="user_item_m">
<div class="d-flex flex-column">
<div class="user_item_t">
<span class="chat_item_ttl">名前 太郎</span>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
\ No newline at end of file
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title>
<link rel="stylesheet" href="./css/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/collaboration.css">
<link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css">
</head>
<body>
<!-- ナビメニュー -->
<header id="collabo_header">
<div class="d-flex align-items-center h-100">
<div class="collabo_nav_l text-left w-100">
通話中
<span>15:20</span>
</div>
<div class="collabo_nav_r">
<div class="text-right d-flex align-items-center">
<button type="button" name="button" class="btn user_btn"></button>
<button type="button" name="button" class="btn add_user_btn"></button>
<button type="button" name="button" class="btn menu_btn"></button>
</div>
</div>
</div>
</header><!-- header -->
<!-- 拡大縮小機能 -->
<!--#include virtual="zoom.html" -->
<!-- コンテンツ -->
<main id="collabo_main">
<div class="document_wrap">
</div>
</main>
<!-- ユーザー追加オーバーレイ -->
<div id="overlay_add_user_list" class="none">
<nav>
<div class="row h-100 align-items-center">
<div class="col-4 pr-0">
<div class="nav-item">
<a href="#" class="close_btn">閉じる</a>
</div>
</div>
<div class="col-4 p-0">
<div class="nav-item p-0">
<h1 class="nav-ttl">ユーザー選択</h1>
</div>
</div>
<div class="col-4 pl-0">
<div class="nav-item text-right">
<a href="#" class="inv_btn">招待</a>
</div>
</div><!-- .col -->
</div><!-- .row -->
</nav><!-- nav -->
<!-- ユーザー検索 -->
<div class="search_form">
<form>
<input type="search" name="search" placeholder="ユーザー検索">
<span class="src_icon"></span>
<a href="#" class="cancel none">キャンセル</a>
</form>
</div>
<!-- ユーザーリスト -->
<div id="add_user_list"></div>
</div>
<!-- オーバーレイ メニュー -->
<!--#include virtual="collaboration_video_overlay_menu.html" -->
<!-- オーバーレイ ユーザーリスト -->
<div id="overlay_user_list" class="overlay noscroll">
<!--#include virtual="collabotarion_overlay_user_list.html" -->
</div>
<!-- キャプチャ モーダル -->
<!--#include virtual="modal_collabo_capture.html" -->
<!-- プロフィールモーダル -->
<!--#include virtual="modal_collabo_profile.html" -->
<!--#include virtual="modal_collabo_profile2.html" -->
<!-- ホスト変更モーダル -->
<!--#include virtual="modal_collabo_change_host.html" -->
<!-- ホストリクエストモーダル -->
<!--#include virtual="modal_collabo_host_request.html" -->
<!-- フッター -->
<footer id="collabo_footer_menu" class="active">
<button type="button" name="button" class="footer_menu_btn"></button>
<div class="footer_menu-wrap d-flex justify-content-around h-100">
<div class="d-flex align-items-center h-100">
<div class="footer_menu_item">
<a href="#">
<div class="img_wrap bg_blue">
<img src="icon/icon_collabo_pen_white.png" alt="ペン">
</div>
</a>
</div>
<div class="footer_menu_item">
<a href="#">
<div class="img_wrap bg_blue">
<img src="icon/icon_collabo_place_white.png" alt="場所">
</div>
</a>
</div>
<div class="footer_menu_item">
<a href="#">
<div class="img_wrap bg_blue">
<img src="icon/icon_collabo_delete_white.png" alt="削除">
</div>
</a>
</div>
</div>
<div class="d-flex align-items-center h-100">
<div class="footer_menu_item">
<a href="#">
<div class="img_wrap bg_gray">
<img src="icon/icon_collabo_rewind_white.png" alt="戻る">
</div>
</a>
</div>
<div class="footer_menu_item">
<a href="#">
<div class="img_wrap bg_gray">
<img src="icon/icon_collabo_forward_white.png" alt="進む">
</div>
</a>
</div>
</div>
</div>
</footer>
<!-- フッター -->
<!--#include virtual="footer_collabo.html" -->
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/common.js"></script>
<script src="./js/collaboration.js"></script>
</body>
</html>
\ No newline at end of file
<div id="overlay_menu" class="overlay fixed">
<div class="overlay_menu_wrap">
<div class="overlay_menu h-100 d-flex justify-content-center align-items-center">
<div class="menu_wrap">
<div class="menu d-flex flex-row flex-wrap">
<div class="item">
<a href="collaboration_voice.html" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_headset.png" alt="音声共有">
</div>
<span>音声共有</span>
</a>
</div>
<div class="item">
<a href="collaboration_video.html" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_videocam.png" alt="動画共有">
</div>
<span>動画共有</span>
</a>
</div>
<div class="item">
<a href="collaboration_documents.html" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_document.png" alt="文書共有">
</div>
<span>文書共有</span>
</a>
</div>
<div class="item">
<a href="collaboration_whiteboard.html" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_whiteboad.png" alt="落書き">
</div>
<span>落書き</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title>
<link rel="stylesheet" href="./css/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/collaboration.css">
<link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css">
</head>
<body>
<!-- ナビメニュー -->
<header id="collabo_header">
<div class="d-flex align-items-center h-100">
<div class="collabo_nav_l text-left w-100">
通話中
<span>15:20</span>
</div>
<div class="collabo_nav_r">
<div class="text-right d-flex align-items-center">
<button type="button" name="button" class="btn user_btn"></button>
<button type="button" name="button" class="btn add_user_btn"></button>
<button type="button" name="button" class="btn menu_btn"></button>
</div>
</div>
</div>
</header><!-- header -->
<!-- 拡大縮小機能 -->
<!--#include virtual="zoom.html" -->
<!-- コンテンツ -->
<main id="collabo_main">
<div class="document_wrap">
</div>
</main>
<!-- ユーザー追加オーバーレイ -->
<div id="overlay_add_user_list" class="none">
<nav>
<div class="row h-100 align-items-center">
<div class="col-4 pr-0">
<div class="nav-item">
<a href="#" class="close_btn">閉じる</a>
</div>
</div>
<div class="col-4 p-0">
<div class="nav-item p-0">
<h1 class="nav-ttl">ユーザー選択</h1>
</div>
</div>
<div class="col-4 pl-0">
<div class="nav-item text-right">
<a href="#" class="inv_btn">招待</a>
</div>
</div><!-- .col -->
</div><!-- .row -->
</nav><!-- nav -->
<!-- ユーザー検索 -->
<div class="search_form">
<form>
<input type="search" name="search" placeholder="ユーザー検索">
<span class="src_icon"></span>
<a href="#" class="cancel none">キャンセル</a>
</form>
</div>
<!-- ユーザーリスト -->
<div id="add_user_list"></div>
</div>
<!-- オーバーレイ メニュー -->
<!--#include virtual="collaboration_video_overlay_menu.html" -->
<!-- オーバーレイ ユーザーリスト -->
<div id="overlay_user_list" class="overlay noscroll">
<!--#include virtual="collabotarion_overlay_user_list.html" -->
</div>
<!-- キャプチャ モーダル -->
<!--#include virtual="modal_collabo_capture.html" -->
<!-- プロフィールモーダル -->
<!--#include virtual="modal_collabo_profile.html" -->
<!--#include virtual="modal_collabo_profile2.html" -->
<!-- ホスト変更モーダル -->
<!--#include virtual="modal_collabo_change_host.html" -->
<!-- ホストリクエストモーダル -->
<!--#include virtual="modal_collabo_host_request.html" -->
<!-- フッター -->
<footer id="collabo_footer_menu" class="active">
<button type="button" name="button" class="footer_menu_btn"></button>
<div class="footer_menu-wrap d-flex justify-content-around h-100">
<div class="d-flex align-items-center h-100">
<div class="footer_menu_item">
<a href="#">
<div class="img_wrap bg_blue">
<img src="icon/icon_collabo_pen_white.png" alt="ペン">
</div>
</a>
</div>
<div class="footer_menu_item">
<a href="#">
<div class="img_wrap bg_blue">
<img src="icon/icon_collabo_place_white.png" alt="場所">
</div>
</a>
</div>
<div class="footer_menu_item">
<a href="#">
<div class="img_wrap bg_blue">
<img src="icon/icon_collabo_delete_white.png" alt="削除">
</div>
</a>
</div>
</div>
<div class="d-flex align-items-center h-100">
<div class="footer_menu_item">
<a href="#" data-toggle="modal" data-target="#captyaModal">
<div class="img_wrap wide bg_blue">
<img src="icon/icon_collabo_capture.png" alt="キャプチャ">
<span>キャプチャ</span>
</div>
</a>
</div>
</div>
</div>
</footer>
<!-- フッター -->
<!--#include virtual="footer_collabo.html" -->
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/common.js"></script>
<script src="./js/collaboration.js"></script>
</body>
</html>
\ No newline at end of file
<div id="overlay_menu" class="overlay fixed">
<div class="overlay_menu_wrap">
<div class="overlay_menu h-100 d-flex justify-content-center align-items-center">
<div class="menu_wrap">
<div class="menu d-flex flex-row flex-wrap">
<div class="item">
<a href="collaboration_voice.html" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_headset.png" alt="音声共有">
</div>
<span>音声共有</span>
</a>
</div>
<div class="item">
<a href="collaboration_picture.html" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_picture.png" alt="写真共有">
</div>
<span>写真共有</span>
</a>
</div>
<div class="item">
<a href="collaboration_documents.html" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_document.png" alt="文書共有">
</div>
<span>文書共有</span>
</a>
</div>
<div class="item">
<a href="collaboration_whiteboard.html" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_whiteboad.png" alt="落書き">
</div>
<span>落書き</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title>
<link rel="stylesheet" href="./css/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/collaboration.css">
<link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css">
</head>
<body>
<!-- ナビメニュー -->
<header id="collabo_header">
<div class="d-flex align-items-center h-100">
<div class="collabo_nav_l text-left w-100">
通話中
<span>15:20</span>
</div>
<div class="collabo_nav_r">
<div class="text-right d-flex align-items-center">
<button type="button" name="button" class="btn add_user_btn"></button>
<button type="button" name="button" class="btn menu_btn"></button>
</div>
</div>
</div>
</header><!-- header -->
<!-- コンテンツ -->
<main id="collabo_main">
<!--#include virtual="collabotarion_overlay_user_list.html" -->
</main>
<!-- ユーザー追加オーバーレイ -->
<div id="overlay_add_user_list" class="none">
<nav>
<div class="row h-100 align-items-center">
<div class="col-4 pr-0">
<div class="nav-item">
<a href="#" class="close_btn">閉じる</a>
</div>
</div>
<div class="col-4 p-0">
<div class="nav-item p-0">
<h1 class="nav-ttl">ユーザー選択</h1>
</div>
</div>
<div class="col-4 pl-0">
<div class="nav-item text-right">
<a href="#" class="inv_btn">招待</a>
</div>
</div><!-- .col -->
</div><!-- .row -->
</nav><!-- nav -->
<!-- ユーザー検索 -->
<div class="search_form">
<form>
<input type="search" name="search" placeholder="ユーザー検索">
<span class="src_icon"></span>
<a href="#" class="cancel none">キャンセル</a>
</form>
</div>
<!-- ユーザーリスト -->
<div id="add_user_list"></div>
</div>
<!-- オーバーレイ メニュー -->
<!--#include virtual="collaboration_voice_overlay_menu.html" -->
<!-- キャプチャ モーダル -->
<!--#include virtual="modal_collabo_capture.html" -->
<!-- プロフィールモーダル -->
<!--#include virtual="modal_collabo_profile.html" -->
<!--#include virtual="modal_collabo_profile2.html" -->
<!-- ホスト変更モーダル -->
<!--#include virtual="modal_collabo_change_host.html" -->
<!-- ホストリクエストモーダル -->
<!--#include virtual="modal_collabo_host_request.html" -->
<!-- フッター -->
<!--#include virtual="footer_collabo.html" -->
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/common.js"></script>
<script src="./js/collaboration.js"></script>
</body>
</html>
\ No newline at end of file
<div id="overlay_menu" class="overlay fixed">
<div class="overlay_menu_wrap">
<div class="overlay_menu h-100 d-flex justify-content-center align-items-center">
<div class="menu_wrap">
<div class="menu d-flex flex-row flex-wrap">
<div class="item">
<a href="collaboration_picture.html" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_picture.png" alt="写真共有">
</div>
<span>写真共有</span>
</a>
</div>
<div class="item">
<a href="collaboration_video.html" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_videocam.png" alt="動画共有">
</div>
<span>動画共有</span>
</a>
</div>
<div class="item">
<a href="collaboration_documents.html" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_document.png" alt="文書共有">
</div>
<span>文書共有</span>
</a>
</div>
<div class="item">
<a href="collaboration_whiteboard.html" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_whiteboad.png" alt="落書き">
</div>
<span>落書き</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title>
<link rel="stylesheet" href="./css/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/collaboration.css">
<link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css">
</head>
<body>
<!-- ナビメニュー -->
<header id="collabo_header">
<div class="d-flex align-items-center h-100">
<div class="collabo_nav_l text-left w-100">
通話中
<span>15:20</span>
</div>
<div class="collabo_nav_r">
<div class="text-right d-flex align-items-center">
<button type="button" name="button" class="btn user_btn"></button>
<button type="button" name="button" class="btn add_user_btn"></button>
<button type="button" name="button" class="btn menu_btn"></button>
</div>
</div>
</div>
</header><!-- header -->
<!-- 拡大縮小機能 -->
<!--#include virtual="zoom.html" -->
<!-- コンテンツ -->
<main id="collabo_main">
<div class="whiteboard_wrap">
</div>
</main>
<!-- ユーザー追加オーバーレイ -->
<div id="overlay_add_user_list" class="none">
<nav>
<div class="row h-100 align-items-center">
<div class="col-4 pr-0">
<div class="nav-item">
<a href="#" class="close_btn">閉じる</a>
</div>
</div>
<div class="col-4 p-0">
<div class="nav-item p-0">
<h1 class="nav-ttl">ユーザー選択</h1>
</div>
</div>
<div class="col-4 pl-0">
<div class="nav-item text-right">
<a href="#" class="inv_btn">招待</a>
</div>
</div><!-- .col -->
</div><!-- .row -->
</nav><!-- nav -->
<!-- ユーザー検索 -->
<div class="search_form">
<form>
<input type="search" name="search" placeholder="ユーザー検索">
<span class="src_icon"></span>
<a href="#" class="cancel none">キャンセル</a>
</form>
</div>
<!-- ユーザーリスト -->
<div id="add_user_list"></div>
</div>
<!-- オーバーレイ メニュー -->
<!--#include virtual="collaboration_video_overlay_menu.html" -->
<!-- オーバーレイ ユーザーリスト -->
<div id="overlay_user_list" class="overlay noscroll">
<!--#include virtual="collabotarion_overlay_user_list.html" -->
</div>
<!-- キャプチャ モーダル -->
<!--#include virtual="modal_collabo_capture.html" -->
<!-- プロフィールモーダル -->
<!--#include virtual="modal_collabo_profile.html" -->
<!--#include virtual="modal_collabo_profile2.html" -->
<!-- ホスト変更モーダル -->
<!--#include virtual="modal_collabo_change_host.html" -->
<!-- ホストリクエストモーダル -->
<!--#include virtual="modal_collabo_host_request.html" -->
<!-- フッター -->
<footer id="collabo_footer_menu" class="active">
<button type="button" name="button" class="footer_menu_btn"></button>
<div class="footer_menu-wrap d-flex justify-content-around h-100">
<div class="d-flex align-items-center h-100">
<div class="footer_menu_item">
<a href="#">
<div class="img_wrap bg_blue">
<img src="icon/icon_collabo_pen_white.png" alt="ペン">
</div>
</a>
</div>
<div class="footer_menu_item">
<a href="#">
<div class="img_wrap bg_blue">
<img src="icon/icon_collabo_place_white.png" alt="場所">
</div>
</a>
</div>
<div class="footer_menu_item">
<a href="#">
<div class="img_wrap bg_blue">
<img src="icon/icon_collabo_delete_white.png" alt="削除">
</div>
</a>
</div>
</div>
<div class="d-flex align-items-center h-100">
<div class="footer_menu_item">
</div>
<div class="footer_menu_item">
</div>
</div>
</div>
</footer>
<!-- フッター -->
<!--#include virtual="footer_collabo.html" -->
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/common.js"></script>
<script src="./js/collaboration.js"></script>
</body>
</html>
\ No newline at end of file
<div id="overlay_menu" class="overlay fixed">
<div class="overlay_menu_wrap">
<div class="overlay_menu h-100 d-flex justify-content-center align-items-center">
<div class="menu_wrap">
<div class="menu d-flex flex-row flex-wrap">
<div class="item">
<a href="collaboration_voice.html" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_headset.png" alt="音声共有">
</div>
<span>音声共有</span>
</a>
</div>
<div class="item">
<a href="collaboration_video.html" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_videocam.png" alt="動画共有">
</div>
<span>動画共有</span>
</a>
</div>
<div class="item">
<a href="collaboration_picture.html" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_picture.png" alt="写真共有">
</div>
<span>写真共有</span>
</a>
</div>
<div class="item">
<a href="collaboration_documents.html" class="d-flex flex-column align-items-center">
<div class="img_wrap">
<img src="icon/icon_collabo_document.png" alt="文書共有">
</div>
<span>文書共有</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
<div class="user_list_wrap">
<div class="user_list d-flex flex-wrap">
<div class="user_item host">
<a href="#" data-toggle="modal" data-target="#profileModal1">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<span class="name">名前名前</span>
</a>
</div>
<div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal2">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<span class="name">名前名前</span>
</a>
</div>
<div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal2">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<span class="name">名前名前名前名前名前名前名前名前名前名前</span>
</a>
</div>
<div class="user_item host">
<a href="#" data-toggle="modal" data-target="#profileModal2">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<span class="name">名前名前名前名前名前名前名前名前名前名前</span>
</a>
</div>
<div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal2">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<span class="name">名前名前名前名前名前名前名前名前名前名前</span>
</a>
</div>
<div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal2">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<span class="name">名前名前名前名前名前名前名前名前名前名前</span>
</a>
</div>
<div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal2">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<span class="name">名前名前名前名前名前名前名前名前名前名前</span>
</a>
</div>
<div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal2">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<span class="name">名前名前名前名前名前名前名前名前名前名前</span>
</a>
</div>
<div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal2">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<span class="name">名前名前名前</span>
</a>
</div>
</div>
</div>
\ No newline at end of file
@charset "UTF-8";
/**************************** archive *************************/
.archive_list ul {
padding: 0;
}
.arhive_img .img_wrap {
width: 50px;
height: 50px;
border-radius: 50%;
text-align: center;
line-height: 46px;
}
.arhive_img img {
width: 40px;
height: 40px;
}
.archive_list ul li {
list-style: none;
border-bottom: 1px solid #e2e8f0;
position: relative;
}
.archive_list ul li a {
padding: 10px;
color: #323743;
}
.archive_list ul li a:hover {
background: aliceblue;
}
.bg_blue {
background: #0070ca;
}
.bg_green {
background: #4dca00;
}
.bg_orange {
background: #ca6d00;
}
.archive_list ul li:first-child {
border-top: 1px solid #e2e8f0;
}
.archive_desc {
padding-left: 10px;
position: relative;
width: calc(100% - 100px);
overflow: hidden;
white-space: nowrap;
}
.archive_date span {
color: #323743;
font-size: 14px;
}
.archive_name span {
color: #323743;
font-size: 16px;
font-weight: 500;
}
.archive_name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/**************************** archive detail *************************/
.archive_detail .ttl {
font-size: 18px;
font-weight: bold;
}
.archive_detail .item {
margin-bottom: 20px;
}
.archive_detail .archive_detail_desc img {
width: 80px;
height: 80px;
border-radius: 50%;
}
.archive_detail .archive_detail_desc .archive_detail_user_list ul {
padding-left: 0;
overflow-x: scroll;
}
.archive_detail .archive_detail_desc .archive_detail_user_list ul li {
list-style: none;
margin: 0 5px;
}
.archive_detail_desc {
margin: 0 10px;
}
.archive_detail .archive_detail_desc .archive_detail_user_list span,
.archive_detail .archive_detail_desc .archive_detail_sv_user span {
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 90px;
}
@media screen and (max-width: 768px) {
.archive_name {
font-size: 14px;
}
.archive_detail .ttl {
font-size: 16px;
}
.archive_detail_desc span {
font-size: 14px;
}
}
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
@charset "UTF-8";
/**************************** footer *************************/
footer {
max-width: 1280px;
background: #F9F9F9;
margin-top: 20px;
border-top: 1px solid #CCCCCC;
position: fixed;
bottom: 0;
width: 100%;
}
.footer_content_t {
height: 70px;
padding: 0 10px;
}
.footer_content_b {
height: 70px;
}
footer .footer-wrap {
margin: 0 auto;
/* max-width: 500px; */
height: 100%;
}
footer .footer_content_t .footer_item {
margin: auto 10px;
}
footer .footer_item {
text-align: center;
margin: auto 0;
}
footer .footer_content_b .footer_item p{
font-size: 16px;
color: #707070;
font-weight: bold;
margin:0;
}
footer .footer_item img {
width: 32px;
height: 32px;
}
footer .footer_content_b .footer_item .active {
color: #0070CA;
font-weight: bold;
}
footer .footer_item a {
display: inline-block;
}
/* メッセージ入力フォーム */
footer .footer_content_t input {
padding-left: 10px;
margin: auto 0;
width: 100%;
border: 1px solid #BDBDBD;
border-radius: 5px;
height: 45px;
}
footer .footer_content_t input:focus {
border-color: #71a2ff;
outline: 0;
box-shadow: 0 0 0 0.2rem rgb(0 83 240 / 25%);
}
@media screen and (max-width: 768px) {
footer .footer_content_b .footer_item p {
font-size: 12px;
}
}
@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: 0.3s;
background-image: url("../icon/icon_close.png");
}
.overlay {
transition: 0.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 .thubnail {
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto;
}
#add_user_list .user_item_l .thubnail 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: 0.7s;
max-width: 1280px;
height: 70px;
position: fixed;
width: 100%;
margin: 0;
border: none;
bottom: 120px;
z-index: 3;
}
#collabo_footer_menu.hide {
transition: 0.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;
}
}
@charset "UTF-8";
@import url(./notosansjp.css);
body {
max-width: 1280px;
font-family: "Noto Sans JP", sans-serif;
margin: 0 auto;
color: #323743;
margin-bottom: 60px;
overflow-x: hidden;
}
a:hover {
text-decoration: none;
}
.none {
display: none !important;
}
/**************************** nav *************************/
nav {
max-width: 1280px;
height: 60px;
position: fixed;
top: 0;
width: 100%;
border-bottom: 1px solid #cdcdcd;
background: #fff;
z-index: 2;
}
main {
margin-top: 60px;
}
.nav-item {
padding: 0 10px;
}
.nav-ttl {
text-align: center;
font-size: 20px;
font-weight: bold;
margin-bottom: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nav_prev a {
color: #323743;
display: inline-block;
}
.nav_prev a:before {
content: "\f053";
font: 16px FontAwesome;
color: #323743;
margin-right: 5px;
}
.fas.fa-chevron-left {
margin-right: 10px;
}
/**************************** search form *************************/
.search_form input {
padding-left: 10px;
width: 100%;
border: 1px solid #bdbdbd;
border-radius: 5px;
height: 40px;
margin: 10px 0;
padding-left: 35px;
}
.search_form {
position: relative;
margin: 0 5px;
}
.search_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.none {
display: none !important;
}
.search_form input.focus {
width: calc(100% - 100px);
}
.search_form input:focus,
.chat_room_src_form input:focus {
border-color: #71a2ff;
outline: 0;
box-shadow: 0 0 0 0.2rem rgb(0 83 240 / 25%);
}
.search_form .cancel {
width: 100px;
font-size: 14px;
padding: 0 10px;
color: #8f8f8f;
text-align: center;
}
/**************************** color *************************/
.bg_gray {
background: #f3f3f3;
}
.bg_blue {
background: #0070ca;
}
.bg_navy {
background: #1d3557;
}
.bg_red {
background: #ff4747;
}
.bg_green {
background: #89e54d;
}
.bg_white {
background: #fff;
}
.border_gray {
border: 1px solid #dadce0;
}
.text_blue {
color: #0070ca;
}
.text_white {
color: #fff;
}
/**************************** modal *************************/
/* プロフィールモーダル */
.profile_modal .modal-footer button {
color: #fff;
border-radius: 10px;
min-width: 100px;
font-size: 14px;
}
.profile_modal .modal-footer button img {
width: 30px;
height: 30px;
}
.profile_modal .modal-body p {
max-height: 200px;
overflow-y: scroll;
}
.profile_modal .modal-header img {
width: 60px;
height: 60px;
border-radius: 50%;
}
.profile_modal .modal-header,
.profile_modal .modal-body {
padding-bottom: 0;
}
.profile_modal .modal-footer button {
width: 33%;
padding: 5px;
}
.profile_modal.w_50 .modal-footer button {
width: 50%;
padding: 5px;
}
.profile_modal .modal-header .prifile_desc {
width: 100%;
}
.profile_modal .modal-header .prifile_name {
width: 100%;
text-align: center;
}
.profile_modal .modal-header .prifile_name span {
line-height: 60px;
font-weight: bold;
font-size: 20px;
}
@media screen and (max-width: 768px) {
/* navi */
.nav-ttl {
font-size: 16px;
}
.nav_prev a span {
font-size: 16px;
}
/* search form */
.search_form input {
font-size: 14px;
}
input::placeholder {
font-size: 14px;
}
}
@charset "UTF-8";
.breadcrumb {
margin-bottom: 0;
white-space: nowrap;
overflow-x: scroll;
display: block;
}
.breadcrumb_item:not(:last-child):after {
content: ">";
margin: 0 5px;
}
.breadcrumb_item {
color: #323743;
}
@charset "UTF-8";
/**************************** footer *************************/
footer {
max-width: 1280px;
background: #f9f9f9;
height: 70px;
margin-top: 20px;
border-top: 1px solid #cccccc;
position: fixed;
bottom: 0;
width: 100%;
}
footer .footer-wrap {
margin: 0 auto;
height: 100%;
}
footer .footer_item {
text-align: center;
margin: auto 0;
}
footer .footer_item .unread_num {
position: absolute;
top: -5px;
right: -3px;
background: #ff4747;
color: #fff;
padding: 0 7px;
min-width: 20px;
height: 20px;
line-height: 20px;
font-size: 10px;
border-radius: 15px;
}
footer .footer_item p {
font-size: 16px;
color: #707070;
font-weight: bold;
margin: 0;
}
footer .footer_item .active {
color: #0070ca;
font-weight: bold;
}
footer .footer_item a {
display: inline-block;
position: relative;
}
@media screen and (max-width: 768px) {
footer .footer_item p {
font-size: 12px;
}
}
.lb-loader,.lightbox{text-align:center;line-height:0}.lb-dataContainer:after,.lb-outerContainer:after{content:"";clear:both}body.lb-disable-scrolling{overflow:hidden}.lightboxOverlay{position:absolute;top:0;left:0;z-index:9999;background-color:#000;filter:alpha(Opacity=80);opacity:.8;display:none}.lightbox{position:absolute;left:0;width:100%;z-index:10000;font-weight:400}.lightbox .lb-image{display:block;height:auto;max-width:inherit;max-height:none;border-radius:3px;border:4px solid #fff}.lightbox a img{border:none}.lb-outerContainer{position:relative;width:250px;height:250px;margin:0 auto;border-radius:4px;background-color:#fff}.lb-loader,.lb-nav{position:absolute;left:0}.lb-outerContainer:after{display:table}.lb-loader{top:43%;height:25%;width:100%}.lb-cancel{display:block;width:32px;height:32px;margin:0 auto;background:url(../images/loading.gif) no-repeat}.lb-nav{top:0;height:100%;width:100%;z-index:10}.lb-container>.nav{left:0}.lb-nav a{outline:0;background-image:url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}.lb-next,.lb-prev{height:100%;cursor:pointer;display:block}.lb-nav a.lb-prev{width:34%;left:0;float:left;background:url(../images/prev.png) left 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-prev:hover{filter:alpha(Opacity=100);opacity:1}.lb-nav a.lb-next{width:64%;right:0;float:right;background:url(../images/next.png) right 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-next:hover{filter:alpha(Opacity=100);opacity:1}.lb-dataContainer{margin:0 auto;padding-top:5px;width:100%;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.lb-dataContainer:after{display:table}.lb-data{padding:0 4px;color:#ccc}.lb-data .lb-details{width:85%;float:left;text-align:left;line-height:1.1em}.lb-data .lb-caption{font-size:13px;font-weight:700;line-height:1em}.lb-data .lb-caption a{color:#4ae}.lb-data .lb-number{display:block;clear:left;padding-bottom:1em;font-size:12px;color:#999}.lb-data .lb-close{display:block;float:right;width:30px;height:30px;background:url(../images/close.png) top right no-repeat;text-align:right;outline:0;filter:alpha(Opacity=70);opacity:.7;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s}.lb-data .lb-close:hover{cursor:pointer;filter:alpha(Opacity=100);opacity:1}
\ No newline at end of file
@charset "UTF-8";
/**************************** loading *************************/
#loader-bg {
display: none;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background: rgb(255, 255, 255, 0.5);
z-index: 2;
}
#loader {
display: none;
position: fixed;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
text-align: center;
color: #fff;
z-index: 999;
}
.fa.fa-circle-o-notch {
color: #707070;
}
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 100;
src: url(../fonts/noto-sans-jp-v28-japanese-regular.woff2) format('woff2');
}
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 300;
src: url(../fonts/noto-sans-jp-v28-japanese-regular.woff2) format('woff2');
}
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 500;
src: url(../fonts/noto-sans-jp-v28-japanese-regular.woff2) format('woff2');
}
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 700;
src: url(../fonts/noto-sans-jp-v28-japanese-regular.woff2) format('woff2');
}
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 900;
src: url(../fonts/noto-sans-jp-v28-japanese-regular.woff2) format('woff2');
}
\ No newline at end of file
Font Awesome Free License
-------------------------
Font Awesome Free is free, open source, and GPL friendly. You can use it for
commercial projects, open source projects, or really almost whatever you want.
Full Font Awesome Free license: https://fontawesome.com/license/free.
# Icons: CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/)
In the Font Awesome Free download, the CC BY 4.0 license applies to all icons
packaged as SVG and JS file types.
# Fonts: SIL OFL 1.1 License (https://scripts.sil.org/OFL)
In the Font Awesome Free download, the SIL OFL license applies to all icons
packaged as web and desktop font files.
# Code: MIT License (https://opensource.org/licenses/MIT)
In the Font Awesome Free download, the MIT license applies to all non-font and
non-icon files.
# Attribution
Attribution is required by MIT, SIL OFL, and CC BY licenses. Downloaded Font
Awesome Free files already contain embedded comments with sufficient
attribution, so you shouldn't need to do anything additional when using these
files normally.
We've kept attribution comments terse, so we ask that you do not actively work
to remove them from files, especially code. They're a great way for folks to
learn about Font Awesome.
# Brand Icons
All brand icons are trademarks of their respective owners. The use of these
trademarks does not indicate endorsement of the trademark holder by Font
Awesome, nor vice versa. **Please do not use brand logos for any purpose except
to represent the company, product, or service to which they refer.**
/*!
* Font Awesome Free 5.9.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
@font-face {
font-family: 'Font Awesome 5 Brands';
font-style: normal;
font-weight: normal;
font-display: auto;
src: url("../webfonts/fa-brands-400.eot");
src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg"); }
.fab {
font-family: 'Font Awesome 5 Brands'; }
/*!
* Font Awesome Free 5.9.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
@font-face{font-family:"Font Awesome 5 Brands";font-style:normal;font-weight:normal;font-display:auto;src:url(../webfonts/fa-brands-400.eot);src:url(../webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.woff) format("woff"),url(../webfonts/fa-brands-400.ttf) format("truetype"),url(../webfonts/fa-brands-400.svg#fontawesome) format("svg")}.fab{font-family:"Font Awesome 5 Brands"}
\ No newline at end of file
/*!
* Font Awesome Free 5.9.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
@font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 400;
font-display: auto;
src: url("../webfonts/fa-regular-400.eot");
src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); }
.far {
font-family: 'Font Awesome 5 Free';
font-weight: 400; }
/*!
* Font Awesome Free 5.9.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:400;font-display:auto;src:url(../webfonts/fa-regular-400.eot);src:url(../webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.woff) format("woff"),url(../webfonts/fa-regular-400.ttf) format("truetype"),url(../webfonts/fa-regular-400.svg#fontawesome) format("svg")}.far{font-family:"Font Awesome 5 Free";font-weight:400}
\ No newline at end of file
/*!
* Font Awesome Free 5.9.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
@font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 900;
font-display: auto;
src: url("../webfonts/fa-solid-900.eot");
src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg"); }
.fa,
.fas {
font-family: 'Font Awesome 5 Free';
font-weight: 900; }
/*!
* Font Awesome Free 5.9.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:900;font-display:auto;src:url(../webfonts/fa-solid-900.eot);src:url(../webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.woff) format("woff"),url(../webfonts/fa-solid-900.ttf) format("truetype"),url(../webfonts/fa-solid-900.svg#fontawesome) format("svg")}.fa,.fas{font-family:"Font Awesome 5 Free";font-weight:900}
\ No newline at end of file
/*!
* Font Awesome Free 5.9.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
svg:not(:root).svg-inline--fa {
overflow: visible; }
.svg-inline--fa {
display: inline-block;
font-size: inherit;
height: 1em;
overflow: visible;
vertical-align: -.125em; }
.svg-inline--fa.fa-lg {
vertical-align: -.225em; }
.svg-inline--fa.fa-w-1 {
width: 0.0625em; }
.svg-inline--fa.fa-w-2 {
width: 0.125em; }
.svg-inline--fa.fa-w-3 {
width: 0.1875em; }
.svg-inline--fa.fa-w-4 {
width: 0.25em; }
.svg-inline--fa.fa-w-5 {
width: 0.3125em; }
.svg-inline--fa.fa-w-6 {
width: 0.375em; }
.svg-inline--fa.fa-w-7 {
width: 0.4375em; }
.svg-inline--fa.fa-w-8 {
width: 0.5em; }
.svg-inline--fa.fa-w-9 {
width: 0.5625em; }
.svg-inline--fa.fa-w-10 {
width: 0.625em; }
.svg-inline--fa.fa-w-11 {
width: 0.6875em; }
.svg-inline--fa.fa-w-12 {
width: 0.75em; }
.svg-inline--fa.fa-w-13 {
width: 0.8125em; }
.svg-inline--fa.fa-w-14 {
width: 0.875em; }
.svg-inline--fa.fa-w-15 {
width: 0.9375em; }
.svg-inline--fa.fa-w-16 {
width: 1em; }
.svg-inline--fa.fa-w-17 {
width: 1.0625em; }
.svg-inline--fa.fa-w-18 {
width: 1.125em; }
.svg-inline--fa.fa-w-19 {
width: 1.1875em; }
.svg-inline--fa.fa-w-20 {
width: 1.25em; }
.svg-inline--fa.fa-pull-left {
margin-right: .3em;
width: auto; }
.svg-inline--fa.fa-pull-right {
margin-left: .3em;
width: auto; }
.svg-inline--fa.fa-border {
height: 1.5em; }
.svg-inline--fa.fa-li {
width: 2em; }
.svg-inline--fa.fa-fw {
width: 1.25em; }
.fa-layers svg.svg-inline--fa {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0; }
.fa-layers {
display: inline-block;
height: 1em;
position: relative;
text-align: center;
vertical-align: -.125em;
width: 1em; }
.fa-layers svg.svg-inline--fa {
-webkit-transform-origin: center center;
transform-origin: center center; }
.fa-layers-text, .fa-layers-counter {
display: inline-block;
position: absolute;
text-align: center; }
.fa-layers-text {
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transform-origin: center center;
transform-origin: center center; }
.fa-layers-counter {
background-color: #ff253a;
border-radius: 1em;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #fff;
height: 1.5em;
line-height: 1;
max-width: 5em;
min-width: 1.5em;
overflow: hidden;
padding: .25em;
right: 0;
text-overflow: ellipsis;
top: 0;
-webkit-transform: scale(0.25);
transform: scale(0.25);
-webkit-transform-origin: top right;
transform-origin: top right; }
.fa-layers-bottom-right {
bottom: 0;
right: 0;
top: auto;
-webkit-transform: scale(0.25);
transform: scale(0.25);
-webkit-transform-origin: bottom right;
transform-origin: bottom right; }
.fa-layers-bottom-left {
bottom: 0;
left: 0;
right: auto;
top: auto;
-webkit-transform: scale(0.25);
transform: scale(0.25);
-webkit-transform-origin: bottom left;
transform-origin: bottom left; }
.fa-layers-top-right {
right: 0;
top: 0;
-webkit-transform: scale(0.25);
transform: scale(0.25);
-webkit-transform-origin: top right;
transform-origin: top right; }
.fa-layers-top-left {
left: 0;
right: auto;
top: 0;
-webkit-transform: scale(0.25);
transform: scale(0.25);
-webkit-transform-origin: top left;
transform-origin: top left; }
.fa-lg {
font-size: 1.33333em;
line-height: 0.75em;
vertical-align: -.0667em; }
.fa-xs {
font-size: .75em; }
.fa-sm {
font-size: .875em; }
.fa-1x {
font-size: 1em; }
.fa-2x {
font-size: 2em; }
.fa-3x {
font-size: 3em; }
.fa-4x {
font-size: 4em; }
.fa-5x {
font-size: 5em; }
.fa-6x {
font-size: 6em; }
.fa-7x {
font-size: 7em; }
.fa-8x {
font-size: 8em; }
.fa-9x {
font-size: 9em; }
.fa-10x {
font-size: 10em; }
.fa-fw {
text-align: center;
width: 1.25em; }
.fa-ul {
list-style-type: none;
margin-left: 2.5em;
padding-left: 0; }
.fa-ul > li {
position: relative; }
.fa-li {
left: -2em;
position: absolute;
text-align: center;
width: 2em;
line-height: inherit; }
.fa-border {
border: solid 0.08em #eee;
border-radius: .1em;
padding: .2em .25em .15em; }
.fa-pull-left {
float: left; }
.fa-pull-right {
float: right; }
.fa.fa-pull-left,
.fas.fa-pull-left,
.far.fa-pull-left,
.fal.fa-pull-left,
.fab.fa-pull-left {
margin-right: .3em; }
.fa.fa-pull-right,
.fas.fa-pull-right,
.far.fa-pull-right,
.fal.fa-pull-right,
.fab.fa-pull-right {
margin-left: .3em; }
.fa-spin {
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear; }
.fa-pulse {
-webkit-animation: fa-spin 1s infinite steps(8);
animation: fa-spin 1s infinite steps(8); }
@-webkit-keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes fa-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
.fa-rotate-90 {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
-webkit-transform: rotate(90deg);
transform: rotate(90deg); }
.fa-rotate-180 {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
-webkit-transform: rotate(180deg);
transform: rotate(180deg); }
.fa-rotate-270 {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
-webkit-transform: rotate(270deg);
transform: rotate(270deg); }
.fa-flip-horizontal {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
-webkit-transform: scale(-1, 1);
transform: scale(-1, 1); }
.fa-flip-vertical {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
-webkit-transform: scale(1, -1);
transform: scale(1, -1); }
.fa-flip-both, .fa-flip-horizontal.fa-flip-vertical {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
-webkit-transform: scale(-1, -1);
transform: scale(-1, -1); }
:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-flip-horizontal,
:root .fa-flip-vertical,
:root .fa-flip-both {
-webkit-filter: none;
filter: none; }
.fa-stack {
display: inline-block;
height: 2em;
position: relative;
width: 2.5em; }
.fa-stack-1x,
.fa-stack-2x {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0; }
.svg-inline--fa.fa-stack-1x {
height: 1em;
width: 1.25em; }
.svg-inline--fa.fa-stack-2x {
height: 2em;
width: 2.5em; }
.fa-inverse {
color: #fff; }
.sr-only {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; }
.sr-only-focusable:active, .sr-only-focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto; }
/*!
* Font Awesome Free 5.9.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
.svg-inline--fa,svg:not(:root).svg-inline--fa{overflow:visible}.svg-inline--fa{display:inline-block;font-size:inherit;height:1em;vertical-align:-.125em}.svg-inline--fa.fa-lg{vertical-align:-.225em}.svg-inline--fa.fa-w-1{width:.0625em}.svg-inline--fa.fa-w-2{width:.125em}.svg-inline--fa.fa-w-3{width:.1875em}.svg-inline--fa.fa-w-4{width:.25em}.svg-inline--fa.fa-w-5{width:.3125em}.svg-inline--fa.fa-w-6{width:.375em}.svg-inline--fa.fa-w-7{width:.4375em}.svg-inline--fa.fa-w-8{width:.5em}.svg-inline--fa.fa-w-9{width:.5625em}.svg-inline--fa.fa-w-10{width:.625em}.svg-inline--fa.fa-w-11{width:.6875em}.svg-inline--fa.fa-w-12{width:.75em}.svg-inline--fa.fa-w-13{width:.8125em}.svg-inline--fa.fa-w-14{width:.875em}.svg-inline--fa.fa-w-15{width:.9375em}.svg-inline--fa.fa-w-16{width:1em}.svg-inline--fa.fa-w-17{width:1.0625em}.svg-inline--fa.fa-w-18{width:1.125em}.svg-inline--fa.fa-w-19{width:1.1875em}.svg-inline--fa.fa-w-20{width:1.25em}.svg-inline--fa.fa-pull-left{margin-right:.3em;width:auto}.svg-inline--fa.fa-pull-right{margin-left:.3em;width:auto}.svg-inline--fa.fa-border{height:1.5em}.svg-inline--fa.fa-li{width:2em}.svg-inline--fa.fa-fw{width:1.25em}.fa-layers svg.svg-inline--fa{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.fa-layers{display:inline-block;height:1em;position:relative;text-align:center;vertical-align:-.125em;width:1em}.fa-layers svg.svg-inline--fa{transform-origin:center center}.fa-layers-counter,.fa-layers-text{display:inline-block;position:absolute;text-align:center}.fa-layers-text{left:50%;top:50%;transform:translate(-50%,-50%);transform-origin:center center}.fa-layers-counter{background-color:#ff253a;border-radius:1em;box-sizing:border-box;color:#fff;height:1.5em;line-height:1;max-width:5em;min-width:1.5em;overflow:hidden;padding:.25em;right:0;text-overflow:ellipsis;top:0;transform:scale(.25);transform-origin:top right}.fa-layers-bottom-right{bottom:0;right:0;top:auto;transform:scale(.25);transform-origin:bottom right}.fa-layers-bottom-left{bottom:0;left:0;right:auto;top:auto;transform:scale(.25);transform-origin:bottom left}.fa-layers-top-right{right:0;top:0;transform:scale(.25);transform-origin:top right}.fa-layers-top-left{left:0;right:auto;top:0;transform:scale(.25);transform-origin:top left}.fa-lg{font-size:1.33333em;line-height:.75em;vertical-align:-.0667em}.fa-xs{font-size:.75em}.fa-sm{font-size:.875em}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:2.5em;padding-left:0}.fa-ul>li{position:relative}.fa-li{left:-2em;position:absolute;text-align:center;width:2em;line-height:inherit}.fa-border{border:.08em solid #eee;border-radius:.1em;padding:.2em .25em .15em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left,.fab.fa-pull-left,.fal.fa-pull-left,.far.fa-pull-left,.fas.fa-pull-left{margin-right:.3em}.fa.fa-pull-right,.fab.fa-pull-right,.fal.fa-pull-right,.far.fa-pull-right,.fas.fa-pull-right{margin-left:.3em}.fa-spin{animation:fa-spin 2s infinite linear}.fa-pulse{animation:fa-spin 1s infinite steps(8)}@keyframes fa-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";transform:scaleX(-1)}.fa-flip-vertical{transform:scaleY(-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical,.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{transform:scale(-1)}:root .fa-flip-both,:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270{filter:none}.fa-stack{display:inline-block;height:2em;position:relative;width:2.5em}.fa-stack-1x,.fa-stack-2x{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.svg-inline--fa.fa-stack-1x{height:1em;width:1.25em}.svg-inline--fa.fa-stack-2x{height:2em;width:2.5em}.fa-inverse{color:#fff}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.sr-only-focusable:active,.sr-only-focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
// Animated Icons
// --------------------------
.@{fa-css-prefix}-spin {
animation: fa-spin 2s infinite linear;
}
.@{fa-css-prefix}-pulse {
animation: fa-spin 1s infinite steps(8);
}
@keyframes fa-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
// Bordered & Pulled
// -------------------------
.@{fa-css-prefix}-border {
border-radius: .1em;
border: solid .08em @fa-border-color;
padding: .2em .25em .15em;
}
.@{fa-css-prefix}-pull-left { float: left; }
.@{fa-css-prefix}-pull-right { float: right; }
.@{fa-css-prefix}, .fas, .far, .fal, .fab {
&.@{fa-css-prefix}-pull-left { margin-right: .3em; }
&.@{fa-css-prefix}-pull-right { margin-left: .3em; }
}
// Base Class Definition
// -------------------------
.@{fa-css-prefix}, .fas, .far, .fal, .fab {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
}
// Fixed Width Icons
// -------------------------
.@{fa-css-prefix}-fw {
text-align: center;
width: (20em / 16);
}
// Icon Sizes
// -------------------------
.larger(@factor) when (@factor > 0) {
.larger((@factor - 1));
.@{fa-css-prefix}-@{factor}x {
font-size: (@factor * 1em);
}
}
/* makes the font 33% larger relative to the icon container */
.@{fa-css-prefix}-lg {
font-size: (4em / 3);
line-height: (3em / 4);
vertical-align: -.0667em;
}
.@{fa-css-prefix}-xs {
font-size: .75em;
}
.@{fa-css-prefix}-sm {
font-size: .875em;
}
.larger(10);
// List Icons
// -------------------------
.@{fa-css-prefix}-ul {
list-style-type: none;
margin-left: (@fa-li-width * 5/4);
padding-left: 0;
> li { position: relative; }
}
.@{fa-css-prefix}-li {
left: -@fa-li-width;
position: absolute;
text-align: center;
width: @fa-li-width;
line-height: inherit;
}
// Mixins
// --------------------------
.fa-icon() {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1;
}
.fa-icon-rotate(@degrees, @rotation) {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation})";
transform: rotate(@degrees);
}
.fa-icon-flip(@horiz, @vert, @rotation) {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation}, mirror=1)";
transform: scale(@horiz, @vert);
}
// Only display content to screen readers. A la Bootstrap 4.
//
// See: http://a11yproject.com/posts/how-to-hide-content/
.sr-only() {
border: 0;
clip: rect(0,0,0,0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
// Use in conjunction with .sr-only to only display content when it's focused.
//
// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
//
// Credit: HTML5 Boilerplate
.sr-only-focusable() {
&:active,
&:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
}
// Rotated & Flipped Icons
// -------------------------
.@{fa-css-prefix}-rotate-90 { .fa-icon-rotate(90deg, 1); }
.@{fa-css-prefix}-rotate-180 { .fa-icon-rotate(180deg, 2); }
.@{fa-css-prefix}-rotate-270 { .fa-icon-rotate(270deg, 3); }
.@{fa-css-prefix}-flip-horizontal { .fa-icon-flip(-1, 1, 0); }
.@{fa-css-prefix}-flip-vertical { .fa-icon-flip(1, -1, 2); }
.@{fa-css-prefix}-flip-both, .@{fa-css-prefix}-flip-horizontal.@{fa-css-prefix}-flip-vertical { .fa-icon-flip(-1, -1, 2); }
// Hook for IE8-9
// -------------------------
:root {
.@{fa-css-prefix}-rotate-90,
.@{fa-css-prefix}-rotate-180,
.@{fa-css-prefix}-rotate-270,
.@{fa-css-prefix}-flip-horizontal,
.@{fa-css-prefix}-flip-vertical,
.@{fa-css-prefix}-flip-both {
filter: none;
}
}
// Screen Readers
// -------------------------
.sr-only { .sr-only(); }
.sr-only-focusable { .sr-only-focusable(); }
// Stacked Icons
// -------------------------
.@{fa-css-prefix}-stack {
display: inline-block;
height: 2em;
line-height: 2em;
position: relative;
vertical-align: middle;
width: 2em;
}
.@{fa-css-prefix}-stack-1x, .@{fa-css-prefix}-stack-2x {
left: 0;
position: absolute;
text-align: center;
width: 100%;
}
.@{fa-css-prefix}-stack-1x { line-height: inherit; }
.@{fa-css-prefix}-stack-2x { font-size: 2em; }
.@{fa-css-prefix}-inverse { color: @fa-inverse; }
/*!
* Font Awesome Free 5.9.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
@import "_variables.less";
@font-face {
font-family: 'Font Awesome 5 Brands';
font-style: normal;
font-weight: normal;
font-display: @fa-font-display;
src: url('@{fa-font-path}/fa-brands-400.eot');
src: url('@{fa-font-path}/fa-brands-400.eot?#iefix') format('embedded-opentype'),
url('@{fa-font-path}/fa-brands-400.woff2') format('woff2'),
url('@{fa-font-path}/fa-brands-400.woff') format('woff'),
url('@{fa-font-path}/fa-brands-400.ttf') format('truetype'),
url('@{fa-font-path}/fa-brands-400.svg#fontawesome') format('svg');
}
.fab {
font-family: 'Font Awesome 5 Brands';
}
/*!
* Font Awesome Free 5.9.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
@import "_variables.less";
@import "_mixins.less";
@import "_core.less";
@import "_larger.less";
@import "_fixed-width.less";
@import "_list.less";
@import "_bordered-pulled.less";
@import "_animated.less";
@import "_rotated-flipped.less";
@import "_stacked.less";
@import "_icons.less";
@import "_screen-reader.less";
/*!
* Font Awesome Free 5.9.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
@import "_variables.less";
@font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 400;
font-display: @fa-font-display;
src: url('@{fa-font-path}/fa-regular-400.eot');
src: url('@{fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
url('@{fa-font-path}/fa-regular-400.woff2') format('woff2'),
url('@{fa-font-path}/fa-regular-400.woff') format('woff'),
url('@{fa-font-path}/fa-regular-400.ttf') format('truetype'),
url('@{fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
}
.far {
font-family: 'Font Awesome 5 Free';
font-weight: 400;
}
/*!
* Font Awesome Free 5.9.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
@import "_variables.less";
@font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 900;
font-display: @fa-font-display;
src: url('@{fa-font-path}/fa-solid-900.eot');
src: url('@{fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
url('@{fa-font-path}/fa-solid-900.woff2') format('woff2'),
url('@{fa-font-path}/fa-solid-900.woff') format('woff'),
url('@{fa-font-path}/fa-solid-900.ttf') format('truetype'),
url('@{fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');
}
.fa,
.fas {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
/*!
* Font Awesome Free 5.9.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
*/
@import '_variables.less';
@import '_shims.less';
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
area-chart:
name: chart-area
arrow-circle-o-down:
name: arrow-alt-circle-down
prefix: far
arrow-circle-o-left:
name: arrow-alt-circle-left
prefix: far
arrow-circle-o-right:
name: arrow-alt-circle-right
prefix: far
arrow-circle-o-up:
name: arrow-alt-circle-up
prefix: far
arrows:
name: arrows-alt
arrows-alt:
name: expand-arrows-alt
arrows-h:
name: arrows-alt-h
arrows-v:
name: arrows-alt-v
bar-chart:
name: chart-bar
prefix: far
bitbucket-square:
name: bitbucket
prefix: fab
calendar:
name: calendar-alt
calendar-o:
name: calendar
prefix: far
caret-square-o-down:
name: caret-square-down
prefix: far
caret-square-o-left:
name: caret-square-left
prefix: far
caret-square-o-right:
name: caret-square-right
prefix: far
caret-square-o-up:
name: caret-square-up
prefix: far
cc:
name: closed-captioning
prefix: far
chain-broken:
name: unlink
circle-o-notch:
name: circle-notch
circle-thin:
name: circle
prefix: far
clipboard:
prefix: far
clone:
prefix: far
cloud-download:
name: cloud-download-alt
cloud-upload:
name: cloud-upload-alt
code-fork:
name: code-branch
comment-alt:
name: comment-dots
prefix: far
commenting:
name: comment-dots
compass:
prefix: far
copyright:
prefix: far
creative-commons:
prefix: fab
credit-card:
prefix: far
credit-card-alt:
name: credit-card
cutlery:
name: utensils
diamond:
name: gem
prefix: far
eercast:
name: sellcast
prefix: fab
eur:
name: euro-sign
exchange:
name: exchange-alt
external-link:
name: external-link-alt
external-link-square:
name: external-link-square-alt
eye:
prefix: far
eye-dropper:
name: eye-dropper
prefix: far
eye-slash:
prefix: far
eyedropper:
name: eye-dropper
facebook:
name: facebook-f
prefix: fab
facebook-official:
name: facebook
prefix: fab
file-text:
name: file-alt
files-o:
name: copy
prefix: far
floppy-o:
name: save
prefix: far
gbp:
name: pound-sign
glass:
name: glass-martini
google-plus:
name: google-plus-g
prefix: fab
google-plus-circle:
name: google-plus
prefix: fab
google-plus-official:
name: google-plus
prefix: fab
hand-o-down:
name: hand-point-down
prefix: far
hand-o-left:
name: hand-point-left
prefix: far
hand-o-right:
name: hand-point-right
prefix: far
hand-o-up:
name: hand-point-up
prefix: far
header:
name: heading
id-badge:
prefix: far
ils:
name: shekel-sign
inr:
name: rupee-sign
intersex:
name: transgender
jpy:
name: yen-sign
krw:
name: won-sign
level-down:
name: level-down-alt
level-up:
name: level-up-alt
life-ring:
prefix: far
line-chart:
name: chart-line
linkedin:
name: linkedin-in
prefix: fab
linkedin-square:
name: linkedin
prefix: fab
list-alt:
prefix: far
long-arrow-down:
name: long-arrow-alt-down
long-arrow-left:
name: long-arrow-alt-left
long-arrow-right:
name: long-arrow-alt-right
long-arrow-up:
name: long-arrow-alt-up
map-marker:
name: map-marker-alt
meanpath:
name: font-awesome
prefix: fab
mobile:
name: mobile-alt
money:
name: money-bill-alt
prefix: far
object-group:
prefix: far
object-ungroup:
prefix: far
paste:
prefix: far
pencil:
name: pencil-alt
pencil-square:
name: pen-square
pencil-square-o:
name: edit
prefix: far
picture:
name: image
pie-chart:
name: chart-pie
refresh:
name: sync
registered:
prefix: far
repeat:
name: redo
rub:
name: ruble-sign
scissors:
name: cut
shield:
name: shield-alt
sign-in:
name: sign-in-alt
sign-out:
name: sign-out-alt
sliders:
name: sliders-h
sort-alpha-asc:
name: sort-alpha-down
sort-alpha-desc:
name: sort-alpha-up
sort-amount-asc:
name: sort-amount-down
sort-amount-desc:
name: sort-amount-up
sort-asc:
name: sort-up
sort-desc:
name: sort-down
sort-numeric-asc:
name: sort-numeric-down
sort-numeric-desc:
name: sort-numeric-up
spoon:
name: utensil-spoon
star-half-empty:
name: star-half
star-half-full:
name: star-half
support:
name: life-ring
prefix: far
tablet:
name: tablet-alt
tachometer:
name: tachometer-alt
television:
name: tv
thumb-tack:
name: thumbtack
thumbs-o-down:
name: thumbs-down
prefix: far
thumbs-o-up:
name: thumbs-up
prefix: far
ticket:
name: ticket-alt
trash:
name: trash-alt
trash-o:
name: trash-alt
prefix: far
try:
name: lira-sign
usd:
name: dollar-sign
video-camera:
name: video
vimeo:
name: vimeo-v
prefix: fab
volume-control-phone:
name: phone-volume
wheelchair-alt:
name: accessible-icon
prefix: fab
window-maximize:
prefix: far
window-restore:
prefix: far
youtube-play:
name: youtube
prefix: fab
// Animated Icons
// --------------------------
.#{$fa-css-prefix}-spin {
animation: fa-spin 2s infinite linear;
}
.#{$fa-css-prefix}-pulse {
animation: fa-spin 1s infinite steps(8);
}
@keyframes fa-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
// Bordered & Pulled
// -------------------------
.#{$fa-css-prefix}-border {
border: solid .08em $fa-border-color;
border-radius: .1em;
padding: .2em .25em .15em;
}
.#{$fa-css-prefix}-pull-left { float: left; }
.#{$fa-css-prefix}-pull-right { float: right; }
.#{$fa-css-prefix},
.fas,
.far,
.fal,
.fab {
&.#{$fa-css-prefix}-pull-left { margin-right: .3em; }
&.#{$fa-css-prefix}-pull-right { margin-left: .3em; }
}
// Base Class Definition
// -------------------------
.#{$fa-css-prefix},
.fas,
.far,
.fal,
.fab {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
}
%fa-icon {
@include fa-icon;
}
// Fixed Width Icons
// -------------------------
.#{$fa-css-prefix}-fw {
text-align: center;
width: $fa-fw-width;
}
This source diff could not be displayed because it is too large. You can view the blob instead.
// Icon Sizes
// -------------------------
// makes the font 33% larger relative to the icon container
.#{$fa-css-prefix}-lg {
font-size: (4em / 3);
line-height: (3em / 4);
vertical-align: -.0667em;
}
.#{$fa-css-prefix}-xs {
font-size: .75em;
}
.#{$fa-css-prefix}-sm {
font-size: .875em;
}
@for $i from 1 through 10 {
.#{$fa-css-prefix}-#{$i}x {
font-size: $i * 1em;
}
}
// List Icons
// -------------------------
.#{$fa-css-prefix}-ul {
list-style-type: none;
margin-left: $fa-li-width * 5/4;
padding-left: 0;
> li { position: relative; }
}
.#{$fa-css-prefix}-li {
left: -$fa-li-width;
position: absolute;
text-align: center;
width: $fa-li-width;
line-height: inherit;
}
// Mixins
// --------------------------
@mixin fa-icon {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: inline-block;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1;
}
@mixin fa-icon-rotate($degrees, $rotation) {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})";
transform: rotate($degrees);
}
@mixin fa-icon-flip($horiz, $vert, $rotation) {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)";
transform: scale($horiz, $vert);
}
// Only display content to screen readers. A la Bootstrap 4.
//
// See: http://a11yproject.com/posts/how-to-hide-content/
@mixin sr-only {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
// Use in conjunction with .sr-only to only display content when it's focused.
//
// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
//
// Credit: HTML5 Boilerplate
@mixin sr-only-focusable {
&:active,
&:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
}
// Rotated & Flipped Icons
// -------------------------
.#{$fa-css-prefix}-rotate-90 { @include fa-icon-rotate(90deg, 1); }
.#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); }
.#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); }
.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); }
.#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(1, -1, 2); }
.#{$fa-css-prefix}-flip-both, .#{$fa-css-prefix}-flip-horizontal.#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(-1, -1, 2); }
// Hook for IE8-9
// -------------------------
:root {
.#{$fa-css-prefix}-rotate-90,
.#{$fa-css-prefix}-rotate-180,
.#{$fa-css-prefix}-rotate-270,
.#{$fa-css-prefix}-flip-horizontal,
.#{$fa-css-prefix}-flip-vertical,
.#{$fa-css-prefix}-flip-both {
filter: none;
}
}
// Screen Readers
// -------------------------
.sr-only { @include sr-only; }
.sr-only-focusable { @include sr-only-focusable; }
// Stacked Icons
// -------------------------
.#{$fa-css-prefix}-stack {
display: inline-block;
height: 2em;
line-height: 2em;
position: relative;
vertical-align: middle;
width: ($fa-fw-width*2);
}
.#{$fa-css-prefix}-stack-1x,
.#{$fa-css-prefix}-stack-2x {
left: 0;
position: absolute;
text-align: center;
width: 100%;
}
.#{$fa-css-prefix}-stack-1x {
line-height: inherit;
}
.#{$fa-css-prefix}-stack-2x {
font-size: 2em;
}
.#{$fa-css-prefix}-inverse {
color: $fa-inverse;
}
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment