Update padding of controlbox elements

Instead of padding the container, pad individual elements that need it.
This enables us to have highlighting (e.g. on hover) that spans the full
width of the controlbox.

updates #1069

css/converse.css

@@ -6858,18 +6858,22 @@ body.reset {
     font-size: 60%; }
 
 #conversejs {
+  bottom: 0;
+  height: 100%;
+  position: fixed;
   padding-left: env(safe-area-inset-left);
   padding-right: env(safe-area-inset-right);
   color: #666;
   font-family: "Helvetica", "Arial", sans-serif;
   font-size: 14px;
   direction: ltr;
-  display: block;
   z-index: 1031; }
   #conversejs .brand-heading {
     font-family: "Century Gothic", futura, "URW Gothic L", Verdana, sans-serif; }
     #conversejs .brand-heading .icon-conversejs {
       font-size: 80%; }
+  #conversejs .popover {
+    position: fixed; }
   #conversejs .converse-chatboxes {
     z-index: 1031;
     position: fixed;
@@ -7203,7 +7207,7 @@ body.reset {
 #conversejs form .form-group {
   margin-bottom: 2em; }
 #conversejs form .form-check-label {
-  margin-top: 0.1rem; }
+  margin-top: 0.3rem; }
 #conversejs form .form-control::-webkit-input-placeholder {
   /* Chrome/Opera/Safari */
   color: #A8ABA1; }
@@ -7276,9 +7280,6 @@ body.reset {
 #conversejs form.converse-centered-form {
   text-align: center; }
 
-#conversejs.fullscreen form .form-check-label {
-  margin-top: 0.3rem; }
-
 #conversejs #user-profile-modal label {
   font-weight: bold; }
 
@@ -7868,13 +7869,16 @@ body.reset {
     overflow-y: auto;
     background-color: white; }
   #conversejs #controlbox .controlbox-pane {
-    padding: 1em;
     background-color: white;
     border: 0;
     font-size: 14px;
     left: 0;
     text-align: left;
-    overflow-x: hidden; }
+    overflow-x: hidden;
+    padding: 1em 0 1em 0; }
+    #conversejs #controlbox .controlbox-pane .controlbox-padded {
+      padding-left: 1em;
+      padding-right: 1em; }
     #conversejs #controlbox .controlbox-pane .add-converse-contact {
       margin: 0 0 0.75em 0; }
     #conversejs #controlbox .controlbox-pane .chatbox-btn {
@@ -7939,21 +7943,21 @@ body.reset {
         display: none; }
       #conversejs:not(.converse-embedded) .converse-chatboxes.sidebar-open #controlbox .controlbox-pane {
         display: block; } }
-#conversejs:not(.fullscreen) #controlbox {
+#conversejs:not(.converse-fullscreen) #controlbox {
   order: -1;
   min-width: 250px !important;
   width: 250px; }
-  #conversejs:not(.fullscreen) #controlbox .box-flyout {
+  #conversejs:not(.converse-fullscreen) #controlbox .box-flyout {
     min-width: 250px !important;
     width: 250px; }
-  #conversejs:not(.fullscreen) #controlbox:not(.logged-out) .controlbox-head {
+  #conversejs:not(.converse-fullscreen) #controlbox:not(.logged-out) .controlbox-head {
     height: 15px; }
-  #conversejs:not(.fullscreen) #controlbox .controlbox-head {
+  #conversejs:not(.converse-fullscreen) #controlbox .controlbox-head {
     display: flex;
     flex-direction: row-reverse;
     flex-wrap: nowrap;
     justify-content: space-between; }
-    #conversejs:not(.fullscreen) #controlbox .controlbox-head .brand-heading {
+    #conversejs:not(.converse-fullscreen) #controlbox .controlbox-head .brand-heading {
       position: relative;
       width: 100%;
       min-height: 1px;
@@ -7963,16 +7967,16 @@ body.reset {
       max-width: 66.6666666667%;
       color: #666;
       font-size: 2em; }
-    #conversejs:not(.fullscreen) #controlbox .controlbox-head .chatbox-btn {
+    #conversejs:not(.converse-fullscreen) #controlbox .controlbox-head .chatbox-btn {
       color: #578EA9;
       margin: 0; }
