Update CSS of controlbox list items

Trying to use more generic CSS selectors and to extract out common patterns.

css/converse.css

@@ -8258,153 +8258,6 @@ body.reset {
     #conversejs.converse-mobile #controlbox #converse-login input[type=button] {
       width: auto; }
 
-#conversejs .list-container {
-  text-align: left;
-  padding: 0.3em 0; }
-  #conversejs .list-container .rooms-toggle {
-    font-family: "Century Gothic", futura, "URW Gothic L", Verdana, sans-serif;
-    display: block;
-    color: #666;
-    padding: 0 0 0.5rem 0; }
-    #conversejs .list-container .rooms-toggle:hover {
-      color: #585B51; }
-#conversejs .items-list {
-  text-align: left; }
-  #conversejs .items-list .list-item {
-    border: none;
-    clear: both;
-    color: #666;
-    display: block;
-    height: 2em;
-    overflow: hidden;
-    padding-top: 0.5em;
-    text-shadow: 0 1px 0 #FAFAFA;
-    word-wrap: break-word; }
-    #conversejs .items-list .list-item.open {
-      background-color: #578EA9; }
-      #conversejs .items-list .list-item.open:hover {
-        background-color: #578EA9 !important; }
-      #conversejs .items-list .list-item.open a {
-        color: white !important; }
-      #conversejs .items-list .list-item.open .fa:hover {
-        color: white; }
-      #conversejs .items-list .list-item.open .fa-circle {
-        color: #89d6ab; }
-      #conversejs .items-list .list-item.open .fa-minus-circle {
-        color: #f0a794; }
-      #conversejs .items-list .list-item.open .fa-dot-circle-o {
-        color: #f0c594; }
-      #conversejs .items-list .list-item.open .fa-circle-o,
-      #conversejs .items-list .list-item.open .fa-times-circle {
-        color: #e6e7e4; }
-  #conversejs .items-list .available-chatroom:hover,
-  #conversejs .items-list .open-headline:hover,
-  #conversejs .items-list .open-chatroom:hover,
-  #conversejs .items-list .list-item:hover {
-    background-color: #eff4f7; }
-    #conversejs .items-list .available-chatroom:hover .fa,
-    #conversejs .items-list .open-headline:hover .fa,
-    #conversejs .items-list .open-chatroom:hover .fa,
-    #conversejs .items-list .list-item:hover .fa {
-      display: block !important; }
-  #conversejs .items-list .available-chatroom.unread-msgs .msgs-indicator,
-  #conversejs .items-list .open-headline.unread-msgs .msgs-indicator,
-  #conversejs .items-list .open-chatroom.unread-msgs .msgs-indicator,
-  #conversejs .items-list .list-item.unread-msgs .msgs-indicator {
-    border-radius: 10%;
-    opacity: 1; }
-  #conversejs .items-list .available-chatroom.unread-msgs .available-room,
-  #conversejs .items-list .available-chatroom.unread-msgs .open-room,
-  #conversejs .items-list .open-headline.unread-msgs .available-room,
-  #conversejs .items-list .open-headline.unread-msgs .open-room,
-  #conversejs .items-list .open-chatroom.unread-msgs .available-room,
-  #conversejs .items-list .open-chatroom.unread-msgs .open-room,
-  #conversejs .items-list .list-item.unread-msgs .available-room,
-  #conversejs .items-list .list-item.unread-msgs .open-room {
-    width: 100%;
-    font-weight: bold; }
-  #conversejs .items-list .available-chatroom a:hover,
-  #conversejs .items-list .open-headline a:hover,
-  #conversejs .items-list .open-chatroom a:hover,
-  #conversejs .items-list .list-item a:hover {
-    color: #206485; }
-  #conversejs .items-list .available-chatroom a.fa,
-  #conversejs .items-list .open-headline a.fa,
-  #conversejs .items-list .open-chatroom a.fa,
-  #conversejs .items-list .list-item a.fa {
-    display: none; }
-    #conversejs .items-list .available-chatroom a.fa:before,
-    #conversejs .items-list .open-headline a.fa:before,
-    #conversejs .items-list .open-chatroom a.fa:before,
-    #conversejs .items-list .list-item a.fa:before {
-      font-size: 15px; }
-  #conversejs .items-list .available-chatroom a.open-room,
-  #conversejs .items-list .open-headline a.open-room,
-  #conversejs .items-list .open-chatroom a.open-room,
-  #conversejs .items-list .list-item a.open-room {
-    width: 68%;
-    float: left;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    padding-right: 0.5em; }
-  #conversejs .items-list .available-chatroom a.available-room,
-  #conversejs .items-list .open-headline a.available-room,
-  #conversejs .items-list .open-chatroom a.available-room,
-  #conversejs .items-list .list-item a.available-room {
-    width: 85%; }
-  #conversejs .items-list .available-chatroom .add-bookmark,
-  #conversejs .items-list .available-chatroom .remove-bookmark,
-  #conversejs .items-list .available-chatroom .close-room,
-  #conversejs .items-list .available-chatroom .room-info,
-  #conversejs .items-list .open-headline .add-bookmark,
-  #conversejs .items-list .open-headline .remove-bookmark,
-  #conversejs .items-list .open-headline .close-room,
-  #conversejs .items-list .open-headline .room-info,
-  #conversejs .items-list .open-chatroom .add-bookmark,
-  #conversejs .items-list .open-chatroom .remove-bookmark,
-  #conversejs .items-list .open-chatroom .close-room,
-  #conversejs .items-list .open-chatroom .room-info,
-  #conversejs .items-list .list-item .add-bookmark,
-  #conversejs .items-list .list-item .remove-bookmark,
-  #conversejs .items-list .list-item .close-room,
-  #conversejs .items-list .list-item .room-info {
-    color: #A8ABA1; }
-    #conversejs .items-list .available-chatroom .add-bookmark.button-on,
-    #conversejs .items-list .available-chatroom .remove-bookmark.button-on,
-    #conversejs .items-list .available-chatroom .close-room.button-on,
-    #conversejs .items-list .available-chatroom .room-info.button-on,
-    #conversejs .items-list .open-headline .add-bookmark.button-on,
-    #conversejs .items-list .open-headline .remove-bookmark.button-on,
-    #conversejs .items-list .open-headline .close-room.button-on,
-    #conversejs .items-list .open-headline .room-info.button-on,
-    #conversejs .items-list .open-chatroom .add-bookmark.button-on,
-    #conversejs .items-list .open-chatroom .remove-bookmark.button-on,
-    #conversejs .items-list .open-chatroom .close-room.button-on,
-    #conversejs .items-list .open-chatroom .room-info.button-on,
-    #conversejs .items-list .list-item .add-bookmark.button-on,
-    #conversejs .items-list .list-item .remove-bookmark.button-on,
-    #conversejs .items-list .list-item .close-room.button-on,
-    #conversejs .items-list .list-item .room-info.button-on {
-      color: #578EA9; }
-      #conversejs .items-list .available-chatroom .add-bookmark.button-on:hover,
-      #conversejs .items-list .available-chatroom .remove-bookmark.button-on:hover,
-      #conversejs .items-list .available-chatroom .close-room.button-on:hover,
-      #conversejs .items-list .available-chatroom .room-info.button-on:hover,
-      #conversejs .items-list .open-headline .add-bookmark.button-on:hover,
-      #conversejs .items-list .open-headline .remove-bookmark.button-on:hover,
-      #conversejs .items-list .open-headline .close-room.button-on:hover,
-      #conversejs .items-list .open-headline .room-info.button-on:hover,
-      #conversejs .items-list .open-chatroom .add-bookmark.button-on:hover,
-      #conversejs .items-list .open-chatroom .remove-bookmark.button-on:hover,
-      #conversejs .items-list .open-chatroom .close-room.button-on:hover,
-      #conversejs .items-list .open-chatroom .room-info.button-on:hover,
-      #conversejs .items-list .list-item .add-bookmark.button-on:hover,
-      #conversejs .items-list .list-item .remove-bookmark.button-on:hover,
-      #conversejs .items-list .list-item .close-room.button-on:hover,
-      #conversejs .items-list .list-item .room-info.button-on:hover {
-        color: #206485; }
-
 #conversejs #converse-roster {
   text-align: left;
   width: 100%;
