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

wip layout new

Browse Source
This commit is contained in:
simplonco
2022-12-25 18:57:25 +01:00
parent 789d2e53c5
commit 865a0cde11
10 changed files with 848 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
srcs/requirements/svelte/api_front/public/build/bundle.css
View File

@@ -10,7 +10,9 @@ header.svelte-7t4byu.svelte-7t4byu{overflow-y:hidden}.grid-container.svelte-7t4b
);background-size:200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;white-space:nowrap}.card.svelte-8smyff{background:white;padding:20px;border-radius:6px;box-shadow:0px 2px 4px rgba(0,0,0,0.1)}button.svelte-1u0z9cq{border:0;cursor:pointer;border-radius:6px;padding:8px 12px;font-weight:bold;box-shadow:1px 2px 3px rgba(0,0,0,0.2)}.primary.svelte-1u0z9cq{background:#d91b42;color:white}.secondary.svelte-1u0z9cq{background:#45c496;color:white}.flat.svelte-1u0z9cq{box-shadow:none}.primary.inverse.svelte-1u0z9cq{color:#d91b42;background:white;border:2px solid #d91b42}.secondary.inverse.svelte-1u0z9cq{color:#45c496;background:white;border:2px solid #45c496}#chat_box.svelte-1dtfh68.svelte-1dtfh68{display:flex;position:fixed;bottom:20px;right:20px;padding:5px;width:300px;height:400px;border:1px solid black}#chat_box.close.svelte-1dtfh68 .grid_box.svelte-1dtfh68{gap:0px;grid:' chat ' auto
/ auto }#chat_box.close.svelte-1dtfh68.svelte-1dtfh68{padding:0px;width:auto;height:auto}#chat_box.svelte-1dtfh68 *{-ms-overflow-style:none;scrollbar-width:none}#chat_box.svelte-1dtfh68 *::-webkit-scrollbar{display:none}#chat_box.svelte-1dtfh68 .grid_box{display:grid;margin:0px;gap:5px;width:100%;height:100%}#chat_box.svelte-1dtfh68 .grid_box *{display:flex;flex-direction:column;position:relative;box-sizing:border-box}#chat_box.svelte-1dtfh68 .chat_panel{overflow-y:scroll}#chat_box.svelte-1dtfh68 .grid_box p{padding:10px;font-size:15px}#chat_box.svelte-1dtfh68 .__show_if_only_child{display:none}#chat_box.svelte-1dtfh68 .__show_if_only_child:only-child{display:flex;color:rgb(100, 100, 100)}.grid_box.svelte-16qwzsm .settings {grid-area:settings}.grid_box.svelte-16qwzsm .close {grid-area:close}.grid_box.svelte-16qwzsm .new {grid-area:new}.grid_box.svelte-16qwzsm .panel_home{grid-area:panel_home}.grid_box.svelte-16qwzsm.svelte-16qwzsm{grid:' settings new close ' auto
' panel_home panel_home panel_home ' 1fr
/ auto 1fr auto }.panel_home.svelte-16qwzsm.svelte-16qwzsm{border-top:1px solid black}.panel_home.svelte-16qwzsm p.title.svelte-16qwzsm{margin:10px auto 0px auto}.panel_home.svelte-16qwzsm p.no_chat.svelte-16qwzsm{margin:0px auto}button.svelte-8bk9pb.svelte-8bk9pb{display:flex;padding:0px;margin:auto;width:100%;cursor:pointer;outline:none;border:none;background-color:rgb(220, 220, 220)}button.svelte-8bk9pb p.svelte-8bk9pb{width:100%;margin:auto;text-align:center}button.svelte-8bk9pb.svelte-8bk9pb:hover{background-color:rgb(200, 200, 200)}button.svelte-8bk9pb.svelte-8bk9pb:active{background-color:rgb(190, 190, 190)}button.list.svelte-8bk9pb.svelte-8bk9pb:not(:hover){background-color:rgb(240, 240, 240)}button.list.svelte-8bk9pb p.svelte-8bk9pb{text-align:left}.grid_box.svelte-1tpvz53 .back {grid-area:back}.grid_box.svelte-1tpvz53 .room_name {grid-area:room_name}.grid_box.svelte-1tpvz53 .close {grid-area:close}.grid_box.svelte-1tpvz53 .panel_msg {grid-area:panel_msg}.grid_box.svelte-1tpvz53 .send {grid-area:send}.grid_box.svelte-1tpvz53 .panel_write {grid-area:panel_write}.grid_box.svelte-1tpvz53.svelte-1tpvz53{grid:' back room_name room_name close ' auto
/ auto 1fr auto }.panel_home.svelte-16qwzsm.svelte-16qwzsm{border-top:1px solid black}.panel_home.svelte-16qwzsm p.title.svelte-16qwzsm{margin:10px auto 0px auto}.panel_home.svelte-16qwzsm p.no_chat.svelte-16qwzsm{margin:0px auto}button.svelte-8bk9pb.svelte-8bk9pb{display:flex;padding:0px;margin:auto;width:100%;cursor:pointer;outline:none;border:none;background-color:rgb(220, 220, 220)}button.svelte-8bk9pb p.svelte-8bk9pb{width:100%;margin:auto;text-align:center}button.svelte-8bk9pb.svelte-8bk9pb:hover{background-color:rgb(200, 200, 200)}button.svelte-8bk9pb.svelte-8bk9pb:active{background-color:rgb(190, 190, 190)}button.list.svelte-8bk9pb.svelte-8bk9pb:not(:hover){background-color:rgb(240, 240, 240)}button.list.svelte-8bk9pb p.svelte-8bk9pb{text-align:left}.grid_box.svelte-13a53tz .back {grid-area:back}.grid_box.svelte-13a53tz .room_name {grid-area:room_name}.grid_box.svelte-13a53tz .close {grid-area:close}.grid_box.svelte-13a53tz .panel_msg {grid-area:panel_msg}.grid_box.svelte-13a53tz .send {grid-area:send}.grid_box.svelte-13a53tz .panel_write{grid-area:panel_write}.grid_box.svelte-13a53tz.svelte-13a53tz{grid:' back room_name room_name close ' auto
' panel_msg panel_msg panel_msg panel_msg ' 1fr
' panel_write panel_write send send ' auto
/ auto 1fr auto auto }#chat_box .panel_write.svelte-1tpvz53.svelte-1tpvz53{border:none;overflow:visible}#chat_box .text_area.svelte-1tpvz53.svelte-1tpvz53{display:block;position:absolute;bottom:0px;left:0px;width:100%;height:auto;min-height:100%;max-height:300px;overflow-x:hidden;overflow-y:scroll;background-color:white;border:1px solid black}#chat_box .text_area.svelte-1tpvz53 *{display:block ruby}.panel_msg.svelte-1tpvz53.svelte-1tpvz53{flex-direction:column-reverse;overflow:scroll;border:1px solid black}.msg_thread.svelte-1tpvz53.svelte-1tpvz53{flex-direction:column;width:100%;padding:0px 5px;margin-bottom:0px}.chat_msg.svelte-1tpvz53.svelte-1tpvz53{white-space:pre-wrap;margin:5px auto;padding:5px;border-radius:5px}.msg_thread.svelte-1tpvz53 .chat_msg.svelte-1tpvz53{margin-left:0px;background-color:rgb(210, 210, 210);max-width:80%}#chat_box .chat_msg.svelte-1tpvz53 p.svelte-1tpvz53{padding:0px}#chat_box .chat_msg.svelte-1tpvz53 p.name.svelte-1tpvz53{margin:0px;font-size:12px;color:rgb(100, 100, 100)}.chat_msg.svelte-1tpvz53 p.msg.svelte-1tpvz53{margin:5px 0px}.chat_msg.me.svelte-1tpvz53.svelte-1tpvz53{margin-right:0px;margin-left:auto;background-color:rgb(210, 110, 10)}.chat_msg.me.svelte-1tpvz53 p.name.svelte-1tpvz53{display:none}.chat_msg.SERVER.svelte-1tpvz53.svelte-1tpvz53{margin-left:auto;background-color:transparent}#chat_box .chat_msg.SERVER.svelte-1tpvz53 p.name.svelte-1tpvz53{display:none}.chat_msg.SERVER.svelte-1tpvz53 p.msg.svelte-1tpvz53{margin:0px auto;font-size:12px;color:rgb(100, 100, 100)}button.svelte-1xlp56i.svelte-1xlp56i{display:flex;padding:0px;margin:auto;width:100%;cursor:pointer;outline:none;border:none;background-color:rgb(220, 220, 220)}button.svelte-1xlp56i p.svelte-1xlp56i{width:100%;margin:auto;text-align:center}button.svelte-1xlp56i.svelte-1xlp56i:hover{background-color:rgb(200, 200, 200)}button.svelte-1xlp56i.svelte-1xlp56i:active{background-color:rgb(190, 190, 190)}button.list.svelte-1xlp56i.svelte-1xlp56i:not(:hover){background-color:rgb(240, 240, 240)}button.list.svelte-1xlp56i p.svelte-1xlp56i{text-align:left}button.transparent.svelte-1xlp56i.svelte-1xlp56i:not(:hover){background-color:transparent}button.deactivate.svelte-1xlp56i.svelte-1xlp56i{background-color:transparent;pointer-events:none}#chat_box button.icon.svelte-1xlp56i p.svelte-1xlp56i{display:none}button.icon.svelte-1xlp56i.svelte-1xlp56i:not(:hover){background-color:transparent}button.icon.svelte-1xlp56i.svelte-1xlp56i{width:30px;height:100%;padding:0px}button.dots.svelte-1xlp56i.svelte-1xlp56i::after{content:'\2807';font-size:20px;position:absolute;top:50%;left:0px;width:100%;height:auto;text-align:center;transform:translateY(-50%);cursor:pointer}button.close.svelte-1xlp56i.svelte-1xlp56i::before{content:"";position:absolute;top:calc(50% - 1px);left:5px;width:20px;height:2px;background-color:black}button.back.svelte-1xlp56i.svelte-1xlp56i::before{content:"";position:absolute;top:calc(50% - 6px - 1px);left:6px;width:14px;height:14px;border-left:1px solid black;border-bottom:1px solid black;transform:rotate(45deg)}.panel_msg.svelte-8ieev5.svelte-8ieev5{flex-direction:column-reverse;overflow:scroll;border:1px solid black}.msg_thread.svelte-8ieev5.svelte-8ieev5{flex-direction:column;width:100%;padding:0px 5px;margin-bottom:0px}.chat_msg.svelte-8ieev5.svelte-8ieev5{white-space:pre-wrap;margin:5px auto;padding:5px;border-radius:5px}.msg_thread.svelte-8ieev5 .chat_msg.svelte-8ieev5{margin-left:0px;background-color:rgb(210, 210, 210);max-width:80%}#chat_box .chat_msg.svelte-8ieev5 p.svelte-8ieev5{padding:0px}#chat_box .chat_msg.svelte-8ieev5 p.name.svelte-8ieev5{margin:0px;font-size:12px;color:rgb(100, 100, 100)}.chat_msg.svelte-8ieev5 p.msg.svelte-8ieev5{margin:5px 0px}.chat_msg.me.svelte-8ieev5.svelte-8ieev5{margin-right:0px;margin-left:auto;background-color:rgb(210, 110, 10)}.chat_msg.me.svelte-8ieev5 p.name.svelte-8ieev5{display:none}.chat_msg.SERVER.svelte-8ieev5.svelte-8ieev5{margin-left:auto;background-color:transparent}#chat_box .chat_msg.SERVER.svelte-8ieev5 p.name.svelte-8ieev5{display:none}.chat_msg.SERVER.svelte-8ieev5 p.msg.svelte-8ieev5{margin:0px auto;font-size:12px;color:rgb(100, 100, 100)}
/ auto 1fr auto auto }#chat_box .panel_write.svelte-13a53tz.svelte-13a53tz{border:none;overflow:visible}#chat_box .text_area.svelte-13a53tz.svelte-13a53tz{display:block;position:absolute;bottom:0px;left:0px;width:100%;height:auto;min-height:100%;max-height:300px;overflow-x:hidden;overflow-y:scroll;background-color:white;border:1px solid black}#chat_box .text_area.svelte-13a53tz *{display:block ruby}.panel_msg.svelte-13a53tz.svelte-13a53tz{flex-direction:column-reverse;overflow:scroll;border:1px solid black}.msg_thread.svelte-13a53tz.svelte-13a53tz{flex-direction:column;width:100%;padding:0px 5px;margin-bottom:0px}.chat_msg.svelte-13a53tz.svelte-13a53tz{white-space:pre-wrap;margin:5px auto;padding:5px;border-radius:5px}.msg_thread.svelte-13a53tz .chat_msg.svelte-13a53tz{margin-left:0px;background-color:rgb(210, 210, 210);max-width:80%}#chat_box .chat_msg.svelte-13a53tz p.svelte-13a53tz{padding:0px}#chat_box .chat_msg.svelte-13a53tz p.name.svelte-13a53tz{margin:0px;font-size:12px;color:rgb(100, 100, 100)}.chat_msg.svelte-13a53tz p.msg.svelte-13a53tz{margin:5px 0px}.chat_msg.me.svelte-13a53tz.svelte-13a53tz{margin-right:0px;margin-left:auto;background-color:rgb(210, 110, 10)}.chat_msg.me.svelte-13a53tz p.name.svelte-13a53tz{display:none}.chat_msg.SERVER.svelte-13a53tz.svelte-13a53tz{margin-left:auto;background-color:transparent}#chat_box .chat_msg.SERVER.svelte-13a53tz p.name.svelte-13a53tz{display:none}.chat_msg.SERVER.svelte-13a53tz p.msg.svelte-13a53tz{margin:0px auto;font-size:12px;color:rgb(100, 100, 100)}button.svelte-vjxr5w.svelte-vjxr5w{display:flex;padding:0px;margin:auto;width:100%;cursor:pointer;outline:none;border:none;background-color:rgb(220, 220, 220)}button.svelte-vjxr5w p.svelte-vjxr5w{width:100%;margin:auto;text-align:center}button.svelte-vjxr5w.svelte-vjxr5w:hover{background-color:rgb(200, 200, 200)}button.svelte-vjxr5w.svelte-vjxr5w:active{background-color:rgb(190, 190, 190)}button.list.svelte-vjxr5w.svelte-vjxr5w:not(:hover){background-color:rgb(240, 240, 240)}button.list.svelte-vjxr5w p.svelte-vjxr5w{text-align:left}button.transparent.svelte-vjxr5w.svelte-vjxr5w:not(:hover){background-color:transparent}button.deactivate.svelte-vjxr5w.svelte-vjxr5w{background-color:transparent;pointer-events:none}#chat_box button.icon.svelte-vjxr5w p.svelte-vjxr5w{display:none}button.icon.svelte-vjxr5w.svelte-vjxr5w:not(:hover){background-color:transparent}button.icon.svelte-vjxr5w.svelte-vjxr5w{width:30px;height:100%;padding:0px}button.dots.svelte-vjxr5w.svelte-vjxr5w::after{content:'\2807';font-size:20px;position:absolute;top:50%;left:0px;width:100%;height:auto;text-align:center;transform:translateY(-50%);cursor:pointer}button.close.svelte-vjxr5w.svelte-vjxr5w::before{content:"";position:absolute;top:calc(50% - 1px);left:5px;width:20px;height:2px;background-color:black}button.back.svelte-vjxr5w.svelte-vjxr5w::before{content:"";position:absolute;top:calc(50% - 6px - 1px);left:6px;width:14px;height:14px;border-left:1px solid black;border-bottom:1px solid black;transform:rotate(45deg)}.panel_msg.svelte-8ieev5.svelte-8ieev5{flex-direction:column-reverse;overflow:scroll;border:1px solid black}.msg_thread.svelte-8ieev5.svelte-8ieev5{flex-direction:column;width:100%;padding:0px 5px;margin-bottom:0px}.chat_msg.svelte-8ieev5.svelte-8ieev5{white-space:pre-wrap;margin:5px auto;padding:5px;border-radius:5px}.msg_thread.svelte-8ieev5 .chat_msg.svelte-8ieev5{margin-left:0px;background-color:rgb(210, 210, 210);max-width:80%}#chat_box .chat_msg.svelte-8ieev5 p.svelte-8ieev5{padding:0px}#chat_box .chat_msg.svelte-8ieev5 p.name.svelte-8ieev5{margin:0px;font-size:12px;color:rgb(100, 100, 100)}.chat_msg.svelte-8ieev5 p.msg.svelte-8ieev5{margin:5px 0px}.chat_msg.me.svelte-8ieev5.svelte-8ieev5{margin-right:0px;margin-left:auto;background-color:rgb(210, 110, 10)}.chat_msg.me.svelte-8ieev5 p.name.svelte-8ieev5{display:none}.chat_msg.SERVER.svelte-8ieev5.svelte-8ieev5{margin-left:auto;background-color:transparent}#chat_box .chat_msg.SERVER.svelte-8ieev5 p.name.svelte-8ieev5{display:none}.chat_msg.SERVER.svelte-8ieev5 p.msg.svelte-8ieev5{margin:0px auto;font-size:12px;color:rgb(100, 100, 100)}.grid_box.svelte-4f5gf1 .back {grid-area:back}.grid_box.svelte-4f5gf1 .new {grid-area:new}.grid_box.svelte-4f5gf1 .close {grid-area:close}.grid_box.svelte-4f5gf1 .panel_new{grid-area:panel_new}.grid_box.svelte-4f5gf1{grid:' back new close ' auto
' panel_new panel_new panel_new ' 1fr
/ auto 1fr auto }

