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

chat controls css kind of working

Browse Source
This commit is contained in:
lenovo
2022-12-05 21:47:09 +01:00
parent 3d9c9f56f4
commit 7fd77539f4
6 changed files with 104 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
.grid-container.svelte-16gr88w.svelte-16gr88w{position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;white-space:nowrap;margin-bottom:0px;overflow:hidden;padding:20px 40px;display:grid;grid-template-columns:repeat(12, 1fr);grid-template-rows:1fr 1fr 1fr 1fr 1fr;align-items:center}header.svelte-16gr88w h1.svelte-16gr88w,header.svelte-16gr88w nav a.svelte-16gr88w{color:bisque}header.svelte-16gr88w h1.svelte-16gr88w{grid-column:1 / 7;grid-row:1;padding:20px;border:1px solid bisque}header.svelte-16gr88w nav.svelte-16gr88w{grid-column:7 / 13;grid-row:1;justify-self:end;padding:20px;border:1px solid bisque}header.svelte-16gr88w nav a.svelte-16gr88w{margin-left:10px;text-decoration:none}header.svelte-16gr88w nav a.svelte-16gr88w:hover{font-weight:bold;background-color:blue}header.svelte-16gr88w h2.svelte-16gr88w:hover{background:blue}header.svelte-16gr88w h2.svelte-16gr88w{grid-row:3;grid-column:5 / span 4;justify-self:center;border:1px solid black;z-index:3}header.svelte-16gr88w h2 div.svelte-16gr88w{font-size:2em}nav.svelte-16gr88w div.svelte-16gr88w{display:inline;color:bisque;font-weight:bold}@font-face{font-family:'Bondi';src:url('/fonts/Bondi.ttf.woff') format('woff'),
.grid-container.svelte-16gr88w.svelte-16gr88w{position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;white-space:nowrap;margin-bottom:0px;overflow:hidden;padding:20px 40px;display:grid;grid-template-columns:repeat(12, 1fr);grid-template-rows:1fr 1fr 1fr 1fr 1fr;align-items:center}header.svelte-16gr88w h1.svelte-16gr88w,header.svelte-16gr88w nav a.svelte-16gr88w{color:bisque}header.svelte-16gr88w h1.svelte-16gr88w{grid-column:1 / 7;grid-row:1;padding:20px;border:1px solid bisque}header.svelte-16gr88w nav.svelte-16gr88w{grid-column:7 / 13;grid-row:1;justify-self:end;padding:20px;border:1px solid bisque}header.svelte-16gr88w nav a.svelte-16gr88w{margin-left:10px;text-decoration:none}header.svelte-16gr88w nav a.svelte-16gr88w:hover{font-weight:bold;background-color:blue}header.svelte-16gr88w h2.svelte-16gr88w:hover{background:blue}header.svelte-16gr88w h2.svelte-16gr88w{grid-row:3;grid-column:5 / span 4;justify-self:center;border:1px solid black;z-index:3}header.svelte-16gr88w h2 div.svelte-16gr88w{font-size:2em}nav.svelte-16gr88w div.svelte-16gr88w{display:inline;color:bisque;font-weight:bold}canvas.svelte-1bstsd0{width:100%;height:100%;background-color:#666}footer.svelte-3gs9wc{padding:40px;padding-bottom:10px;text-align:center}.copyright.svelte-3gs9wc{color:#aaa;font-size:14px;display:inline-block;padding:20px;border-top:1px solid #ddd}@font-face{font-family:'Bondi';src:url('/fonts/Bondi.ttf.woff') format('woff'),
url('/fonts/Bondi.ttf.svg#Bondi') format('svg'),
url('/fonts/Bondi.ttf.eot'),
url('/fonts/Bondi.ttf.eot?#iefix') format('embedded-opentype');font-weight:normal;font-style:normal}header.svelte-1rtggu1.svelte-1rtggu1{background:#618174;margin:0}header.svelte-1rtggu1.svelte-1rtggu1{position:sticky;display:grid;grid-template-columns:1fr 1fr 1fr}h1.svelte-1rtggu1.svelte-1rtggu1{font-family:'Bondi'}h1.svelte-1rtggu1.svelte-1rtggu1{margin:0;text-align:left;display:flex;justify-self:center;align-self:center}img.svelte-1rtggu1.svelte-1rtggu1{cursor:pointer;max-width:40px;padding:7px 20px;justify-self:left}nav.svelte-1rtggu1.svelte-1rtggu1{display:flex;justify-content:right}nav.svelte-1rtggu1 button.svelte-1rtggu1{margin:7px 20px;border-radius:4px}footer.svelte-3gs9wc{padding:40px;padding-bottom:10px;text-align:center}.copyright.svelte-3gs9wc{color:#aaa;font-size:14px;display:inline-block;padding:20px;border-top:1px solid #ddd}canvas.svelte-1bstsd0{width:100%;height:100%;background-color:#666}main.svelte-clru56.svelte-clru56{max-width:960px;margin:40px auto;text-align:center}.icon.svelte-clru56.svelte-clru56{max-width:150px}section.main-stats.svelte-clru56.svelte-clru56{max-width:600px;margin:40px auto;text-align:center;display:grid;grid-template-columns:repeat(3, 1fr);grid-template-rows:repeat(3, 1fr)}section.main-stats.svelte-clru56 h4.svelte-clru56{grid-column:1 / span 3}
url('/fonts/Bondi.ttf.eot?#iefix') format('embedded-opentype');font-weight:normal;font-style:normal}header.svelte-1rtggu1.svelte-1rtggu1{background:#618174;margin:0}header.svelte-1rtggu1.svelte-1rtggu1{position:sticky;display:grid;grid-template-columns:1fr 1fr 1fr}h1.svelte-1rtggu1.svelte-1rtggu1{font-family:'Bondi'}h1.svelte-1rtggu1.svelte-1rtggu1{margin:0;text-align:left;display:flex;justify-self:center;align-self:center}img.svelte-1rtggu1.svelte-1rtggu1{cursor:pointer;max-width:40px;padding:7px 20px;justify-self:left}nav.svelte-1rtggu1.svelte-1rtggu1{display:flex;justify-content:right}nav.svelte-1rtggu1 button.svelte-1rtggu1{margin:7px 20px;border-radius:4px}main.svelte-clru56.svelte-clru56{max-width:960px;margin:40px auto;text-align:center}.icon.svelte-clru56.svelte-clru56{max-width:150px}section.main-stats.svelte-clru56.svelte-clru56{max-width:600px;margin:40px auto;text-align:center;display:grid;grid-template-columns:repeat(3, 1fr);grid-template-rows:repeat(3, 1fr)}section.main-stats.svelte-clru56 h4.svelte-clru56{grid-column:1 / span 3}

49
tests_hugo/chat_node/chat_client/chat.html
View File

@@ -8,35 +8,44 @@
<body>
<input type="button" class="input_outside" id="input_outside">
<input type="checkbox" id="chat_input" style="display: none;"/>
<div class="chat_box">
<div class="chat_item controls_area">
<div class="control list drop_down_menu" tabindex=0>
<!--
<p class="drop_down_title">list</p>
<p class="drop_down_items">directs</p>
<p class="drop_down_items">rooms</p>
-->
<div class="drop_down_title" tabindex=0><p>list</p></div>
<div class="drop_down_items" tabindex=0>
<p>directs chats</p>
<p>rooms</p>
<div class="control list drop_down">
<p class="_title" tabindex=0>list</p>
<div class="_items" tabindex=0>
<div class="drop_down _push">
<p class="_title" tabindex=0>directs chats</p>
<div class="_items" tabindex=0>
<label for="input_outside"><p>test1</p></label>
<label for="input_outside"><p>test2</p></label>
</div>
</div>
<div class="drop_down _push">
<p class="_title" tabindex=0>rooms</p>
<div class="_items" tabindex=0>
<label for="input_outside"><p>test1</p></label>
<label for="input_outside"><p>test2</p></label>
</div>
</div>
</div>
</div>
<div class="control create drop_down_menu" tabindex=0>
<!--
<p class="drop_down_title">create</p>
<p class="drop_down_items">direct</p>
<p class="drop_down_items">room</p>
-->
<div class="drop_down_title" tabindex=0><p>create</p></div>
<div class="drop_down_items" tabindex=0>
<p>direct chat</p>
<p>room</p>
<div class="control create drop_down">
<p class="_title" tabindex=0>create</p>
<div class="_items" tabindex=0>
<label for="input_outside"><p>direct chat</p></label>
<label for="input_outside"><p>room</p></label>
</div>
</div>
<div class="control join">
<p>join</p>
</div>

2
tests_hugo/chat_node/chat_client/style/chat.css
View File

@@ -48,7 +48,7 @@
border: 1px solid green;
}
.chat_box .chat_item * {
.chat_box .chat_item > * {
display: flex;
}
/* buttons settings */

83
tests_hugo/chat_node/chat_client/style/drop_down_menu.css
View File

@@ -1,18 +1,24 @@
.drop_down_menu,
.drop_down_menu * {
/* * * * * * * * * * * * * * * * * * * *
MENU APPEARENCE
*/
.drop_down,
.drop_down * {
display: flex;
flex-direction: column;
margin: auto;
position: relative;
cursor: pointer;
}
.drop_down_menu {
.drop_down {
z-index: 1;
}
.drop_down_menu .drop_down_title {
.drop_down ._title {
padding: 5px;
pointer-events: none;
}
.drop_down_menu .drop_down_items {
.drop_down ._items {
position: absolute;
top: 100%;
left: 0%;
@@ -20,23 +26,62 @@
min-width: 100%;
background-color: white;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: visibility 0.3s;
border: 1px solid blue;
}
.drop_down_menu .drop_down_items > * {
.drop_down ._items > * {
margin: 0px;
}
.drop_down ._title {
text-align: center;
}
.drop_down label {
margin: 0px;
padding: 0px;
}
.drop_down p {
padding: 5px;
margin: 0px;
margin-left: 0px;
cursor: pointer;
}
.drop_down_menu:focus {
/* * * * * * * * * * * * * * * * * * * *
SUB MENU APPEARENCE
*/
.drop_down._push ._title {
text-align: left;
}
.drop_down_menu:focus .drop_down_title {
pointer-events: auto;
}
.drop_down_menu:focus .drop_down_items {
opacity: 1;
visibility: visible;
}
.drop_down_menu:focus .drop_down_items > * {
.drop_down._push > ._items {
position: relative;
width: auto;
margin: 0px;
margin-left: 10px;
}
/* * * * * * * * * * * * * * * * * * * *
DROP MECHANISM
*/
input.input_outside {
opacity: 0;
position: absolute;
pointer-events: none;
}
.drop_down > ._title {
pointer-events: auto;
}
.drop_down > ._items {
display: none;
}
.drop_down:focus-within > ._title {
pointer-events: none;
}
.drop_down:focus-within > ._items {
display: flex;
}

3
tests_hugo/chat_node/chat_client/style/globals.css
View File

@@ -1,3 +0,0 @@
.cursor_pointer {
cursor: pointer;
}

9
tests_hugo/chat_node/chat_client/style/msg_controls.css
View File

@@ -4,8 +4,9 @@
margin: auto;
cursor: pointer;
}
.chat_item.controls_area .control p {
.chat_item.controls_area .control > p {
margin: 0px;
padding: 5px;
}
.chat_item.controls_area .control.list {
}
@@ -14,3 +15,9 @@
.chat_item.controls_area .control.join {
}
.chat_item.controls_area .control p:hover {
background-color: rgb(210, 210, 210);
}
.chat_item.controls_area .control p:active {
background-color: rgb(180, 180, 180);
}