From 73807959d3693dc80565df0c09cade8298e2d1bf Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Fri, 11 May 2018 10:19:14 +0200
Subject: [PATCH] updates #1068

- For roster contacts, only show remove icons on hover.
- Show light background color when hovering over an item in the
controlbox.

Ideally this background color will be 100% of the controlbox width, but
I'm not opening that can of worms now...
---
 css/converse.css             | 170 ++++++++++++++++++++---------------
 css/inverse.css              | 169 +++++++++++++++++++---------------
 sass/_controlbox.scss        |  76 ----------------
 sass/_core.scss              |   5 --
 sass/_roomslist.scss         |  98 ++++++++++++++++++--
 sass/_roster.scss            |  44 +++++----
 sass/_variables.scss         |   2 +
 sass/inverse.scss            |   2 +-
 sass/inverse/_bookmarks.scss |  17 ----
 9 files changed, 312 insertions(+), 271 deletions(-)
 delete mode 100644 sass/inverse/_bookmarks.scss

diff --git a/css/converse.css b/css/converse.css
index 0f67ca1df..81ae88124 100644
--- a/css/converse.css
+++ b/css/converse.css
@@ -6987,9 +6987,6 @@ body.reset {
     text-rendering: auto;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale; }
-  #conversejs .list-container {
-    text-align: left;
-    margin: 0.3em 0; }
   #conversejs .btn {
     color: #fff; }
     #conversejs .btn .fa {
@@ -7801,15 +7798,6 @@ body.reset {
       text-overflow: ellipsis; }
     #conversejs #controlbox .controlbox-pane .userinfo .profile {
       margin-bottom: 0.75em; }
-  #conversejs #controlbox .list-container .items-list .list-item {
-    border: none;
-    clear: both;
-    color: #666;
-    display: block;
-    height: 2em;
-    overflow: hidden;
-    text-shadow: 0 1px 0 #FAFAFA;
-    word-wrap: break-word; }
   #conversejs #controlbox #chatrooms {
     padding: 0; }
     #conversejs #controlbox #chatrooms form.add-chatroom {
@@ -7819,56 +7807,6 @@ body.reset {
       #conversejs #controlbox #chatrooms form.add-chatroom input[type=submit],
       #conversejs #controlbox #chatrooms form.add-chatroom input[type=text] {
         width: 100%; }
