From 26535ed4eff6d454821af9e368e8289b755463da Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Tue, 18 Sep 2018 13:36:02 +0200
Subject: [PATCH] Smaller font for the room features list in overlay view mode

---
 css/converse.css     | 11 ++++++-----
 sass/_chatrooms.scss | 15 ++++++++-------
 sass/_variables.scss |  1 +
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/css/converse.css b/css/converse.css
index 18d6ca0dc..3fd7fd2df 100644
--- a/css/converse.css
+++ b/css/converse.css
@@ -10500,10 +10500,9 @@ body.reset {
           #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-header .hide-occupants {
             align-self: flex-end;
             cursor: pointer; }
-          #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .occupants-header .occupants-heading,
-          #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-header .occupants-heading {
-            font-family: "Century Gothic", futura, "URW Gothic L", Verdana, sans-serif;
-            padding: 0.3em 0; }
+        #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .occupants-heading,
+        #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
+          font-family: "Century Gothic", futura, "URW Gothic L", Verdana, sans-serif; }
         #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul,
         #conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul {
           padding: 0; }
@@ -10640,8 +10639,10 @@ body.reset {
   #conversejs.converse-overlayed .chatbox.chatroom .chatbox-buttons {
     flex: 0 0 33.3333333333%;
     max-width: 33.3333333333%; }
+  #conversejs.converse-overlayed .chatbox.chatroom .chatroom-body .occupants .occupants-heading {
+    padding: 0; }
   #conversejs.converse-overlayed .chatbox.chatroom .chatroom-body .occupants .chatroom-features .feature {
-    font-size: 12px; }
+    font-size: 10px; }
   #conversejs.converse-overlayed .chatbox.chatroom .chatroom-body .chat-area {
     min-width: 250px; }
   #conversejs.converse-overlayed .chatbox.chatroom .sendXMPPMessage .chat-toolbar li .toolbar-menu {
diff --git a/sass/_chatrooms.scss b/sass/_chatrooms.scss
index d3e4951ca..a9909a830 100644
--- a/sass/_chatrooms.scss
+++ b/sass/_chatrooms.scss
@@ -126,7 +126,7 @@
                 .chat-area {
                     display: flex;
                     flex-direction: column;
-                    word-wrap: break-word; 
+                    word-wrap: break-word;
                     .new-msgs-indicator {
                         background-color: $chatroom-head-color;
                     }
@@ -153,12 +153,10 @@
                             align-self: flex-end;
                             cursor: pointer;
                         }
-                        .occupants-heading {
-                            font-family: $heading-font; 
-                            padding: 0.3em 0;
-                        }
                     }
-
+                    .occupants-heading {
+                        font-family: $heading-font;
+                    }
                     .awesomplete {
                         ul {
                             padding: 0;
@@ -312,9 +310,12 @@
             }
             .chatroom-body {
                 .occupants {
+                    .occupants-heading {
+                        padding: 0;
+                    }
                     .chatroom-features {
                         .feature {
-                            font-size: $font-size-small;
+                            font-size: $font-size-tiny;
                         }
                     }
                 }
diff --git a/sass/_variables.scss b/sass/_variables.scss
index a7eb1a737..372c77c60 100644
--- a/sass/_variables.scss
+++ b/sass/_variables.scss
@@ -131,6 +131,7 @@ $box-close-button-padding-right: 4px !default;
 $chatbox-button-size: 14px !default;
 $fullpage-chatbox-button-size: 16px !default;
 
+$font-size-tiny: 10px !default;
 $font-size-small: 12px !default;
 $font-size: 14px !default;
 $font-size-large: 16px !default;