-  #conversejs:not(.fullscreen) #controlbox #converse-register, #conversejs:not(.fullscreen) #controlbox #converse-login {
+  #conversejs:not(.converse-fullscreen) #controlbox #converse-register, #conversejs:not(.converse-fullscreen) #controlbox #converse-login {
     flex: 0 0 100%;
     max-width: 100%;
     padding-bottom: 0; }
-  #conversejs:not(.fullscreen) #controlbox #converse-register .button-cancel {
+  #conversejs:not(.converse-fullscreen) #controlbox #converse-register .button-cancel {
     font-size: 90%; }
-  #conversejs:not(.fullscreen) #controlbox .controlbox-panes {
+  #conversejs:not(.converse-fullscreen) #controlbox .controlbox-panes {
     border-radius: 4px; }
 
 #conversejs .list-container {
@@ -8107,7 +8111,8 @@ body.reset {
         color: #666;
         display: block;
         width: 100%;
-        padding: 0 0 0.3rem 0; }
+        padding-top: 0;
+        padding-bottom: 0.3rem; }
         #conversejs #converse-roster .roster-contacts .roster-group .group-toggle:hover {
           color: #585B51; }
       #conversejs #converse-roster .roster-contacts .roster-group li {

css/inverse.css

@@ -6858,18 +6858,22 @@ body.reset {
     font-size: 60%; }
 
 #conversejs {
+  bottom: 0;
+  height: 100%;
+  position: fixed;
   padding-left: env(safe-area-inset-left);
   padding-right: env(safe-area-inset-right);
   color: #666;
   font-family: "Helvetica", "Arial", sans-serif;
   font-size: 16px;
   direction: ltr;
-  display: block;
   z-index: 1031; }
   #conversejs .brand-heading {
     font-family: "Century Gothic", futura, "URW Gothic L", Verdana, sans-serif; }
     #conversejs .brand-heading .icon-conversejs {
       font-size: 80%; }
+  #conversejs .popover {
+    position: fixed; }
   #conversejs .converse-chatboxes {
     z-index: 1031;
     position: fixed;
@@ -7245,7 +7249,7 @@ body {
 #conversejs form .form-group {
   margin-bottom: 2em; }
 #conversejs form .form-check-label {
-  margin-top: 0.1rem; }
+  margin-top: 0.3rem; }
 #conversejs form .form-control::-webkit-input-placeholder {
   /* Chrome/Opera/Safari */
   color: #A8ABA1; }
@@ -7318,9 +7322,6 @@ body {
 #conversejs form.converse-centered-form {
   text-align: center; }
 
-#conversejs.fullscreen form .form-check-label {
-  margin-top: 0.3rem; }
-
 #conversejs #user-profile-modal label {
   font-weight: bold; }
 
@@ -7929,13 +7930,16 @@ body {
     overflow-y: auto;
     background-color: white; }
   #conversejs #controlbox .controlbox-pane {
-    padding: 1.2em;
     background-color: white;
     border: 0;
     font-size: 16px;
     left: 0;
     text-align: left;
-    overflow-x: hidden; }
+    overflow-x: hidden;
+    padding: 1em 0 1em 0; }
+    #conversejs #controlbox .controlbox-pane .controlbox-padded {
+      padding-left: 1em;
+      padding-right: 1em; }
     #conversejs #controlbox .controlbox-pane .add-converse-contact {
       margin: 0 0 0.75em 0; }
     #conversejs #controlbox .controlbox-pane .chatbox-btn {
@@ -8000,6 +8004,42 @@ body {
         display: none; }
       #conversejs:not(.converse-embedded) .converse-chatboxes.sidebar-open #controlbox .controlbox-pane {
         display: block; } }