-    #conversejs #controlbox #chatrooms .rooms-list-container .rooms-toggle {
-      display: block;
-      color: #666;
-      padding: 0 0 0.5rem 0; }
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-toggle:hover {
-        color: #585B51; }
-    #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list {
-      margin: 0.5em 0;
-      text-align: left; }
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a:hover,
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a:hover {
-        color: #206485; }
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.fa:hover,
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.fa:hover {
-        color: #818479; }
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom.unread-msgs .available-room,
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom.unread-msgs .open-room,
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom.unread-msgs .available-room,
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom.unread-msgs .open-room {
-        width: 100%;
-        font-weight: bold; }
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.room-info:before,
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.room-info:before {
-        font-size: 15px; }
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.open-room,
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.open-room {
-        width: 68%;
-        float: left;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        padding-right: 0.5em; }
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.available-room,
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.available-room {
-        width: 85%; }
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .add-bookmark,
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .remove-bookmark,
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark,
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark {
-        color: #A8ABA1; }
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .add-bookmark.button-on,
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .remove-bookmark.button-on,
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark.button-on,
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark.button-on {
-          color: #578EA9; }
-          #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .add-bookmark.button-on:hover,
-          #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .remove-bookmark.button-on:hover,
-          #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark.button-on:hover,
-          #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark.button-on:hover {
-            color: #206485; }
   #conversejs #controlbox .controlbox-section {
     margin: 1em 0 0 0; }
     #conversejs #controlbox .controlbox-section .controlbox-heading {
@@ -8017,9 +7955,89 @@ body.reset {
   #conversejs:not(.fullscreen) #controlbox .controlbox-panes {
     border-radius: 4px; }
 
-#conversejs #controlbox .available-chatroom.unread-msgs .msgs-indicator {
-  border-radius: 10%;
-  opacity: 1; }
+#conversejs .list-container {
+  text-align: left;
+  padding: 0.3em 0; }
+  #conversejs .list-container .rooms-toggle {
+    display: block;
+    color: #666;
+    padding: 0 0 0.5rem 0; }
+    #conversejs .list-container .rooms-toggle:hover {
+      color: #585B51; }
+  #conversejs .list-container .items-list {
+    text-align: left; }
+    #conversejs .list-container .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 .list-container .items-list .available-chatroom:hover,
+    #conversejs .list-container .items-list .open-headline:hover,
+    #conversejs .list-container .items-list .open-chatroom:hover {
+      background-color: #eff4f7; }
+    #conversejs .list-container .items-list .available-chatroom.unread-msgs .msgs-indicator,
+    #conversejs .list-container .items-list .open-headline.unread-msgs .msgs-indicator,
+    #conversejs .list-container .items-list .open-chatroom.unread-msgs .msgs-indicator {
+      border-radius: 10%;
+      opacity: 1; }
+    #conversejs .list-container .items-list .available-chatroom.unread-msgs .available-room,
+    #conversejs .list-container .items-list .available-chatroom.unread-msgs .open-room,
+    #conversejs .list-container .items-list .open-headline.unread-msgs .available-room,
+    #conversejs .list-container .items-list .open-headline.unread-msgs .open-room,
+    #conversejs .list-container .items-list .open-chatroom.unread-msgs .available-room,
+    #conversejs .list-container .items-list .open-chatroom.unread-msgs .open-room {
+      width: 100%;
+      font-weight: bold; }
+    #conversejs .list-container .items-list .available-chatroom a:hover,
+    #conversejs .list-container .items-list .open-headline a:hover,
+    #conversejs .list-container .items-list .open-chatroom a:hover {
+      color: #206485; }
+    #conversejs .list-container .items-list .available-chatroom a.room-info:before,
+    #conversejs .list-container .items-list .open-headline a.room-info:before,
+    #conversejs .list-container .items-list .open-chatroom a.room-info:before {
+      font-size: 15px; }
+    #conversejs .list-container .items-list .available-chatroom a.open-room,
+    #conversejs .list-container .items-list .open-headline a.open-room,
+    #conversejs .list-container .items-list .open-chatroom a.open-room {
+      width: 68%;
+      float: left;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      padding-right: 0.5em; }
+    #conversejs .list-container .items-list .available-chatroom a.available-room,
+    #conversejs .list-container .items-list .open-headline a.available-room,
+    #conversejs .list-container .items-list .open-chatroom a.available-room {
+      width: 85%; }
+    #conversejs .list-container .items-list .available-chatroom .add-bookmark,
+    #conversejs .list-container .items-list .available-chatroom .remove-bookmark,
+    #conversejs .list-container .items-list .open-headline .add-bookmark,
+    #conversejs .list-container .items-list .open-headline .remove-bookmark,
+    #conversejs .list-container .items-list .open-chatroom .add-bookmark,
+    #conversejs .list-container .items-list .open-chatroom .remove-bookmark {
+      color: #A8ABA1; }
+      #conversejs .list-container .items-list .available-chatroom .add-bookmark.button-on,
+      #conversejs .list-container .items-list .available-chatroom .remove-bookmark.button-on,
+      #conversejs .list-container .items-list .open-headline .add-bookmark.button-on,
+      #conversejs .list-container .items-list .open-headline .remove-bookmark.button-on,
+      #conversejs .list-container .items-list .open-chatroom .add-bookmark.button-on,
+      #conversejs .list-container .items-list .open-chatroom .remove-bookmark.button-on {
+        color: #578EA9; }
+        #conversejs .list-container .items-list .available-chatroom .add-bookmark.button-on:hover,
+        #conversejs .list-container .items-list .available-chatroom .remove-bookmark.button-on:hover,
+        #conversejs .list-container .items-list .open-headline .add-bookmark.button-on:hover,
+        #conversejs .list-container .items-list .open-headline .remove-bookmark.button-on:hover,
+        #conversejs .list-container .items-list .open-chatroom .add-bookmark.button-on:hover,
+        #conversejs .list-container .items-list .open-chatroom .remove-bookmark.button-on:hover {
+          color: #206485; }
+
+#conversejs.fullscreen #controlbox #chatrooms .bookmarks-list dl.rooms-list.bookmarks dd.available-chatroom a.open-room {
+  width: 80%; }
 
 #conversejs #converse-roster {
   text-align: left;
