Skip to content

C
converse.js
Commit e6d56314 authored by JC Brand's avatar JC Brand
Browse files
Options

Start moving css from mockup.css into the core sass files

parent 90035a3c
Show whitespace changes
Inline Side-by-side
Showing with 809 additions and 776 deletions
css/converse.css
View file @ e6d56314
......@@ -1097,6 +1097,19 @@
color: #578EA9;
text-shadow: none; }
.converse-bg {
position: relative;
height: 100vh;
text-align: center;
color: #fff; }
body .brand-heading {
margin: auto;
font-size: 6em;
font-weight: bold; }
body .brand-heading .icon-conversejs {
font-size: 0.88em; }
#converse-embedded-chat,
#conversejs {
bottom: 0;
......@@ -1139,15 +1152,60 @@
#converse-embedded-chat ::placeholder,
#conversejs ::placeholder {
color: #A8ABA1; }
#converse-embedded-chat .circle,
#conversejs .circle {
border-radius: 50%; }
#converse-embedded-chat ::selection,
#conversejs ::selection {
background-color: #DCF9F6; }
#converse-embedded-chat ::-moz-selection,
#conversejs ::-moz-selection {
background-color: #DCF9F6; }
#converse-embedded-chat canvas,
#conversejs canvas {
background: #000;
border-radius: 4px;
margin: 2px 0; }
#converse-embedded-chat .circle,
#conversejs .circle {
border-radius: 50%; }
#converse-embedded-chat .sidebar,
#conversejs .sidebar {
display: none;
position: absolute;
width: 50px;
height: 100vh;
padding: 10px 0;
background-color: #578EA9;
text-align: center; }
#converse-embedded-chat .sidebar .chatbox-btn,
#conversejs .sidebar .chatbox-btn {
float: none;
margin: 0;
font-size: 1.35em; }
#converse-embedded-chat .sidebar .chatbox-btn.fa-vcard,
#conversejs .sidebar .chatbox-btn.fa-vcard {
margin-top: 1em; }
#converse-embedded-chat .sidebar .bottom,
#conversejs .sidebar .bottom {
position: absolute;
bottom: 1em; }
#converse-embedded-chat .badge,
#conversejs .badge {
padding: 0.25em 0.4em;
line-height: 1; }
#converse-embedded-chat .fa,
#conversejs .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; }
#converse-embedded-chat .list-container,
#conversejs .list-container {
text-align: left;
margin: 0.3em 0; }
#converse-embedded-chat .btn.btn-primary,
#conversejs .btn.btn-primary {
color: #fff; }
#converse-embedded-chat .no-text-select,
#conversejs .no-text-select {
-webkit-touch-callout: none;
......@@ -1396,7 +1454,6 @@
min-width: 50%; }
#converse-embedded-chat form.pure-form.converse-form label,
#conversejs form.pure-form.converse-form label {
margin: 1em 0;
font-size: 16px; }
#converse-embedded-chat form.pure-form.converse-form input[type=text],
#converse-embedded-chat form.pure-form.converse-form input[type=password],
......@@ -1622,16 +1679,20 @@
font-style: italic; }
#converse-embedded-chat .chatbox .chat-body .chat-message,
#conversejs .chatbox .chat-body .chat-message {
overflow: auto; }
overflow: auto;
margin: 0.3em; }
#converse-embedded-chat .chatbox .chat-body .chat-message.onload,
#conversejs .chatbox .chat-body .chat-message.onload {
animation: colorchange-chatmessage 1s;
-webkit-animation: colorchange-chatmessage 1s; }
#converse-embedded-chat .chatbox .chat-body .chat-message canvas,
#conversejs .chatbox .chat-body .chat-message canvas {
vertical-align: middle;
background: #818479; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-author,
#conversejs .chatbox .chat-body .chat-message .chat-msg-author {
font-weight: bold;
white-space: nowrap;
float: left;
text-overflow: ellipsis;
overflow: hidden; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-them,
......@@ -1713,12 +1774,14 @@
width: 100%; } }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea,
#conversejs .chatbox form.sendXMPPMessage .chat-textarea {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border: 0;
height: 70px;
padding: 0.5em;
width: 100%;
border: none;
resize: none; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .send-button,
#conversejs .chatbox form.sendXMPPMessage .send-button {
......@@ -1930,14 +1993,14 @@
#conversejs #controlbox {
margin-right: 1em; }
#conversejs #controlbox .pure-form.converse-form {
padding: 0; }
@media screen and (max-width: 480px) {
#conversejs #controlbox {
margin: 0; } }
@media screen and (max-height: 450px) {
#conversejs #controlbox {
margin: 0; } }
#conversejs #controlbox .pure-form.converse-form {
padding: 0; }
#conversejs #controlbox .controlbox-head {
background-color: #578EA9;
border-top-left-radius: 4px;
......@@ -2035,10 +2098,11 @@
#conversejs #controlbox .conn-feedback p.feedback-subject.error {
font-weight: bold; }
#conversejs #controlbox .brand-heading-container .brand-heading {
text-align: left;
font-size: 150%; }
text-align: center; }
#conversejs #controlbox .brand-heading-container .brand-name {
font-size: 120%; }
#conversejs #controlbox #login-dialog .brand-heading {
color: #578EA9; }
#conversejs #controlbox .toggle-register-login {
font-weight: bold; }
#conversejs #controlbox .oauth-login {
......@@ -2046,6 +2110,8 @@
color: #777; }
#conversejs #controlbox .oauth-login .icon-social:before {
font-size: 16px; }
#conversejs #controlbox #converse-register fieldset.buttons, #conversejs #controlbox #converse-login fieldset.buttons {
text-align: center; }
#conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
height: auto;
white-space: normal; }
......@@ -2058,8 +2124,24 @@
display: block;
font-weight: normal;
margin: 1em 0; }
#conversejs #controlbox #users {
overflow-y: hidden;
position: relative; }
#conversejs #controlbox #users .add-converse-contact {
margin: 0 0 0.75em 0; }
#conversejs #controlbox #users .chatbox-btn {
margin: 0; }
#conversejs #controlbox #chatrooms, #conversejs #controlbox #contacts {
margin-top: 0.75em; }
#conversejs #controlbox #users .userinfo {
padding-bottom: 1em;
border-bottom: 1px solid #818479; }
#conversejs #controlbox #users .userinfo .username {
margin-left: 0.5em; }
#conversejs #controlbox #users .userinfo .d-flex {
margin-bottom: 0.2em; }
#conversejs #controlbox #chatrooms {
border-bottom: 1px solid #818479; }
#conversejs #controlbox #chatrooms form.add-chatroom {
margin: 0;
padding: 0; }
......@@ -2067,19 +2149,16 @@
#conversejs #controlbox #chatrooms form.add-chatroom input[type=submit],
#conversejs #controlbox #chatrooms form.add-chatroom input[type=text] {
width: 100%; }
#conversejs #controlbox #chatrooms .rooms-list-container {
text-align: left;
margin: 0; }
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-toggle {
display: block;
color: #777;
margin-top: 1em; }
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-toggle:hover {
color: #585B51; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list {
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list {
margin: 0.5em 0;
text-align: left; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dt {
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list dt {
border: none;
color: #777;
font-weight: normal;
......@@ -2087,72 +2166,72 @@
padding-bottom: 0.5em;
text-shadow: 0 1px 0 #FAFAFA;
word-wrap: break-word; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom {
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom {
border: none;
clear: both;
color: #777;
display: block;
overflow: hidden;
padding: 0.3em 0;
padding: 0.2em 0;
text-shadow: 0 1px 0 #FAFAFA;
word-wrap: break-word; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom a:hover,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom a:hover {
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a:hover,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a:hover {
color: #206485; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom.unread-msgs .available-room,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom.unread-msgs .open-room,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom.unread-msgs .available-room,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom.unread-msgs .open-room {
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom.unread-msgs .available-room,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom.unread-msgs .open-room,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom.unread-msgs .available-room,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom.unread-msgs .open-room {
max-width: 55%;
width: auto;
font-weight: bold; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom a.room-info:before,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom a.room-info:before {
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.room-info:before,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.room-info:before {
font-size: 15px; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom a.open-room,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom a.open-room {
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.open-room,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.open-room {
width: 68%;
float: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 0.5em; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom a.available-room,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom a.available-room {
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.available-room,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.available-room {
width: 85%; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .add-bookmark,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .remove-bookmark,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .add-bookmark,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .remove-bookmark {
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .add-bookmark,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .remove-bookmark,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark {
color: #A8ABA1; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .add-bookmark.button-on,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .remove-bookmark.button-on,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .add-bookmark.button-on,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .remove-bookmark.button-on {
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .add-bookmark.button-on,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .remove-bookmark.button-on,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark.button-on,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark.button-on {
color: #578EA9; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .add-bookmark.button-on:hover,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .remove-bookmark.button-on:hover,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .add-bookmark.button-on:hover,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .remove-bookmark.button-on:hover {
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .add-bookmark.button-on:hover,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .remove-bookmark.button-on:hover,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark.button-on:hover,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark.button-on:hover {
color: #206485; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .room-info,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .room-info {
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .room-info,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .room-info {
font-size: 12px;
font-style: normal;
font-weight: normal; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom li.room-info,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom li.room-info {
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom li.room-info,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom li.room-info {
display: block;
margin-left: 5px; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom p.room-info,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom p.room-info {
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom p.room-info,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom p.room-info {
line-height: 16px;
margin: 0;
display: block;
white-space: normal; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom div.room-info,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom div.room-info {
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom div.room-info,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom div.room-info {
padding: 0.3em 0;
clear: left;
width: 100%; }
......@@ -2290,10 +2369,12 @@
font-size: 14px;
position: absolute;
left: 0;
text-align: center;
text-align: left;
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: hidden; }
overflow-x: hidden;
border-radius: 4px; }
#conversejs #controlbox .controlbox-pane .switch-form {
padding-bottom: 2em; }
#conversejs #controlbox .controlbox-pane .switch-form p {
......@@ -2301,15 +2382,12 @@
#conversejs #controlbox .controlbox-pane label {
font-size: 14px;
font-weight: bold;
height: auto;
margin: 4px; }
height: auto; }
#conversejs #controlbox .controlbox-pane dd {
margin-left: 0;
margin-bottom: 0; }
#conversejs #controlbox .controlbox-pane dd.odd {
background-color: #DCEAC5; }
#conversejs #controlbox #users {
overflow-y: hidden; }
#conversejs #controlbox .add-xmpp-contact {
padding: 1em 0.5em; }
#conversejs #controlbox .add-xmpp-contact input {
......@@ -2346,6 +2424,14 @@
padding: 10px 8px 0 8px; }
#conversejs .toggle-controlbox span {
color: white; }
#conversejs .xmpp-status .online, #conversejs .xmpp-status-menu .online {
color: #3AA569; }
#conversejs .xmpp-status .dnd, #conversejs .xmpp-status-menu .dnd {
color: #E77051; }
#conversejs .xmpp-status .away, #conversejs .xmpp-status-menu .away {
color: #578EA9; }
#conversejs .xmpp-status .logout, #conversejs .xmpp-status .offline, #conversejs .xmpp-status-menu .logout, #conversejs .xmpp-status-menu .offline {
color: #818479; }
#conversejs #controlbox #converse-register .button-cancel {
font-size: 90%; }
......@@ -2356,7 +2442,8 @@
height: -webkit-calc(100% - 55px);
height: calc(100% - 55px); }
#conversejs #controlbox .brand-heading-container .brand-heading {
margin-left: 1em; }
font-size: 2.2em;
margin: 1em 0; }
#conversejs #controlbox .available-chatroom.unread-msgs .msgs-indicator {
border-radius: 10%;
......@@ -2366,34 +2453,38 @@
text-align: left;
width: 100%;
position: relative;
margin: 1em 0 0 0;
margin: 0;
height: 194px;
height: calc(100% - 50px - 20px);
overflow: hidden;
padding: 0;
padding-bottom: 3em;
height: calc(~"100% - 50px - 20px");
border-bottom: 1px solid #818479;
padding: 0 0 2em 0;
overflow: scroll;
height: calc(100% - 70px);
/* Custom addition for CSP */ }
#conversejs #converse-roster.no-contact-requests {
height: calc(100% - 25px - 20px); }
height: calc(~"100% - 50px - 20px"); }
#conversejs #converse-roster #online-count {
display: none; }
#conversejs #converse-roster .search-xmpp ul li.chat-info {
padding-left: 10px; }
#conversejs #converse-roster .roster-filter-form {
margin: 0 0 0.5em 0;
margin: 0.2em 0 0;
width: 100%;
/* (jQ addClass:) if input has value: */
/* (jQ addClass:) if mouse is over the 'x' input area*/ }
/* (dynamically added) if input has value: */
/* (dynamically added) if mouse is over the 'x' input area*/ }
#conversejs #converse-roster .roster-filter-form span {
margin: 0;
padding: 0.2em;
color: #888;
cursor: pointer; }
#conversejs #converse-roster .roster-filter-form .roster-filter {
float: left;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg==) no-repeat right -20px center;
border: 1px solid #999;
font-size: 14px;
height: 25px;
margin: 0;
padding: 0;
padding-left: 0.4em;
width: 53%; }
margin: 0.2em 0.2em 0.2em 0;
width: 60%; }
#conversejs #converse-roster .roster-filter-form .roster-filter.x {
background-position: right 3px center; }
#conversejs #converse-roster .roster-filter-form .roster-filter.onX {
......@@ -2423,7 +2514,7 @@
border: 1px solid; }
#conversejs #converse-roster .roster-contacts {
padding: 0;
margin: 0;
margin: 0.2em 0;
height: 100%;
overflow-x: hidden;
overflow-y: auto; }
......@@ -2431,12 +2522,12 @@
border: none;
color: #777;
font-weight: normal;
text-shadow: 0 1px 0 #FAFAFA; }
text-shadow: 0 1px 0 #FAFAFA;
margin: 1em 0 0 0; }
#conversejs #converse-roster .roster-contacts .roster-group .group-toggle {
color: #777;
display: block;
width: 100%;
margin: 0.5em 0; }
width: 100%; }
#conversejs #converse-roster .roster-contacts .roster-group .group-toggle:hover {
color: #585B51; }
#conversejs #converse-roster .roster-contacts .roster-group li {
......@@ -2448,10 +2539,22 @@
overflow-y: hidden;
text-shadow: 0 1px 0 #FAFAFA;
line-height: 14px;
width: 100%;
height: 30px;
margin: 0;
padding: 0.5em 0 0 0; }
width: 100%; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a {
width: 2em; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact :not(.open-chat) {
margin-top: 0.5em; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .request-actions {
padding: 0 0 0 0.3em;
float: right; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .open-chat {
max-width: 70%; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .open-chat .req-contact-name {
width: 100%; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .req-contact-name {
width: 69%;
padding: 0; }
#conversejs #converse-roster .roster-contacts .roster-group li a:hover {
color: #206485; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat {
......@@ -2483,17 +2586,6 @@
float: left;
display: inline-block;
height: 60px; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .request-actions {
padding: 0 0 0 0.3em;
float: right; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .open-chat {
max-width: 70%; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .open-chat .req-contact-name {
width: 100%; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .req-contact-name {
line-height: 16px;
width: 69%;
padding: 0; }
#conversejs #converse-roster .roster-contacts .roster-group li.current-xmpp-contact span {
font-size: 14px;
float: left;
......@@ -2516,7 +2608,8 @@
float: right;
margin: 0;
padding: 0;
color: #A8ABA1; }
color: #A8ABA1;
width: 2em; }
#conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:before {
font-size: 14px; }
#conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:hover {
......@@ -2597,7 +2690,8 @@
width: 100%; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-info,
#conversejs .chatroom .box-flyout .chatroom-body .chat-info {
color: #E77051; }
color: white;
line-height: normal; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .mentioned,
#conversejs .chatroom .box-flyout .chatroom-body .mentioned {
font-weight: bold; }
......@@ -2608,6 +2702,12 @@
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them,
#conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them {
color: #3AA569; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them canvas,
#conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them canvas {
background: #E77051; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-me canvas,
#conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-me canvas {
background: #578EA9; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .disconnect-msg,
#conversejs .chatroom .box-flyout .chatroom-body .disconnect-msg {
padding: 2em 2em 0 2em; }
......@@ -2615,7 +2715,7 @@
#conversejs .chatroom .box-flyout .chatroom-body .chat-area {
word-wrap: break-word;
height: 100%;
width: 70%;
width: 100%;
float: left;
min-width: 200px; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator,
......@@ -2624,7 +2724,7 @@
max-width: 70%; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .chat-content,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
padding: 0 0.5em 0 0.5em; }
padding: 0.5em; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area.full,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area.full {
min-width: 100%; }
......@@ -2651,6 +2751,13 @@
#conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
bottom: 0.5em;
width: 100%; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .chatroom-features .feature,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features .feature {
float: left;
margin-right: 0.5em;
padding-right: 0;
font-size: 1em;
cursor: help; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul {
padding: 0; }
......@@ -2783,6 +2890,11 @@
margin: 0 0.5em;
padding: 0;
width: 130px; }
#conversejs #minimized-chats .badge {
position: absolute;
right: 122px;
bottom: 8px;
border: 1px solid #818479; }
#conversejs #minimized-chats #toggle-minimized-chats {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
......
css/inverse.css
View file @ e6d56314
......@@ -1097,6 +1097,19 @@
color: #578EA9;
text-shadow: none; }
.converse-bg {
position: relative;
height: 100vh;
text-align: center;
color: #fff; }
body .brand-heading {
margin: auto;
font-size: 6em;
font-weight: bold; }
body .brand-heading .icon-conversejs {
font-size: 0.88em; }
#converse-embedded-chat,
#conversejs {
bottom: 0;
......@@ -1139,15 +1152,60 @@
#converse-embedded-chat ::placeholder,
#conversejs ::placeholder {
color: #A8ABA1; }
#converse-embedded-chat .circle,
#conversejs .circle {
border-radius: 50%; }
#converse-embedded-chat ::selection,
#conversejs ::selection {
background-color: #DCF9F6; }
#converse-embedded-chat ::-moz-selection,
#conversejs ::-moz-selection {
background-color: #DCF9F6; }
#converse-embedded-chat canvas,
#conversejs canvas {
background: #000;
border-radius: 4px;
margin: 2px 0; }
#converse-embedded-chat .circle,
#conversejs .circle {
border-radius: 50%; }
#converse-embedded-chat .sidebar,
#conversejs .sidebar {
display: none;
position: absolute;
width: 50px;
height: 100vh;
padding: 10px 0;
background-color: #578EA9;
text-align: center; }
#converse-embedded-chat .sidebar .chatbox-btn,
#conversejs .sidebar .chatbox-btn {
float: none;
margin: 0;
font-size: 1.35em; }
#converse-embedded-chat .sidebar .chatbox-btn.fa-vcard,
#conversejs .sidebar .chatbox-btn.fa-vcard {
margin-top: 1em; }
#converse-embedded-chat .sidebar .bottom,
#conversejs .sidebar .bottom {
position: absolute;
bottom: 1em; }
#converse-embedded-chat .badge,
#conversejs .badge {
padding: 0.25em 0.4em;
line-height: 1; }
#converse-embedded-chat .fa,
#conversejs .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; }
#converse-embedded-chat .list-container,
#conversejs .list-container {
text-align: left;
margin: 0.3em 0; }
#converse-embedded-chat .btn.btn-primary,
#conversejs .btn.btn-primary {
color: #fff; }
#converse-embedded-chat .no-text-select,
#conversejs .no-text-select {
-webkit-touch-callout: none;
......@@ -1396,7 +1454,6 @@
min-width: 50%; }
#converse-embedded-chat form.pure-form.converse-form label,
#conversejs form.pure-form.converse-form label {
margin: 1em 0;
font-size: 18px; }
#converse-embedded-chat form.pure-form.converse-form input[type=text],
#converse-embedded-chat form.pure-form.converse-form input[type=password],
......@@ -1454,6 +1511,7 @@
body {
width: 100%;
height: 100%;
height: 100vh;
font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #ffffff;
background-color: #578EA9; }
......@@ -1687,16 +1745,20 @@ body {
font-style: italic; }
#converse-embedded-chat .chatbox .chat-body .chat-message,
#conversejs .chatbox .chat-body .chat-message {
overflow: auto; }
overflow: auto;
margin: 0.3em; }
#converse-embedded-chat .chatbox .chat-body .chat-message.onload,
#conversejs .chatbox .chat-body .chat-message.onload {
animation: colorchange-chatmessage 1s;
-webkit-animation: colorchange-chatmessage 1s; }
#converse-embedded-chat .chatbox .chat-body .chat-message canvas,
#conversejs .chatbox .chat-body .chat-message canvas {
vertical-align: middle;
background: #818479; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-author,
#conversejs .chatbox .chat-body .chat-message .chat-msg-author {
font-weight: bold;
white-space: nowrap;
float: left;
text-overflow: ellipsis;
overflow: hidden; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-them,
......@@ -1778,12 +1840,14 @@ body {
width: 100%; } }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea,
#conversejs .chatbox form.sendXMPPMessage .chat-textarea {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 0;
height: 70px;
padding: 0.5em;
width: 100%;
border: none;
resize: none; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .send-button,
#conversejs .chatbox form.sendXMPPMessage .send-button {
......@@ -2016,14 +2080,14 @@ body {
#conversejs #controlbox {
margin-right: 1em; }
#conversejs #controlbox .pure-form.converse-form {
padding: 0; }
@media screen and (max-width: 480px) {
#conversejs #controlbox {
margin: 0; } }
@media screen and (max-height: 450px) {
#conversejs #controlbox {
margin: 0; } }
#conversejs #controlbox .pure-form.converse-form {
padding: 0; }
#conversejs #controlbox .controlbox-head {
background-color: #578EA9;
border-top-left-radius: 0;
......@@ -2121,10 +2185,11 @@ body {
#conversejs #controlbox .conn-feedback p.feedback-subject.error {
font-weight: bold; }
#conversejs #controlbox .brand-heading-container .brand-heading {
text-align: left;
font-size: 150%; }
text-align: center; }
#conversejs #controlbox .brand-heading-container .brand-name {
font-size: 120%; }
#conversejs #controlbox #login-dialog .brand-heading {
color: #578EA9; }
#conversejs #controlbox .toggle-register-login {
font-weight: bold; }
#conversejs #controlbox .oauth-login {
......@@ -2132,6 +2197,8 @@ body {
color: #777; }
#conversejs #controlbox .oauth-login .icon-social:before {
font-size: 18px; }
#conversejs #controlbox #converse-register fieldset.buttons, #conversejs #controlbox #converse-login fieldset.buttons {
text-align: center; }
#conversejs #controlbox #converse-register .login-anon, #conversejs #controlbox #converse-login .login-anon {
height: auto;
white-space: normal; }
......@@ -2144,8 +2211,24 @@ body {
display: block;
font-weight: normal;
margin: 1em 0; }
#conversejs #controlbox #users {
overflow-y: hidden;
position: relative; }
#conversejs #controlbox #users .add-converse-contact {
margin: 0 0 0.75em 0; }
#conversejs #controlbox #users .chatbox-btn {
margin: 0; }
#conversejs #controlbox #chatrooms, #conversejs #controlbox #contacts {
margin-top: 0.75em; }
#conversejs #controlbox #users .userinfo {
padding-bottom: 1em;
border-bottom: 1px solid #818479; }
#conversejs #controlbox #users .userinfo .username {
margin-left: 0.5em; }
#conversejs #controlbox #users .userinfo .d-flex {
margin-bottom: 0.2em; }
#conversejs #controlbox #chatrooms {
border-bottom: 1px solid #818479; }
#conversejs #controlbox #chatrooms form.add-chatroom {
margin: 0;
padding: 0; }
......@@ -2153,19 +2236,16 @@ body {
#conversejs #controlbox #chatrooms form.add-chatroom input[type=submit],
#conversejs #controlbox #chatrooms form.add-chatroom input[type=text] {
width: 100%; }
#conversejs #controlbox #chatrooms .rooms-list-container {
text-align: left;
margin: 0; }
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-toggle {
display: block;
color: #777;
margin-top: 1em; }
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-toggle:hover {
color: #585B51; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list {
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list {
margin: 0.5em 0;
text-align: left; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dt {
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list dt {
border: none;
color: #777;
font-weight: normal;
......@@ -2173,72 +2253,72 @@ body {
padding-bottom: 0.5em;
text-shadow: 0 1px 0 #FAFAFA;
word-wrap: break-word; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom {
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom {
border: none;
clear: both;
color: #777;
display: block;
overflow: hidden;
padding: 0.3em 0;
padding: 0.2em 0;
text-shadow: 0 1px 0 #FAFAFA;
word-wrap: break-word; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom a:hover,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom a:hover {
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a:hover,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a:hover {
color: #206485; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom.unread-msgs .available-room,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom.unread-msgs .open-room,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom.unread-msgs .available-room,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom.unread-msgs .open-room {
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom.unread-msgs .available-room,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom.unread-msgs .open-room,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom.unread-msgs .available-room,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom.unread-msgs .open-room {
max-width: 55%;
width: auto;
font-weight: bold; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom a.room-info:before,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom a.room-info:before {
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.room-info:before,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.room-info:before {
font-size: 15px; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom a.open-room,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom a.open-room {
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.open-room,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.open-room {
width: 68%;
float: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 0.5em; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom a.available-room,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom a.available-room {
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.available-room,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.available-room {
width: 85%; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .add-bookmark,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .remove-bookmark,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .add-bookmark,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .remove-bookmark {
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .add-bookmark,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .remove-bookmark,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark {
color: #A8ABA1; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .add-bookmark.button-on,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .remove-bookmark.button-on,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .add-bookmark.button-on,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .remove-bookmark.button-on {
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .add-bookmark.button-on,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .remove-bookmark.button-on,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark.button-on,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark.button-on {
color: #578EA9; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .add-bookmark.button-on:hover,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .remove-bookmark.button-on:hover,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .add-bookmark.button-on:hover,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .remove-bookmark.button-on:hover {
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .add-bookmark.button-on:hover,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .remove-bookmark.button-on:hover,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark.button-on:hover,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark.button-on:hover {
color: #206485; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .room-info,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .room-info {
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .room-info,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .room-info {
font-size: 14px;
font-style: normal;
font-weight: normal; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom li.room-info,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom li.room-info {
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom li.room-info,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom li.room-info {
display: block;
margin-left: 5px; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom p.room-info,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom p.room-info {
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom p.room-info,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom p.room-info {
line-height: 22px;
margin: 0;
display: block;
white-space: normal; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom div.room-info,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom div.room-info {
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom div.room-info,
#conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom div.room-info {
padding: 0.3em 0;
clear: left;
width: 100%; }
......@@ -2376,10 +2456,12 @@ body {
font-size: 16px;
position: absolute;
left: 0;
text-align: center;
text-align: left;
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: hidden; }
overflow-x: hidden;
border-radius: 0; }
#conversejs #controlbox .controlbox-pane .switch-form {
padding-bottom: 2em; }
#conversejs #controlbox .controlbox-pane .switch-form p {
......@@ -2387,15 +2469,12 @@ body {
#conversejs #controlbox .controlbox-pane label {
font-size: 16px;
font-weight: bold;
height: auto;
margin: 4px; }
height: auto; }
#conversejs #controlbox .controlbox-pane dd {
margin-left: 0;
margin-bottom: 0; }
#conversejs #controlbox .controlbox-pane dd.odd {
background-color: #DCEAC5; }
#conversejs #controlbox #users {
overflow-y: hidden; }
#conversejs #controlbox .add-xmpp-contact {
padding: 1em 0.5em; }
#conversejs #controlbox .add-xmpp-contact input {
......@@ -2432,6 +2511,14 @@ body {
padding: 10px 8px 0 8px; }
#conversejs .toggle-controlbox span {
color: white; }
#conversejs .xmpp-status .online, #conversejs .xmpp-status-menu .online {
color: #3AA569; }
#conversejs .xmpp-status .dnd, #conversejs .xmpp-status-menu .dnd {
color: #E77051; }
#conversejs .xmpp-status .away, #conversejs .xmpp-status-menu .away {
color: #578EA9; }
#conversejs .xmpp-status .logout, #conversejs .xmpp-status .offline, #conversejs .xmpp-status-menu .logout, #conversejs .xmpp-status-menu .offline {
color: #818479; }
#conversejs #controlbox {
min-width: 250px;
......@@ -2443,7 +2530,7 @@ body {
#conversejs #controlbox .brand-heading-container {
text-align: center; }
#conversejs #controlbox .brand-heading-container .brand-heading {
text-align: center;
font-size: 150%;
font-size: 600%;
padding: 0.7em 0 0 0;
opacity: 0.8;
......@@ -2494,7 +2581,7 @@ body {
margin-top: 0.5em; }
#conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login {
margin: 2em 30% 3em 30%; }
#conversejs #controlbox #converse-register .title, #conversejs #controlbox #converse-register .instructions, #conversejs #controlbox #converse-register label, #conversejs #controlbox #converse-login .title, #conversejs #controlbox #converse-login .instructions, #conversejs #controlbox #converse-login label {
#conversejs #controlbox #converse-register .title, #conversejs #controlbox #converse-register .instructions, #conversejs #controlbox #converse-login .title, #conversejs #controlbox #converse-login .instructions {
margin: 1em 0; }
#conversejs #controlbox #converse-register input[type=submit],
#conversejs #controlbox #converse-register input[type=button], #conversejs #controlbox #converse-login input[type=submit],
......@@ -2524,34 +2611,38 @@ body {
text-align: left;
width: 100%;
position: relative;
margin: 1em 0 0 0;
margin: 0;
height: 194px;
height: calc(100% - 60px - 20px);
overflow: hidden;
padding: 0;
padding-bottom: 3em;
height: calc(~"100% - 60px - 20px");
border-bottom: 1px solid #818479;
padding: 0 0 2em 0;
overflow: scroll;
height: calc(100% - 70px);
/* Custom addition for CSP */ }
#conversejs #converse-roster.no-contact-requests {
height: calc(100% - 30px - 20px); }
height: calc(~"100% - 60px - 20px"); }
#conversejs #converse-roster #online-count {
display: none; }
#conversejs #converse-roster .search-xmpp ul li.chat-info {
padding-left: 10px; }
#conversejs #converse-roster .roster-filter-form {
margin: 0 0 0.5em 0;
margin: 0.2em 0 0;
width: 100%;
/* (jQ addClass:) if input has value: */
/* (jQ addClass:) if mouse is over the 'x' input area*/ }
/* (dynamically added) if input has value: */
/* (dynamically added) if mouse is over the 'x' input area*/ }
#conversejs #converse-roster .roster-filter-form span {
margin: 0;
padding: 0.2em;
color: #888;
cursor: pointer; }
#conversejs #converse-roster .roster-filter-form .roster-filter {
float: left;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg==) no-repeat right -20px center;
border: 1px solid #999;
font-size: 16px;
height: 30px;
margin: 0;
padding: 0;
padding-left: 0.4em;
width: 53%; }
margin: 0.2em 0.2em 0.2em 0;
width: 60%; }
#conversejs #converse-roster .roster-filter-form .roster-filter.x {
background-position: right 3px center; }
#conversejs #converse-roster .roster-filter-form .roster-filter.onX {
......@@ -2581,7 +2672,7 @@ body {
border: 1px solid; }
#conversejs #converse-roster .roster-contacts {
padding: 0;
margin: 0;
margin: 0.2em 0;
height: 100%;
overflow-x: hidden;
overflow-y: auto; }
......@@ -2589,12 +2680,12 @@ body {
border: none;
color: #777;
font-weight: normal;
text-shadow: 0 1px 0 #FAFAFA; }
text-shadow: 0 1px 0 #FAFAFA;
margin: 1em 0 0 0; }
#conversejs #converse-roster .roster-contacts .roster-group .group-toggle {
color: #777;
display: block;
width: 100%;
margin: 0.5em 0; }
width: 100%; }
#conversejs #converse-roster .roster-contacts .roster-group .group-toggle:hover {
color: #585B51; }
#conversejs #converse-roster .roster-contacts .roster-group li {
......@@ -2606,10 +2697,22 @@ body {
overflow-y: hidden;
text-shadow: 0 1px 0 #FAFAFA;
line-height: 16px;
width: 100%;
height: 30px;
margin: 0;
padding: 0.5em 0 0 0; }
width: 100%; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a {
width: 2em; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact :not(.open-chat) {
margin-top: 0.5em; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .request-actions {
padding: 0 0 0 0.3em;
float: right; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .open-chat {
max-width: 70%; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .open-chat .req-contact-name {
width: 100%; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .req-contact-name {
width: 69%;
padding: 0; }
#conversejs #converse-roster .roster-contacts .roster-group li a:hover {
color: #206485; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat {
......@@ -2641,17 +2744,6 @@ body {
float: left;
display: inline-block;
height: 30px; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .request-actions {
padding: 0 0 0 0.3em;
float: right; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .open-chat {
max-width: 70%; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .open-chat .req-contact-name {
width: 100%; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .req-contact-name {
line-height: 22px;
width: 69%;
padding: 0; }
#conversejs #converse-roster .roster-contacts .roster-group li.current-xmpp-contact span {
font-size: 16px;
float: left;
......@@ -2674,7 +2766,8 @@ body {
float: right;
margin: 0;
padding: 0;
color: #A8ABA1; }
color: #A8ABA1;
width: 2em; }
#conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:before {
font-size: 16px; }
#conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:hover {
......@@ -2761,7 +2854,8 @@ body {
width: 100%; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-info,
#conversejs .chatroom .box-flyout .chatroom-body .chat-info {
color: #E77051; }
color: white;
line-height: normal; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .mentioned,
#conversejs .chatroom .box-flyout .chatroom-body .mentioned {
font-weight: bold; }
......@@ -2772,6 +2866,12 @@ body {
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them,
#conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them {
color: #3AA569; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them canvas,
#conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them canvas {
background: #E77051; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-me canvas,
#conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-me canvas {
background: #578EA9; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .disconnect-msg,
#conversejs .chatroom .box-flyout .chatroom-body .disconnect-msg {
padding: 2em 2em 0 2em; }
......@@ -2779,7 +2879,7 @@ body {
#conversejs .chatroom .box-flyout .chatroom-body .chat-area {
word-wrap: break-word;
height: 100%;
width: 70%;
width: 100%;
float: left;
min-width: 100%; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator,
......@@ -2788,7 +2888,7 @@ body {
max-width: 70%; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .chat-content,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
padding: 0 0.5em 0 0.5em; }
padding: 0.5em; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area.full,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area.full {
min-width: 100%; }
......@@ -2815,6 +2915,13 @@ body {
#conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
bottom: 0.5em;
width: 100%; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .chatroom-features .feature,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features .feature {
float: left;
margin-right: 0.5em;
padding-right: 0;
font-size: 1em;
cursor: help; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul {
padding: 0; }
......
mockup.html deleted 100644 → 0
View file @ 90035a3c
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Converse.js Live Mockup</title>
<meta name="description" content="Converse.js: A chat client for your website" />
<link type="text/css" rel="stylesheet" media="screen" href="../css/theme.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../css/converse.css" />
</head>
<body>
<div id="header_wrap" class="outer">
<header class="inner">
<h1 id="project_title"><a href="http://conversejs.org">Converse.js</a></h1>
<h2 id="project_tagline">Mockups</h2>
</header>
</div>
<ul>
<li><a href="/mockup/fullscreen-login.html" class="btn btn-primary">1a. Fullscreen Login</a></li>
<li><a href="/mockup/overlayed-login.html" class="btn btn-primary">1b. Overlayed Login</a></li>
<li><a href="/mockup/chatbox.html" class="btn btn-primary">2. Fullscreen private chat</a></li>
<li><a href="/mockup/chatroom.html" class="btn btn-primary">3. Fullscreen MUC</a></li>
<li><a href="/mockup/converse.html" class="btn btn-primary">4. Overlayed chats</a></li>
</ul>
</body>
</html>
mockup/chatbox.html
View file @ e6d56314
......@@ -113,7 +113,7 @@
</ul>
</div>
<div class="form-group">
<textarea class="form-control" placeholder="Personal message"></textarea>
<textarea class="chat-textarea form-control" placeholder="Personal message"></textarea>
</div>
</form>
</div>
......
mockup/chatroom.html
View file @ e6d56314
......@@ -91,7 +91,7 @@
</ul>
</div>
<div class="form-group">
<textarea class="form-control" placeholder="Message"></textarea>
<textarea class="chat-textarea form-control" placeholder="Message"></textarea>
</div>
</form>
</div>
......
mockup/converse.html
View file @ e6d56314
......@@ -10,7 +10,11 @@
<link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
</head>
<body>
<body style="background-color: #578EA9">
<div class="converse-bg container">
<h1 class="brand-heading"><i class="icon-conversejs"></i>Converse.js</h1>
</div>
<div id="conversejs" class="chatbox">
<div id="controlbox" class="chatbox">
<div class="flyout box-flyout">
......@@ -110,7 +114,7 @@
</ul>
</div>
<div class="form-group">
<textarea class="form-control" placeholder="Personal message"></textarea>
<textarea class="chat-textarea form-control" placeholder="Personal message"></textarea>
</div>
</form>
</div>
......@@ -180,7 +184,7 @@
</ul>
</div>
<div class="form-group">
<textarea class="form-control" placeholder="Message"></textarea>
<textarea class="chat-textrea form-control" placeholder="Message"></textarea>
</div>
</form>
</div>
......
mockup/css/mockup.css
View file @ e6d56314
body {
height: 100vh;
background-color: #578ea9;
color: #212529;
}
body .brand-heading {
margin: auto;
font-size: 6em;
font-weight: bold;
}
body .brand-heading .icon-conversejs {
font-size: 0.88em;
}
.converse-bg {
position: relative;
height: 100vh;
text-align: center;
color: #fff;
}
.converse-bg .brand-heading {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.xmpp-status .online,
.xmpp-status-menu .online {
color: #28a745;
}
.xmpp-status .dnd,
.xmpp-status-menu .dnd {
color: #dc3545;
}
.xmpp-status .away,
.xmpp-status-menu .away {
color: #17a2b8;
}
.xmpp-status .logout,
.xmpp-status-menu .logout,
.xmpp-status .offline,
.xmpp-status-menu .offline {
color: #868e96;
}
#mockups {
position: fixed;
bottom: 0;
left: 50%;
padding: 7px;
z-index: 2000;
background-color: #578ea9;
-webkit-transform: translate(-50%, 0%);
-ms-transform: translate(-50%, 0%);
transform: translate(-50%, 0%);
}
#mockups a {
width: 30px;
padding: 4px;
background: #aaa;
border: 1px solid #000;
color: #000;
font-size: 0.9em;
}
#conversejs {
margin: 10px 0 0;
}
#conversejs p {
margin-bottom: 1rem;
}
#conversejs a,
#conversejs a:visited {
color: #007bff;
}
#conversejs a:hover {
color: #0056b3;
}
#conversejs canvas {
background: #000;
border-radius: 4px;
margin: 2px 0;
}
#conversejs form.pure-form.converse-form input[type=button],
#conversejs form.pure-form.converse-form input[type=submit] {
margin-right: 0;
}
#conversejs .badge {
padding: 0.25em 0.4em;
line-height: 1;
font-weight: 700;
font-size: 0.9em;
}
#conversejs .btn.btn-primary {
color: #fff;
}
#conversejs .chat-head .avatar {
border-radius: 5px;
}
#conversejs .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;
}
#conversejs #controlbox {
margin-right: 0.5em;
}
#conversejs #controlbox .controlbox-pane {
height: 100%;
border-radius: 5px;
}
#conversejs #controlbox .controlbox-pane label {
margin: 8px;
}
#conversejs #controlbox #login-dialog .brand-heading {
margin-top: 3.5%;
font-size: 2.5em;
color: #578ea9;
}
#conversejs #controlbox #chatrooms .rooms-list-container {
margin: 10px 0;
}
#conversejs #converse-roster {
height: calc(100% - 70px);
margin-top: 0;
padding-bottom: 15px;
overflow: auto;
border-bottom: 1px solid #777;
}
#conversejs #converse-roster .roster-filter-form {
margin: 5px 0 0;
}
#conversejs #converse-roster .roster-filter-form input {
width: 56%;
margin-right: 5px;
}
#conversejs #converse-roster .roster-filter-form span {
margin: 0;
padding: 0.2em;
color: #888;
cursor: pointer;
}
#conversejs #converse-roster .roster-filter-form span.fa-user {
color: #000;
}
#conversejs #converse-roster .roster-filter-form .form-group {
margin-bottom: 0.5rem;
}
#conversejs #converse-roster .roster-contacts {
height: auto;
font-size: 0.875rem;
overflow: hidden;
}
#conversejs #converse-roster .roster-contacts dd {
height: 28px;
}
#conversejs #converse-roster .roster-contacts dd a {
text-overflow: initial;
overflow: visible;
}
#conversejs #converse-roster .roster-contacts dd a.remove-xmpp-contact {
font-size: 0.95em;
}
#conversejs #minimized-chats .badge {
position: absolute;
right: 122px;
bottom: 8px;
border: 1px solid #111;
}
#conversejs.fullscreen {
width: 100%;
height: 100%;
right: 0;
bottom: 0;
color: #212529;
}
#conversejs.fullscreen.login {
width: calc(100vw - 20px);
......@@ -216,117 +44,9 @@ body .brand-heading .icon-conversejs {
#conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chat-area {
height: calc(100vh - 95px);
}
#conversejs .sidebar {
display: none;
position: absolute;
width: 50px;
height: 100vh;
padding: 10px 0;
background-color: #578ea9;
text-align: center;
}
#conversejs .sidebar .chatbox-btn {
float: none;
margin: 0;
font-size: 1.35em;
}
#conversejs .sidebar .chatbox-btn.fa-vcard {
margin-top: 30px;
}
#conversejs .sidebar .bottom {
position: absolute;
bottom: 10px;
}
#conversejs .chatbox .chat-content {
padding: 0.5em;
}
#conversejs .chatbox .chat-body {
background: #fff;
}
#conversejs .chatbox .chat-body .chat-message {
margin: 0.3em;
}
#conversejs .chatbox .chat-body .chat-message canvas {
vertical-align: middle;
background: #777;
}
#conversejs .chatbox .chat-body .chat-message .chat-msg-me canvas {
background: #578ea9;
}
#conversejs .chatbox .chat-body .chat-message .chat-msg-them canvas {
background: #e77051;
}
#conversejs .chatbox .chat-body .chat-message .chat-msg-author {
float: none;
}
#conversejs .chatbox form.sendXMPPMessage textarea {
resize: none;
border: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu {
color: #212529;
}
#conversejs .chatroom .box-flyout .chatroom-body .chat-area {
min-width: 100%;
height: 395px;
}
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
padding: 0.5em;
}
#conversejs .chatroom .box-flyout .chatroom-body .chat-info {
color: #fff;
line-height: normal;
}
#conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
bottom: 0;
width: auto;
}
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.feature {
float: left;
margin-right: 0.5em;
padding-right: 0;
font-size: 1em;
cursor: help;
}
#conversejs #users {
position: relative;
}
#conversejs #users #chatrooms {
padding-bottom: 5px;
border-bottom: 1px solid #aaa;
}
#conversejs #users #chatrooms .rooms-list-container dl.rooms-list .available-chatroom,
#conversejs #users #chatrooms .rooms-list-container dl.rooms-list .open-chatroom {
padding: 0.1em 0;
}
#conversejs #users #chatrooms .rooms-list-container dl.rooms-list a + a {
line-height: 22px;
}
#conversejs #users #chatrooms,
#conversejs #users #contacts {
margin-top: 0.75em;
}
#conversejs #users .userinfo {
padding-bottom: 10px;
border-bottom: 1px solid #aaa;
}
#conversejs #users .userinfo .username {
margin-left: 5px;
}
#conversejs #users .userinfo .d-flex {
margin-bottom: 2px;
}
#conversejs #users.controlbox-pane {
height: 450px;
text-align: left;
}
#conversejs #users .chatbox-btn {
margin: 0;
color: #007bff;
}
@media screen and (max-width: 575px) {
body .brand-heading {
font-size: 3.75em;
......
mockup/fullscreen-login.html
View file @ e6d56314
......@@ -22,7 +22,7 @@
<div class="controlbox-panes">
<div id="login-dialog" class="controlbox-pane">
<div class="row">
<div class="col-12">
<div class="brand-heading-container col-12">
<h1 class="brand-heading">
<i class="icon-conversejs"></i> inVerse</h1>
<p>
......@@ -32,7 +32,7 @@
<div class="row">
<div class="col-sm-8 offset-sm-2 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
<form class="pure-form converse-form">
<form id="converse-login" class="pure-form converse-form">
<div class="form-group">
<label for="jid">XMPP Username:</label>
<input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off">
......@@ -41,9 +41,10 @@
<label for="password">Password:</label>
<input type="password" name="password" class="form-control" placeholder="password" autocomplete="off">
</div>
<p></p>
<fieldset class="buttons">
<p><input class="btn btn-primary" type="submit" value="Log In"></p>
<p>Click <a href="#" data-toggle="modal" data-target="#registerModal">here</a> to register.</p>
</fieldset>
</form>
</div>
</div>
......
mockup/index.html
View file @ e6d56314
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>inVerse Mockups</title>
<meta http-equiv="refresh" content="0; URL=login.php">
<title>Converse.js Live Mockup</title>
<meta name="description" content="Converse.js: A chat client for your website" />
<link type="text/css" rel="stylesheet" media="screen" href="../css/theme.css" />
<link type="text/css" rel="stylesheet" media="screen" href="../css/converse.css" />
</head>
<body>
</body>
<div id="header_wrap" class="outer">
<header class="inner">
<h1 id="project_title"><a href="http://conversejs.org">Converse.js</a></h1>
<h2 id="project_tagline">Mockups</h2>
</header>
</div>
<ul>
<li><a href="/mockup/fullscreen-login.html" class="btn btn-primary">1a. Fullscreen Login</a></li>
<li><a href="/mockup/overlayed-login.html" class="btn btn-primary">1b. Overlayed Login</a></li>
<li><a href="/mockup/chatbox.html" class="btn btn-primary">2. Fullscreen private chat</a></li>
<li><a href="/mockup/chatroom.html" class="btn btn-primary">3. Fullscreen MUC</a></li>
<li><a href="/mockup/converse.html" class="btn btn-primary">4. Overlayed chats</a></li>
</ul>
</body>
</html>
mockup/less/mockup.less
View file @ e6d56314
// 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; }
margin: auto;
font-size: 6em;
font-weight: bold;
.icon-conversejs {
font-size: 0.88em;
}
}
}
......@@ -21,74 +19,7 @@ body {
.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;
......@@ -113,16 +44,6 @@ body {
.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 {
......@@ -175,9 +96,6 @@ body {
}
}
@media screen and (max-width: 575px) {
body {
.brand-heading { font-size:3.75em; }
......@@ -272,5 +190,3 @@ body {
@media screen and (max-width: 480px) {
#conversejs { width:auto; }
}
mockup/menu.html deleted 100644 → 0
View file @ 90035a3c
<div id="mockups">
<a href="login.php" class="btn btn-primary">1a</a>
<a href="login-c.php" class="btn btn-primary">1b</a>
<a href="chatbox.php" class="btn btn-primary">2</a>
<a href="chatroom.php" class="btn btn-primary">3</a>
<a href="converse.php" class="btn btn-primary">4</a>
</div>
mockup/overlayed-login.html
View file @ e6d56314
......@@ -10,8 +10,8 @@
<link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
</head>
<body>
<div class="container converse-bg">
<body style="background-color: #578EA9">
<div class="converse-bg container">
<h1 class="brand-heading"><i class="icon-conversejs"></i>Converse.js</h1>
</div>
......@@ -21,15 +21,12 @@
<div class="controlbox-panes">
<div id="login-dialog" class="controlbox-pane">
<div class="row">
<div class="col-12">
<h1 class="brand-heading">
<i class="icon-conversejs"></i> Converse.js</h1>
<p>
<a href="https://conversejs.org">Open Source</a><br />XMPP chat client</p>
<div class="brand-heading-container col-12">
<h1 class="brand-heading"><i class="icon-conversejs"></i> converse</h1>
</div>
<div class="col-12">
<form class="pure-form converse-form">
<form id="converse-login" class="pure-form converse-form">
<div class="form-group">
<label for="jid">XMPP Username:</label>
<input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off">
......
mockup/sidebar.js
View file @ e6d56314
......@@ -18,7 +18,7 @@ const Sidebar = Backbone.NativeView.extend({
hamburger.classList.remove('fa-times');
hamburger.classList.remove('fa-bars');
} else {
converse_el.addClass('sidebar-open');
converse_el.classList.add('sidebar-open');
hamburger.classList.remove('fa-bars');
hamburger.classList.add('fa-times');
}
......
mockup/user-panel.html
View file @ e6d56314
......@@ -19,7 +19,7 @@
<span class="w-100">Chatrooms</span>
<a class="chatbox-btn fa fa-users" title="Click to change rooms" data-toggle="modal" data-target="#chatroomsModal"></a>
</div>
<div class="rooms-list-container">
<div class="list-container rooms-list-container">
<div class="rooms-list">
<div class="available-chatroom d-flex flex-row">
<a class="open-room available-room w-100" data-room-jid="public@conference.test.com" title="Click to open this room" href="#">public</a>
......@@ -49,7 +49,7 @@
</div>
<form class="pure-form roster-filter-form input-button-group">
<div class="form-group form-inline">
<input value="" class="form-control" placeholder="Filter">
<input value="" class="roster-filter form-control" placeholder="Filter">
<div class="filter-by">
<span class="fa fa-user" title="Filter by contacts"></span>
<span class="fa fa-users" title="Filter by groups"></span>
......@@ -58,90 +58,108 @@
</div>
</form>
<dl class="roster-contacts" style="display: block;">
<dt class="roster-group" style="display: block;">
<div class="roster-contacts">
<div class="roster-group" id="xmpp-contact-requests">
<a href="#" class="group-toggle" title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Contact Requests</a>
<ul>
<li class="offline requesting-xmpp-contact d-flex">
<span class="req-contact-name w-100">Bob Skinstad</span>
<a class="accept-xmpp-request fa fa-check align-self-center" title="Click here to accept this contact's request" href="#"></a>
<a class="decline-xmpp-request fa fa-times align-self-center" title="Click here to decline this contact's request" href="#"></a>
</li>
<li class="offline requesting-xmpp-contact d-flex">
<span class="req-contact-name w-100">André Vos</span>
<a class="accept-xmpp-request fa fa-check align-self-center" title="Click here to accept this contact's request" href="#"></a>
<a class="decline-xmpp-request fa fa-times align-self-center" title="Click here to decline this contact's request" href="#"></a>
</li>
</ul>
</div>
<div class="roster-group" data-group="Colleagues">
<a href="#" data-group="Colleagues" class="group-toggle" title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Colleagues</a>
</dt>
<dd class="online current-xmpp-contact d-flex">
<ul>
<li class="online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#">
<span class="fa fa-circle" title="This contact is online"></span> Victor Matfield</a>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
</dd>
<dd class="away current-xmpp-contact d-flex">
</li>
<li class="away current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#">
<span class="fa fa-circle-o" title="this contact is away"></span> William Winterbottom</a>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
</dd>
<dd class="dnd current-xmpp-contact d-flex">
</li>
<li class="dnd current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#">
<span class="fa fa-minus-circle" title="This contact is busy"></span> Gary Teichmann</a>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
</dd>
<dt class="roster-group" style="display: block;">
</li>
</li>
</div>
<div class="roster-group" data-group="Family">
<a href="#" data-group="Family" class="group-toggle" title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Family</a>
</dt>
<dd class="away current-xmpp-contact d-flex">
<ul>
<li class="away current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#">
<span class="fa fa-circle-o" title="this contact is away"></span> Allan Donald</a>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
</dd>
<dd class="offline current-xmpp-contact d-flex">
</li>
<li class="offline current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#">
<span class="fa fa-times-circle" title="This contact is offline"></span> Corné Krige</a>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
</dd>
<dt class="roster-group" style="display: block;">
</li>
</ul>
</div>
<div class="roster-group" data-group="Friends">
<a href="#" data-group="Friends" class="group-toggle" title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Friends</a>
</dt>
<dd class="online current-xmpp-contact d-flex">
<ul>
<li class="online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#">
<span class="fa fa-circle" title="This contact is online"></span> John Smit</a>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
</dd>
<dd class="online current-xmpp-contact d-flex">
</li>
<li class="online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#">
<span class="fa fa-circle" title="This contact is online"></span> Bakkies Botha</a>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
</dd>
<dt class="roster-group" style="display: block;">
</li>
</ul>
</div>
<div class="roster-group" data-group="Ungrouped">
<a href="#" class="group-toggle" title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Ungrouped</a>
</dt>
<dd class="online current-xmpp-contact d-flex">
<ul>
<li class="online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#">
<span class="fa fa-circle" title="This contact is online"></span> James Small</a>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
</dd>
<dt class="roster-group" id="xmpp-contact-requests" style="display: block;">
<a href="#" class="group-toggle" title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Contact Requests</a>
</dt>
<dd class="offline requesting-xmpp-contact d-flex">
<span class="req-contact-name w-100">Bob Skinstad</span>
<a class="accept-xmpp-request fa fa-check align-self-center" title="Click here to accept this contact's request" href="#"></a>
<a class="decline-xmpp-request fa fa-times align-self-center" title="Click here to decline this contact's request" href="#"></a>
</dd>
<dd class="offline requesting-xmpp-contact d-flex">
<span class="req-contact-name w-100">André Vos</span>
<a class="accept-xmpp-request fa fa-check align-self-center" title="Click here to accept this contact's request" href="#"></a>
<a class="decline-xmpp-request fa fa-times align-self-center" title="Click here to decline this contact's request" href="#"></a>
</dd>
<dt class="roster-group" id="pending-xmpp-contacts" style="display: block;">
</li>
</ul>
</div>
<div class="roster-group" id="pending-xmpp-contacts">
<a href="#" class="group-toggle" title="Click to hide these contacts">
<span class="fa fa-caret-down"></span> Pending Contacts</a>
</dt>
<dd class="offline pending-xmpp-contact d-flex">
<ul>
<li class="offline pending-xmpp-contact d-flex">
<span class="pending-contact-name w-100">Rassie Erasmus</span>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
</dd>
<dd class="offline pending-xmpp-contact d-flex">
</li>
<li class="offline pending-xmpp-contact d-flex">
<span class="pending-contact-name w-100">Victor Matfield</span>
<a class="remove-xmpp-contact fa fa-trash align-self-center" title="Click to remove this contact" href="#"></a>
</dd>
</dl>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- </div> -->
package-lock.json
View file @ e6d56314
......@@ -7516,6 +7516,10 @@
"integrity": "sha1-VusCfWW00tzmyy4tMsTUr8nh1wc=",
"dev": true
},
"snabbdom": {
"version": "github:jcbrand/snabbdom#3ed3a2a1a8b98eab19021d6988f3f4af25b606c8",
"dev": true
},
"snyk": {
"version": "1.69.1",
"resolved": "https://registry.npmjs.org/snyk/-/snyk-1.69.1.tgz",
......
sass/_chatbox.scss
View file @ e6d56314
......@@ -157,15 +157,22 @@
font-style: italic;
}
.chat-message {
overflow: auto; // Ensures that content stays inside
margin: 0.3em;
&.onload {
animation: colorchange-chatmessage 1s;
-webkit-animation: colorchange-chatmessage 1s;
}
overflow: auto; // Ensures that content stays inside
canvas {
vertical-align: middle;
background: $gray-color;
}
.chat-msg-author {
font-weight: bold;
white-space: nowrap;
float: left;
text-overflow: ellipsis;
overflow: hidden;
}
......@@ -247,11 +254,13 @@
width: 100%;
}
.chat-textarea {
border-top-left-radius: 0;
border-top-right-radius: 0;
@include border-bottom-radius($chatbox-border-radius);
border: 0;
height: $chat-textarea-height;
padding: 0.5em;
width: 100%;
border: none;
resize: none;
}
.send-button {
......
sass/_chatrooms.scss
View file @ e6d56314
......@@ -69,7 +69,8 @@
border-top: 0;
width: 100%;
.chat-info {
color: $chatroom-head-color;
color: white;
line-height: normal;
}
.mentioned {
font-weight: bold;
......@@ -81,6 +82,14 @@
}
.chat-msg-them {
color: $chatroom-message-them-color;
canvas {
background: $red;
}
}
.chat-msg-me {
canvas {
background: $light-blue;
}
}
}
.disconnect-msg {
......@@ -89,7 +98,7 @@
.chat-area {
word-wrap: break-word;
height: 100%;
width: 70%;
width: 100%;
float: left;
min-width: $chat-width;
.new-msgs-indicator {
......@@ -97,8 +106,7 @@
max-width: 70%;
}
.chat-content {
// There's an annoying Chrome box-sizing bug which prevents us from adding 0.5em padding here.
padding: 0 0.5em 0 0.5em;
padding: 0.5em;
}
&.full {
min-width: 100%;
......@@ -125,6 +133,14 @@
.chatroom-features {
bottom: 0.5em;
width: 100%;
.feature {
float: left;
margin-right: 0.5em;
padding-right: 0;
font-size: 1em;
cursor: help;
}
}
.awesomplete {
ul {
......
sass/_controlbox.scss
View file @ e6d56314
#conversejs {
#controlbox {
.pure-form.converse-form {
padding: 0;
}
margin-right: 2*$chat-gutter;
@media screen and (max-width: $mobile-portrait-length) {
margin: 0;
}
@media screen and (max-height: $mobile-landscape-height) {
margin: 0;
}
.pure-form.converse-form {
padding: 0;
}
.controlbox-head {
background-color: $controlbox-head-color;
border-top-left-radius: $chatbox-border-radius;
......@@ -129,14 +132,20 @@
.brand-heading-container {
.brand-heading {
text-align: left;
font-size: 150%;
text-align: center;
}
.brand-name {
font-size: 120%;
}
}
#login-dialog {
.brand-heading {
color: $global-background-color;
}
}
.toggle-register-login {
font-weight: bold;
}
......@@ -150,6 +159,9 @@
}
#converse-register, #converse-login {
fieldset.buttons {
text-align: center;
}
.login-anon {
height: auto;
white-space: normal;
......@@ -168,13 +180,41 @@
}
}
#users {
overflow-y: hidden;
position: relative;
.add-converse-contact {
margin: 0 0 0.75em 0;
}
.chatbox-btn {
margin: 0;
}
}
#chatrooms, #contacts {
margin-top: 0.75em;
}
#users {
.userinfo {
padding-bottom: 1em;
border-bottom: 1px solid $gray-color;
.username {
margin-left: 0.5em;
}
.d-flex {
margin-bottom: 0.2em;
}
}
}
#chatrooms {
border-bottom: 1px solid $gray-color;
form.add-chatroom {
input[type=button],
input[type=submit],
......@@ -184,9 +224,8 @@
margin: 0;
padding: 0;
}
.rooms-list-container {
text-align: left;
margin: 0;
.rooms-toggle {
display: block;
color: $text-color;
......@@ -195,7 +234,7 @@
color: $dark-gray-color;
}
}
dl.rooms-list {
.rooms-list {
margin: 0.5em 0;
text-align: left;
dt {
......@@ -214,7 +253,7 @@
color: $text-color;
display: block;
overflow: hidden;
padding: 0.3em 0;
padding: 0.2em 0;
text-shadow: 0 1px 0 $text-shadow-color;
word-wrap: break-word;
a:hover {
......@@ -464,10 +503,13 @@
font-size: $font-size;
position: absolute;
left: 0;
text-align: center;
text-align: left;
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
border-radius: $chatbox-border-radius;
.switch-form {
padding-bottom: 2em;
p {
......@@ -478,7 +520,6 @@
font-size: $font-size;
font-weight: bold;
height: auto;
margin: 4px;
}
dd {
margin-left: 0;
......@@ -489,10 +530,6 @@
}
}
#users {
overflow-y: hidden;
}
.add-xmpp-contact {
padding: 1em 0.5em;
input {
......@@ -545,4 +582,19 @@
color: $inverse-link-color;
}
}
.xmpp-status, .xmpp-status-menu {
.online {
color: $green;
}
.dnd {
color: $red
}
.away {
color: $light-blue;
}
.logout, .offline {
color: $gray-color;
}
}
}
sass/_core.scss
View file @ e6d56314
......@@ -6,6 +6,24 @@
@include animation-timing-function(ease);
}
// FIXME: these need to go elsewhere, they're outside of #conversejs
.converse-bg {
position: relative;
height: 100vh;
text-align: center;
color: #fff;
}
body .brand-heading {
margin: auto;
font-size: 6em;
font-weight: bold;
.icon-conversejs {
font-size: 0.88em;
}
}
#converse-embedded-chat,
#conversejs {
bottom: 0;
......@@ -44,10 +62,6 @@
color: $subdued-color;
}
.circle {
border-radius: 50%;
}
::selection {
background-color: $highlight-color;
}
......@@ -55,6 +69,62 @@
background-color: $highlight-color;
}
canvas {
background:#000;
border-radius:4px;
margin: 2px 0;
}
.circle {
border-radius: 50%;
}
.sidebar {
display: none;
position: absolute;
width: 50px;
height: 100vh;
padding: 10px 0;
background-color: $controlbox-head-color;
text-align: center;
.chatbox-btn {
float: none;
margin: 0;
font-size: 1.35em;
&.fa-vcard {
margin-top: 1em;
}
}
.bottom {
position: absolute;
bottom: 1em;
}
}
.badge {
padding: 0.25em 0.4em;
line-height: 1;
}
.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;
}
.list-container {
text-align: left;
margin: 0.3em 0;
}
.btn.btn-primary {
color: #fff;
}
.no-text-select {
-webkit-touch-callout: none;
@include user-select(none);
......@@ -255,7 +325,6 @@
min-width: 50%;
}
label {
margin: 1em 0;
font-size: $font-size-large;
}
input[type=text],
......
sass/_roster.scss
View file @ e6d56314
......@@ -2,17 +2,20 @@
text-align: left;
width: 100%;
position: relative;
margin: 1em 0 0 0;
margin: 0;
height: $roster-height;
height: calc(100% - #{$controlbox-dropdown-height*2} - 20px);
overflow: hidden;
padding: 0;
padding-bottom: 3em;
height: calc(~"100% - #{$controlbox-dropdown-height*2} - 20px");
border-bottom: 1px solid $gray-color;
padding: 0 0 2em 0;
overflow: scroll;
&.no-contact-requests {
height: calc(100% - #{$controlbox-dropdown-height} - 20px);
height: calc(~"100% - #{$controlbox-dropdown-height*2} - 20px");
}
// XXX: FIXME
height: calc(100% - 70px);
/* Custom addition for CSP */
#online-count {
display: none;
......@@ -27,24 +30,30 @@
}
.roster-filter-form {
margin: 0 0 0.5em 0;
margin: 0.2em 0 0;
width: 100%;
span {
margin: 0;
padding: 0.2em;
color: #888;
cursor: pointer;
}
.roster-filter {
float: left;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABNSURBVHjaXI7BDcAwCAMvyQjMyQ6dAbZiKfqoUK34g2zJh1dENIC7M8pMAPYdzAVY3d0ajNz9aypS/b5R6o+ZPdqoKgCq6h80KH3xDgBqNR97p8oAGQAAAABJRU5ErkJggg== ) no-repeat right -20px center;
border: 1px solid #999;
font-size: $font-size;
height: $controlbox-dropdown-height;
margin: 0;
padding: 0;
padding-left: 0.4em;
width: 53%;
margin: 0.2em 0.2em 0.2em 0;
width: 60%;
}
/* (jQ addClass:) if input has value: */
/* (dynamically added) if input has value: */
.roster-filter.x {
background-position: right 3px center;
}
/* (jQ addClass:) if mouse is over the 'x' input area*/
/* (dynamically added) if mouse is over the 'x' input area*/
.roster-filter.onX {
cursor: pointer;
}
......@@ -79,15 +88,18 @@
.roster-contacts {
padding: 0;
margin: 0;
margin: 0.2em 0;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
.roster-group {
border: none;
color: $text-color;
font-weight: normal;
text-shadow: 0 1px 0 $text-shadow-color;
margin: 1em 0 0 0;
.group-toggle {
&:hover {
color: $dark-gray-color;
......@@ -95,8 +107,8 @@
color: $text-color;
display: block;
width: 100%;
margin: 0.5em 0;;
}
li {
border: none;
clear: both;
......@@ -106,10 +118,31 @@
overflow-y: hidden;
text-shadow: 0 1px 0 $text-shadow-color;
line-height: $font-size;
width: 100%;
height: 30px;
margin: 0;
padding: 0.5em 0 0 0;
width: 100%;
&.requesting-xmpp-contact {
a {
width: 2em;
}
:not(.open-chat) {
margin-top: 0.5em;
}
.request-actions {
padding: 0 0 0 0.3em;
float: right;
}
.open-chat {
max-width: 70%;
.req-contact-name {
width: 100%;
}
}
.req-contact-name {
width: 69%;
padding: 0;
}
}
a:hover {
color: $dark-link-color;
......@@ -154,23 +187,6 @@
height: $roster-item-height;
}
}
&.requesting-xmpp-contact {
.request-actions {
padding: 0 0 0 0.3em;
float: right;
}
.open-chat {
max-width: 70%;
.req-contact-name {
width: 100%;
}
}
.req-contact-name {
line-height: $line-height;
width: 69%;
padding: 0;
}
}
&.current-xmpp-contact span {
font-size: $font-size;
float: left;
......@@ -200,6 +216,7 @@
margin: 0;
padding: 0;
color: $subdued-color;
width: 2em;
&:before {
font-size: $font-size;
}
......
sass/converse/_controlbox.scss
View file @ e6d56314
......@@ -15,7 +15,8 @@
.brand-heading-container {
.brand-heading {
margin-left: 1em;
font-size: 2.2em;
margin: 1em 0;
}
}
}
......
sass/converse/_minimized_chats.scss
View file @ e6d56314
......@@ -10,6 +10,13 @@
padding: 0;
width: 130px;
.badge {
position: absolute;
right: 122px;
bottom: 8px;
border: 1px solid $gray-color;
}
#toggle-minimized-chats {
border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius;
......
sass/inverse/_controlbox.scss
View file @ e6d56314
......@@ -12,7 +12,7 @@
.brand-heading-container {
text-align: center;
.brand-heading {
text-align: center;
font-size: 150%;
font-size: 600%;
padding: 0.7em 0 0 0;
opacity: 0.8;
......@@ -63,7 +63,7 @@
}
#converse-register, #converse-login {
margin: 2em 30% 3em 30%;
.title, .instructions, label {
.title, .instructions {
margin: 1em 0;
}
input[type=submit],
......
sass/inverse/_core.scss
View file @ e6d56314
body {
width: 100%;
height: 100%;
height: 100vh;
font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #ffffff;
background-color: $global-background-color;
......
src/templates/inverse_brand_heading.html
View file @ e6d56314
<span class="brand-heading-container">
<span class="container brand-heading-container">
<h1 class="brand-heading"><i class="icon-conversejs"></i>inVerse</h1>
<p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://conversejs.org">Open Source</a> XMPP chat client</p>
<p class="brand-subtitle"><a target="_blank" rel="nofollow" href="https://hosted.weblate.org/projects/conversejs/#languages">Translate</a> into your own language</p>
......
src/templates/room_panel.html
View file @ e6d56314
<form class="add-chatroom"></form>
<div class="rooms-list-container">
<div class="list-container rooms-list-container">
<dl id="available-chatrooms" class="rooms-list"></dl>
</div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7