+#conversejs:not(.converse-fullscreen) #controlbox {
+  order: -1;
+  min-width: 250px !important;
+  width: 250px; }
+  #conversejs:not(.converse-fullscreen) #controlbox .box-flyout {
+    min-width: 250px !important;
+    width: 250px; }
+  #conversejs:not(.converse-fullscreen) #controlbox:not(.logged-out) .controlbox-head {
+    height: 15px; }
+  #conversejs:not(.converse-fullscreen) #controlbox .controlbox-head {
+    display: flex;
+    flex-direction: row-reverse;
+    flex-wrap: nowrap;
+    justify-content: space-between; }
+    #conversejs:not(.converse-fullscreen) #controlbox .controlbox-head .brand-heading {
+      position: relative;
+      width: 100%;
+      min-height: 1px;
+      padding-right: 15px;
+      padding-left: 15px;
+      flex: 0 0 66.6666666667%;
+      max-width: 66.6666666667%;
+      color: #666;
+      font-size: 2em; }
+    #conversejs:not(.converse-fullscreen) #controlbox .controlbox-head .chatbox-btn {
+      color: #578EA9;
+      margin: 0; }
+  #conversejs:not(.converse-fullscreen) #controlbox #converse-register, #conversejs:not(.converse-fullscreen) #controlbox #converse-login {
+    flex: 0 0 100%;
+    max-width: 100%;
+    padding-bottom: 0; }
+  #conversejs:not(.converse-fullscreen) #controlbox #converse-register .button-cancel {
+    font-size: 90%; }
+  #conversejs:not(.converse-fullscreen) #controlbox .controlbox-panes {
+    border-radius: 4px; }
+
 #conversejs.fullscreen #controlbox {
   position: relative;
   width: 100%;
@@ -8149,7 +8189,8 @@ body {
         color: #666;
         display: block;
         width: 100%;
-        padding: 0 0 0.3rem 0; }
+        padding-top: 0;
+        padding-bottom: 0.3rem; }
         #conversejs #converse-roster .roster-contacts .roster-group .group-toggle:hover {
           color: #585B51; }
       #conversejs #converse-roster .roster-contacts .roster-group li {

mockup/overlayed-login.html

@@ -9,22 +9,27 @@
     <link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
 </head>
 
-<body style="background-color: #578EA9">
+<body class="reset">
     <div class="converse-bg container">
         <h1 class="brand-heading">Converse</h1>
     </div>
-
     <div id="conversejs" class="converse-overlayed">
         <div class="converse-chatboxes row no-gutters">
-            <div id="controlbox" class="chatbox">
+            <div id="controlbox" class="chatbox logged-out">
                 <div class="flyout box-flyout">
                     <div class="chat-head controlbox-head">
-                        <div class="brand-heading"><i class="icon-conversejs"></i><span class="brand-name">converse</span></div>
                         <a class="chatbox-btn close-chatbox-button fa fa-close"></a>
+                        <span class="brand-heading-container">
+                            <div class="brand-heading">
+                                <a href="https://conversejs.org" target="_blank" rel="noopener">
+                                    <i class="icon-conversejs"></i><span class="brand-name">converse</span>
+                                </a>
+                            </div>
+                        </span>
                     </div>
                     <div class="controlbox-panes">
-                        <div id="login-dialog" class="controlbox-pane row">
-                            <form id="converse-login" class="pure-form converse-form">
+                        <div id="converse-login-panel" class="controlbox-pane fade-in row no-gutters">
+                            <form id="converse-login" class="converse-form">
                                 <div class="form-group">
                                     <label for="jid">XMPP Username:</label>
                                     <input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off">
@@ -33,9 +38,14 @@
                                     <label for="password">Password:</label>
                                     <input type="password" name="password" class="form-control" placeholder="password" autocomplete="off">
                                 </div>
-                                <p></p>
-                                <p><input class="btn btn-primary" type="submit" value="Log In"></p>
-                                <p>Click <a href="#" data-toggle="modal" data-target="#registerModal">here</a> to register.</p>
+                                <div class="form-group form-check">
+                                    <input id="converse-login-trusted" class="form-check-input" type="checkbox" name="trusted" checked="">
+                                    <label class="form-check-label" for="converse-login-trusted">This is a trusted device</label>
+                                </div>
+                                <fieldset class="buttons">
+                                    <input class="btn btn-primary" type="submit" value="Log in">
+                                    <p>Click <a href="#" data-toggle="modal" data-target="#registerModal">here</a> to register.</p>
+                                </fieldset>
                             </form>
                         </div>
                     </div>

mockup/user-panel.html

@@ -1,5 +1,5 @@
 <!-- <div id="users" class="controlbox-pane"> -->
-<div class="userinfo">
+<div class="controlbox-padded userinfo">
     <div class="profile d-flex">
         <canvas data-avatar="/mockup/images/romeo.jpg" height="40px" width="40px" class="avatar align-self-center"></canvas>
         <span class="username w-100 align-self-center">Romeo Montague</span>
@@ -15,15 +15,15 @@
 </div>
 
 <div id="headlines" class="controlbox-section">