@@ -8075,12 +8093,12 @@ body.reset {
         clear: both;
         color: #666;
         display: block;
-        height: 24px;
         overflow-y: hidden;
         text-shadow: 0 1px 0 #FAFAFA;
         line-height: 14px;
         width: 100%;
-        margin-top: 0.5em; }
+        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 {
@@ -8089,8 +8107,8 @@ body.reset {
           padding: 0 0.2em 0 0; }
         #conversejs #converse-roster .roster-contacts .roster-group li a:hover {
           color: #206485; }
-        #conversejs #converse-roster .roster-contacts .roster-group li a.fa:hover {
-          color: #818479; }
+        #conversejs #converse-roster .roster-contacts .roster-group li a .fa:hover {
+          color: white; }
         #conversejs #converse-roster .roster-contacts .roster-group li .open-chat {
           margin: 0;
           padding: 0; }
@@ -8134,16 +8152,20 @@ body.reset {
           text-overflow: ellipsis; }
         #conversejs #converse-roster .roster-contacts .roster-group li span {
           padding: 0; }
-        #conversejs #converse-roster .roster-contacts .roster-group li a.decline-xmpp-request {
+        #conversejs #converse-roster .roster-contacts .roster-group li .decline-xmpp-request {
           margin-left: 5px; }
-        #conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact {
+        #conversejs #converse-roster .roster-contacts .roster-group li .remove-xmpp-contact {
           font-size: 10px;
-          float: right;
           margin: 0;
           padding: 0;
-          width: 2em; }
-          #conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:before {
+          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; }
   #conversejs #converse-roster span.pending-contact-name {
     line-height: 16px;
     width: 100%; }
diff --git a/css/inverse.css b/css/inverse.css
index 51757e8f1..65c90c566 100644
--- a/css/inverse.css
+++ b/css/inverse.css
@@ -6987,9 +6987,6 @@ body.reset {
     text-rendering: auto;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale; }
-  #conversejs .list-container {
-    text-align: left;
-    margin: 0.3em 0; }
   #conversejs .btn {
     color: #fff; }
     #conversejs .btn .fa {
@@ -7871,15 +7868,6 @@ body {
       text-overflow: ellipsis; }
     #conversejs #controlbox .controlbox-pane .userinfo .profile {
       margin-bottom: 0.75em; }
-  #conversejs #controlbox .list-container .items-list .list-item {
-    border: none;
-    clear: both;
-    color: #666;
-    display: block;
-    height: 2em;
-    overflow: hidden;
-    text-shadow: 0 1px 0 #FAFAFA;
-    word-wrap: break-word; }
   #conversejs #controlbox #chatrooms {
     padding: 0; }
     #conversejs #controlbox #chatrooms form.add-chatroom {
@@ -7889,56 +7877,6 @@ body {
       #conversejs #controlbox #chatrooms form.add-chatroom input[type=submit],
       #conversejs #controlbox #chatrooms form.add-chatroom input[type=text] {
         width: 100%; }
