wip styles

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

@@ -4,13 +4,13 @@
 	import { init_socket } from './Socket_chat';
   import { location } from 'svelte-spa-router';
 
-
+	let style_light =
-	let style =
 	{
 		lines_width:       "1px",
 		lines_color:       "rgb(30, 30, 30)",
 		lines_light_color: "rgb(100, 100, 100)",
 		bg_color:          "bisque",
+		bg_light_color:    "bisque",
 
 		btn_color:        "rgb(220, 220, 220)",
 		btn_color_hover:  "rgb(200, 200, 200)",
@@ -21,14 +21,22 @@
 		btn_light_color_hover:  "rgb(220, 220, 220)",
 		btn_light_color_active: "rgb(210, 210, 210)",
 		btn_color_border:       "rgb(200, 200, 200)",
-	}
 
+		chat_me_color:       "rgb(210, 110, 10)",
+		chat_me_bg_color:    "rgb(210, 210, 210)",
+		chat_other_color:    "rgb(210, 210, 210)",
+		chat_other_bg_color: "rgb(210, 210, 210)",
+		chat_name_color:     "rgb(210, 210, 210)",
+		chat_input_color:    "rgb(210, 210, 210)",
+		chat_input_bg_color: "rgb(210, 210, 210)",
+	}
 	let style_dark =
 	{
 		lines_width:       "2px",
 		lines_color:       "rgb(200, 200, 200)",
-		lines_light_color: "rgb(100, 100, 100)",
+		lines_light_color: "rgb(80, 80, 80)",
 		bg_color:          "rgb(35, 35, 35)",
+		bg_light_color:    "rgb(35, 35, 35)",
 
 		btn_color:        "rgb(220, 220, 220)",
 		btn_color_hover:  "rgb(200, 200, 200)",
@@ -39,8 +47,13 @@
 		btn_light_color_hover:  "rgb(220, 220, 220)",
 		btn_light_color_active: "rgb(210, 210, 210)",
 		btn_color_border:       "rgb(200, 200, 200)",
+
+		chat_me_color:    "rgb(210, 110, 10)",
+		chat_other_color: "rgb(210, 210, 210)",
 	}
 
+	let style = style_light;
+
 	console.log("location:",$location);
 	if ($location !== '/')
 		init_socket();
@@ -49,23 +62,13 @@
 	{
 		console.log("change color, location:", loc);
 		if (loc.startsWith("/game"))
-		{
-			// style here
 			style = style_dark;
-		}
 		if (loc.startsWith("/spectator"))
-		{
-			// style here
 			style = style_dark;
-		}
 		if (loc.startsWith("/ranking"))
-		{
+			style = style_light;
-			// style here
-		}
 		if (loc.startsWith("/profile"))
-		{
+			style = style_light;
-			// style here
-		}
 	}
 
 	$: change_style($location);
@@ -81,6 +84,7 @@
 		--lines_color={style.lines_color}
 		--lines_light_color={style.lines_light_color}
 		--bg_color={style.bg_color}
+		--bg_light_color={style.bg_light_color}
 
 		--btn_color={style.btn_color}
 		--btn_color_hover={style.btn_color_hover}
@@ -91,6 +95,14 @@
 		--btn_light_color_hover={style.btn_light_color_hover}
 		--btn_light_color_active={style.btn_light_color_active}
 		--btn_light_color_border={style.btn_color_border}
+
+		--chat_me_color={style.chat_me_color}
+		--chat_me_bg_color={style.chat_me_bg_color}
+		--chat_other_color={style.chat_other_color}
+		--chat_other_bg_color={style.chat_other_bg_color}
+		--chat_name_color={style.chat_name_color}
+		--chat_input_color={style.chat_input_color}
+		--chat_input_bg_color={style.chat_input_bg_color}
 	/>
 {/if}
 

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

