renamed html for css, before full refont

tests_hugo/chat_node/chat_client/chat.html

@@ -12,50 +12,34 @@
 		<input type="checkbox" class="vanish" id="chat_input">
 		<input type="button"   class="vanish" id="new_room_form">
 
-		<div class="chat_box">
+		<div class="chat _box">
 
-			<div class="chat_item controls_area">
+			<div class="chat _item controls_area">
-				<!-- MENU -------------- -->
+				<!-- MENU
 				<div class="control rooms drop_down">
 					<p class="_title" tabindex=0>rooms</p>
 					<div class="_items" tabindex=0 id="rooms">
-						<label for="input_outside"><p class="room_name">test1</p></label>
-						<label for="input_outside"><p class="room_name">test2</p></label>
-						<label for="input_outside"><p class="room_name">test1</p></label>
-						<label for="input_outside"><p class="room_name">test2</p></label>
 					</div>
 				</div>
+				-------------- -->
+				<select class="control rooms">
+					<option class="_title">rooms</option>
+				</select>
 				<!-- MENU -------------- -->
 				<div class="control new">
 					<label for="new_room_form"><p>new</p></label>
 				</div>
-				<!-- MENU
-				<div class="control create drop_down">
-					<p class="_title" tabindex=0>new</p>
-					<div class="_items" tabindex=0>
-						<label for="input_outside"><p onclick="create_room()">direct chat</p></label>
-						<div class="drop_down _push">
-							<p class="_title" tabindex=0>room</p>
-							<div class="_items" tabindex=0>
-								<label for="input_outside"><p onclick="">public</p></label>
-								<label for="input_outside"><p onclick="">private</p></label>
-								<label for="input_outside"><p onclick="">protected</p></label>
-							</div>
-						</div>
-					</div>
-				</div>
-				-------------- -->
 				<!-- MENU -------------- -->
 				<div class="control settings">
 					<p onclick="">settings</p>
 				</div>
 			</div>
 
-			<label class="chat_item open_close button" for="chat_input">
+			<label class="chat _item open_close button" for="chat_input">
 				<p>chat</p>
 			</label>
 
-			<div class="chat_item main_window">
+			<div class="chat _item main_window">
 				<!-- THREAD ------------ -->
 				<div class="msg_box" id="msg_thread">
 					<!-- messages go there -->
@@ -63,23 +47,25 @@
 				<p id="msg_box_room_name">room name</p>
 				<!-- ACTION BOARD ------ -->
 				<div class="action_board" id="action_board">
+					<!-- CREATE ------------ -->
 					<div class="action_pannel _create" id="create" tabindex=0>
-						<p>new room</p>
+						<p class="_title">new room</p>
 						<input class="_search" type="text" onkeyup="search_room()" placeholder="type the name of a room">
 						<div class="_list">
+							<p>create a new group</p>
 						</div>
 						<label for="input_outside" class="close_croice"></label>
 					</div>
 				</div>
 			</div>
 
-			<div class="chat_item msg_write">
+			<div class="chat _item msg_write">
 				<div class="text_area" id="msg_write" contenteditable>
 				<!-- write message here -->
 				</div>
 			</div>
 
-			<button class="chat_item msg_send button" onclick="send_msg()">
+			<button class="chat _item msg_send button" onclick="send_msg()">
 				<p>send</p>
 			</button>
 

tests_hugo/chat_node/chat_client/style/action_board.css

@@ -1,5 +1,5 @@
 
