diff --git a/css/converse.css b/css/converse.css index d13d3cb9d..e7baeea94 100644 --- a/css/converse.css +++ b/css/converse.css @@ -5119,6 +5119,19 @@ body.reset { #converse-embedded-chat .flyout, #conversejs .flyout { 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, #conversejs .chat-head { flex-wrap: nowrap; @@ -5136,8 +5149,7 @@ body.reset { margin-right: 0.5em; } #converse-embedded-chat .chat-head .chatbox-buttons, #conversejs .chat-head .chatbox-buttons { - flex-direction: row-reverse; - float: right; } + flex-direction: row-reverse; } #converse-embedded-chat .chat-head .user-custom-message, #conversejs .chat-head .user-custom-message { color: white; @@ -5148,26 +5160,33 @@ body.reset { white-space: nowrap; margin: 0; padding-top: 0.2em; } -#converse-embedded-chat .chatbox-btn, -#conversejs .chatbox-btn { - border-radius: 25%; - border: none; - color: white; - cursor: pointer; - display: inline-block; - float: right; - 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 .chatbox-btn.button-on, - #conversejs .chatbox-btn.button-on { - background-color: white; - color: #3AA569; } + #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 .chat-head a.chatbox-btn.fa, + #conversejs .chat-head a:visited.chatbox-btn.fa, + #conversejs .chat-head a:hover.chatbox-btn.fa, + #conversejs .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa { + color: white; } + #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, + #conversejs .chat-head a.chatbox-btn.fa.button-on, + #conversejs .chat-head a:visited.chatbox-btn.fa.button-on, + #conversejs .chat-head a:hover.chatbox-btn.fa.button-on, + #conversejs .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa.button-on { + background-color: white; + color: #3AA569; } + #converse-embedded-chat .chat-head .chatbox-btn, + #conversejs .chat-head .chatbox-btn { + color: white; } + #converse-embedded-chat .chat-head .chatbox-btn.fa, + #conversejs .chat-head .chatbox-btn.fa { + color: white; } + #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, #conversejs .chatbox { text-align: left; @@ -5965,8 +5984,8 @@ body.reset { padding: 10px 8px 0 8px; } #conversejs .toggle-controlbox span { color: white; } -#conversejs .xmpp-status .online, #conversejs .xmpp-status-menu .online { - color: #3AA569; } +#conversejs .xmpp-status .online, #conversejs .xmpp-status .fa-circle, #conversejs .xmpp-status-menu .online, #conversejs .xmpp-status-menu .fa-circle { + color: #33925d; } #conversejs .xmpp-status .dnd, #conversejs .xmpp-status-menu .dnd { color: #E77051; } #conversejs .xmpp-status .away, #conversejs .xmpp-status-menu .away { @@ -6150,6 +6169,19 @@ body.reset { white-space: nowrap; overflow-y: hidden; 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, #conversejs .chat-head-chatroom .chatbox-btn.button-on { background-color: white; diff --git a/css/inverse.css b/css/inverse.css index 198e5fcb3..3196edd58 100644 --- a/css/inverse.css +++ b/css/inverse.css @@ -5175,6 +5175,19 @@ body { #converse-embedded-chat .flyout, #conversejs .flyout { 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, #conversejs .chat-head { flex-wrap: nowrap; @@ -5192,8 +5205,7 @@ body { margin-right: 0.5em; } #converse-embedded-chat .chat-head .chatbox-buttons, #conversejs .chat-head .chatbox-buttons { - flex-direction: row-reverse; - float: right; } + flex-direction: row-reverse; } #converse-embedded-chat .chat-head .user-custom-message, #conversejs .chat-head .user-custom-message { color: white; @@ -5204,26 +5216,33 @@ body { white-space: nowrap; margin: 0; padding-top: 0.2em; } -#converse-embedded-chat .chatbox-btn, -#conversejs .chatbox-btn { - border-radius: 25%; - border: none; - color: white; - cursor: pointer; - display: inline-block; - float: right; - 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 .chatbox-btn.button-on, - #conversejs .chatbox-btn.button-on { - background-color: white; - color: #3AA569; } + #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 .chat-head a.chatbox-btn.fa, + #conversejs .chat-head a:visited.chatbox-btn.fa, + #conversejs .chat-head a:hover.chatbox-btn.fa, + #conversejs .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa { + color: white; } + #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, + #conversejs .chat-head a.chatbox-btn.fa.button-on, + #conversejs .chat-head a:visited.chatbox-btn.fa.button-on, + #conversejs .chat-head a:hover.chatbox-btn.fa.button-on, + #conversejs .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa.button-on { + background-color: white; + color: #3AA569; } + #converse-embedded-chat .chat-head .chatbox-btn, + #conversejs .chat-head .chatbox-btn { + color: white; } + #converse-embedded-chat .chat-head .chatbox-btn.fa, + #conversejs .chat-head .chatbox-btn.fa { + color: white; } + #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, #conversejs .chatbox { text-align: left; @@ -5624,6 +5643,7 @@ body { font-size: 18px; margin: 0 0.3em; } #conversejs.fullscreen .flyout { + border-radius: 0; border: 1.2em solid #3AA569; border-top: 0.8em solid #3AA569; bottom: 0; } @@ -6036,8 +6056,8 @@ body { padding: 10px 8px 0 8px; } #conversejs .toggle-controlbox span { color: white; } -#conversejs .xmpp-status .online, #conversejs .xmpp-status-menu .online { - color: #3AA569; } +#conversejs .xmpp-status .online, #conversejs .xmpp-status .fa-circle, #conversejs .xmpp-status-menu .online, #conversejs .xmpp-status-menu .fa-circle { + color: #33925d; } #conversejs .xmpp-status .dnd, #conversejs .xmpp-status-menu .dnd { color: #E77051; } #conversejs .xmpp-status .away, #conversejs .xmpp-status-menu .away { @@ -6283,6 +6303,19 @@ body { white-space: nowrap; overflow-y: hidden; 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, #conversejs .chat-head-chatroom .chatbox-btn.button-on { background-color: white; @@ -6520,8 +6553,6 @@ body { #conversejs.fullscreen .chat-head-chatroom { height: 62px; font-size: 20px; } - #conversejs.fullscreen .chat-head-chatroom .close-chatbox-button:before { - content: "\e601"; } #conversejs.fullscreen .chat-head-chatroom .chat-title .chatroom-description { font-size: 65%; } #conversejs.fullscreen .chatroom .box-flyout { diff --git a/mockup/user-panel.html b/mockup/user-panel.html index 777bf0cf9..7ecc34883 100644 --- a/mockup/user-panel.html +++ b/mockup/user-panel.html @@ -3,8 +3,9 @@
{{{ o.description }}}
+{{{ o.description }}}
+