-    #conversejs #controlbox #chatrooms .rooms-list-container .rooms-toggle {
-      display: block;
-      color: #666;
-      padding: 0 0 0.5rem 0; }
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-toggle:hover {
-        color: #585B51; }
-    #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list {
-      margin: 0.5em 0;
-      text-align: left; }
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a:hover,
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a:hover {
-        color: #206485; }
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.fa:hover,
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.fa:hover {
-        color: #818479; }
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom.unread-msgs .available-room,
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom.unread-msgs .open-room,
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom.unread-msgs .available-room,
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom.unread-msgs .open-room {
-        width: 100%;
-        font-weight: bold; }
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.room-info:before,
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.room-info:before {
-        font-size: 15px; }
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.open-room,
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.open-room {
-        width: 68%;
-        float: left;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        padding-right: 0.5em; }
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom a.available-room,
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom a.available-room {
-        width: 85%; }
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .add-bookmark,
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .remove-bookmark,
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark,
-      #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark {
-        color: #A8ABA1; }
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .add-bookmark.button-on,
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .remove-bookmark.button-on,
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark.button-on,
-        #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark.button-on {
-          color: #578EA9; }
-          #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .add-bookmark.button-on:hover,
-          #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .available-chatroom .remove-bookmark.button-on:hover,
-          #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .add-bookmark.button-on:hover,
-          #conversejs #controlbox #chatrooms .rooms-list-container .rooms-list .open-chatroom .remove-bookmark.button-on:hover {
-            color: #206485; }
   #conversejs #controlbox .controlbox-section {
     margin: 1em 0 0 0; }
     #conversejs #controlbox .controlbox-section .controlbox-heading {
@@ -8207,12 +8145,12 @@ body {
         clear: both;
         color: #666;
         display: block;
-        height: 24px;
         overflow-y: hidden;
         text-shadow: 0 1px 0 #FAFAFA;
         line-height: 16px;
         width: 100%;
-        margin-top: 0.5em; }
+        height: 2em;
+        padding-top: 0.5em; }
         #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a {
           line-height: 22px; }
           #conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a.fa {
@@ -8221,8 +8159,8 @@ body {
           padding: 0 0.2em 0 0; }
         #conversejs #converse-roster .roster-contacts .roster-group li a:hover {
           color: #206485; }
-        #conversejs #converse-roster .roster-contacts .roster-group li a.fa:hover {
-          color: #818479; }
+        #conversejs #converse-roster .roster-contacts .roster-group li a .fa:hover {
+          color: white; }
         #conversejs #converse-roster .roster-contacts .roster-group li .open-chat {
           margin: 0;
           padding: 0; }
@@ -8266,26 +8204,111 @@ body {
           text-overflow: ellipsis; }
         #conversejs #converse-roster .roster-contacts .roster-group li span {
           padding: 0; }
-        #conversejs #converse-roster .roster-contacts .roster-group li a.decline-xmpp-request {
+        #conversejs #converse-roster .roster-contacts .roster-group li .decline-xmpp-request {
           margin-left: 5px; }
-        #conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact {
+        #conversejs #converse-roster .roster-contacts .roster-group li .remove-xmpp-contact {
           font-size: 10px;
-          float: right;
           margin: 0;
           padding: 0;
-          width: 2em; }
-          #conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:before {
+          width: 2em;
+          display: none; }
+          #conversejs #converse-roster .roster-contacts .roster-group li .remove-xmpp-contact:before {
             font-size: 16px; }
+        #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: 22px;
     width: 100%; }
 