-    <div class="d-flex">
+    <div class="d-flex controlbox-padded">
         <span class="w-100 controlbox-heading">Announcements</span>
     </div>
     <div class="list-container">
         <div class="items-list">
-            <div class="list-item open-headline d-flex flex-row">
+            <div class="controlbox-padded list-item open-headline d-flex flex-row">
                 <a class="w-100" data-jid="montague.lit" title="Click to show" href="chatroom.html">Montague.lit</a>
             </div>
-            <div class="list-item open-headline d-flex flex-row">
+            <div class="controlbox-padded list-item open-headline d-flex flex-row">
                 <a class="w-100" data-jid="montague.lit" title="Click to show" href="chatroom.html">Capulet.lit</a>
             </div>
         </div>
@@ -31,13 +31,13 @@
 </div>
 
 <div id="chatrooms" class="controlbox-section">
-    <div class="d-flex">
+    <div class="d-flex controlbox-padded">
         <span class="w-100 controlbox-heading">Group Chats</span>
         <a class="chatbox-btn fa fa-users" title="Click to add a new room" data-toggle="modal" data-target="#chatroomsModal"></a>
     </div>
     <div class="list-container rooms-list-container">
         <div class="rooms-list items-list">
-            <div class="list-item available-chatroom d-flex flex-row">
+            <div class="controlbox-padded list-item available-chatroom d-flex flex-row">
                 <a class="open-room available-room w-100" data-room-jid="public@conference.test.com" title="Click to open this room" href="chatroom.html">Capulet's orchard</a>
                 <!-- <span class="badge badge-info msgs-indicator">1</span> -->
                 <a href="#"
@@ -46,7 +46,7 @@
                    &nbsp;</a>
                 <a href="#" class="fa fa-bookmark" title="Click to bookmark this room">&nbsp;</a>
             </div>
-            <div class="list-item available-chatroom d-flex flex-row">
+            <div class="controlbox-padded list-item available-chatroom d-flex flex-row">
                 <a class="open-room available-room w-100" data-room-jid="team@conference.test.com" title="Click to open this room" href="chatroom.html">Juliet's Balcony</a>
                 <a href="#"
                    class="room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
@@ -59,10 +59,12 @@
 </div>
 
 <div id="bookmarks" class="controlbox-section">
-    <div class="d-flex"><span class="w-100 controlbox-heading">Bookmarks</span></div>
+    <div class="d-flex controlbox-padded">
+        <span class="w-100 controlbox-heading">Bookmarks</span>
+    </div>
     <div class="list-container rooms-list-container">
         <div class="rooms-list items-list">
-            <div class="list-item available-chatroom d-flex flex-row">
+            <div class="controlbox-padded list-item available-chatroom d-flex flex-row">
                 <a class="open-room available-room w-100" data-room-jid="public@conference.test.com" title="Click to open this room" href="chatroom.html">Capulet's orchard</a>
                 <!-- <span class="badge badge-info msgs-indicator">1</span> -->
                 <a href="#"
@@ -71,7 +73,7 @@
                    &nbsp;</a>
                 <a href="#" class="fa fa-bookmark" title="Click to bookmark this room">&nbsp;</a>
             </div>
-            <div class="list-item available-chatroom d-flex flex-row">
+            <div class="controlbox-padded list-item available-chatroom d-flex flex-row">
                 <a class="open-room available-room w-100" data-room-jid="team@conference.test.com" title="Click to open this room" href="chatroom.html">Juliet's Balcony</a>
                 <a href="#"
                    class="room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
@@ -84,11 +86,11 @@
 </div>
 
 <div id="converse-roster" class="controlbox-section">
-    <div class="d-flex">
+    <div class="d-flex controlbox-padded">
         <span class="w-100 controlbox-heading">Contacts</span>
         <a class="chatbox-btn fa fa-user-plus" title="Click to add new chat contacts" data-toggle="modal" data-target="#addContactModal"></a>
     </div>
-    <form class="roster-filter-form input-button-group">
+    <form class="controlbox-padded roster-filter-form input-button-group">
         <div class="form-inline flex-nowrap">
             <div class="btn-group">
                 <input value="" class="roster-filter form-control" placeholder="Filter">
@@ -104,15 +106,15 @@
 
     <div class="roster-contacts">
         <div class="roster-group" id="xmpp-contact-requests">
