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 21:23:34 +01:00
parent b4bdc2080b
commit eacdb5636a
4 changed files with 85 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,11 +7,39 @@
let style = let style =
{ {
lines_width: "1px", lines_width: "1px",
lines_color: "black", lines_color: "rgb(30, 30, 30)",
bg_color: "bisque", lines_light_color: "rgb(100, 100, 100)",
bg_color: "bisque",
btn_color: "rgb(220, 220, 220)",
btn_color_hover: "rgb(200, 200, 200)",
btn_color_active: "rgb(190, 190, 190)",
btn_color_border: "rgb(150, 150, 150)",
btn_light_color: "rgb(235, 235, 235)",
btn_light_color_hover: "rgb(220, 220, 220)",
btn_light_color_active: "rgb(210, 210, 210)",
btn_color_border: "rgb(200, 200, 200)",
} }
let style_dark =
{
lines_width: "2px",
lines_color: "rgb(200, 200, 200)",
lines_light_color: "rgb(100, 100, 100)",
bg_color: "rgb(35, 35, 35)",
btn_color: "rgb(220, 220, 220)",
btn_color_hover: "rgb(200, 200, 200)",
btn_color_active: "rgb(190, 190, 190)",
btn_color_border: "rgb(150, 150, 150)",
btn_light_color: "rgb(235, 235, 235)",
btn_light_color_hover: "rgb(220, 220, 220)",
btn_light_color_active: "rgb(210, 210, 210)",
btn_color_border: "rgb(200, 200, 200)",
}
console.log("location:",$location); console.log("location:",$location);
if ($location !== '/') if ($location !== '/')
@@ -22,27 +50,21 @@
console.log("change color, location:", loc); console.log("change color, location:", loc);
if (loc.startsWith("/game")) if (loc.startsWith("/game"))
{ {
style.lines_width = "2px"; // style here
style.lines_color = "white"; style = style_dark;
style.bg_color = "#222425";
} }
if (loc.startsWith("/spectator")) if (loc.startsWith("/spectator"))
{ {
style.lines_width = "1px"; // style here
style.lines_color = "black"; style = style_dark;
style.bg_color = "bisque";
} }
if (loc.startsWith("/ranking")) if (loc.startsWith("/ranking"))
{ {
style.lines_width = "1px"; // style here
style.lines_color = "black";
style.bg_color = "bisque";
} }
if (loc.startsWith("/profile")) if (loc.startsWith("/profile"))
{ {
style.lines_width = "1px"; // style here
style.lines_color = "black";
style.bg_color = "bisque";
} }
} }
@@ -54,7 +76,22 @@
<!-- <!--
<Layouts color={color} /> <Layouts color={color} />
--> -->
<Layouts --lines_width={style.lines_width} --lines_color={style.lines_color} --bg_color={style.bg_color} /> <Layouts
--lines_width={style.lines_width}
--lines_color={style.lines_color}
--lines_light_color={style.lines_light_color}
--bg_color={style.bg_color}
--btn_color={style.btn_color}
--btn_color_hover={style.btn_color_hover}
--btn_color_active={style.btn_color_active}
--btn_color_border={style.btn_color_border}
--btn_light_color={style.btn_light_color}
--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}
/>
{/if} {/if}
<style></style> <style></style>

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