@@ -8454,83 +8307,142 @@ body.reset {
         padding-bottom: 0.3rem; }
         #conversejs #converse-roster .roster-contacts .roster-group .group-toggle:hover {
           color: #585B51; }
-      #conversejs #converse-roster .roster-contacts .roster-group li {
-        border: none;
-        clear: both;
-        color: #666;
-        display: block;
-        overflow-y: hidden;
-        text-shadow: 0 1px 0 #FAFAFA;
-        line-height: 14px;
-        width: 100%;
-        height: 2em;
-        padding-top: 0.5em; }
-        #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a {
-          line-height: 16px; }
-          #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a.fa {
-            width: 1.5em; }
-        #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .req-contact-name {
-          padding: 0 0.2em 0 0; }
-        #conversejs #converse-roster .roster-contacts .roster-group li .open-chat {
-          margin: 0;
-          padding: 0; }
-          #conversejs #converse-roster .roster-contacts .roster-group li .open-chat.unread-msgs {
-            font-weight: bold; }
-            #conversejs #converse-roster .roster-contacts .roster-group li .open-chat.unread-msgs .contact-name {
-              width: 70%; }
-          #conversejs #converse-roster .roster-contacts .roster-group li .open-chat .msgs-indicator {
-            color: white;
-            background-color: #3AA569;
-            opacity: 1;
-            border-radius: 10%;
-            padding: 0.2em;
-            font-size: 12px; }
-          #conversejs #converse-roster .roster-contacts .roster-group li .open-chat .contact-name {
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            padding: 0;
-            margin: 0;
-            max-width: 80%;
-            float: none;
-            height: 100%; }
-            #conversejs #converse-roster .roster-contacts .roster-group li .open-chat .contact-name.unread-msgs {
-              max-width: 60%; }
-          #conversejs #converse-roster .roster-contacts .roster-group li .open-chat .avatar {
-            float: left;
-            display: inline-block; }
-        #conversejs #converse-roster .roster-contacts .roster-group li.current-xmpp-contact span {
-          font-size: 14px;
-          float: left;
-          margin-right: 0.5em; }
-        #conversejs #converse-roster .roster-contacts .roster-group li.odd {
-          background-color: #DCEAC5;
-          /* Make this difference */ }
-        #conversejs #converse-roster .roster-contacts .roster-group li a, #conversejs #converse-roster .roster-contacts .roster-group li span {
-          display: inline-block;
+      #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a {
+        line-height: 16px; }
+        #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a.fa {
+          width: 1.5em; }
+      #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .req-contact-name {
+        padding: 0 0.2em 0 0; }
+      #conversejs #converse-roster .roster-contacts .roster-group li .open-chat {
+        margin: 0;
+        padding: 0; }
+        #conversejs #converse-roster .roster-contacts .roster-group li .open-chat.unread-msgs {
+          font-weight: bold; }
+          #conversejs #converse-roster .roster-contacts .roster-group li .open-chat.unread-msgs .contact-name {
+            width: 70%; }
+        #conversejs #converse-roster .roster-contacts .roster-group li .open-chat .msgs-indicator {
+          color: white;
+          background-color: #3AA569;
+          opacity: 1;
+          border-radius: 10%;
+          padding: 0.2em;
+          font-size: 12px; }
+        #conversejs #converse-roster .roster-contacts .roster-group li .open-chat .contact-name {
           overflow: hidden;
           white-space: nowrap;
