189 lines
4.2 KiB
CSS
189 lines
4.2 KiB
CSS
.divChatWindow {
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
border: solid 1px rgba(0,0,0,0.5);
|
|
padding: 5px;
|
|
border-radius: 5px;
|
|
background-color: rgb(64,64,64);
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.5);
|
|
position: fixed;
|
|
bottom: 15px;
|
|
right: 15px;
|
|
}
|
|
|
|
.divChatTitleBar {
|
|
text-align: right;
|
|
}
|
|
|
|
.titleChatNormal {
|
|
color: white;
|
|
background-color: rgb(64,64,64);
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
border-radius: 5px;
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
@keyframes alert {
|
|
0% {
|
|
background-color: red;
|
|
}
|
|
|
|
50% {
|
|
background-color: rgb(64,64,64);
|
|
}
|
|
|
|
100% {
|
|
background-color: red;
|
|
}
|
|
}
|
|
|
|
.titleChatAlert {
|
|
color: white;
|
|
background-color: red;
|
|
animation-name: alert;
|
|
animation-duration: 1s;
|
|
animation-iteration-count: infinite;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
border-radius: 5px;
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.titleChatDisconnected {
|
|
color: rgb(192,192,192);
|
|
background-color: rgb(64,64,64);
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
border-radius: 5px;
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.divChatContainer {
|
|
transition-property: width, height, opacity;
|
|
transition-duration: 0.3s;
|
|
overflow: hidden;
|
|
max-width: calc(100vw - 30px);
|
|
max-height: calc(100vh - 55px);
|
|
}
|
|
|
|
.divChat {
|
|
box-sizing: border-box;
|
|
overflow: auto;
|
|
height: calc(100% - 29px);
|
|
margin-bottom: 5px;
|
|
border-radius: 5px;
|
|
border: solid 1px rgba(0,0,0,0.5);
|
|
box-shadow: inset 0 1px 5px rgba(0,0,0,0.5);
|
|
background-color: rgb(128,128,128);
|
|
}
|
|
|
|
.messageRow,
|
|
.selfMessageRow {
|
|
display: block;
|
|
}
|
|
|
|
.messageRow {
|
|
text-align: left;
|
|
}
|
|
|
|
.selfMessageRow {
|
|
text-align: right;
|
|
}
|
|
|
|
.message {
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
border: solid 1px rgba(32, 32, 32, 0.5);
|
|
background-color: rgb(220,220,220);
|
|
border-radius: 5px;
|
|
box-shadow: 0 1px 5px rgba(0,0,0,0.3), inset 0 2px 5px rgba(255,255,255,0.5), inset 0 -2px 5px rgba(128,128,128,0.5);
|
|
margin: 2px;
|
|
padding: 5px;
|
|
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
.messageRow .message {
|
|
background-color: rgb(220,255,220);
|
|
}
|
|
|
|
.selfMessageRow .message {
|
|
background-color: rgb(255,255,220);
|
|
}
|
|
|
|
.message .user {
|
|
box-sizing: border-box;
|
|
color: rgb(64,64,64);
|
|
text-shadow: 0 0 1px rgba(0,0,0,0.3);
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.message .text {
|
|
box-sizing: border-box;
|
|
color: rgb(32,32,32);
|
|
text-shadow: 0 0 1px rgba(0,0,0,0.3);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.divChatControls {
|
|
font-size: 0;
|
|
}
|
|
|
|
.chatTextBox {
|
|
box-sizing: border-box;
|
|
padding-top: 2px;
|
|
padding-left: 5px;
|
|
padding-bottom: 2px;
|
|
padding-right: 5px;
|
|
box-shadow: inset 0 1px 5px rgba(0,0,0,0.5);
|
|
width: calc(100% - 52px);
|
|
border-radius: 5px;
|
|
border: solid 1px rgba(0,0,0,0.5);
|
|
margin: 0 2px 0 0;
|
|
vertical-align: top;
|
|
height: 24px;
|
|
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
|
font-size: 12px;
|
|
text-align: left;
|
|
}
|
|
|
|
.chatButton {
|
|
box-sizing: border-box;
|
|
padding-top: 2px;
|
|
padding-left: 5px;
|
|
padding-bottom: 2px;
|
|
padding-right: 5px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.5), inset 0 0px 6px rgba(0,0,0,0.5), inset 0 5px 10px rgba(255,255,255,0.4);
|
|
width: 50px;
|
|
vertical-align: top;
|
|
border-radius: 5px;
|
|
border: solid 1px rgba(0,0,0,0.5);
|
|
height: 24px;
|
|
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
|
font-size: 12px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
background-color: rgb(64,64,64);
|
|
color: white;
|
|
}
|
|
|
|
.chatButton:hover {
|
|
background-color: rgb(92,92,92);
|
|
}
|
|
|
|
.chatButton:active {
|
|
background-color: rgb(64,64,64);
|
|
box-shadow: inset 0 0px 6px rgba(0,0,0,0.9), inset 0 5px 10px rgba(255,255,255,0.2);
|
|
}
|