-.chat_box .chat_item.main_window .action_board {
+.chat._item.main_window .action_board {
 	position: absolute;
 	top: 0px;
 	left: 0px;
@@ -9,7 +9,7 @@
 	background-color: transparent;
 	pointer-events: none;
 }
-.chat_box .chat_item.main_window .action_board .action_pannel {
+.chat._item.main_window .action_board .action_pannel {
 	/*
 	display: none;
 	visibility: hidden;
@@ -50,7 +50,7 @@ label.close_croice::after {
 */
 
 /* show action board and _create */
-input#new_room_form:focus ~ .chat_box #action_board ._create,
+input#new_room_form:focus ~ .chat._box #action_board ._create,
 #action_board ._create:focus-within {
 	/*
 	display: flex;
@@ -64,7 +64,7 @@ input#new_room_form:focus ~ .chat_box #action_board ._create,
 #action_board ._create {
 	height: 100%;
 }
-#action_board ._create p {
+#action_board ._create ._title {
 	text-align: center;
 }
 #action_board ._create ._search {

tests_hugo/chat_node/chat_client/style/chat.css

@@ -1,46 +1,45 @@
 
+@import 'chat_buttons.css';
+@import 'chat_thread.css';
+@import 'chat_write.css';
+@import 'chat_controls.css';
 @import 'action_board.css';
-@import 'msg_thread.css';
-@import 'msg_write.css';
-@import 'msg_controls.css';
-@import 'drop_down_menu.css';
 
 
+/* vanish elements wihtout display:none; */
 input.vanish {
 	opacity: 0;
 	position: absolute;
 	pointer-events: none;
 }
 
-/**
- * GRID
- */
-
 /* Hide scrollbar */
-.chat_box * {
+.chat._box * {
 	-ms-overflow-style: none;  /* IE and Edge */
 	scrollbar-width: none;  /* Firefox */
 }
-.chat_box *::-webkit-scrollbar {
+.chat._box *::-webkit-scrollbar {
 	display: none;  /* Chrome, Safari and Opera */
 }
 
-/* global settings */
+
-.chat_box * {
+/*
+ * GRID
+ */
+
+.chat._box * {
 	display: flex;
 	flex-direction: column;
   position: relative;
 	box-sizing: border-box;
-	/* Hide scrollbar for IE, Edge and Firefox */
-	-ms-overflow-style: none;  /* IE and Edge */
-	scrollbar-width: none;  /* Firefox */
 }
-.chat_box .chat_item.controls_area  { grid-area: controls;}
+.chat._item.controls_area  { grid-area: controls;}
-.chat_box .chat_item.open_close     { grid-area: open_close;}
+.chat._item.open_close     { grid-area: open_close;}
-.chat_box .chat_item.main_window    { grid-area: main_window;}
+.chat._item.main_window    { grid-area: main_window;}
-.chat_box .chat_item.msg_write      { grid-area: msg_write;}
+.chat._item.msg_write      { grid-area: msg_write;}
-.chat_box .chat_item.msg_send       { grid-area: msg_send;}
+.chat._item.msg_send       { grid-area: msg_send;}
-.chat_box {
+
+.chat._box {
   position: fixed;
   bottom: 20px;
   right: 20px;
@@ -57,52 +56,35 @@ input.vanish {
 
   border: 1px solid green;
 }
-.chat_box .chat_item > * {
+.chat._item > * {
 	display: flex;
 }
-/* buttons settings */
+
-.chat_box .chat_item.button {
+
-  display: flex;
+/*
-  width: auto;
+ * COLLAPSE
-  padding: 10px;
+ */
-  cursor: pointer;
+
-	outline: none;
+.chat._item:not(.open_close) {
-	border: none;
-  background-color: rgb(220, 220, 220);
-}
-.chat_box .chat_item.button p {
-  margin: auto;
-}
-.chat_box .chat_item.button:focus,
-.chat_box .chat_item.button:hover {
-  background-color: rgb(200, 200, 200);
-}
-.chat_box .chat_item.button:active {
-  background-color: rgb(220, 220, 220);
-}
-/* collapse settings */
-.chat_box .chat_item:not(.open_close) {
   display: none;
 }
 #chat_input:checked ~
-.chat_box {
+.chat._box {
   gap: 5px;
   padding: 5px;
   width: 300px;
   height: 400px;
 }
 #chat_input:checked ~
-.chat_box .chat_item {
+.chat._box .chat._item {
   display: flex;
 }
 #chat_input:checked ~
-.chat_box .chat_item.open_close p {
+.chat._box .chat._item.open_close p {
   display: none;
 }
 #chat_input:checked ~
-.chat_box .chat_item.open_close {
+.chat._box .chat._item.open_close {
-  /*
-  */
   width: 30px;
   height: 20px;
   padding: 0px;
@@ -111,8 +93,7 @@ input.vanish {
   border: none;
 }
 #chat_input:checked ~
-.chat_box .chat_item.open_close::before {
+.chat._box .chat._item.open_close::before {
-  --collapse_width: 20px;
   content: "";
   position: absolute;
   left: 50%;

tests_hugo/chat_node/chat_client/style/chat_buttons.css

@@ -0,0 +1,25 @@
+
+/*
+ * BUTTONS
+ */
+
+.chat._box .button {
+  display: flex;
+  width: auto;
+  padding: 10px;
+  cursor: pointer;
+	outline: none;
+	border: none;
+  background-color: rgb(220, 220, 220);
+}
+.chat._box .button p {
+  margin: auto;
+}
+.chat._box .button:focus,
+.chat._box .button:hover {
+  background-color: rgb(200, 200, 200);
+}
+.chat_box .button:active {
+  background-color: rgb(220, 220, 220);
+}
+

tests_hugo/chat_node/chat_client/style/chat_controls.css

@@ -0,0 +1,24 @@
+
+.chat._item.controls_area {
+	flex-direction: row;
+}
+.chat._item.controls_area .control {
+	margin: auto;
+	cursor: pointer;
+}
+.chat._item.controls_area .control p {
+	margin: 0px;
+	padding: 5px;
+	cursor: pointer;
+}
+.chat._item.controls_area .control label {
+	margin: 0px;
+	padding: 0px;
+}
+.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);
+}
+

tests_hugo/chat_node/chat_client/style/chat_thread.css

@@ -1,15 +1,15 @@
 
-.chat_box .chat_item.main_window {
+.chat._item.main_window {
 	flex-direction: column-reverse;
 	overflow: scroll;
 	border: 1px solid blue;
 }
-.chat_box .chat_item .msg_box {
+.chat._item .msg_box {
 	flex-direction: column;
 	width: 100%;
 	padding: 5px;
 }
-.chat_box #msg_thread div {
+.chat._box #msg_thread div {
 	white-space: pre-wrap;
 	margin: 5px auto;
 	padding: 5px;
@@ -21,7 +21,7 @@
 	ROOM NAME
 */
 
-.chat_box #msg_box_room_name {
+.chat._box #msg_box_room_name {
 	position: absolute;
 	top: 0px;
 	left: 0px;
@@ -38,17 +38,17 @@
 	ALL MSG
 */
 
-.chat_box #msg_thread div {
+.chat._box #msg_thread div {
 	margin-left: 0px;
 	background-color: rgb(210, 210, 210);
 	max-width: 80%;
 }
-.chat_box #msg_thread div p.name {
+.chat._box #msg_thread div p.name {
 	margin: 0px;
 	font-size: 12px;
 	color: rgb(100, 100, 100);
 }
-.chat_box #msg_thread div p.msg {
+.chat._box #msg_thread div p.msg {
 	margin: 5px 0px;
 }
 
@@ -57,12 +57,12 @@
 	MSG PERSO
 */
 
-.chat_box #msg_thread div.me {
+.chat._box #msg_thread div.me {
 	margin-right: 0px;
 	margin-left: auto;
 	background-color: rgb(210, 110, 10);
 }
-.chat_box #msg_thread div.me p.name {
+.chat._box #msg_thread div.me p.name {
 	display: none;
 }
 
@@ -71,14 +71,14 @@
 	MSG SERVER
 */
 
-.chat_box #msg_thread div.SERVER {
+.chat._box #msg_thread div.SERVER {
 	margin-left: auto;
 	background-color: transparent;
 }
-.chat_box #msg_thread div.SERVER p.name {
+.chat._box #msg_thread div.SERVER p.name {
 	display: none;
 }
-.chat_box #msg_thread div.SERVER p.msg {
+.chat._box #msg_thread div.SERVER p.msg {
 	margin: 0px auto;
 	font-size: 12px;
 	color: rgb(100, 100, 100);

tests_hugo/chat_node/chat_client/style/chat_write.css

@@ -1,4 +1,4 @@
-.chat_box .chat_item .text_area {
+.chat._item .text_area {
 	display: block;
 	position: absolute;
 	bottom: 0px;
@@ -15,6 +15,6 @@
 	background-color: white;
 	border: 1px solid red;
 }
-.chat_box .chat_item .text_area div {
+.chat._item .text_area div {
 	display: block ruby;
 }

tests_hugo/chat_node/chat_client/style/msg_controls.css

@@ -1,121 +0,0 @@
-
-.chat_item.controls_area {
-	flex-direction: row;
-}
-.chat_item.controls_area .control {
-	margin: auto;
-	cursor: pointer;
-}
-.chat_item.controls_area .control p {
-	margin: 0px;
-	padding: 5px;
-	cursor: pointer;
-}
-.chat_item.controls_area .control label {
-	margin: 0px;
-	padding: 0px;
-}
-.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;
-}
-
-
-
-/* * * * * * * * * * * * * * * * * * * *
-	DROP ARROW
-*/
-
-.drop_down ._title {
-	padding-right: 20px !important;
-}
-.drop_down ._title::after {
-	content: "";
-	position: absolute;
-	top: calc(50% - 4px);
-	right: 5px;
-	width: 0px;
-	height: 10px;
-
-	border: 5px solid transparent;
-	border-top: 10px solid rgb(120, 120, 120);
-}
-
-
-
-/* * * * * * * * * * * * * * * * * * * *
-	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;
-}
-