Commit a0d1984f by Kim Peace

Fixed coding style

parent 4c50c265
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0"> <meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title> <title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css"> <link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet"> <link href="./fontawesome/css/all.css" rel="stylesheet">
...@@ -14,6 +16,7 @@ ...@@ -14,6 +16,7 @@
<link rel="stylesheet" href="./css/loading.css"> <link rel="stylesheet" href="./css/loading.css">
<link rel="stylesheet" href="./css/font-awesome.css"> <link rel="stylesheet" href="./css/font-awesome.css">
</head> </head>
<body> <body>
<!-- ナビメニュー --> <!-- ナビメニュー -->
<nav> <nav>
...@@ -354,11 +357,12 @@ ...@@ -354,11 +357,12 @@
<!-- ローディング --> <!-- ローディング -->
<!--#include virtual="loading.html" --> <!--#include virtual="loading.html" -->
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/archive.js"></script> <script src="./js/archive.js"></script>
<script src="./js/common.js"></script> <script src="./js/common.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0"> <meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title> <title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css"> <link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet"> <link href="./fontawesome/css/all.css" rel="stylesheet">
...@@ -13,6 +15,7 @@ ...@@ -13,6 +15,7 @@
<link rel="stylesheet" href="./css/footer.css"> <link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css"> <link rel="stylesheet" href="./css/font-awesome.css">
</head> </head>
<body> <body>
<!-- ナビメニュー --> <!-- ナビメニュー -->
<nav> <nav>
...@@ -139,11 +142,12 @@ ...@@ -139,11 +142,12 @@
</div> </div>
</main> </main>
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/archive.js"></script> <script src="./js/archive.js"></script>
<script src="./js/common.js"></script> <script src="./js/common.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0"> <meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title> <title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css"> <link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet"> <link href="./fontawesome/css/all.css" rel="stylesheet">
...@@ -14,6 +16,7 @@ ...@@ -14,6 +16,7 @@
<link rel="stylesheet" href="./css/loading.css"> <link rel="stylesheet" href="./css/loading.css">
<link rel="stylesheet" href="./css/font-awesome.css"> <link rel="stylesheet" href="./css/font-awesome.css">
</head> </head>
<body> <body>
<!-- ナビメニュー --> <!-- ナビメニュー -->
<nav> <nav>
...@@ -471,11 +474,12 @@ ...@@ -471,11 +474,12 @@
<!-- ローディング --> <!-- ローディング -->
<!--#include virtual="loading.html" --> <!--#include virtual="loading.html" -->
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script> <script src="./js/chat.js"></script>
<script src="./js/common.js"></script> <script src="./js/common.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0"> <meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title> <title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css"> <link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet"> <link href="./fontawesome/css/all.css" rel="stylesheet">
...@@ -13,6 +15,7 @@ ...@@ -13,6 +15,7 @@
<link rel="stylesheet" href="./css/footer.css"> <link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css"> <link rel="stylesheet" href="./css/font-awesome.css">
</head> </head>
<body> <body>
<!-- ナビメニュー --> <!-- ナビメニュー -->
<nav> <nav>
...@@ -420,11 +423,12 @@ ...@@ -420,11 +423,12 @@
</main> </main>
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script> <script src="./js/chat.js"></script>
<script src="./js/common.js"></script> <script src="./js/common.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0"> <meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title> <title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css"> <link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet"> <link href="./fontawesome/css/all.css" rel="stylesheet">
...@@ -13,6 +15,7 @@ ...@@ -13,6 +15,7 @@
<link rel="stylesheet" href="./css/footer.css"> <link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css"> <link rel="stylesheet" href="./css/font-awesome.css">
</head> </head>
<body> <body>
<!-- ナビメニュー --> <!-- ナビメニュー -->
<nav> <nav>
...@@ -198,10 +201,11 @@ ...@@ -198,10 +201,11 @@
</main> </main>
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script> <script src="./js/chat.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0"> <meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title> <title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css"> <link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet"> <link href="./fontawesome/css/all.css" rel="stylesheet">
...@@ -13,6 +15,7 @@ ...@@ -13,6 +15,7 @@
<link rel="stylesheet" href="./css/footer.css"> <link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css"> <link rel="stylesheet" href="./css/font-awesome.css">
</head> </head>
<body> <body>
<!-- ナビメニュー --> <!-- ナビメニュー -->
<nav> <nav>
...@@ -41,7 +44,9 @@ ...@@ -41,7 +44,9 @@
<form action="chat_room.html" method="post"> <form action="chat_room.html" method="post">
<!-- ルーム名入力 --> <!-- ルーム名入力 -->
<div class="room_name"> <div class="room_name">
<label for="room_name"><h2>ルーム名</h2></label> <label for="room_name">
<h2>ルーム名</h2>
</label>
<input type="text" class="input_name_room" name="room_name" placeholder="ルーム名を入力してください"> <input type="text" class="input_name_room" name="room_name" placeholder="ルーム名を入力してください">
</div> </div>
...@@ -53,10 +58,11 @@ ...@@ -53,10 +58,11 @@
</main> </main>
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script> <script src="./js/chat.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0"> <meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title> <title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css"> <link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet"> <link href="./fontawesome/css/all.css" rel="stylesheet">
...@@ -13,6 +15,7 @@ ...@@ -13,6 +15,7 @@
<link rel="stylesheet" href="./css/footer.css"> <link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css"> <link rel="stylesheet" href="./css/font-awesome.css">
</head> </head>
<body> <body>
<!-- ナビメニュー --> <!-- ナビメニュー -->
<nav> <nav>
...@@ -56,7 +59,9 @@ ...@@ -56,7 +59,9 @@
<div class="tab_content" id="tab1_content"> <div class="tab_content" id="tab1_content">
<div class="chat_list"> <div class="chat_list">
<!-- お気に入りグループ --> <!-- お気に入りグループ -->
<div class="category"><div class="category_name"><span>お気に入り</span></div></div> <div class="category">
<div class="category_name"><span>お気に入り</span></div>
</div>
<ul class="p-0 chat_make_room_list"> <ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center"> <li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100"> <div class="chat_item d-flex flex-row align-items-center w-100">
...@@ -163,7 +168,9 @@ ...@@ -163,7 +168,9 @@
</li> </li>
</ul> </ul>
<!-- マイグループ --> <!-- マイグループ -->
<div class="category"><div class="category_name"><span>マイグループ1</span></div></div> <div class="category">
<div class="category_name"><span>マイグループ1</span></div>
</div>
<ul class="p-0 chat_make_room_list"> <ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center"> <li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100"> <div class="chat_item d-flex flex-row align-items-center w-100">
...@@ -221,7 +228,9 @@ ...@@ -221,7 +228,9 @@
</li> </li>
</ul> </ul>
<!-- マイグループ --> <!-- マイグループ -->
<div class="category"><div class="category_name"><span>マイグループ2</span></div></div> <div class="category">
<div class="category_name"><span>マイグループ2</span></div>
</div>
<ul class="p-0 chat_make_room_list"> <ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center"> <li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100"> <div class="chat_item d-flex flex-row align-items-center w-100">
...@@ -283,7 +292,9 @@ ...@@ -283,7 +292,9 @@
<div class="tab_content" id="tab2_content"> <div class="tab_content" id="tab2_content">
<div class="chat_list"> <div class="chat_list">
<!-- 全グループ --> <!-- 全グループ -->
<div class="category"><div class="category_name"><span>グループ1</span></div></div> <div class="category">
<div class="category_name"><span>グループ1</span></div>
</div>
<ul class="p-0 chat_make_room_list"> <ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center"> <li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100"> <div class="chat_item d-flex flex-row align-items-center w-100">
...@@ -340,7 +351,9 @@ ...@@ -340,7 +351,9 @@
</div> </div>
</li> </li>
</ul> </ul>
<div class="category"><div class="category_name"><span>グループグループグループグループグループグループ2</span></div></div> <div class="category">
<div class="category_name"><span>グループグループグループグループグループグループ2</span></div>
</div>
<ul class="p-0 chat_make_room_list"> <ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center"> <li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100"> <div class="chat_item d-flex flex-row align-items-center w-100">
...@@ -411,11 +424,12 @@ ...@@ -411,11 +424,12 @@
</main> </main>
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script> <script src="./js/chat.js"></script>
<script src="./js/common.js"></script> <script src="./js/common.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0"> <meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title> <title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css"> <link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet"> <link href="./fontawesome/css/all.css" rel="stylesheet">
...@@ -13,6 +15,7 @@ ...@@ -13,6 +15,7 @@
<link rel="stylesheet" href="./css/footer.css"> <link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css"> <link rel="stylesheet" href="./css/font-awesome.css">
</head> </head>
<body> <body>
<!-- ナビメニュー --> <!-- ナビメニュー -->
<nav> <nav>
...@@ -41,7 +44,9 @@ ...@@ -41,7 +44,9 @@
<form action="chat_room.html" method="post"> <form action="chat_room.html" method="post">
<!-- ルーム名入力 --> <!-- ルーム名入力 -->
<div class="room_name"> <div class="room_name">
<label for="room_name"><h2>ルーム名</h2></label> <label for="room_name">
<h2>ルーム名</h2>
</label>
<input type="text" class="input_name_room" name="room_name" placeholder="ルーム名を入力してください"> <input type="text" class="input_name_room" name="room_name" placeholder="ルーム名を入力してください">
</div> </div>
...@@ -205,10 +210,11 @@ ...@@ -205,10 +210,11 @@
</main> </main>
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script> <script src="./js/chat.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0"> <meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title> <title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css"> <link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet"> <link href="./fontawesome/css/all.css" rel="stylesheet">
...@@ -13,6 +15,7 @@ ...@@ -13,6 +15,7 @@
<link rel="stylesheet" href="./css/chat_room_footer.css"> <link rel="stylesheet" href="./css/chat_room_footer.css">
<link rel="stylesheet" href="./css/font-awesome.css"> <link rel="stylesheet" href="./css/font-awesome.css">
</head> </head>
<body> <body>
<!-- ナビメニュー --> <!-- ナビメニュー -->
<nav> <nav>
...@@ -39,7 +42,8 @@ ...@@ -39,7 +42,8 @@
<div class="col-4 pl-0"> <div class="col-4 pl-0">
<div class="nav-item text-right"> <div class="nav-item text-right">
<a href="#" class="search_menu"><img src="icon/icon_search.png" alt="検索"></a> <a href="#" class="search_menu"><img src="icon/icon_search.png" alt="検索"></a>
<a href="#" data-toggle="modal" data-target="#menuModalCenter"><img src="icon/icon_room_menu.png" alt="メニュー"></a> <a href="#" data-toggle="modal" data-target="#menuModalCenter"><img src="icon/icon_room_menu.png"
alt="メニュー"></a>
</div> </div>
</div><!-- .col --> </div><!-- .col -->
</div><!-- .row --> </div><!-- .row -->
...@@ -180,7 +184,9 @@ ...@@ -180,7 +184,9 @@
</figure> </figure>
<div class="room_left-text"> <div class="room_left-text">
<div class="name">名前名前名前名前</div> <div class="name">名前名前名前名前</div>
<div class="text">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</div> <div class="text">
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
</div>
</div> </div>
<div class="date d-flex flex-column"><span>12/20</span><span>00:00</span></div> <div class="date d-flex flex-column"><span>12/20</span><span>00:00</span></div>
<div class="read d-flex align-items-end"><span>既読</span></div> <div class="read d-flex align-items-end"><span>既読</span></div>
...@@ -190,7 +196,9 @@ ...@@ -190,7 +196,9 @@
<!-- 自分の吹き出し --> <!-- 自分の吹き出し -->
<div class="room_right"> <div class="room_right">
<div class="text">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</div> <div class="text">
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
</div>
<div class="date d-flex flex-column"><span>12/20</span><span>00:00</span></div> <div class="date d-flex flex-column"><span>12/20</span><span>00:00</span></div>
<div class="read d-flex align-items-end"><span>既読</span></div> <div class="read d-flex align-items-end"><span>既読</span></div>
</div> </div>
...@@ -414,11 +422,12 @@ ...@@ -414,11 +422,12 @@
<!-- プロフィールモーダル --> <!-- プロフィールモーダル -->
<!--#include virtual="modal_chat_profile.html" --> <!--#include virtual="modal_chat_profile.html" -->
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script> <script src="./js/chat.js"></script>
<script src="./js/common.js"></script> <script src="./js/common.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0"> <meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title> <title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css"> <link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet"> <link href="./fontawesome/css/all.css" rel="stylesheet">
...@@ -13,6 +15,7 @@ ...@@ -13,6 +15,7 @@
<link rel="stylesheet" href="./css/footer.css"> <link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css"> <link rel="stylesheet" href="./css/font-awesome.css">
</head> </head>
<body> <body>
<!-- ナビメニュー --> <!-- ナビメニュー -->
<header id="collabo_header"> <header id="collabo_header">
...@@ -142,12 +145,13 @@ ...@@ -142,12 +145,13 @@
<!-- フッター --> <!-- フッター -->
<!--#include virtual="footer_collabo.html" --> <!--#include virtual="footer_collabo.html" -->
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script> <script src="./js/chat.js"></script>
<script src="./js/common.js"></script> <script src="./js/common.js"></script>
<script src="./js/collaboration.js"></script> <script src="./js/collaboration.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
<!-- ユーザーリスト -->
<!-- ユーザーリスト --> <div class="user_list">
<div class="user_list">
<ul class="p-0"> <ul class="p-0">
<li class="d-flex align-items-center"> <li class="d-flex align-items-center">
<div class="user_item d-flex flex-row align-items-center w-100"> <div class="user_item d-flex flex-row align-items-center w-100">
...@@ -195,4 +194,4 @@ ...@@ -195,4 +194,4 @@
</div> </div>
</li> </li>
</ul> </ul>
</div> </div>
\ No newline at end of file
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0"> <meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title> <title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css"> <link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet"> <link href="./fontawesome/css/all.css" rel="stylesheet">
...@@ -13,6 +15,7 @@ ...@@ -13,6 +15,7 @@
<link rel="stylesheet" href="./css/footer.css"> <link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css"> <link rel="stylesheet" href="./css/font-awesome.css">
</head> </head>
<body> <body>
<!-- ナビメニュー --> <!-- ナビメニュー -->
<header id="collabo_header"> <header id="collabo_header">
...@@ -142,12 +145,13 @@ ...@@ -142,12 +145,13 @@
<!-- フッター --> <!-- フッター -->
<!--#include virtual="footer_collabo.html" --> <!--#include virtual="footer_collabo.html" -->
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script> <script src="./js/chat.js"></script>
<script src="./js/common.js"></script> <script src="./js/common.js"></script>
<script src="./js/collaboration.js"></script> <script src="./js/collaboration.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0"> <meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title> <title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css"> <link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet"> <link href="./fontawesome/css/all.css" rel="stylesheet">
...@@ -13,6 +15,7 @@ ...@@ -13,6 +15,7 @@
<link rel="stylesheet" href="./css/footer.css"> <link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css"> <link rel="stylesheet" href="./css/font-awesome.css">
</head> </head>
<body> <body>
<!-- ナビメニュー --> <!-- ナビメニュー -->
<header id="collabo_header"> <header id="collabo_header">
...@@ -136,12 +139,13 @@ ...@@ -136,12 +139,13 @@
<!-- フッター --> <!-- フッター -->
<!--#include virtual="footer_collabo.html" --> <!--#include virtual="footer_collabo.html" -->
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script> <script src="./js/chat.js"></script>
<script src="./js/common.js"></script> <script src="./js/common.js"></script>
<script src="./js/collaboration.js"></script> <script src="./js/collaboration.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0"> <meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title> <title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css"> <link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet"> <link href="./fontawesome/css/all.css" rel="stylesheet">
...@@ -13,6 +15,7 @@ ...@@ -13,6 +15,7 @@
<link rel="stylesheet" href="./css/footer.css"> <link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css"> <link rel="stylesheet" href="./css/font-awesome.css">
</head> </head>
<body> <body>
<!-- ナビメニュー --> <!-- ナビメニュー -->
<header id="collabo_header"> <header id="collabo_header">
...@@ -87,12 +90,13 @@ ...@@ -87,12 +90,13 @@
<!-- フッター --> <!-- フッター -->
<!--#include virtual="footer_collabo.html" --> <!--#include virtual="footer_collabo.html" -->
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script> <script src="./js/chat.js"></script>
<script src="./js/common.js"></script> <script src="./js/common.js"></script>
<script src="./js/collaboration.js"></script> <script src="./js/collaboration.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0"> <meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title> <title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css"> <link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet"> <link href="./fontawesome/css/all.css" rel="stylesheet">
...@@ -13,6 +15,7 @@ ...@@ -13,6 +15,7 @@
<link rel="stylesheet" href="./css/footer.css"> <link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css"> <link rel="stylesheet" href="./css/font-awesome.css">
</head> </head>
<body> <body>
<!-- ナビメニュー --> <!-- ナビメニュー -->
<header id="collabo_header"> <header id="collabo_header">
...@@ -132,12 +135,13 @@ ...@@ -132,12 +135,13 @@
<!-- フッター --> <!-- フッター -->
<!--#include virtual="footer_collabo.html" --> <!--#include virtual="footer_collabo.html" -->
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script> <script src="./js/chat.js"></script>
<script src="./js/common.js"></script> <script src="./js/common.js"></script>
<script src="./js/collaboration.js"></script> <script src="./js/collaboration.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
<div class="user_list_wrap"> <div class="user_list_wrap">
<div class="user_list d-flex flex-wrap"> <div class="user_list d-flex flex-wrap">
<div class="user_item host"> <div class="user_item host">
<a href="#" data-toggle="modal" data-target="#profileModal1"> <a href="#" data-toggle="modal" data-target="#profileModal1">
...@@ -55,4 +55,4 @@ ...@@ -55,4 +55,4 @@
</a> </a>
</div> </div>
</div> </div>
</div> </div>
\ No newline at end of file
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<!-- Required meta tags --> <!-- Required meta tags -->
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0"> <meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title> <title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css"> <link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet"> <link href="./fontawesome/css/all.css" rel="stylesheet">
...@@ -15,6 +17,7 @@ ...@@ -15,6 +17,7 @@
<link rel="stylesheet" href="./css/footer.css"> <link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css"> <link rel="stylesheet" href="./css/font-awesome.css">
</head> </head>
<body> <body>
<!-- ナビメニュー --> <!-- ナビメニュー -->
<nav> <nav>
...@@ -58,7 +61,9 @@ ...@@ -58,7 +61,9 @@
<div class="tab_content" id="tab1_content"> <div class="tab_content" id="tab1_content">
<div class="chat_list"> <div class="chat_list">
<!-- お気に入りグループ --> <!-- お気に入りグループ -->
<div class="category"><div class="category_name"><span>お気に入り</span></div></div> <div class="category">
<div class="category_name"><span>お気に入り</span></div>
</div>
<ul class="p-0 chat_make_room_list"> <ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center"> <li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100"> <a href="chat_room.html" class="w-100">
...@@ -131,7 +136,9 @@ ...@@ -131,7 +136,9 @@
</li> </li>
</ul> </ul>
<!-- マイグループ --> <!-- マイグループ -->
<div class="category"><div class="category_name"><span>マイグループ 本社 > 経理部</span></div></div> <div class="category">
<div class="category_name"><span>マイグループ 本社 > 経理部</span></div>
</div>
<ul class="p-0 chat_make_room_list"> <ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center"> <li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100"> <a href="chat_room.html" class="w-100">
...@@ -181,7 +188,9 @@ ...@@ -181,7 +188,9 @@
</li> </li>
</ul> </ul>
<!-- マイグループ --> <!-- マイグループ -->
<div class="category"><div class="category_name"><span>マイグループマイグループマイグループマイグループマイグループマイグループ2</span></div> </div> <div class="category">
<div class="category_name"><span>マイグループマイグループマイグループマイグループマイグループマイグループ2</span></div>
</div>
<ul class="p-0 chat_make_room_list"> <ul class="p-0 chat_make_room_list">
<li class="d-flex align-items-center"> <li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100"> <a href="chat_room.html" class="w-100">
...@@ -420,11 +429,12 @@ ...@@ -420,11 +429,12 @@
<!-- ローディング --> <!-- ローディング -->
<!--#include virtual="loading.html" --> <!--#include virtual="loading.html" -->
<script src="./js/libs/jquery-3.3.1.min.js"></script> <script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script> <script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script> <script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script> <script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/contact.js"></script> <script src="./js/contact.js"></script>
<script src="./js/common.js"></script> <script src="./js/common.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
} }
.archive_list ul li { .archive_list ul li {
list-style: none; list-style: none;
border-bottom: 1px solid #E2E8F0; border-bottom: 1px solid #e2e8f0;
position: relative; position: relative;
} }
.archive_list ul li a { .archive_list ul li a {
...@@ -26,10 +26,18 @@ ...@@ -26,10 +26,18 @@
.archive_list ul li a:hover { .archive_list ul li a:hover {
background: aliceblue; background: aliceblue;
} }
.bg_blue{ background: #0070CA; } .bg_blue {
.bg_green{ background: #4DCA00; } background: #0070ca;
.bg_orange{ background: #CA6D00; } }
.archive_list ul li:first-child { border-top: 1px solid #E2E8F0; } .bg_green {
background: #4dca00;
}
.bg_orange {
background: #ca6d00;
}
.archive_list ul li:first-child {
border-top: 1px solid #e2e8f0;
}
.archive_desc { .archive_desc {
padding-left: 10px; padding-left: 10px;
position: relative; position: relative;
...@@ -37,30 +45,47 @@ ...@@ -37,30 +45,47 @@
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
} }
.archive_date span { color: #323743; font-size: 14px; } .archive_date span {
.archive_name span { color: #323743; font-size: 16px; font-weight: 500;} color: #323743;
.archive_name{ font-size: 14px;
}
.archive_name span {
color: #323743;
font-size: 16px;
font-weight: 500;
}
.archive_name {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
/**************************** archive detail *************************/ /**************************** archive detail *************************/
.archive_detail .ttl{ .archive_detail .ttl {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
} }
.archive_detail .item{ margin-bottom: 20px; } .archive_detail .item {
.archive_detail .archive_detail_desc img{ margin-bottom: 20px;
}
.archive_detail .archive_detail_desc img {
width: 80px; width: 80px;
height: 80px; height: 80px;
border-radius: 50%; 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 {
.archive_detail .archive_detail_desc .archive_detail_user_list ul li{ list-style: none; margin: 0 5px; } padding-left: 0;
.archive_detail_desc { margin: 0 10px; } 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_user_list span,
.archive_detail .archive_detail_desc .archive_detail_sv_user span{ .archive_detail .archive_detail_desc .archive_detail_sv_user span {
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
...@@ -68,11 +93,11 @@ ...@@ -68,11 +93,11 @@
width: 90px; width: 90px;
} }
@media screen and (max-width: 768px){ @media screen and (max-width: 768px) {
.archive_name{ .archive_name {
font-size: 14px; font-size: 14px;
} }
.archive_detail .ttl{ .archive_detail .ttl {
font-size: 16px; font-size: 16px;
} }
.archive_detail_desc span { .archive_detail_desc span {
......
...@@ -5,10 +5,10 @@ ...@@ -5,10 +5,10 @@
margin: 0 auto; margin: 0 auto;
} }
.tab_item { .tab_item {
width: calc(100%/2); width: calc(100% / 2);
height: 50px; height: 50px;
border-bottom: 5px solid #0070CA; border-bottom: 5px solid #0070ca;
background-color: #E0E0E0; background-color: #e0e0e0;
line-height: 50px; line-height: 50px;
font-size: 16px; font-size: 16px;
text-align: center; text-align: center;
...@@ -33,12 +33,12 @@ input[name="tab_item"] { ...@@ -33,12 +33,12 @@ input[name="tab_item"] {
overflow: hidden; overflow: hidden;
} }
#tab1:checked ~ #tab1_content, #tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content{ #tab2:checked ~ #tab2_content {
display: block; display: block;
} }
.tabs input:checked + .tab_item { .tabs input:checked + .tab_item {
background-color: #0070CA; background-color: #0070ca;
color: #fff; color: #fff;
} }
...@@ -52,13 +52,14 @@ input[name="tab_item"] { ...@@ -52,13 +52,14 @@ input[name="tab_item"] {
} }
.chat_list ul li { .chat_list ul li {
list-style: none; list-style: none;
border-bottom: 1px solid #E2E8F0; border-bottom: 1px solid #e2e8f0;
position: relative; position: relative;
} }
.chat_list ul li:first-child { .chat_list ul li:first-child {
border-top: 1px solid #E2E8F0; border-top: 1px solid #e2e8f0;
} }
.chat_list .chat_item_t,.chat_list .chat_item_desc { .chat_list .chat_item_t,
.chat_list .chat_item_desc {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
...@@ -90,7 +91,7 @@ input[name="tab_item"] { ...@@ -90,7 +91,7 @@ input[name="tab_item"] {
overflow: hidden; overflow: hidden;
margin: 0 auto; margin: 0 auto;
} }
.chat_item_l .thubnail img{ .chat_item_l .thubnail img {
width: 50px; width: 50px;
height: 50px; height: 50px;
} }
...@@ -120,7 +121,8 @@ input[name="tab_item"] { ...@@ -120,7 +121,8 @@ input[name="tab_item"] {
overflow: hidden; overflow: hidden;
float: left; float: left;
} }
.chat_item_l .thubnail3 .img_wrap:nth-child(2) img, .chat_item_l .thubnail3 .img_wrap:nth-child(3) img { .chat_item_l .thubnail3 .img_wrap:nth-child(2) img,
.chat_item_l .thubnail3 .img_wrap:nth-child(3) img {
width: 25px; width: 25px;
height: 25px; height: 25px;
} }
...@@ -152,30 +154,42 @@ input[name="tab_item"] { ...@@ -152,30 +154,42 @@ input[name="tab_item"] {
left: -12px; left: -12px;
} }
.chat_item{ height: 90px;} .chat_item {
.chat_list li{ list-style: none; } height: 90px;
.chat_list a{ color: #323743; } }
.chat_list li {
list-style: none;
}
.chat_list a {
color: #323743;
}
/* タイトル(グループ名、個人名) */ /* タイトル(グループ名、個人名) */
.chat_item_ttl,.chat_item_num{ font-weight: bold; } .chat_item_ttl,
.chat_item_num {
font-weight: bold;
}
/* 投稿時間 */ /* 投稿時間 */
.chat_item_time{ font-weight: 600; text-align: center; } .chat_item_time {
font-weight: 600;
text-align: center;
}
/* 未読件数 */ /* 未読件数 */
.chat_item_unread{ .chat_item_unread {
max-width: 60px; max-width: 60px;
text-align: center; text-align: center;
background-color: #FF4747; background-color: #ff4747;
color: #fff; color: #fff;
padding: 2px 10px; padding: 2px 10px;
margin: 5px auto; margin: 5px auto;
border-radius: 30px; border-radius: 30px;
} }
/* 既読 */ /* 既読 */
.already_read{ .already_read {
background-color: #F1F2F2; background-color: #f1f2f2;
} }
/**************************** make room *************************/ /**************************** make room *************************/
.chat_list .category{ .chat_list .category {
text-align: left; text-align: left;
font-size: 1.4rem; font-size: 1.4rem;
height: 30px; height: 30px;
...@@ -183,7 +197,7 @@ input[name="tab_item"] { ...@@ -183,7 +197,7 @@ input[name="tab_item"] {
cursor: pointer; cursor: pointer;
position: relative; position: relative;
line-height: 30px; line-height: 30px;
background: #C4C4C4; background: #c4c4c4;
padding-left: 10px; padding-left: 10px;
} }
.category_name { .category_name {
...@@ -209,17 +223,16 @@ input[name="tab_item"] { ...@@ -209,17 +223,16 @@ input[name="tab_item"] {
font: 26px FontAwesome; font: 26px FontAwesome;
font-family: "Font Awesome 5 Free"; font-family: "Font Awesome 5 Free";
font-weight: 900; font-weight: 900;
color: #F5D256; color: #f5d256;
} }
.star.disable:before { .star.disable:before {
content: "\f005"; content: "\f005";
font: 26px FontAwesome; font: 26px FontAwesome;
font-family: "Font Awesome 5 Free"; font-family: "Font Awesome 5 Free";
font-weight: 400; font-weight: 400;
color: #C4C4C4; color: #c4c4c4;
} }
/* メンバー選択チェックボックス */ /* メンバー選択チェックボックス */
.chat_item_l_chk { .chat_item_l_chk {
height: 100%; height: 100%;
...@@ -233,16 +246,16 @@ input[name="tab_item"] { ...@@ -233,16 +246,16 @@ input[name="tab_item"] {
vertical-align: middle; vertical-align: middle;
} }
.checkbox-input{ .checkbox-input {
display: none; display: none;
} }
.checkbox-parts{ .checkbox-parts {
position:relative; position: relative;
} }
.checkbox-parts::before{ .checkbox-parts::before {
display: block; display: block;
position: absolute; position: absolute;
border: 2px solid #0070CA; border: 2px solid #0070ca;
content: ""; content: "";
width: 40px; width: 40px;
height: 40px; height: 40px;
...@@ -253,7 +266,7 @@ input[name="tab_item"] { ...@@ -253,7 +266,7 @@ input[name="tab_item"] {
left: 0; left: 0;
margin: auto; margin: auto;
} }
.checkbox-input:checked + .checkbox-parts::after{ .checkbox-input:checked + .checkbox-parts::after {
display: block; display: block;
position: absolute; position: absolute;
content: "\f107"; content: "\f107";
...@@ -266,7 +279,7 @@ input[name="tab_item"] { ...@@ -266,7 +279,7 @@ input[name="tab_item"] {
bottom: 0; bottom: 0;
left: 0; left: 0;
margin: auto; margin: auto;
background: #0070CA; background: #0070ca;
border-radius: 50%; border-radius: 50%;
} }
...@@ -274,65 +287,83 @@ input[name="tab_item"] { ...@@ -274,65 +287,83 @@ input[name="tab_item"] {
.make_room_btn button, .make_room_btn button,
.make_room_confirm_btn button, .make_room_confirm_btn button,
.add_user_confirm_btn button, .add_user_confirm_btn button,
.add_user_btn button{ .add_user_btn button {
height: 60px; height: 60px;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
background: #0070CA; background: #0070ca;
color: #fff; color: #fff;
border: none; border: none;
font-size: 18px; font-size: 18px;
max-width: 1280px; max-width: 1280px;
} }
.select_member{ font-size: 14px; } .select_member {
font-size: 14px;
}
#chat_make_room_confirm .room_name, #chat_make_room_confirm .room_name,
#chat_change_room_name .room_name { width: 90%; margin: 0 auto; } #chat_change_room_name .room_name {
width: 90%;
margin: 0 auto;
}
#chat_make_room_confirm .room_name h2, #chat_make_room_confirm .room_name h2,
#chat_change_room_name .room_name h2 { margin-top: 20px; font-size: 18px; } #chat_change_room_name .room_name h2 {
margin-top: 20px;
font-size: 18px;
}
#chat_make_room_confirm .chat_list h2, #chat_make_room_confirm .chat_list h2,
#chat_add_user_confirm .chat_list h2 { font-size: 18px; } #chat_add_user_confirm .chat_list h2 {
font-size: 18px;
}
#chat_make_room_confirm .chat_list, #chat_make_room_confirm .chat_list,
#chat_add_user_confirm .chat_list { padding: 20px 0; width: 90%; margin: 0 auto; } #chat_add_user_confirm .chat_list {
padding: 20px 0;
width: 90%;
margin: 0 auto;
}
/* ルーム名入力フォーム */ /* ルーム名入力フォーム */
.input_name_room { .input_name_room {
padding-left: 10px; padding-left: 10px;
width: 100%; width: 100%;
border: none; border: none;
border-bottom: 1px solid #BDBDBD; border-bottom: 1px solid #bdbdbd;
height: 40px; height: 40px;
margin-bottom: 20px; margin-bottom: 20px;
} }
/* ルーム名変更ボタン */ /* ルーム名変更ボタン */
.change_room_name_btn{ text-align: center; } .change_room_name_btn {
.change_room_name_btn button{ text-align: center;
}
.change_room_name_btn button {
text-align: center; text-align: center;
height: 48px; height: 48px;
width: 172px; width: 172px;
background: #0070CA; background: #0070ca;
color: #fff; color: #fff;
border: none; border: none;
font-size: 18px; font-size: 18px;
} }
/**************************** chat room *************************/ /**************************** chat room *************************/
#chat_room { margin-top: 150px; } #chat_room {
margin-top: 150px;
}
.chat_room_src_form input { .chat_room_src_form input {
padding-left: 10px; padding-left: 10px;
border: 1px solid #BDBDBD; border: 1px solid #bdbdbd;
border-radius: 5px; border-radius: 5px;
height: 40px; height: 40px;
margin: 10px 0; margin: 10px 0;
padding-left: 35px; padding-left: 35px;
width: 100%; width: 100%;
} }
.chat_room_src_form{ .chat_room_src_form {
position: relative; position: relative;
margin: 0 5px; margin: 0 5px;
} }
.chat_room_src_form .src_icon{ .chat_room_src_form .src_icon {
position: absolute; position: absolute;
top: 23px; top: 23px;
left: 10px; left: 10px;
...@@ -346,7 +377,7 @@ input[name="tab_item"] { ...@@ -346,7 +377,7 @@ input[name="tab_item"] {
width: 120px; width: 120px;
font-size: 14px; font-size: 14px;
padding: 0 10px; padding: 0 10px;
color: #8F8F8F; color: #8f8f8f;
text-align: center; text-align: center;
} }
...@@ -359,7 +390,10 @@ input[name="tab_item"] { ...@@ -359,7 +390,10 @@ input[name="tab_item"] {
overflow-x: scroll; overflow-x: scroll;
z-index: 2; z-index: 2;
} }
.user_list .user_item{ margin: 10px; text-align: center;} .user_list .user_item {
margin: 10px;
text-align: center;
}
.user_list .user_item span { .user_list .user_item span {
width: 60px; width: 60px;
white-space: nowrap; white-space: nowrap;
...@@ -367,13 +401,15 @@ input[name="tab_item"] { ...@@ -367,13 +401,15 @@ input[name="tab_item"] {
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 12px; font-size: 12px;
} }
.user_list .user_item a { color: #323743; } .user_list .user_item a {
color: #323743;
}
/* ユーザーリストフィルター */ /* ユーザーリストフィルター */
#filter .user_item .img_wrap{ #filter .user_item .img_wrap {
position: relative; position: relative;
} }
#filter .user_item .img_wrap.filter:after{ #filter .user_item .img_wrap.filter:after {
position: absolute; position: absolute;
content: "\f107"; content: "\f107";
font: 50px FontAwesome; font: 50px FontAwesome;
...@@ -393,8 +429,8 @@ input[name="tab_item"] { ...@@ -393,8 +429,8 @@ input[name="tab_item"] {
} }
.room_container { .room_container {
padding:0; padding: 0;
background: #F3F3F3; background: #f3f3f3;
overflow: hidden; overflow: hidden;
margin: 20px auto; margin: 20px auto;
margin-bottom: 140px; margin-bottom: 140px;
...@@ -441,7 +477,7 @@ input[name="tab_item"] { ...@@ -441,7 +477,7 @@ input[name="tab_item"] {
font-size: 12px; font-size: 12px;
} }
.unread span { .unread span {
background: #C4C4C4; background: #c4c4c4;
color: #fff; color: #fff;
border-radius: 15px; border-radius: 15px;
padding: 0 5px; padding: 0 5px;
...@@ -460,19 +496,19 @@ input[name="tab_item"] { ...@@ -460,19 +496,19 @@ input[name="tab_item"] {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.room_left figure img{ .room_left figure img {
border-radius: 50%; border-radius: 50%;
width: 50px; width: 50px;
height: 50px; height: 50px;
} }
.room_left .img_wrap{ .room_left .img_wrap {
display: table-cell; display: table-cell;
text-align: center; text-align: center;
border-radius: 8px; border-radius: 8px;
line-height: 140px; line-height: 140px;
overflow: hidden; overflow: hidden;
} }
.room_right .img_wrap{ .room_right .img_wrap {
display: block; display: block;
text-align: center; text-align: center;
border-radius: 8px; border-radius: 8px;
...@@ -480,9 +516,9 @@ input[name="tab_item"] { ...@@ -480,9 +516,9 @@ input[name="tab_item"] {
margin-left: 80px; margin-left: 80px;
overflow: hidden; overflow: hidden;
} }
.img_wrap img{ .img_wrap img {
width: 100%; width: 100%;
vertical-align:middle; vertical-align: middle;
} }
.room_left-text { .room_left-text {
...@@ -504,13 +540,14 @@ input[name="tab_item"] { ...@@ -504,13 +540,14 @@ input[name="tab_item"] {
background-color: #ffffff; background-color: #ffffff;
font-size: 18px; font-size: 18px;
} }
.room_left-text.latest .text,.room_left-text.latest .img_wrap{ .room_left-text.latest .text,
.room_left-text.latest .img_wrap {
box-shadow: 5px 5px 5px rgb(0 0 0 / 40%); box-shadow: 5px 5px 5px rgb(0 0 0 / 40%);
} }
/* 吹き出し */ /* 吹き出し */
.room_left-text .text::after { .room_left-text .text::after {
content: ''; content: "";
position: absolute; position: absolute;
display: block; display: block;
width: 0; width: 0;
...@@ -562,7 +599,7 @@ input[name="tab_item"] { ...@@ -562,7 +599,7 @@ input[name="tab_item"] {
.room_right .text { .room_right .text {
padding: 10px; padding: 10px;
border-radius: 8px; border-radius: 8px;
background-color: #0070CA; background-color: #0070ca;
color: #fff; color: #fff;
margin: 0; margin: 0;
margin-left: 80px; margin-left: 80px;
...@@ -570,14 +607,14 @@ input[name="tab_item"] { ...@@ -570,14 +607,14 @@ input[name="tab_item"] {
} }
/* 吹き出し */ /* 吹き出し */
.room_right .text::after { .room_right .text::after {
content: ''; content: "";
position: absolute; position: absolute;
right: -10px; right: -10px;
top: 5px; top: 5px;
border-left: 10px solid #0070CA; border-left: 10px solid #0070ca;
border-right: 10px solid transparent; border-right: 10px solid transparent;
border-top: 10px solid #0070CA; border-top: 10px solid #0070ca;
border-bottom: 10px solid transparent;v border-bottom: 10px solid transparent;
} }
/* 日付 */ /* 日付 */
.room_right .date { .room_right .date {
...@@ -592,7 +629,7 @@ input[name="tab_item"] { ...@@ -592,7 +629,7 @@ input[name="tab_item"] {
/* システムメッセージ */ /* システムメッセージ */
.sys_msg { .sys_msg {
background: rgb(198,198,198,.5); background: rgb(198, 198, 198, 0.5);
color: #909090; color: #909090;
padding: 2px 10px; padding: 2px 10px;
width: 200px; width: 200px;
...@@ -608,14 +645,16 @@ input[name="tab_item"] { ...@@ -608,14 +645,16 @@ input[name="tab_item"] {
max-width: 320px; max-width: 320px;
margin: 0 auto; margin: 0 auto;
} }
.collabo_date span{ font-size: 12px; } .collabo_date span {
font-size: 12px;
}
.collabo_area .collabo_desc { .collabo_area .collabo_desc {
background: rgb(0,112,202,.6); background: rgb(0, 112, 202, 0.6);
border-radius: 5px; border-radius: 5px;
padding: 5px 10px; padding: 5px 10px;
} }
.collabo_area.disable .collabo_desc { .collabo_area.disable .collabo_desc {
background: rgb(91,102,111,.6); background: rgb(91, 102, 111, 0.6);
} }
.collabo_desc .collabo_user_list img { .collabo_desc .collabo_user_list img {
width: 30px; width: 30px;
...@@ -628,13 +667,18 @@ input[name="tab_item"] { ...@@ -628,13 +667,18 @@ input[name="tab_item"] {
width: 30px; width: 30px;
height: 30px; height: 30px;
border-radius: 15px; border-radius: 15px;
background: #B8B8B8; background: #b8b8b8;
text-align: center; text-align: center;
color: #fff; color: #fff;
margin: 5px; margin: 5px;
} }
.collabo_user_list .num span { line-height: 30px; } .collabo_user_list .num span {
.collabo_room_name { color: #fff; max-width: 300px;} line-height: 30px;
}
.collabo_room_name {
color: #fff;
max-width: 300px;
}
.collabo_room_name span:first-child { .collabo_room_name span:first-child {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
...@@ -654,7 +698,7 @@ input[name="tab_item"] { ...@@ -654,7 +698,7 @@ input[name="tab_item"] {
.collabo_area .collabo_btn button { .collabo_area .collabo_btn button {
width: 100%; width: 100%;
line-height: 45px; line-height: 45px;
background: #0070CA; background: #0070ca;
border: none; border: none;
color: #fff; color: #fff;
border-radius: 25px; border-radius: 25px;
...@@ -662,7 +706,7 @@ input[name="tab_item"] { ...@@ -662,7 +706,7 @@ input[name="tab_item"] {
outline: none; outline: none;
} }
.collabo_area.disable .collabo_btn button { .collabo_area.disable .collabo_btn button {
background: #5B666F; background: #5b666f;
} }
/**************************** modal *************************/ /**************************** modal *************************/
...@@ -679,7 +723,7 @@ input[name="tab_item"] { ...@@ -679,7 +723,7 @@ input[name="tab_item"] {
margin-right: 10px; margin-right: 10px;
} }
.menu_modal .modal-body ul li { .menu_modal .modal-body ul li {
border-bottom: 1px solid #C6C6C6; border-bottom: 1px solid #c6c6c6;
height: 40px; height: 40px;
} }
.menu_modal .modal-body ul li a { .menu_modal .modal-body ul li a {
...@@ -691,22 +735,23 @@ input[name="tab_item"] { ...@@ -691,22 +735,23 @@ input[name="tab_item"] {
background: aliceblue; background: aliceblue;
} }
@media screen and (max-width: 768px) {
@media screen and (max-width: 768px){
/* chat item */ /* chat item */
.tab_item{ .tab_item {
font-size: 16px; font-size: 16px;
} }
.chat_item_ttl{ .chat_item_ttl {
font-size: 16px; font-size: 16px;
} }
.chat_item_ttl, .chat_item_num{ .chat_item_ttl,
.chat_item_num {
font-size: 16px; font-size: 16px;
} }
.chat_item_m { .chat_item_m {
font-size: 14px; font-size: 14px;
} }
.chat_item_time,.chat_item_unread{ .chat_item_time,
.chat_item_unread {
font-size: 14px; font-size: 14px;
} }
.chat_item { .chat_item {
...@@ -716,7 +761,7 @@ input[name="tab_item"] { ...@@ -716,7 +761,7 @@ input[name="tab_item"] {
.make_room_btn button, .make_room_btn button,
.make_room_confirm_btn button, .make_room_confirm_btn button,
.add_user_confirm_btn button, .add_user_confirm_btn button,
.add_user_btn button{ .add_user_btn button {
font-size: 16px; font-size: 16px;
} }
/* check radio */ /* check radio */
...@@ -734,9 +779,13 @@ input[name="tab_item"] { ...@@ -734,9 +779,13 @@ input[name="tab_item"] {
width: 30px; width: 30px;
} }
#chat_make_room_confirm .room_name h2, #chat_make_room_confirm .room_name h2,
#chat_change_room_name .room_name h2 { font-size: 16px; } #chat_change_room_name .room_name h2 {
font-size: 16px;
}
#chat_make_room_confirm .chat_list h2, #chat_make_room_confirm .chat_list h2,
#chat_add_user_confirm .chat_list h2 { font-size: 16px; } #chat_add_user_confirm .chat_list h2 {
font-size: 16px;
}
/* ルーム名入力フォーム */ /* ルーム名入力フォーム */
.input_name_room { .input_name_room {
font-size: 14px; font-size: 14px;
......
@charset "UTF-8"; @charset "UTF-8";
/**************************** footer *************************/ /**************************** footer *************************/
footer{ footer {
max-width: 1280px; max-width: 1280px;
background: #F9F9F9; background: #F9F9F9;
margin-top: 20px; margin-top: 20px;
...@@ -10,14 +10,14 @@ footer{ ...@@ -10,14 +10,14 @@ footer{
bottom: 0; bottom: 0;
width: 100%; width: 100%;
} }
.footer_content_t{ .footer_content_t {
height: 70px; height: 70px;
padding: 0 10px; padding: 0 10px;
} }
.footer_content_b{ .footer_content_b {
height: 70px; height: 70px;
} }
footer .footer-wrap{ footer .footer-wrap {
margin: 0 auto; margin: 0 auto;
/* max-width: 500px; */ /* max-width: 500px; */
height: 100%; height: 100%;
...@@ -25,7 +25,7 @@ footer .footer-wrap{ ...@@ -25,7 +25,7 @@ footer .footer-wrap{
footer .footer_content_t .footer_item { footer .footer_content_t .footer_item {
margin: auto 10px; margin: auto 10px;
} }
footer .footer_item{ footer .footer_item {
text-align: center; text-align: center;
margin: auto 0; margin: auto 0;
} }
...@@ -35,15 +35,15 @@ footer .footer_content_b .footer_item p{ ...@@ -35,15 +35,15 @@ footer .footer_content_b .footer_item p{
font-weight: bold; font-weight: bold;
margin:0; margin:0;
} }
footer .footer_item img{ footer .footer_item img {
width: 32px; width: 32px;
height: 32px; height: 32px;
} }
footer .footer_content_b .footer_item .active{ footer .footer_content_b .footer_item .active {
color: #0070CA; color: #0070CA;
font-weight: bold; font-weight: bold;
} }
footer .footer_item a{ footer .footer_item a {
display: inline-block; display: inline-block;
} }
...@@ -56,12 +56,12 @@ footer .footer_content_t input { ...@@ -56,12 +56,12 @@ footer .footer_content_t input {
border-radius: 5px; border-radius: 5px;
height: 45px; height: 45px;
} }
footer .footer_content_t input:focus{ footer .footer_content_t input:focus {
border-color: #71a2ff; border-color: #71a2ff;
outline: 0; outline: 0;
box-shadow: 0 0 0 0.2rem rgb(0 83 240 / 25%); box-shadow: 0 0 0 0.2rem rgb(0 83 240 / 25%);
} }
@media screen and (max-width: 768px){ @media screen and (max-width: 768px) {
footer .footer_content_b .footer_item p { footer .footer_content_b .footer_item p {
font-size: 12px; font-size: 12px;
} }
......
@charset "UTF-8"; @charset "UTF-8";
/**************************** header *************************/ /**************************** header *************************/
#collabo_header{ #collabo_header {
max-width: 1280px; max-width: 1280px;
height: 60px; height: 60px;
position: fixed; position: fixed;
top: 0; top: 0;
width: 100%; width: 100%;
padding: 0 10px; padding: 0 10px;
background: #1D1D1D; background: #1d1d1d;
z-index: 10; z-index: 10;
} }
.collabo_nav_l{ .collabo_nav_l {
color: #fff; color: #fff;
} }
.collabo_nav_r .img_wrap{ .collabo_nav_r .img_wrap {
width: 45px; width: 45px;
height: 45px; height: 45px;
} }
.collabo_nav_r .img_wrap img{ .collabo_nav_r .img_wrap img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
/**************************** main *************************/ /**************************** main *************************/
#collabo_main { height: calc( 100vh - 180px ); position: relative; margin-bottom: 120px;} #collabo_main {
height: calc(100vh - 180px);
position: relative;
margin-bottom: 120px;
}
#collabo_main .user_list_wrap, #collabo_main .user_list_wrap,
#collabo_main .document_wrap, #collabo_main .document_wrap,
#overlay_user_list .user_list_wrap { height: 100%; background: #525252;} #overlay_user_list .user_list_wrap {
#collabo_main .user_list,#overlay_user_list .user_list { background: #525252; padding-bottom: 120px;} height: 100%;
#collabo_main .user_list .img_wrap,#overlay_user_list .user_list .img_wrap{ 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; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
margin: 5px auto; margin: 5px auto;
height: 100%; height: 100%;
} }
.user_item .name { .user_item .name {
position: absolute; position: absolute;
top: 65px; top: 65px;
left: 0; left: 0;
...@@ -49,15 +61,21 @@ ...@@ -49,15 +61,21 @@
margin: 0 auto; margin: 0 auto;
} }
#collabo_main .user_list .img_wrap img, #collabo_main .user_list .img_wrap img,
#overlay_user_list .user_list .img_wrap img{ #overlay_user_list .user_list .img_wrap img {
width: 80px; width: 80px;
height: 80px; height: 80px;
border-radius: 50%; border-radius: 50%;
} }
.noscroll{ overflow: hidden; position: fixed;} .noscroll {
.none{ display: none;} overflow: hidden;
position: fixed;
}
.none {
display: none;
}
#collabo_main .user_item.host:before,#overlay_user_list .user_item.host:before{ #collabo_main .user_item.host:before,
#overlay_user_list .user_item.host:before {
content: ""; content: "";
top: 0; top: 0;
right: 0; right: 0;
...@@ -68,14 +86,14 @@ ...@@ -68,14 +86,14 @@
height: 64px; height: 64px;
} }
.user_item { .user_item {
width: calc( 50% - 5px ); width: calc(50% - 5px);
position: relative; position: relative;
text-align: center; text-align: center;
border: 1px solid white; border: 1px solid white;
border-radius: 5px; border-radius: 5px;
margin: 5px auto; margin: 5px auto;
height: calc( 100vh / 3 ); height: calc(100vh / 3);
line-height: calc( 100vh / 3 ); line-height: calc(100vh / 3);
overflow: hidden; overflow: hidden;
} }
.user_item a { .user_item a {
...@@ -84,7 +102,7 @@ ...@@ -84,7 +102,7 @@
} }
/**************************** overlay *************************/ /**************************** overlay *************************/
.btn{ .btn {
background-color: transparent; background-color: transparent;
border: none; border: none;
width: 60px; width: 60px;
...@@ -92,21 +110,23 @@ ...@@ -92,21 +110,23 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
} }
.btn.menu_btn{ .btn.menu_btn {
background-image: url("../icon/icon_collabo_menu.png"); background-image: url("../icon/icon_collabo_menu.png");
} }
.btn.user_btn{ .btn.user_btn {
background-image: url("../icon/icon_member_white.png"); background-image: url("../icon/icon_member_white.png");
} }
.btn.add_user_btn{ .btn.add_user_btn {
background-image: url("../icon/icon_add_member_white.png"); background-image: url("../icon/icon_add_member_white.png");
} }
.btn.menu_btn.hide,.btn.add_user_btn.hide,.btn.user_btn.hide{ .btn.menu_btn.hide,
transition: .3s; .btn.add_user_btn.hide,
.btn.user_btn.hide {
transition: 0.3s;
background-image: url("../icon/icon_close.png"); background-image: url("../icon/icon_close.png");
} }
.overlay { .overlay {
transition: .7s; transition: 0.7s;
position: absolute; position: absolute;
top: 60px; top: 60px;
width: 100%; width: 100%;
...@@ -114,7 +134,9 @@ ...@@ -114,7 +134,9 @@
background: #525252; background: #525252;
height: 100vh; height: 100vh;
} }
.fixed{ position: fixed; } .fixed {
position: fixed;
}
.overlay.slidein { .overlay.slidein {
top: 60px; top: 60px;
right: 0; right: 0;
...@@ -135,7 +157,7 @@ ...@@ -135,7 +157,7 @@
#overlay_menu .menu_wrap .menu { #overlay_menu .menu_wrap .menu {
width: 220px; width: 220px;
} }
#overlay_menu .menu_wrap .menu .item a{ #overlay_menu .menu_wrap .menu .item a {
text-align: center; text-align: center;
color: #fff; color: #fff;
} }
...@@ -143,12 +165,12 @@ ...@@ -143,12 +165,12 @@
width: 80px; width: 80px;
height: 80px; height: 80px;
line-height: 80px; line-height: 80px;
background: #0070CA; background: #0070ca;
border-radius: 8px; border-radius: 8px;
margin: 5px; margin: 5px;
} }
#overlay_menu .overlay_menu_wrap { #overlay_menu .overlay_menu_wrap {
height: calc( 100vh - 180px ); height: calc(100vh - 180px);
} }
/* ユーザー追加 */ /* ユーザー追加 */
...@@ -163,11 +185,11 @@ ...@@ -163,11 +185,11 @@
} }
#add_user_list .user_list li { #add_user_list .user_list li {
list-style: none; list-style: none;
border-bottom: 1px solid #E2E8F0; border-bottom: 1px solid #e2e8f0;
position: relative; position: relative;
} }
#add_user_list .user_list li:first-child { #add_user_list .user_list li:first-child {
border-top: 1px solid #E2E8F0; border-top: 1px solid #e2e8f0;
} }
#add_user_list .chat_item_ttl { #add_user_list .chat_item_ttl {
font-weight: bold; font-weight: bold;
...@@ -196,7 +218,7 @@ ...@@ -196,7 +218,7 @@
#add_user_list .checkbox-parts::before { #add_user_list .checkbox-parts::before {
display: block; display: block;
position: absolute; position: absolute;
border: 2px solid #0070CA; border: 2px solid #0070ca;
content: ""; content: "";
width: 40px; width: 40px;
height: 40px; height: 40px;
...@@ -220,7 +242,7 @@ ...@@ -220,7 +242,7 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
margin: auto; margin: auto;
background: #0070CA; background: #0070ca;
border-radius: 50%; border-radius: 50%;
} }
#add_user_list .user_item_l { #add_user_list .user_item_l {
...@@ -243,7 +265,7 @@ ...@@ -243,7 +265,7 @@
} }
/**************************** zoomin zoomout *************************/ /**************************** zoomin zoomout *************************/
.s_ac .img_wrap{ .s_ac .img_wrap {
width: 40px; width: 40px;
height: 40px; height: 40px;
border-radius: 5px; border-radius: 5px;
...@@ -251,7 +273,7 @@ ...@@ -251,7 +273,7 @@
line-height: 36px; line-height: 36px;
text-align: center; text-align: center;
} }
.s_ac .img_wrap img{ .s_ac .img_wrap img {
width: 35px; width: 35px;
height: 35px; height: 35px;
} }
...@@ -259,7 +281,7 @@ ...@@ -259,7 +281,7 @@
position: fixed; position: fixed;
top: 60px; top: 60px;
z-index: 2; z-index: 2;
height: calc( 100% - 180px ); height: calc(100% - 180px);
} }
.s_ac_c { .s_ac_c {
margin: auto 0; margin: auto 0;
...@@ -292,26 +314,26 @@ ...@@ -292,26 +314,26 @@
} }
/**************************** footer *************************/ /**************************** footer *************************/
#collabo_footer{ #collabo_footer {
max-width: 1280px; max-width: 1280px;
background: #1D1D1D; background: #1d1d1d;
height: 120px; height: 120px;
margin-top: 20px; margin-top: 20px;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
border:none; border: none;
z-index: 10; z-index: 10;
} }
#collabo_footer .footer-wrap{ #collabo_footer .footer-wrap {
margin: 0 auto; margin: 0 auto;
height: 100%; height: 100%;
max-width: 300px; max-width: 300px;
} }
#collabo_footer .footer_item a{ #collabo_footer .footer_item a {
display: inline-block; display: inline-block;
} }
#collabo_footer .img_wrap{ #collabo_footer .img_wrap {
width: 60px; width: 60px;
height: 60px; height: 60px;
border-radius: 50%; border-radius: 50%;
...@@ -320,7 +342,7 @@ ...@@ -320,7 +342,7 @@
/**************************** footer-menu *************************/ /**************************** footer-menu *************************/
#collabo_footer_menu { #collabo_footer_menu {
transition: .7s; transition: 0.7s;
max-width: 1280px; max-width: 1280px;
height: 70px; height: 70px;
position: fixed; position: fixed;
...@@ -330,12 +352,12 @@ ...@@ -330,12 +352,12 @@
bottom: 120px; bottom: 120px;
z-index: 3; z-index: 3;
} }
#collabo_footer_menu.hide{ #collabo_footer_menu.hide {
transition: .7s; transition: 0.7s;
} }
#collabo_footer_menu .footer_menu_btn{ #collabo_footer_menu .footer_menu_btn {
background-color: white; background-color: white;
border: 1px solid #7A7A7A; border: 1px solid #7a7a7a;
border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;
width: 80px; width: 80px;
height: 40px; height: 40px;
...@@ -345,11 +367,11 @@ ...@@ -345,11 +367,11 @@
position: absolute; position: absolute;
bottom: 70px; bottom: 70px;
} }
#collabo_footer_menu .footer_menu_btn.hide{ #collabo_footer_menu .footer_menu_btn.hide {
background-image: url(../icon/icon_arrow_up.png); background-image: url(../icon/icon_arrow_up.png);
} }
#collabo_footer_menu .footer_menu-wrap { #collabo_footer_menu .footer_menu-wrap {
background: #1D1D1D; background: #1d1d1d;
height: 40px; height: 40px;
} }
...@@ -371,11 +393,11 @@ ...@@ -371,11 +393,11 @@
color: #fff; color: #fff;
} }
@media screen and (max-width: 768px){ @media screen and (max-width: 768px) {
#add_user_list .user_item_ttl{ #add_user_list .user_item_ttl {
font-size: 16px; font-size: 16px;
} }
#add_user_list .user_item_ttl{ #add_user_list .user_item_ttl {
font-size: 16px; font-size: 16px;
} }
#add_user_list .user_item_m { #add_user_list .user_item_m {
......
@charset "UTF-8"; @charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css); @import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
body{ body {
max-width: 1280px; max-width: 1280px;
font-family: 'Noto Sans JP', sans-serif; font-family: "Noto Sans JP", sans-serif;
margin: 0 auto; margin: 0 auto;
color: #323743; color: #323743;
margin-bottom: 60px; margin-bottom: 60px;
overflow-x: hidden; overflow-x: hidden;
} }
a:hover{ text-decoration: none; } a:hover {
.none{ display: none!important;} text-decoration: none;
}
.none {
display: none !important;
}
/**************************** nav *************************/ /**************************** nav *************************/
nav{ nav {
max-width: 1280px; max-width: 1280px;
height: 60px; height: 60px;
position: fixed; position: fixed;
top: 0; top: 0;
width: 100%; width: 100%;
border-bottom: 1px solid #CDCDCD; border-bottom: 1px solid #cdcdcd;
background: #fff; background: #fff;
z-index: 2; z-index: 2;
} }
main{ margin-top: 60px; } main {
.nav-item{ padding: 0 10px; } margin-top: 60px;
.nav-ttl{ }
.nav-item {
padding: 0 10px;
}
.nav-ttl {
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
...@@ -33,34 +41,36 @@ main{ margin-top: 60px; } ...@@ -33,34 +41,36 @@ main{ margin-top: 60px; }
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.nav_prev a{ .nav_prev a {
color: #323743; color: #323743;
display: inline-block; display: inline-block;
} }
.nav_prev a:before{ .nav_prev a:before {
content: "\f053"; content: "\f053";
font: 16px FontAwesome; font: 16px FontAwesome;
color: #323743; color: #323743;
margin-right: 5px; margin-right: 5px;
} }
.fas.fa-chevron-left{ margin-right: 10px;} .fas.fa-chevron-left {
margin-right: 10px;
}
/**************************** search form *************************/ /**************************** search form *************************/
.search_form input { .search_form input {
padding-left: 10px; padding-left: 10px;
width: 100%; width: 100%;
border: 1px solid #BDBDBD; border: 1px solid #bdbdbd;
border-radius: 5px; border-radius: 5px;
height: 40px; height: 40px;
margin: 10px 0; margin: 10px 0;
padding-left: 35px; padding-left: 35px;
} }
.search_form{ .search_form {
position: relative; position: relative;
margin: 0 5px; margin: 0 5px;
} }
.search_form .src_icon{ .search_form .src_icon {
position: absolute; position: absolute;
top: 23px; top: 23px;
left: 10px; left: 10px;
...@@ -69,14 +79,15 @@ main{ margin-top: 60px; } ...@@ -69,14 +79,15 @@ main{ margin-top: 60px; }
width: 16px; width: 16px;
height: 16px; height: 16px;
} }
.chat_room_src_form.none{ .chat_room_src_form.none {
display: none!important; display: none !important;
} }
.search_form input.focus{ .search_form input.focus {
width: calc( 100% - 100px ); width: calc(100% - 100px);
} }
.search_form input:focus,.chat_room_src_form input:focus{ .search_form input:focus,
.chat_room_src_form input:focus {
border-color: #71a2ff; border-color: #71a2ff;
outline: 0; outline: 0;
box-shadow: 0 0 0 0.2rem rgb(0 83 240 / 25%); box-shadow: 0 0 0 0.2rem rgb(0 83 240 / 25%);
...@@ -85,31 +96,51 @@ main{ margin-top: 60px; } ...@@ -85,31 +96,51 @@ main{ margin-top: 60px; }
width: 100px; width: 100px;
font-size: 14px; font-size: 14px;
padding: 0 10px; padding: 0 10px;
color: #8F8F8F; color: #8f8f8f;
text-align: center; text-align: center;
} }
/**************************** color *************************/ /**************************** color *************************/
.bg_gray{ background: #f3f3f3; } .bg_gray {
.bg_blue{ background: #0070CA; } background: #f3f3f3;
.bg_navy{ background: #1D3557; } }
.bg_red{ background: #ff4747; } .bg_blue {
.bg_green{ background: #89E54D; } background: #0070ca;
.bg_white{ background: #fff;} }
.border_gray{ border:1px solid #dadce0; } .bg_navy {
.text_blue{ color: #0070CA; } background: #1d3557;
.text_white{ color: #fff; } }
.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 *************************/ /**************************** modal *************************/
/* プロフィールモーダル */ /* プロフィールモーダル */
.profile_modal .modal-footer button{ .profile_modal .modal-footer button {
color: #fff; color: #fff;
border-radius: 10px; border-radius: 10px;
min-width: 100px; min-width: 100px;
font-size: 14px; font-size: 14px;
} }
.profile_modal .modal-footer button img{ width: 30px; height: 30px; } .profile_modal .modal-footer button img {
width: 30px;
height: 30px;
}
.profile_modal .modal-body p { .profile_modal .modal-body p {
max-height: 200px; max-height: 200px;
overflow-y: scroll; overflow-y: scroll;
...@@ -119,10 +150,21 @@ main{ margin-top: 60px; } ...@@ -119,10 +150,21 @@ main{ margin-top: 60px; }
height: 60px; height: 60px;
border-radius: 50%; border-radius: 50%;
} }
.profile_modal .modal-header,.profile_modal .modal-body { padding-bottom: 0; } .profile_modal .modal-header,
.profile_modal .modal-footer button { width: 33%; padding: 5px;} .profile_modal .modal-body {
.profile_modal.w_50 .modal-footer button { width: 50%; padding: 5px;} padding-bottom: 0;
.profile_modal .modal-header .prifile_desc{ width: 100%;} }
.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 { .profile_modal .modal-header .prifile_name {
width: 100%; width: 100%;
text-align: center; text-align: center;
...@@ -133,12 +175,12 @@ main{ margin-top: 60px; } ...@@ -133,12 +175,12 @@ main{ margin-top: 60px; }
font-size: 20px; font-size: 20px;
} }
@media screen and (max-width: 768px){ @media screen and (max-width: 768px) {
/* navi */ /* navi */
.nav-ttl{ .nav-ttl {
font-size: 16px; font-size: 16px;
} }
.nav_prev a span{ .nav_prev a span {
font-size: 16px; font-size: 16px;
} }
/* search form */ /* search form */
......
@charset "UTF-8"; @charset "UTF-8";
.breadcrumb{ .breadcrumb {
margin-bottom: 0; margin-bottom: 0;
white-space: nowrap; white-space: nowrap;
overflow-x: scroll; overflow-x: scroll;
display: block; display: block;
} }
.breadcrumb_item:not(:last-child):after { .breadcrumb_item:not(:last-child):after {
content: '>'; content: ">";
margin: 0 5px; margin: 0 5px;
} }
.breadcrumb_item { .breadcrumb_item {
......
@charset "UTF-8"; @charset "UTF-8";
/**************************** footer *************************/ /**************************** footer *************************/
footer{ footer {
max-width: 1280px; max-width: 1280px;
background: #F9F9F9; background: #f9f9f9;
height: 70px; height: 70px;
margin-top: 20px; margin-top: 20px;
border-top: 1px solid #CCCCCC; border-top: 1px solid #cccccc;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
} }
footer .footer-wrap{ footer .footer-wrap {
margin: 0 auto; margin: 0 auto;
height: 100%; height: 100%;
} }
footer .footer_item{ footer .footer_item {
text-align: center; text-align: center;
margin: auto 0; margin: auto 0;
} }
...@@ -23,7 +23,7 @@ footer .footer_item .unread_num { ...@@ -23,7 +23,7 @@ footer .footer_item .unread_num {
position: absolute; position: absolute;
top: -5px; top: -5px;
right: -3px; right: -3px;
background: #FF4747; background: #ff4747;
color: #fff; color: #fff;
padding: 0 7px; padding: 0 7px;
min-width: 20px; min-width: 20px;
...@@ -33,23 +33,23 @@ footer .footer_item .unread_num { ...@@ -33,23 +33,23 @@ footer .footer_item .unread_num {
border-radius: 15px; border-radius: 15px;
} }
footer .footer_item p{ footer .footer_item p {
font-size: 16px; font-size: 16px;
color: #707070; color: #707070;
font-weight: bold; font-weight: bold;
margin:0; margin: 0;
} }
footer .footer_item .active{ footer .footer_item .active {
color: #0070CA; color: #0070ca;
font-weight: bold; font-weight: bold;
} }
footer .footer_item a{ footer .footer_item a {
display: inline-block; display: inline-block;
position: relative; position: relative;
} }
@media screen and (max-width: 768px){ @media screen and (max-width: 768px) {
footer .footer_item p{ footer .footer_item p {
font-size: 12px; font-size: 12px;
} }
} }
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
height: 100%; height: 100%;
top: 0px; top: 0px;
left: 0px; left: 0px;
background: rgb(255,255,255,0.5); background: rgb(255, 255, 255, 0.5);
z-index: 2; z-index: 2;
} }
#loader { #loader {
...@@ -24,6 +24,6 @@ ...@@ -24,6 +24,6 @@
color: #fff; color: #fff;
z-index: 999; z-index: 999;
} }
.fa.fa-circle-o-notch{ .fa.fa-circle-o-notch {
color: #707070; color: #707070;
} }
$(function() { $(function () {
// アーカイブ検索 // アーカイブ検索
$('#archive .search_form input[type="search"]').keyup(function(){ $('#archive .search_form input[type="search"]').keyup(function () {
$.ajax({ $.ajax({
url: 'search_message_archive_list.html', url: "search_message_archive_list.html",
type: 'POST', type: "POST",
datatype: 'html' datatype: "html",
}).done(function (data) { }).done(function (data) {
$('.overlay_src_msg').html(data); $(".overlay_src_msg").html(data);
}) });
}); });
}); });
$(function() { $(function () {
// ルーム開設メンバー数カウント // ルーム開設メンバー数カウント
$('input:checkbox').change(function() { $("input:checkbox")
if($(this).prop('checked')){ .change(function () {
$(this).attr('checked', true); if ($(this).prop("checked")) {
}else{ $(this).attr("checked", true);
$(this).removeAttr('checked'); } else {
$(this).removeAttr("checked");
} }
}).trigger('change'); })
.trigger("change");
// チェックした人数カウント // チェックした人数カウント
$('input:checkbox').change(function() { $("input:checkbox")
var cnt = $('.checkbox input:checkbox:checked').length; .change(function () {
$('.select_member_num').text(cnt); var cnt = $(".checkbox input:checkbox:checked").length;
}).trigger('change'); $(".select_member_num").text(cnt);
})
.trigger("change");
// ルーム人数選択確認イベント // ルーム人数選択確認イベント
$('.make_room_btn button').click(function(){ $(".make_room_btn button").click(function () {
$('form').submit(); $("form").submit();
}); });
// ルーム人数選択イベント // ルーム人数選択イベント
$('.make_room_confirm_btn button').click(function(){ $(".make_room_confirm_btn button").click(function () {
$('form').submit(); $("form").submit();
}); });
// ユーザー追加確認イベント // ユーザー追加確認イベント
$('.add_user_confirm_btn button').click(function(){ $(".add_user_confirm_btn button").click(function () {
$('form').submit(); $("form").submit();
}); });
// ユーザー追加イベント // ユーザー追加イベント
$('.add_user_btn button').click(function(){ $(".add_user_btn button").click(function () {
$('form').submit(); $("form").submit();
}); });
// ルーム名変更イベント // ルーム名変更イベント
$('.change_room_name_btn button').click(function(){ $(".change_room_name_btn button").click(function () {
$('form').submit(); $("form").submit();
}); });
// 検索アイコン押下イベント // 検索アイコン押下イベント
$('.nav_item_wrap .search_menu').click(function(){ $(".nav_item_wrap .search_menu").click(function () {
$('.nav_item_wrap').addClass('none'); $(".nav_item_wrap").addClass("none");
$('.chat_room_src_form').removeClass('none'); $(".chat_room_src_form").removeClass("none");
$('.room_container').addClass('none'); $(".room_container").addClass("none");
$('.overlay_src_msg').removeClass('none'); $(".overlay_src_msg").removeClass("none");
// フィルタ表示 // フィルタ表示
$('#filter').removeClass('none'); $("#filter").removeClass("none");
$('#user_list').addClass('none'); $("#user_list").addClass("none");
}); });
$('.chat_room_src_form .cancel').click(function(){ $(".chat_room_src_form .cancel").click(function () {
$('.nav_item_wrap').removeClass('none'); $(".nav_item_wrap").removeClass("none");
$('.chat_room_src_form').addClass('none'); $(".chat_room_src_form").addClass("none");
$('.chat_room_src_form input').val(''); $(".chat_room_src_form input").val("");
$('.room_container').removeClass('none'); $(".room_container").removeClass("none");
$('.overlay_src_msg').empty(); $(".overlay_src_msg").empty();
// ユーザーリスト表示 // ユーザーリスト表示
$('#filter').addClass('none'); $("#filter").addClass("none");
$('#user_list').removeClass('none'); $("#user_list").removeClass("none");
}); });
// フィルタ選択イベント // フィルタ選択イベント
$('#filter .img_wrap').click(function(){ $("#filter .img_wrap").click(function () {
// チェックアイコン追加 // チェックアイコン追加
$(this).toggleClass("filter"); $(this).toggleClass("filter");
}); });
// チャットメンバー検索 // チャットメンバー検索
$('#chat .search_form input[type="search"]').keyup(function(){ $('#chat .search_form input[type="search"]').keyup(function () {
$.ajax({ $.ajax({
url: 'search_message_user_list.html', url: "search_message_user_list.html",
type: 'POST', type: "POST",
datatype: 'html' datatype: "html",
}).done(function (data) { }).done(function (data) {
$('.overlay_src_msg').html(data); $(".overlay_src_msg").html(data);
})
}); });
});
// ルームメンバー検索 // ルームメンバー検索
$('#chat_room .search_form input[type="search"]').keyup(function(){ $('#chat_room .search_form input[type="search"]').keyup(function () {
$.ajax({ $.ajax({
url: 'search_message_user_list.html', url: "search_message_user_list.html",
type: 'POST', type: "POST",
datatype: 'html' datatype: "html",
}).done(function (data) { }).done(function (data) {
$('.overlay_src_msg').html(data); $(".overlay_src_msg").html(data);
})
}); });
});
// ユーザー招待メンバー検索 // ユーザー招待メンバー検索
$('#chat_add_user .search_form input[type="search"]').keyup(function(){ $('#chat_add_user .search_form input[type="search"]').keyup(function () {
$.ajax({ $.ajax({
url: 'search_message_user_list.html', url: "search_message_user_list.html",
type: 'POST', type: "POST",
datatype: 'html' datatype: "html",
}).done(function (data) { }).done(function (data) {
$('.overlay_src_msg').html(data); $(".overlay_src_msg").html(data);
}) });
}); });
// チャットルーム // チャットルーム
// メッセージ検索イベント // メッセージ検索イベント
$('.chat_room_src_form input[type="search"]').keyup(function(){ $('.chat_room_src_form input[type="search"]').keyup(function () {
$.ajax({ $.ajax({
url: 'search_message.html', url: "search_message.html",
type: 'POST', type: "POST",
datatype: 'html' datatype: "html",
}).done(function (data) { }).done(function (data) {
$('.overlay_src_msg').html(data); $(".overlay_src_msg").html(data);
}) });
}); });
}); });
$(function() { $(function () {
// メニューオーバーレイ表示 // メニューオーバーレイ表示
$(".menu_btn").click(function() { $(".menu_btn").click(function () {
var w = $(this).width(); var w = $(this).width();
$(this).toggleClass('hide');
$('#overlay_menu.overlay').toggleClass('slidein').css({'transform': 'translateX('& -w &')'}); $(this).toggleClass("hide");
$('#collabo_main').toggleClass('noscroll'); $("#overlay_menu.overlay")
.toggleClass("slidein")
.css({ transform: "translateX(" & -w & ")" });
$("#collabo_main").toggleClass("noscroll");
// 他のボタンを非表示 // 他のボタンを非表示
$('.user_btn').toggleClass('none'); $(".user_btn").toggleClass("none");
$('.add_user_btn').toggleClass('none'); $(".add_user_btn").toggleClass("none");
}); });
// ユーザーリストオーバーレイ表示 // ユーザーリストオーバーレイ表示
$(".user_btn").click(function() { $(".user_btn").click(function () {
var w = $(this).width(); var w = $(this).width();
$(this).toggleClass('hide');
$('#overlay_user_list.overlay').toggleClass('slidein').css({'transform': 'translateX('& -w &')'}); $(this).toggleClass("hide");
$('#collabo_main').toggleClass('noscroll'); $("#overlay_user_list.overlay")
.toggleClass("slidein")
.css({ transform: "translateX(" & -w & ")" });
$("#collabo_main").toggleClass("noscroll");
// 他のボタンを非表示 // 他のボタンを非表示
$('.add_user_btn').toggleClass('none'); $(".add_user_btn").toggleClass("none");
$('.menu_btn').toggleClass('none'); $(".menu_btn").toggleClass("none");
if($('#overlay_user_list.overlay').hasClass('noscroll')){
$('#overlay_user_list.overlay').removeClass('noscroll'); if ($("#overlay_user_list.overlay").hasClass("noscroll")) {
}else{ $("#overlay_user_list.overlay").removeClass("noscroll");
$('#overlay_user_list.overlay').addClass('noscroll'); } else {
$("#overlay_user_list.overlay").addClass("noscroll");
} }
}); });
// フッターメニュー アコーディオン // フッターメニュー アコーディオン
$('.footer_menu_btn').click(function() { $(".footer_menu_btn").click(function () {
var h_active = $('#collabo_footer').height(); var h_active = $("#collabo_footer").height();
var h_hide = h_active - $('#collabo_footer_menu').height(); var h_hide = h_active - $("#collabo_footer_menu").height();
// 非アクティブ時 // 非アクティブ時
if($(this).hasClass('hide')){ if ($(this).hasClass("hide")) {
$(this).removeClass('hide'); $(this).removeClass("hide");
$('#collabo_footer_menu').css({'bottom': h_active }); $("#collabo_footer_menu").css({ bottom: h_active });
// アクティブ時 // アクティブ時
}else{ } else {
$(this).addClass('hide'); $(this).addClass("hide");
$('#collabo_footer_menu').css({'bottom': h_hide }); $("#collabo_footer_menu").css({ bottom: h_hide });
} }
}); });
// モーダルonモーダル(前のモーダルを非表示に) // モーダルonモーダル(前のモーダルを非表示に)
// ホスト変更ボタン押下イベント // ホスト変更ボタン押下イベント
$('.ch_host_btn').click(function() { $(".ch_host_btn").click(function () {
var target = $(this).val(); var target = $(this).val();
changeModal(target, 'changeHostModal'); changeModal(target, "changeHostModal");
}); });
/* モーダルの切り替え */ /* モーダルの切り替え */
function changeModal(beforeModal, afterModal) { function changeModal(beforeModal, afterModal) {
$(beforeModal).modal( 'hide' ); $(beforeModal).modal("hide");
$(afterModal).modal('show'); $(afterModal).modal("show");
} }
// 閉じるイベント // 閉じるイベント
$('.close_btn').click(function() { $(".close_btn").click(function () {
$('#overlay_add_user_list').addClass('none'); $("#overlay_add_user_list").addClass("none");
}); });
// ユーザー追加イベント // ユーザー追加イベント
$('.inv_btn').click(function() { $(".inv_btn").click(function () {
$('#overlay_add_user_list').addClass('none'); $("#overlay_add_user_list").addClass("none");
}); });
// ユーザー招待メンバー検索 // ユーザー招待メンバー検索
$('.add_user_btn').click(function(){ $(".add_user_btn").click(function () {
$('#overlay_add_user_list').removeClass('none'); $("#overlay_add_user_list").removeClass("none");
$.ajax({ $.ajax({
url: 'collaboration_overlay_add_user_list.html', url: "collaboration_overlay_add_user_list.html",
type: 'POST', type: "POST",
datatype: 'html' datatype: "html",
}).done(function (data) { }).done(function (data) {
$('#add_user_list').html(data); $("#add_user_list").html(data);
}) });
}); });
}); });
$(function() { $(function () {
var h = $(window).height(); //画面の高さを取得 var h = $(window).height(); //画面の高さを取得
// アコーディオン // アコーディオン
$('.category').click(function() { $(".category").click(function () {
$(this).toggleClass("open"); $(this).toggleClass("open");
$(this).next().slideToggle(); $(this).next().slideToggle();
}); });
// ローディング表示 // ローディング表示
$('footer a').click(function(event){ $("footer a").click(function (event) {
const a = $(this); const a = $(this);
event.preventDefault(); event.preventDefault();
$('#loader-bg ,#loader').height(h).css('display','block');//ローディング画像を表示 $("#loader-bg ,#loader").height(h).css("display", "block"); //ローディング画像を表示
setTimeout(function(){ setTimeout(function () {
window.location.href = a[0].href; window.location.href = a[0].href;
}, 1000); }, 1000);
}); });
// お気に入りボタン押下イベント // お気に入りボタン押下イベント
$('.star').click(function(){ $(".star").click(function () {
if($(this).hasClass('active')){ if ($(this).hasClass("active")) {
$(this).removeClass('active'); $(this).removeClass("active");
$(this).addClass('disable'); $(this).addClass("disable");
}else{ } else {
$(this).removeClass('disable'); $(this).removeClass("disable");
$(this).addClass('active'); $(this).addClass("active");
} }
}); });
// 共通検索フォーム キャンセルボタン表示 // 共通検索フォーム キャンセルボタン表示
$('.search_form input[type="search"]').click(function(){ $('.search_form input[type="search"]').click(function () {
$(this).addClass('focus'); $(this).addClass("focus");
// キャンセルボタン表示 // キャンセルボタン表示
$('.cancel').removeClass('none'); $(".cancel").removeClass("none");
$('.search_form form').addClass('d-flex flex-row h-100 align-items-center'); $(".search_form form").addClass("d-flex flex-row h-100 align-items-center");
$('.content').addClass('none'); $(".content").addClass("none");
}); });
// 共通検索フォーム キャンセルボタン押下イベント // 共通検索フォーム キャンセルボタン押下イベント
$('.search_form .cancel').click(function(){ $(".search_form .cancel").click(function () {
$(this).addClass('none'); $(this).addClass("none");
$('.search_form input').removeClass('focus'); $(".search_form input").removeClass("focus");
$('.search_form input').val(''); $(".search_form input").val("");
$('.search_form form').removeClass(); $(".search_form form").removeClass();
$('.content').removeClass('none'); $(".content").removeClass("none");
$('.overlay_src_msg').empty(); $(".overlay_src_msg").empty();
}); });
}); });
...@@ -2,17 +2,17 @@ ...@@ -2,17 +2,17 @@
* Constant定義ファイル * Constant定義ファイル
*/ */
const readyState = { const readyState = {
UNINITIALIZED : 0 , UNINITIALIZED: 0,
LOADING : 1 , LOADING: 1,
LOADED : 2 , LOADED: 2,
INTERACTIVE : 3 , INTERACTIVE: 3,
COMPLETED : 4 COMPLETED: 4,
} };
const messageType = { const messageType = {
TEXT : 0 , TEXT: 0,
IMAGE : 1 , IMAGE: 1,
VIDEO : 2 , VIDEO: 2,
SYSTEM : 3 , SYSTEM: 3,
COMMUNICATION : 4 COMMUNICATION: 4,
} };
$(function() { $(function () {
// メンバー検索 // メンバー検索
$('#contact .search_form input[type="search"]').keyup(function(){ $('#contact .search_form input[type="search"]').keyup(function () {
$.ajax({ $.ajax({
url: 'search_message_user_list.html', url: "search_message_user_list.html",
type: 'POST', type: "POST",
datatype: 'html' datatype: "html",
}).done(function (data) { }).done(function (data) {
$('.overlay_src_msg').html(data); $(".overlay_src_msg").html(data);
}) });
}); });
}); });
<!doctype html> <!doctype html>
<html lang="us"> <html lang="us">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery UI Example Page</title> <title>jQuery UI Example Page</title>
<link href="jquery-ui.css" rel="stylesheet"> <link href="jquery-ui.css" rel="stylesheet">
<style> <style>
body{ body {
font-family: "Trebuchet MS", sans-serif; font-family: "Trebuchet MS", sans-serif;
margin: 50px; margin: 50px;
} }
.demoHeaders { .demoHeaders {
margin-top: 2em; margin-top: 2em;
} }
#dialog-link { #dialog-link {
padding: .4em 1em .4em 20px; padding: .4em 1em .4em 20px;
text-decoration: none; text-decoration: none;
position: relative; position: relative;
} }
#dialog-link span.ui-icon { #dialog-link span.ui-icon {
margin: 0 5px 0 0; margin: 0 5px 0 0;
position: absolute; position: absolute;
...@@ -24,10 +28,12 @@ ...@@ -24,10 +28,12 @@
top: 50%; top: 50%;
margin-top: -8px; margin-top: -8px;
} }
#icons { #icons {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
#icons li { #icons li {
margin: 2px; margin: 2px;
position: relative; position: relative;
...@@ -36,55 +42,51 @@ ...@@ -36,55 +42,51 @@
float: left; float: left;
list-style: none; list-style: none;
} }
#icons span.ui-icon { #icons span.ui-icon {
float: left; float: left;
margin: 0 4px; margin: 0 4px;
} }
.fakewindowcontain .ui-widget-overlay { .fakewindowcontain .ui-widget-overlay {
position: absolute; position: absolute;
} }
select { select {
width: 200px; width: 200px;
} }
</style> </style>
</head> </head>
<body>
<h1>Welcome to jQuery UI!</h1>
<div class="ui-widget">
<p>This page demonstrates the widgets and theme you selected in Download Builder. Please make sure you are using them with a compatible jQuery version.</p>
</div>
<h1>YOUR COMPONENTS:</h1>
<body>
<h1>Welcome to jQuery UI!</h1>
<!-- Button --> <div class="ui-widget">
<h2 class="demoHeaders">Button</h2> <p>This page demonstrates the widgets and theme you selected in Download Builder. Please make sure you are using
<button id="button">A button element</button> them with a compatible jQuery version.</p>
<button id="button-icon">An icon-only button</button> </div>
<h1>YOUR COMPONENTS:</h1>
<!-- Button -->
<h2 class="demoHeaders">Button</h2>
<button id="button">A button element</button>
<button id="button-icon">An icon-only button</button>
<!-- Checkboxradio --> <!-- Checkboxradio -->
<h2 class="demoHeaders">Checkboxradio</h2> <h2 class="demoHeaders">Checkboxradio</h2>
<form style="margin-top: 1em;"> <form style="margin-top: 1em;">
<div id="radioset"> <div id="radioset">
<input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label> <input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label> <input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label> <input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label>
</div> </div>
</form> </form>
<!-- Controlgroup --> <!-- Controlgroup -->
<h2 class="demoHeaders">Controlgroup</h2> <h2 class="demoHeaders">Controlgroup</h2>
<fieldset> <fieldset>
<legend>Rental Car</legend> <legend>Rental Car</legend>
<div id="controlgroup"> <div id="controlgroup">
<select id="car-type"> <select id="car-type">
...@@ -106,320 +108,456 @@ ...@@ -106,320 +108,456 @@
<input id="horizontal-spinner" class="ui-spinner-input"> <input id="horizontal-spinner" class="ui-spinner-input">
<button>Book Now!</button> <button>Book Now!</button>
</div> </div>
</fieldset> </fieldset>
<h2 class="demoHeaders">Dialog</h2>
<p>
<h2 class="demoHeaders">Dialog</h2>
<p>
<button id="dialog-link" class="ui-button ui-corner-all ui-widget"> <button id="dialog-link" class="ui-button ui-corner-all ui-widget">
<span class="ui-icon ui-icon-newwin"></span>Open Dialog <span class="ui-icon ui-icon-newwin"></span>Open Dialog
</button> </button>
</p> </p>
<h2 class="demoHeaders">Overlay and Shadow Classes</h2> <h2 class="demoHeaders">Overlay and Shadow Classes</h2>
<div style="position: relative; width: 96%; height: 200px; padding:1% 2%; overflow:hidden;" class="fakewindowcontain"> <div style="position: relative; width: 96%; height: 200px; padding:1% 2%; overflow:hidden;"
<p>Lorem ipsum dolor sit amet, Nulla nec tortor. Donec id elit quis purus consectetur consequat. </p><p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. </p><p>Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. </p><p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. </p><p>Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam ante. </p><p>Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. </p> class="fakewindowcontain">
<p>Lorem ipsum dolor sit amet, Nulla nec tortor. Donec id elit quis purus consectetur consequat. </p>
<p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam
ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id,
sem. Morbi in orci. </p>
<p>Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque quam. Nullam
feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus, commodo
vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur consequat.
</p>
<p>Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi. Aliquam
ante. Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id,
sem. Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie
scelerisque quam. </p>
<p>Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero risus,
commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus consectetur
consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare, ultrices ut, nisi.
Aliquam ante. </p>
<p>Suspendisse scelerisque dui nec velit. Duis augue augue, gravida euismod, vulputate ac, facilisis id, sem.
Morbi in orci. Nulla purus lacus, pulvinar vel, malesuada ac, mattis nec, quam. Nam molestie scelerisque
quam. Nullam feugiat cursus lacus.orem ipsum dolor sit amet, consectetur adipiscing elit. Donec libero
risus, commodo vitae, pharetra mollis, posuere eu, pede. Nulla nec tortor. Donec id elit quis purus
consectetur consequat. Nam congue semper tellus. Sed erat dolor, dapibus sit amet, venenatis ornare,
ultrices ut, nisi. </p>
<!-- ui-dialog --> <!-- ui-dialog -->
<div class="ui-widget-overlay ui-front"></div> <div class="ui-widget-overlay ui-front"></div>
<div style="position: absolute; width: 320px; left: 50px; top: 30px; padding: 1.2em" class="ui-widget ui-front ui-widget-content ui-corner-all ui-widget-shadow"> <div style="position: absolute; width: 320px; left: 50px; top: 30px; padding: 1.2em"
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. class="ui-widget ui-front ui-widget-content ui-corner-all ui-widget-shadow">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat.
</div> </div>
</div> </div>
<!-- ui-dialog -->
<div id="dialog" title="Dialog Title">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<!-- ui-dialog -->
<div id="dialog" title="Dialog Title">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat.</p>
</div>
<h2 class="demoHeaders">Framework Icons (content color preview)</h2> <h2 class="demoHeaders">Framework Icons (content color preview)</h2>
<ul id="icons" class="ui-widget ui-helper-clearfix"> <ul id="icons" class="ui-widget ui-helper-clearfix">
<li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-n"><span class="ui-icon ui-icon-caret-1-n"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-n"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-ne"><span class="ui-icon ui-icon-caret-1-ne"></span></li> class="ui-icon ui-icon-caret-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-e"><span class="ui-icon ui-icon-caret-1-e"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-ne"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-se"><span class="ui-icon ui-icon-caret-1-se"></span></li> class="ui-icon ui-icon-caret-1-ne"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-s"><span class="ui-icon ui-icon-caret-1-s"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-e"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-sw"><span class="ui-icon ui-icon-caret-1-sw"></span></li> class="ui-icon ui-icon-caret-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-w"><span class="ui-icon ui-icon-caret-1-w"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-se"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-nw"><span class="ui-icon ui-icon-caret-1-nw"></span></li> class="ui-icon ui-icon-caret-1-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-caret-2-n-s"><span class="ui-icon ui-icon-caret-2-n-s"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-s"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-caret-2-e-w"><span class="ui-icon ui-icon-caret-2-e-w"></span></li> class="ui-icon ui-icon-caret-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-n"><span class="ui-icon ui-icon-triangle-1-n"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-sw"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-ne"><span class="ui-icon ui-icon-triangle-1-ne"></span></li> class="ui-icon ui-icon-caret-1-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-e"><span class="ui-icon ui-icon-triangle-1-e"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-w"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-se"><span class="ui-icon ui-icon-triangle-1-se"></span></li> class="ui-icon ui-icon-caret-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-s"><span class="ui-icon ui-icon-triangle-1-s"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-caret-1-nw"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-sw"><span class="ui-icon ui-icon-triangle-1-sw"></span></li> class="ui-icon ui-icon-caret-1-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-w"><span class="ui-icon ui-icon-triangle-1-w"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-caret-2-n-s"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-nw"><span class="ui-icon ui-icon-triangle-1-nw"></span></li> class="ui-icon ui-icon-caret-2-n-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-n-s"><span class="ui-icon ui-icon-triangle-2-n-s"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-caret-2-e-w"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-e-w"><span class="ui-icon ui-icon-triangle-2-e-w"></span></li> class="ui-icon ui-icon-caret-2-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-n"><span class="ui-icon ui-icon-arrow-1-n"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-n"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-ne"><span class="ui-icon ui-icon-arrow-1-ne"></span></li> class="ui-icon ui-icon-triangle-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-e"><span class="ui-icon ui-icon-arrow-1-e"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-ne"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-se"><span class="ui-icon ui-icon-arrow-1-se"></span></li> class="ui-icon ui-icon-triangle-1-ne"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-s"><span class="ui-icon ui-icon-arrow-1-s"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-e"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-sw"><span class="ui-icon ui-icon-arrow-1-sw"></span></li> class="ui-icon ui-icon-triangle-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-w"><span class="ui-icon ui-icon-arrow-1-w"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-se"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-nw"><span class="ui-icon ui-icon-arrow-1-nw"></span></li> class="ui-icon ui-icon-triangle-1-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-n-s"><span class="ui-icon ui-icon-arrow-2-n-s"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-s"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-ne-sw"><span class="ui-icon ui-icon-arrow-2-ne-sw"></span></li> class="ui-icon ui-icon-triangle-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-e-w"><span class="ui-icon ui-icon-arrow-2-e-w"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-sw"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-se-nw"><span class="ui-icon ui-icon-arrow-2-se-nw"></span></li> class="ui-icon ui-icon-triangle-1-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-n"><span class="ui-icon ui-icon-arrowstop-1-n"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-w"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-e"><span class="ui-icon ui-icon-arrowstop-1-e"></span></li> class="ui-icon ui-icon-triangle-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-s"><span class="ui-icon ui-icon-arrowstop-1-s"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-1-nw"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-w"><span class="ui-icon ui-icon-arrowstop-1-w"></span></li> class="ui-icon ui-icon-triangle-1-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-n"><span class="ui-icon ui-icon-arrowthick-1-n"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-n-s"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-ne"><span class="ui-icon ui-icon-arrowthick-1-ne"></span></li> class="ui-icon ui-icon-triangle-2-n-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-e"><span class="ui-icon ui-icon-arrowthick-1-e"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-triangle-2-e-w"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-se"><span class="ui-icon ui-icon-arrowthick-1-se"></span></li> class="ui-icon ui-icon-triangle-2-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-s"><span class="ui-icon ui-icon-arrowthick-1-s"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-n"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-sw"><span class="ui-icon ui-icon-arrowthick-1-sw"></span></li> class="ui-icon ui-icon-arrow-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-w"><span class="ui-icon ui-icon-arrowthick-1-w"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-ne"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-nw"><span class="ui-icon ui-icon-arrowthick-1-nw"></span></li> class="ui-icon ui-icon-arrow-1-ne"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-n-s"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-e"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-ne-sw"><span class="ui-icon ui-icon-arrowthick-2-ne-sw"></span></li> class="ui-icon ui-icon-arrow-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-e-w"><span class="ui-icon ui-icon-arrowthick-2-e-w"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-se"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-se-nw"><span class="ui-icon ui-icon-arrowthick-2-se-nw"></span></li> class="ui-icon ui-icon-arrow-1-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-n"><span class="ui-icon ui-icon-arrowthickstop-1-n"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-s"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-e"><span class="ui-icon ui-icon-arrowthickstop-1-e"></span></li> class="ui-icon ui-icon-arrow-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-s"><span class="ui-icon ui-icon-arrowthickstop-1-s"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-sw"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-w"><span class="ui-icon ui-icon-arrowthickstop-1-w"></span></li> class="ui-icon ui-icon-arrow-1-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-w"><span class="ui-icon ui-icon-arrowreturnthick-1-w"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-w"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-n"><span class="ui-icon ui-icon-arrowreturnthick-1-n"></span></li> class="ui-icon ui-icon-arrow-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-e"><span class="ui-icon ui-icon-arrowreturnthick-1-e"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-1-nw"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-s"><span class="ui-icon ui-icon-arrowreturnthick-1-s"></span></li> class="ui-icon ui-icon-arrow-1-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-w"><span class="ui-icon ui-icon-arrowreturn-1-w"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-n-s"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-n"><span class="ui-icon ui-icon-arrowreturn-1-n"></span></li> class="ui-icon ui-icon-arrow-2-n-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-e"><span class="ui-icon ui-icon-arrowreturn-1-e"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-ne-sw"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-s"><span class="ui-icon ui-icon-arrowreturn-1-s"></span></li> class="ui-icon ui-icon-arrow-2-ne-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-w"><span class="ui-icon ui-icon-arrowrefresh-1-w"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-e-w"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-n"><span class="ui-icon ui-icon-arrowrefresh-1-n"></span></li> class="ui-icon ui-icon-arrow-2-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-e"><span class="ui-icon ui-icon-arrowrefresh-1-e"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-2-se-nw"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-s"><span class="ui-icon ui-icon-arrowrefresh-1-s"></span></li> class="ui-icon ui-icon-arrow-2-se-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4"><span class="ui-icon ui-icon-arrow-4"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-n"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4-diag"><span class="ui-icon ui-icon-arrow-4-diag"></span></li> class="ui-icon ui-icon-arrowstop-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-extlink"><span class="ui-icon ui-icon-extlink"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-e"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-newwin"><span class="ui-icon ui-icon-newwin"></span></li> class="ui-icon ui-icon-arrowstop-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-refresh"><span class="ui-icon ui-icon-refresh"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-s"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-shuffle"><span class="ui-icon ui-icon-shuffle"></span></li> class="ui-icon ui-icon-arrowstop-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-transfer-e-w"><span class="ui-icon ui-icon-transfer-e-w"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowstop-1-w"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-transferthick-e-w"><span class="ui-icon ui-icon-transferthick-e-w"></span></li> class="ui-icon ui-icon-arrowstop-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-folder-collapsed"><span class="ui-icon ui-icon-folder-collapsed"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-n"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-folder-open"><span class="ui-icon ui-icon-folder-open"></span></li> class="ui-icon ui-icon-arrowthick-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-document"><span class="ui-icon ui-icon-document"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-ne"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-document-b"><span class="ui-icon ui-icon-document-b"></span></li> class="ui-icon ui-icon-arrowthick-1-ne"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-e"><span
class="ui-icon ui-icon-arrowthick-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-se"><span
class="ui-icon ui-icon-arrowthick-1-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-s"><span
class="ui-icon ui-icon-arrowthick-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-sw"><span
class="ui-icon ui-icon-arrowthick-1-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-w"><span
class="ui-icon ui-icon-arrowthick-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-1-nw"><span
class="ui-icon ui-icon-arrowthick-1-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-n-s"><span
class="ui-icon ui-icon-arrowthick-2-n-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-ne-sw"><span
class="ui-icon ui-icon-arrowthick-2-ne-sw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-e-w"><span
class="ui-icon ui-icon-arrowthick-2-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthick-2-se-nw"><span
class="ui-icon ui-icon-arrowthick-2-se-nw"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-n"><span
class="ui-icon ui-icon-arrowthickstop-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-e"><span
class="ui-icon ui-icon-arrowthickstop-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-s"><span
class="ui-icon ui-icon-arrowthickstop-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowthickstop-1-w"><span
class="ui-icon ui-icon-arrowthickstop-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-w"><span
class="ui-icon ui-icon-arrowreturnthick-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-n"><span
class="ui-icon ui-icon-arrowreturnthick-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-e"><span
class="ui-icon ui-icon-arrowreturnthick-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturnthick-1-s"><span
class="ui-icon ui-icon-arrowreturnthick-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-w"><span
class="ui-icon ui-icon-arrowreturn-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-n"><span
class="ui-icon ui-icon-arrowreturn-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-e"><span
class="ui-icon ui-icon-arrowreturn-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowreturn-1-s"><span
class="ui-icon ui-icon-arrowreturn-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-w"><span
class="ui-icon ui-icon-arrowrefresh-1-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-n"><span
class="ui-icon ui-icon-arrowrefresh-1-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-e"><span
class="ui-icon ui-icon-arrowrefresh-1-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrowrefresh-1-s"><span
class="ui-icon ui-icon-arrowrefresh-1-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4"><span
class="ui-icon ui-icon-arrow-4"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-arrow-4-diag"><span
class="ui-icon ui-icon-arrow-4-diag"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-extlink"><span
class="ui-icon ui-icon-extlink"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-newwin"><span class="ui-icon ui-icon-newwin"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-refresh"><span
class="ui-icon ui-icon-refresh"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-shuffle"><span
class="ui-icon ui-icon-shuffle"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-transfer-e-w"><span
class="ui-icon ui-icon-transfer-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-transferthick-e-w"><span
class="ui-icon ui-icon-transferthick-e-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-folder-collapsed"><span
class="ui-icon ui-icon-folder-collapsed"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-folder-open"><span
class="ui-icon ui-icon-folder-open"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-document"><span
class="ui-icon ui-icon-document"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-document-b"><span
class="ui-icon ui-icon-document-b"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-note"><span class="ui-icon ui-icon-note"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-note"><span class="ui-icon ui-icon-note"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-mail-open"><span class="ui-icon ui-icon-mail-open"></span></li> class="ui-icon ui-icon-mail-closed"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-suitcase"><span class="ui-icon ui-icon-suitcase"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-mail-open"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-comment"><span class="ui-icon ui-icon-comment"></span></li> class="ui-icon ui-icon-mail-open"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-person"><span class="ui-icon ui-icon-person"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-suitcase"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-print"><span class="ui-icon ui-icon-print"></span></li> class="ui-icon ui-icon-suitcase"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-trash"><span class="ui-icon ui-icon-trash"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-comment"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-locked"><span class="ui-icon ui-icon-locked"></span></li> class="ui-icon ui-icon-comment"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-unlocked"><span class="ui-icon ui-icon-unlocked"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-person"><span class="ui-icon ui-icon-person"></span>
<li class="ui-state-default ui-corner-all" title=".ui-icon-bookmark"><span class="ui-icon ui-icon-bookmark"></span></li> </li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-print"><span class="ui-icon ui-icon-print"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-trash"><span class="ui-icon ui-icon-trash"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-locked"><span class="ui-icon ui-icon-locked"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-unlocked"><span
class="ui-icon ui-icon-unlocked"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-bookmark"><span
class="ui-icon ui-icon-bookmark"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-tag"><span class="ui-icon ui-icon-tag"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-tag"><span class="ui-icon ui-icon-tag"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-home"><span class="ui-icon ui-icon-home"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-home"><span class="ui-icon ui-icon-home"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-flag"><span class="ui-icon ui-icon-flag"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-flag"><span class="ui-icon ui-icon-flag"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-calculator"><span class="ui-icon ui-icon-calculator"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-calculator"><span
class="ui-icon ui-icon-calculator"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-cart"><span class="ui-icon ui-icon-cart"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-cart"><span class="ui-icon ui-icon-cart"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pencil"><span class="ui-icon ui-icon-pencil"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-pencil"><span class="ui-icon ui-icon-pencil"></span>
<li class="ui-state-default ui-corner-all" title=".ui-icon-clock"><span class="ui-icon ui-icon-clock"></span></li> </li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-clock"><span class="ui-icon ui-icon-clock"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-disk"><span class="ui-icon ui-icon-disk"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-disk"><span class="ui-icon ui-icon-disk"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-calendar"><span class="ui-icon ui-icon-calendar"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-calendar"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-zoomin"><span class="ui-icon ui-icon-zoomin"></span></li> class="ui-icon ui-icon-calendar"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-zoomout"><span class="ui-icon ui-icon-zoomout"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-zoomin"><span class="ui-icon ui-icon-zoomin"></span>
<li class="ui-state-default ui-corner-all" title=".ui-icon-search"><span class="ui-icon ui-icon-search"></span></li> </li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-wrench"><span class="ui-icon ui-icon-wrench"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-zoomout"><span
class="ui-icon ui-icon-zoomout"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-search"><span class="ui-icon ui-icon-search"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-wrench"><span class="ui-icon ui-icon-wrench"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-gear"><span class="ui-icon ui-icon-gear"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-gear"><span class="ui-icon ui-icon-gear"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-heart"><span class="ui-icon ui-icon-heart"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-heart"><span class="ui-icon ui-icon-heart"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-star"><span class="ui-icon ui-icon-star"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-star"><span class="ui-icon ui-icon-star"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-link"><span class="ui-icon ui-icon-link"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-link"><span class="ui-icon ui-icon-link"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-cancel"><span class="ui-icon ui-icon-cancel"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-cancel"><span class="ui-icon ui-icon-cancel"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-plus"><span class="ui-icon ui-icon-plus"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-plus"><span class="ui-icon ui-icon-plus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-minus"><span class="ui-icon ui-icon-minus"></span></li> class="ui-icon ui-icon-plusthick"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-minusthick"><span class="ui-icon ui-icon-minusthick"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-minus"><span class="ui-icon ui-icon-minus"></span>
<li class="ui-state-default ui-corner-all" title=".ui-icon-close"><span class="ui-icon ui-icon-close"></span></li> </li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-closethick"><span class="ui-icon ui-icon-closethick"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-minusthick"><span
class="ui-icon ui-icon-minusthick"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-close"><span class="ui-icon ui-icon-close"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-closethick"><span
class="ui-icon ui-icon-closethick"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-key"><span class="ui-icon ui-icon-key"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-key"><span class="ui-icon ui-icon-key"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-lightbulb"><span class="ui-icon ui-icon-lightbulb"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-lightbulb"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-scissors"><span class="ui-icon ui-icon-scissors"></span></li> class="ui-icon ui-icon-lightbulb"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-clipboard"><span class="ui-icon ui-icon-clipboard"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-scissors"><span
class="ui-icon ui-icon-scissors"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-clipboard"><span
class="ui-icon ui-icon-clipboard"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-copy"><span class="ui-icon ui-icon-copy"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-copy"><span class="ui-icon ui-icon-copy"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-contact"><span class="ui-icon ui-icon-contact"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-contact"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-image"><span class="ui-icon ui-icon-image"></span></li> class="ui-icon ui-icon-contact"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-video"><span class="ui-icon ui-icon-video"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-image"><span class="ui-icon ui-icon-image"></span>
<li class="ui-state-default ui-corner-all" title=".ui-icon-script"><span class="ui-icon ui-icon-script"></span></li> </li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-alert"><span class="ui-icon ui-icon-alert"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-video"><span class="ui-icon ui-icon-video"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-script"><span class="ui-icon ui-icon-script"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-alert"><span class="ui-icon ui-icon-alert"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-info"><span class="ui-icon ui-icon-info"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-info"><span class="ui-icon ui-icon-info"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-notice"><span class="ui-icon ui-icon-notice"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-notice"><span class="ui-icon ui-icon-notice"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-help"><span class="ui-icon ui-icon-help"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-help"><span class="ui-icon ui-icon-help"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span>
<li class="ui-state-default ui-corner-all" title=".ui-icon-bullet"><span class="ui-icon ui-icon-bullet"></span></li> </li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-radio-off"><span class="ui-icon ui-icon-radio-off"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-bullet"><span class="ui-icon ui-icon-bullet"></span>
<li class="ui-state-default ui-corner-all" title=".ui-icon-radio-on"><span class="ui-icon ui-icon-radio-on"></span></li> </li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pin-w"><span class="ui-icon ui-icon-pin-w"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-radio-off"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-pin-s"><span class="ui-icon ui-icon-pin-s"></span></li> class="ui-icon ui-icon-radio-off"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-radio-on"><span
class="ui-icon ui-icon-radio-on"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pin-w"><span class="ui-icon ui-icon-pin-w"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pin-s"><span class="ui-icon ui-icon-pin-s"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-play"><span class="ui-icon ui-icon-play"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-play"><span class="ui-icon ui-icon-play"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-pause"><span class="ui-icon ui-icon-pause"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-pause"><span class="ui-icon ui-icon-pause"></span>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-next"><span class="ui-icon ui-icon-seek-next"></span></li> </li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-prev"><span class="ui-icon ui-icon-seek-prev"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-seek-next"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-end"><span class="ui-icon ui-icon-seek-end"></span></li> class="ui-icon ui-icon-seek-next"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-first"><span class="ui-icon ui-icon-seek-first"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-seek-prev"><span
class="ui-icon ui-icon-seek-prev"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-end"><span
class="ui-icon ui-icon-seek-end"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-first"><span
class="ui-icon ui-icon-seek-first"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-stop"><span class="ui-icon ui-icon-stop"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-stop"><span class="ui-icon ui-icon-stop"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-eject"><span class="ui-icon ui-icon-eject"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-eject"><span class="ui-icon ui-icon-eject"></span>
<li class="ui-state-default ui-corner-all" title=".ui-icon-volume-off"><span class="ui-icon ui-icon-volume-off"></span></li> </li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-volume-on"><span class="ui-icon ui-icon-volume-on"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-volume-off"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-power"><span class="ui-icon ui-icon-power"></span></li> class="ui-icon ui-icon-volume-off"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-signal-diag"><span class="ui-icon ui-icon-signal-diag"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-volume-on"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-signal"><span class="ui-icon ui-icon-signal"></span></li> class="ui-icon ui-icon-volume-on"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-0"><span class="ui-icon ui-icon-battery-0"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-power"><span class="ui-icon ui-icon-power"></span>
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-1"><span class="ui-icon ui-icon-battery-1"></span></li> </li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-2"><span class="ui-icon ui-icon-battery-2"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-signal-diag"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-battery-3"><span class="ui-icon ui-icon-battery-3"></span></li> class="ui-icon ui-icon-signal-diag"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-plus"><span class="ui-icon ui-icon-circle-plus"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-signal"><span class="ui-icon ui-icon-signal"></span>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-minus"><span class="ui-icon ui-icon-circle-minus"></span></li> </li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-close"><span class="ui-icon ui-icon-circle-close"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-battery-0"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-e"><span class="ui-icon ui-icon-circle-triangle-e"></span></li> class="ui-icon ui-icon-battery-0"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-s"><span class="ui-icon ui-icon-circle-triangle-s"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-battery-1"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-w"><span class="ui-icon ui-icon-circle-triangle-w"></span></li> class="ui-icon ui-icon-battery-1"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-n"><span class="ui-icon ui-icon-circle-triangle-n"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-battery-2"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-e"><span class="ui-icon ui-icon-circle-arrow-e"></span></li> class="ui-icon ui-icon-battery-2"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-s"><span class="ui-icon ui-icon-circle-arrow-s"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-battery-3"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-w"><span class="ui-icon ui-icon-circle-arrow-w"></span></li> class="ui-icon ui-icon-battery-3"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-n"><span class="ui-icon ui-icon-circle-arrow-n"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-plus"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomin"><span class="ui-icon ui-icon-circle-zoomin"></span></li> class="ui-icon ui-icon-circle-plus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomout"><span class="ui-icon ui-icon-circle-zoomout"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-minus"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-check"><span class="ui-icon ui-icon-circle-check"></span></li> class="ui-icon ui-icon-circle-minus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-plus"><span class="ui-icon ui-icon-circlesmall-plus"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-close"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-minus"><span class="ui-icon ui-icon-circlesmall-minus"></span></li> class="ui-icon ui-icon-circle-close"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-close"><span class="ui-icon ui-icon-circlesmall-close"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-e"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-plus"><span class="ui-icon ui-icon-squaresmall-plus"></span></li> class="ui-icon ui-icon-circle-triangle-e"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-minus"><span class="ui-icon ui-icon-squaresmall-minus"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-s"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-close"><span class="ui-icon ui-icon-squaresmall-close"></span></li> class="ui-icon ui-icon-circle-triangle-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-vertical"><span class="ui-icon ui-icon-grip-dotted-vertical"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-w"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-horizontal"><span class="ui-icon ui-icon-grip-dotted-horizontal"></span></li> class="ui-icon ui-icon-circle-triangle-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-vertical"><span class="ui-icon ui-icon-grip-solid-vertical"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-triangle-n"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-horizontal"><span class="ui-icon ui-icon-grip-solid-horizontal"></span></li> class="ui-icon ui-icon-circle-triangle-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-gripsmall-diagonal-se"><span class="ui-icon ui-icon-gripsmall-diagonal-se"></span></li> <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-e"><span
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-diagonal-se"><span class="ui-icon ui-icon-grip-diagonal-se"></span></li> class="ui-icon ui-icon-circle-arrow-e"></span></li>
</ul> <li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-s"><span
class="ui-icon ui-icon-circle-arrow-s"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-w"><span
class="ui-icon ui-icon-circle-arrow-w"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-arrow-n"><span
class="ui-icon ui-icon-circle-arrow-n"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomin"><span
class="ui-icon ui-icon-circle-zoomin"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-zoomout"><span
class="ui-icon ui-icon-circle-zoomout"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-check"><span
class="ui-icon ui-icon-circle-check"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-plus"><span
class="ui-icon ui-icon-circlesmall-plus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-minus"><span
class="ui-icon ui-icon-circlesmall-minus"></span></li>
<!-- Highlight / Error --> <li class="ui-state-default ui-corner-all" title=".ui-icon-circlesmall-close"><span
<h2 class="demoHeaders">Highlight / Error</h2> class="ui-icon ui-icon-circlesmall-close"></span></li>
<div class="ui-widget"> <li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-plus"><span
class="ui-icon ui-icon-squaresmall-plus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-minus"><span
class="ui-icon ui-icon-squaresmall-minus"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-squaresmall-close"><span
class="ui-icon ui-icon-squaresmall-close"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-vertical"><span
class="ui-icon ui-icon-grip-dotted-vertical"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-dotted-horizontal"><span
class="ui-icon ui-icon-grip-dotted-horizontal"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-vertical"><span
class="ui-icon ui-icon-grip-solid-vertical"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-solid-horizontal"><span
class="ui-icon ui-icon-grip-solid-horizontal"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-gripsmall-diagonal-se"><span
class="ui-icon ui-icon-gripsmall-diagonal-se"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-grip-diagonal-se"><span
class="ui-icon ui-icon-grip-diagonal-se"></span></li>
</ul>
<!-- Highlight / Error -->
<h2 class="demoHeaders">Highlight / Error</h2>
<div class="ui-widget">
<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;"> <div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">
<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span> <p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
<strong>Hey!</strong> Sample ui-state-highlight style.</p> <strong>Hey!</strong> Sample ui-state-highlight style.
</p>
</div> </div>
</div> </div>
<br> <br>
<div class="ui-widget"> <div class="ui-widget">
<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;"> <div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span> <p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
<strong>Alert:</strong> Sample ui-state-error style.</p> <strong>Alert:</strong> Sample ui-state-error style.
</p>
</div>
</div> </div>
</div>
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.js"></script>
<script>
$( "#button" ).button(); <script src="external/jquery/jquery.js"></script>
$( "#button-icon" ).button({ <script src="jquery-ui.js"></script>
<script>
$("#button").button();
$("#button-icon").button({
icon: "ui-icon-gear", icon: "ui-icon-gear",
showLabel: false showLabel: false
}); });
$("#radioset").buttonset();
$("#controlgroup").controlgroup();
$("#dialog").dialog({
$( "#radioset" ).buttonset();
$( "#controlgroup" ).controlgroup();
$( "#dialog" ).dialog({
autoOpen: false, autoOpen: false,
width: 400, width: 400,
buttons: [ buttons: [
{ {
text: "Ok", text: "Ok",
click: function() { click: function () {
$( this ).dialog( "close" ); $(this).dialog("close");
} }
}, },
{ {
text: "Cancel", text: "Cancel",
click: function() { click: function () {
$( this ).dialog( "close" ); $(this).dialog("close");
} }
} }
] ]
}); });
// Link to open the dialog // Link to open the dialog
$( "#dialog-link" ).click(function( event ) { $("#dialog-link").click(function (event) {
$( "#dialog" ).dialog( "open" ); $("#dialog").dialog("open");
event.preventDefault(); event.preventDefault();
}); });
// Hover states on the static widgets
$("#dialog-link, #icons li").hover(
function () {
$(this).addClass("ui-state-hover");
// Hover states on the static widgets
$( "#dialog-link, #icons li" ).hover(
function() {
$( this ).addClass( "ui-state-hover" );
}, },
function() { function () {
$( this ).removeClass( "ui-state-hover" ); $(this).removeClass("ui-state-hover");
} }
); );
</script> </script>
</body> </body>
</html> </html>
\ No newline at end of file
//! moment.js locale configuration //! moment.js locale configuration
;(function (global, factory) { (function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' typeof exports === "object" &&
&& typeof require === 'function' ? factory(require('../moment')) : typeof module !== "undefined" &&
typeof define === 'function' && define.amd ? define(['../moment'], factory) : typeof require === "function"
factory(global.moment) ? factory(require("../moment"))
}(this, (function (moment) { 'use strict'; : typeof define === "function" && define.amd
? define(["../moment"], factory)
: factory(global.moment);
})(this, function (moment) {
"use strict";
var ja = moment.defineLocale("ja", {
var ja = moment.defineLocale('ja', { months: "一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月".split(
months : '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'), "_"
monthsShort : '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'), ),
weekdays : '日曜日_月曜日_火曜日_水曜日_木曜日_金曜日_土曜日'.split('_'), monthsShort: "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split(
weekdaysShort : '日_月_火_水_木_金_土'.split('_'), "_"
weekdaysMin : '日_月_火_水_木_金_土'.split('_'), ),
longDateFormat : { weekdays: "日曜日_月曜日_火曜日_水曜日_木曜日_金曜日_土曜日".split("_"),
LT : 'HH:mm', weekdaysShort: "日_月_火_水_木_金_土".split("_"),
LTS : 'HH:mm:ss', weekdaysMin: "日_月_火_水_木_金_土".split("_"),
L : 'YYYY/MM/DD', longDateFormat: {
LL : 'YYYY年M月D日', LT: "HH:mm",
LLL : 'YYYY年M月D日 HH:mm', LTS: "HH:mm:ss",
LLLL : 'YYYY年M月D日 dddd HH:mm', L: "YYYY/MM/DD",
l : 'YYYY/MM/DD', LL: "YYYY年M月D日",
ll : 'YYYY年M月D日', LLL: "YYYY年M月D日 HH:mm",
lll : 'YYYY年M月D日 HH:mm', LLLL: "YYYY年M月D日 dddd HH:mm",
llll : 'YYYY年M月D日(ddd) HH:mm' l: "YYYY/MM/DD",
ll: "YYYY年M月D日",
lll: "YYYY年M月D日 HH:mm",
llll: "YYYY年M月D日(ddd) HH:mm",
}, },
meridiemParse: /午前|午後/i, meridiemParse: /午前|午後/i,
isPM : function (input) { isPM: function (input) {
return input === '午後'; return input === "午後";
}, },
meridiem : function (hour, minute, isLower) { meridiem: function (hour, minute, isLower) {
if (hour < 12) { if (hour < 12) {
return '午前'; return "午前";
} else { } else {
return '午後'; return "午後";
} }
}, },
calendar : { calendar: {
sameDay : '[今日] LT', sameDay: "[今日] LT",
nextDay : '[明日] LT', nextDay: "[明日] LT",
nextWeek : function (now) { nextWeek: function (now) {
if (now.week() < this.week()) { if (now.week() < this.week()) {
return '[来週]dddd LT'; return "[来週]dddd LT";
} else { } else {
return 'dddd LT'; return "dddd LT";
} }
}, },
lastDay : '[昨日] LT', lastDay: "[昨日] LT",
lastWeek : function (now) { lastWeek: function (now) {
if (this.week() < now.week()) { if (this.week() < now.week()) {
return '[先週]dddd LT'; return "[先週]dddd LT";
} else { } else {
return 'dddd LT'; return "dddd LT";
} }
}, },
sameElse : 'L' sameElse: "L",
}, },
dayOfMonthOrdinalParse : /\d{1,2}日/, dayOfMonthOrdinalParse: /\d{1,2}日/,
ordinal : function (number, period) { ordinal: function (number, period) {
switch (period) { switch (period) {
case 'd': case "d":
case 'D': case "D":
case 'DDD': case "DDD":
return number + '日'; return number + "日";
default: default:
return number; return number;
} }
}, },
relativeTime : { relativeTime: {
future : '%s後', future: "%s後",
past : '%s前', past: "%s前",
s : '数秒', s: "数秒",
ss : '%d秒', ss: "%d秒",
m : '1分', m: "1分",
mm : '%d分', mm: "%d分",
h : '1時間', h: "1時間",
hh : '%d時間', hh: "%d時間",
d : '1日', d: "1日",
dd : '%d日', dd: "%d日",
M : '1ヶ月', M: "1ヶ月",
MM : '%dヶ月', MM: "%dヶ月",
y : '1年', y: "1年",
yy : '%d年' yy: "%d年",
} },
}); });
return ja; return ja;
});
})));
//! moment.js locale configuration //! moment.js locale configuration
;(function (global, factory) { (function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' typeof exports === "object" &&
&& typeof require === 'function' ? factory(require('../moment')) : typeof module !== "undefined" &&
typeof define === 'function' && define.amd ? define(['../moment'], factory) : typeof require === "function"
factory(global.moment) ? factory(require("../moment"))
}(this, (function (moment) { 'use strict'; : typeof define === "function" && define.amd
? define(["../moment"], factory)
: factory(global.moment);
})(this, function (moment) {
"use strict";
var ko = moment.defineLocale("ko", {
var ko = moment.defineLocale('ko', { months: "1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월".split("_"),
months : '1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월'.split('_'), monthsShort: "1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월".split(
monthsShort : '1월_2월_3월_4월_5월_6월_7월_8월_9월_10월_11월_12월'.split('_'), "_"
weekdays : '일요일_월요일_화요일_수요일_목요일_금요일_토요일'.split('_'), ),
weekdaysShort : '일_월_화_수_목_금_토'.split('_'), weekdays: "일요일_월요일_화요일_수요일_목요일_금요일_토요일".split("_"),
weekdaysMin : '일_월_화_수_목_금_토'.split('_'), weekdaysShort: "일_월_화_수_목_금_토".split("_"),
longDateFormat : { weekdaysMin: "일_월_화_수_목_금_토".split("_"),
LT : 'A h:mm', longDateFormat: {
LTS : 'A h:mm:ss', LT: "A h:mm",
L : 'YYYY.MM.DD.', LTS: "A h:mm:ss",
LL : 'YYYY년 MMMM D일', L: "YYYY.MM.DD.",
LLL : 'YYYY년 MMMM D일 A h:mm', LL: "YYYY년 MMMM D일",
LLLL : 'YYYY년 MMMM D일 dddd A h:mm', LLL: "YYYY년 MMMM D일 A h:mm",
l : 'YYYY.MM.DD.', LLLL: "YYYY년 MMMM D일 dddd A h:mm",
ll : 'YYYY년 MMMM D일', l: "YYYY.MM.DD.",
lll : 'YYYY년 MMMM D일 A h:mm', ll: "YYYY년 MMMM D일",
llll : 'YYYY년 MMMM D일 dddd A h:mm' lll: "YYYY년 MMMM D일 A h:mm",
llll: "YYYY년 MMMM D일 dddd A h:mm",
}, },
calendar : { calendar: {
sameDay : '오늘 LT', sameDay: "오늘 LT",
nextDay : '내일 LT', nextDay: "내일 LT",
nextWeek : 'dddd LT', nextWeek: "dddd LT",
lastDay : '어제 LT', lastDay: "어제 LT",
lastWeek : '지난주 dddd LT', lastWeek: "지난주 dddd LT",
sameElse : 'L' sameElse: "L",
}, },
relativeTime : { relativeTime: {
future : '%s 후', future: "%s 후",
past : '%s 전', past: "%s 전",
s : '몇 초', s: "몇 초",
ss : '%d초', ss: "%d초",
m : '1분', m: "1분",
mm : '%d분', mm: "%d분",
h : '한 시간', h: "한 시간",
hh : '%d시간', hh: "%d시간",
d : '하루', d: "하루",
dd : '%d일', dd: "%d일",
M : '한 달', M: "한 달",
MM : '%d달', MM: "%d달",
y : '일 년', y: "일 년",
yy : '%d년' yy: "%d년",
}, },
dayOfMonthOrdinalParse : /\d{1,2}(일|월|주)/, dayOfMonthOrdinalParse: /\d{1,2}(일|월|주)/,
ordinal : function (number, period) { ordinal: function (number, period) {
switch (period) { switch (period) {
case 'd': case "d":
case 'D': case "D":
case 'DDD': case "DDD":
return number + '일'; return number + "일";
case 'M': case "M":
return number + '월'; return number + "월";
case 'w': case "w":
case 'W': case "W":
return number + '주'; return number + "주";
default: default:
return number; return number;
} }
}, },
meridiemParse : /오전|오후/, meridiemParse: /오전|오후/,
isPM : function (token) { isPM: function (token) {
return token === '오후'; return token === "오후";
},
meridiem: function (hour, minute, isUpper) {
return hour < 12 ? "오전" : "오후";
}, },
meridiem : function (hour, minute, isUpper) {
return hour < 12 ? '오전' : '오후';
}
}); });
return ko; return ko;
});
})));
$(window).load(function () {
$(window).load(function () { //読み込み完了したら実行する //読み込み完了したら実行する
$('#loader-bg').delay(900).fadeOut(800);//ローディングを隠す $("#loader-bg").delay(900).fadeOut(800); //ローディングを隠す
$('#loader').delay(600).fadeOut(300); $("#loader").delay(600).fadeOut(300);
}); });
$(function(){ $(function () {
setTimeout('stopload()',3000); //いつまでもローディング状態にならないように10秒で強制表示させる setTimeout("stopload()", 3000); //いつまでもローディング状態にならないように10秒で強制表示させる
}); });
function stopload(){ //強制表示の関数 function stopload() {
$('#loader-bg').delay(900).fadeOut(800); //強制表示の関数
$('#loader').delay(600).fadeOut(300); $("#loader-bg").delay(900).fadeOut(800);
$("#loader").delay(600).fadeOut(300);
} }
<div class="modal fade menu_modal" id="menuModalCenter" tabindex="-1" role="dialog" aria-labelledby="menuModalCenterTitle" aria-hidden="true"> <div class="modal fade menu_modal" id="menuModalCenter" tabindex="-1" role="dialog"
aria-labelledby="menuModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header border-0"> <div class="modal-header border-0">
...@@ -9,7 +10,8 @@ ...@@ -9,7 +10,8 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
<ul> <ul>
<li><a href="chat_change_room_name.html"><img src="icon/icon_change_room_name.png" alt="ルーム名変更">ルーム名変更</a></li> <li><a href="chat_change_room_name.html"><img src="icon/icon_change_room_name.png" alt="ルーム名変更">ルーム名変更</a>
</li>
<li><a href="chat_add_user.html"><img src="icon/icon_add_user.png" alt="ユーザー招待">ユーザー招待</a></li> <li><a href="chat_add_user.html"><img src="icon/icon_add_user.png" alt="ユーザー招待">ユーザー招待</a></li>
</ul> </ul>
</div> </div>
......
<div class="modal fade profile_modal" id="profileModal1" tabindex="-1" role="dialog" aria-labelledby="profileModal1" aria-hidden="true"> <div class="modal fade profile_modal" id="profileModal1" tabindex="-1" role="dialog" aria-labelledby="profileModal1"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header border-0"> <div class="modal-header border-0">
...@@ -11,7 +12,9 @@ ...@@ -11,7 +12,9 @@
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p>グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループグループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ</p> <p>
グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループグループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ
</p>
</div> </div>
<div class="modal-footer border-0 justify-content-center"> <div class="modal-footer border-0 justify-content-center">
<button type="button" class="border-0 bg_navy"> <button type="button" class="border-0 bg_navy">
......
<div class="modal fade capture_modal" id="captyaModal" tabindex="-1" role="dialog" aria-labelledby="captyaModal" aria-hidden="true"> <div class="modal fade capture_modal" id="captyaModal" tabindex="-1" role="dialog" aria-labelledby="captyaModal"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header border-0 pb-0"> <div class="modal-header border-0 pb-0">
...@@ -11,7 +12,8 @@ ...@@ -11,7 +12,8 @@
<p>filename.jpg</p> <p>filename.jpg</p>
</div> </div>
<div class="modal-footer border-0 justify-content-center"> <div class="modal-footer border-0 justify-content-center">
<button type="button" class="profile_favorite_btn bg_white border_gray text_blue" data-dismiss="modal" aria-label="Close"> <button type="button" class="profile_favorite_btn bg_white border_gray text_blue" data-dismiss="modal"
aria-label="Close">
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<span>キャンセル</span> <span>キャンセル</span>
</div> </div>
......
<div class="modal fade change_host_modal" id="changeHostModal" tabindex="-1" role="dialog" aria-labelledby="changeHostModal" aria-hidden="true"> <div class="modal fade change_host_modal" id="changeHostModal" tabindex="-1" role="dialog"
aria-labelledby="changeHostModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header border-0 pb-0"> <div class="modal-header border-0 pb-0">
...@@ -8,7 +9,8 @@ ...@@ -8,7 +9,8 @@
<p>ホスト権限を引き渡します</p> <p>ホスト権限を引き渡します</p>
</div> </div>
<div class="modal-footer border-0 justify-content-center"> <div class="modal-footer border-0 justify-content-center">
<button type="button" class="profile_favorite_btn bg_white border_gray text_blue" data-dismiss="modal" aria-label="Close"> <button type="button" class="profile_favorite_btn bg_white border_gray text_blue" data-dismiss="modal"
aria-label="Close">
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<span>キャンセル</span> <span>キャンセル</span>
</div> </div>
......
<div class="modal fade change_host_modal" id="hostRequestModal" tabindex="-1" role="dialog" aria-labelledby="hostRequestModal" aria-hidden="true"> <div class="modal fade change_host_modal" id="hostRequestModal" tabindex="-1" role="dialog"
aria-labelledby="hostRequestModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header border-0 pb-0"> <div class="modal-header border-0 pb-0">
...@@ -8,7 +9,8 @@ ...@@ -8,7 +9,8 @@
<p>ホスト権限のリクエストを行います</p> <p>ホスト権限のリクエストを行います</p>
</div> </div>
<div class="modal-footer border-0 justify-content-center"> <div class="modal-footer border-0 justify-content-center">
<button type="button" class="profile_favorite_btn bg_white border_gray text_blue" data-dismiss="modal" aria-label="Close"> <button type="button" class="profile_favorite_btn bg_white border_gray text_blue" data-dismiss="modal"
aria-label="Close">
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<span>キャンセル</span> <span>キャンセル</span>
</div> </div>
......
<div class="modal fade profile_modal w_50" id="profileModal1" tabindex="-1" role="dialog" aria-labelledby="profileModal1" aria-hidden="true"> <div class="modal fade profile_modal w_50" id="profileModal1" tabindex="-1" role="dialog"
aria-labelledby="profileModal1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header border-0"> <div class="modal-header border-0">
...@@ -11,7 +12,9 @@ ...@@ -11,7 +12,9 @@
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p>グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループグループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ</p> <p>
グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループグループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ
</p>
</div> </div>
<div class="modal-footer border-0 justify-content-center"> <div class="modal-footer border-0 justify-content-center">
<button type="button" class="border-0 bg_navy text_white"> <button type="button" class="border-0 bg_navy text_white">
...@@ -22,7 +25,8 @@ ...@@ -22,7 +25,8 @@
<span>お気に入り解除</span> <span>お気に入り解除</span>
</div> </div>
</button> </button>
<button type="button" class="ch_host_btn border-0 bg_blue text_white" data-toggle="modal" data-target="#changeHostModal" value="#profileModal1"> <button type="button" class="ch_host_btn border-0 bg_blue text_white" data-toggle="modal"
data-target="#changeHostModal" value="#profileModal1">
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_change_host.png" alt="ホスト変更"> <img src="icon/icon_change_host.png" alt="ホスト変更">
......
<div class="modal fade profile_modal w_50" id="profileModal2" tabindex="-1" role="dialog" aria-labelledby="profileModal2" aria-hidden="true"> <div class="modal fade profile_modal w_50" id="profileModal2" tabindex="-1" role="dialog"
aria-labelledby="profileModal2" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header border-0"> <div class="modal-header border-0">
...@@ -22,7 +23,8 @@ ...@@ -22,7 +23,8 @@
<span>お気に入り解除</span> <span>お気に入り解除</span>
</div> </div>
</button> </button>
<button type="button" class="ch_host_btn border-0 bg_blue text_white" data-toggle="modal" data-target="#hostRequestModal" value="#profileModal2"> <button type="button" class="ch_host_btn border-0 bg_blue text_white" data-toggle="modal"
data-target="#hostRequestModal" value="#profileModal2">
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<div class="img_wrap"> <div class="img_wrap">
<img src="icon/icon_change_host.png" alt="ホスト変更"> <img src="icon/icon_change_host.png" alt="ホスト変更">
......
<li class="d-flex align-items-center">
<li class="d-flex align-items-center">
<a href="#" class="w-100"> <a href="#" class="w-100">
<div class="chat_item d-flex flex-row align-items-center"> <div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l"> <div class="chat_item_l">
<div class="thubnail"> <div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png"/></div> <div class="img_wrap"><img src="img/thumbnail.png" /></div>
</div> </div>
</div> </div>
<div class="chat_item_m px-0"> <div class="chat_item_m px-0">
...@@ -24,13 +23,13 @@ ...@@ -24,13 +23,13 @@
</div> </div>
</div> </div>
</a> </a>
</li> </li>
<li class="d-flex align-items-center"> <li class="d-flex align-items-center">
<a href="#" class="w-100"> <a href="#" class="w-100">
<div class="chat_item d-flex flex-row align-items-center"> <div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l"> <div class="chat_item_l">
<div class="thubnail"> <div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png"/></div> <div class="img_wrap"><img src="img/thumbnail.png" /></div>
</div> </div>
</div> </div>
<div class="chat_item_m px-0"> <div class="chat_item_m px-0">
...@@ -50,4 +49,4 @@ ...@@ -50,4 +49,4 @@
</div> </div>
</div> </div>
</a> </a>
</li> </li>
\ No newline at end of file
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