-#conversejs #converse-roster {
-  padding-bottom: 3em; }
+#conversejs .list-container {
+  text-align: left;
+  padding: 0.3em 0; }
+  #conversejs .list-container .rooms-toggle {
+    display: block;
+    color: #666;
+    padding: 0 0 0.5rem 0; }
+    #conversejs .list-container .rooms-toggle:hover {
+      color: #585B51; }
+  #conversejs .list-container .items-list {
+    text-align: left; }
+    #conversejs .list-container .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 .list-container .items-list .available-chatroom:hover,
+    #conversejs .list-container .items-list .open-headline:hover,
+    #conversejs .list-container .items-list .open-chatroom:hover {
+      background-color: #eff4f7; }
+    #conversejs .list-container .items-list .available-chatroom.unread-msgs .msgs-indicator,
+    #conversejs .list-container .items-list .open-headline.unread-msgs .msgs-indicator,
+    #conversejs .list-container .items-list .open-chatroom.unread-msgs .msgs-indicator {
+      border-radius: 10%;
+      opacity: 1; }
+    #conversejs .list-container .items-list .available-chatroom.unread-msgs .available-room,
+    #conversejs .list-container .items-list .available-chatroom.unread-msgs .open-room,
+    #conversejs .list-container .items-list .open-headline.unread-msgs .available-room,
+    #conversejs .list-container .items-list .open-headline.unread-msgs .open-room,
+    #conversejs .list-container .items-list .open-chatroom.unread-msgs .available-room,
+    #conversejs .list-container .items-list .open-chatroom.unread-msgs .open-room {
+      width: 100%;
+      font-weight: bold; }
+    #conversejs .list-container .items-list .available-chatroom a:hover,
+    #conversejs .list-container .items-list .open-headline a:hover,
+    #conversejs .list-container .items-list .open-chatroom a:hover {
+      color: #206485; }
+    #conversejs .list-container .items-list .available-chatroom a.room-info:before,
+    #conversejs .list-container .items-list .open-headline a.room-info:before,
+    #conversejs .list-container .items-list .open-chatroom a.room-info:before {
+      font-size: 15px; }
+    #conversejs .list-container .items-list .available-chatroom a.open-room,
+    #conversejs .list-container .items-list .open-headline a.open-room,
+    #conversejs .list-container .items-list .open-chatroom a.open-room {
+      width: 68%;
+      float: left;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      padding-right: 0.5em; }
+    #conversejs .list-container .items-list .available-chatroom a.available-room,
+    #conversejs .list-container .items-list .open-headline a.available-room,
+    #conversejs .list-container .items-list .open-chatroom a.available-room {
+      width: 85%; }
+    #conversejs .list-container .items-list .available-chatroom .add-bookmark,
+    #conversejs .list-container .items-list .available-chatroom .remove-bookmark,
+    #conversejs .list-container .items-list .open-headline .add-bookmark,
+    #conversejs .list-container .items-list .open-headline .remove-bookmark,
+    #conversejs .list-container .items-list .open-chatroom .add-bookmark,
+    #conversejs .list-container .items-list .open-chatroom .remove-bookmark {
+      color: #A8ABA1; }
+      #conversejs .list-container .items-list .available-chatroom .add-bookmark.button-on,
+      #conversejs .list-container .items-list .available-chatroom .remove-bookmark.button-on,
+      #conversejs .list-container .items-list .open-headline .add-bookmark.button-on,
+      #conversejs .list-container .items-list .open-headline .remove-bookmark.button-on,
+      #conversejs .list-container .items-list .open-chatroom .add-bookmark.button-on,
+      #conversejs .list-container .items-list .open-chatroom .remove-bookmark.button-on {
+        color: #578EA9; }
+        #conversejs .list-container .items-list .available-chatroom .add-bookmark.button-on:hover,
+        #conversejs .list-container .items-list .available-chatroom .remove-bookmark.button-on:hover,
+        #conversejs .list-container .items-list .open-headline .add-bookmark.button-on:hover,
+        #conversejs .list-container .items-list .open-headline .remove-bookmark.button-on:hover,
+        #conversejs .list-container .items-list .open-chatroom .add-bookmark.button-on:hover,
+        #conversejs .list-container .items-list .open-chatroom .remove-bookmark.button-on:hover {
+          color: #206485; }
 
 #conversejs.fullscreen #controlbox #chatrooms .bookmarks-list dl.rooms-list.bookmarks dd.available-chatroom a.open-room {
   width: 80%; }
 
