Skip to content

C
chat_webview
Commit a0d1984f by Kim Peace
Options

Fixed coding style

parent 4c50c265
Showing with 1923 additions and 1484 deletions
public_new/archive.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet">
......@@ -14,6 +16,7 @@
<link rel="stylesheet" href="./css/loading.css">
<link rel="stylesheet" href="./css/font-awesome.css">
</head>
<body>
<!-- ナビメニュー -->
<nav>
......@@ -354,11 +357,12 @@
<!-- ローディング -->
<!--#include virtual="loading.html" -->
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/archive.js"></script>
<script src="./js/common.js"></script>
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/archive.js"></script>
<script src="./js/common.js"></script>
</body>
</html>
</html>
\ No newline at end of file
public_new/archive_detail.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet">
......@@ -13,6 +15,7 @@
<link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css">
</head>
<body>
<!-- ナビメニュー -->
<nav>
......@@ -45,7 +48,7 @@
<img src="img/capture.png" alt="サンプル画像">
</div>
<div class="img_wrap">
<img src="img/controller.png" alt="サンプル画像">
<img src="img/controller.png" alt="サンプル画像">
</div>
</div>
<div class="archive_detail_desc">
......@@ -139,11 +142,12 @@
</div>
</main>
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/archive.js"></script>
<script src="./js/common.js"></script>
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/archive.js"></script>
<script src="./js/common.js"></script>
</body>
</html>
</html>
\ No newline at end of file
public_new/chat.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet">
......@@ -14,6 +16,7 @@
<link rel="stylesheet" href="./css/loading.css">
<link rel="stylesheet" href="./css/font-awesome.css">
</head>
<body>
<!-- ナビメニュー -->
<nav>
......@@ -434,12 +437,12 @@
</li>
</ul>
</div>
</div>
<!-- オーバーレイ -->
<div class="chat_list">
<ul class="overlay_src_msg">
</ul>
</div>
</div>
<!-- オーバーレイ -->
<div class="chat_list">
<ul class="overlay_src_msg">
</ul>
</div>
</main>
<!-- フッター -->
<footer>
......@@ -471,11 +474,12 @@
<!-- ローディング -->
<!--#include virtual="loading.html" -->
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/common.js"></script>
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/common.js"></script>
</body>
</html>
</html>
\ No newline at end of file
public_new/chat_add_user.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet">
......@@ -13,6 +15,7 @@
<link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css">
</head>
<body>
<!-- ナビメニュー -->
<nav>
......@@ -420,11 +423,12 @@
</main>
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/common.js"></script>
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/common.js"></script>
</body>
</html>
</html>
\ No newline at end of file
public_new/chat_add_user_confirm.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet">
......@@ -13,6 +15,7 @@
<link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css">
</head>
<body>
<!-- ナビメニュー -->
<nav>
......@@ -198,10 +201,11 @@
</main>
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script>
</body>
</html>
</html>
\ No newline at end of file
public_new/chat_change_room_name.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet">
......@@ -13,6 +15,7 @@
<link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css">
</head>
<body>
<!-- ナビメニュー -->
<nav>
......@@ -41,7 +44,9 @@
<form action="chat_room.html" method="post">
<!-- ルーム名入力 -->
<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="ルーム名を入力してください">
</div>
......@@ -53,10 +58,11 @@
</main>
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script>
</body>
</html>
</html>
\ No newline at end of file
public_new/chat_make_room.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet">
......@@ -13,6 +15,7 @@
<link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css">
</head>
<body>
<!-- ナビメニュー -->
<nav>
......@@ -56,7 +59,9 @@
<div class="tab_content" id="tab1_content">
<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">
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
......@@ -163,7 +168,9 @@
</li>
</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">
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
......@@ -221,7 +228,9 @@
</li>
</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">
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
......@@ -283,7 +292,9 @@
<div class="tab_content" id="tab2_content">
<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">
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
......@@ -340,7 +351,9 @@
</div>
</li>
</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">
<li class="d-flex align-items-center">
<div class="chat_item d-flex flex-row align-items-center w-100">
......@@ -411,11 +424,12 @@
</main>
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/common.js"></script>
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/common.js"></script>
</body>
</html>
</html>
\ No newline at end of file
public_new/chat_make_room_confirm.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet">
......@@ -13,6 +15,7 @@
<link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css">
</head>
<body>
<!-- ナビメニュー -->
<nav>
......@@ -41,7 +44,9 @@
<form action="chat_room.html" method="post">
<!-- ルーム名入力 -->
<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="ルーム名を入力してください">
</div>
......@@ -205,10 +210,11 @@
</main>
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script>
</body>
</html>
</html>
\ No newline at end of file
public_new/chat_room.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet">
......@@ -13,6 +15,7 @@
<link rel="stylesheet" href="./css/chat_room_footer.css">
<link rel="stylesheet" href="./css/font-awesome.css">
</head>
<body>
<!-- ナビメニュー -->
<nav>
......@@ -39,7 +42,8 @@
<div class="col-4 pl-0">
<div class="nav-item text-right">
<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><!-- .col -->
</div><!-- .row -->
......@@ -167,10 +171,10 @@
<div class="sys_msg text-center">
チャット開始<br>
参加ユーザ<br>
OOさん<br>
OOさん<br>
OOさん
参加ユーザ<br>
OOさん<br>
OOさん<br>
OOさん
</div>
<!-- 相手の吹き出し -->
......@@ -180,7 +184,9 @@
</figure>
<div class="room_left-text">
<div class="name">名前名前名前名前</div>
<div class="text">ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</div>
<div class="text">
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
</div>
</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>
......@@ -190,7 +196,9 @@
<!-- 自分の吹き出し -->
<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="read d-flex align-items-end"><span>既読</span></div>
</div>
......@@ -414,11 +422,12 @@
<!-- プロフィールモーダル -->
<!--#include virtual="modal_chat_profile.html" -->
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/common.js"></script>
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/common.js"></script>
</body>
</html>
</html>
\ No newline at end of file
public_new/collaboration_documents.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet">
......@@ -13,6 +15,7 @@
<link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css">
</head>
<body>
<!-- ナビメニュー -->
<header id="collabo_header">
......@@ -142,12 +145,13 @@
<!-- フッター -->
<!--#include virtual="footer_collabo.html" -->
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/common.js"></script>
<script src="./js/collaboration.js"></script>
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/common.js"></script>
<script src="./js/collaboration.js"></script>
</body>
</html>
</html>
\ No newline at end of file
public_new/collaboration_documents_overlay_menu.html
......@@ -39,4 +39,4 @@
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
public_new/collaboration_overlay_add_user_list.html
<!-- ユーザーリスト -->
<div class="user_list">
<ul class="p-0">
<li class="d-flex align-items-center">
<div class="user_item d-flex flex-row align-items-center w-100">
<div class="user_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="user_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="user_item_m">
<div class="d-flex flex-column">
<div class="user_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</div>
<!-- ユーザーリスト -->
<div class="user_list">
<ul class="p-0">
<li class="d-flex align-items-center">
<div class="user_item d-flex flex-row align-items-center w-100">
<div class="user_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</li>
<li class="d-flex align-items-center">
<div class="user_item d-flex flex-row align-items-center w-100">
<div class="user_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="user_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="user_item_m">
<div class="d-flex flex-column">
<div class="user_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</div>
</div>
<div class="user_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="user_item d-flex flex-row align-items-center w-100">
<div class="user_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="user_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="user_item_m">
<div class="d-flex flex-column">
<div class="user_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</div>
<div class="user_item_m">
<div class="d-flex flex-column">
<div class="user_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="user_item d-flex flex-row align-items-center w-100">
<div class="user_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="user_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="user_item_m">
<div class="d-flex flex-column">
<div class="user_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="user_item d-flex flex-row align-items-center w-100">
<div class="user_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</li>
<li class="d-flex align-items-center">
<div class="user_item d-flex flex-row align-items-center w-100">
<div class="user_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="user_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="user_item_m">
<div class="d-flex flex-column">
<div class="user_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</div>
</div>
<div class="user_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="user_item d-flex flex-row align-items-center w-100">
<div class="user_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="user_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="user_item_m">
<div class="d-flex flex-column">
<div class="user_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</div>
<div class="user_item_m">
<div class="d-flex flex-column">
<div class="user_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="user_item d-flex flex-row align-items-center w-100">
<div class="user_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="user_item d-flex flex-row align-items-center w-100">
<div class="user_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="user_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="user_item_m">
<div class="d-flex flex-column">
<div class="user_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
<div class="user_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="user_item d-flex flex-row align-items-center w-100">
<div class="user_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="user_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="user_item_m">
<div class="d-flex flex-column">
<div class="user_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
<div class="user_item_m">
<div class="d-flex flex-column">
<div class="user_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="user_item d-flex flex-row align-items-center w-100">
<div class="user_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="user_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="user_item_m">
<div class="d-flex flex-column">
<div class="user_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="user_item d-flex flex-row align-items-center w-100">
<div class="user_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="user_item d-flex flex-row align-items-center w-100">
<div class="user_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="user_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="user_item_m">
<div class="d-flex flex-column">
<div class="user_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
<div class="user_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="user_item d-flex flex-row align-items-center w-100">
<div class="user_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="user_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="user_item_m">
<div class="d-flex flex-column">
<div class="user_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
<div class="user_item_m">
<div class="d-flex flex-column">
<div class="user_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="d-flex align-items-center">
<div class="user_item d-flex flex-row align-items-center w-100">
<div class="user_item_l_chk">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox[]" class="checkbox-input">
<span class="checkbox-parts"></span>
</label>
</div>
</div>
<div class="user_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
</div>
</div>
<div class="user_item_m">
<div class="d-flex flex-column">
<div class="user_item_t">
<span class="chat_item_ttl">名前　太郎</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
\ No newline at end of file
public_new/collaboration_picture.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet">
......@@ -13,6 +15,7 @@
<link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css">
</head>
<body>
<!-- ナビメニュー -->
<header id="collabo_header">
......@@ -142,12 +145,13 @@
<!-- フッター -->
<!--#include virtual="footer_collabo.html" -->
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/common.js"></script>
<script src="./js/collaboration.js"></script>
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/common.js"></script>
<script src="./js/collaboration.js"></script>
</body>
</html>
</html>
\ No newline at end of file
public_new/collaboration_picture_overlay_menu.html
......@@ -39,4 +39,4 @@
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
public_new/collaboration_video.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet">
......@@ -13,6 +15,7 @@
<link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css">
</head>
<body>
<!-- ナビメニュー -->
<header id="collabo_header">
......@@ -136,12 +139,13 @@
<!-- フッター -->
<!--#include virtual="footer_collabo.html" -->
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/common.js"></script>
<script src="./js/collaboration.js"></script>
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/common.js"></script>
<script src="./js/collaboration.js"></script>
</body>
</html>
</html>
\ No newline at end of file
public_new/collaboration_video_overlay_menu.html
......@@ -39,4 +39,4 @@
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
public_new/collaboration_voice.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet">
......@@ -13,6 +15,7 @@
<link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css">
</head>
<body>
<!-- ナビメニュー -->
<header id="collabo_header">
......@@ -87,12 +90,13 @@
<!-- フッター -->
<!--#include virtual="footer_collabo.html" -->
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/common.js"></script>
<script src="./js/collaboration.js"></script>
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/common.js"></script>
<script src="./js/collaboration.js"></script>
</body>
</html>
</html>
\ No newline at end of file
public_new/collaboration_voice_overlay_menu.html
......@@ -39,4 +39,4 @@
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
public_new/collaboration_whiteboard.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet">
......@@ -13,6 +15,7 @@
<link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css">
</head>
<body>
<!-- ナビメニュー -->
<header id="collabo_header">
......@@ -132,12 +135,13 @@
<!-- フッター -->
<!--#include virtual="footer_collabo.html" -->
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/common.js"></script>
<script src="./js/collaboration.js"></script>
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/chat.js"></script>
<script src="./js/common.js"></script>
<script src="./js/collaboration.js"></script>
</body>
</html>
</html>
\ No newline at end of file
public_new/collaboration_whiteboard_overlay_menu.html
......@@ -39,4 +39,4 @@
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
public_new/collabotarion_overlay_user_list.html
<div class="user_list_wrap">
<div class="user_list d-flex flex-wrap">
<div class="user_item host">
<a href="#" data-toggle="modal" data-target="#profileModal1">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<span class="name">名前名前</span>
</a>
</div>
<div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal2">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<span class="name">名前名前</span>
</a>
</div>
<div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal2">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<span class="name">名前名前名前名前名前名前名前名前名前名前</span>
</a>
</div>
<div class="user_item host">
<a href="#" data-toggle="modal" data-target="#profileModal2">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<span class="name">名前名前名前名前名前名前名前名前名前名前</span>
</a>
</div>
<div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal2">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<span class="name">名前名前名前名前名前名前名前名前名前名前</span>
</a>
</div>
<div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal2">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<span class="name">名前名前名前名前名前名前名前名前名前名前</span>
</a>
</div>
<div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal2">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<span class="name">名前名前名前名前名前名前名前名前名前名前</span>
</a>
</div>
<div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal2">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<span class="name">名前名前名前名前名前名前名前名前名前名前</span>
</a>
</div>
<div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal2">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<span class="name">名前名前名前</span>
</a>
</div>
<div class="user_list_wrap">
<div class="user_list d-flex flex-wrap">
<div class="user_item host">
<a href="#" data-toggle="modal" data-target="#profileModal1">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<span class="name">名前名前</span>
</a>
</div>
<div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal2">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<span class="name">名前名前</span>
</a>
</div>
<div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal2">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<span class="name">名前名前名前名前名前名前名前名前名前名前</span>
</a>
</div>
<div class="user_item host">
<a href="#" data-toggle="modal" data-target="#profileModal2">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<span class="name">名前名前名前名前名前名前名前名前名前名前</span>
</a>
</div>
<div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal2">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<span class="name">名前名前名前名前名前名前名前名前名前名前</span>
</a>
</div>
<div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal2">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<span class="name">名前名前名前名前名前名前名前名前名前名前</span>
</a>
</div>
<div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal2">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<span class="name">名前名前名前名前名前名前名前名前名前名前</span>
</a>
</div>
<div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal2">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<span class="name">名前名前名前名前名前名前名前名前名前名前</span>
</a>
</div>
<div class="user_item">
<a href="#" data-toggle="modal" data-target="#profileModal2">
<div class="img_wrap"><img src="img/thumbnail.png" alt="サムネイル画像" /></div>
<span class="name">名前名前名前</span>
</a>
</div>
</div>
</div>
\ No newline at end of file
public_new/contact.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
<title>LiveTaskyell</title>
<link href="https://fonts.googleapis.com/earlyaccess/notosansjp.css">
<link href="./fontawesome/css/all.css" rel="stylesheet">
......@@ -15,6 +17,7 @@
<link rel="stylesheet" href="./css/footer.css">
<link rel="stylesheet" href="./css/font-awesome.css">
</head>
<body>
<!-- ナビメニュー -->
<nav>
......@@ -58,7 +61,9 @@
<div class="tab_content" id="tab1_content">
<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">
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
......@@ -131,7 +136,9 @@
</li>
</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">
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
......@@ -181,7 +188,9 @@
</li>
</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">
<li class="d-flex align-items-center">
<a href="chat_room.html" class="w-100">
......@@ -420,11 +429,12 @@
<!-- ローディング -->
<!--#include virtual="loading.html" -->
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/contact.js"></script>
<script src="./js/common.js"></script>
<script src="./js/libs/jquery-3.3.1.min.js"></script>
<script src="./js/libs/moment.js"></script>
<script src="./js/libs/bootstrap.min.js"></script>
<script src="./js/libs/jquery.mark.min.js"></script>
<script src="./js/contact.js"></script>
<script src="./js/common.js"></script>
</body>
</html>
</html>
\ No newline at end of file
public_new/css/archive.css
......@@ -16,7 +16,7 @@
}
.archive_list ul li {
list-style: none;
border-bottom: 1px solid #E2E8F0;
border-bottom: 1px solid #e2e8f0;
position: relative;
}
.archive_list ul li a {
......@@ -26,10 +26,18 @@
.archive_list ul li a:hover {
background: aliceblue;
}
.bg_blue{ background: #0070CA; }
.bg_green{ background: #4DCA00; }
.bg_orange{ background: #CA6D00; }
.archive_list ul li:first-child { border-top: 1px solid #E2E8F0; }
.bg_blue {
background: #0070ca;
}
.bg_green {
background: #4dca00;
}
.bg_orange {
background: #ca6d00;
}
.archive_list ul li:first-child {
border-top: 1px solid #e2e8f0;
}
.archive_desc {
padding-left: 10px;
position: relative;
......@@ -37,30 +45,47 @@
overflow: hidden;
white-space: nowrap;
}
.archive_date span { color: #323743; font-size: 14px; }
.archive_name span { color: #323743; font-size: 16px; font-weight: 500;}
.archive_name{
.archive_date span {
color: #323743;
font-size: 14px;
}
.archive_name span {
color: #323743;
font-size: 16px;
font-weight: 500;
}
.archive_name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/**************************** archive detail *************************/
.archive_detail .ttl{
.archive_detail .ttl {
font-size: 18px;
font-weight: bold;
}
.archive_detail .item{ margin-bottom: 20px; }
.archive_detail .archive_detail_desc img{
.archive_detail .item {
margin-bottom: 20px;
}
.archive_detail .archive_detail_desc img {
width: 80px;
height: 80px;
border-radius: 50%;
}
.archive_detail .archive_detail_desc .archive_detail_user_list ul{ padding-left: 0; overflow-x: scroll;}
.archive_detail .archive_detail_desc .archive_detail_user_list ul li{ list-style: none; margin: 0 5px; }
.archive_detail_desc { margin: 0 10px; }
.archive_detail .archive_detail_desc .archive_detail_user_list ul {
padding-left: 0;
overflow-x: scroll;
}
.archive_detail .archive_detail_desc .archive_detail_user_list ul li {
list-style: none;
margin: 0 5px;
}
.archive_detail_desc {
margin: 0 10px;
}
.archive_detail .archive_detail_desc .archive_detail_user_list span,
.archive_detail .archive_detail_desc .archive_detail_sv_user span{
.archive_detail .archive_detail_desc .archive_detail_sv_user span {
text-align: center;
white-space: nowrap;
overflow: hidden;
......@@ -68,11 +93,11 @@
width: 90px;
}
@media screen and (max-width: 768px){
.archive_name{
@media screen and (max-width: 768px) {
.archive_name {
font-size: 14px;
}
.archive_detail .ttl{
.archive_detail .ttl {
font-size: 16px;
}
.archive_detail_desc span {
......
public_new/css/chat.css
......@@ -5,10 +5,10 @@
margin: 0 auto;
}
.tab_item {
width: calc(100%/2);
width: calc(100% / 2);
height: 50px;
border-bottom: 5px solid #0070CA;
background-color: #E0E0E0;
border-bottom: 5px solid #0070ca;
background-color: #e0e0e0;
line-height: 50px;
font-size: 16px;
text-align: center;
......@@ -33,12 +33,12 @@ input[name="tab_item"] {
overflow: hidden;
}
#tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content{
#tab2:checked ~ #tab2_content {
display: block;
}
.tabs input:checked + .tab_item {
background-color: #0070CA;
background-color: #0070ca;
color: #fff;
}
......@@ -52,13 +52,14 @@ input[name="tab_item"] {
}
.chat_list ul li {
list-style: none;
border-bottom: 1px solid #E2E8F0;
border-bottom: 1px solid #e2e8f0;
position: relative;
}
.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;
overflow: hidden;
text-overflow: ellipsis;
......@@ -90,7 +91,7 @@ input[name="tab_item"] {
overflow: hidden;
margin: 0 auto;
}
.chat_item_l .thubnail img{
.chat_item_l .thubnail img {
width: 50px;
height: 50px;
}
......@@ -101,81 +102,94 @@ input[name="tab_item"] {
}
.chat_item_l .thubnail3 .img_wrap:nth-child(1) {
width: 25px;
height: 50px;
position: relative;
overflow: hidden;
float: left;
width: 25px;
height: 50px;
position: relative;
overflow: hidden;
float: left;
}
.chat_item_l .thubnail3 .img_wrap:nth-child(1) img {
width: 50px;
height: 50px;
position: absolute;
left: -12px;
width: 50px;
height: 50px;
position: absolute;
left: -12px;
}
.chat_item_l .thubnail3 .img_wrap:nth-child(2) {
width: 25px;
height: 25px;
position: relative;
overflow: hidden;
float: left;
width: 25px;
height: 25px;
position: relative;
overflow: hidden;
float: left;
}
.chat_item_l .thubnail3 .img_wrap:nth-child(2) img, .chat_item_l .thubnail3 .img_wrap:nth-child(3) img {
width: 25px;
height: 25px;
.chat_item_l .thubnail3 .img_wrap:nth-child(2) img,
.chat_item_l .thubnail3 .img_wrap:nth-child(3) img {
width: 25px;
height: 25px;
}
.chat_item_l .thubnail3 .img_wrap:nth-child(3) {
width: 25px;
height: 25px;
position: relative;
overflow: hidden;
float: left;
width: 25px;
height: 25px;
position: relative;
overflow: hidden;
float: left;
}
.chat_item_l .thubnail2 .img_wrap:nth-child(1) {
width: 25px;
height: 50px;
position: relative;
overflow: hidden;
float: left;
width: 25px;
height: 50px;
position: relative;
overflow: hidden;
float: left;
}
.chat_item_l .thubnail2 .img_wrap:nth-child(2) {
width: 25px;
height: 50px;
position: relative;
overflow: hidden;
width: 25px;
height: 50px;
position: relative;
overflow: hidden;
}
.chat_item_l .thubnail2 .img_wrap img {
width: 50px;
height: 50px;
position: absolute;
left: -12px;
width: 50px;
height: 50px;
position: absolute;
left: -12px;
}
.chat_item{ height: 90px;}
.chat_list li{ list-style: none; }
.chat_list a{ color: #323743; }
.chat_item {
height: 90px;
}
.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;
text-align: center;
background-color: #FF4747;
background-color: #ff4747;
color: #fff;
padding: 2px 10px;
margin: 5px auto;
border-radius: 30px;
}
/* 既読 */
.already_read{
background-color: #F1F2F2;
.already_read {
background-color: #f1f2f2;
}
/**************************** make room *************************/
.chat_list .category{
.chat_list .category {
text-align: left;
font-size: 1.4rem;
height: 30px;
......@@ -183,14 +197,14 @@ input[name="tab_item"] {
cursor: pointer;
position: relative;
line-height: 30px;
background: #C4C4C4;
background: #c4c4c4;
padding-left: 10px;
}
.category_name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 90%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 90%;
}
.chat_list .category.open::after {
content: "\f106";
......@@ -209,17 +223,16 @@ input[name="tab_item"] {
font: 26px FontAwesome;
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: #F5D256;
color: #f5d256;
}
.star.disable:before {
content: "\f005";
font: 26px FontAwesome;
font-family: "Font Awesome 5 Free";
font-weight: 400;
color: #C4C4C4;
color: #c4c4c4;
}
/* メンバー選択チェックボックス */
.chat_item_l_chk {
height: 100%;
......@@ -233,16 +246,16 @@ input[name="tab_item"] {
vertical-align: middle;
}
.checkbox-input{
.checkbox-input {
display: none;
}
.checkbox-parts{
position:relative;
.checkbox-parts {
position: relative;
}
.checkbox-parts::before{
.checkbox-parts::before {
display: block;
position: absolute;
border: 2px solid #0070CA;
border: 2px solid #0070ca;
content: "";
width: 40px;
height: 40px;
......@@ -253,7 +266,7 @@ input[name="tab_item"] {
left: 0;
margin: auto;
}
.checkbox-input:checked + .checkbox-parts::after{
.checkbox-input:checked + .checkbox-parts::after {
display: block;
position: absolute;
content: "\f107";
......@@ -266,7 +279,7 @@ input[name="tab_item"] {
bottom: 0;
left: 0;
margin: auto;
background: #0070CA;
background: #0070ca;
border-radius: 50%;
}
......@@ -274,65 +287,83 @@ input[name="tab_item"] {
.make_room_btn button,
.make_room_confirm_btn button,
.add_user_confirm_btn button,
.add_user_btn button{
.add_user_btn button {
height: 60px;
position: fixed;
bottom: 0;
width: 100%;
background: #0070CA;
background: #0070ca;
color: #fff;
border: none;
font-size: 18px;
max-width: 1280px;
}
.select_member{ font-size: 14px; }
.select_member {
font-size: 14px;
}
#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_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_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_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 {
padding-left: 10px;
width: 100%;
border: none;
border-bottom: 1px solid #BDBDBD;
border-bottom: 1px solid #bdbdbd;
height: 40px;
margin-bottom: 20px;
}
/* ルーム名変更ボタン */
.change_room_name_btn{ text-align: center; }
.change_room_name_btn button{
.change_room_name_btn {
text-align: center;
}
.change_room_name_btn button {
text-align: center;
height: 48px;
width: 172px;
background: #0070CA;
background: #0070ca;
color: #fff;
border: none;
font-size: 18px;
}
/**************************** chat room *************************/
#chat_room { margin-top: 150px; }
#chat_room {
margin-top: 150px;
}
.chat_room_src_form input {
padding-left: 10px;
border: 1px solid #BDBDBD;
border: 1px solid #bdbdbd;
border-radius: 5px;
height: 40px;
margin: 10px 0;
padding-left: 35px;
width: 100%;
}
.chat_room_src_form{
.chat_room_src_form {
position: relative;
margin: 0 5px;
}
.chat_room_src_form .src_icon{
.chat_room_src_form .src_icon {
position: absolute;
top: 23px;
left: 10px;
......@@ -343,11 +374,11 @@ input[name="tab_item"] {
}
.chat_room_src_form .cancel {
width: 120px;
font-size: 14px;
padding: 0 10px;
color: #8F8F8F;
text-align: center;
width: 120px;
font-size: 14px;
padding: 0 10px;
color: #8f8f8f;
text-align: center;
}
/* ユーザーリスト */
......@@ -359,7 +390,10 @@ input[name="tab_item"] {
overflow-x: scroll;
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 {
width: 60px;
white-space: nowrap;
......@@ -367,13 +401,15 @@ input[name="tab_item"] {
text-overflow: ellipsis;
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;
}
#filter .user_item .img_wrap.filter:after{
#filter .user_item .img_wrap.filter:after {
position: absolute;
content: "\f107";
font: 50px FontAwesome;
......@@ -393,8 +429,8 @@ input[name="tab_item"] {
}
.room_container {
padding:0;
background: #F3F3F3;
padding: 0;
background: #f3f3f3;
overflow: hidden;
margin: 20px auto;
margin-bottom: 140px;
......@@ -441,7 +477,7 @@ input[name="tab_item"] {
font-size: 12px;
}
.unread span {
background: #C4C4C4;
background: #c4c4c4;
color: #fff;
border-radius: 15px;
padding: 0 5px;
......@@ -460,19 +496,19 @@ input[name="tab_item"] {
padding: 0;
margin: 0;
}
.room_left figure img{
.room_left figure img {
border-radius: 50%;
width: 50px;
height: 50px;
}
.room_left .img_wrap{
.room_left .img_wrap {
display: table-cell;
text-align: center;
border-radius: 8px;
line-height: 140px;
overflow: hidden;
}
.room_right .img_wrap{
.room_right .img_wrap {
display: block;
text-align: center;
border-radius: 8px;
......@@ -480,9 +516,9 @@ input[name="tab_item"] {
margin-left: 80px;
overflow: hidden;
}
.img_wrap img{
.img_wrap img {
width: 100%;
vertical-align:middle;
vertical-align: middle;
}
.room_left-text {
......@@ -504,13 +540,14 @@ input[name="tab_item"] {
background-color: #ffffff;
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%);
}
/* 吹き出し */
.room_left-text .text::after {
content: '';
content: "";
position: absolute;
display: block;
width: 0;
......@@ -562,7 +599,7 @@ input[name="tab_item"] {
.room_right .text {
padding: 10px;
border-radius: 8px;
background-color: #0070CA;
background-color: #0070ca;
color: #fff;
margin: 0;
margin-left: 80px;
......@@ -570,14 +607,14 @@ input[name="tab_item"] {
}
/* 吹き出し */
.room_right .text::after {
content: '';
content: "";
position: absolute;
right: -10px;
top: 5px;
border-left: 10px solid #0070CA;
border-left: 10px solid #0070ca;
border-right: 10px solid transparent;
border-top: 10px solid #0070CA;
border-bottom: 10px solid transparent;v
border-top: 10px solid #0070ca;
border-bottom: 10px solid transparent;
}
/* 日付 */
.room_right .date {
......@@ -592,7 +629,7 @@ input[name="tab_item"] {
/* システムメッセージ */
.sys_msg {
background: rgb(198,198,198,.5);
background: rgb(198, 198, 198, 0.5);
color: #909090;
padding: 2px 10px;
width: 200px;
......@@ -608,14 +645,16 @@ input[name="tab_item"] {
max-width: 320px;
margin: 0 auto;
}
.collabo_date span{ font-size: 12px; }
.collabo_date span {
font-size: 12px;
}
.collabo_area .collabo_desc {
background: rgb(0,112,202,.6);
background: rgb(0, 112, 202, 0.6);
border-radius: 5px;
padding: 5px 10px;
}
.collabo_area.disable .collabo_desc {
background: rgb(91,102,111,.6);
background: rgb(91, 102, 111, 0.6);
}
.collabo_desc .collabo_user_list img {
width: 30px;
......@@ -625,23 +664,28 @@ input[name="tab_item"] {
border: 2px solid #fff;
}
.collabo_user_list .num {
width: 30px;
height: 30px;
border-radius: 15px;
background: #B8B8B8;
text-align: center;
color: #fff;
margin: 5px;
}
.collabo_user_list .num span { line-height: 30px; }
.collabo_room_name { color: #fff; max-width: 300px;}
width: 30px;
height: 30px;
border-radius: 15px;
background: #b8b8b8;
text-align: center;
color: #fff;
margin: 5px;
}
.collabo_user_list .num span {
line-height: 30px;
}
.collabo_room_name {
color: #fff;
max-width: 300px;
}
.collabo_room_name span:first-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.collabo_room_name span:nth-child(2) {
white-space: nowrap;
white-space: nowrap;
}
.collabo_time {
color: #fff;
......@@ -654,7 +698,7 @@ input[name="tab_item"] {
.collabo_area .collabo_btn button {
width: 100%;
line-height: 45px;
background: #0070CA;
background: #0070ca;
border: none;
color: #fff;
border-radius: 25px;
......@@ -662,7 +706,7 @@ input[name="tab_item"] {
outline: none;
}
.collabo_area.disable .collabo_btn button {
background: #5B666F;
background: #5b666f;
}
/**************************** modal *************************/
......@@ -679,7 +723,7 @@ input[name="tab_item"] {
margin-right: 10px;
}
.menu_modal .modal-body ul li {
border-bottom: 1px solid #C6C6C6;
border-bottom: 1px solid #c6c6c6;
height: 40px;
}
.menu_modal .modal-body ul li a {
......@@ -691,22 +735,23 @@ input[name="tab_item"] {
background: aliceblue;
}
@media screen and (max-width: 768px){
@media screen and (max-width: 768px) {
/* chat item */
.tab_item{
.tab_item {
font-size: 16px;
}
.chat_item_ttl{
.chat_item_ttl {
font-size: 16px;
}
.chat_item_ttl, .chat_item_num{
.chat_item_ttl,
.chat_item_num {
font-size: 16px;
}
.chat_item_m {
font-size: 14px;
}
.chat_item_time,.chat_item_unread{
.chat_item_time,
.chat_item_unread {
font-size: 14px;
}
.chat_item {
......@@ -716,7 +761,7 @@ input[name="tab_item"] {
.make_room_btn button,
.make_room_confirm_btn button,
.add_user_confirm_btn button,
.add_user_btn button{
.add_user_btn button {
font-size: 16px;
}
/* check radio */
......@@ -734,9 +779,13 @@ input[name="tab_item"] {
width: 30px;
}
#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_add_user_confirm .chat_list h2 { font-size: 16px; }
#chat_add_user_confirm .chat_list h2 {
font-size: 16px;
}
/* ルーム名入力フォーム */
.input_name_room {
font-size: 14px;
......
public_new/css/chat_room_footer.css
@charset "UTF-8";
/**************************** footer *************************/
footer{
footer {
max-width: 1280px;
background: #F9F9F9;
margin-top: 20px;
......@@ -10,14 +10,14 @@ footer{
bottom: 0;
width: 100%;
}
.footer_content_t{
.footer_content_t {
height: 70px;
padding: 0 10px;
}
.footer_content_b{
.footer_content_b {
height: 70px;
}
footer .footer-wrap{
footer .footer-wrap {
margin: 0 auto;
/* max-width: 500px; */
height: 100%;
......@@ -25,7 +25,7 @@ footer .footer-wrap{
footer .footer_content_t .footer_item {
margin: auto 10px;
}
footer .footer_item{
footer .footer_item {
text-align: center;
margin: auto 0;
}
......@@ -35,15 +35,15 @@ footer .footer_content_b .footer_item p{
font-weight: bold;
margin:0;
}
footer .footer_item img{
footer .footer_item img {
width: 32px;
height: 32px;
}
footer .footer_content_b .footer_item .active{
footer .footer_content_b .footer_item .active {
color: #0070CA;
font-weight: bold;
}
footer .footer_item a{
footer .footer_item a {
display: inline-block;
}
......@@ -56,12 +56,12 @@ footer .footer_content_t input {
border-radius: 5px;
height: 45px;
}
footer .footer_content_t input:focus{
footer .footer_content_t input:focus {
border-color: #71a2ff;
outline: 0;
box-shadow: 0 0 0 0.2rem rgb(0 83 240 / 25%);
}
@media screen and (max-width: 768px){
@media screen and (max-width: 768px) {
footer .footer_content_b .footer_item p {
font-size: 12px;
}
......
public_new/css/collaboration.css
@charset "UTF-8";
/**************************** header *************************/
#collabo_header{
#collabo_header {
max-width: 1280px;
height: 60px;
position: fixed;
top: 0;
width: 100%;
padding: 0 10px;
background: #1D1D1D;
background: #1d1d1d;
z-index: 10;
}
.collabo_nav_l{
.collabo_nav_l {
color: #fff;
}
.collabo_nav_r .img_wrap{
.collabo_nav_r .img_wrap {
width: 45px;
height: 45px;
}
.collabo_nav_r .img_wrap img{
.collabo_nav_r .img_wrap img {
width: 100%;
height: 100%;
}
/**************************** 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 .document_wrap,
#overlay_user_list .user_list_wrap { height: 100%; background: #525252;}
#collabo_main .user_list,#overlay_user_list .user_list { background: #525252; padding-bottom: 120px;}
#collabo_main .user_list .img_wrap,#overlay_user_list .user_list .img_wrap{
#overlay_user_list .user_list_wrap {
height: 100%;
background: #525252;
}
#collabo_main .user_list,
#overlay_user_list .user_list {
background: #525252;
padding-bottom: 120px;
}
#collabo_main .user_list .img_wrap,
#overlay_user_list .user_list .img_wrap {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 5px auto;
height: 100%;
}
.user_item .name {
position: absolute;
top: 65px;
left: 0;
right: 0;
color: #fff;
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0 auto;
}
.user_item .name {
position: absolute;
top: 65px;
left: 0;
right: 0;
color: #fff;
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0 auto;
}
#collabo_main .user_list .img_wrap img,
#overlay_user_list .user_list .img_wrap img{
#overlay_user_list .user_list .img_wrap img {
width: 80px;
height: 80px;
border-radius: 50%;
}
.noscroll{ overflow: hidden; position: fixed;}
.none{ display: none;}
}
.noscroll {
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: "";
top: 0;
right: 0;
......@@ -68,23 +86,23 @@
height: 64px;
}
.user_item {
width: calc( 50% - 5px );
position: relative;
text-align: center;
border: 1px solid white;
border-radius: 5px;
margin: 5px auto;
height: calc( 100vh / 3 );
line-height: calc( 100vh / 3 );
overflow: hidden;
width: calc(50% - 5px);
position: relative;
text-align: center;
border: 1px solid white;
border-radius: 5px;
margin: 5px auto;
height: calc(100vh / 3);
line-height: calc(100vh / 3);
overflow: hidden;
}
.user_item a {
display: block;
height: 100%;
display: block;
height: 100%;
}
/**************************** overlay *************************/
.btn{
.btn {
background-color: transparent;
border: none;
width: 60px;
......@@ -92,21 +110,23 @@
background-repeat: no-repeat;
background-position: center;
}
.btn.menu_btn{
.btn.menu_btn {
background-image: url("../icon/icon_collabo_menu.png");
}
.btn.user_btn{
.btn.user_btn {
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");
}
.btn.menu_btn.hide,.btn.add_user_btn.hide,.btn.user_btn.hide{
transition: .3s;
.btn.menu_btn.hide,
.btn.add_user_btn.hide,
.btn.user_btn.hide {
transition: 0.3s;
background-image: url("../icon/icon_close.png");
}
.overlay {
transition: .7s;
transition: 0.7s;
position: absolute;
top: 60px;
width: 100%;
......@@ -114,7 +134,9 @@
background: #525252;
height: 100vh;
}
.fixed{ position: fixed; }
.fixed {
position: fixed;
}
.overlay.slidein {
top: 60px;
right: 0;
......@@ -135,7 +157,7 @@
#overlay_menu .menu_wrap .menu {
width: 220px;
}
#overlay_menu .menu_wrap .menu .item a{
#overlay_menu .menu_wrap .menu .item a {
text-align: center;
color: #fff;
}
......@@ -143,12 +165,12 @@
width: 80px;
height: 80px;
line-height: 80px;
background: #0070CA;
background: #0070ca;
border-radius: 8px;
margin: 5px;
}
#overlay_menu .overlay_menu_wrap {
height: calc( 100vh - 180px );
height: calc(100vh - 180px);
}
/* ユーザー追加 */
......@@ -163,11 +185,11 @@
}
#add_user_list .user_list li {
list-style: none;
border-bottom: 1px solid #E2E8F0;
border-bottom: 1px solid #e2e8f0;
position: relative;
}
#add_user_list .user_list li:first-child {
border-top: 1px solid #E2E8F0;
border-top: 1px solid #e2e8f0;
}
#add_user_list .chat_item_ttl {
font-weight: bold;
......@@ -196,7 +218,7 @@
#add_user_list .checkbox-parts::before {
display: block;
position: absolute;
border: 2px solid #0070CA;
border: 2px solid #0070ca;
content: "";
width: 40px;
height: 40px;
......@@ -220,7 +242,7 @@
bottom: 0;
left: 0;
margin: auto;
background: #0070CA;
background: #0070ca;
border-radius: 50%;
}
#add_user_list .user_item_l {
......@@ -243,7 +265,7 @@
}
/**************************** zoomin zoomout *************************/
.s_ac .img_wrap{
.s_ac .img_wrap {
width: 40px;
height: 40px;
border-radius: 5px;
......@@ -251,7 +273,7 @@
line-height: 36px;
text-align: center;
}
.s_ac .img_wrap img{
.s_ac .img_wrap img {
width: 35px;
height: 35px;
}
......@@ -259,7 +281,7 @@
position: fixed;
top: 60px;
z-index: 2;
height: calc( 100% - 180px );
height: calc(100% - 180px);
}
.s_ac_c {
margin: auto 0;
......@@ -292,26 +314,26 @@
}
/**************************** footer *************************/
#collabo_footer{
#collabo_footer {
max-width: 1280px;
background: #1D1D1D;
background: #1d1d1d;
height: 120px;
margin-top: 20px;
position: fixed;
bottom: 0;
width: 100%;
border:none;
border: none;
z-index: 10;
}
#collabo_footer .footer-wrap{
#collabo_footer .footer-wrap {
margin: 0 auto;
height: 100%;
max-width: 300px;
}
#collabo_footer .footer_item a{
#collabo_footer .footer_item a {
display: inline-block;
}
#collabo_footer .img_wrap{
#collabo_footer .img_wrap {
width: 60px;
height: 60px;
border-radius: 50%;
......@@ -320,7 +342,7 @@
/**************************** footer-menu *************************/
#collabo_footer_menu {
transition: .7s;
transition: 0.7s;
max-width: 1280px;
height: 70px;
position: fixed;
......@@ -330,12 +352,12 @@
bottom: 120px;
z-index: 3;
}
#collabo_footer_menu.hide{
transition: .7s;
#collabo_footer_menu.hide {
transition: 0.7s;
}
#collabo_footer_menu .footer_menu_btn{
#collabo_footer_menu .footer_menu_btn {
background-color: white;
border: 1px solid #7A7A7A;
border: 1px solid #7a7a7a;
border-radius: 5px 5px 0 0;
width: 80px;
height: 40px;
......@@ -345,12 +367,12 @@
position: absolute;
bottom: 70px;
}
#collabo_footer_menu .footer_menu_btn.hide{
#collabo_footer_menu .footer_menu_btn.hide {
background-image: url(../icon/icon_arrow_up.png);
}
#collabo_footer_menu .footer_menu-wrap {
background: #1D1D1D;
height: 40px;
background: #1d1d1d;
height: 40px;
}
#collabo_footer_menu .footer_menu_item .img_wrap {
......@@ -371,11 +393,11 @@
color: #fff;
}
@media screen and (max-width: 768px){
#add_user_list .user_item_ttl{
@media screen and (max-width: 768px) {
#add_user_list .user_item_ttl {
font-size: 16px;
}
#add_user_list .user_item_ttl{
#add_user_list .user_item_ttl {
font-size: 16px;
}
#add_user_list .user_item_m {
......
public_new/css/common.css
@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
body{
body {
max-width: 1280px;
font-family: 'Noto Sans JP', sans-serif;
font-family: "Noto Sans JP", sans-serif;
margin: 0 auto;
color: #323743;
margin-bottom: 60px;
overflow-x: hidden;
}
a:hover{ text-decoration: none; }
.none{ display: none!important;}
a:hover {
text-decoration: none;
}
.none {
display: none !important;
}
/**************************** nav *************************/
nav{
nav {
max-width: 1280px;
height: 60px;
position: fixed;
top: 0;
width: 100%;
border-bottom: 1px solid #CDCDCD;
border-bottom: 1px solid #cdcdcd;
background: #fff;
z-index: 2;
}
main{ margin-top: 60px; }
.nav-item{ padding: 0 10px; }
.nav-ttl{
main {
margin-top: 60px;
}
.nav-item {
padding: 0 10px;
}
.nav-ttl {
text-align: center;
font-size: 20px;
font-weight: bold;
......@@ -33,34 +41,36 @@ main{ margin-top: 60px; }
overflow: hidden;
text-overflow: ellipsis;
}
.nav_prev a{
.nav_prev a {
color: #323743;
display: inline-block;
}
.nav_prev a:before{
.nav_prev a:before {
content: "\f053";
font: 16px FontAwesome;
color: #323743;
margin-right: 5px;
}
.fas.fa-chevron-left{ margin-right: 10px;}
.fas.fa-chevron-left {
margin-right: 10px;
}
/**************************** search form *************************/
.search_form input {
padding-left: 10px;
width: 100%;
border: 1px solid #BDBDBD;
border: 1px solid #bdbdbd;
border-radius: 5px;
height: 40px;
margin: 10px 0;
padding-left: 35px;
}
.search_form{
.search_form {
position: relative;
margin: 0 5px;
}
.search_form .src_icon{
.search_form .src_icon {
position: absolute;
top: 23px;
left: 10px;
......@@ -69,14 +79,15 @@ main{ margin-top: 60px; }
width: 16px;
height: 16px;
}
.chat_room_src_form.none{
display: none!important;
.chat_room_src_form.none {
display: none !important;
}
.search_form input.focus{
width: calc( 100% - 100px );
.search_form input.focus {
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;
outline: 0;
box-shadow: 0 0 0 0.2rem rgb(0 83 240 / 25%);
......@@ -85,31 +96,51 @@ main{ margin-top: 60px; }
width: 100px;
font-size: 14px;
padding: 0 10px;
color: #8F8F8F;
color: #8f8f8f;
text-align: center;
}
/**************************** color *************************/
.bg_gray{ background: #f3f3f3; }
.bg_blue{ background: #0070CA; }
.bg_navy{ background: #1D3557; }
.bg_red{ background: #ff4747; }
.bg_green{ background: #89E54D; }
.bg_white{ background: #fff;}
.border_gray{ border:1px solid #dadce0; }
.text_blue{ color: #0070CA; }
.text_white{ color: #fff; }
.bg_gray {
background: #f3f3f3;
}
.bg_blue {
background: #0070ca;
}
.bg_navy {
background: #1d3557;
}
.bg_red {
background: #ff4747;
}
.bg_green {
background: #89e54d;
}
.bg_white {
background: #fff;
}
.border_gray {
border: 1px solid #dadce0;
}
.text_blue {
color: #0070ca;
}
.text_white {
color: #fff;
}
/**************************** modal *************************/
/* プロフィールモーダル */
.profile_modal .modal-footer button{
.profile_modal .modal-footer button {
color: #fff;
border-radius: 10px;
min-width: 100px;
font-size: 14px;
}
.profile_modal .modal-footer button img{ width: 30px; height: 30px; }
.profile_modal .modal-footer button img {
width: 30px;
height: 30px;
}
.profile_modal .modal-body p {
max-height: 200px;
overflow-y: scroll;
......@@ -119,26 +150,37 @@ main{ margin-top: 60px; }
height: 60px;
border-radius: 50%;
}
.profile_modal .modal-header,.profile_modal .modal-body { padding-bottom: 0; }
.profile_modal .modal-footer button { width: 33%; padding: 5px;}
.profile_modal.w_50 .modal-footer button { width: 50%; padding: 5px;}
.profile_modal .modal-header .prifile_desc{ width: 100%;}
.profile_modal .modal-header,
.profile_modal .modal-body {
padding-bottom: 0;
}
.profile_modal .modal-footer button {
width: 33%;
padding: 5px;
}
.profile_modal.w_50 .modal-footer button {
width: 50%;
padding: 5px;
}
.profile_modal .modal-header .prifile_desc {
width: 100%;
}
.profile_modal .modal-header .prifile_name {
width: 100%;
text-align: center;
}
.profile_modal .modal-header .prifile_name span {
line-height: 60px;
font-weight: bold;
font-size: 20px;
line-height: 60px;
font-weight: bold;
font-size: 20px;
}
@media screen and (max-width: 768px){
@media screen and (max-width: 768px) {
/* navi */
.nav-ttl{
.nav-ttl {
font-size: 16px;
}
.nav_prev a span{
.nav_prev a span {
font-size: 16px;
}
/* search form */
......
public_new/css/contact.css
@charset "UTF-8";
.breadcrumb{
.breadcrumb {
margin-bottom: 0;
white-space: nowrap;
overflow-x: scroll;
display: block;
}
.breadcrumb_item:not(:last-child):after {
content: '>';
content: ">";
margin: 0 5px;
}
.breadcrumb_item {
......
public_new/css/footer.css
@charset "UTF-8";
/**************************** footer *************************/
footer{
footer {
max-width: 1280px;
background: #F9F9F9;
background: #f9f9f9;
height: 70px;
margin-top: 20px;
border-top: 1px solid #CCCCCC;
border-top: 1px solid #cccccc;
position: fixed;
bottom: 0;
width: 100%;
}
footer .footer-wrap{
footer .footer-wrap {
margin: 0 auto;
height: 100%;
}
footer .footer_item{
footer .footer_item {
text-align: center;
margin: auto 0;
}
......@@ -23,7 +23,7 @@ footer .footer_item .unread_num {
position: absolute;
top: -5px;
right: -3px;
background: #FF4747;
background: #ff4747;
color: #fff;
padding: 0 7px;
min-width: 20px;
......@@ -33,23 +33,23 @@ footer .footer_item .unread_num {
border-radius: 15px;
}
footer .footer_item p{
footer .footer_item p {
font-size: 16px;
color: #707070;
font-weight: bold;
margin:0;
margin: 0;
}
footer .footer_item .active{
color: #0070CA;
footer .footer_item .active {
color: #0070ca;
font-weight: bold;
}
footer .footer_item a{
footer .footer_item a {
display: inline-block;
position: relative;
}
@media screen and (max-width: 768px){
footer .footer_item p{
@media screen and (max-width: 768px) {
footer .footer_item p {
font-size: 12px;
}
}
public_new/css/loading.css
......@@ -8,7 +8,7 @@
height: 100%;
top: 0px;
left: 0px;
background: rgb(255,255,255,0.5);
background: rgb(255, 255, 255, 0.5);
z-index: 2;
}
#loader {
......@@ -24,6 +24,6 @@
color: #fff;
z-index: 999;
}
.fa.fa-circle-o-notch{
.fa.fa-circle-o-notch {
color: #707070;
}
public_new/footer_collabo.html
......@@ -24,4 +24,4 @@
</div>
</div>
</div>
</footer>
</footer>
\ No newline at end of file
public_new/js/archive.js
$(function() {
$(function () {
// アーカイブ検索
$('#archive .search_form input[type="search"]').keyup(function(){
$('#archive .search_form input[type="search"]').keyup(function () {
$.ajax({
url: 'search_message_archive_list.html',
type: 'POST',
datatype: 'html'
url: "search_message_archive_list.html",
type: "POST",
datatype: "html",
}).done(function (data) {
$('.overlay_src_msg').html(data);
})
$(".overlay_src_msg").html(data);
});
});
});
public_new/js/chat.js
$(function() {
$(function () {
// ルーム開設メンバー数カウント
$('input:checkbox').change(function() {
if($(this).prop('checked')){
$(this).attr('checked', true);
}else{
$(this).removeAttr('checked');
}
}).trigger('change');
$("input:checkbox")
.change(function () {
if ($(this).prop("checked")) {
$(this).attr("checked", true);
} else {
$(this).removeAttr("checked");
}
})
.trigger("change");
// チェックした人数カウント
$('input:checkbox').change(function() {
var cnt = $('.checkbox input:checkbox:checked').length;
$('.select_member_num').text(cnt);
}).trigger('change');
$("input:checkbox")
.change(function () {
var cnt = $(".checkbox input:checkbox:checked").length;
$(".select_member_num").text(cnt);
})
.trigger("change");
// ルーム人数選択確認イベント
$('.make_room_btn button').click(function(){
$('form').submit();
$(".make_room_btn button").click(function () {
$("form").submit();
});
// ルーム人数選択イベント
$('.make_room_confirm_btn button').click(function(){
$('form').submit();
$(".make_room_confirm_btn button").click(function () {
$("form").submit();
});
// ユーザー追加確認イベント
$('.add_user_confirm_btn button').click(function(){
$('form').submit();
$(".add_user_confirm_btn button").click(function () {
$("form").submit();
});
// ユーザー追加イベント
$('.add_user_btn button').click(function(){
$('form').submit();
$(".add_user_btn button").click(function () {
$("form").submit();
});
// ルーム名変更イベント
$('.change_room_name_btn button').click(function(){
$('form').submit();
$(".change_room_name_btn button").click(function () {
$("form").submit();
});
// 検索アイコン押下イベント
$('.nav_item_wrap .search_menu').click(function(){
$('.nav_item_wrap').addClass('none');
$('.chat_room_src_form').removeClass('none');
$('.room_container').addClass('none');
$('.overlay_src_msg').removeClass('none');
$(".nav_item_wrap .search_menu").click(function () {
$(".nav_item_wrap").addClass("none");
$(".chat_room_src_form").removeClass("none");
$(".room_container").addClass("none");
$(".overlay_src_msg").removeClass("none");
// フィルタ表示
$('#filter').removeClass('none');
$('#user_list').addClass('none');
$("#filter").removeClass("none");
$("#user_list").addClass("none");
});
$('.chat_room_src_form .cancel').click(function(){
$('.nav_item_wrap').removeClass('none');
$('.chat_room_src_form').addClass('none');
$('.chat_room_src_form input').val('');
$('.room_container').removeClass('none');
$('.overlay_src_msg').empty();
$(".chat_room_src_form .cancel").click(function () {
$(".nav_item_wrap").removeClass("none");
$(".chat_room_src_form").addClass("none");
$(".chat_room_src_form input").val("");
$(".room_container").removeClass("none");
$(".overlay_src_msg").empty();
// ユーザーリスト表示
$('#filter').addClass('none');
$('#user_list').removeClass('none');
$("#filter").addClass("none");
$("#user_list").removeClass("none");
});
// フィルタ選択イベント
$('#filter .img_wrap').click(function(){
$("#filter .img_wrap").click(function () {
// チェックアイコン追加
$(this).toggleClass("filter");
});
// チャットメンバー検索
$('#chat .search_form input[type="search"]').keyup(function(){
$('#chat .search_form input[type="search"]').keyup(function () {
$.ajax({
url: 'search_message_user_list.html',
type: 'POST',
datatype: 'html'
url: "search_message_user_list.html",
type: "POST",
datatype: "html",
}).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({
url: 'search_message_user_list.html',
type: 'POST',
datatype: 'html'
url: "search_message_user_list.html",
type: "POST",
datatype: "html",
}).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({
url: 'search_message_user_list.html',
type: 'POST',
datatype: 'html'
url: "search_message_user_list.html",
type: "POST",
datatype: "html",
}).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({
url: 'search_message.html',
type: 'POST',
datatype: 'html'
url: "search_message.html",
type: "POST",
datatype: "html",
}).done(function (data) {
$('.overlay_src_msg').html(data);
})
$(".overlay_src_msg").html(data);
});
});
});
public_new/js/collaboration.js
$(function() {
$(function () {
// メニューオーバーレイ表示
$(".menu_btn").click(function() {
$(".menu_btn").click(function () {
var w = $(this).width();
$(this).toggleClass('hide');
$('#overlay_menu.overlay').toggleClass('slidein').css({'transform': 'translateX('& -w &')'});
$('#collabo_main').toggleClass('noscroll');
$(this).toggleClass("hide");
$("#overlay_menu.overlay")
.toggleClass("slidein")
.css({ transform: "translateX(" & -w & ")" });
$("#collabo_main").toggleClass("noscroll");
// 他のボタンを非表示
$('.user_btn').toggleClass('none');
$('.add_user_btn').toggleClass('none');
$(".user_btn").toggleClass("none");
$(".add_user_btn").toggleClass("none");
});
// ユーザーリストオーバーレイ表示
$(".user_btn").click(function() {
$(".user_btn").click(function () {
var w = $(this).width();
$(this).toggleClass('hide');
$('#overlay_user_list.overlay').toggleClass('slidein').css({'transform': 'translateX('& -w &')'});
$('#collabo_main').toggleClass('noscroll');
$(this).toggleClass("hide");
$("#overlay_user_list.overlay")
.toggleClass("slidein")
.css({ transform: "translateX(" & -w & ")" });
$("#collabo_main").toggleClass("noscroll");
// 他のボタンを非表示
$('.add_user_btn').toggleClass('none');
$('.menu_btn').toggleClass('none');
if($('#overlay_user_list.overlay').hasClass('noscroll')){
$('#overlay_user_list.overlay').removeClass('noscroll');
}else{
$('#overlay_user_list.overlay').addClass('noscroll');
$(".add_user_btn").toggleClass("none");
$(".menu_btn").toggleClass("none");
if ($("#overlay_user_list.overlay").hasClass("noscroll")) {
$("#overlay_user_list.overlay").removeClass("noscroll");
} else {
$("#overlay_user_list.overlay").addClass("noscroll");
}
});
// フッターメニュー　アコーディオン
$('.footer_menu_btn').click(function() {
var h_active = $('#collabo_footer').height();
var h_hide = h_active - $('#collabo_footer_menu').height();
$(".footer_menu_btn").click(function () {
var h_active = $("#collabo_footer").height();
var h_hide = h_active - $("#collabo_footer_menu").height();
// 非アクティブ時
if($(this).hasClass('hide')){
$(this).removeClass('hide');
$('#collabo_footer_menu').css({'bottom': h_active });
// アクティブ時
}else{
$(this).addClass('hide');
$('#collabo_footer_menu').css({'bottom': h_hide });
if ($(this).hasClass("hide")) {
$(this).removeClass("hide");
$("#collabo_footer_menu").css({ bottom: h_active });
// アクティブ時
} else {
$(this).addClass("hide");
$("#collabo_footer_menu").css({ bottom: h_hide });
}
});
// モーダルonモーダル（前のモーダルを非表示に）
// ホスト変更ボタン押下イベント
$('.ch_host_btn').click(function() {
$(".ch_host_btn").click(function () {
var target = $(this).val();
changeModal(target, 'changeHostModal');
changeModal(target, "changeHostModal");
});
/* モーダルの切り替え */
function changeModal(beforeModal, afterModal) {
$(beforeModal).modal( 'hide' );
$(afterModal).modal('show');
$(beforeModal).modal("hide");
$(afterModal).modal("show");
}
// 閉じるイベント
$('.close_btn').click(function() {
$('#overlay_add_user_list').addClass('none');
$(".close_btn").click(function () {
$("#overlay_add_user_list").addClass("none");
});
// ユーザー追加イベント
$('.inv_btn').click(function() {
$('#overlay_add_user_list').addClass('none');
$(".inv_btn").click(function () {
$("#overlay_add_user_list").addClass("none");
});
// ユーザー招待メンバー検索
$('.add_user_btn').click(function(){
$('#overlay_add_user_list').removeClass('none');
$(".add_user_btn").click(function () {
$("#overlay_add_user_list").removeClass("none");
$.ajax({
url: 'collaboration_overlay_add_user_list.html',
type: 'POST',
datatype: 'html'
url: "collaboration_overlay_add_user_list.html",
type: "POST",
datatype: "html",
}).done(function (data) {
$('#add_user_list').html(data);
})
$("#add_user_list").html(data);
});
});
});
public_new/js/common.js
$(function() {
$(function () {
var h = $(window).height(); //画面の高さを取得
// アコーディオン
$('.category').click(function() {
$(this).toggleClass("open");
$(this).next().slideToggle();
$(".category").click(function () {
$(this).toggleClass("open");
$(this).next().slideToggle();
});
// ローディング表示
$('footer a').click(function(event){
$("footer a").click(function (event) {
const a = $(this);
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;
}, 1000);
});
// お気に入りボタン押下イベント
$('.star').click(function(){
if($(this).hasClass('active')){
$(this).removeClass('active');
$(this).addClass('disable');
}else{
$(this).removeClass('disable');
$(this).addClass('active');
$(".star").click(function () {
if ($(this).hasClass("active")) {
$(this).removeClass("active");
$(this).addClass("disable");
} else {
$(this).removeClass("disable");
$(this).addClass("active");
}
});
// 共通検索フォーム　キャンセルボタン表示
$('.search_form input[type="search"]').click(function(){
$(this).addClass('focus');
$('.search_form input[type="search"]').click(function () {
$(this).addClass("focus");
// キャンセルボタン表示
$('.cancel').removeClass('none');
$('.search_form form').addClass('d-flex flex-row h-100 align-items-center');
$('.content').addClass('none');
$(".cancel").removeClass("none");
$(".search_form form").addClass("d-flex flex-row h-100 align-items-center");
$(".content").addClass("none");
});
// 共通検索フォーム　キャンセルボタン押下イベント
$('.search_form .cancel').click(function(){
$(this).addClass('none');
$('.search_form input').removeClass('focus');
$('.search_form input').val('');
$('.search_form form').removeClass();
$('.content').removeClass('none');
$('.overlay_src_msg').empty();
$(".search_form .cancel").click(function () {
$(this).addClass("none");
$(".search_form input").removeClass("focus");
$(".search_form input").val("");
$(".search_form form").removeClass();
$(".content").removeClass("none");
$(".overlay_src_msg").empty();
});
});
public_new/js/constant.js
......@@ -2,17 +2,17 @@
* Constant定義ファイル
*/
const readyState = {
UNINITIALIZED : 0 ,
LOADING : 1 ,
LOADED : 2 ,
INTERACTIVE : 3 ,
COMPLETED : 4
}
UNINITIALIZED: 0,
LOADING: 1,
LOADED: 2,
INTERACTIVE: 3,
COMPLETED: 4,
};
const messageType = {
TEXT : 0 ,
IMAGE : 1 ,
VIDEO : 2 ,
SYSTEM : 3 ,
COMMUNICATION : 4
}
TEXT: 0,
IMAGE: 1,
VIDEO: 2,
SYSTEM: 3,
COMMUNICATION: 4,
};
public_new/js/contact.js
$(function() {
$(function () {
// メンバー検索
$('#contact .search_form input[type="search"]').keyup(function(){
$('#contact .search_form input[type="search"]').keyup(function () {
$.ajax({
url: 'search_message_user_list.html',
type: 'POST',
datatype: 'html'
url: "search_message_user_list.html",
type: "POST",
datatype: "html",
}).done(function (data) {
$('.overlay_src_msg').html(data);
})
$(".overlay_src_msg").html(data);
});
});
});
public_new/js/libs/jquery-ui-dialog/index.html
<!doctype html>
<html lang="us">
<head>
<meta charset="utf-8">
<title>jQuery UI Example Page</title>
<link href="jquery-ui.css" rel="stylesheet">
<style>
body{
font-family: "Trebuchet MS", sans-serif;
margin: 50px;
}
.demoHeaders {
margin-top: 2em;
}
#dialog-link {
padding: .4em 1em .4em 20px;
text-decoration: none;
position: relative;
}
#dialog-link span.ui-icon {
margin: 0 5px 0 0;
position: absolute;
left: .2em;
top: 50%;
margin-top: -8px;
}
#icons {
margin: 0;
padding: 0;
}
#icons li {
margin: 2px;
position: relative;
padding: 4px 0;
cursor: pointer;
float: left;
list-style: none;
}
#icons span.ui-icon {
float: left;
margin: 0 4px;
}
.fakewindowcontain .ui-widget-overlay {
position: absolute;
}
select {
width: 200px;
}
</style>
</head>
<body>
<h1>Welcome to jQuery UI!</h1>
body {
font-family: "Trebuchet MS", sans-serif;
margin: 50px;
}
<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>
.demoHeaders {
margin-top: 2em;
}
<h1>YOUR COMPONENTS:</h1>
#dialog-link {
padding: .4em 1em .4em 20px;
text-decoration: none;
position: relative;
}
#dialog-link span.ui-icon {
margin: 0 5px 0 0;
position: absolute;
left: .2em;
top: 50%;
margin-top: -8px;
}
#icons {
margin: 0;
padding: 0;
}
#icons li {
margin: 2px;
position: relative;
padding: 4px 0;
cursor: pointer;
float: left;
list-style: none;
}
#icons span.ui-icon {
float: left;
margin: 0 4px;
}
.fakewindowcontain .ui-widget-overlay {
position: absolute;
}
<!-- Button -->
<h2 class="demoHeaders">Button</h2>
<button id="button">A button element</button>
<button id="button-icon">An icon-only button</button>
select {
width: 200px;
}
</style>
</head>
<body>
<h1>Welcome to jQuery UI!</h1>
<!-- Checkboxradio -->
<h2 class="demoHeaders">Checkboxradio</h2>
<form style="margin-top: 1em;">
<div id="radioset">
<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="radio3" name="radio"><label for="radio3">Choice 3</label>
<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>
</form>
<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 -->
<h2 class="demoHeaders">Checkboxradio</h2>
<form style="margin-top: 1em;">
<div id="radioset">
<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="radio3" name="radio"><label for="radio3">Choice 3</label>
</div>
</form>
<!-- Controlgroup -->
<h2 class="demoHeaders">Controlgroup</h2>
<fieldset>
<legend>Rental Car</legend>
<div id="controlgroup">
<select id="car-type">
<option>Compact car</option>
<option>Midsize car</option>
<option>Full size car</option>
<option>SUV</option>
<option>Luxury</option>
<option>Truck</option>
<option>Van</option>
</select>
<label for="transmission-standard">Standard</label>
<input type="radio" name="transmission" id="transmission-standard">
<label for="transmission-automatic">Automatic</label>
<input type="radio" name="transmission" id="transmission-automatic">
<label for="insurance">Insurance</label>
<input type="checkbox" name="insurance" id="insurance">
<label for="horizontal-spinner" class="ui-controlgroup-label"># of cars</label>
<input id="horizontal-spinner" class="ui-spinner-input">
<button>Book Now!</button>
</div>
</fieldset>
<h2 class="demoHeaders">Dialog</h2>
<p>
<button id="dialog-link" class="ui-button ui-corner-all ui-widget">
<span class="ui-icon ui-icon-newwin"></span>Open Dialog
</button>
</p>
<h2 class="demoHeaders">Overlay and Shadow Classes</h2>
<div style="position: relative; width: 96%; height: 200px; padding:1% 2%; overflow:hidden;"
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 -->
<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">
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>
<!-- Controlgroup -->
<h2 class="demoHeaders">Controlgroup</h2>
<fieldset>
<legend>Rental Car</legend>
<div id="controlgroup">
<select id="car-type">
<option>Compact car</option>
<option>Midsize car</option>
<option>Full size car</option>
<option>SUV</option>
<option>Luxury</option>
<option>Truck</option>
<option>Van</option>
</select>
<label for="transmission-standard">Standard</label>
<input type="radio" name="transmission" id="transmission-standard">
<label for="transmission-automatic">Automatic</label>
<input type="radio" name="transmission" id="transmission-automatic">
<label for="insurance">Insurance</label>
<input type="checkbox" name="insurance" id="insurance">
<label for="horizontal-spinner" class="ui-controlgroup-label"># of cars</label>
<input id="horizontal-spinner" class="ui-spinner-input">
<button>Book Now!</button>
</div>
</fieldset>
<h2 class="demoHeaders">Dialog</h2>
<p>
<button id="dialog-link" class="ui-button ui-corner-all ui-widget">
<span class="ui-icon ui-icon-newwin"></span>Open Dialog
</button>
</p>
<h2 class="demoHeaders">Overlay and Shadow Classes</h2>
<div style="position: relative; width: 96%; height: 200px; padding:1% 2%; overflow:hidden;" 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 -->
<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">
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 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>
</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>
<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-ne"><span class="ui-icon ui-icon-caret-1-ne"></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-se"><span class="ui-icon ui-icon-caret-1-se"></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-sw"><span class="ui-icon ui-icon-caret-1-sw"></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-nw"><span class="ui-icon ui-icon-caret-1-nw"></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-2-e-w"><span class="ui-icon ui-icon-caret-2-e-w"></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-triangle-1-ne"><span class="ui-icon ui-icon-triangle-1-ne"></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-triangle-1-se"><span class="ui-icon ui-icon-triangle-1-se"></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-triangle-1-sw"><span class="ui-icon ui-icon-triangle-1-sw"></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-triangle-1-nw"><span class="ui-icon ui-icon-triangle-1-nw"></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-triangle-2-e-w"><span class="ui-icon ui-icon-triangle-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-arrow-1-ne"><span class="ui-icon ui-icon-arrow-1-ne"></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-arrow-1-se"><span class="ui-icon ui-icon-arrow-1-se"></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-arrow-1-sw"><span class="ui-icon ui-icon-arrow-1-sw"></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-arrow-1-nw"><span class="ui-icon ui-icon-arrow-1-nw"></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-arrow-2-ne-sw"><span class="ui-icon ui-icon-arrow-2-ne-sw"></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-arrow-2-se-nw"><span class="ui-icon ui-icon-arrow-2-se-nw"></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-arrowstop-1-e"><span class="ui-icon ui-icon-arrowstop-1-e"></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-arrowstop-1-w"><span class="ui-icon ui-icon-arrowstop-1-w"></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-arrowthick-1-ne"><span 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-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-mail-open"><span class="ui-icon ui-icon-mail-open"></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-comment"><span class="ui-icon ui-icon-comment"></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-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-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-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-pencil"><span class="ui-icon ui-icon-pencil"></span></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-calendar"><span class="ui-icon ui-icon-calendar"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-zoomin"><span class="ui-icon ui-icon-zoomin"></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-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-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-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-minus"><span class="ui-icon ui-icon-minus"></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-lightbulb"><span class="ui-icon ui-icon-lightbulb"></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-contact"><span class="ui-icon ui-icon-contact"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-image"><span class="ui-icon ui-icon-image"></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-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-check"><span class="ui-icon ui-icon-check"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-bullet"><span class="ui-icon ui-icon-bullet"></span></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-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-pause"><span class="ui-icon ui-icon-pause"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-next"><span class="ui-icon ui-icon-seek-next"></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-eject"><span class="ui-icon ui-icon-eject"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-volume-off"><span class="ui-icon ui-icon-volume-off"></span></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-power"><span class="ui-icon ui-icon-power"></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-signal"><span class="ui-icon ui-icon-signal"></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-battery-1"><span class="ui-icon ui-icon-battery-1"></span></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-battery-3"><span class="ui-icon ui-icon-battery-3"></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-circle-minus"><span class="ui-icon ui-icon-circle-minus"></span></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-circle-triangle-e"><span class="ui-icon ui-icon-circle-triangle-e"></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-circle-triangle-w"><span class="ui-icon ui-icon-circle-triangle-w"></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-circle-arrow-e"><span class="ui-icon ui-icon-circle-arrow-e"></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-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>
<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-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;">
<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
<strong>Hey!</strong> Sample ui-state-highlight style.</p>
<h2 class="demoHeaders">Framework Icons (content color preview)</h2>
<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-ne"><span
class="ui-icon ui-icon-caret-1-ne"></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-se"><span
class="ui-icon ui-icon-caret-1-se"></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-sw"><span
class="ui-icon ui-icon-caret-1-sw"></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-nw"><span
class="ui-icon ui-icon-caret-1-nw"></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-2-e-w"><span
class="ui-icon ui-icon-caret-2-e-w"></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-triangle-1-ne"><span
class="ui-icon ui-icon-triangle-1-ne"></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-triangle-1-se"><span
class="ui-icon ui-icon-triangle-1-se"></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-triangle-1-sw"><span
class="ui-icon ui-icon-triangle-1-sw"></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-triangle-1-nw"><span
class="ui-icon ui-icon-triangle-1-nw"></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-triangle-2-e-w"><span
class="ui-icon ui-icon-triangle-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-arrow-1-ne"><span
class="ui-icon ui-icon-arrow-1-ne"></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-arrow-1-se"><span
class="ui-icon ui-icon-arrow-1-se"></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-arrow-1-sw"><span
class="ui-icon ui-icon-arrow-1-sw"></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-arrow-1-nw"><span
class="ui-icon ui-icon-arrow-1-nw"></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-arrow-2-ne-sw"><span
class="ui-icon ui-icon-arrow-2-ne-sw"></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-arrow-2-se-nw"><span
class="ui-icon ui-icon-arrow-2-se-nw"></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-arrowstop-1-e"><span
class="ui-icon ui-icon-arrowstop-1-e"></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-arrowstop-1-w"><span
class="ui-icon ui-icon-arrowstop-1-w"></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-arrowthick-1-ne"><span
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-mail-closed"><span
class="ui-icon ui-icon-mail-closed"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-mail-open"><span
class="ui-icon ui-icon-mail-open"></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-comment"><span
class="ui-icon ui-icon-comment"></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-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-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-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-pencil"><span class="ui-icon ui-icon-pencil"></span>
</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-calendar"><span
class="ui-icon ui-icon-calendar"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-zoomin"><span class="ui-icon ui-icon-zoomin"></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-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-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-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-minus"><span class="ui-icon ui-icon-minus"></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-lightbulb"><span
class="ui-icon ui-icon-lightbulb"></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-contact"><span
class="ui-icon ui-icon-contact"></span></li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-image"><span class="ui-icon ui-icon-image"></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-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-check"><span class="ui-icon ui-icon-check"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-bullet"><span class="ui-icon ui-icon-bullet"></span>
</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-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-pause"><span class="ui-icon ui-icon-pause"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-seek-next"><span
class="ui-icon ui-icon-seek-next"></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-eject"><span class="ui-icon ui-icon-eject"></span>
</li>
<li class="ui-state-default ui-corner-all" title=".ui-icon-volume-off"><span
class="ui-icon ui-icon-volume-off"></span></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-power"><span class="ui-icon ui-icon-power"></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-signal"><span class="ui-icon ui-icon-signal"></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-battery-1"><span
class="ui-icon ui-icon-battery-1"></span></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-battery-3"><span
class="ui-icon ui-icon-battery-3"></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-circle-minus"><span
class="ui-icon ui-icon-circle-minus"></span></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-circle-triangle-e"><span
class="ui-icon ui-icon-circle-triangle-e"></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-circle-triangle-w"><span
class="ui-icon ui-icon-circle-triangle-w"></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-circle-arrow-e"><span
class="ui-icon ui-icon-circle-arrow-e"></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-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>
<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-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;">
<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
<strong>Hey!</strong> Sample ui-state-highlight style.
</p>
</div>
</div>
</div>
<br>
<div class="ui-widget">
<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>
<strong>Alert:</strong> Sample ui-state-error style.</p>
<br>
<div class="ui-widget">
<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>
<strong>Alert:</strong> Sample ui-state-error style.
</p>
</div>
</div>
</div>
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.js"></script>
<script>
$( "#button" ).button();
$( "#button-icon" ).button({
icon: "ui-icon-gear",
showLabel: false
});
$( "#radioset" ).buttonset();
$( "#controlgroup" ).controlgroup();
$( "#dialog" ).dialog({
autoOpen: false,
width: 400,
buttons: [
{
text: "Ok",
click: function() {
$( this ).dialog( "close" );
}
},
{
text: "Cancel",
click: function() {
$( this ).dialog( "close" );
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.js"></script>
<script>
$("#button").button();
$("#button-icon").button({
icon: "ui-icon-gear",
showLabel: false
});
$("#radioset").buttonset();
$("#controlgroup").controlgroup();
$("#dialog").dialog({
autoOpen: false,
width: 400,
buttons: [
{
text: "Ok",
click: function () {
$(this).dialog("close");
}
},
{
text: "Cancel",
click: function () {
$(this).dialog("close");
}
}
]
});
// Link to open the dialog
$("#dialog-link").click(function (event) {
$("#dialog").dialog("open");
event.preventDefault();
});
// Hover states on the static widgets
$("#dialog-link, #icons li").hover(
function () {
$(this).addClass("ui-state-hover");
},
function () {
$(this).removeClass("ui-state-hover");
}
}
]
});
// Link to open the dialog
$( "#dialog-link" ).click(function( event ) {
$( "#dialog" ).dialog( "open" );
event.preventDefault();
});
// Hover states on the static widgets
$( "#dialog-link, #icons li" ).hover(
function() {
$( this ).addClass( "ui-state-hover" );
},
function() {
$( this ).removeClass( "ui-state-hover" );
}
);
</script>
);
</script>
</body>
</html>
</html>
\ No newline at end of file
public_new/js/libs/locale/ja.js
//! moment.js locale configuration
;(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined'
&& typeof require === 'function' ? factory(require('../moment')) :
typeof define === 'function' && define.amd ? define(['../moment'], factory) :
factory(global.moment)
}(this, (function (moment) { 'use strict';
(function (global, factory) {
typeof exports === "object" &&
typeof module !== "undefined" &&
typeof require === "function"
? factory(require("../moment"))
: typeof define === "function" && define.amd
? define(["../moment"], factory)
: factory(global.moment);
})(this, function (moment) {
"use strict";
var ja = moment.defineLocale('ja', {
months : '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'),
monthsShort : '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'),
weekdays : '日曜日_月曜日_火曜日_水曜日_木曜日_金曜日_土曜日'.split('_'),
weekdaysShort : '日_月_火_水_木_金_土'.split('_'),
weekdaysMin : '日_月_火_水_木_金_土'.split('_'),
longDateFormat : {
LT : 'HH:mm',
LTS : 'HH:mm:ss',
L : 'YYYY/MM/DD',
LL : 'YYYY年M月D日',
LLL : 'YYYY年M月D日 HH:mm',
LLLL : 'YYYY年M月D日 dddd 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,
isPM : function (input) {
return input === '午後';
},
meridiem : function (hour, minute, isLower) {
if (hour < 12) {
return '午前';
} else {
return '午後';
}
},
calendar : {
sameDay : '[今日] LT',
nextDay : '[明日] LT',
nextWeek : function (now) {
if (now.week() < this.week()) {
return '[来週]dddd LT';
} else {
return 'dddd LT';
}
},
lastDay : '[昨日] LT',
lastWeek : function (now) {
if (this.week() < now.week()) {
return '[先週]dddd LT';
} else {
return 'dddd LT';
}
},
sameElse : 'L'
},
dayOfMonthOrdinalParse : /\d{1,2}日/,
ordinal : function (number, period) {
switch (period) {
case 'd':
case 'D':
case 'DDD':
return number + '日';
default:
return number;
}
},
relativeTime : {
future : '%s後',
past : '%s前',
s : '数秒',
ss : '%d秒',
m : '1分',
mm : '%d分',
h : '1時間',
hh : '%d時間',
d : '1日',
dd : '%d日',
M : '1ヶ月',
MM : '%dヶ月',
y : '1年',
yy : '%d年'
var ja = moment.defineLocale("ja", {
months: "一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月".split(
"_"
),
monthsShort: "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月".split(
"_"
),
weekdays: "日曜日_月曜日_火曜日_水曜日_木曜日_金曜日_土曜日".split("_"),
weekdaysShort: "日_月_火_水_木_金_土".split("_"),
weekdaysMin: "日_月_火_水_木_金_土".split("_"),
longDateFormat: {
LT: "HH:mm",
LTS: "HH:mm:ss",
L: "YYYY/MM/DD",
LL: "YYYY年M月D日",
LLL: "YYYY年M月D日 HH:mm",
LLLL: "YYYY年M月D日 dddd 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,
isPM: function (input) {
return input === "午後";
},
meridiem: function (hour, minute, isLower) {
if (hour < 12) {
return "午前";
} else {
return "午後";
}
},
calendar: {
sameDay: "[今日] LT",
nextDay: "[明日] LT",
nextWeek: function (now) {
if (now.week() < this.week()) {
return "[来週]dddd LT";
} else {
return "dddd LT";
}
});
return ja;
},
lastDay: "[昨日] LT",
lastWeek: function (now) {
if (this.week() < now.week()) {
return "[先週]dddd LT";
} else {
return "dddd LT";
}
},
sameElse: "L",
},
dayOfMonthOrdinalParse: /\d{1,2}日/,
ordinal: function (number, period) {
switch (period) {
case "d":
case "D":
case "DDD":
return number + "日";
default:
return number;
}
},
relativeTime: {
future: "%s後",
past: "%s前",
s: "数秒",
ss: "%d秒",
m: "1分",
mm: "%d分",
h: "1時間",
hh: "%d時間",
d: "1日",
dd: "%d日",
M: "1ヶ月",
MM: "%dヶ月",
y: "1年",
yy: "%d年",
},
});
})));
return ja;
});
public_new/js/libs/locale/ko.js
//! moment.js locale configuration
;(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined'
&& typeof require === 'function' ? factory(require('../moment')) :
typeof define === 'function' && define.amd ? define(['../moment'], factory) :
factory(global.moment)
}(this, (function (moment) { 'use strict';
(function (global, factory) {
typeof exports === "object" &&
typeof module !== "undefined" &&
typeof require === "function"
? factory(require("../moment"))
: typeof define === "function" && define.amd
? define(["../moment"], factory)
: factory(global.moment);
})(this, function (moment) {
"use strict";
var ko = moment.defineLocale("ko", {
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(
"_"
),
weekdays: "일요일_월요일_화요일_수요일_목요일_금요일_토요일".split("_"),
weekdaysShort: "일_월_화_수_목_금_토".split("_"),
weekdaysMin: "일_월_화_수_목_금_토".split("_"),
longDateFormat: {
LT: "A h:mm",
LTS: "A h:mm:ss",
L: "YYYY.MM.DD.",
LL: "YYYY년 MMMM D일",
LLL: "YYYY년 MMMM D일 A h:mm",
LLLL: "YYYY년 MMMM D일 dddd A h:mm",
l: "YYYY.MM.DD.",
ll: "YYYY년 MMMM D일",
lll: "YYYY년 MMMM D일 A h:mm",
llll: "YYYY년 MMMM D일 dddd A h:mm",
},
calendar: {
sameDay: "오늘 LT",
nextDay: "내일 LT",
nextWeek: "dddd LT",
lastDay: "어제 LT",
lastWeek: "지난주 dddd LT",
sameElse: "L",
},
relativeTime: {
future: "%s 후",
past: "%s 전",
s: "몇 초",
ss: "%d초",
m: "1분",
mm: "%d분",
h: "한 시간",
hh: "%d시간",
d: "하루",
dd: "%d일",
M: "한 달",
MM: "%d달",
y: "일 년",
yy: "%d년",
},
dayOfMonthOrdinalParse: /\d{1,2}(일|월|주)/,
ordinal: function (number, period) {
switch (period) {
case "d":
case "D":
case "DDD":
return number + "일";
case "M":
return number + "월";
case "w":
case "W":
return number + "주";
default:
return number;
}
},
meridiemParse: /오전|오후/,
isPM: function (token) {
return token === "오후";
},
meridiem: function (hour, minute, isUpper) {
return hour < 12 ? "오전" : "오후";
},
});
var ko = moment.defineLocale('ko', {
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('_'),
weekdays : '일요일_월요일_화요일_수요일_목요일_금요일_토요일'.split('_'),
weekdaysShort : '일_월_화_수_목_금_토'.split('_'),
weekdaysMin : '일_월_화_수_목_금_토'.split('_'),
longDateFormat : {
LT : 'A h:mm',
LTS : 'A h:mm:ss',
L : 'YYYY.MM.DD.',
LL : 'YYYY년 MMMM D일',
LLL : 'YYYY년 MMMM D일 A h:mm',
LLLL : 'YYYY년 MMMM D일 dddd A h:mm',
l : 'YYYY.MM.DD.',
ll : 'YYYY년 MMMM D일',
lll : 'YYYY년 MMMM D일 A h:mm',
llll : 'YYYY년 MMMM D일 dddd A h:mm'
},
calendar : {
sameDay : '오늘 LT',
nextDay : '내일 LT',
nextWeek : 'dddd LT',
lastDay : '어제 LT',
lastWeek : '지난주 dddd LT',
sameElse : 'L'
},
relativeTime : {
future : '%s 후',
past : '%s 전',
s : '몇 초',
ss : '%d초',
m : '1분',
mm : '%d분',
h : '한 시간',
hh : '%d시간',
d : '하루',
dd : '%d일',
M : '한 달',
MM : '%d달',
y : '일 년',
yy : '%d년'
},
dayOfMonthOrdinalParse : /\d{1,2}(일|월|주)/,
ordinal : function (number, period) {
switch (period) {
case 'd':
case 'D':
case 'DDD':
return number + '일';
case 'M':
return number + '월';
case 'w':
case 'W':
return number + '주';
default:
return number;
}
},
meridiemParse : /오전|오후/,
isPM : function (token) {
return token === '오후';
},
meridiem : function (hour, minute, isUpper) {
return hour < 12 ? '오전' : '오후';
}
});
return ko;
})));
return ko;
});
public_new/js/loading.js
$(window).load(function () { //読み込み完了したら実行する
$('#loader-bg').delay(900).fadeOut(800);//ローディングを隠す
$('#loader').delay(600).fadeOut(300);
$(window).load(function () {
//読み込み完了したら実行する
$("#loader-bg").delay(900).fadeOut(800); //ローディングを隠す
$("#loader").delay(600).fadeOut(300);
});
$(function(){
setTimeout('stopload()',3000);　//いつまでもローディング状態にならないように10秒で強制表示させる
$(function () {
setTimeout("stopload()", 3000); //いつまでもローディング状態にならないように10秒で強制表示させる
});
function stopload(){ //強制表示の関数
$('#loader-bg').delay(900).fadeOut(800);
$('#loader').delay(600).fadeOut(300);
function stopload() {
//強制表示の関数
$("#loader-bg").delay(900).fadeOut(800);
$("#loader").delay(600).fadeOut(300);
}
public_new/loading.html
......@@ -2,4 +2,4 @@
<div id="loader">
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
</div>
</div>
</div>
\ No newline at end of file
public_new/modal_chat_menu.html
<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-content">
<div class="modal-header border-0">
......@@ -9,10 +10,11 @@
</div>
<div class="modal-body">
<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>
</ul>
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
public_new/modal_chat_profile.html
<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-content">
<div class="modal-header border-0">
......@@ -11,7 +12,9 @@
</button>
</div>
<div class="modal-body">
<p>グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループグループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ</p>
<p>
グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループグループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ
</p>
</div>
<div class="modal-footer border-0 justify-content-center">
<button type="button" class="border-0 bg_navy">
......@@ -41,4 +44,4 @@
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
public_new/modal_collabo_capture.html
<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-content">
<div class="modal-header border-0 pb-0">
......@@ -11,7 +12,8 @@
<p>filename.jpg</p>
</div>
<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">
<span>キャンセル</span>
</div>
......@@ -29,4 +31,4 @@
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
public_new/modal_collabo_change_host.html
<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-content">
<div class="modal-header border-0 pb-0">
......@@ -8,7 +9,8 @@
<p>ホスト権限を引き渡します</p>
</div>
<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">
<span>キャンセル</span>
</div>
......@@ -21,4 +23,4 @@
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
public_new/modal_collabo_host_request.html
<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-content">
<div class="modal-header border-0 pb-0">
......@@ -8,7 +9,8 @@
<p>ホスト権限のリクエストを行います</p>
</div>
<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">
<span>キャンセル</span>
</div>
......@@ -21,4 +23,4 @@
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
public_new/modal_collabo_profile.html
<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-content">
<div class="modal-header border-0">
......@@ -11,7 +12,9 @@
</button>
</div>
<div class="modal-body">
<p>グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループグループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ</p>
<p>
グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループグループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ名グループ
</p>
</div>
<div class="modal-footer border-0 justify-content-center">
<button type="button" class="border-0 bg_navy text_white">
......@@ -22,7 +25,8 @@
<span>お気に入り解除</span>
</div>
</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="img_wrap">
<img src="icon/icon_change_host.png" alt="ホスト変更">
......@@ -33,4 +37,4 @@
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
public_new/modal_collabo_profile2.html
<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-content">
<div class="modal-header border-0">
......@@ -22,7 +23,8 @@
<span>お気に入り解除</span>
</div>
</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="img_wrap">
<img src="icon/icon_change_host.png" alt="ホスト変更">
......@@ -33,4 +35,4 @@
</div>
</div>
</div>
</div>
</div>
\ No newline at end of file
public_new/search_message_archive_list.html
......@@ -73,4 +73,4 @@
</div>
</div>
</a>
</li>
</li>
\ No newline at end of file
public_new/search_message_user_list.html
<li class="d-flex align-items-center">
<a href="#" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png"/></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
</div>
</div>
<li class="d-flex align-items-center">
<a href="#" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前</span>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">3:25AM</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<a href="#" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png"/></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
</div>
</div>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">3:25AM</span>
</div>
</div>
</div>
</a>
</li>
<li class="d-flex align-items-center">
<a href="#" class="w-100">
<div class="chat_item d-flex flex-row align-items-center">
<div class="chat_item_l">
<div class="thubnail">
<div class="img_wrap"><img src="img/thumbnail.png" /></div>
</div>
</div>
<div class="chat_item_m px-0">
<div class="d-flex flex-column">
<div class="chat_item_t">
<span class="chat_item_ttl">名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前名前</span>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">3:25AM</span>
</div>
<div class="chat_item_desc">
ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
</div>
</div>
</a>
</li>
</div>
<div class="chat_item_r">
<div class="d-flex flex-column">
<span class="chat_item_time">3:25AM</span>
</div>
</div>
</div>
</a>
</li>
\ No newline at end of file
public_new/zoom.html
......@@ -16,4 +16,4 @@
</div>
</a>
</div>
</div>
</div>
\ 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