927
srcs/requirements/svelte/api_front/public/build/bundle.js
View File

File diff suppressed because it is too large Load Diff

2
srcs/requirements/svelte/api_front/public/build/bundle.js.map
View File

File diff suppressed because one or more lines are too long

1
srcs/requirements/svelte/api_front/src/pieces/chat/Button.svelte
View File

@@ -36,6 +36,7 @@
- for back btn
*/
/* default config
*/
button {

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

@@ -41,32 +41,6 @@
- WRITE
--------------------------------- -->
<!-- NEW -->
<div class="chat_item chat_panel chat_panel_new" id="chat_panel_new">
<button class="chat_create_btn btn"><p>create</p></button>
<p>join room :</p>
<div id="chat_api_publics_rooms" class="chat_api chat_public_rooms list_btn">
<div class="__show_if_only_child">
<p class="__center">/ there are no public rooms yet /</p>
</div>
<!-- placeholders
------------- -->
<button class="chat_room_name btn" onclick="chat_layout('room')">
<p class="__left">join room</p>
</button>
<button class="chat_room_name btn" onclick="chat_layout('room')">
<p class="__left">one room</p>
</button>
<button class="chat_room_name btn" onclick="chat_layout('room')">
<p class="__left">another room</p>
</button>
<button class="chat_room_name btn" onclick="chat_layout('room')">
<p class="__left">one more room</p>
</button>
<!-- END placeholders -->
</div>
</div>
<!-- SETTINGS -->
<div class="chat_item chat_panel chat_panel_settings" id="chat_panel_settings">
<p>blocked users :</p>

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

@@ -1,8 +1,10 @@
<script lang="ts">
import Button from './Button.svelte';
import HomeLayout from './Layout_home.svelte';
import RoomLayout from './Layout_room.svelte';
import Button from './Button.svelte';
import NewLayout from './Layout_new.svelte';
export let color = "transparent";
@@ -26,7 +28,7 @@
/*
layout close
layout home
layout room
layout room
layout new
layout settings
layout room_set
@@ -46,6 +48,9 @@
{:else if layout === "room"}
<RoomLayout bind:layout back={layouts[1]} />
{:else if layout === "new"}
<NewLayout bind:layout back={layouts[1]} />
{:else}
<div class="grid_box">
<Button bind:layout new_layout={layouts[0]} my_class="chat">

8
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_home.svelte
View File

@@ -1,21 +1,29 @@
<script>
import Button from './Button.svelte';
export let layout;
</script>
<div class="grid_box">
<!-- settings -->
<Button bind:layout new_layout="settings" my_class="settings dots icon">
settings
</Button>
<!-- new -->
<Button bind:layout new_layout="new" my_class="new transparent">
new
</Button>
<!-- close -->
<Button bind:layout new_layout="close" my_class="close icon">
close
</Button>
<!-- panel home -->
<div class="chat_panel panel_home">
<p class="title">list of your rooms :</p>
<div class="room_list" id="chat_api_room_list">

81
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_new.svelte Normal file
View File

@@ -0,0 +1,81 @@
<script>
import Button from './Button.svelte';
export let layout = "";
export let back = "";
</script>
<div class="grid_box">
<!-- back -->
<Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
back
</Button>
<!-- new -->
<Button my_class="new deactivate">
new
</Button>
<!-- close -->
<Button bind:layout new_layout="close" my_class="close icon">
close
</Button>
<!-- panel_new -->
<div class="chat_panel panel_new">
<Button bind:layout new_layout="create" my_class="create">
create
</Button>
<p>join room :</p>
<div id="chat_api_publics_rooms" class="chat_api chat_public_rooms list_btn">
<div class="__show_if_only_child">
<p class="__center">/ there are no public rooms yet /</p>
</div>
<!-- placeholders
------------- -->
<button class="chat_room_name btn" onclick="chat_layout('room')">
<p class="__left">join room</p>
</button>
<button class="chat_room_name btn" onclick="chat_layout('room')">
<p class="__left">one room</p>
</button>
<button class="chat_room_name btn" onclick="chat_layout('room')">
<p class="__left">another room</p>
</button>
<button class="chat_room_name btn" onclick="chat_layout('room')">
<p class="__left">one more room</p>
</button>
<!-- END placeholders -->
</div>
</div>
</div>
<style>
/* grid layout "new"
*/
.grid_box :global(.back ) {grid-area: back;}
.grid_box :global(.new ) {grid-area: new;}
.grid_box :global(.close ) {grid-area: close;}
.grid_box :global(.panel_new) {grid-area: panel_new;}
.grid_box {
grid:
' back new close ' auto
' panel_new panel_new panel_new ' 1fr
/ auto 1fr auto ;
}
/* button "create" appearance
*/
button.create {
margin: 10px 0px;
}
</style>

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

@@ -1,5 +1,6 @@
<script>
import Button from './Button.svelte';
export let layout = "";
export let back = "";
@@ -23,7 +24,7 @@
close
</Button>
<!-- MSG -->
<!-- msg -->
<div class="chat_panel panel_msg">
<div class="msg_thread">
<!-- placeholders
@@ -56,7 +57,7 @@
</div>
</div>
<!-- WRITE -->
<!-- write -->
<div class="chat_panel panel_write">
<div class="text_area" id="chat_msg_write" contenteditable="true">
</div>
@@ -71,15 +72,14 @@
<style>
/* grid layout "home"
*/
.grid_box :global(.back ) {grid-area: back;}
.grid_box :global(.room_name ) {grid-area: room_name;}
.grid_box :global(.close ) {grid-area: close;}
.grid_box :global(.panel_msg ) {grid-area: panel_msg;}
.grid_box :global(.send ) {grid-area: send;}
.grid_box :global(.panel_write ) {grid-area: panel_write;}
.grid_box :global(.back ) {grid-area: back;}
.grid_box :global(.room_name ) {grid-area: room_name;}
.grid_box :global(.close ) {grid-area: close;}
.grid_box :global(.panel_msg ) {grid-area: panel_msg;}
.grid_box :global(.send ) {grid-area: send;}
.grid_box :global(.panel_write) {grid-area: panel_write;}
.grid_box {
grid:
' back room_name room_name close ' auto

40
srcs/requirements/svelte/api_front/src/styles/chat/layout_new.css
View File

@@ -1,40 +0,0 @@
#chat_box.new {
grid:
' back new close ' auto
' panel_new panel_new panel_new ' 1fr
/ auto 1fr auto ;
}
#chat_box.new .chat_item#chat_back,
#chat_box.new .chat_item#chat_new,
#chat_box.new .chat_item#chat_close,
#chat_box.new .chat_item#chat_panel_new {
display: flex;
}
/* back btn
*/
#chat_box.new .chat_item.chat_back button.back_home {
display: flex;
}
/* button "new" appearance
*/
/* add or remove '.chat_item' to toggle the hover effect */
#chat_box.new button.chat_item.chat_new {
width: auto;
background-color: transparent;
pointer-events: none;
}
/* button "create" appearance
*/
#chat_box.new .chat_item button.chat_create_btn {
margin: 10px 0px;
}