2017-12-16 06:20:59 +01:00
|
|
|
// overrides for the base css of converse/inverse
|
|
|
|
|
|
|
|
@text-color: #212529;
|
|
|
|
@link-color: #007bff;
|
|
|
|
@hover-color: #0056b3;
|
|
|
|
@bg-color: #578ea9;
|
|
|
|
@primary-bg-color: #007bff;
|
|
|
|
@primary-text-color: #fff;
|
|
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
height:100vh; background-color:@bg-color; color:@text-color;
|
|
|
|
.brand-heading {
|
|
|
|
margin:auto; font-size:6em; font-weight:bold;
|
|
|
|
.icon-conversejs { font-size:0.88em; }
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.converse-bg {
|
|
|
|
position:relative; height:100vh; text-align:center; color:#fff;
|
|
|
|
.brand-heading { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
|
|
|
|
}
|
|
|
|
|
|
|
|
.xmpp-status, .xmpp-status-menu {
|
|
|
|
.online { color:#28a745; }
|
|
|
|
.dnd { color:#dc3545; }
|
|
|
|
.away { color:#17a2b8; }
|
|
|
|
.logout, .offline { color:#868e96; }
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#mockups {
|
|
|
|
position:fixed; bottom:0; left:50%; padding:7px; z-index:2000;
|
|
|
|
background-color:@bg-color; transform:translate(-50%, 0%);
|
|
|
|
a {
|
|
|
|
width:30px; padding:4px; background:#aaa; border:1px solid #000;
|
|
|
|
color:#000; font-size:0.9em;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
#conversejs {
|
|
|
|
margin:10px 0 0;
|
|
|
|
p { margin-bottom:1rem; }
|
|
|
|
a, a:visited { color:@link-color; }
|
|
|
|
a:hover { color:@hover-color; }
|
|
|
|
canvas { background:#000; border-radius:4px; margin:2px 0; }
|
|
|
|
form.pure-form.converse-form {
|
|
|
|
input[type=button], input[type=submit] { margin-right:0; }
|
|
|
|
}
|
|
|
|
|
|
|
|
.badge { padding:0.25em 0.4em; line-height:1; font-weight:700; font-size:0.9em; }
|
|
|
|
.btn.btn-primary { color:@primary-text-color; }
|
|
|
|
.chat-head .avatar { border-radius:5px; }
|
|
|
|
|
|
|
|
.fa {
|
|
|
|
font:normal normal normal 14px/1 FontAwesome;
|
|
|
|
display:inline-block; font-size:inherit; text-rendering:auto;
|
|
|
|
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
|
|
|
|
}
|
|
|
|
|
|
|
|
#controlbox {
|
|
|
|
margin-right:0.5em;
|
|
|
|
.controlbox-pane { height:100%; border-radius:5px; }
|
|
|
|
.controlbox-pane label { margin:8px; }
|
|
|
|
#login-dialog {
|
|
|
|
.brand-heading { margin-top:3.5%; font-size:2.5em; color:@bg-color; }
|
|
|
|
}
|
|
|
|
#chatrooms .rooms-list-container { margin:10px 0; }
|
|
|
|
}
|
|
|
|
|
|
|
|
#converse-roster {
|
|
|
|
height:calc(~"100% - 70px"); margin-top:0; padding-bottom:15px; overflow:auto;
|
|
|
|
border-bottom:1px solid #777;
|
|
|
|
.roster-filter-form {
|
|
|
|
margin:5px 0 0;
|
|
|
|
input { width:56%; margin-right:5px; }
|
|
|
|
span { margin:0; padding:0.2em; color:#888; cursor:pointer; }
|
|
|
|
span.fa-user { color:#000; }
|
|
|
|
.form-group { margin-bottom:0.5rem; }
|
|
|
|
}
|
|
|
|
.roster-contacts {
|
|
|
|
height:auto; font-size:0.875rem; overflow:hidden;
|
|
|
|
dd {
|
|
|
|
height:28px;
|
|
|
|
a { text-overflow:initial; overflow:visible; }
|
|
|
|
a.remove-xmpp-contact { font-size:0.95em; }
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
#minimized-chats .badge { position:absolute; right:122px; bottom:8px; border:1px solid #111; }
|
|
|
|
|
|
|
|
&.fullscreen {
|
|
|
|
width:100%; height:100%; right:0; bottom:0; color:@text-color;
|
|
|
|
&.login {
|
2017-12-16 06:40:42 +01:00
|
|
|
width:calc(~"100vw - 20px"); height:calc(~"100vh - 20px"); margin:10px;
|
2017-12-16 06:20:59 +01:00
|
|
|
#controlbox #login-dialog {
|
|
|
|
height:100%; border-radius:5px;
|
|
|
|
.brand-heading { font-size:6em; }
|
|
|
|
.converse-form { margin:0; padding:3em 2em 3em; }
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&.chatbox {
|
|
|
|
margin:0;
|
|
|
|
.chatbox { width:100%; }
|
|
|
|
.chatbox .box-flyout { width:100%; height:100vh; }
|
|
|
|
}
|
|
|
|
#controlbox {
|
|
|
|
width:100%; margin-right:0;
|
|
|
|
.box-flyout { width:100%; }
|
|
|
|
.controlbox-pane { height:100vh; border-radius:0; }
|
|
|
|
}
|
|
|
|
.chatroom .box-flyout .chatroom-body .chat-area { height:calc(~"100vh - 95px"); }
|
|
|
|
}
|
|
|
|
|
|
|
|
.sidebar {
|
|
|
|
display:none; position:absolute; width:50px; height:100vh; padding:10px 0;
|
|
|
|
background-color:@bg-color; text-align:center;
|
|
|
|
.chatbox-btn {
|
|
|
|
float:none; margin:0; font-size:1.35em;
|
|
|
|
&.fa-vcard { margin-top:30px; }
|
|
|
|
}
|
|
|
|
.bottom { position:absolute; bottom:10px; }
|
|
|
|
}
|
|
|
|
|
|
|
|
.chatbox {
|
|
|
|
.chat-content { padding:0.5em; }
|
|
|
|
.chat-body {
|
|
|
|
background:#fff;
|
|
|
|
.chat-message {
|
|
|
|
margin:0.3em;
|
|
|
|
canvas { vertical-align:middle; background:#777; }
|
|
|
|
.chat-msg-me canvas { background:@bg-color; }
|
|
|
|
.chat-msg-them canvas { background:#e77051; }
|
|
|
|
.chat-msg-author { float:none; }
|
|
|
|
}
|
|
|
|
}
|
|
|
|
form.sendXMPPMessage {
|
|
|
|
textarea { resize:none; border:none; border-top-left-radius:0; border-top-right-radius:0; }
|
|
|
|
.chat-toolbar {
|
|
|
|
a, li.toggle-toolbar-menu { color:@text-color; }
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.chatroom .box-flyout .chatroom-body {
|
|
|
|
.chat-area {
|
|
|
|
min-width:100%; height:395px;
|
|
|
|
.chat-content { padding:0.5em; }
|
|
|
|
}
|
|
|
|
.chat-info { color:#fff; line-height:normal; }
|
|
|
|
.occupants {
|
|
|
|
.chatroom-features { bottom:0; width:auto; }
|
|
|
|
ul li.feature { float:left; margin-right:0.5em; padding-right:0; font-size:1em; cursor:help; }
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
#users {
|
|
|
|
position:relative;
|
|
|
|
#chatrooms {
|
|
|
|
padding-bottom:5px; border-bottom:1px solid #aaa;
|
|
|
|
.rooms-list-container dl.rooms-list {
|
|
|
|
.available-chatroom, .open-chatroom { padding:0.1em 0; }
|
|
|
|
a + a { line-height:22px; }
|
|
|
|
}
|
|
|
|
}
|
|
|
|
#chatrooms, #contacts { margin-top:0.75em; }
|
|
|
|
.userinfo {
|
|
|
|
padding-bottom:10px; border-bottom:1px solid #aaa;
|
|
|
|
.username { margin-left:5px; }
|
|
|
|
.d-flex { margin-bottom:2px; }
|
|
|
|
}
|
|
|
|
&.controlbox-pane { height:450px; text-align:left; }
|
|
|
|
.chatbox-btn { margin:0; color:@link-color; }
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width: 575px) {
|
|
|
|
body {
|
|
|
|
.brand-heading { font-size:3.75em; }
|
|
|
|
}
|
|
|
|
|
|
|
|
#conversejs {
|
|
|
|
&.fullscreen.login, & {
|
|
|
|
#controlbox #login-dialog .brand-heading { font-size:3.75em; }
|
|
|
|
}
|
|
|
|
.chatbox .chat-body { border-radius:7px; }
|
|
|
|
.flyout { border-radius:4px; }
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (max-width: 767px) {
|
|
|
|
#conversejs {
|
|
|
|
left:0; margin:0;
|
|
|
|
&.fullscreen {
|
|
|
|
&.chatbox {
|
|
|
|
> .chatbox, .chatroom { width:calc(~"100% - 50px"); }
|
|
|
|
&.sidebar-open {
|
|
|
|
#controlbox #users { display:block; }
|
|
|
|
> .chatbox:not(#controlbox), .chatroom { display:none; }
|
|
|
|
}
|
|
|
|
.chatbox .box-flyout { left:0; }
|
|
|
|
}
|
|
|
|
}
|
|
|
|
&.login {
|
|
|
|
margin:10px;
|
|
|
|
#controlbox {
|
|
|
|
margin:0;
|
|
|
|
.controlbox-pane { font-size:1.15em; }
|
|
|
|
&.chatbox { width:100%; }
|
|
|
|
}
|
|
|
|
.chatbox .box-flyout { height:calc(~"100vh - 20px"); width:100%; bottom:0; left:0; }
|
|
|
|
}
|
|
|
|
&.sidebar-open {
|
|
|
|
#controlbox #users { display:block; }
|
|
|
|
> .chatbox:not(#controlbox) { display:none; }
|
|
|
|
}
|
|
|
|
|
|
|
|
#controlbox {
|
|
|
|
#users {
|
|
|
|
position:absolute; top:0; left:50px; display:none;
|
|
|
|
width:calc(~"100% - 50px");
|
|
|
|
}
|
|
|
|
.box-flyout { width:100%; left:0; }
|
|
|
|
.sidebar { display:block; }
|
|
|
|
}
|
|
|
|
|
|
|
|
#users.controlbox-pane { height:100vh; }
|
|
|
|
#login-dialog .pure-form.converse-form { padding:3em 2em 3em; }
|
|
|
|
> .chatbox { width:calc(~"100% - 50px"); }
|
|
|
|
.chatbox .chat-body .chat-message .chat-msg-author { white-space:normal; }
|
|
|
|
.chatbox .box-flyout {
|
|
|
|
left:50px; bottom:0; width:calc(~"100% - 50px"); height:100vh; box-shadow:none;
|
|
|
|
.chatroom-body .chat-area { height:calc(~"100vh - 55px"); }
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (min-width: 576px) {
|
|
|
|
#conversejs {
|
|
|
|
.offset-sm-2 { margin-left: 16.666667%; }
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (min-width: 768px) {
|
|
|
|
#conversejs {
|
|
|
|
.offset-md-2 { margin-left: 16.666667%; }
|
|
|
|
.offset-md-3 { margin-left: 25%; }
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (min-width: 992px) {
|
|
|
|
#conversejs {
|
|
|
|
.offset-lg-2 { margin-left: 16.666667%; }
|
|
|
|
.offset-lg-3 { margin-left: 25%; }
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (min-width: 1200px) {
|
|
|
|
#conversejs {
|
|
|
|
.offset-xl-2 { margin-left: 16.666667%; }
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (max-height: 450px) {
|
|
|
|
#conversejs { left:0; }
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (max-width: 480px) {
|
|
|
|
#conversejs { width:auto; }
|
|
|
|
}
|
|
|
|
|
|
|
|
|