-            <a href="#" class="group-toggle" title="Click to hide these contacts">
+            <a href="#" class="group-toggle controlbox-padded " title="Click to hide these contacts">
                 <span class="fa fa-caret-down"></span> Contact Requests</a>
             <ul class="roster-group-contacts">
-                <li class="offline requesting-xmpp-contact d-flex">
+                <li class=" controlbox-padded offline requesting-xmpp-contact d-flex">
                     <span class="req-contact-name w-100">The Nurse</span>
                     <a class="accept-xmpp-request fa fa-check" title="Click here to accept this contact's request" href="#"></a>
                     <a class="decline-xmpp-request fa fa-times" title="Click here to decline this contact's request" href="#"></a>
                 </li>
-                <li class="offline requesting-xmpp-contact d-flex">
+                <li class=" controlbox-padded offline requesting-xmpp-contact d-flex">
                     <span class="req-contact-name w-100">Friar Laurence</span>
                     <a class="accept-xmpp-request fa fa-check" title="Click here to accept this contact's request" href="#"></a>
                     <a class="decline-xmpp-request fa fa-times" title="Click here to decline this contact's request" href="#"></a>
@@ -121,15 +123,15 @@
         </div>
 
         <div class="roster-group" data-group="Colleagues">
-            <a href="#" data-group="Colleagues" class="group-toggle" title="Click to hide these contacts">
+            <a href="#" data-group="Colleagues" class="group-toggle controlbox-padded " title="Click to hide these contacts">
                 <span class="fa fa-caret-down"></span> Colleagues</a>
             <ul>
-                <li class="away current-xmpp-contact d-flex">
+                <li class=" controlbox-padded away current-xmpp-contact d-flex">
                     <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
                         <span class="fa fa-circle-o" title="this contact is away"></span> Balthasar</a>
                     <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                 </li>
-                <li class="dnd current-xmpp-contact d-flex">
+                <li class=" controlbox-padded dnd current-xmpp-contact d-flex">
                     <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
                         <span class="fa fa-minus-circle" title="This contact is busy"></span> Escalus, Prince of Verona</a>
                     <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
@@ -138,20 +140,20 @@
         </div>
 
         <div class="roster-group" data-group="Family">
-            <a href="#" data-group="Family" class="group-toggle" title="Click to hide these contacts">
+            <a href="#" data-group="Family" class="group-toggle controlbox-padded " title="Click to hide these contacts">
                 <span class="fa fa-caret-down"></span> Family</a>
             <ul>
-                <li class="online current-xmpp-contact d-flex">
+                <li class=" controlbox-padded online current-xmpp-contact d-flex">
                     <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
                         <span class="fa fa-circle" title="This contact is online"></span> Benvolio Montague</a>
                     <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                 </li>
-                <li class="offline current-xmpp-contact d-flex">
+                <li class=" controlbox-padded offline current-xmpp-contact d-flex">
                     <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
                         <span class="fa fa-times-circle" title="This contact is offline"></span> Montague</a>
                     <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                 </li>
-                <li class="offline current-xmpp-contact d-flex">
+                <li class=" controlbox-padded offline current-xmpp-contact d-flex">
                     <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
                         <span class="fa fa-times-circle" title="This contact is offline"></span> Lady Montague</a>
                     <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
@@ -160,10 +162,10 @@
         </div>
 
         <div class="roster-group" data-group="Friends">
-            <a href="#" data-group="Friends" class="group-toggle" title="Click to hide these contacts">
+            <a href="#" data-group="Friends" class="group-toggle controlbox-padded " title="Click to hide these contacts">
                 <span class="fa fa-caret-down"></span> Friends</a>
             <ul>
-                <li class="online current-xmpp-contact d-flex">
+                <li class=" controlbox-padded online current-xmpp-contact d-flex">
                     <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
                         <span class="fa fa-circle" title="This contact is online"></span> Mercutio</a>
                     <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
@@ -172,20 +174,20 @@
         </div>
 
         <div class="roster-group" data-group="Ungrouped">
-            <a href="#" class="group-toggle" title="Click to hide these contacts">
+            <a href="#" class="group-toggle controlbox-padded " title="Click to hide these contacts">
                 <span class="fa fa-caret-down"></span> Ungrouped</a>
             <ul>
-                <li class="online current-xmpp-contact d-flex">
+                <li class=" controlbox-padded online current-xmpp-contact d-flex">
                     <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
                         <span class="fa fa-circle" title="This contact is online"></span> Gregory</a>
                     <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                 </li>
