mockup.css is no more.
This commit is contained in:
parent
97e3199508
commit
3cee6a5650
248
css/converse.css
248
css/converse.css
|
@ -773,11 +773,30 @@ body .brand-heading {
|
|||
border-radius: 4px; }
|
||||
#conversejs .flyout {
|
||||
border-radius: 4px; } }
|
||||
@media screen and (max-width: 767px) {
|
||||
#conversejs.login {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%; } }
|
||||
@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%; }
|
||||
|
||||
#conversejs .offset-md-3 {
|
||||
margin-left: 25%; } }
|
||||
@media screen and (min-width: 992px) {
|
||||
#conversejs .offset-lg-2 {
|
||||
margin-left: 16.666667%; }
|
||||
|
||||
#conversejs .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; } }
|
||||
#converse-embedded-chat .flyout,
|
||||
#conversejs .flyout {
|
||||
border-radius: 4px;
|
||||
|
@ -1020,8 +1039,8 @@ body .brand-heading {
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage,
|
||||
#conversejs .chatbox form.sendXMPPMessage {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage,
|
||||
#conversejs .chatbox .sendXMPPMessage {
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
border-bottom-left-radius: 4px;
|
||||
|
@ -1035,15 +1054,15 @@ body .brand-heading {
|
|||
height: 95px;
|
||||
min-width: 200px; }
|
||||
@media screen and (max-height: 450px) {
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage,
|
||||
#conversejs .chatbox form.sendXMPPMessage {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage,
|
||||
#conversejs .chatbox .sendXMPPMessage {
|
||||
width: 100%; } }
|
||||
@media screen and (max-width: 480px) {
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage,
|
||||
#conversejs .chatbox form.sendXMPPMessage {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage,
|
||||
#conversejs .chatbox .sendXMPPMessage {
|
||||
width: 100%; } }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-textarea {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-textarea,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-textarea {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: 4px;
|
||||
|
@ -1053,8 +1072,8 @@ body .brand-heading {
|
|||
width: 100%;
|
||||
border: none;
|
||||
resize: none; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .send-button,
|
||||
#conversejs .chatbox form.sendXMPPMessage .send-button {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .send-button,
|
||||
#conversejs .chatbox .sendXMPPMessage .send-button {
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
width: -webkit-calc(100% - 6px);
|
||||
|
@ -1064,63 +1083,63 @@ body .brand-heading {
|
|||
font-size: 80%;
|
||||
height: 27px;
|
||||
bottom: -30px; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
height: 25px;
|
||||
display: block;
|
||||
background-color: #E7FBF0; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar a,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar a {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar a,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar a {
|
||||
font-size: 14px;
|
||||
color: #777;
|
||||
text-decoration: none;
|
||||
text-shadow: none; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .chat-toolbar-text,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .chat-toolbar-text {
|
||||
font-size: 12px;
|
||||
padding-right: 3px; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a,
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted {
|
||||
color: #777; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a {
|
||||
color: #578EA9; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified a,
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unverified a,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unverified {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unverified a,
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unverified,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unverified a,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unverified {
|
||||
color: #cf5300; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .private a,
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .private,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .private a,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .private {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .private a,
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .private,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .private a,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .private {
|
||||
color: #4b7003; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-occupants,
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-clear,
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-occupants,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-clear,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-occupants,
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-clear,
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-otr,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-occupants,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-clear,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-otr {
|
||||
float: right; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
margin-top: 1px;
|
||||
padding: 0 3px 0 3px; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li:hover,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li:hover {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li:hover,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li:hover {
|
||||
cursor: pointer; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu {
|
||||
background-color: #fff;
|
||||
bottom: 100%;
|
||||
box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
|
||||
|
@ -1128,71 +1147,71 @@ body .brand-heading {
|
|||
margin: 0;
|
||||
position: absolute;
|
||||
right: 0; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a {
|
||||
color: #578EA9; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
|
||||
height: 100px;
|
||||
overflow: scroll;
|
||||
padding: 0.5em; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
|
||||
/* offset-x | offset-y | blur-radius | spread-radius | color */
|
||||
box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.4); }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
|
||||
overflow: hidden;
|
||||
left: 0; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked {
|
||||
background-color: #DCF9F6; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li {
|
||||
height: 30px;
|
||||
padding: 4px;
|
||||
z-index: 98; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a {
|
||||
font-size: 20px; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
|
||||
margin-left: 0;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
position: relative; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji {
|
||||
padding: 0.3em; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover {
|
||||
background-color: #DCF9F6; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
|
||||
color: #8f2831; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu {
|
||||
color: #777; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley {
|
||||
padding-left: 5px; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover {
|
||||
background-color: #DCF9F6; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul {
|
||||
z-index: 99; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li {
|
||||
display: block;
|
||||
padding: 7px; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover {
|
||||
background-color: #DCF9F6; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li a,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li a {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li a,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li a {
|
||||
display: block; }
|
||||
#converse-embedded-chat .chatbox .dragresize,
|
||||
#conversejs .chatbox .dragresize {
|
||||
|
@ -1221,6 +1240,21 @@ body .brand-heading {
|
|||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
#conversejs #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; } }
|
||||
#converse-embedded-chat .chat-head,
|
||||
#conversejs:not(.fullscreen) .chat-head {
|
||||
border-top-left-radius: 4px;
|
||||
|
@ -1637,6 +1671,24 @@ body .brand-heading {
|
|||
#conversejs .xmpp-status .logout, #conversejs .xmpp-status .offline, #conversejs .xmpp-status-menu .logout, #conversejs .xmpp-status-menu .offline {
|
||||
color: #818479; }
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
#conversejs #controlbox .box-flyout {
|
||||
width: 100%;
|
||||
left: 0; }
|
||||
#conversejs #controlbox .sidebar {
|
||||
display: block; }
|
||||
#conversejs #controlbox #users {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50px;
|
||||
display: none;
|
||||
width: calc(100% - 50px); }
|
||||
#conversejs #controlbox #users.controlbox-pane {
|
||||
height: 100vh; }
|
||||
#conversejs.sidebar-open > .chatbox:not(#controlbox) {
|
||||
display: none; }
|
||||
#conversejs.sidebar-open #controlbox #users {
|
||||
display: block; } }
|
||||
#conversejs:not(.fullscreen) #controlbox #converse-register .button-cancel {
|
||||
font-size: 90%; }
|
||||
#conversejs:not(.fullscreen) #controlbox .controlbox-panes {
|
||||
|
@ -1887,7 +1939,8 @@ body .brand-heading {
|
|||
height: calc(100% - 55px);
|
||||
background-color: white;
|
||||
border-top: 0;
|
||||
width: 100%; }
|
||||
width: 100%;
|
||||
overflow: hidden; }
|
||||
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-info,
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .chat-info {
|
||||
color: white;
|
||||
|
@ -1914,10 +1967,10 @@ body .brand-heading {
|
|||
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area,
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .chat-area {
|
||||
word-wrap: break-word;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
float: left;
|
||||
min-width: 200px; }
|
||||
min-width: 200px;
|
||||
height: calc(100% - 95px); }
|
||||
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator,
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator {
|
||||
background-color: #E77051;
|
||||
|
@ -2054,14 +2107,14 @@ body .brand-heading {
|
|||
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary,
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary {
|
||||
background-color: #E77051; }
|
||||
#converse-embedded-chat .chatroom form.sendXMPPMessage .chat-toolbar,
|
||||
#conversejs .chatroom form.sendXMPPMessage .chat-toolbar {
|
||||
#converse-embedded-chat .chatroom .sendXMPPMessage .chat-toolbar,
|
||||
#conversejs .chatroom .sendXMPPMessage .chat-toolbar {
|
||||
background-color: #FFECE7; }
|
||||
#converse-embedded-chat .chatroom form.sendXMPPMessage .chat-textarea,
|
||||
#conversejs .chatroom form.sendXMPPMessage .chat-textarea {
|
||||
#converse-embedded-chat .chatroom .sendXMPPMessage .chat-textarea,
|
||||
#conversejs .chatroom .sendXMPPMessage .chat-textarea {
|
||||
border-bottom-right-radius: 0; }
|
||||
#converse-embedded-chat .chatroom form.sendXMPPMessage .send-button,
|
||||
#conversejs .chatroom form.sendXMPPMessage .send-button {
|
||||
#converse-embedded-chat .chatroom .sendXMPPMessage .send-button,
|
||||
#conversejs .chatroom .sendXMPPMessage .send-button {
|
||||
background-color: #E77051; }
|
||||
#converse-embedded-chat .chatroom .room-invite .invited-contact,
|
||||
#conversejs .chatroom .room-invite .invited-contact {
|
||||
|
@ -2069,6 +2122,9 @@ body .brand-heading {
|
|||
width: 100%;
|
||||
border: 1px solid #999; }
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
#conversejs .chatbox .box-flyout .chatroom-body .chat-area {
|
||||
height: calc(100vh - 55px); } }
|
||||
#conversejs .chatbox.headlines .chat-head.chat-head-chatbox {
|
||||
background-color: #E7A151; }
|
||||
#conversejs .chatbox.headlines .chat-body {
|
||||
|
|
254
css/inverse.css
254
css/inverse.css
|
@ -773,11 +773,30 @@ body .brand-heading {
|
|||
border-radius: 0; }
|
||||
#conversejs .flyout {
|
||||
border-radius: 0; } }
|
||||
@media screen and (max-width: 767px) {
|
||||
#conversejs.login {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%; } }
|
||||
@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%; }
|
||||
|
||||
#conversejs .offset-md-3 {
|
||||
margin-left: 25%; } }
|
||||
@media screen and (min-width: 992px) {
|
||||
#conversejs .offset-lg-2 {
|
||||
margin-left: 16.666667%; }
|
||||
|
||||
#conversejs .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; } }
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
@ -828,10 +847,6 @@ body {
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0; }
|
||||
#conversejs.fullscreen.login {
|
||||
width: calc(100vw - 1em);
|
||||
height: calc(100vh - 1em);
|
||||
margin: 0.5em; }
|
||||
#conversejs.fullscreen form.pure-form.converse-form {
|
||||
margin: 1em; }
|
||||
#conversejs.fullscreen form.pure-form.converse-form input[type=checkbox] {
|
||||
|
@ -851,7 +866,7 @@ body {
|
|||
margin-right: 1em; }
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
#conversejs.fullscreen.login {
|
||||
#conversejs.fullscreen {
|
||||
background-color: white;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
@ -1098,8 +1113,8 @@ body {
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage,
|
||||
#conversejs .chatbox form.sendXMPPMessage {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage,
|
||||
#conversejs .chatbox .sendXMPPMessage {
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
border-bottom-left-radius: 0;
|
||||
|
@ -1113,15 +1128,15 @@ body {
|
|||
height: 99px;
|
||||
min-width: 100%; }
|
||||
@media screen and (max-height: 450px) {
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage,
|
||||
#conversejs .chatbox form.sendXMPPMessage {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage,
|
||||
#conversejs .chatbox .sendXMPPMessage {
|
||||
width: 100%; } }
|
||||
@media screen and (max-width: 480px) {
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage,
|
||||
#conversejs .chatbox form.sendXMPPMessage {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage,
|
||||
#conversejs .chatbox .sendXMPPMessage {
|
||||
width: 100%; } }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-textarea {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-textarea,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-textarea {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
|
@ -1131,8 +1146,8 @@ body {
|
|||
width: 100%;
|
||||
border: none;
|
||||
resize: none; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .send-button,
|
||||
#conversejs .chatbox form.sendXMPPMessage .send-button {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .send-button,
|
||||
#conversejs .chatbox .sendXMPPMessage .send-button {
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
width: -webkit-calc(100% - 6px);
|
||||
|
@ -1142,63 +1157,63 @@ body {
|
|||
font-size: 80%;
|
||||
height: 27px;
|
||||
bottom: -30px; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
height: 29px;
|
||||
display: block;
|
||||
background-color: #E7FBF0; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar a,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar a {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar a,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar a {
|
||||
font-size: 16px;
|
||||
color: #777;
|
||||
text-decoration: none;
|
||||
text-shadow: none; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .chat-toolbar-text,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .chat-toolbar-text {
|
||||
font-size: 12px;
|
||||
padding-right: 3px; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a,
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted {
|
||||
color: #777; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a {
|
||||
color: #578EA9; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified a,
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unverified a,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unverified {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unverified a,
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unverified,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unverified a,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unverified {
|
||||
color: #cf5300; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .private a,
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .private,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .private a,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .private {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .private a,
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .private,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .private a,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .private {
|
||||
color: #4b7003; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-occupants,
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-clear,
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-occupants,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-clear,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-occupants,
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-clear,
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-otr,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-occupants,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-clear,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-otr {
|
||||
float: right; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
margin-top: 1px;
|
||||
padding: 0 3px 0 3px; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li:hover,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li:hover {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li:hover,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li:hover {
|
||||
cursor: pointer; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu {
|
||||
background-color: #fff;
|
||||
bottom: 100%;
|
||||
box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
|
||||
|
@ -1206,71 +1221,71 @@ body {
|
|||
margin: 0;
|
||||
position: absolute;
|
||||
right: 0; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a {
|
||||
color: #578EA9; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
|
||||
height: 150px;
|
||||
overflow: scroll;
|
||||
padding: 0.5em; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
|
||||
/* offset-x | offset-y | blur-radius | spread-radius | color */
|
||||
box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.4); }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
|
||||
overflow: hidden;
|
||||
left: 0; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked {
|
||||
background-color: #DCF9F6; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li {
|
||||
height: 32px;
|
||||
padding: 4px;
|
||||
z-index: 98; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a {
|
||||
font-size: 26px; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
|
||||
margin-left: 0;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
position: relative; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji {
|
||||
padding: 0.3em; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover {
|
||||
background-color: #DCF9F6; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
|
||||
color: #8f2831; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu {
|
||||
color: #777; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley {
|
||||
padding-left: 5px; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover {
|
||||
background-color: #DCF9F6; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul {
|
||||
z-index: 99; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li {
|
||||
display: block;
|
||||
padding: 7px; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover {
|
||||
background-color: #DCF9F6; }
|
||||
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li a,
|
||||
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li a {
|
||||
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li a,
|
||||
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li a {
|
||||
display: block; }
|
||||
#converse-embedded-chat .chatbox .dragresize,
|
||||
#conversejs .chatbox .dragresize {
|
||||
|
@ -1299,6 +1314,21 @@ body {
|
|||
top: 0;
|
||||
left: 0; }
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
#conversejs #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; } }
|
||||
#conversejs.fullscreen .chatbox-btn {
|
||||
font-size: 18px;
|
||||
margin: 0 0.3em; }
|
||||
|
@ -1733,6 +1763,24 @@ body {
|
|||
#conversejs .xmpp-status .logout, #conversejs .xmpp-status .offline, #conversejs .xmpp-status-menu .logout, #conversejs .xmpp-status-menu .offline {
|
||||
color: #818479; }
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
#conversejs #controlbox .box-flyout {
|
||||
width: 100%;
|
||||
left: 0; }
|
||||
#conversejs #controlbox .sidebar {
|
||||
display: block; }
|
||||
#conversejs #controlbox #users {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50px;
|
||||
display: none;
|
||||
width: calc(100% - 50px); }
|
||||
#conversejs #controlbox #users.controlbox-pane {
|
||||
height: 100vh; }
|
||||
#conversejs.sidebar-open > .chatbox:not(#controlbox) {
|
||||
display: none; }
|
||||
#conversejs.sidebar-open #controlbox #users {
|
||||
display: block; } }
|
||||
#conversejs.fullscreen #controlbox {
|
||||
width: 100%;
|
||||
float: left;
|
||||
|
@ -2043,7 +2091,8 @@ body {
|
|||
height: calc(100% - 62px);
|
||||
background-color: white;
|
||||
border-top: 0;
|
||||
width: 100%; }
|
||||
width: 100%;
|
||||
overflow: hidden; }
|
||||
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-info,
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .chat-info {
|
||||
color: white;
|
||||
|
@ -2070,10 +2119,10 @@ body {
|
|||
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area,
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .chat-area {
|
||||
word-wrap: break-word;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
float: left;
|
||||
min-width: 100%; }
|
||||
min-width: 100%;
|
||||
height: calc(100% - 95px); }
|
||||
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator,
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator {
|
||||
background-color: #E77051;
|
||||
|
@ -2210,14 +2259,14 @@ body {
|
|||
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary,
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary {
|
||||
background-color: #E77051; }
|
||||
#converse-embedded-chat .chatroom form.sendXMPPMessage .chat-toolbar,
|
||||
#conversejs .chatroom form.sendXMPPMessage .chat-toolbar {
|
||||
#converse-embedded-chat .chatroom .sendXMPPMessage .chat-toolbar,
|
||||
#conversejs .chatroom .sendXMPPMessage .chat-toolbar {
|
||||
background-color: #FFECE7; }
|
||||
#converse-embedded-chat .chatroom form.sendXMPPMessage .chat-textarea,
|
||||
#conversejs .chatroom form.sendXMPPMessage .chat-textarea {
|
||||
#converse-embedded-chat .chatroom .sendXMPPMessage .chat-textarea,
|
||||
#conversejs .chatroom .sendXMPPMessage .chat-textarea {
|
||||
border-bottom-right-radius: 0; }
|
||||
#converse-embedded-chat .chatroom form.sendXMPPMessage .send-button,
|
||||
#conversejs .chatroom form.sendXMPPMessage .send-button {
|
||||
#converse-embedded-chat .chatroom .sendXMPPMessage .send-button,
|
||||
#conversejs .chatroom .sendXMPPMessage .send-button {
|
||||
background-color: #E77051; }
|
||||
#converse-embedded-chat .chatroom .room-invite .invited-contact,
|
||||
#conversejs .chatroom .room-invite .invited-contact {
|
||||
|
@ -2225,6 +2274,9 @@ body {
|
|||
width: 100%;
|
||||
border: 1px solid #999; }
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
#conversejs .chatbox .box-flyout .chatroom-body .chat-area {
|
||||
height: calc(100vh - 55px); } }
|
||||
#conversejs.fullscreen .chat-head-chatroom {
|
||||
height: 62px;
|
||||
font-size: 20px; }
|
||||
|
|
|
@ -7,143 +7,142 @@
|
|||
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/bootstrap/dist/css/bootstrap.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../../css/inverse.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
<div id="conversejs" class="fullscreen chatbox">
|
||||
<div id="controlbox" class="chatbox">
|
||||
<div class="flyout box-flyout">
|
||||
<div class="controlbox-panes">
|
||||
<div class="row">
|
||||
<div class="col-xl-2 col-md-3">
|
||||
<div class="container-fluid">
|
||||
<div id="conversejs" class="fullscreen">
|
||||
<div id="controlbox" class="chatbox">
|
||||
<div class="flyout box-flyout">
|
||||
<div class="controlbox-panes">
|
||||
<div class="row">
|
||||
<div class="col-xl-2 col-md-3">
|
||||
<div class="sidebar"></div>
|
||||
<div id="users" class="controlbox-pane"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chatbox" id="37c0c87392010303765fe36b05c0967d62c6b70f">
|
||||
<div class="row">
|
||||
<div class="col-xl-10 offset-xl-2 col-md-9 offset-md-3">
|
||||
<div class="flyout box-flyout">
|
||||
<div class="chat-head chat-head-chatbox d-flex">
|
||||
<div><canvas height="44" width="44" class="avatar"></canvas></div>
|
||||
<div class="chat-title w-100">JC Brand
|
||||
<p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
|
||||
</div>
|
||||
<a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a>
|
||||
<a class="chatbox-btn fa fa-close" title="Close this chat box"></a>
|
||||
</div>
|
||||
<div class="chatbox" id="37c0c87392010303765fe36b05c0967d62c6b70f">
|
||||
<div class="row">
|
||||
<div class="col-xl-10 offset-xl-2 col-md-9 offset-md-3">
|
||||
<div class="flyout box-flyout">
|
||||
<div class="chat-head chat-head-chatbox d-flex">
|
||||
<div><canvas height="44" width="44" class="avatar"></canvas></div>
|
||||
<div class="chat-title w-100">JC Brand
|
||||
<p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
|
||||
</div>
|
||||
<a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a>
|
||||
<a class="chatbox-btn fa fa-close" title="Close this chat box"></a>
|
||||
</div>
|
||||
|
||||
<div class="chat-body">
|
||||
<div class="chat-content">
|
||||
<div class="chat-info">
|
||||
<span class="badge badge-info">This is an info message</span></div>
|
||||
<div class="chat-info">
|
||||
<span class="badge badge-danger">This is an error message</span></div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">09:35
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Hello world
|
||||
<span class="fa fa-smile-o"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-them">19:25
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-them">Benedict-John: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Dagsê</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">19:39
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">This is a relatively long message to check that wrapping works as expected.</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">19:42
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
|
||||
</div>
|
||||
<div class="chat-info chat-event">
|
||||
<span class="badge badge-success">JC Brand is busy</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">19:43
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Another message to check that scrolling works.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-body">
|
||||
<div class="chat-content">
|
||||
<div class="chat-info">
|
||||
<span class="badge badge-info">This is an info message</span></div>
|
||||
<div class="chat-info">
|
||||
<span class="badge badge-danger">This is an error message</span></div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">09:35
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Hello world
|
||||
<span class="fa fa-smile-o"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-them">19:25
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-them">Benedict-John: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Dagsê</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">19:39
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">This is a relatively long message to check that wrapping works as expected.</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">19:42
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
|
||||
</div>
|
||||
<div class="chat-info chat-event">
|
||||
<span class="badge badge-success">JC Brand is busy</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">19:43
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Another message to check that scrolling works.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="sendXMPPMessage">
|
||||
<div class="form-group">
|
||||
<ul class="chat-toolbar no-text-select">
|
||||
<li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o" title="Insert a smiley">
|
||||
<div class="emoji-picker-container toolbar-menu collapsed"></div>
|
||||
</li>
|
||||
<form class="sendXMPPMessage">
|
||||
<div class="form-group">
|
||||
<ul class="chat-toolbar no-text-select">
|
||||
<li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o" title="Insert a smiley">
|
||||
<div class="emoji-picker-container toolbar-menu collapsed"></div>
|
||||
</li>
|
||||
|
||||
<li class="toggle-clear">
|
||||
<a class="fa fa-trash" title="Clear all messages"></a>
|
||||
</li>
|
||||
<li class="toggle-clear">
|
||||
<a class="fa fa-trash" title="Clear all messages"></a>
|
||||
</li>
|
||||
|
||||
<li class="toggle-toolbar-menu toggle-otr unencrypted" title="Your messages are not encrypted. Click here to enable OTR encryption.">
|
||||
<span class="chat-toolbar-text">unencrypted</span>
|
||||
<span class="fa fa-unlock"></span>
|
||||
<ul class="toolbar-menu collapsed">
|
||||
<li>
|
||||
<a class="start-otr" href="#">Start encrypted conversation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank" rel="noopener">What's this?</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea class="chat-textarea form-control" placeholder="Personal message"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<li class="toggle-toolbar-menu toggle-otr unencrypted" title="Your messages are not encrypted. Click here to enable OTR encryption.">
|
||||
<span class="chat-toolbar-text">unencrypted</span>
|
||||
<span class="fa fa-unlock"></span>
|
||||
<ul class="toolbar-menu collapsed">
|
||||
<li>
|
||||
<a class="start-otr" href="#">Start encrypted conversation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank" rel="noopener">What's this?</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea class="chat-textarea form-control" placeholder="Personal message"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Profile Modal -->
|
||||
<div class="modal fade" id="contactProfileModal" tabindex="-1" role="dialog" aria-labelledby="contactProfileModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="contactProfileModalLabel">JC Brand User Profile</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Contact Profile Modal -->
|
||||
<div class="modal fade" id="contactProfileModal" tabindex="-1" role="dialog" aria-labelledby="contactProfileModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="contactProfileModalLabel">JC Brand User Profile</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modals"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script type="text/javascript" src="../../node_modules/lodash/lodash.js"></script>
|
||||
|
|
|
@ -7,7 +7,6 @@
|
|||
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/bootstrap/dist/css/bootstrap.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../../css/inverse.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
|
@ -7,283 +7,282 @@
|
|||
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/bootstrap/dist/css/bootstrap.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../../css/converse.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
|
||||
</head>
|
||||
|
||||
<body style="background-color: #578EA9">
|
||||
<div class="converse-bg container">
|
||||
<h1 class="brand-heading"><i class="icon-conversejs"></i>Converse.js</h1>
|
||||
</div>
|
||||
<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">
|
||||
<div class="controlbox-panes">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div id="conversejs" class="chatbox">
|
||||
<div id="controlbox" class="chatbox">
|
||||
<div class="flyout box-flyout">
|
||||
<div class="controlbox-panes">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="sidebar"></div>
|
||||
<div id="users" class="controlbox-pane"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chatbox" id="37c0c87392010303765fe36b05c0967d62c6b70f">
|
||||
<div class="flyout box-flyout">
|
||||
<div class="chat-head chat-head-chatbox d-flex">
|
||||
<div><canvas height="32" width="32" class="avatar"></canvas></div>
|
||||
<div class="chat-title w-100">JC Brand
|
||||
<p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
|
||||
</div>
|
||||
<a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a>
|
||||
<a class="chatbox-btn fa fa-close" title="Close this chat box"></a>
|
||||
</div>
|
||||
<div class="chatbox" id="37c0c87392010303765fe36b05c0967d62c6b70f">
|
||||
<div class="flyout box-flyout">
|
||||
<div class="chat-head chat-head-chatbox d-flex">
|
||||
<div><canvas height="32" width="32" class="avatar"></canvas></div>
|
||||
<div class="chat-title w-100">JC Brand
|
||||
<p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
|
||||
</div>
|
||||
<a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a>
|
||||
<a class="chatbox-btn fa fa-close" title="Close this chat box"></a>
|
||||
</div>
|
||||
|
||||
<div class="chat-body">
|
||||
<div class="chat-content">
|
||||
<div class="chat-info">
|
||||
<span class="badge badge-info">This is an info message</span></div>
|
||||
<div class="chat-info">
|
||||
<span class="badge badge-danger">This is an error message</span></div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">09:35
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Hello world
|
||||
<span class="fa fa-smile-o"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-them">19:25
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-them">Benedict-John: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Dagsê</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">19:39
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">This is a relatively long message to check that wrapping works as expected.</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">19:42
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
|
||||
</div>
|
||||
<div class="chat-info chat-event">
|
||||
<span class="badge badge-success">JC Brand is busy</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">19:43
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Another message to check that scrolling works.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-body">
|
||||
<div class="chat-content">
|
||||
<div class="chat-info">
|
||||
<span class="badge badge-info">This is an info message</span></div>
|
||||
<div class="chat-info">
|
||||
<span class="badge badge-danger">This is an error message</span></div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">09:35
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Hello world
|
||||
<span class="fa fa-smile-o"></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-them">19:25
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-them">Benedict-John: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Dagsê</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">19:39
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">This is a relatively long message to check that wrapping works as expected.</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">19:42
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
|
||||
</div>
|
||||
<div class="chat-info chat-event">
|
||||
<span class="badge badge-success">JC Brand is busy</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">19:43
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Another message to check that scrolling works.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="sendXMPPMessage">
|
||||
<div class="form-group">
|
||||
<ul class="chat-toolbar no-text-select">
|
||||
<li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o" title="Insert a smiley">
|
||||
<div class="emoji-picker-container toolbar-menu collapsed"></div>
|
||||
</li>
|
||||
<form class="sendXMPPMessage">
|
||||
<div class="form-group">
|
||||
<ul class="chat-toolbar no-text-select">
|
||||
<li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o" title="Insert a smiley">
|
||||
<div class="emoji-picker-container toolbar-menu collapsed"></div>
|
||||
</li>
|
||||
|
||||
<li class="toggle-clear">
|
||||
<a class="fa fa-trash" title="Clear all messages"></a>
|
||||
</li>
|
||||
<li class="toggle-clear">
|
||||
<a class="fa fa-trash" title="Clear all messages"></a>
|
||||
</li>
|
||||
|
||||
<li class="toggle-toolbar-menu toggle-otr unencrypted" title="Your messages are not encrypted. Click here to enable OTR encryption.">
|
||||
<span class="chat-toolbar-text">unencrypted</span>
|
||||
<span class="fa fa-unlock"></span>
|
||||
<ul class="toolbar-menu collapsed">
|
||||
<li>
|
||||
<a class="start-otr" href="#">Start encrypted conversation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank" rel="noopener">What's this?</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea class="chat-textarea form-control" placeholder="Personal message"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<li class="toggle-toolbar-menu toggle-otr unencrypted" title="Your messages are not encrypted. Click here to enable OTR encryption.">
|
||||
<span class="chat-toolbar-text">unencrypted</span>
|
||||
<span class="fa fa-unlock"></span>
|
||||
<ul class="toolbar-menu collapsed">
|
||||
<li>
|
||||
<a class="start-otr" href="#">Start encrypted conversation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank" rel="noopener">What's this?</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea class="chat-textarea form-control" placeholder="Personal message"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chatbox chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392">
|
||||
<div class="flyout box-flyout">
|
||||
<div class="chat-head chat-head-chatroom d-flex">
|
||||
<div class="w-100">
|
||||
<div class="chat-title">Chatroom</div>
|
||||
<p class="chatroom-topic">May the force be with you</p>
|
||||
</div>
|
||||
<a class="chatbox-btn fa fa-wrench"></a>
|
||||
<a class="chatbox-btn fa fa-minus"></a>
|
||||
<a class="chatbox-btn fa fa-close"></a>
|
||||
</div>
|
||||
<div class="chatbox chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392">
|
||||
<div class="flyout box-flyout">
|
||||
<div class="chat-head chat-head-chatroom d-flex">
|
||||
<div class="w-100">
|
||||
<div class="chat-title">Chatroom</div>
|
||||
<p class="chatroom-topic">May the force be with you</p>
|
||||
</div>
|
||||
<a class="chatbox-btn fa fa-wrench"></a>
|
||||
<a class="chatbox-btn fa fa-minus"></a>
|
||||
<a class="chatbox-btn fa fa-close"></a>
|
||||
</div>
|
||||
|
||||
<div class="chat-body chatroom-body">
|
||||
<div class="row">
|
||||
<div class="col-md-9 col-8">
|
||||
<div class="chat-area">
|
||||
<div class="chat-content">
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">18:50
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-room">luke: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">leia: hi :)</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">19:40
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-room">leia: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
|
||||
</div>
|
||||
<time class="chat-info badge badge-info" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">19:40
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-room">Obi-wan Kenobi, Jedi Master: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">19:42
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">19:43
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-roomme">Obi-wan Kenobi, Jedi Master: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Another message to check that scrolling works.</span>
|
||||
</div>
|
||||
</div>
|
||||
<form class="sendXMPPMessage">
|
||||
<div class="form-group">
|
||||
<ul class="chat-toolbar no-text-select">
|
||||
<li class="toggle-smiley fa fa-smile-o" title="Insert a smiley"></li>
|
||||
<li class="toggle-occupants"><a class="fa fa-user-times" title="Hide the list of occupants"></a></li>
|
||||
<li class="toggle-clear"><a class="fa fa-times" title="Clear all messages"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea class="chat-textrea form-control" placeholder="Message"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-body chatroom-body">
|
||||
<div class="row">
|
||||
<div class="col-md-9 col-8">
|
||||
<div class="chat-area">
|
||||
<div class="chat-content">
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">18:50
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-room">luke: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">leia: hi :)</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">19:40
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-room">leia: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
|
||||
</div>
|
||||
<time class="chat-info badge badge-info" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">19:40
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-room">Obi-wan Kenobi, Jedi Master: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">19:42
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">19:43
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-roomme">Obi-wan Kenobi, Jedi Master: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Another message to check that scrolling works.</span>
|
||||
</div>
|
||||
</div>
|
||||
<form class="sendXMPPMessage">
|
||||
<div class="form-group">
|
||||
<ul class="chat-toolbar no-text-select">
|
||||
<li class="toggle-smiley fa fa-smile-o" title="Insert a smiley"></li>
|
||||
<li class="toggle-occupants"><a class="fa fa-user-times" title="Hide the list of occupants"></a></li>
|
||||
<li class="toggle-clear"><a class="fa fa-times" title="Clear all messages"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea class="chat-textarea form-control" placeholder="Message"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3 col-4">
|
||||
<div class="occupants w-100">
|
||||
<p class="occupants-heading">Occupants:</p>
|
||||
<form class="pure-form room-invite">
|
||||
<div class="form-control">
|
||||
<input class="form-control" placeholder="Invite..." type="text" autocomplete="off" spellcheck="false" dir="auto">
|
||||
</div>
|
||||
<pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre;"></pre>
|
||||
</form>
|
||||
<div class="col-md-3 col-4">
|
||||
<div class="occupants w-100">
|
||||
<p class="occupants-heading">Occupants:</p>
|
||||
<form class="pure-form room-invite">
|
||||
<div class="form-control">
|
||||
<input class="form-control" placeholder="Invite..." type="text" autocomplete="off" spellcheck="false" dir="auto">
|
||||
</div>
|
||||
<pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre;"></pre>
|
||||
</form>
|
||||
|
||||
<ul class="occupant-list">
|
||||
<li class="moderator occupant" title="This user is a moderator. Click to mention luke in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>luke</li>
|
||||
<li class="participant occupant" title="Click to mention leia in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>leia</li>
|
||||
<li class="participant occupant" title="Click to mention Obi-wan Kenobi, Jedi Master in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>Obi-wan Kenobi, Jedi Master</li>
|
||||
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
|
||||
</ul>
|
||||
<ul class="occupant-list">
|
||||
<li class="moderator occupant" title="This user is a moderator. Click to mention luke in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>luke</li>
|
||||
<li class="participant occupant" title="Click to mention leia in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>leia</li>
|
||||
<li class="participant occupant" title="Click to mention Obi-wan Kenobi, Jedi Master in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>Obi-wan Kenobi, Jedi Master</li>
|
||||
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
|
||||
</ul>
|
||||
|
||||
<div class="chatroom-features">
|
||||
<p class="occupants-heading">Features</p>
|
||||
<ul class="features-list">
|
||||
<li class="feature" title="Unsecured: This room requires a password before entry"><span class="fa fa-unlock"></span> </li>
|
||||
<li class="feature" title="Public: This room is publicly searchable"><span class="fa fa-eye"></span> </li>
|
||||
<li class="feature" title="Open: Anyone can join this roo"><span class="fa fa-globe"></span> </li>
|
||||
<li class="feature" title="Persistent: This room persists even if it's unoccupied"><span class="fa fa-save"></span> </li>
|
||||
<li class="feature" title="Non-anonymous: All other room occupants can see your XMPP username"><span class="fa fa-vcard"></span> </li>
|
||||
<li class="feature" title="Unmoderated: This room is not being moderated"><span class="fa fa-info-circle"></span> </li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chatroom-features">
|
||||
<p class="occupants-heading">Features</p>
|
||||
<ul class="features-list">
|
||||
<li class="feature" title="Unsecured: This room requires a password before entry"><span class="fa fa-unlock"></span> </li>
|
||||
<li class="feature" title="Public: This room is publicly searchable"><span class="fa fa-eye"></span> </li>
|
||||
<li class="feature" title="Open: Anyone can join this roo"><span class="fa fa-globe"></span> </li>
|
||||
<li class="feature" title="Persistent: This room persists even if it's unoccupied"><span class="fa fa-save"></span> </li>
|
||||
<li class="feature" title="Non-anonymous: All other room occupants can see your XMPP username"><span class="fa fa-vcard"></span> </li>
|
||||
<li class="feature" title="Unmoderated: This room is not being moderated"><span class="fa fa-info-circle"></span> </li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="minimized-chats">
|
||||
<a id="toggle-minimized-chats" href="#">Minimized
|
||||
<span id="minimized-count">(0)</span>
|
||||
<span class="badge badge-light">322</span>
|
||||
</a>
|
||||
<div class="flyout minimized-chats-flyout">
|
||||
<div class="chat-head chat-head-chatroom d-flex">
|
||||
<span class="badge badge-light">3</span>
|
||||
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Restricted Chatroom</a>
|
||||
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
|
||||
</div>
|
||||
<div class="chat-head chat-head-chatbox d-flex">
|
||||
<span class="badge badge-light">42</span>
|
||||
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">JC Brand</a>
|
||||
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
|
||||
</div>
|
||||
<div class="chat-head chat-head-chatroom d-flex">
|
||||
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">My Chatroom</a>
|
||||
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
|
||||
</div>
|
||||
<div class="chat-head chat-head-chatbox d-flex">
|
||||
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Annegreet Gomez</a>
|
||||
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
|
||||
</div>
|
||||
<div class="chat-head chat-head-chatbox d-flex">
|
||||
<span class="badge badge-light">842</span>
|
||||
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Asmaa Haakman</a>
|
||||
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
|
||||
</div>
|
||||
<div class="chat-head chat-head-chatbox d-flex">
|
||||
<a href="#" class="restore-chat w-100 align-self-center">Lena Grunewald</a>
|
||||
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="minimized-chats">
|
||||
<a id="toggle-minimized-chats" href="#">Minimized
|
||||
<span id="minimized-count">(0)</span>
|
||||
<span class="badge badge-light">322</span>
|
||||
</a>
|
||||
<div class="flyout minimized-chats-flyout">
|
||||
<div class="chat-head chat-head-chatroom d-flex">
|
||||
<span class="badge badge-light">3</span>
|
||||
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Restricted Chatroom</a>
|
||||
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
|
||||
</div>
|
||||
<div class="chat-head chat-head-chatbox d-flex">
|
||||
<span class="badge badge-light">42</span>
|
||||
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">JC Brand</a>
|
||||
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
|
||||
</div>
|
||||
<div class="chat-head chat-head-chatroom d-flex">
|
||||
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">My Chatroom</a>
|
||||
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
|
||||
</div>
|
||||
<div class="chat-head chat-head-chatbox d-flex">
|
||||
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Annegreet Gomez</a>
|
||||
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
|
||||
</div>
|
||||
<div class="chat-head chat-head-chatbox d-flex">
|
||||
<span class="badge badge-light">842</span>
|
||||
<a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Asmaa Haakman</a>
|
||||
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
|
||||
</div>
|
||||
<div class="chat-head chat-head-chatbox d-flex">
|
||||
<a href="#" class="restore-chat w-100 align-self-center">Lena Grunewald</a>
|
||||
<a class="chatbox-btn close-chatbox-button fa fa-times"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Profile Modal -->
|
||||
<div class="modal fade" id="contactProfileModal" tabindex="-1" role="dialog" aria-labelledby="contactProfileModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="contactProfileModalLabel">JC Brand User Profile</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Contact Profile Modal -->
|
||||
<div class="modal fade" id="contactProfileModal" tabindex="-1" role="dialog" aria-labelledby="contactProfileModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="contactProfileModalLabel">JC Brand User Profile</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modals"></div>
|
||||
</body>
|
||||
|
|
|
@ -1,112 +0,0 @@
|
|||
@media screen and (max-width: 767px) {
|
||||
#conversejs.fullscreen.chatbox > .chatbox,
|
||||
#conversejs.fullscreen.chatbox .chatroom {
|
||||
width: calc(100% - 50px);
|
||||
}
|
||||
#conversejs.fullscreen.chatbox.sidebar-open #controlbox #users {
|
||||
display: block;
|
||||
}
|
||||
#conversejs.fullscreen.chatbox.sidebar-open > .chatbox:not(#controlbox),
|
||||
#conversejs.fullscreen.chatbox.sidebar-open .chatroom {
|
||||
display: none;
|
||||
}
|
||||
#conversejs.fullscreen.chatbox .chatbox .box-flyout {
|
||||
left: 0;
|
||||
}
|
||||
#conversejs.login {
|
||||
margin: 1em;
|
||||
}
|
||||
#conversejs.login #controlbox {
|
||||
margin: 0;
|
||||
}
|
||||
#conversejs.login #controlbox .controlbox-pane {
|
||||
font-size: 1.15em;
|
||||
}
|
||||
#conversejs.login #controlbox.chatbox {
|
||||
width: 100%;
|
||||
}
|
||||
#conversejs.login .chatbox .box-flyout {
|
||||
height: calc(100vh - 20px);
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
#conversejs.sidebar-open #controlbox #users {
|
||||
display: block;
|
||||
}
|
||||
#conversejs.sidebar-open > .chatbox:not(#controlbox) {
|
||||
display: none;
|
||||
}
|
||||
#conversejs #controlbox #users {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50px;
|
||||
display: none;
|
||||
width: calc(100% - 50px);
|
||||
}
|
||||
#conversejs #controlbox .box-flyout {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
}
|
||||
#conversejs #controlbox .sidebar {
|
||||
display: block;
|
||||
}
|
||||
#conversejs #users.controlbox-pane {
|
||||
height: 100vh;
|
||||
}
|
||||
#conversejs #login-dialog .pure-form.converse-form {
|
||||
padding: 3em 2em 3em;
|
||||
}
|
||||
#conversejs > .chatbox {
|
||||
width: calc(100% - 50px);
|
||||
}
|
||||
#conversejs .chatbox .chat-body .chat-message .chat-msg-author {
|
||||
white-space: normal;
|
||||
}
|
||||
#conversejs .chatbox .box-flyout {
|
||||
left: 50px;
|
||||
bottom: 0;
|
||||
width: calc(100% - 50px);
|
||||
height: 100vh;
|
||||
box-shadow: none;
|
||||
}
|
||||
#conversejs .chatbox .box-flyout .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%;
|
||||
}
|
||||
#conversejs .offset-md-3 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 992px) {
|
||||
#conversejs .offset-lg-2 {
|
||||
margin-left: 16.666667%;
|
||||
}
|
||||
#conversejs .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;
|
||||
}
|
||||
}
|
|
@ -7,81 +7,80 @@
|
|||
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/bootstrap/dist/css/bootstrap.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="../../css/inverse.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container converse-bg">
|
||||
<h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>
|
||||
</div>
|
||||
<div class="container converse-bg">
|
||||
<h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div id="conversejs" class="fullscreen login">
|
||||
<div id="controlbox" class="chatbox">
|
||||
<div class="flyout box-flyout">
|
||||
<div class="controlbox-panes">
|
||||
<div id="login-dialog" class="controlbox-pane">
|
||||
<div class="row">
|
||||
<div class="brand-heading-container col-12">
|
||||
<h1 class="brand-heading">
|
||||
<i class="icon-conversejs"></i> inVerse</h1>
|
||||
<p>
|
||||
<a href="https://conversejs.org">Open Source</a> XMPP chat client</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-fluid">
|
||||
<div id="conversejs" class="fullscreen">
|
||||
<div id="controlbox" class="chatbox">
|
||||
<div class="flyout box-flyout">
|
||||
<div class="controlbox-panes">
|
||||
<div id="login-dialog" class="controlbox-pane">
|
||||
<div class="row">
|
||||
<div class="brand-heading-container col-12">
|
||||
<h1 class="brand-heading">
|
||||
<i class="icon-conversejs"></i> inVerse</h1>
|
||||
<p>
|
||||
<a href="https://conversejs.org">Open Source</a> XMPP chat client</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-8 offset-sm-2 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
|
||||
<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">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Password:</label>
|
||||
<input type="password" name="password" class="form-control" placeholder="password" autocomplete="off">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-8 offset-sm-2 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
|
||||
<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">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Password:</label>
|
||||
<input type="password" name="password" class="form-control" placeholder="password" autocomplete="off">
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Register Modal -->
|
||||
<div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="registerModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="registerModalLabel">Register</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="converse-register">
|
||||
<div class="form-group">
|
||||
<label for="domain">Your XMPP provider's domain name:</label>
|
||||
<input type="text" name="domain" class="form-control" placeholder=" e.g. conversejs.org">
|
||||
</div>
|
||||
<p>Tip: A list of public XMPP providers is available
|
||||
<a href="https://xmpp.net/directory.php" class="url" target="_blank" rel="noopener">here</a>.</p>
|
||||
<input class="btn btn-primary" type="submit" value="Fetch registration form">
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Register Modal -->
|
||||
<div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="registerModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="registerModalLabel">Register</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="converse-register">
|
||||
<div class="form-group">
|
||||
<label for="domain">Your XMPP provider's domain name:</label>
|
||||
<input type="text" name="domain" class="form-control" placeholder=" e.g. conversejs.org">
|
||||
</div>
|
||||
<p>Tip: A list of public XMPP providers is available
|
||||
<a href="https://xmpp.net/directory.php" class="url" target="_blank" rel="noopener">here</a>.</p>
|
||||
<input class="btn btn-primary" type="submit" value="Fetch registration form">
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
@ -1,17 +0,0 @@
|
|||
<!doctype html>
|
||||
<html class="no-js" lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>inVerse Mockups</title>
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="css/bootstrap.min.css" />
|
||||
<link type="text/css" rel="stylesheet" media="screen" href="css/font-awesome.min.css" />
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
$(function () {
|
||||
$('[data-toggle="popover"]').popover()
|
||||
});
|
||||
</script>
|
|
@ -1,192 +0,0 @@
|
|||
// overrides for the base css of converse/inverse
|
||||
|
||||
@link-color: #007bff;
|
||||
@bg-color: #578ea9;
|
||||
|
||||
body {
|
||||
.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%); }
|
||||
}
|
||||
|
||||
#conversejs {
|
||||
|
||||
&.fullscreen {
|
||||
width:100%; height:100%; right:0; bottom:0; color:@text-color;
|
||||
&.login {
|
||||
width:calc(~"100vw - 20px"); height:calc(~"100vh - 20px"); margin:10px;
|
||||
#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"); }
|
||||
}
|
||||
|
||||
.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; }
|
||||
}
|
|
@ -15,7 +15,7 @@
|
|||
<h1 class="brand-heading"><i class="icon-conversejs"></i>Converse.js</h1>
|
||||
</div>
|
||||
|
||||
<div id="conversejs" class="login">
|
||||
<div id="conversejs">
|
||||
<div id="controlbox" class="chatbox">
|
||||
<div class="flyout box-flyout">
|
||||
<div class="controlbox-panes">
|
||||
|
|
|
@ -235,7 +235,7 @@
|
|||
position: relative;
|
||||
}
|
||||
}
|
||||
form.sendXMPPMessage {
|
||||
.sendXMPPMessage {
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
@include border-bottom-radius($chatbox-border-radius);
|
||||
|
@ -253,6 +253,7 @@
|
|||
@media screen and (max-width: $mobile-portrait-length) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chat-textarea {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
|
@ -263,6 +264,7 @@
|
|||
border: none;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.send-button {
|
||||
position: absolute;
|
||||
left: $send-button-margin;
|
||||
|
@ -438,3 +440,33 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
#conversejs {
|
||||
#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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.box-flyout {
|
||||
left: 50px;
|
||||
bottom: 0;
|
||||
width: calc(100% - 50px);
|
||||
height: 100vh;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -68,6 +68,8 @@
|
|||
background-color: white;
|
||||
border-top: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.chat-info {
|
||||
color: white;
|
||||
line-height: normal;
|
||||
|
@ -97,10 +99,11 @@
|
|||
}
|
||||
.chat-area {
|
||||
word-wrap: break-word;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
float: left;
|
||||
min-width: $chat-width;
|
||||
height: calc(100% - 95px);
|
||||
|
||||
.new-msgs-indicator {
|
||||
background-color: $chatroom-head-color;
|
||||
max-width: 70%;
|
||||
|
@ -243,7 +246,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
form.sendXMPPMessage {
|
||||
.sendXMPPMessage {
|
||||
.chat-toolbar {
|
||||
background-color: $chatroom-toolbar-color;
|
||||
}
|
||||
|
@ -264,3 +267,17 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
#conversejs {
|
||||
.chatbox {
|
||||
.box-flyout {
|
||||
.chatroom-body {
|
||||
.chat-area {
|
||||
height: calc(100vh - 55px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -514,3 +514,42 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
#conversejs {
|
||||
#controlbox {
|
||||
.box-flyout {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#users {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50px;
|
||||
display: none;
|
||||
width: calc(100% - 50px);
|
||||
|
||||
&.controlbox-pane {
|
||||
height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.sidebar-open {
|
||||
> .chatbox:not(#controlbox) {
|
||||
display: none;
|
||||
}
|
||||
#controlbox {
|
||||
#users {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
122
sass/_core.scss
122
sass/_core.scss
|
@ -47,18 +47,18 @@ body {
|
|||
width: 100vw;
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
|
||||
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
|
||||
color: $subdued-color;
|
||||
}
|
||||
::-moz-placeholder { /* Firefox 19+ */
|
||||
}
|
||||
::-moz-placeholder { /* Firefox 19+ */
|
||||
color: $subdued-color;
|
||||
}
|
||||
:-ms-input-placeholder { /* IE 10+ */
|
||||
}
|
||||
:-ms-input-placeholder { /* IE 10+ */
|
||||
color: $subdued-color;
|
||||
}
|
||||
:-moz-placeholder { /* Firefox 18- */
|
||||
}
|
||||
:-moz-placeholder { /* Firefox 18- */
|
||||
color: $subdued-color;
|
||||
}
|
||||
}
|
||||
::placeholder {
|
||||
color: $subdued-color;
|
||||
}
|
||||
|
@ -70,7 +70,7 @@ body {
|
|||
background-color: $highlight-color;
|
||||
}
|
||||
|
||||
canvas {
|
||||
canvas {
|
||||
background:#000;
|
||||
border-radius:4px;
|
||||
margin: 2px 0;
|
||||
|
@ -80,30 +80,30 @@ body {
|
|||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: none;
|
||||
.sidebar {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 100vh;
|
||||
padding: 10px 0;
|
||||
background-color: $controlbox-head-color;
|
||||
background-color: $controlbox-head-color;
|
||||
text-align: center;
|
||||
|
||||
.chatbox-btn {
|
||||
float: none;
|
||||
.chatbox-btn {
|
||||
float: none;
|
||||
margin: 0;
|
||||
font-size: 1.35em;
|
||||
&.fa-vcard {
|
||||
&.fa-vcard {
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
}
|
||||
.bottom {
|
||||
position: absolute;
|
||||
bottom: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
.badge {
|
||||
padding: 0.25em 0.4em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
@ -132,33 +132,33 @@ body {
|
|||
}
|
||||
|
||||
@keyframes colorchange-chatmessage {
|
||||
0% {background-color: rgba(141, 216, 174, 1);}
|
||||
25% {background-color: rgba(141, 216, 174, 0.75);}
|
||||
50% {background-color: rgba(141, 216, 174, 0.5);}
|
||||
75% {background-color: rgba(141, 216, 174, 0.25);}
|
||||
100% {background-color: transparent;}
|
||||
0% {background-color: rgba(141, 216, 174, 1);}
|
||||
25% {background-color: rgba(141, 216, 174, 0.75);}
|
||||
50% {background-color: rgba(141, 216, 174, 0.5);}
|
||||
75% {background-color: rgba(141, 216, 174, 0.25);}
|
||||
100% {background-color: transparent;}
|
||||
}
|
||||
@-webkit-keyframes colorchange-chatmessage {
|
||||
0% {background-color: rgba(141, 216, 174, 1);}
|
||||
25% {background-color: rgba(141, 216, 174, 0.75);}
|
||||
50% {background-color: rgba(141, 216, 174, 0.5);}
|
||||
75% {background-color: rgba(141, 216, 174, 0.25);}
|
||||
100% {background-color: transparent;}
|
||||
0% {background-color: rgba(141, 216, 174, 1);}
|
||||
25% {background-color: rgba(141, 216, 174, 0.75);}
|
||||
50% {background-color: rgba(141, 216, 174, 0.5);}
|
||||
75% {background-color: rgba(141, 216, 174, 0.25);}
|
||||
100% {background-color: transparent;}
|
||||
}
|
||||
|
||||
@keyframes colorchange-chatmessage-muc {
|
||||
0% {background-color: rgba(255, 181, 162, 1);}
|
||||
25% {background-color: rgba(255, 181, 162, 0.75);}
|
||||
50% {background-color: rgba(255, 181, 162, 0.5);}
|
||||
75% {background-color: rgba(255, 181, 162, 0.25);}
|
||||
100% {background-color: transparent;}
|
||||
0% {background-color: rgba(255, 181, 162, 1);}
|
||||
25% {background-color: rgba(255, 181, 162, 0.75);}
|
||||
50% {background-color: rgba(255, 181, 162, 0.5);}
|
||||
75% {background-color: rgba(255, 181, 162, 0.25);}
|
||||
100% {background-color: transparent;}
|
||||
}
|
||||
@-webkit-keyframes colorchange-chatmessage-muc {
|
||||
0% {background-color: rgba(255, 181, 162, 1);}
|
||||
25% {background-color: rgba(255, 181, 162, 0.75);}
|
||||
50% {background-color: rgba(255, 181, 162, 0.5);}
|
||||
75% {background-color: rgba(255, 181, 162, 0.25);}
|
||||
100% {background-color: transparent;}
|
||||
0% {background-color: rgba(255, 181, 162, 1);}
|
||||
25% {background-color: rgba(255, 181, 162, 0.75);}
|
||||
50% {background-color: rgba(255, 181, 162, 0.5);}
|
||||
75% {background-color: rgba(255, 181, 162, 0.25);}
|
||||
100% {background-color: transparent;}
|
||||
}
|
||||
|
||||
|
||||
|
@ -402,12 +402,40 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
#conversejs {
|
||||
&.login {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@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%;
|
||||
}
|
||||
#conversejs .offset-md-3 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 992px) {
|
||||
#conversejs .offset-lg-2 {
|
||||
margin-left: 16.666667%;
|
||||
}
|
||||
#conversejs .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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -44,12 +44,6 @@ body {
|
|||
left: 0;
|
||||
right: 0;
|
||||
|
||||
&.login {
|
||||
width: calc(100vw - 1em);
|
||||
height: calc(100vh - 1em);
|
||||
margin: 0.5em;
|
||||
}
|
||||
|
||||
form {
|
||||
&.pure-form.converse-form {
|
||||
margin: 1em;
|
||||
|
@ -77,11 +71,9 @@ body {
|
|||
|
||||
@media screen and (max-width: 767px) {
|
||||
#conversejs.fullscreen {
|
||||
&.login {
|
||||
background-color: white;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
background-color: white;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user