VAR/VAR.WebFormsCore
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Chat: Adjust style

Browse Source
This commit is contained in:
Valeriano A.R.
2018-03-18 15:11:27 +01:00
parent ca41a75fc5
commit ca51d2fc08
1 changed files with 52 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
VAR.Focus.Web/Styles/10. Chat.css
View File

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