+#conversejs #converse-roster {
+  padding-bottom: 3em; }
+
 #conversejs.converse-embedded .add-chatroom input[type="submit"],
 #conversejs.converse-embedded .add-chatroom input[type="button"],
 #conversejs .add-chatroom input[type="submit"],
diff --git a/sass/_controlbox.scss b/sass/_controlbox.scss
index cc0f185df..a9260cfe6 100644
--- a/sass/_controlbox.scss
+++ b/sass/_controlbox.scss
@@ -226,21 +226,6 @@
             }
         }
 
-        .list-container {
-            .items-list {
-                .list-item {
-                    border: none;
-                    clear: both;
-                    color: $text-color;
-                    display: block;
-                    height: 2em;
-                    overflow: hidden;
-                    text-shadow: 0 1px 0 $text-shadow-color;
-                    word-wrap: break-word;
-                }
-            }
-        }
-
         #chatrooms {
             padding: 0;
 
@@ -253,67 +238,6 @@
                 margin: 0;
                 padding: 0;
             }
-
-            .rooms-list-container {
-                .rooms-toggle {
-                    display: block;
-                    color: $text-color;
-                    padding: 0 0 0.5rem 0;
-                    &:hover {
-                        color: $dark-gray-color;
-                    }
-                }
-                .rooms-list {
-                    margin: 0.5em 0;
-                    text-align: left;
-
-
-                    .available-chatroom,
-                    .open-chatroom {
-                        a:hover {
-                            color: $dark-link-color;
-                        }
-                        a.fa:hover {
-                            color: $gray-color;
-                        }
-                        &.unread-msgs {
-                            .available-room,
-                            .open-room {
-                                width: 100%;
-                                font-weight: bold;
-                            }
-                        }
-                        a {
-                            &.room-info {
-                                &: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 {
-                            &.button-on {
-                                color: $link-color;
-                                &:hover {
-                                    color: $dark-link-color;
-                                }
-                            }
-                            color: $subdued-color;
-                        }
-                    }
-                }
-            }
         }
 
         .controlbox-section {
diff --git a/sass/_core.scss b/sass/_core.scss
index 9859d1a95..89e93abd0 100644
--- a/sass/_core.scss
+++ b/sass/_core.scss
@@ -229,11 +229,6 @@ body.reset {
         -moz-osx-font-smoothing: grayscale;
     }
 
-    .list-container {
-        text-align: left;
-        margin: 0.3em 0;
-    }
-
     .btn {
         color: #fff;
         .fa {
diff --git a/sass/_roomslist.scss b/sass/_roomslist.scss
index 34bfd8d15..4a5ce88f2 100644
--- a/sass/_roomslist.scss
+++ b/sass/_roomslist.scss
@@ -1,10 +1,96 @@
 #conversejs {
-    #controlbox {
-        .available-chatroom {
-            &.unread-msgs {
-                .msgs-indicator {
-                    border-radius: 10%;
-                    opacity: 1;
+    .list-container {
+        text-align: left;
+        padding: 0.3em 0;
+
+        .rooms-toggle {
+            display: block;
+            color: $text-color;
+            padding: 0 0 0.5rem 0;
+            &:hover {
+                color: $dark-gray-color;
+            }
+        }
+        .items-list {
+            text-align: left;
+
+            .list-item {
+                border: none;
+                clear: both;
+                color: $text-color;
+                display: block;
+                height: 2em;
+                overflow: hidden;
+                padding-top: 0.5em;
+                text-shadow: 0 1px 0 $text-shadow-color;
+                word-wrap: break-word;
+            }
+
+            .available-chatroom,
+            .open-headline,
+            .open-chatroom {
+                &:hover {
+                    background-color: lighten($controlbox-head-color, 45%);
+                }
+                &.unread-msgs {
+                    .msgs-indicator {
+                        border-radius: 10%;
+                        opacity: 1;
+                    }
+                    .available-room,
+                    .open-room {
+                        width: 100%;
+                        font-weight: bold;
+                    }
+                }
+                a {
+                    &:hover {
+                        color: $dark-link-color;
+                    }
+                    &.room-info {
+                        &: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 {
+                    &.button-on {
+                        color: $link-color;
+                        &:hover {
+                            color: $dark-link-color;
+                        }
+                    }
+                    color: $subdued-color;
+                }
+            }
+        }
+    }
+}
+
+#conversejs.fullscreen {
+    #controlbox {
+        #chatrooms {
+            .bookmarks-list {
+                dl.rooms-list.bookmarks {
+                    dd.available-chatroom {
+                        a {
+                            &.open-room {
+                                width: 80%;
+                            }
+                        }
+                    }
                 }
             }
         }
diff --git a/sass/_roster.scss b/sass/_roster.scss
index a8dfc9281..36608e14a 100644
--- a/sass/_roster.scss
+++ b/sass/_roster.scss
@@ -77,12 +77,12 @@
                 clear: both;
                 color: $text-color;
                 display: block;
-                height: 24px;
                 overflow-y: hidden;
                 text-shadow: 0 1px 0 $text-shadow-color;
                 line-height: $font-size;
                 width: 100%;
-                margin-top: 0.5em;
+                height: 2em;
+                padding-top: 0.5em;
 
                 &.requesting-xmpp-contact {
                     a {
@@ -95,11 +95,13 @@
                         padding: 0 0.2em 0 0;
                     }
                 }
-                a:hover {
-                    color: $dark-link-color;
-                }
-                a.fa:hover {
-                    color: $gray-color;
+                a {
+                    &:hover {
+                        color: $dark-link-color;
+                    }
+                    .fa:hover {
+                        color: white;
+                    }
                 }
 
                 .open-chat {
@@ -159,19 +161,23 @@
                 span {
                     padding: 0;
                 }
-                a {
-                    &.decline-xmpp-request {
-                        margin-left: 5px;
+                .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;
                     }
-                    &.remove-xmpp-contact {
-                        font-size: $font-size-tiny;
-                        float: right;
-                        margin: 0;
-                        padding: 0;
-                        width: 2em;
-                        &:before {
-                            font-size: $font-size;
-                        }
+                }
+                &:hover {
+                    background-color: lighten($controlbox-head-color, 45%);
+                    .remove-xmpp-contact {
+                        display: inline-block;
                     }
                 }
             }
diff --git a/sass/_variables.scss b/sass/_variables.scss
index 364a09c74..e2999d0ba 100644
--- a/sass/_variables.scss
+++ b/sass/_variables.scss
@@ -96,6 +96,8 @@ $message-font-size: 14px !default;
 $font-size-tiny: 10px !default;
 
 $controlbox-width: 250px !default;
+$controlbox-head-color: $light-blue !default;
+
 $chat-gutter: 0.5em !default;
 $minimized-chats-width: 130px !default;
 
diff --git a/sass/inverse.scss b/sass/inverse.scss
index 2a8391b56..50d024f34 100644
--- a/sass/inverse.scss
+++ b/sass/inverse.scss
@@ -46,9 +46,9 @@
 @import "controlbox";
 @import "inverse/controlbox";
 @import "roster";
+@import "roomslist";
 @import "inverse/roster";
 @import "bookmarks";
-@import "inverse/bookmarks";
 @import "chatrooms";
 @import "inverse/chatrooms";
 @import "headline";
diff --git a/sass/inverse/_bookmarks.scss b/sass/inverse/_bookmarks.scss
deleted file mode 100644
index f79747702..000000000
--- a/sass/inverse/_bookmarks.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-#conversejs.fullscreen {
-    #controlbox {
-        #chatrooms {
-            .bookmarks-list {
-                dl.rooms-list.bookmarks {
-                    dd.available-chatroom {
-                        a {
-                            &.open-room {
-                                width: 80%;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}