diff --git a/tests_hugo/chat_node/chat_client/chat.html b/tests_hugo/chat_node/chat_client/chat.html
index 4f4dd59a..f840df74 100644
--- a/tests_hugo/chat_node/chat_client/chat.html
+++ b/tests_hugo/chat_node/chat_client/chat.html
@@ -8,8 +8,9 @@
-
-
+
+
+
@@ -25,11 +26,14 @@
+
+
+ -------------- -->
-
@@ -55,8 +60,16 @@
-
-
diff --git a/tests_hugo/chat_node/chat_client/style/action_board.css b/tests_hugo/chat_node/chat_client/style/action_board.css
index 50a3f4b1..876c9bdd 100644
--- a/tests_hugo/chat_node/chat_client/style/action_board.css
+++ b/tests_hugo/chat_node/chat_client/style/action_board.css
@@ -1,18 +1,78 @@
+
.chat_box .chat_item.main_window .action_board {
- /*
- display: none;
- */
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
+ overflow: hidden;
+ background-color: transparent;
+ pointer-events: none;
+}
+.chat_box .chat_item.main_window .action_board .action_pannel {
+ /*
+ display: none;
+ visibility: hidden;
+ */
+ opacity: 0;
background-color: white;
+ pointer-events: none;
+}
+/* style the close croice */
+label.close_croice {
+ position: absolute;
+ top: 0px;
+ right: 0px;
+ width: 30px;
+ height: 30px;
+ cursor: pointer;
+}
+label.close_croice::before,
+label.close_croice::after {
+ content: "";
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 20px;
+ height: 1px;
+ background-color: black;
+}
+label.close_croice::before {
+ transform: translate(-50%, -50%) rotate(45deg);
+}
+label.close_croice::after {
+ transform: translate(-50%, -50%) rotate(-45deg);
}
/* * * * * * * * * * * * * *
- INFO WINDOW
+ DIRECT MESSAGES
*/
+/* show action board and _create */
+input#new_room_form:focus ~ .chat_box #action_board ._create,
+#action_board ._create:focus-within {
+ /*
+ display: flex;
+ visibility: visible;
+ */
+ opacity: 1;
+ pointer-events: auto;
+}
+
+/* settings */
+#action_board ._create {
+ height: 100%;
+}
+#action_board ._create p {
+ text-align: center;
+}
+#action_board ._create ._search {
+ position: sticky;
+ top: 0px;
+ margin: 10px;
+}
+#action_board ._create ._list {
+ border: 1px solid red;
+}
diff --git a/tests_hugo/chat_node/chat_client/style/chat.css b/tests_hugo/chat_node/chat_client/style/chat.css
index ac97d6f7..e27ca855 100644
--- a/tests_hugo/chat_node/chat_client/style/chat.css
+++ b/tests_hugo/chat_node/chat_client/style/chat.css
@@ -5,11 +5,17 @@
@import 'msg_controls.css';
@import 'drop_down_menu.css';
+
+input.vanish {
+ opacity: 0;
+ position: absolute;
+ pointer-events: none;
+}
+
/**
* GRID
*/
-
/* Hide scrollbar */
.chat_box * {
-ms-overflow-style: none; /* IE and Edge */
@@ -21,6 +27,8 @@
/* global settings */
.chat_box * {
+ display: flex;
+ flex-direction: column;
position: relative;
box-sizing: border-box;
/* Hide scrollbar for IE, Edge and Firefox */
@@ -76,22 +84,22 @@
.chat_box .chat_item:not(.open_close) {
display: none;
}
-#chat_input:checked +
+#chat_input:checked ~
.chat_box {
gap: 5px;
padding: 5px;
width: 300px;
height: 400px;
}
-#chat_input:checked +
+#chat_input:checked ~
.chat_box .chat_item {
display: flex;
}
-#chat_input:checked +
+#chat_input:checked ~
.chat_box .chat_item.open_close p {
display: none;
}
-#chat_input:checked +
+#chat_input:checked ~
.chat_box .chat_item.open_close {
/*
*/
@@ -102,7 +110,7 @@
background-color: transparent;
border: none;
}
-#chat_input:checked +
+#chat_input:checked ~
.chat_box .chat_item.open_close::before {
--collapse_width: 20px;
content: "";
diff --git a/tests_hugo/chat_node/chat_client/style/drop_down_menu.css b/tests_hugo/chat_node/chat_client/style/drop_down_menu.css
deleted file mode 100644
index c38add32..00000000
--- a/tests_hugo/chat_node/chat_client/style/drop_down_menu.css
+++ /dev/null
@@ -1,98 +0,0 @@
-
-
-/* * * * * * * * * * * * * * * * * * * *
- MENU APPEARENCE
-*/
-
-.drop_down,
-.drop_down * {
- display: flex;
- flex-direction: column;
- margin: auto;
- position: relative;
- cursor: pointer;
-}
-.drop_down {
- z-index: 1;
-}
-.drop_down ._title {
- padding: 5px;
-}
-.drop_down ._items {
- position: absolute;
- top: 100%;
- left: 0%;
- width: auto;
- min-width: 100%;
- background-color: white;
- white-space: nowrap;
- border: 1px solid blue;
-}
-.drop_down ._items > * {
- margin: 0px;
-}
-.drop_down ._title {
- text-align: center;
-}
-.drop_down label {
- margin: 0px;
- padding: 0px;
-}
-.drop_down p {
- padding: 5px;
- margin: 0px;
- margin-left: 0px;
- cursor: pointer;
-}
-.drop_down p._section {
- color: rgb(100, 100, 100);
-}
-.drop_down p._section:hover,
-.drop_down p._section:active {
- background-color: transparent !important;
- cursor: default !important;
-}
-.drop_down p._subsection {
- padding-left: 20px;
-}
-
-
-/* * * * * * * * * * * * * * * * * * * *
- SUB MENU APPEARENCE
-*/
-
-.drop_down._push ._title {
- text-align: left;
-}
-.drop_down._push > ._items {
- position: relative;
- width: auto;
- margin: 0px;
- margin-left: 10px;
-}
-
-
-
-
-/* * * * * * * * * * * * * * * * * * * *
- DROP MECHANISM
-*/
-
-input.input_outside {
- opacity: 0;
- position: absolute;
- pointer-events: none;
-}
-.drop_down > ._title {
- pointer-events: auto;
-}
-.drop_down > ._items {
- display: none;
-}
-.drop_down:focus-within > ._title {
- pointer-events: none;
-}
-.drop_down:focus-within > ._items {
- display: flex;
-}
-
diff --git a/tests_hugo/chat_node/chat_client/style/msg_controls.css b/tests_hugo/chat_node/chat_client/style/msg_controls.css
index 2e1c7a65..1c06d22c 100644
--- a/tests_hugo/chat_node/chat_client/style/msg_controls.css
+++ b/tests_hugo/chat_node/chat_client/style/msg_controls.css
@@ -1,23 +1,97 @@
.chat_item.controls_area {
+ flex-direction: row;
}
.chat_item.controls_area .control {
margin: auto;
cursor: pointer;
}
-.chat_item.controls_area .control > p {
+.chat_item.controls_area .control p {
margin: 0px;
padding: 5px;
+ cursor: pointer;
}
-.chat_item.controls_area .control.list {
+.chat_item.controls_area .control label {
+ margin: 0px;
+ padding: 0px;
}
-.chat_item.controls_area .control.create {
-}
-.chat_item.controls_area .control.join {
-}
-
.chat_item.controls_area .control p:hover {
background-color: rgb(210, 210, 210);
}
.chat_item.controls_area .control p:active {
background-color: rgb(180, 180, 180);
}
+
+
+/* * * * * * * * * * * * * * * * * * * *
+ MENU APPEARENCE
+*/
+
+.drop_down,
+.drop_down * {
+ display: flex;
+ flex-direction: column;
+ margin: auto;
+ position: relative;
+ cursor: pointer;
+}
+.drop_down {
+ z-index: 1;
+}
+.drop_down ._title {
+ padding: 5px;
+}
+.drop_down ._items {
+ position: absolute;
+ top: 100%;
+ left: 0%;
+ width: auto;
+ min-width: 100%;
+ background-color: white;
+ white-space: nowrap;
+ border: 1px solid blue;
+}
+.drop_down p {
+ margin-left: 0px;
+}
+.drop_down ._items > * {
+ margin: 0px;
+}
+.drop_down ._title {
+ text-align: center;
+}
+
+
+/* * * * * * * * * * * * * * * * * * * *
+ SUB MENU APPEARENCE
+*/
+
+.drop_down._push ._title {
+ text-align: left;
+}
+.drop_down._push > ._items {
+ position: relative;
+ width: auto;
+ margin: 0px;
+ margin-left: 10px;
+}
+
+
+
+
+/* * * * * * * * * * * * * * * * * * * *
+ DROP MECHANISM
+*/
+
+.drop_down > ._title {
+ pointer-events: auto;
+}
+.drop_down > ._items {
+ display: none;
+}
+.drop_down:focus-within > ._title {
+ pointer-events: none;
+}
+.drop_down:focus-within > ._items {
+ display: flex;
+}
+
diff --git a/tests_hugo/chat_node/chat_client/style/msg_thread.css b/tests_hugo/chat_node/chat_client/style/msg_thread.css
index ed636136..5b3348e4 100644
--- a/tests_hugo/chat_node/chat_client/style/msg_thread.css
+++ b/tests_hugo/chat_node/chat_client/style/msg_thread.css
@@ -1,21 +1,30 @@
+
.chat_box .chat_item.main_window {
flex-direction: column-reverse;
overflow: scroll;
border: 1px solid blue;
}
-
.chat_box .chat_item .msg_box {
flex-direction: column;
width: 100%;
padding: 5px;
}
-
.chat_box #msg_thread div {
white-space: pre-wrap;
margin: 5px auto;
padding: 5px;
border-radius: 5px;
}
+.chat_box #msg_box_room_name {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ text-align: center;
+ margin: 0px;
+ padding: 2px 5px;
+ font-weight: bold;
+}
/* * * * * * * * * * * * * *