changed id chat_box for class chat_box to avoid css cascading problems

srcs/requirements/svelte/api_front/src/pieces/chat/Chat.svelte

@@ -48,7 +48,7 @@
 
 </script>
 
-<div class={layout} id="chat_box" style="background-color: {color};">
+<div class="{layout} chat_box" style="background-color: {color};">
 
 	{#if layout === "home"}
 		<HomeLayout bind:layout />
@@ -86,7 +86,7 @@
 
 	/* chat_box and default style
 	*/
-	#chat_box {
+	.chat_box {
 		display: flex;
 		position: fixed;
 		bottom: 20px;
@@ -100,14 +100,14 @@
 
 	/* style if chat_box is closed
 	*/
-	#chat_box .chat {grid-area: chat;}
-	#chat_box.close .grid_box {
+	.chat_box .chat {grid-area: chat;}
+	.chat_box.close .grid_box {
 		gap: 0px;
 		grid:
 			' chat ' auto
 			/ auto ;
 	}
-	#chat_box.close {
+	.chat_box.close {
 		padding: 0px;
 		width: auto;
 		height: auto;
@@ -147,25 +147,25 @@
 
 	/* Hide scrollbar
 	*/
-	#chat_box :global(*) {
+	.chat_box :global(*) {
 		-ms-overflow-style: none;  /* IE and Edge */
 		scrollbar-width: none;  /* Firefox */
 	}
-	#chat_box :global(*::-webkit-scrollbar) {
+	.chat_box :global(*::-webkit-scrollbar) {
 		display: none;  /* Chrome, Safari and Opera */
 	}
 
 
 	/* for grid_box and all childrens
 	*/
-	#chat_box :global(.grid_box) {
+	.chat_box :global(.grid_box) {
 		display: grid;
 		margin: 0px;
 		gap: 5px;
 		width: 100%;
 		height: 100%;
 	}
-	#chat_box :global(.grid_box *) {
+	.chat_box :global(.grid_box *) {
 		display: flex;
 		flex-direction: column;
 		position: relative;
@@ -175,7 +175,7 @@
 
 	/* all p
 	*/
-	#chat_box :global(.grid_box p) {
+	.chat_box :global(.grid_box p) {
 		padding: 10px;
 		font-size: 15px;
 	}
@@ -183,10 +183,10 @@
 
 	/* all panel
 	*/
-	#chat_box :global(.panel) {
+	.chat_box :global(.panel) {
 		overflow-y: scroll;
 	}
-	#chat_box :global(.panel > *) {
+	.chat_box :global(.panel > *) {
 		margin-top: 10px;
 		margin-bottom: 10px;
 	}
@@ -201,10 +201,10 @@
 
 	/* __show_if_only_child
 	*/
-	#chat_box :global(.__show_if_only_child) {
+	.chat_box :global(.__show_if_only_child) {
 		display: none;
 	}
-	#chat_box :global(.__show_if_only_child:only-child) {
+	.chat_box :global(.__show_if_only_child:only-child) {
 		display: flex;
 		color: rgb(100, 100, 100);
 	}
@@ -212,7 +212,7 @@
 
 	/* __center
 	*/
-	#chat_box :global(.__center) {
+	.chat_box :global(.__center) {
 		margin-left: auto;
 		margin-right: auto;
 	}
@@ -220,7 +220,7 @@
 
 	/* __border_top
 	*/
-	#chat_box :global(.__border_top) {
+	.chat_box :global(.__border_top) {
 		border-top: 1px solid black;
 	}
 

srcs/requirements/svelte/api_front/src/pieces/chat/Chat_button.svelte

@@ -89,7 +89,7 @@
 
 	/* for icon
 	*/
-	:global(#chat_box) .icon p {
+	.icon p {
 		display: none;
 	}
 	.icon:not(:hover) {

srcs/requirements/svelte/api_front/src/pieces/chat/Layout_create.svelte

@@ -71,7 +71,7 @@
 
 	/* radio elements style check
 	*/
-	:global(#chat_box) form input[type=radio] {
+	form input[type=radio] {
 		display: none;
 	}
 	form label._radio {
@@ -102,14 +102,14 @@
 
 	/* change next element on check
 	*/
-	:global(#chat_box) form ._check_change_next:checked ~ ._is_hidden {
+	form ._check_change_next:checked ~ ._is_hidden {
 		display: flex;
 	}
-	:global(#chat_box) form ._check_change_next:checked ~ ._is_not_gray {
+	form ._check_change_next:checked ~ ._is_not_gray {
 		pointer-events: none;
 		color: rgb(100, 100, 100);
 	}
-	:global(#chat_box) form ._is_hidden {
+	form ._is_hidden {
 		display: none;
 	}
 

srcs/requirements/svelte/api_front/src/pieces/chat/Layout_room.svelte

@@ -91,11 +91,11 @@
 
 	/* write area
 	*/
-	:global(#chat_box) .panel_write {
+	.panel_write {
 		border: none;
 		overflow: visible;
 	}
-	:global(#chat_box) .text_area {
+	.text_area {
 		display: block;
 		position: absolute;
 		bottom: 0px;
@@ -108,19 +108,19 @@
 		background-color: white;
 		border: 1px solid black;
 	}
-	:global(#chat_box) .text_area:focus {
+	.text_area:focus {
 		height: auto;
 		min-height: 100%;
 		max-height: 300px;
 	}
-	:global(#chat_box) .text_area :global(*) {
+	.panel_write .text_area :global(*) {
 		display: block ruby;
 	}
 
 
 	/* msg area
 	*/
-	:global(#chat_box) .panel_msg {
+	.panel_msg {
 		flex-direction: column-reverse;
 		border: 1px solid black;
 	}
@@ -141,10 +141,10 @@
 		background-color: rgb(210, 210, 210);
 		max-width: 80%;
 	}
-	:global(#chat_box) .chat_msg p {
+	.chat_msg p {
 		padding: 0px;
 	}
-	:global(#chat_box) .chat_msg p.name {
+	.chat_msg p.name {
 		margin: 0px;
 		font-size: 12px;
 		color: rgb(100, 100, 100);
@@ -168,7 +168,7 @@
 		margin-left: auto;
 		background-color: transparent;
 	}
-	:global(#chat_box) .chat_msg.SERVER p.name {
+	.chat_msg.SERVER p.name {
 		display: none;
 	}
 	.chat_msg.SERVER p.msg {