-          text-overflow: ellipsis; }
-        #conversejs #converse-roster .roster-contacts .roster-group li span {
-          padding: 0; }
-        #conversejs #converse-roster .roster-contacts .roster-group li .decline-xmpp-request {
-          margin-left: 5px; }
-        #conversejs #converse-roster .roster-contacts .roster-group li .remove-xmpp-contact {
-          font-size: 10px;
-          margin: 0;
+          text-overflow: ellipsis;
           padding: 0;
-          width: 2em;
-          display: none; }
-          #conversejs #converse-roster .roster-contacts .roster-group li .remove-xmpp-contact:before {
-            font-size: 14px; }
-        #conversejs #converse-roster .roster-contacts .roster-group li:hover {
-          background-color: #eff4f7; }
-          #conversejs #converse-roster .roster-contacts .roster-group li:hover .remove-xmpp-contact {
-            display: inline-block; }
+          margin: 0;
+          max-width: 90%;
+          float: none;
+          height: 100%; }
+          #conversejs #converse-roster .roster-contacts .roster-group li .open-chat .contact-name.unread-msgs {
+            max-width: 60%; }
+        #conversejs #converse-roster .roster-contacts .roster-group li .open-chat .avatar {
+          float: left;
+          display: inline-block; }
+      #conversejs #converse-roster .roster-contacts .roster-group li.current-xmpp-contact span {
+        font-size: 14px;
+        float: left;
+        margin-right: 0.5em; }
+      #conversejs #converse-roster .roster-contacts .roster-group li.odd {
+        background-color: #DCEAC5;
+        /* Make this difference */ }
+      #conversejs #converse-roster .roster-contacts .roster-group li a, #conversejs #converse-roster .roster-contacts .roster-group li span {
+        display: inline-block;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis; }
+      #conversejs #converse-roster .roster-contacts .roster-group li .decline-xmpp-request {
+        margin-left: 5px; }
+      #conversejs #converse-roster .roster-contacts .roster-group li:hover {
+        background-color: #eff4f7; }
+        #conversejs #converse-roster .roster-contacts .roster-group li:hover .remove-xmpp-contact {
+          display: inline-block; }
   #conversejs #converse-roster span.pending-contact-name {
     line-height: 16px;
     width: 100%; }
 