@@ -40,9 +40,20 @@
/* gobal variables styles /* gobal variables styles
--lines_width --lines_width
--lines_color --lines_color
--bg_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
*/ */
@@ -108,7 +119,7 @@
} }
.chat_box :global(.__show_if_only_child:only-child) { .chat_box :global(.__show_if_only_child:only-child) {
display: flex; display: flex;
color: rgb(100, 100, 100); color: var(--lines_light_color);
} }
@@ -135,7 +146,7 @@
.chat_box :global(.__check_change_next:checked ~ .__to_block), .chat_box :global(.__check_change_next:checked ~ .__to_block),
.chat_box :global(.__check_change_next:checked ~ .__to_block *) { .chat_box :global(.__check_change_next:checked ~ .__to_block *) {
pointer-events: none; pointer-events: none;
color: rgb(100, 100, 100); color: var(--lines_light_color);
} }
.chat_box :global(.__to_show) { .chat_box :global(.__to_show) {
display: none; display: none;

6
srcs/requirements/svelte/api_front/src/pieces/chat/Chat_layouts.svelte
View File

@@ -19,7 +19,6 @@
/* global variables /* global variables
*/ */
export let color;
let room = ""; let room = "";
let admin = false; let admin = false;
let layouts = ["home", "home"]; let layouts = ["home", "home"];
@@ -28,8 +27,6 @@
*/ */
function set_layouts($layout) function set_layouts($layout)
{ {
//console.log("layouts:", layouts);
//console.log("layout:", $layout);
if ($layout.length === 0) if ($layout.length === 0)
layout.set(layouts[0]); layout.set(layouts[0]);
else if ($layout === "close") else if ($layout === "close")
@@ -40,13 +37,12 @@
layouts = [$layout, "home"]; layouts = [$layout, "home"];
else else
layouts = [$layout, layouts[0]]; layouts = [$layout, layouts[0]];
//console.log("- layouts:", layouts);
} }
$: set_layouts($layout); $: set_layouts($layout);
</script> </script>
<ChatBox color={color}> <ChatBox>
{#if $layout === "home"} {#if $layout === "home"}
<HomeLayout /> <HomeLayout />

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

@@ -50,25 +50,26 @@
cursor: pointer; cursor: pointer;
outline: none; outline: none;
border: none; border: none;
background-color: rgb(220, 220, 220); background-color: var(--btn_color);
} }
button p {
:global(.chat_box) button p {
width: 100%; width: 100%;
margin: auto; margin: auto;
text-align: center; text-align: center;
color: var(--lines_light_color);
} }
button:hover { button:hover {
background-color: rgb(200, 200, 200); background-color: var(--btn_color_hover);
} }
button:active { button:active {
background-color: rgb(190, 190, 190); background-color: var(--btn_color_active);
} }
/* .list /* .list
*/ */
.list:not(:hover) { .list:not(:hover) {
background-color: rgb(240, 240, 240); background-color: var(--btn_light_color);
} }
.list p { .list p {
text-align: left; text-align: left;
@@ -100,19 +101,19 @@
/* .light /* .light
*/ */
.light { .light {
background-color: rgb(233, 233, 233); background-color: var(--btn_light_color);
} }
.light.border { .light.border {
border: 1px solid rgb(204, 204, 204); border: var(--lines_width) solid var(--btn_light_color_border);
} }
.light:hover { .light:hover {
background-color: rgb(220, 220, 220); background-color: var(--btn_light_color_hover);
} }
.light.border:hover { .light.border:hover {
border-color: rgb(200, 200, 200); border-color: var(--btn_light_color_border);
} }
.light:active { .light:active {
background-color: rgb(210, 210, 210); background-color: var(--btn_light_color_active);
} }
@@ -163,7 +164,6 @@
left: 5px; left: 5px;
width: 20px; width: 20px;
height: 2px; height: 2px;
background-color: black;
background-color: var(--lines_color); background-color: var(--lines_color);
} }
@@ -200,7 +200,7 @@
width: 13px; width: 13px;
height: 10px; height: 10px;
border-radius: 2px; border-radius: 2px;
background-color: rgb(110, 110, 110); background-color: var(--lines_color);
} }
.blocked::after { .blocked::after {
content: ""; content: "";
@@ -212,7 +212,7 @@
height: 13px; height: 13px;
border-radius: 5px; border-radius: 5px;
box-sizing: border-box; box-sizing: border-box;
border: 3px solid rgb(110, 110, 110); border: 3px solid var(--lines_color);
} }
@@ -223,7 +223,7 @@
} }
.admin :global(span) { .admin :global(span) {
margin-left: auto; margin-left: auto;
color: gray; color: var(--lines_light_color);
} }