Update chatbox headers and buttons
This commit is contained in:
parent
33595e9e01
commit
21556832f8
@ -5119,6 +5119,19 @@ body.reset {
|
|||||||
#converse-embedded-chat .flyout,
|
#converse-embedded-chat .flyout,
|
||||||
#conversejs .flyout {
|
#conversejs .flyout {
|
||||||
bottom: 0; } }
|
bottom: 0; } }
|
||||||
|
#converse-embedded-chat .chatbox-btn,
|
||||||
|
#conversejs .chatbox-btn {
|
||||||
|
border-radius: 25%;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 12px;
|
||||||
|
margin: 0 0.2em;
|
||||||
|
padding: 0.3em;
|
||||||
|
text-decoration: none; }
|
||||||
|
#converse-embedded-chat .chatbox-btn:active,
|
||||||
|
#conversejs .chatbox-btn:active {
|
||||||
|
position: relative;
|
||||||
|
top: 1px; }
|
||||||
#converse-embedded-chat .chat-head,
|
#converse-embedded-chat .chat-head,
|
||||||
#conversejs .chat-head {
|
#conversejs .chat-head {
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
@ -5136,8 +5149,7 @@ body.reset {
|
|||||||
margin-right: 0.5em; }
|
margin-right: 0.5em; }
|
||||||
#converse-embedded-chat .chat-head .chatbox-buttons,
|
#converse-embedded-chat .chat-head .chatbox-buttons,
|
||||||
#conversejs .chat-head .chatbox-buttons {
|
#conversejs .chat-head .chatbox-buttons {
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse; }
|
||||||
float: right; }
|
|
||||||
#converse-embedded-chat .chat-head .user-custom-message,
|
#converse-embedded-chat .chat-head .user-custom-message,
|
||||||
#conversejs .chat-head .user-custom-message {
|
#conversejs .chat-head .user-custom-message {
|
||||||
color: white;
|
color: white;
|
||||||
@ -5148,26 +5160,33 @@ body.reset {
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding-top: 0.2em; }
|
padding-top: 0.2em; }
|
||||||
#converse-embedded-chat .chatbox-btn,
|
#converse-embedded-chat .chat-head a.chatbox-btn.fa, #converse-embedded-chat .chat-head a:visited.chatbox-btn.fa, #converse-embedded-chat .chat-head a:hover.chatbox-btn.fa, #converse-embedded-chat .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa,
|
||||||
#conversejs .chatbox-btn {
|
#conversejs .chat-head a.chatbox-btn.fa,
|
||||||
border-radius: 25%;
|
#conversejs .chat-head a:visited.chatbox-btn.fa,
|
||||||
border: none;
|
#conversejs .chat-head a:hover.chatbox-btn.fa,
|
||||||
color: white;
|
#conversejs .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa {
|
||||||
cursor: pointer;
|
color: white; }
|
||||||
display: inline-block;
|
#converse-embedded-chat .chat-head a.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head a:visited.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head a:hover.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa.button-on,
|
||||||
float: right;
|
#conversejs .chat-head a.chatbox-btn.fa.button-on,
|
||||||
font-size: 12px;
|
#conversejs .chat-head a:visited.chatbox-btn.fa.button-on,
|
||||||
margin: 0 0.2em;
|
#conversejs .chat-head a:hover.chatbox-btn.fa.button-on,
|
||||||
padding: 0.3em;
|
#conversejs .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa.button-on {
|
||||||
text-decoration: none; }
|
background-color: white;
|
||||||
#converse-embedded-chat .chatbox-btn:active,
|
color: #3AA569; }
|
||||||
#conversejs .chatbox-btn:active {
|
#converse-embedded-chat .chat-head .chatbox-btn,
|
||||||
position: relative;
|
#conversejs .chat-head .chatbox-btn {
|
||||||
top: 1px; }
|
color: white; }
|
||||||
#converse-embedded-chat .chatbox-btn.button-on,
|
#converse-embedded-chat .chat-head .chatbox-btn.fa,
|
||||||
#conversejs .chatbox-btn.button-on {
|
#conversejs .chat-head .chatbox-btn.fa {
|
||||||
background-color: white;
|
color: white; }
|
||||||
color: #3AA569; }
|
#converse-embedded-chat .chat-head .chatbox-btn:active,
|
||||||
|
#conversejs .chat-head .chatbox-btn:active {
|
||||||
|
position: relative;
|
||||||
|
top: 1px; }
|
||||||
|
#converse-embedded-chat .chat-head .chatbox-btn.button-on,
|
||||||
|
#conversejs .chat-head .chatbox-btn.button-on {
|
||||||
|
background-color: white;
|
||||||
|
color: #3AA569; }
|
||||||
#converse-embedded-chat .chatbox,
|
#converse-embedded-chat .chatbox,
|
||||||
#conversejs .chatbox {
|
#conversejs .chatbox {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
@ -5965,8 +5984,8 @@ body.reset {
|
|||||||
padding: 10px 8px 0 8px; }
|
padding: 10px 8px 0 8px; }
|
||||||
#conversejs .toggle-controlbox span {
|
#conversejs .toggle-controlbox span {
|
||||||
color: white; }
|
color: white; }
|
||||||
#conversejs .xmpp-status .online, #conversejs .xmpp-status-menu .online {
|
#conversejs .xmpp-status .online, #conversejs .xmpp-status .fa-circle, #conversejs .xmpp-status-menu .online, #conversejs .xmpp-status-menu .fa-circle {
|
||||||
color: #3AA569; }
|
color: #33925d; }
|
||||||
#conversejs .xmpp-status .dnd, #conversejs .xmpp-status-menu .dnd {
|
#conversejs .xmpp-status .dnd, #conversejs .xmpp-status-menu .dnd {
|
||||||
color: #E77051; }
|
color: #E77051; }
|
||||||
#conversejs .xmpp-status .away, #conversejs .xmpp-status-menu .away {
|
#conversejs .xmpp-status .away, #conversejs .xmpp-status-menu .away {
|
||||||
@ -6150,6 +6169,19 @@ body.reset {
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
text-overflow: ellipsis; }
|
text-overflow: ellipsis; }
|
||||||
|
#converse-embedded-chat .chat-head-chatroom a.chatbox-btn.fa, #converse-embedded-chat .chat-head-chatroom a:visited.chatbox-btn.fa, #converse-embedded-chat .chat-head-chatroom a:hover.chatbox-btn.fa, #converse-embedded-chat .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa,
|
||||||
|
#conversejs .chat-head-chatroom a.chatbox-btn.fa,
|
||||||
|
#conversejs .chat-head-chatroom a:visited.chatbox-btn.fa,
|
||||||
|
#conversejs .chat-head-chatroom a:hover.chatbox-btn.fa,
|
||||||
|
#conversejs .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa {
|
||||||
|
color: white; }
|
||||||
|
#converse-embedded-chat .chat-head-chatroom a.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head-chatroom a:visited.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head-chatroom a:hover.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa.button-on,
|
||||||
|
#conversejs .chat-head-chatroom a.chatbox-btn.fa.button-on,
|
||||||
|
#conversejs .chat-head-chatroom a:visited.chatbox-btn.fa.button-on,
|
||||||
|
#conversejs .chat-head-chatroom a:hover.chatbox-btn.fa.button-on,
|
||||||
|
#conversejs .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa.button-on {
|
||||||
|
background-color: white;
|
||||||
|
color: #E77051; }
|
||||||
#converse-embedded-chat .chat-head-chatroom .chatbox-btn.button-on,
|
#converse-embedded-chat .chat-head-chatroom .chatbox-btn.button-on,
|
||||||
#conversejs .chat-head-chatroom .chatbox-btn.button-on {
|
#conversejs .chat-head-chatroom .chatbox-btn.button-on {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
|
@ -5175,6 +5175,19 @@ body {
|
|||||||
#converse-embedded-chat .flyout,
|
#converse-embedded-chat .flyout,
|
||||||
#conversejs .flyout {
|
#conversejs .flyout {
|
||||||
bottom: 0; } }
|
bottom: 0; } }
|
||||||
|
#converse-embedded-chat .chatbox-btn,
|
||||||
|
#conversejs .chatbox-btn {
|
||||||
|
border-radius: 25%;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 0 0.2em;
|
||||||
|
padding: 0.3em;
|
||||||
|
text-decoration: none; }
|
||||||
|
#converse-embedded-chat .chatbox-btn:active,
|
||||||
|
#conversejs .chatbox-btn:active {
|
||||||
|
position: relative;
|
||||||
|
top: 1px; }
|
||||||
#converse-embedded-chat .chat-head,
|
#converse-embedded-chat .chat-head,
|
||||||
#conversejs .chat-head {
|
#conversejs .chat-head {
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
@ -5192,8 +5205,7 @@ body {
|
|||||||
margin-right: 0.5em; }
|
margin-right: 0.5em; }
|
||||||
#converse-embedded-chat .chat-head .chatbox-buttons,
|
#converse-embedded-chat .chat-head .chatbox-buttons,
|
||||||
#conversejs .chat-head .chatbox-buttons {
|
#conversejs .chat-head .chatbox-buttons {
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse; }
|
||||||
float: right; }
|
|
||||||
#converse-embedded-chat .chat-head .user-custom-message,
|
#converse-embedded-chat .chat-head .user-custom-message,
|
||||||
#conversejs .chat-head .user-custom-message {
|
#conversejs .chat-head .user-custom-message {
|
||||||
color: white;
|
color: white;
|
||||||
@ -5204,26 +5216,33 @@ body {
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding-top: 0.2em; }
|
padding-top: 0.2em; }
|
||||||
#converse-embedded-chat .chatbox-btn,
|
#converse-embedded-chat .chat-head a.chatbox-btn.fa, #converse-embedded-chat .chat-head a:visited.chatbox-btn.fa, #converse-embedded-chat .chat-head a:hover.chatbox-btn.fa, #converse-embedded-chat .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa,
|
||||||
#conversejs .chatbox-btn {
|
#conversejs .chat-head a.chatbox-btn.fa,
|
||||||
border-radius: 25%;
|
#conversejs .chat-head a:visited.chatbox-btn.fa,
|
||||||
border: none;
|
#conversejs .chat-head a:hover.chatbox-btn.fa,
|
||||||
color: white;
|
#conversejs .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa {
|
||||||
cursor: pointer;
|
color: white; }
|
||||||
display: inline-block;
|
#converse-embedded-chat .chat-head a.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head a:visited.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head a:hover.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa.button-on,
|
||||||
float: right;
|
#conversejs .chat-head a.chatbox-btn.fa.button-on,
|
||||||
font-size: 16px;
|
#conversejs .chat-head a:visited.chatbox-btn.fa.button-on,
|
||||||
margin: 0 0.2em;
|
#conversejs .chat-head a:hover.chatbox-btn.fa.button-on,
|
||||||
padding: 0.3em;
|
#conversejs .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa.button-on {
|
||||||
text-decoration: none; }
|
background-color: white;
|
||||||
#converse-embedded-chat .chatbox-btn:active,
|
color: #3AA569; }
|
||||||
#conversejs .chatbox-btn:active {
|
#converse-embedded-chat .chat-head .chatbox-btn,
|
||||||
position: relative;
|
#conversejs .chat-head .chatbox-btn {
|
||||||
top: 1px; }
|
color: white; }
|
||||||
#converse-embedded-chat .chatbox-btn.button-on,
|
#converse-embedded-chat .chat-head .chatbox-btn.fa,
|
||||||
#conversejs .chatbox-btn.button-on {
|
#conversejs .chat-head .chatbox-btn.fa {
|
||||||
background-color: white;
|
color: white; }
|
||||||
color: #3AA569; }
|
#converse-embedded-chat .chat-head .chatbox-btn:active,
|
||||||
|
#conversejs .chat-head .chatbox-btn:active {
|
||||||
|
position: relative;
|
||||||
|
top: 1px; }
|
||||||
|
#converse-embedded-chat .chat-head .chatbox-btn.button-on,
|
||||||
|
#conversejs .chat-head .chatbox-btn.button-on {
|
||||||
|
background-color: white;
|
||||||
|
color: #3AA569; }
|
||||||
#converse-embedded-chat .chatbox,
|
#converse-embedded-chat .chatbox,
|
||||||
#conversejs .chatbox {
|
#conversejs .chatbox {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
@ -5624,6 +5643,7 @@ body {
|
|||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
margin: 0 0.3em; }
|
margin: 0 0.3em; }
|
||||||
#conversejs.fullscreen .flyout {
|
#conversejs.fullscreen .flyout {
|
||||||
|
border-radius: 0;
|
||||||
border: 1.2em solid #3AA569;
|
border: 1.2em solid #3AA569;
|
||||||
border-top: 0.8em solid #3AA569;
|
border-top: 0.8em solid #3AA569;
|
||||||
bottom: 0; }
|
bottom: 0; }
|
||||||
@ -6036,8 +6056,8 @@ body {
|
|||||||
padding: 10px 8px 0 8px; }
|
padding: 10px 8px 0 8px; }
|
||||||
#conversejs .toggle-controlbox span {
|
#conversejs .toggle-controlbox span {
|
||||||
color: white; }
|
color: white; }
|
||||||
#conversejs .xmpp-status .online, #conversejs .xmpp-status-menu .online {
|
#conversejs .xmpp-status .online, #conversejs .xmpp-status .fa-circle, #conversejs .xmpp-status-menu .online, #conversejs .xmpp-status-menu .fa-circle {
|
||||||
color: #3AA569; }
|
color: #33925d; }
|
||||||
#conversejs .xmpp-status .dnd, #conversejs .xmpp-status-menu .dnd {
|
#conversejs .xmpp-status .dnd, #conversejs .xmpp-status-menu .dnd {
|
||||||
color: #E77051; }
|
color: #E77051; }
|
||||||
#conversejs .xmpp-status .away, #conversejs .xmpp-status-menu .away {
|
#conversejs .xmpp-status .away, #conversejs .xmpp-status-menu .away {
|
||||||
@ -6283,6 +6303,19 @@ body {
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
text-overflow: ellipsis; }
|
text-overflow: ellipsis; }
|
||||||
|
#converse-embedded-chat .chat-head-chatroom a.chatbox-btn.fa, #converse-embedded-chat .chat-head-chatroom a:visited.chatbox-btn.fa, #converse-embedded-chat .chat-head-chatroom a:hover.chatbox-btn.fa, #converse-embedded-chat .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa,
|
||||||
|
#conversejs .chat-head-chatroom a.chatbox-btn.fa,
|
||||||
|
#conversejs .chat-head-chatroom a:visited.chatbox-btn.fa,
|
||||||
|
#conversejs .chat-head-chatroom a:hover.chatbox-btn.fa,
|
||||||
|
#conversejs .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa {
|
||||||
|
color: white; }
|
||||||
|
#converse-embedded-chat .chat-head-chatroom a.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head-chatroom a:visited.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head-chatroom a:hover.chatbox-btn.fa.button-on, #converse-embedded-chat .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa.button-on,
|
||||||
|
#conversejs .chat-head-chatroom a.chatbox-btn.fa.button-on,
|
||||||
|
#conversejs .chat-head-chatroom a:visited.chatbox-btn.fa.button-on,
|
||||||
|
#conversejs .chat-head-chatroom a:hover.chatbox-btn.fa.button-on,
|
||||||
|
#conversejs .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa.button-on {
|
||||||
|
background-color: white;
|
||||||
|
color: #E77051; }
|
||||||
#converse-embedded-chat .chat-head-chatroom .chatbox-btn.button-on,
|
#converse-embedded-chat .chat-head-chatroom .chatbox-btn.button-on,
|
||||||
#conversejs .chat-head-chatroom .chatbox-btn.button-on {
|
#conversejs .chat-head-chatroom .chatbox-btn.button-on {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
@ -6520,8 +6553,6 @@ body {
|
|||||||
#conversejs.fullscreen .chat-head-chatroom {
|
#conversejs.fullscreen .chat-head-chatroom {
|
||||||
height: 62px;
|
height: 62px;
|
||||||
font-size: 20px; }
|
font-size: 20px; }
|
||||||
#conversejs.fullscreen .chat-head-chatroom .close-chatbox-button:before {
|
|
||||||
content: "\e601"; }
|
|
||||||
#conversejs.fullscreen .chat-head-chatroom .chat-title .chatroom-description {
|
#conversejs.fullscreen .chat-head-chatroom .chat-title .chatroom-description {
|
||||||
font-size: 65%; }
|
font-size: 65%; }
|
||||||
#conversejs.fullscreen .chatroom .box-flyout {
|
#conversejs.fullscreen .chatroom .box-flyout {
|
||||||
|
@ -3,8 +3,9 @@
|
|||||||
<div class="d-flex">
|
<div class="d-flex">
|
||||||
<canvas height="20" width="20" class="avatar align-self-center"></canvas>
|
<canvas height="20" width="20" class="avatar align-self-center"></canvas>
|
||||||
<span class="username w-100 align-self-center">Walter White</span>
|
<span class="username w-100 align-self-center">Walter White</span>
|
||||||
<a class="chatbox-btn fa fa-vcard align-self-center" title="Your profile" data-toggle="modal" data-target="#userProfileModal"></a>
|
<!-- <a class="chatbox-btn fa fa-vcard align-self-center" title="Your profile" data-toggle="modal" data-target="#userProfileModal"></a> -->
|
||||||
<a class="chatbox-btn fa fa-cog align-self-center" title="Change settings" data-toggle="modal" data-target="#settingsModal"></a>
|
<!-- <a class="chatbox-btn fa fa-cog align-self-center" title="Change settings" data-toggle="modal" data-target="#settingsModal"></a> -->
|
||||||
|
<a class="chatbox-btn fa fa-sign-out align-self-center" title="Log out"></a>
|
||||||
</div>
|
</div>
|
||||||
<div class="d-flex xmpp-status">
|
<div class="d-flex xmpp-status">
|
||||||
<span class="online w-100 align-self-center" data-value="online">
|
<span class="online w-100 align-self-center" data-value="online">
|
||||||
|
@ -18,6 +18,22 @@
|
|||||||
bottom: 0;
|
bottom: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.chatbox-btn {
|
||||||
|
border-radius: 25%;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: $box-close-font-size;
|
||||||
|
margin: 0 0.2em;
|
||||||
|
padding: 0.3em;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
position: relative;
|
||||||
|
top: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.chat-head {
|
.chat-head {
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
@ -37,7 +53,6 @@
|
|||||||
|
|
||||||
.chatbox-buttons {
|
.chatbox-buttons {
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
float: right;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-custom-message {
|
.user-custom-message {
|
||||||
@ -50,27 +65,35 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
padding-top: 0.2em;
|
padding-top: 0.2em;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
.chatbox-btn {
|
a, a:visited, a:hover, a:not([href]):not([tabindex]) {
|
||||||
border-radius: 25%;
|
&.chatbox-btn {
|
||||||
border: none;
|
&.fa {
|
||||||
color: white;
|
color: white;
|
||||||
cursor: pointer;
|
&.button-on {
|
||||||
display: inline-block;
|
background-color: white;
|
||||||
float: right;
|
color: $chat-head-color;
|
||||||
font-size: $box-close-font-size;
|
}
|
||||||
margin: 0 0.2em;
|
}
|
||||||
padding: 0.3em;
|
}
|
||||||
text-decoration: none;
|
|
||||||
&:active {
|
|
||||||
position: relative;
|
|
||||||
top: 1px;
|
|
||||||
}
|
}
|
||||||
&.button-on {
|
|
||||||
background-color: white;
|
.chatbox-btn {
|
||||||
color: $chat-head-color;
|
color: white;
|
||||||
|
&.fa {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
position: relative;
|
||||||
|
top: 1px;
|
||||||
|
}
|
||||||
|
&.button-on {
|
||||||
|
background-color: white;
|
||||||
|
color: $chat-head-color;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.chatbox {
|
.chatbox {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
margin: 0 $chat-gutter;
|
margin: 0 $chat-gutter;
|
||||||
|
@ -20,6 +20,18 @@
|
|||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a, a:visited, a:hover, a:not([href]):not([tabindex]) {
|
||||||
|
&.chatbox-btn {
|
||||||
|
&.fa {
|
||||||
|
color: $chat-head-text-color;
|
||||||
|
&.button-on {
|
||||||
|
background-color: $chat-head-text-color;
|
||||||
|
color: $chatroom-head-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.chatbox-btn {
|
.chatbox-btn {
|
||||||
&.button-on {
|
&.button-on {
|
||||||
background-color: $chat-head-text-color;
|
background-color: $chat-head-text-color;
|
||||||
|
@ -491,8 +491,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.xmpp-status, .xmpp-status-menu {
|
.xmpp-status, .xmpp-status-menu {
|
||||||
.online {
|
.online, .fa-circle {
|
||||||
color: $green;
|
color: darken($green, 5%);
|
||||||
}
|
}
|
||||||
.dnd {
|
.dnd {
|
||||||
color: $red
|
color: $red
|
||||||
|
@ -4,6 +4,7 @@
|
|||||||
margin: 0 0.3em;
|
margin: 0 0.3em;
|
||||||
}
|
}
|
||||||
.flyout {
|
.flyout {
|
||||||
|
border-radius: 0;
|
||||||
border: $flyout-padding solid $chat-head-color;
|
border: $flyout-padding solid $chat-head-color;
|
||||||
border-top: 0.8em solid $chat-head-color;
|
border-top: 0.8em solid $chat-head-color;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
@ -3,9 +3,6 @@
|
|||||||
.chat-head-chatroom {
|
.chat-head-chatroom {
|
||||||
height: $chatroom-head-height;
|
height: $chatroom-head-height;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
.close-chatbox-button:before {
|
|
||||||
content: "\e601"; // Leave icon
|
|
||||||
}
|
|
||||||
.chat-title {
|
.chat-title {
|
||||||
.chatroom-description {
|
.chatroom-description {
|
||||||
font-size: 65%;
|
font-size: 65%;
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
<div class="flyout box-flyout">
|
<div class="flyout box-flyout">
|
||||||
<div class="chat-head chat-head-chatroom"></div>
|
<div class="chat-head chat-head-chatroom row no-gutters"></div>
|
||||||
<div class="chat-body chatroom-body"></div>
|
<div class="chat-body chatroom-body"></div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,4 +1,2 @@
|
|||||||
<a class="chatbox-btn toggle-bookmark icon-pushpin
|
<a class="chatbox-btn toggle-bookmark fa fa-bookmark
|
||||||
{[ if (o.bookmarked) {]}
|
{[ if (o.bookmarked) {]} button-on {[ } ]}" title="{{{o.info_toggle_bookmark}}}"></a>
|
||||||
button-on
|
|
||||||
{[ } ]}" title="{{{o.info_toggle_bookmark}}}"></a>
|
|
||||||
|
@ -1,12 +1,19 @@
|
|||||||
<a class="chatbox-btn close-chatbox-button icon-close" title="{{{o.info_close}}}"></a>
|
<div class="col-sm-9 col-lg-9">
|
||||||
{[ if (o.affiliation == 'owner') { ]}
|
<div class="chat-title" title="{{{o.jid}}}">
|
||||||
<a class="chatbox-btn configure-chatroom-button icon-wrench" title="{{{o.info_configure}}} "></a>
|
{[ if (o.name && o.name !== o.Strophe.getNodeFromJid(o.jid)) { ]}
|
||||||
{[ } ]}
|
<span class="chatroom-name">{{{ o.name }}}</span>
|
||||||
<div class="chat-title" title="{{{o.jid}}}">
|
{[ } else { ]}
|
||||||
{[ if (o.name && o.name !== o.Strophe.getNodeFromJid(o.jid)) { ]}
|
<span class="chatroom-name">{{{ o.Strophe.getNodeFromJid(o.jid) }}}</span>@{{{ o.Strophe.getDomainFromJid(o.jid) }}}
|
||||||
<span class="chatroom-name">{{{ o.name }}}</span>
|
{[ } ]}
|
||||||
{[ } else { ]}
|
<p class="chatroom-description">{{{ o.description }}}<p/>
|
||||||
<span class="chatroom-name">{{{ o.Strophe.getNodeFromJid(o.jid) }}}</span>@{{{ o.Strophe.getDomainFromJid(o.jid) }}}
|
</div>
|
||||||
{[ } ]}
|
|
||||||
<p class="chatroom-description">{{{ o.description }}}<p/>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-sm-3 col-lg-3">
|
||||||
|
<div class="chatbox-buttons row no-gutters">
|
||||||
|
<a class="chatbox-btn close-chatbox-button fa fa-sign-out" title="{{{o.info_close}}}"></a>
|
||||||
|
{[ if (o.affiliation == 'owner') { ]}
|
||||||
|
<a class="chatbox-btn configure-chatroom-button fa fa-wrench" title="{{{o.info_configure}}} "></a>
|
||||||
|
{[ } ]}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user