+#conversejs .list-container {
+  text-align: left;
+  padding: 0.3em 0; }
+  #conversejs .list-container .list-toggle {
+    font-family: "Century Gothic", futura, "URW Gothic L", Verdana, sans-serif;
+    display: block;
+    color: #666;
+    padding: 0 0 0.5rem 0; }
+    #conversejs .list-container .list-toggle:hover {
+      color: #585B51; }
+#conversejs .items-list {
+  text-align: left; }
+  #conversejs .items-list .list-item {
+    border: none;
+    clear: both;
+    color: #666;
+    display: block;
+    height: 2em;
+    overflow: hidden;
+    padding-top: 0.5em;
+    text-shadow: 0 1px 0 #FAFAFA;
+    word-wrap: break-word; }
+    #conversejs .items-list .list-item .list-item-link {
+      font-size: 14px;
+      line-height: 14px;
+      padding-right: 0.5em;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis; }
+      #conversejs .items-list .list-item .list-item-link:hover {
+        color: #206485; }
+    #conversejs .items-list .list-item .list-item-action {
+      opacity: 0;
+      font-size: 10px;
+      padding: 0;
+      margin: 0 0 0 0.4em;
+      width: 1.6em;
+      color: #A8ABA1; }
+      #conversejs .items-list .list-item .list-item-action:before {
+        font-size: 14px; }
+      #conversejs .items-list .list-item .list-item-action.button-on {
+        color: #578EA9; }
+        #conversejs .items-list .list-item .list-item-action.button-on:hover {
+          color: #206485; }
+      #conversejs .items-list .list-item .list-item-action:hover {
+        color: #818479;
+        opacity: 1; }
+    #conversejs .items-list .list-item.open {
+      background-color: #578EA9; }
+      #conversejs .items-list .list-item.open:hover {
+        background-color: #578EA9 !important; }
+      #conversejs .items-list .list-item.open a {
+        color: white; }
+      #conversejs .items-list .list-item.open .list-item-link:hover {
+        color: white; }
+      #conversejs .items-list .list-item.open .list-item-action {
+        color: #e3eef3; }
+        #conversejs .items-list .list-item.open .list-item-action:hover {
+          color: white; }
+      #conversejs .items-list .list-item.open .fa-circle {
+        color: #89d6ab; }
+      #conversejs .items-list .list-item.open .fa-minus-circle {
+        color: #f0a794; }
+      #conversejs .items-list .list-item.open .fa-dot-circle-o {
+        color: #f0c594; }
+      #conversejs .items-list .list-item.open .fa-circle-o,
+      #conversejs .items-list .list-item.open .fa-times-circle {
+        color: #e6e7e4; }
+    #conversejs .items-list .list-item:hover {
+      background-color: #eff4f7; }
+      #conversejs .items-list .list-item:hover .fa {
+        opacity: 1; }
+    #conversejs .items-list .list-item.unread-msgs .msgs-indicator {
+      border-radius: 10%;
+      opacity: 1; }
+    #conversejs .items-list .list-item.unread-msgs .available-room,
+    #conversejs .items-list .list-item.unread-msgs .open-room {
+      width: 100%;
+      font-weight: bold; }
+
 #conversejs.converse-embedded .add-chatroom input[type="submit"],
 #conversejs.converse-embedded .add-chatroom input[type="button"],
 #conversejs .add-chatroom input[type="submit"],

dist/converse.js

@@ -80816,7 +80816,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
         events: {
           'click .add-bookmark': 'addBookmark',
           'click .close-room': 'closeRoom',
-          'click .rooms-toggle': 'toggleRoomsList',
+          'click .list-toggle': 'toggleRoomsList',
           'click .remove-bookmark': 'removeBookmark',
           'click .open-room': 'openRoom'
         },