-                <li class="online current-xmpp-contact d-flex">
+                <li class=" controlbox-padded online current-xmpp-contact d-flex">
                     <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
                         <span class="fa fa-circle" title="This contact is online"></span> Peter</a>
                     <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                 </li>
-                <li class="online current-xmpp-contact d-flex">
+                <li class=" controlbox-padded online current-xmpp-contact d-flex">
                     <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
                         <span class="fa fa-circle" title="This contact is online"></span> Sampson</a>
                     <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
@@ -194,14 +196,14 @@
         </div>
 
         <div class="roster-group" id="pending-xmpp-contacts">
-            <a href="#" class="group-toggle" title="Click to hide these contacts">
+            <a href="#" class="group-toggle controlbox-padded " title="Click to hide these contacts">
                 <span class="fa fa-caret-down"></span> Pending Contacts</a>
             <ul>
-                <li class="offline pending-xmpp-contact d-flex">
+                <li class=" controlbox-padded offline pending-xmpp-contact d-flex">
                     <span class="pending-contact-name w-100">An Apothecary</span>
                     <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                 </li>
-                <li class="offline pending-xmpp-contact d-flex">
+                <li class=" controlbox-padded offline pending-xmpp-contact d-flex">
                     <span class="pending-contact-name w-100">Abram</span>
                     <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                 </li>

sass/_controlbox.scss

@@ -274,13 +274,18 @@
         }
 
         .controlbox-pane {
-            padding: $controlbox-pane-padding;
             background-color: white;
             border: 0;
             font-size: $font-size;
             left: 0;
             text-align: left;
             overflow-x: hidden;
+            padding: 1em 0 1em 0;
+
+            .controlbox-padded {
+               padding-left: 1em;
+               padding-right: 1em;
+            }
 
             .add-converse-contact {
                 margin: 0 0 0.75em 0;
@@ -387,3 +392,55 @@
         }
     }
 }
+
+#conversejs:not(.converse-fullscreen) {
+    #controlbox {
+        order: -1;
+        min-width: $controlbox-width !important;
+        width: $controlbox-width;
+        .box-flyout {
+            min-width: $controlbox-width !important;
+            width: $controlbox-width;
+        }
+
+        &:not(.logged-out) {
+            .controlbox-head {
+                height: 15px;
+            }
+        }
+
+        .controlbox-head {
+            display: flex;
+            flex-direction: row-reverse;
+            flex-wrap: nowrap;
+            justify-content: space-between;
+
+
+            .brand-heading {
+                @include make-col-ready();
+                @include make-col(8);
+                color: $text-color;
+                font-size: 2em;
+            }
+            .chatbox-btn {
+                color: $controlbox-head-color;
+                margin: 0;
+            }
+        }
+
+        #converse-register, #converse-login {
+            @include make-col(12);
+            padding-bottom: 0;
+        }
+
+        #converse-register {
+            .button-cancel {
+                font-size: 90%;
+            }
+        }
+
+        .controlbox-panes {
+            border-radius: $chatbox-border-radius;
+        }
+    }
+}

sass/_forms.scss

@@ -5,7 +5,7 @@
         }
 
         .form-check-label {
-            margin-top: 0.1rem;
+            margin-top: $form-check-input-margin-y;
         }
 
         .form-control {
@@ -108,12 +108,3 @@
         }
     }
 }
-
-#conversejs.fullscreen {
-    form {
-        .form-check-label {
-            margin-top: $form-check-input-margin-y;
-        }
-    }
-}
-

sass/_roster.scss

@@ -70,7 +70,8 @@
                 color: $text-color;
                 display: block;
                 width: 100%;
