$spacing: 20px;
$radius: 4px;
$font-size-default: 20px; $font-size-small: 0.65em;
$color-green: #91d98a; $color-blue: #8ac0d9;
@import url(fonts.googleapis.com/css?family=Source+Sans+Pro:300);
@mixin clearfix {
display: block; overflow: hidden; &:before { @include before; }
}
@mixin prefix($property, $value) {
-webkit-#{$property}: #{$value}; -ms-#{$property}: #{$value}; -moz-#{$property}: #{$value}; -o-#{$property}: #{$value}; #{$property}: #{$value};
}
@mixin radius($rad: $radius) {
@include prefix(border-radius, #{$rad});
}
@mixin before {
content: " "; display: block;
}
.padding {
padding: $spacing;
}
.clearfix {
@include clearfix;
}
.font-size-small {
font-size: $font-size-small;
}
denshobato-message-panel {
width: 75%; display: block; margin: 0 auto;
}
.top_menu {
background-color: white; border: 1px solid rgba(0, 0, 0, 0.08); padding: 18px 40px 5px 40px; border-radius: 10px 10px 0px 0px; z-index: 999; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); .chat-header { display: block; span { display: block; text-align: center; font-size: 14px; font-style: italic; } p { color: cadetblue; display: inline-grid; text-align: center; } } .refresh-button { float: right; margin: -38px 0px 0px 0px; background: none; border: #a3d063 1px solid; border-radius: 15px; outline: none; &:hover { color: white; background: #a3d063; outline: none; border: none; } } .buttons { margin: 0px 0 0 10px; position: absolute; .button { width: 16px; height: 16px; border-radius: 50%; display: inline-block; margin-right: 10px; position: relative; &.close-button { background-color: #f5886e; &:hover { cursor: pointer; } } &.minimize { background-color: #fdbf68; } &.maximize { background-color: #a3d063; } } }
}
// - - - Chat
.chat-wrapper {
border: 1px solid rgba(0, 0, 0, 0.08); height: 500px; padding: 20px; position: relative; border-radius: 0px 0px 10px 10px; display: block; overflow-y: scroll; font-family: "Source Sans Pro", sans-serif; font-size: $font-size-default; font-weight: 300; .chat-content { background-color: white; } .chat-image { float: left; @include radius(50%); &.chat-image-default { width: $spacing * 3; height: $spacing * 3; } } .chat-message { margin-bottom: $spacing; width: 100%; padding: 15px; @include clearfix; &:last-of-type { margin-bottom: 0; position: relative; } .full-name-recipient { display: block; font-size: 12px; font-style: italic; color: grey; margin-top: 0px; } .full-name-sender { @extend .full-name-recipient; text-align: right; color: sienna; } .chat-message-wrapper { max-width: 70%; display: table; margin: 0 $spacing; padding-top: $spacing / 2; position: relative; &:before { @include before; width: 0; height: 0; border: 12px solid transparent; top: $spacing; position: absolute; z-index: 2; } p { padding: $spacing / 2 $spacing; color: white; padding: 10px 15px; font-size: 15px; border-top: 1px solid; &:first-of-type { border-top: 0 !important; } } } &.chat-message-recipient { .user-info { display: inline-block; float: left; width: 60px; height: auto; .message-author { font-size: small; display: block; text-align: center; } } .chat-message-wrapper, .chat-message-content { float: left; } .chat-message-wrapper { .message-time { font-size: xx-small; display: block; } &:before { left: -20px; top: 30px; border-right-color: $color-green; } } p { background-color: $color-green; border-top-color: $color-green - 20; } } &.chat-message-sender { .user-info { display: inline-block; float: right; width: 60px; height: auto; .message-author { font-size: small; display: block; text-align: center; margin: 0px 0px 0px 0px; } } .chat-message-wrapper, .chat-message-content { float: right; } .chat-message-wrapper { .message-time { font-size: xx-small; display: block; text-align: right; } &:before { right: -$spacing; top: 30px; border-left-color: $color-blue; } } p { background: $color-blue; border-top-color: $color-blue - 20; } img { float: right; } } .chat-message-content { @include clearfix; @include radius; } .chat-details { clear: both; width: 100%; @include clearfix; .chat-message-localization { color: #8a8a8a; margin: 0px 0px 0px 0px; display: block; font-size: 10px; border: 1px solid rgba(0, 0, 0, 0.23); padding: 2px 0px 2px 7px; border-radius: 37px; width: 51px; &:hover { background: #f1f1f1; color: black; border: 1px solid white; } } } }
}
.chat-wrapper::-webkit-scrollbar {
width: 6px;
}
.chat-wrapper::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.58);
}
.bottom_wrapper {
position: fixed; width: 60%; background-color: white; padding: 10px 10px 0px 10px; z-index: 9; bottom: 23px; .message_input_wrapper { display: block; height: 38px; border-radius: 20px; border: 1px solid #bcbdc0; width: calc(100% - 160px); position: relative; padding: 0 20px; .message_input { border: none; height: 100%; box-sizing: border-box; width: calc(100% - 40px); position: absolute; outline-width: 0; color: gray; } } .send_message { width: 20%; display: block; border-radius: 50px; background-color: #a3d063; border: 2px solid #a3d063; color: white; cursor: pointer; transition: all 0.2s linear; text-align: center; float: right; &:hover { color: #a3d063; background-color: white; } .text { font-size: 18px; font-weight: 300; display: inline-block; line-height: 34px; border: none; background: none; outline: none; } }
}
.chat-message-localization {
&:hover { cursor: pointer; }
}
.loading {
font-size: 16px; font-weight: bold; margin: 100px auto; position: relative; text-align: center; width: 100%; max-width: 200px; p { border-top: solid 1px #c5c5c5; color: #f93841; padding-top: 15px; width: 100%; animation-name: loading; -webkit-animation: loading 2s ease-out infinite; -moz-animation: loading 2s ease-out infinite; animation: loading 2s ease-out infinite; &:before { content: ""; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; border-radius: 30px; display: inline-block; border-style: solid; border-width: 20px 20px 20px 20px; border-color: #b2060e transparent transparent transparent; position: absolute; top: -20px; left: -10px; animation-name: loading; -webkit-animation: loading 2s ease-out infinite; -moz-animation: loading 2s ease-out infinite; animation: loading 2s ease-out infinite; } }
}
@-moz-keyframes loading {
0% { left: -15px; } 50% { left: 185px; color: #c5c5c5; } 100% { left: -15px; }
}
@-webkit-keyframes loading {
0% { left: -15px; } 50% { left: 185px; color: #c5c5c5; } 100% { left: -15px; }
}
@keyframes loading {
0% { left: -15px; } 50% { left: 185px; color: #c5c5c5; } 100% { left: -15px; }
}
.load-messages {
border: 2px #a3d063 solid; padding: 5px 20px 5px 20px; font-size: 16px; margin-bottom: 15px; border-radius: 35px; outline: none; background-color: transparent; &:hover { background-color: #a3d063; color: white; }
}
.denshobato-send-message {
width: 70%; position: fixed; bottom: 0px; outline: none; margin-bottom: 30px; z-index: 999; input { width: 70%; border-radius: 20px; border: 1px solid #BBBBBB; padding: 5px 0px 5px 10px; } button { width: 15%; display: inline-block; padding: 5px; border-radius: 50px; background-color: #a3d063; border: 2px solid #a3d063; color: white; cursor: pointer; transition: all 0.2s linear; text-align: center; &:hover { color: #a3d063; background-color: white; } }
}