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 =
{
lines_width: "1px",
lines_color: "black",
bg_color: "bisque",
lines_width: "1px",
lines_color: "rgb(30, 30, 30)",
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);
if ($location !== '/')
@@ -22,27 +50,21 @@
console.log("change color, location:", loc);
if (loc.startsWith("/game"))
{
style.lines_width = "2px";
style.lines_color = "white";
style.bg_color = "#222425";
// style here
style = style_dark;
}
if (loc.startsWith("/spectator"))
{
style.lines_width = "1px";
style.lines_color = "black";
style.bg_color = "bisque";
// style here
style = style_dark;
}
if (loc.startsWith("/ranking"))
{
style.lines_width = "1px";
style.lines_color = "black";
style.bg_color = "bisque";
// style here
}
if (loc.startsWith("/profile"))
{
style.lines_width = "1px";
style.lines_color = "black";
style.bg_color = "bisque";
// style here
}
}
@@ -54,7 +76,22 @@
<!--
<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}
<style></style>

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

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

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

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

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

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