-                padding: 0 0 0.3rem 0;
+                padding-top: 0;
+                padding-bottom: 0.3rem;
             }
 
             li {

sass/converse.scss

@@ -46,7 +46,6 @@
 @import "chatbox";
 @import "converse/chatbox";
 @import "controlbox";
-@import "converse/controlbox";
 @import "roomslist";
 @import "roster";
 @import "chatrooms";

sass/converse/_controlbox.scss

@@ -1,51 +0,0 @@
-#conversejs:not(.fullscreen) {
-    #controlbox {
-        order: -1;
-        min-width: $controlbox-width !important;
-        width: $controlbox-width;
-        .box-flyout {
-            min-width: $controlbox-width !important;
-            width: $controlbox-width;
-        }
-
-        &:not(.logged-out) {
-            .controlbox-head {
-                height: 15px;
-            }
-        }
-
-        .controlbox-head {
-            display: flex;
-            flex-direction: row-reverse;
-            flex-wrap: nowrap;
-            justify-content: space-between;
-
-
-            .brand-heading {
-                @include make-col-ready();
-                @include make-col(8);
-                color: $text-color;
-                font-size: 2em;
-            }
-            .chatbox-btn {
-                color: $controlbox-head-color;
-                margin: 0;
-            }
-        }
-
-        #converse-register, #converse-login {
-            @include make-col(12);
-            padding-bottom: 0;
-        }
-
-        #converse-register {
-            .button-cancel {
-                font-size: 90%;
-            }
-        }
-
-        .controlbox-panes {
-            border-radius: $chatbox-border-radius;
-        }
-    }
-}

sass/converse/_variables.scss

@@ -7,7 +7,6 @@ $chat-head-height: 55px !default;
 
 $controlbox-dropdown-height: 25px !default;
 $controlbox-head-height: 55px !default;
-$controlbox-pane-padding: 1em !default;
 
 $chatbox-hover-height: 1em !default;
 

sass/inverse/_variables.scss

@@ -9,7 +9,6 @@ $chat-head-height: 62px !default;
 
 $controlbox-dropdown-height: 30px !default;
 $controlbox-head-height: 63px !default;
-$controlbox-pane-padding: $flyout-padding !default;
 
 $rounded-border-radius: 4px !default;
 

src/converse-rosterview.js

