layout settings and room_set ok
This commit is contained in:
simplonco
@@ -7,14 +7,16 @@ header.svelte-7t4byu.svelte-7t4byu{overflow-y:hidden}.grid-container.svelte-7t4b
|
||||
var(--violet),
|
||||
var(--pink),
|
||||
var(--purple)
|
||||
);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)}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)}.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
|
||||
);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-trdz8d.svelte-trdz8d{display:flex;position:fixed;bottom:20px;right:20px;padding:5px;width:300px;height:400px;border:1px solid black}#chat_box.close.svelte-trdz8d .grid_box.svelte-trdz8d{gap:0px;grid:' chat ' auto
|
||||
/ auto }#chat_box.close.svelte-trdz8d.svelte-trdz8d{padding:0px;width:auto;height:auto}#chat_box.svelte-trdz8d *{-ms-overflow-style:none;scrollbar-width:none}#chat_box.svelte-trdz8d *::-webkit-scrollbar{display:none}#chat_box.svelte-trdz8d .grid_box{display:grid;margin:0px;gap:5px;width:100%;height:100%}#chat_box.svelte-trdz8d .grid_box *{display:flex;flex-direction:column;position:relative;box-sizing:border-box}#chat_box.svelte-trdz8d .chat_panel{overflow-y:scroll}#chat_box.svelte-trdz8d .grid_box p{padding:10px;font-size:15px}#chat_box.svelte-trdz8d .__show_if_only_child{display:none}#chat_box.svelte-trdz8d .__show_if_only_child:only-child{display:flex;color:rgb(100, 100, 100)}#chat_box.svelte-trdz8d .__center{margin:auto}button.svelte-otw4o4.svelte-otw4o4{display:flex;padding:0px;margin:auto;width:100%;cursor:pointer;outline:none;border:none;background-color:rgb(220, 220, 220)}button.svelte-otw4o4 p.svelte-otw4o4{width:100%;margin:auto;text-align:center}button.svelte-otw4o4.svelte-otw4o4:hover{background-color:rgb(200, 200, 200)}button.svelte-otw4o4.svelte-otw4o4:active{background-color:rgb(190, 190, 190)}.list.svelte-otw4o4.svelte-otw4o4:not(:hover){background-color:rgb(240, 240, 240)}.list.svelte-otw4o4 p.svelte-otw4o4{text-align:left}.transparent.svelte-otw4o4.svelte-otw4o4:not(:hover){background-color:transparent}.deactivate.svelte-otw4o4.svelte-otw4o4{background-color:transparent;pointer-events:none}#chat_box .icon.svelte-otw4o4 p.svelte-otw4o4{display:none}.icon.svelte-otw4o4.svelte-otw4o4:not(:hover){background-color:transparent}.icon.svelte-otw4o4.svelte-otw4o4{width:30px;height:100%;padding:0px}.dots.svelte-otw4o4.svelte-otw4o4::after{content:'\2807';font-size:20px;position:absolute;top:50%;left:0px;width:100%;height:auto;text-align:center;transform:translateY(-50%);cursor:pointer}.close.svelte-otw4o4.svelte-otw4o4::before{content:"";position:absolute;top:calc(50% - 1px);left:5px;width:20px;height:2px;background-color:black}.back.svelte-otw4o4.svelte-otw4o4::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)}.blocked.svelte-otw4o4.svelte-otw4o4{padding-left:30px}.blocked.svelte-otw4o4.svelte-otw4o4::before{content:"";position:absolute;top:calc(50% - 2px);left:10px;cursor:pointer;width:13px;height:10px;border-radius:2px;background-color:rgb(110, 110, 110)}.blocked.svelte-otw4o4.svelte-otw4o4::after{content:"";position:absolute;top:calc(50% - 9px);left:12px;cursor:pointer;width:9px;height:13px;border-radius:5px;box-sizing:border-box;border:3px solid rgb(110, 110, 110)}.grid_box.svelte-1upp58a .settings {grid-area:settings}.grid_box.svelte-1upp58a .close {grid-area:close}.grid_box.svelte-1upp58a .new {grid-area:new}.grid_box.svelte-1upp58a .panel_home{grid-area:panel_home}.grid_box.svelte-1upp58a.svelte-1upp58a{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}.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
|
||||
/ auto 1fr auto }.panel_home.svelte-1upp58a.svelte-1upp58a{border-top:1px solid black}.panel_home.svelte-1upp58a p.title.svelte-1upp58a{margin:10px auto 0px auto}.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-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)}.grid_box.svelte-1fr90vt .back {grid-area:back}.grid_box.svelte-1fr90vt .new {grid-area:new}.grid_box.svelte-1fr90vt .close {grid-area:close}.grid_box.svelte-1fr90vt .panel_new{grid-area:panel_new}.grid_box.svelte-1fr90vt.svelte-1fr90vt{grid:' back new close ' auto
|
||||
/ 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)}.grid_box.svelte-11vbx1c .back {grid-area:back}.grid_box.svelte-11vbx1c .new {grid-area:new}.grid_box.svelte-11vbx1c .close {grid-area:close}.grid_box.svelte-11vbx1c .panel_new{grid-area:panel_new}.grid_box.svelte-11vbx1c{grid:' back new close ' auto
|
||||
' panel_new panel_new panel_new ' 1fr
|
||||
/ auto 1fr auto }.panel_new.svelte-1fr90vt.svelte-1fr90vt{border-top:1px solid black}#chat_box .panel_new.svelte-1fr90vt>*{margin-top:5px;margin-bottom:5px}.panel_new.svelte-1fr90vt p.no_room.svelte-1fr90vt{margin:0px auto}.grid_box.svelte-1lfmc2m .back {grid-area:back}.grid_box.svelte-1lfmc2m .settings {grid-area:settings}.grid_box.svelte-1lfmc2m .close {grid-area:close}.grid_box.svelte-1lfmc2m .panel_settings{grid-area:panel_settings}.grid_box.svelte-1lfmc2m{grid:' back settings close ' auto
|
||||
/ auto 1fr auto }.panel_new.svelte-11vbx1c{border-top:1px solid black}#chat_box .panel_new.svelte-11vbx1c>*{margin-top:10px;margin-bottom:0px}.grid_box.svelte-fkuu8u .back {grid-area:back}.grid_box.svelte-fkuu8u .settings {grid-area:settings}.grid_box.svelte-fkuu8u .close {grid-area:close}.grid_box.svelte-fkuu8u .panel_settings{grid-area:panel_settings}.grid_box.svelte-fkuu8u{grid:' back settings close ' auto
|
||||
' panel_settings panel_settings panel_settings ' 1fr
|
||||
/ auto 1fr auto }
|
||||
/ auto 1fr auto }.panel_settings.svelte-fkuu8u{border-top:1px solid black}.grid_box.svelte-5pr1zo .back {grid-area:back}.grid_box.svelte-5pr1zo .room_name {grid-area:room_name}.grid_box.svelte-5pr1zo .close {grid-area:close}.grid_box.svelte-5pr1zo .panel_room_set{grid-area:panel_room_set}.grid_box.svelte-5pr1zo{grid:' back room_name close ' auto
|
||||
' panel_room_set panel_room_set panel_room_set ' 1fr
|
||||
/ auto 1fr auto }.panel_room_set.svelte-5pr1zo{border-top:1px solid black}#chat_box .panel_room_set.svelte-5pr1zo>*{margin-top:10px;margin-bottom:0px}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -41,32 +41,6 @@
|
||||
- WRITE
|
||||
--------------------------------- -->
|
||||
|
||||
<!-- ROOM SET -->
|
||||
<div class="chat_item chat_panel chat_panel_room_set" id="chat_panel_room_set">
|
||||
<button class="chat_leave_btn btn"><p>leave</p></button>
|
||||
<p>room users :</p>
|
||||
<div id="chat_api_room_users" class="chat_api chat_room_users list_btn">
|
||||
<div class="chat_public_rooms __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('user _room_set')">
|
||||
<p class="__left">user 1</p>
|
||||
</button>
|
||||
<button class="chat_room_name btn" onclick="chat_layout('user _room_set')">
|
||||
<p class="__left blocked">user 2</p>
|
||||
</button>
|
||||
<button class="chat_room_name btn" onclick="chat_layout('user _room_set')">
|
||||
<p class="__left">user 3</p>
|
||||
</button>
|
||||
<button class="chat_room_name btn" onclick="chat_layout('user _room_set')">
|
||||
<p class="__left">user 4</p>
|
||||
</button>
|
||||
<!-- END placeholders -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PROTECTED -->
|
||||
<div class="chat_item chat_panel chat_panel_protected" id="chat_panel_protected">
|
||||
<p class="__center" id="chat_protected_title">this room is protected</p>
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
import RoomLayout from './Layout_room.svelte';
|
||||
import NewLayout from './Layout_new.svelte';
|
||||
import SettingsLayout from './Layout_settings.svelte';
|
||||
import RoomsetLayout from './Layout_room_set.svelte';
|
||||
|
||||
export let color = "transparent";
|
||||
|
||||
@@ -31,7 +32,7 @@
|
||||
layout home
|
||||
layout room
|
||||
layout new
|
||||
layout settings
|
||||
layout settings
|
||||
layout room_set
|
||||
layout protected
|
||||
layout create
|
||||
@@ -55,6 +56,9 @@
|
||||
{:else if layout === "settings"}
|
||||
<SettingsLayout bind:layout back={layouts[1]} />
|
||||
|
||||
{:else if layout === "room_set"}
|
||||
<RoomsetLayout bind:layout back={layouts[1]} />
|
||||
|
||||
{:else}
|
||||
<div class="grid_box">
|
||||
<Button bind:layout new_layout={layouts[0]} my_class="chat">
|
||||
@@ -79,12 +83,9 @@
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
border: 1px solid black;
|
||||
/*
|
||||
background-color: {bg_color};
|
||||
background-color: bisque;
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
/* style if chat_box is closed
|
||||
*/
|
||||
#chat_box .chat {grid-area: chat;}
|
||||
@@ -108,27 +109,30 @@
|
||||
*/
|
||||
|
||||
/* all grid elements names
|
||||
:global(#chat_box #chat ){grid-area: chat;}
|
||||
:global(#chat_box #close ){grid-area: close;}
|
||||
:global(#chat_box #new ){grid-area: new;}
|
||||
:global(#chat_box #settings ){grid-area: settings;}
|
||||
:global(#chat_box #room_name ){grid-area: room_name;}
|
||||
:global(#chat_box #send ){grid-area: send;}
|
||||
:global(#chat_box #create ){grid-area: create;}
|
||||
:global(#chat_box #user ){grid-area: user;}
|
||||
:global(#chat_box #back ){grid-area: back;}
|
||||
:global(#chat_box #panel_home ){grid-area: panel_home;}
|
||||
:global(#chat_box #panel_new ){grid-area: panel_new;}
|
||||
:global(#chat_box #panel_msg ){grid-area: panel_msg;}
|
||||
:global(#chat_box #panel_write ){grid-area: panel_write;}
|
||||
:global(#chat_box #panel_settings ){grid-area: panel_settings;}
|
||||
:global(#chat_box #panel_room_set ){grid-area: panel_room_set;}
|
||||
:global(#chat_box #panel_protected ){grid-area: panel_protected;}
|
||||
:global(#chat_box #panel_create ){grid-area: panel_create;}
|
||||
:global(#chat_box #panel_user ){grid-area: panel_user;}
|
||||
:global(#chat_box #panel_mute ){grid-area: panel_mute;}
|
||||
|
||||
:global(#chat_box #chat ){grid-area: chat;}
|
||||
:global(#chat_box #close ){grid-area: close;}
|
||||
:global(#chat_box #new ){grid-area: new;}
|
||||
:global(#chat_box #settings ){grid-area: settings;}
|
||||
:global(#chat_box #room_name ){grid-area: room_name;}
|
||||
:global(#chat_box #send ){grid-area: send;}
|
||||
:global(#chat_box #create ){grid-area: create;}
|
||||
:global(#chat_box #user ){grid-area: user;}
|
||||
:global(#chat_box #back ){grid-area: back;}
|
||||
:global(#chat_box #panel_home ){grid-area: panel_home;}
|
||||
:global(#chat_box #panel_new ){grid-area: panel_new;}
|
||||
:global(#chat_box #panel_msg ){grid-area: panel_msg;}
|
||||
:global(#chat_box #panel_write ){grid-area: panel_write;}
|
||||
:global(#chat_box #panel_settings ){grid-area: panel_settings;}
|
||||
:global(#chat_box #panel_room_set ){grid-area: panel_room_set;}
|
||||
:global(#chat_box #panel_protected ){grid-area: panel_protected;}
|
||||
:global(#chat_box #panel_create ){grid-area: panel_create;}
|
||||
:global(#chat_box #panel_user ){grid-area: panel_user;}
|
||||
:global(#chat_box #panel_mute ){grid-area: panel_mute;}
|
||||
|
||||
*/
|
||||
|
||||
|
||||
/* Hide scrollbar
|
||||
*/
|
||||
#chat_box :global(*) {
|
||||
@@ -139,6 +143,7 @@
|
||||
display: none; /* Chrome, Safari and Opera */
|
||||
}
|
||||
|
||||
|
||||
/* for grid_box and all childrens
|
||||
*/
|
||||
#chat_box :global(.grid_box) {
|
||||
@@ -155,12 +160,14 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
/* all panels
|
||||
*/
|
||||
#chat_box :global(.chat_panel) {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
|
||||
/* all p
|
||||
*/
|
||||
#chat_box :global(.grid_box p) {
|
||||
@@ -175,6 +182,7 @@
|
||||
GLOBAL UTILITIES
|
||||
*/
|
||||
|
||||
|
||||
/* show child only if it's alone
|
||||
*/
|
||||
#chat_box :global(.__show_if_only_child) {
|
||||
@@ -185,5 +193,12 @@
|
||||
color: rgb(100, 100, 100);
|
||||
}
|
||||
|
||||
|
||||
/* center text
|
||||
*/
|
||||
#chat_box :global(.__center) {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
@@ -64,24 +64,24 @@
|
||||
|
||||
/* for btn list
|
||||
*/
|
||||
button.list:not(:hover) {
|
||||
.list:not(:hover) {
|
||||
background-color: rgb(240, 240, 240);
|
||||
}
|
||||
button.list p {
|
||||
.list p {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
/* for transparent btn
|
||||
*/
|
||||
button.transparent:not(:hover) {
|
||||
.transparent:not(:hover) {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
/* for deactivated btn
|
||||
*/
|
||||
button.deactivate {
|
||||
.deactivate {
|
||||
background-color: transparent;
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -89,13 +89,13 @@
|
||||
|
||||
/* for icon
|
||||
*/
|
||||
:global(#chat_box) button.icon p {
|
||||
:global(#chat_box) .icon p {
|
||||
display: none;
|
||||
}
|
||||
button.icon:not(:hover) {
|
||||
.icon:not(:hover) {
|
||||
background-color: transparent;
|
||||
}
|
||||
button.icon {
|
||||
.icon {
|
||||
width: 30px;
|
||||
height: 100%;
|
||||
padding: 0px;
|
||||
@@ -104,7 +104,7 @@
|
||||
|
||||
/* for 3 dots btn
|
||||
*/
|
||||
button.dots::after {
|
||||
.dots::after {
|
||||
content: '\2807';
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
@@ -120,7 +120,7 @@
|
||||
|
||||
/* for close btn
|
||||
*/
|
||||
button.close::before {
|
||||
.close::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: calc(50% - 1px);
|
||||
@@ -133,7 +133,7 @@
|
||||
|
||||
/* for back btn
|
||||
*/
|
||||
button.back::before {
|
||||
.back::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: calc(50% - 6px - 1px);
|
||||
@@ -146,7 +146,37 @@
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* for blocked user
|
||||
https://www.fileformat.info/info/unicode/category/So/list.htm
|
||||
U+1F512 LOCK 🔒
|
||||
U+1F513 OPEN LOCK 🔓
|
||||
*/
|
||||
.blocked {
|
||||
padding-left: 30px;
|
||||
}
|
||||
.blocked::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: calc(50% - 2px);
|
||||
left: 10px;
|
||||
cursor: pointer;
|
||||
width: 13px;
|
||||
height: 10px;
|
||||
border-radius: 2px;
|
||||
background-color: rgb(110, 110, 110);
|
||||
}
|
||||
.blocked::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: calc(50% - 9px);
|
||||
left: 12px;
|
||||
cursor: pointer;
|
||||
width: 9px;
|
||||
height: 13px;
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
border: 3px solid rgb(110, 110, 110);
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@@ -28,16 +28,16 @@
|
||||
<p class="title">list of your rooms :</p>
|
||||
<div class="room_list">
|
||||
<div class="__show_if_only_child">
|
||||
<p class="no_chat">/ you have no chat room yet /</p>
|
||||
<p class="__center">/ you have no chat room yet /</p>
|
||||
</div>
|
||||
<!-- placeholders
|
||||
------------- -->
|
||||
<Button bind:layout new_layout="room" my_class="list">
|
||||
a room
|
||||
</Button>
|
||||
<Button bind:layout new_layout="room" my_class="list">
|
||||
another room
|
||||
</Button>
|
||||
------------- -->
|
||||
<Button bind:layout new_layout="room" my_class="list">
|
||||
placeholder
|
||||
</Button>
|
||||
@@ -71,9 +71,6 @@
|
||||
.panel_home p.title {
|
||||
margin: 10px auto 0px auto;
|
||||
}
|
||||
.panel_home p.no_chat {
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
<p>join room :</p>
|
||||
<div class="public_rooms">
|
||||
<div class="__show_if_only_child">
|
||||
<p class="no_room">/ there are no public rooms yet /</p>
|
||||
<p class="__center">/ there are no public rooms yet /</p>
|
||||
</div>
|
||||
<!-- placeholders
|
||||
<Button bind:layout new_layout="room" my_class="list">
|
||||
@@ -85,17 +85,14 @@
|
||||
}
|
||||
|
||||
|
||||
/* chat_panel
|
||||
/* panel_new
|
||||
*/
|
||||
.panel_new {
|
||||
border-top: 1px solid black;
|
||||
}
|
||||
:global(#chat_box) .panel_new > :global(*) {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.panel_new p.no_room {
|
||||
margin: 0px auto;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,87 @@
|
||||
|
||||
<script>
|
||||
|
||||
import Button from './Chat_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>
|
||||
|
||||
<!-- room_name -->
|
||||
<Button my_class="new deactivate">
|
||||
<room_name>
|
||||
</Button>
|
||||
|
||||
<!-- close -->
|
||||
<Button bind:layout new_layout="close" my_class="close icon">
|
||||
close
|
||||
</Button>
|
||||
|
||||
<!-- panel_room_set -->
|
||||
<div class="chat_panel panel_room_set">
|
||||
<Button bind:layout new_layout="create" my_class="create">
|
||||
leave
|
||||
</Button>
|
||||
<p>room users :</p>
|
||||
<div class="room_users">
|
||||
<div class="__show_if_only_child">
|
||||
<p class="__center">/ there are no public rooms yet /</p>
|
||||
</div>
|
||||
<!-- placeholders
|
||||
------------- -->
|
||||
<Button bind:layout new_layout="user" my_class="list">
|
||||
user 1
|
||||
</Button>
|
||||
<Button bind:layout new_layout="user" my_class="list blocked">
|
||||
user 2
|
||||
</Button>
|
||||
<Button bind:layout new_layout="user" my_class="list">
|
||||
user 3
|
||||
</Button>
|
||||
<Button bind:layout new_layout="user" my_class="list">
|
||||
user 4
|
||||
</Button>
|
||||
<!-- END placeholders -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
/* grid layout "room_set"
|
||||
*/
|
||||
.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_room_set) {grid-area: panel_room_set;}
|
||||
.grid_box {
|
||||
grid:
|
||||
' back room_name close ' auto
|
||||
' panel_room_set panel_room_set panel_room_set ' 1fr
|
||||
/ auto 1fr auto ;
|
||||
}
|
||||
|
||||
|
||||
/* panel room_set
|
||||
*/
|
||||
.panel_room_set {
|
||||
border-top: 1px solid black;
|
||||
}
|
||||
:global(#chat_box) .panel_room_set > :global(*) {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
@@ -28,8 +28,10 @@
|
||||
<div class="chat_panel panel_settings">
|
||||
<p>blocked users :</p>
|
||||
<div class="blocked_users">
|
||||
<div class="__show_if_only_child">
|
||||
<p class="__center">/ you have blocked no one /</p>
|
||||
</div>
|
||||
<!-- placeholders
|
||||
------------- -->
|
||||
<Button bind:layout new_layout="user" my_class="list blocked">
|
||||
user 1
|
||||
</Button>
|
||||
@@ -42,6 +44,7 @@
|
||||
<Button bind:layout new_layout="user" my_class="list blocked">
|
||||
user 4
|
||||
</Button>
|
||||
------------- -->
|
||||
<!-- END placeholders -->
|
||||
</div>
|
||||
</div>
|
||||
@@ -65,6 +68,12 @@
|
||||
}
|
||||
|
||||
|
||||
/* panel_settings
|
||||
*/
|
||||
.panel_settings {
|
||||
border-top: 1px solid black;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
|
||||
/*
|
||||
https://www.fileformat.info/info/unicode/category/So/list.htm
|
||||
U+1F512 LOCK 🔒
|
||||
U+1F513 OPEN LOCK 🔓
|
||||
*/
|
||||
|
||||
#chat_box .blocked {
|
||||
padding-left: 30px;
|
||||
}
|
||||
#chat_box .blocked::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: calc(50% - 2px);
|
||||
left: 10px;
|
||||
cursor: pointer;
|
||||
width: 13px;
|
||||
height: 10px;
|
||||
border-radius: 2px;
|
||||
/*
|
||||
*/
|
||||
background-color: rgb(110, 110, 110);
|
||||
}
|
||||
#chat_box .blocked::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: calc(50% - 9px);
|
||||
left: 12px;
|
||||
cursor: pointer;
|
||||
width: 9px;
|
||||
height: 13px;
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
/*
|
||||
background-color: red;
|
||||
*/
|
||||
border: 3px solid rgb(110, 110, 110);
|
||||
}
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
|
||||
#chat_box.room_set {
|
||||
grid:
|
||||
' back room_name close ' auto
|
||||
' panel_room_set panel_room_set panel_room_set ' 1fr
|
||||
/ auto 1fr auto ;
|
||||
}
|
||||
#chat_box.room_set .chat_item#chat_back,
|
||||
#chat_box.room_set .chat_item#chat_room_name,
|
||||
#chat_box.room_set .chat_item#chat_close,
|
||||
#chat_box.room_set .chat_item#chat_panel_room_set {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
/* back btn
|
||||
*/
|
||||
#chat_box.room_set .chat_item.chat_back button.back_room {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
/* button "<room_name>" appearance
|
||||
*/
|
||||
/* add or remove '.chat_item' to toggle the hover effect */
|
||||
#chat_box.room_set button.chat_item.chat_room_name {
|
||||
width: auto;
|
||||
background-color: transparent;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
/* button "leave" appearance
|
||||
*/
|
||||
#chat_box.room_set .chat_item button.chat_leave_btn {
|
||||
margin: 10px 0px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user