From ba32dfdb8327990521787537bc86e520b309ebe7 Mon Sep 17 00:00:00 2001 From: JC Brand Date: Fri, 3 Feb 2017 12:26:14 +0000 Subject: [PATCH] Various style improvements related to embedded chats. --- css/converse-muc-embedded.css | 21 +++++++++++++++++---- css/converse.css | 32 ++++++++++++++++++++------------ sass/_chatbox.scss | 1 + sass/_core.scss | 7 ++++++- sass/_muc_embedded.scss | 27 +++++++++++++++++++++++---- 5 files changed, 67 insertions(+), 21 deletions(-) diff --git a/css/converse-muc-embedded.css b/css/converse-muc-embedded.css index 383503368..1c16009c8 100644 --- a/css/converse-muc-embedded.css +++ b/css/converse-muc-embedded.css @@ -28,24 +28,37 @@ box-shadow: none; } #converse-embedded-chat .chatbox .chat-title { padding: 0.3em; - font-size: 110%; } + font-size: 150%; } #converse-embedded-chat .chatbox-btn { display: none; } #converse-embedded-chat .chatroom .box-flyout { min-width: auto; width: 100%; - height: 90vh; } + height: 55vh; } #converse-embedded-chat .chatroom .box-flyout .chat-body { height: -webkit-calc(100% - 55px); height: calc(100% - 55px); } + #converse-embedded-chat .chatroom .box-flyout .occupants-heading { + font-size: 150%; } #converse-embedded-chat .chatroom .box-flyout .chat-content { height: calc(100% - 97px); } + #converse-embedded-chat .chatroom .box-flyout .chat-content .chat-message { + margin: 0.5em; + font-size: 120%; } + #converse-embedded-chat .chatroom .box-flyout .sendXMPPMessage .chat-textarea { + padding: 0.5em; + font-size: 110%; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container { - height: auto; + font-size: 180%; + float: left; + height: 100%; + width: 100%; position: relative; } + #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container input { + font-size: 60%; } #converse-embedded-chat .chatroom .box-flyout .occupants .occupant-list { padding-left: 0.3em; } #converse-embedded-chat .chatroom .box-flyout .occupants .occupant-list li.occupant { - font-size: 14px; } + font-size: 120%; } /*# sourceMappingURL=converse-muc-embedded.css.map */ diff --git a/css/converse.css b/css/converse.css index 032602d8d..4265ace52 100644 --- a/css/converse.css +++ b/css/converse.css @@ -1327,7 +1327,7 @@ #converse-embedded-chat form.pure-form.converse-form, #conversejs form.pure-form.converse-form { background: white; - margin: 1em; } + padding: 1em; } #converse-embedded-chat form.pure-form.converse-form legend, #conversejs form.pure-form.converse-form legend { color: #818479; } @@ -1344,7 +1344,8 @@ #conversejs form.pure-form.converse-form input[type=number], #conversejs form.pure-form.converse-form input[type=button], #conversejs form.pure-form.converse-form input[type=submit] { - height: 2.2em; } + height: 2.2em; + padding: 0.5em; } #converse-embedded-chat form.pure-form.converse-form input[type=button], #converse-embedded-chat form.pure-form.converse-form input[type=submit], #conversejs form.pure-form.converse-form input[type=button], @@ -1366,7 +1367,11 @@ color: #818479; } #converse-embedded-chat form.pure-form.converse-centered-form, #conversejs form.pure-form.converse-centered-form { - text-align: center; } + position: absolute; + top: 30%; + transform: translateY(-50%); + text-align: center; + width: 100%; } #converse-embedded-chat .chat-textarea-chatbox-selected, #conversejs .chat-textarea-chatbox-selected { border: 1px solid #578308; @@ -1731,14 +1736,17 @@ #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley { color: #2A9D8F; padding-left: 5px; } - #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li, - #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li { - font-size: 14px; - padding: 5px; - z-index: 98; } - #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li:hover, - #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li:hover { - background-color: #DCF9F6; } + #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul, + #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul { + left: 0; } + #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li, + #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li { + font-size: 14px; + padding: 5px; + z-index: 98; } + #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li:hover, + #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li:hover { + background-color: #DCF9F6; } #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li { padding: 7px; @@ -2353,7 +2361,7 @@ border: 0; color: #818479; font-size: 14px; - height: 100%; + height: 289px; height: -webkit-calc(100% - 55px); height: calc(100% - 55px); overflow-y: auto; diff --git a/sass/_chatbox.scss b/sass/_chatbox.scss index 9d44c4017..508a63224 100644 --- a/sass/_chatbox.scss +++ b/sass/_chatbox.scss @@ -326,6 +326,7 @@ color: $link-color; padding-left: 5px; ul { + left: 0; li { font-size: $font-size; padding: 5px; diff --git a/sass/_core.scss b/sass/_core.scss index 50e7310a5..32d0c07f5 100644 --- a/sass/_core.scss +++ b/sass/_core.scss @@ -160,7 +160,7 @@ form { &.pure-form.converse-form { background: white; - margin: 1em; + padding: 1em; legend { color: $text-color; } @@ -173,6 +173,7 @@ input[type=button], input[type=submit] { height: 2.2em; + padding: 0.5em; } input[type=button], input[type=submit] { @@ -194,7 +195,11 @@ } } &.pure-form.converse-centered-form { + position: absolute; + top: 30%; + transform: translateY(-50%); text-align: center; + width: 100%; } } diff --git a/sass/_muc_embedded.scss b/sass/_muc_embedded.scss index bad1201f3..cf334a513 100644 --- a/sass/_muc_embedded.scss +++ b/sass/_muc_embedded.scss @@ -28,7 +28,7 @@ } .chat-title { padding: 0.3em; - font-size: 110%; + font-size: 150%; } } .chatbox-btn { @@ -38,24 +38,43 @@ .box-flyout { min-width: auto; width: 100%; - height: 90vh; + height: 55vh; .chat-body { @include calc(height, '100% - #{$chat-head-height}'); } + .occupants-heading { + font-size: 150%; + } .chat-content { height: calc(100% - #{$toolbar-height + $chat-textarea-height +2px}); + .chat-message { + margin: 0.5em; + font-size: 120%; + } + } + .sendXMPPMessage { + .chat-textarea { + padding: 0.5em; + font-size: 110%; + } } .chatroom-body { .chatroom-form-container { - height: auto; + font-size: 180%; + float: left; + height: 100%; + width: 100%; position: relative; + input { + font-size: 60%; + } } } .occupants { .occupant-list { padding-left: 0.3em; li.occupant { - font-size: 14px; + font-size: 120%; } } }