Darken modal overlay

css/converse.css

@@ -4813,6 +4813,8 @@ body.reset {
     color: #A8ABA1; }
   #conversejs .fa:hover {
     color: #818479; }
+  #conversejs .modal {
+    background-color: rgba(0, 0, 0, 0.4); }
   #conversejs .selected {
     color: #578EA9 !important; }
   #conversejs .circle {

css/inverse.css

@@ -4813,6 +4813,8 @@ body.reset {
     color: #A8ABA1; }
   #conversejs .fa:hover {
     color: #818479; }
+  #conversejs .modal {
+    background-color: rgba(0, 0, 0, 0.4); }
   #conversejs .selected {
     color: #578EA9 !important; }
   #conversejs .circle {

mockup/chatroom.html

@@ -93,63 +93,63 @@
                                     <pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre;"></pre>
                                 </form>
 
-                                    <ul class="occupant-list">
-                                        <li class="moderator occupant" title="This user is a moderator. Click to mention luke in your message.">
-                                            <div class="occupant-status occupant-online circle" title="Online"></div>luke</li>
-                                        <li class="participant occupant" title="Click to mention leia in your message.">
-                                            <div class="occupant-status occupant-online circle" title="Online"></div>leia</li>
-                                        <li class="participant occupant" title="Click to mention Obi-wan Kenobi, Jedi Master in your message.">
-                                            <div class="occupant-status occupant-online circle" title="Online"></div>Obi-wan Kenobi, Jedi Master</li>
-                                        <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                            <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                                        <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                            <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                                        <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                            <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                                        <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                            <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                                        <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                            <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                                        <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                            <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                                        <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                            <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                                        <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                            <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                                        <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                            <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                                        <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                            <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                                        <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                            <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                                        <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                            <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                                        <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                            <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                                        <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                            <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                                        <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                            <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                                        <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                            <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                                        <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                            <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                                        <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                            <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                                        <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                            <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+                                <ul class="occupant-list">
+                                    <li class="moderator occupant" title="This user is a moderator. Click to mention luke in your message.">
+                                        <div class="occupant-status occupant-online circle" title="Online"></div>luke</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+                                        <div class="occupant-status occupant-online circle" title="Online"></div>leia</li>
+                                    <li class="participant occupant" title="Click to mention Obi-wan Kenobi, Jedi Master in your message.">
+                                        <div class="occupant-status occupant-online circle" title="Online"></div>Obi-wan Kenobi, Jedi Master</li>
+                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+                                </ul>
+                                <div class="chatroom-features">
+                                    <p class="occupants-heading">Features</p>
+                                    <ul class="features-list">
+                                        <li class="feature" title="Secured: This room requires a password before entry"><span class="fa fa-unlock"></span>&nbsp;Password required</li>
+                                        <li class="feature" title="Public: This room is publicly searchable"><span class="fa fa-eye"></span>&nbsp;Public</li>
+                                        <li class="feature" title="Open: Anyone can join this room"><span class="fa fa-globe"></span>&nbsp;Open</li>
+                                        <li class="feature" title="Persistent: This room persists even if it's unoccupied"><span class="fa fa-save"></span>&nbsp;Persistent</li>
+                                        <li class="feature" title="Non-anonymous: All other room occupants can see your XMPP username"><span class="fa fa-vcard"></span>&nbsp;Non-anonymous</li>
+                                        <li class="feature" title="Unmoderated: This room is not being moderated"><span class="fa fa-info-circle"></span>&nbsp;Unmoderated</li>
                                     </ul>
-                                    <div class="chatroom-features">
-                                        <p class="occupants-heading">Features</p>
-                                        <ul class="features-list">
-                                            <li class="feature" title="Secured: This room requires a password before entry"><span class="fa fa-unlock"></span>&nbsp;Password required</li>
-                                            <li class="feature" title="Public: This room is publicly searchable"><span class="fa fa-eye"></span>&nbsp;Public</li>
-                                            <li class="feature" title="Open: Anyone can join this room"><span class="fa fa-globe"></span>&nbsp;Open</li>
-                                            <li class="feature" title="Persistent: This room persists even if it's unoccupied"><span class="fa fa-save"></span>&nbsp;Persistent</li>
-                                            <li class="feature" title="Non-anonymous: All other room occupants can see your XMPP username"><span class="fa fa-vcard"></span>&nbsp;Non-anonymous</li>
-                                            <li class="feature" title="Unmoderated: This room is not being moderated"><span class="fa fa-info-circle"></span>&nbsp;Unmoderated</li>
-                                        </ul>
-                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>

sass/_core.scss

@@ -142,6 +142,10 @@ body.reset {
         color: $gray-color;
     }
 
+    .modal {
+        background-color: rgba(0, 0, 0, 0.4);
+    }
+
     .selected {
         color: $link-color !important;
     }
@@ -150,7 +154,7 @@ body.reset {
         border-radius: 50%;
     }
 
-     .sidebar {
+    .sidebar {
         display: none;
         width: 50px;
         height: 100vh;