@@ -357,7 +357,7 @@
 
             _converse.RosterContactView = Backbone.NativeView.extend({
                 tagName: 'li',
-                className: 'd-flex hidden',
+                className: 'd-flex hidden controlbox-padded',
 
                 events: {
                     "click .accept-xmpp-request": "acceptRequest",

src/templates/bookmark.html

@@ -1,4 +1,4 @@
-<div class="list-item room-item available-chatroom d-flex flex-row {[ if (o.hidden) { ]} hidden {[ } ]}" data-room-jid="{{{o.jid}}}">
+<div class="list-item controlbox-padded room-item available-chatroom d-flex flex-row {[ if (o.hidden) { ]} hidden {[ } ]}" data-room-jid="{{{o.jid}}}">
     <a class="open-room w-100" data-room-jid="{{{o.jid}}}" title="{{{o.open_title}}}" href="#">{{{o.name}}}</a>
     <a class="remove-bookmark fa fa-bookmark align-self-center {[ if (o.bookmarked) { ]} button-on {[ } ]}"
         data-room-jid="{{{o.jid}}}" data-bookmark-name="{{{o.name}}}"

src/templates/bookmarks_list.html

@@ -1,4 +1,4 @@
-<a href="#" class="rooms-toggle bookmarks-toggle" title="{{{o.desc_bookmarks}}}">
+<a href="#" class="rooms-toggle bookmarks-toggle controlbox-padded" title="{{{o.desc_bookmarks}}}">
     <span class="fa {[ if (o.toggle_state === o._converse.OPENED) { ]} fa-caret-down {[ } else { ]} fa-caret-right {[ } ]}">
     </span> {{{o.label_bookmarks}}}</a>
 <div class="items-list bookmarks rooms-list {[ if (o.toggle_state !== o._converse.OPENED) { ]} hidden {[ } ]}"></div>

src/templates/group_header.html

@@ -1,4 +1,4 @@
-<a href="#" class="group-toggle" title="{{{o.desc_group_toggle}}}">
+<a href="#" class="group-toggle controlbox-padded" title="{{{o.desc_group_toggle}}}">
     <span class="fa {[ if (o.toggle_state === o._converse.OPENED) { ]} fa-caret-down {[ } else { ]} fa-caret-right {[ } ]}">
     </span> {{{o.label_group}}}</a>
 <ul class="roster-group-contacts {[ if (o.toggle_state === o._converse.CLOSED) { ]} collapsed {[ } ]}"></ul>

src/templates/login_panel.html

@@ -1,4 +1,4 @@
-<div id="converse-login-panel" class="controlbox-pane fade-in row">
+<div id="converse-login-panel" class="controlbox-pane fade-in row no-gutters">
     <form id="converse-login" class="converse-form" method="post">
         <div class="conn-feedback fade-in {[ if (!o.conn_feedback_subject) { ]} hidden {[ } ]} {{{o.conn_feedback_class}}}">
             <p class="feedback-subject">{{{ o.conn_feedback_subject }}}</p>
@@ -22,8 +22,8 @@
                     <input id="converse-login-trusted" type="checkbox" class="form-check-input" name="trusted" checked="checked">
                     <label for="converse-login-trusted" class="form-check-label">{{{o.__('This is a trusted device')}}}</label>
                     <i class="fa fa-info-circle" data-toggle="popover"
-                       data-title=""
-                       data-content="{{{o.__('To improve performance, we cache your data in this browser. Uncheck this box if you want your data to be deleted when you log out. It\'s important that you explicitly log out, otherwise not all data might be deleted.')}}}"></i>
+                       data-title="Trusted device?"
+                       data-content="{{{o.__('To improve performance, we cache your data in this browser. Uncheck this box if this is a public computer or if you want your data to be deleted when you log out. It\'s important that you explicitly log out, otherwise not all cached data might be deleted.')}}}"></i>
                 </div>
 
                 <fieldset class="buttons">

src/templates/profile_view.html

@@ -1,4 +1,4 @@
-<div class="userinfo">
+<div class="userinfo controlbox-padded">
 <div class="profile d-flex">
     <a class="show-profile" href="#">
         <img alt="User Avatar" class="avatar align-self-center" height="40px" width="40px" src="data:{{{o.image_type}}};base64,{{{o.image}}}"/>

src/templates/room_panel.html

@@ -1,5 +1,5 @@
 <!-- <div id="chatrooms"> -->
-<div class="d-flex">
+<div class="d-flex controlbox-padded">
     <span class="w-100 controlbox-heading">{{{o.heading_chatrooms}}}</span>
     <a class="chatbox-btn trigger-list-chatrooms-modal fa fa-list-ul" title="{{{o.title_list_rooms}}}" data-toggle="modal" data-target="#list-chatrooms-modal"></a>
     <a class="chatbox-btn trigger-add-chatrooms-modal fa fa-users" title="{{{o.title_new_room}}}" data-toggle="modal" data-target="#add-chatrooms-modal"></a>

src/templates/rooms_list.html

@@ -1,4 +1,4 @@
-<a href="#" class="rooms-toggle open-rooms-toggle" title="{{{o.desc_rooms}}}">
+<a href="#" class="rooms-toggle open-rooms-toggle controlbox-padded" title="{{{o.desc_rooms}}}">
     <span class="fa {[ if (o.toggle_state === o._converse.OPENED) { ]} fa-caret-down {[ } else { ]} fa-caret-right {[ } ]}">
     </span> {{{o.label_rooms}}}</a>
 <div class="items-list rooms-list open-rooms-list"></div>

src/templates/rooms_list_item.html

@@ -1,4 +1,4 @@
-<div class="list-item available-chatroom d-flex flex-row {[ if (o.num_unread_general) { ]} unread-msgs {[ } ]}" data-room-jid="{{{o.jid}}}">
+<div class="list-item controlbox-padded available-chatroom d-flex flex-row {[ if (o.num_unread_general) { ]} unread-msgs {[ } ]}" data-room-jid="{{{o.jid}}}">
 {[ if (o.num_unread) { ]}
     <span class="msgs-indicator badge badge-info">{{{ o.num_unread }}}</span>
 {[ } ]}

src/templates/roster.html

@@ -1,4 +1,4 @@
-<div class="d-flex">
+<div class="d-flex controlbox-padded">
     <span class="w-100 controlbox-heading">{{{o.heading_contacts}}}</span>
     <a class="chatbox-btn add-contact fa fa-user-plus" title="{{{o.title_add_contact}}}"
        data-toggle="modal" data-target="#add-contact-modal"></a>

src/templates/roster_filter.html

@@ -1,4 +1,4 @@
-<form class="roster-filter-form input-button-group {[ if (!o.visible) { ]} hidden {[ } ]}">
+<form class="controlbox-padded roster-filter-form input-button-group {[ if (!o.visible) { ]} hidden {[ } ]}">
     <div class="form-inline flex-nowrap">
         <div class="btn-group">
             <input {[ if (o.filter_text) { ]} value="{{{o.filter_text}}}" {[ } ]}