@@ -83950,7 +83950,7 @@ __e(o.jid) +
 __e(o.open_title) +
 '" href="#">' +
 __e(o.name) +
-'</a>\n    <a class="remove-bookmark fa fa-bookmark align-self-center ';
+'</a>\n    <a class="list-item-action remove-bookmark fa fa-bookmark align-self-center ';
  if (o.bookmarked) { ;
 __p += ' button-on ';
  } ;
@@ -83977,7 +83977,7 @@ var _ = {escape:__webpack_require__(/*! ./node_modules/lodash/escape.js */ "./no
 module.exports = function(o) {
 var __t, __p = '', __e = _.escape, __j = Array.prototype.join;
 function print() { __p += __j.call(arguments, '') }
-__p += '<!-- src/templates/bookmarks_list.html -->\n<a href="#" class="rooms-toggle bookmarks-toggle controlbox-padded" title="' +
+__p += '<!-- src/templates/bookmarks_list.html -->\n<a href="#" class="list-toggle bookmarks-toggle controlbox-padded" title="' +
 __e(o.desc_bookmarks) +
 '">\n    <span class="fa ';
  if (o.toggle_state === o._converse.OPENED) { ;
@@ -86177,7 +86177,7 @@ var _ = {escape:__webpack_require__(/*! ./node_modules/lodash/escape.js */ "./no
 module.exports = function(o) {
 var __t, __p = '', __e = _.escape, __j = Array.prototype.join;
 function print() { __p += __j.call(arguments, '') }
-__p += '<!-- src/templates/rooms_list.html -->\n<a href="#" class="rooms-toggle open-rooms-toggle controlbox-padded" title="' +
+__p += '<!-- src/templates/rooms_list.html -->\n<a href="#" class="list-toggle open-rooms-toggle controlbox-padded" title="' +
 __e(o.desc_rooms) +
 '">\n    <span class="fa ';
  if (o.toggle_state === o._converse.OPENED) { ;
@@ -86220,7 +86220,7 @@ __p += '\n    <span class="msgs-indicator badge badge-info">' +
 __e( o.num_unread ) +
 '</span>\n';
  } ;
-__p += '\n<a class="open-room available-room w-100"\n    data-room-jid="' +
+__p += '\n<a class="list-item-link open-room available-room w-100"\n    data-room-jid="' +
 __e(o.jid) +
 '"\n    title="' +
 __e(o.open_title) +
@@ -86228,7 +86228,7 @@ __e(o.open_title) +
 __e(o.name || o.jid) +
 '</a>\n\n';
  if (o.allow_bookmarks) { ;
-__p += '\n<a class="fa ';
+__p += '\n<a class="list-item-action fa ';
  if (o.bookmarked) { ;
 __p += ' fa-bookmark remove-bookmark button-on ';
  } else { ;
@@ -86250,11 +86250,11 @@ __e(o.info_add_bookmark) +
  } ;
 __p += '"\n   href="#">&nbsp;</a>\n';
  } ;
-__p += '\n<a class="room-info fa fa-info-circle" data-room-jid="' +
+__p += '\n\n<a class="list-item-action room-info fa fa-info-circle" data-room-jid="' +
 __e(o.jid) +
 '"\n   title="' +
 __e(o.info_title) +
-'" href="#">&nbsp;</a>\n\n<a class="fa fa-times close-room"\n   data-room-jid="' +
+'" href="#">&nbsp;</a>\n\n<a class="list-item-action fa fa-times close-room"\n   data-room-jid="' +
 __e(o.jid) +
 '"\n   data-room-name="' +
 __e(o.name || o.jid) +
@@ -86418,7 +86418,7 @@ var _ = {escape:__webpack_require__(/*! ./node_modules/lodash/escape.js */ "./no
 module.exports = function(o) {
 var __t, __p = '', __e = _.escape, __j = Array.prototype.join;
 function print() { __p += __j.call(arguments, '') }
-__p += '<!-- src/templates/roster_item.html -->\n<a class="cbox-list-item open-chat w-100 ';
+__p += '<!-- src/templates/roster_item.html -->\n<a class="list-item-link cbox-list-item open-chat w-100 ';
  if (o.num_unread) { ;
 __p += ' unread-msgs ';
  } ;
@@ -86442,7 +86442,7 @@ __p += '">' +
 __e(o.display_name) +
 '</span></a>\n';
  if (o.allow_contact_removal) { ;
-__p += '\n<a class="remove-xmpp-contact fa fa-trash" title="' +
+__p += '\n<a class="list-item-action remove-xmpp-contact fa fa-trash" title="' +
 __e(o.desc_remove) +
 '" href="#"></a>\n';
  } ;

mockup/user-panel.html

@@ -35,24 +35,24 @@
         <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-container items-list-container">
+        <div class="items-list">
             <div class="controlbox-padded list-item available-chatroom d-flex flex-row open">
-                <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>
+                <a class="list-item-link 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="#"
-                   class="room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
+                   class="list-item-action room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
                    data-html="true" data-content="<b>Room Address (JID): </b><br>public@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">
                    &nbsp;</a>
-                <a href="#" class="fa fa-bookmark" title="Click to bookmark this room">&nbsp;</a>
+                <a href="#" class="list-item-action fa fa-bookmark" title="Click to bookmark this room">&nbsp;</a>
             </div>
             <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 class="list-item-link 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"
+                   class="list-item-action room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
                     data-html="true" data-content="<b>Room Address (JID): </b><br>public@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">
                     &nbsp;</a>
-                <a href="#" class="fa fa-bookmark" title="Click to bookmark this room">&nbsp;</a>
+                <a href="#" class="list-item-action fa fa-bookmark" title="Click to bookmark this room">&nbsp;</a>
             </div>
         </div>
     </div>
@@ -62,24 +62,24 @@
     <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-container items-list-container">
+        <div class="items-list">
             <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>
+                <a class="list-item-link 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="#"
-                   class="room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
+                   class="list-item-action room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
                    data-html="true" data-content="<b>Room Address (JID): </b><br>public@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">
                    &nbsp;</a>
-                <a href="#" class="fa fa-bookmark" title="Click to bookmark this room">&nbsp;</a>
+                <a href="#" class="list-item-action fa fa-bookmark" title="Click to bookmark this room">&nbsp;</a>
             </div>
             <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 class="list-item-link 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"
+                   class="list-item-action room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
                     data-html="true" data-content="<b>Room Address (JID): </b><br>public@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">
                     &nbsp;</a>
-                <a href="#" class="fa fa-bookmark" title="Click to bookmark this room">&nbsp;</a>
+                <a href="#" class="list-item-action fa fa-bookmark" title="Click to bookmark this room">&nbsp;</a>
             </div>
         </div>
     </div>
@@ -108,7 +108,7 @@
         <div class="roster-group" id="xmpp-contact-requests">
             <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">
+            <ul class="items-list roster-group-contacts">
                 <li class="list-item 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>
@@ -125,16 +125,16 @@
         <div class="roster-group" data-group="Colleagues">
             <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>
+            <ul class="items-list roster-group-contacts">
                 <li class="list-item 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>
+                    <a class="list-item-action remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                 </li>
                 <li class="list-item 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>
+                    <a class="list-item-action remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                 </li>
             </li>
         </div>
@@ -142,21 +142,21 @@
         <div class="roster-group" data-group="Family">
             <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>
+            <ul class="items-list roster-group-contacts">
                 <li class="list-item 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>
+                    <a class="list-item-action remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                 </li>
                 <li class="list-item 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>
+                    <a class="list-item-action remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                 </li>
                 <li class="list-item 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>
+                    <a class="list-item-action remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                 </li>
             </ul>
         </div>
@@ -164,11 +164,11 @@
         <div class="roster-group" data-group="Friends">
             <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>
+            <ul class="items-list roster-group-contacts">
                 <li class="list-item 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>
+                    <a class="list-item-action remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                 </li>
             </ul>
         </div>
@@ -176,21 +176,21 @@
         <div class="roster-group" data-group="Ungrouped">
             <a href="#" class="group-toggle controlbox-padded " title="Click to hide these contacts">
                 <span class="fa fa-caret-down"></span> Ungrouped</a>
-            <ul>
+            <ul class="items-list roster-group-contacts">
                 <li class="list-item 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>
+                    <a class="list-item-action remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                 </li>
                 <li class="list-item 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>
+                    <a class="list-item-action remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                 </li>
                 <li class="list-item 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>
+                    <a class="list-item-action remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                 </li>
             </ul>
         </div>
@@ -198,14 +198,14 @@
         <div class="roster-group" id="pending-xmpp-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>
+            <ul class="items-list roster-group-contacts">
                 <li class="list-item 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>
+                    <a class="list-item-action remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                 </li>
                 <li class="list-item 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>
+                    <a class="list-item-action remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                 </li>
             </ul>
         </div>

sass/_lists.scss

@@ -3,7 +3,7 @@
         text-align: left;
         padding: 0.3em 0;
 
-        .rooms-toggle {
+        .list-toggle {
             font-family: $heading-font; 
             display: block;
             color: $text-color;
@@ -28,17 +28,59 @@
             text-shadow: 0 1px 0 $text-shadow-color;
             word-wrap: break-word;
 
+            .list-item-link {
+                &:hover {
+                    color: $dark-link-color;
+                }
+                font-size: $font-size;
+                line-height: $font-size;
+                padding-right: 0.5em;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+
+            .list-item-action {
+                opacity: 0;
+                font-size: $font-size-tiny;
+                padding: 0;
+                margin: 0 0 0 0.4em;
+                width: 1.6em;
+                &:before {
+                    font-size: $font-size;
+                }
+                &.button-on {
+                    color: $link-color;
+                    &:hover {
+                        color: $dark-link-color;
+                    }
+                }
+                color: $subdued-color;
+                &:hover {
+                    color: $gray-color;
+                    opacity: 1;
+                }
+            }
+
             &.open {
                 background-color: $controlbox-head-color;
                 &:hover {
                     background-color: $controlbox-head-color !important;
                 }
                 a {
-                    color: white !important;
-                }
-                .fa:hover {
                     color: white;
                 }
+                .list-item-link {
+                    &:hover {
+                        color: white;
+                    }
+                }
+                .list-item-action {
+                    color: lighten($lightest-blue, 25%);
+                    &:hover {
+                        color: white;
+                    }
+                }
                 .fa-circle {
                     color: lighten($green, 25%);
                 }
@@ -54,16 +96,10 @@
                 }
             }
 
-        }
-
-        .available-chatroom,
-        .open-headline,
-        .open-chatroom,
-        .list-item {
             &:hover {
                 background-color: lighten($controlbox-head-color, 45%);
                 .fa {
-                    display: block !important;
+                    opacity: 1;
                 }
             }
             &.unread-msgs {
@@ -77,40 +113,6 @@
                     font-weight: bold;
                 }
             }
-            a {
-                &:hover {
-                    color: $dark-link-color;
-                }
-                &.fa {
-                    display: none;
-                    &:before {
-                        font-size: 15px;
-                    }
-                }
-                &.open-room {
-                    width: 68%;
-                    float: left;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                    padding-right: 0.5em;
-                }
-                &.available-room {
-                    width: 85%;
-                }
-            }
-            .add-bookmark,
-            .remove-bookmark,
-            .close-room,
-            .room-info {
-                &.button-on {
-                    color: $link-color;
-                    &:hover {
-                        color: $dark-link-color;
-                    }
-                }
-                color: $subdued-color;
-            }
         }
     }
 }

sass/_roster.scss

@@ -72,17 +72,6 @@
             }
 
             li {
-                border: none;
-                clear: both;
-                color: $text-color;
-                display: block;
-                overflow-y: hidden;
-                text-shadow: 0 1px 0 $text-shadow-color;
-                line-height: $font-size;
-                width: 100%;
-                height: 2em;
-                padding-top: 0.5em;
-
                 &.requesting-xmpp-contact {
                     a {
                         line-height: $line-height;
@@ -120,7 +109,7 @@
                         text-overflow: ellipsis;
                         padding: 0;
                         margin: 0;
-                        max-width: 80%;
+                        max-width: 90%;
                         float: none;
                         height: 100%;
                         &.unread-msgs {
@@ -148,22 +137,9 @@
                     white-space: nowrap;
                     text-overflow: ellipsis;
                 }
-                span {
-                    padding: 0;
-                }
                 .decline-xmpp-request {
                     margin-left: 5px;
                 }
-                .remove-xmpp-contact {
-                    font-size: $font-size-tiny;
-                    margin: 0;
-                    padding: 0;
-                    width: 2em;
-                    display: none;
-                    &:before {
-                        font-size: $font-size;
-                    }
-                }
                 &:hover {
                     background-color: lighten($controlbox-head-color, 45%);
                     .remove-xmpp-contact {

sass/converse.scss

@@ -43,8 +43,8 @@
 @import "profile";
 @import "chatbox";
 @import "controlbox";
-@import "lists";
 @import "roster";
+@import "lists";
 @import "chatrooms";
 @import "headline";
 @import "messages";

src/converse-roomslist.js

@@ -156,7 +156,7 @@
                 events: {
                     'click .add-bookmark': 'addBookmark',
                     'click .close-room': 'closeRoom',
-                    'click .rooms-toggle': 'toggleRoomsList',
+                    'click .list-toggle': 'toggleRoomsList',
                     'click .remove-bookmark': 'removeBookmark',
                     'click .open-room': 'openRoom',
                 },

src/templates/bookmark.html

@@ -1,6 +1,6 @@
 <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 {[ } ]}"
+    <a class="list-item-action remove-bookmark fa fa-bookmark align-self-center {[ if (o.bookmarked) { ]} button-on {[ } ]}"
         data-room-jid="{{{o.jid}}}" data-bookmark-name="{{{o.name}}}"
         title="{{{o.info_remove_bookmark}}}" href="#">&nbsp;</a>
 </div>

src/templates/bookmarks_list.html

@@ -1,4 +1,4 @@
-<a href="#" class="rooms-toggle bookmarks-toggle controlbox-padded" title="{{{o.desc_bookmarks}}}">
+<a href="#" class="list-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/rooms_list.html

@@ -1,4 +1,4 @@
-<a href="#" class="rooms-toggle open-rooms-toggle controlbox-padded" title="{{{o.desc_rooms}}}">
+<a href="#" class="list-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

@@ -5,20 +5,21 @@
 {[ if (o.num_unread) { ]}
     <span class="msgs-indicator badge badge-info">{{{ o.num_unread }}}</span>
 {[ } ]}
-<a class="open-room available-room w-100"
+<a class="list-item-link open-room available-room w-100"
     data-room-jid="{{{o.jid}}}"
     title="{{{o.open_title}}}" href="#">{{{o.name || o.jid}}}</a>
 
 {[ if (o.allow_bookmarks) { ]}
-<a class="fa {[ if (o.bookmarked) { ]} fa-bookmark remove-bookmark button-on {[ } else { ]} add-bookmark fa-bookmark-o {[ } ]}"
+<a class="list-item-action fa {[ if (o.bookmarked) { ]} fa-bookmark remove-bookmark button-on {[ } else { ]} add-bookmark fa-bookmark-o {[ } ]}"
    data-room-jid="{{{o.jid}}}" data-bookmark-name="{{{o.name}}}"
    title="{[ if (o.bookmarked) { ]} {{{o.info_remove_bookmark}}} {[ } else { ]} {{{o.info_add_bookmark}}} {[ } ]}"
    href="#">&nbsp;</a>
 {[ } ]}
-<a class="room-info fa fa-info-circle" data-room-jid="{{{o.jid}}}"
+
+<a class="list-item-action room-info fa fa-info-circle" data-room-jid="{{{o.jid}}}"
    title="{{{o.info_title}}}" href="#">&nbsp;</a>
 
-<a class="fa fa-times close-room"
+<a class="list-item-action fa fa-times close-room"
    data-room-jid="{{{o.jid}}}"
    data-room-name="{{{o.name || o.jid}}}"
    title="{{{o.info_leave_room}}}" href="#">&nbsp;</a>

src/templates/roster_item.html

@@ -1,4 +1,4 @@
-<a class="cbox-list-item open-chat w-100 {[ if (o.num_unread) { ]} unread-msgs {[ } ]}"
+<a class="list-item-link cbox-list-item open-chat w-100 {[ if (o.num_unread) { ]} unread-msgs {[ } ]}"
    title="{{{o.desc_chat}}}" href="#">
     <span class="fa {{{o.status_icon}}}" title="{{{o.desc_status}}}"></span>
     {[ if (o.num_unread) { ]}
@@ -6,5 +6,5 @@
     {[ } ]}
     <span class="contact-name {[ if (o.num_unread) { ]} unread-msgs {[ } ]}">{{{o.display_name}}}</span></a>
 {[ if (o.allow_contact_removal) { ]}
-<a class="remove-xmpp-contact fa fa-trash" title="{{{o.desc_remove}}}" href="#"></a>
+<a class="list-item-action remove-xmpp-contact fa fa-trash" title="{{{o.desc_remove}}}" href="#"></a>
 {[ } ]}