layout titles ok

This commit is contained in:
lenovo
2022-12-14 21:04:10 +01:00
parent e18010a1ef
commit c1c7a0ce6a
9 changed files with 68 additions and 22 deletions

View File

@@ -21,18 +21,18 @@
<div class="close" id="chat_box">
<button class="chat_item chat_chat" id="chat_chat" onclick="layout('home')" ><p>chat</p></button>
<button class="chat_item chat_close" id="chat_close" onclick="layout('close')" ></button>
<button class="chat_item chat_new" id="chat_new" onclick="layout('new')" ><p>new</p></button>
<button class="chat_item chat_settings" id="chat_settings" onclick="layout('settings')" ><p>settings</p></button>
<button class="chat_item chat_room_name" id="chat_room_name" onclick="layout('room_set')" ><p>placeholder</p></button>
<button class="chat_item chat_send" id="chat_send" onclick="send_msg()" ><p>send</p></button>
<p class="chat_item" id="chat_create" >create</p>
<p class="chat_item" id="chat_user" >placeholder</p>
<button class="chat_item _back chat_back_room" id="chat_back_room" onclick="layout('room')" ></button>
<button class="chat_item _back chat_back_home" id="chat_back_home" onclick="layout('home')" ></button>
<button class="chat_item _back chat_back_new" id="chat_back_new" onclick="layout('new')" ></button>
<button class="chat_item _back chat_back_user" id="chat_back_user" onclick="layout('user')" ></button>
<button class="chat_item chat_chat" id="chat_chat" onclick="layout('home')" ><p>chat</p></button>
<button class="chat_item chat_close" id="chat_close" onclick="layout('close')" title="close" ></button>
<button class="chat_item chat_new" id="chat_new" onclick="layout('new')" title="new" ><p>new</p></button>
<button class="chat_item chat_settings" id="chat_settings" onclick="layout('settings')" title="settings"><p>settings</p></button>
<button class="chat_item chat_room_name" id="chat_room_name" onclick="layout('room_set')" ><p>placeholder</p></button>
<button class="chat_item chat_send" id="chat_send" onclick="send_msg()" title="send" ><p>send</p></button>
<p class="chat_item chat_create" id="chat_create" >create</p>
<p class="chat_item chat_user" id="chat_user" >placeholder</p>
<button class="chat_item _back chat_back_room" id="chat_back_room" onclick="layout('room')" title="go_back" ></button>
<button class="chat_item _back chat_back_home" id="chat_back_home" onclick="layout('home')" title="go_back" ></button>
<button class="chat_item _back chat_back_new" id="chat_back_new" onclick="layout('new')" title="go_back" ></button>
<button class="chat_item _back chat_back_user" id="chat_back_user" onclick="layout('user')" title="go_back" ></button>
<!-- --------------------------------
@@ -56,7 +56,7 @@
</div>
</div>
<div class="chat_item chat_panel " id="chat_panel_home">
<div class="chat_item chat_panel chat_panel_home" id="chat_panel_home">
<div id="chat_room_list" class="_first_child_vanish">
<div class="chat_room_name">
<p>you don't have any chat yet</p>

View File

@@ -5,10 +5,10 @@
.chat_item._back::before {
content: "";
position: absolute;
top: calc(50% - 10px - 1px);
left: 10px;
width: 20px;
height: 20px;
top: calc(50% - 6px - 1px);
left: 6px;
width: 14px;
height: 14px;
border-left: 1px solid black;
border-bottom: 1px solid black;
transform: rotate(45deg);

View File

@@ -12,3 +12,9 @@
display: flex;
}
/* title "create" appearance
*/
#chat_box.create .chat_item.chat_create {
text-align: center;
}

View File

@@ -12,3 +12,9 @@
display: flex;
}
/* title "mute" appearance
*/
#chat_box.mute .chat_item.chat_user {
text-align: center;
}

View File

@@ -12,11 +12,12 @@
display: flex;
}
/* button "new" appearance
.chat_item#chat_new button {
background-color: transparent;
}
*/
/* 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;
}

View File

@@ -12,3 +12,12 @@
display: flex;
}
/* button "<room_name>" appearance
*/
/* add or remove '.chat_item' to toggle the hover effect */
#chat_box.protected button.chat_item.chat_room_name {
width: auto;
background-color: transparent;
pointer-events: none;
}

View File

@@ -12,3 +12,12 @@
display: flex;
}
/* button "<room_name>" appearance
*/
/* add or remove '.chat_item' to toggle the hover effect */
#chat_box.room_name button.chat_item.chat_room_name {
width: auto;
background-color: transparent;
pointer-events: none;
}

View File

@@ -12,4 +12,13 @@
display: flex;
}
/* button "settings" appearance
*/
/* add or remove '.chat_item' to toggle the hover effect */
#chat_box.settings button.chat_item.chat_settings {
width: auto;
background-color: transparent;
pointer-events: none;
}

View File

@@ -12,3 +12,9 @@
display: flex;
}
/* title "user" appearance
*/
#chat_box.user .chat_item.chat_user {
text-align: center;
}