Chat: Adjust style
This commit is contained in:
@@ -1,14 +1,14 @@
|
||||
.divChatWindow {
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
border: solid 1px black;
|
||||
border: solid 1px rgba(0,0,0,0.5);
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
background-color: rgb(220,220,220);
|
||||
box-shadow: 0 0 5px black;
|
||||
background-color: rgb(64,64,64);
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.5);
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
bottom: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.divChatTitleBar {
|
||||
@@ -16,11 +16,15 @@
|
||||
}
|
||||
|
||||
.titleChatNormal {
|
||||
background-color: rgb(220,220,220);
|
||||
color: white;
|
||||
background-color: rgb(64,64,64);
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
@keyframes alert {
|
||||
@@ -29,7 +33,7 @@
|
||||
}
|
||||
|
||||
50% {
|
||||
background-color: rgb(220,220,220);
|
||||
background-color: rgb(64,64,64);
|
||||
}
|
||||
|
||||
100% {
|
||||
@@ -38,6 +42,7 @@
|
||||
}
|
||||
|
||||
.titleChatAlert {
|
||||
color: white;
|
||||
background-color: red;
|
||||
animation-name: alert;
|
||||
animation-duration: 1s;
|
||||
@@ -45,32 +50,41 @@
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.titleChatDisconnected {
|
||||
color: rgb(64,64,64);
|
||||
background-color: rgb(220,220,220);
|
||||
color: rgb(192,192,192);
|
||||
background-color: rgb(64,64,64);
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
border-radius: 5px;
|
||||
padding: 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% - 37px);
|
||||
height: calc(100% - 29px);
|
||||
margin-bottom: 5px;
|
||||
border-radius: 5px;
|
||||
border: solid 1px black;
|
||||
box-shadow: inset 0 0 5px black;
|
||||
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,
|
||||
@@ -90,21 +104,21 @@
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
border: solid 1px rgb(32, 32, 32);
|
||||
border: solid 1px rgba(32, 32, 32, 0.5);
|
||||
background-color: rgb(220,220,220);
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,0.5), inset 0 2px 5px rgba(255,255,255,0.5), inset 0 -2px 5px rgba(128,128,128,0.5);
|
||||
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,200,200);
|
||||
background-color: rgb(220,255,220);
|
||||
}
|
||||
|
||||
.selfMessageRow .message {
|
||||
background-color: rgb(200,220,200);
|
||||
background-color: rgb(255,255,220);
|
||||
}
|
||||
|
||||
.message .user {
|
||||
@@ -128,14 +142,17 @@
|
||||
|
||||
.chatTextBox {
|
||||
box-sizing: border-box;
|
||||
padding: 5px;
|
||||
box-shadow: inset 0 0 5px black;
|
||||
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 black;
|
||||
border: solid 1px rgba(0,0,0,0.5);
|
||||
margin: 0 2px 0 0;
|
||||
vertical-align: top;
|
||||
height: 30px;
|
||||
height: 24px;
|
||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
@@ -143,25 +160,29 @@
|
||||
|
||||
.chatButton {
|
||||
box-sizing: border-box;
|
||||
padding: 5px;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,0.5), inset 0 2px 5px rgba(255,255,255,1), inset 0 -2px 5px rgba(128,128,128,1);
|
||||
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 black;
|
||||
height: 30px;
|
||||
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(192,192,192);
|
||||
background-color: rgb(64,64,64);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.chatButton:hover {
|
||||
background-color: rgb(220,220,220);
|
||||
background-color: rgb(92,92,92);
|
||||
}
|
||||
|
||||
.chatButton:active {
|
||||
background-color: rgb(220,220,220);
|
||||
box-shadow: inset 0 2px 5px rgba(255,255,255,1), inset 0 -2px 5px rgba(128,128,128,1);
|
||||
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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user