@@ -39,21 +39,6 @@
 
 
 	/* gobal variables styles
-
-		--lines_width
-		--lines_color
-		--lines_light_color
-		--bg_color
-
-		--btn_color
-		--btn_color_hover
-		--btn_color_active
-		--btn_color_border
-
-		--btn_light_color
-		--btn_light_color_hover
-		--btn_light_color_active
-		--btn_light_color_border
 	*/
 
 

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

@@ -50,13 +50,16 @@
 		cursor: pointer;
 		outline: none;
 		border: none;
+		border-radius: 0px;
 		background-color: var(--btn_color);
 	}
 
-	:global(.chat_box) button p {
+	button p {
 		width: 100%;
 		margin: auto;
 		text-align: center;
+	}
+	:global(.chat_box) button p {
 		color: var(--lines_light_color);
 	}
 	button:hover {
@@ -81,6 +84,9 @@
 	.transparent:not(:hover) {
 		background-color: transparent;
 	}
+	:global(.chat_box) button.transparent p {
+		color: var(--lines_color);
+	}
 
 
 	/* .deactivated
@@ -89,6 +95,9 @@
 		background-color: transparent;
 		pointer-events: none;
 	}
+	:global(.chat_box) button.deactivate p {
+		color: var(--lines_color);
+	}
 
 
 	/* .border
@@ -152,6 +161,7 @@
 		text-align: center;
 		transform: translateY(-50%);
 		cursor: pointer;
+		color: var(--lines_color);
 	}
 
 
@@ -177,8 +187,8 @@
 		left: 6px;
 		width: 14px;
 		height: 14px;
-		border-left: 1px solid black;
+		border-left: var(--lines_width) solid var(--lines_color);
-		border-bottom: 1px solid black;
+		border-bottom: var(--lines_width) solid var(--lines_color);
 		transform: rotate(45deg);
 	}
 

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

@@ -10,6 +10,15 @@
 </div>
 
 <style>
+/*
+		var(--chat_me_color)
+		var(--chat_me_bg_color)
+		var(--chat_other_color)
+		var(--chat_other_bg_color)
+		var(--chat_name_color)
+	var(--chat_input_color)
+	var(--chat_input_bg_color)
+*/
 	.chat_msg {
 		/*
 		white-space: pre-wrap;
@@ -22,7 +31,7 @@
 	*/
 	.chat_msg {
 		margin-left: 0px;
-		background-color: rgb(210, 210, 210);
+		background-color: var(--chat_other_bg_color);
 		max-width: 80%;
 	}
 	.chat_msg p {
@@ -31,10 +40,11 @@
 	.chat_msg p.name {
 		margin: 0px;
 		font-size: 12px;
-		color: rgb(100, 100, 100);
+		color: var(--chat_name_color);
 	}
 	.chat_msg p.msg {
 		margin: 5px 0px;
+		color: var(--chat_other_color);
 	}
 	.chat_msg p.msg :global(*) {
 		display: inline;
@@ -44,11 +54,14 @@
 	.chat_msg.me {
 		margin-right: 0px;
 		margin-left: auto;
-		background-color: rgb(210, 110, 10);
+		background-color: var(--chat_me_bg_color);
 	}
 	.chat_msg.me p.name {
 		display: none;
 	}
+	.chat_msg.me p.msg {
+		color: var(--chat_me_color);
+	}
 	/* msg server
 	*/
 	.chat_msg.SERVER {
@@ -61,7 +74,7 @@
 	.chat_msg.SERVER p.msg {
 		margin: 0px auto;
 		font-size: 12px;
-		color: rgb(100, 100, 100);
+		color: var(--lines_light_color);
 	}
 </style>
 

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

@@ -111,8 +111,8 @@
 
 		overflow-x: hidden;
 		overflow-y: scroll;
-		background-color: white;
+		background-color: var(--bg_color);
-		border: 1px solid black;
+		border: var(--lines_width) solid var(--lines_color);
 	}
 	.grid_box .text_area:focus {
 		height: auto;