42/42_INT_14_transcendence
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip styles

Browse Source
This commit is contained in:
simplonco
2023-01-15 22:02:32 +01:00
parent eacdb5636a
commit 170a1f0cd1
5 changed files with 60 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
srcs/requirements/svelte/api_front/src/pieces/chat/Chat.svelte
View File

@@ -4,13 +4,13 @@
import { init_socket } from './Socket_chat';
import { location } from 'svelte-spa-router';
let style =
let style_light =
{
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 here
}
style = style_light;
if (loc.startsWith("/profile"))
{
// style here
}
style = style_light;
}
$: 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}

15
srcs/requirements/svelte/api_front/src/pieces/chat/Chat_box_css.svelte
View File

@@ -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
*/

16
srcs/requirements/svelte/api_front/src/pieces/chat/Element_button.svelte
View File

@@ -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-bottom: 1px solid black;
border-left: var(--lines_width) solid var(--lines_color);
border-bottom: var(--lines_width) solid var(--lines_color);
transform: rotate(45deg);
}

21
srcs/requirements/svelte/api_front/src/pieces/chat/Element_msg.svelte
View File

@@ -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>

4
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_room.svelte
View File

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