Nicer rendering of the spinner in MUC rooms

css/converse.css

@@ -1185,23 +1185,6 @@
   #converse-embedded-chat .emoticon,
   #conversejs .emoticon {
     font-size: 14px; }
-  #converse-embedded-chat .left,
-  #conversejs .left {
-    float: left; }
-  #converse-embedded-chat .right,
-  #conversejs .right {
-    float: right; }
-  #converse-embedded-chat .centered,
-  #conversejs .centered {
-    text-align: center;
-    display: block;
-    margin: 5em auto; }
-  #converse-embedded-chat .hor_centered,
-  #conversejs .hor_centered {
-    text-align: center;
-    display: block;
-    margin: 0 auto;
-    clear: both; }
 @keyframes fadein {
   0% {
     opacity: 0; }
@@ -1265,12 +1248,30 @@
     animation: spin 2s infinite, linear;
     display: block;
     text-align: center;
-    margin: 5px; }
+    margin: 1em; }
     #converse-embedded-chat .spinner:before,
     #conversejs .spinner:before {
       font-size: 24px;
       font-family: 'Converse-js' !important;
       content: "\231b"; }
+  #converse-embedded-chat .left,
+  #conversejs .left {
+    float: left; }
+  #converse-embedded-chat .right,
+  #conversejs .right {
+    float: right; }
+  #converse-embedded-chat .centered,
+  #conversejs .centered {
+    text-align: center;
+    display: block;
+    margin: 0;
+    padding: 50% 0; }
+  #converse-embedded-chat .hor_centered,
+  #conversejs .hor_centered {
+    text-align: center;
+    display: block;
+    margin: 0 auto;
+    clear: both; }
   #converse-embedded-chat .button-group,
   #converse-embedded-chat .input-button-group,
   #conversejs .button-group,

sass/_chatrooms.scss

@@ -41,6 +41,10 @@
         @media screen and (max-width: $mobile-portrait-length) {
             width: $mobile-chat-width;
         }
+
+        .spinner {
+        }
+
         .box-flyout {
             min-width: $chatroom-width;
             width: $chatroom-width;

sass/_core.scss

@@ -42,23 +42,6 @@
     .emoticon {
         font-size: $font-size;
     }
-    .left {
-        float: left;
-    }
-    .right {
-        float: right;
-    }
-    .centered {
-        text-align: center;
-        display: block;
-        margin: 5em auto;
-    }
-    .hor_centered {
-        text-align: center;
-        display: block;
-        margin: 0 auto;
-        clear: both;
-    }
 
     @keyframes fadein {
         0% { opacity: 0 }
@@ -99,13 +82,31 @@
         @include animation(spin 2s infinite, linear);
         display: block;
         text-align: center;
-        margin: 5px;
+        margin: 1em;
         &:before {
             font-size: 24px;
             font-family: 'Converse-js' !important;
             content: "\231b";
         }
     }
+    .left {
+        float: left;
+    }
+    .right {
+        float: right;
+    }
+    .centered {
+        text-align: center;
+        display: block;
+        margin: 0;
+        padding: 50% 0;
+    }
+    .hor_centered {
+        text-align: center;
+        display: block;
+        margin: 0 auto;
+        clear: both;
+    }
 
     .button-group,
     .input-button-group {