@import (once) "../../customize/src/less2/include/browser.less"; @import (once) "../../customize/src/less2/include/toolbar.less"; @import (once) "../../customize/src/less2/include/markdown.less"; @import (once) '../../customize/src/less2/include/fileupload.less'; @import (once) '../../customize/src/less2/include/alertify.less'; @import (once) '../../customize/src/less2/include/avatar.less'; .toolbar_main( @bg-color: @colortheme_friends-bg, @warn-color: @colortheme_friends-warn, @color: @colortheme_friends-color ); .fileupload_main(); .alertify_main(); // body &.cp-app-contacts { @keyframes example { 0% { background: rgba(0,0,0,0.1); } 50% { background: rgba(0,0,0,0.3); } 100% { background: rgba(0,0,0,0.1); } } display: flex; flex-flow: column; background-color: red !important; @button-border: 2px; @bg-color: @colortheme_friends-bg; @color: @colortheme_friends-color; #cp-app-contacts-container { flex: 1; display: flex; justify-content: center; align-items: center; min-height: 0; &.ready { background-size: cover; background-position: center; } } #cp-toolbar { display: flex; // We need this to remove a 3px border at the bottom of the toolbar } #cp-app-contacts-friendlist { width: 350px; height: 100%; background-color: lighten(@bg-color, 10%); overflow-y: auto; .cp-app-contacts-friend { background: rgba(0,0,0,0.1); padding: 5px; margin: 10px; cursor: pointer; position: relative; .cp-app-contacts-right-col { margin-left: 5px; display: flex; flex-flow: column; } &:hover { background-color: rgba(0,0,0,0.3); } &.cp-app-contacts-notify { animation: example 2s ease-in-out infinite; } } .cp-app-contacts-remove { cursor: pointer; width: 20px; &:hover { color: darken(@color, 20%); } } } #cp-app-contacts-friendlist .cp-app-contacts-friend, #cp-app-contacts-messaging .cp-avatar { .avatar_main(30px); &.cp-avatar { display: flex; } cursor: pointer; color: @color; media-tag { img { color: #000; } } media-tag, .cp-avatar-default { margin-right: 5px; } .cp-app-contacts-status { width: 5px; display: inline-block; position: absolute; right: 0; top: 0; bottom: 0; opacity: 0.7; background-color: #777; &.cp-app-contacts-online { background-color: green; } &.cp-app-contacts-offline { background-color: red; } } } .placeholder (@color: #bbb) { &::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: @color; } &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: @color; opacity: 1; } &::-moz-placeholder { /* Mozilla Firefox 19+ */ color: @color; opacity: 1; } &:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: @color; } &::-ms-input-placeholder { /* Microsoft Edge */ color: @color; } } #cp-app-contacts-messaging { flex: 1; height: 100%; background-color: lighten(@bg-color, 20%); min-width: 0; .cp-app-contacts-info { padding: 20px; } .cp-app-contacts-header { background-color: lighten(@bg-color, 15%); padding: 0; display: flex; justify-content: space-between; align-items: center; height: 50px; .hover () { height: 100%; line-height: 30px; padding: 10px; &:hover { background-color: rgba(50,50,50,0.3); } } .cp-avatar, .cp-app-contacts-right-col { flex:1 1 auto; } .cp-app-contacts-remove-history { .hover; } .cp-avatar { margin: 10px; } .cp-app-contacts-more-history { //display: none; .hover; &.cp-app-contacts-faded { color: darken(@bg-color, 5%); } } } .cp-app-contacts-chat { height: 100%; display: flex; flex-flow: column; .cp-app-contacts-messages { padding: 0 20px; margin: 10px 0; flex: 1; overflow-x: auto; .cp-app-contacts-message { & > div { padding: 0 10px; } .cp-app-contacts-content { overflow: hidden; word-wrap: break-word; &> * { margin: 0; } } .cp-app-contacts-date { display: none; font-style: italic; } .cp-app-contacts-sender { margin-top: 10px; font-weight: bold; background-color: rgba(0,0,0,0.1); } } } } .cp-app-contacts-input { background-color: lighten(@bg-color, 15%); height: auto; min-height: 50px; display: flex; align-items: center; justify-content: center; padding: 0 75px; textarea { margin: 5px 0; padding: 0 10px; border: none; height: 50px; flex: 1; background-color: darken(@bg-color, 10%); color: @color; resize: none; line-height: 50px; overflow-y: auto; .placeholder(#bbb); &[disabled=true] { .placeholder(#999); } &:placeholder-shown { line-height: 50px; } } button { height: 50px; border-radius: 0; border: none; background-color: darken(@bg-color, 15%); &:hover { background-color: darken(@bg-color, 20%); } } } } }