Various style improvements related to embedded chats.

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 */

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;

sass/_chatbox.scss

@@ -326,6 +326,7 @@
                     color: $link-color;
                     padding-left: 5px;
                     ul {
+                        left: 0;
                         li {
                             font-size: $font-size;
                             padding: 5px;

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%;
         }
     }
 

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%;
                     }
                 }
             }