Module livechat :
- Style finish
- Just button "new conversation" not ready
- Starting websocket but its
This commit is contained in:
Kum1ta
245
site/module_livechat/site/style.css
Normal file
245
site/module_livechat/site/style.css
Normal file
@ -0,0 +1,245 @@
|
||||
/* ************************************************************************** */
|
||||
/* */
|
||||
/* ::: :::::::: */
|
||||
/* style.css :+: :+: :+: */
|
||||
/* +:+ +:+ +:+ */
|
||||
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
|
||||
/* +#+#+#+#+#+ +#+ */
|
||||
/* Created: 2024/07/30 13:53:39 by edbernar #+# #+# */
|
||||
/* Updated: 2024/07/31 00:37:48 by edbernar ### ########.fr */
|
||||
/* */
|
||||
/* ************************************************************************** */
|
||||
|
||||
body {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #616161;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#chatButton {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 30px;
|
||||
background-color: white;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
cursor : pointer;
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
#chatButton p {
|
||||
margin: 0;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#chatButton:hover {
|
||||
background-color: rgb(204, 204, 204);
|
||||
}
|
||||
|
||||
#chatDiv {
|
||||
width: 350px;
|
||||
height: 400px;
|
||||
background-color: #131313;
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
bottom: 0px;
|
||||
z-index: 999;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
color: white;
|
||||
font-family: 'Poppins';
|
||||
padding: 20px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
#chatDiv h1 {
|
||||
margin: 0;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
/* Delete this, is just for cross style */
|
||||
#chatDiv h2 {
|
||||
cursor : pointer;
|
||||
margin: 0;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
#chatDiv #topChatHome {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #484848;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
#buttonTypeChatHome {
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #484848;
|
||||
}
|
||||
|
||||
#buttonTypeChatHome h2 {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
color: #dfdfdf;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
#selected {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
#messageListChatHome {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
height: 230px;
|
||||
padding-bottom: 20px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
#messageListChatHome .user {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 75px;
|
||||
margin: 0;
|
||||
padding: 10px 0 5px 5px;
|
||||
}
|
||||
|
||||
#messageListChatHome .user:hover {
|
||||
background-color: #484848;
|
||||
cursor : pointer;
|
||||
}
|
||||
|
||||
#messageListChatHome .user .status {
|
||||
border-radius: 1000px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#messageListChatHome .online {
|
||||
background-color: rgb(17, 165, 29);
|
||||
}
|
||||
|
||||
#messageListChatHome .offline {
|
||||
background-color: rgb(148, 39, 39);
|
||||
|
||||
}
|
||||
|
||||
#messageListChatHome .user img {
|
||||
height: 52px;
|
||||
width: 52px;
|
||||
margin-left: 4px;
|
||||
margin-top: 4px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#messageListChatHome .opponentMessage {
|
||||
max-width: 80%;
|
||||
padding: 10px;
|
||||
margin-top: 20px;
|
||||
background-color: #484848;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
#messageListChatHome .meMessage {
|
||||
max-width: 80%;
|
||||
padding: 10px;
|
||||
margin-top: 20px;
|
||||
background-color: #222222;
|
||||
margin-right: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
#messageListChatHome .meMessage p {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
#messageListChatHome .content {
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
#messageListChatHome .time {
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#messageListChatHome p {
|
||||
margin: 0;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
#inputMessageDiv {
|
||||
position: absolute;
|
||||
width: 348px;
|
||||
height: 50px;
|
||||
background-color: #0B0B0B;
|
||||
bottom: 10px;
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border: 1px solid #000000;
|
||||
}
|
||||
|
||||
#inputMessageDiv p {
|
||||
margin: 0;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
font-family: "Poppins";
|
||||
font-weight: bolder;
|
||||
font-size: 35px;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
#inputMessage{
|
||||
user-select: text;
|
||||
background-color: #0f0f0f;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
resize: none;
|
||||
border: 0;
|
||||
color: white;
|
||||
padding: 15px 5% 15px 5%;
|
||||
}
|
||||
|
||||
#inputMessage:focus {
|
||||
outline: none;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
|
||||
#messageListChatHome {
|
||||
--sb-thumb-color: #080808;
|
||||
--sb-size: 5px;
|
||||
}
|
||||
|
||||
#messageListChatHome::-webkit-scrollbar {
|
||||
width: var(--sb-size)
|
||||
}
|
||||
|
||||
#messageListChatHome::-webkit-scrollbar-track {
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
#messageListChatHome::-webkit-scrollbar-thumb {
|
||||
background: var(--sb-thumb-color);
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
@supports not selector(::-webkit-scrollbar) {
|
||||
#messageListChatHome {
|
||||
scrollbar-color: var(--sb-thumb-color)
|
||||
var(--sb-track-color);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user