We now have a functioning mockup of contact groups. updates #83

css/converse.css

@@ -853,11 +853,11 @@ dl.add-converse-contact {
 #conversejs .chatroom-form label select {
   float: right;
 }
-#conversejs #converse-roster dd.odd {
+#converse-roster dd.odd {
   background-color: #DCEAC5;
   /* Make this difference */
 }
-#conversejs #converse-roster dd.current-xmpp-contact span {
+#converse-roster dd.current-xmpp-contact span {
   font-size: 16px;
   float: left;
   color: #4f4f4f;
@@ -866,18 +866,18 @@ dl.add-converse-contact {
   margin-left: 0.5em;
   float: right;
 }
-#conversejs #converse-roster dd a,
-#conversejs #converse-roster dd span {
+#converse-roster dd a,
+#converse-roster dd span {
   text-shadow: 0 1px 0 #fafafa;
   display: inline-block;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-#conversejs #converse-roster dd span {
+#converse-roster dd span {
   padding: 0 5px 0 0;
 }
-#conversejs #converse-roster {
+#converse-roster {
   overflow-y: auto;
   overflow-x: hidden;
   width: 100%;
@@ -886,6 +886,9 @@ dl.add-converse-contact {
   height: 254px;
   height: calc(100% - 70px);
 }
+#converse-roster .roster-group {
+  color: #666;
+}
 #conversejs dd.available-chatroom {
   overflow-x: hidden;
   text-overflow: ellipsis;
@@ -895,8 +898,8 @@ dl.add-converse-contact {
 #conversejs dd.available-chatroom a.open-room {
   width: 148px;
 }
-#conversejs #available-chatrooms dt,
-#conversejs #converse-roster dt {
+#available-chatrooms dt,
+#converse-roster dt {
   font-weight: normal;
   font-size: 13px;
   color: #666;
@@ -904,7 +907,7 @@ dl.add-converse-contact {
   padding: 0.3em 0 0 0.5em;
   text-shadow: 0 1px 0 #fafafa;
 }
-#conversejs #converse-roster dt {
+#converse-roster dt {
   display: none;
 }
 #conversejs .room-info {

less/converse.less

@@ -945,11 +945,11 @@ dl.add-converse-contact {
     float: right;
 }
 
-#conversejs #converse-roster dd.odd {
+#converse-roster dd.odd {
     background-color: #DCEAC5; /* Make this difference */
 }
 
-#conversejs #converse-roster dd.current-xmpp-contact span {
+#converse-roster dd.current-xmpp-contact span {
     font-size: 16px;
     float: left;
     color: rgb(79, 79, 79);
@@ -960,8 +960,8 @@ dl.add-converse-contact {
     float: right;
 }
 
-#conversejs #converse-roster dd a,
-#conversejs #converse-roster dd span {
+#converse-roster dd a,
+#converse-roster dd span {
     text-shadow: 0 1px 0 rgba(250, 250, 250, 1);
     display: inline-block;
     overflow: hidden;
@@ -969,11 +969,11 @@ dl.add-converse-contact {
     text-overflow: ellipsis;
 }
 
-#conversejs #converse-roster dd span {
+#converse-roster dd span {
     padding: 0 5px 0 0;
 }
 
-#conversejs #converse-roster {
+#converse-roster {
     overflow-y: auto;
     overflow-x: hidden;
     width: 100%;
@@ -983,6 +983,10 @@ dl.add-converse-contact {
     height: ~"calc(100% - 70px)";
 }
 
+#converse-roster .roster-group {
+    color: #666;
+}
+
 #conversejs dd.available-chatroom {
     overflow-x: hidden;
     text-overflow: ellipsis;
@@ -994,8 +998,8 @@ dl.add-converse-contact {
     width: 148px;
 }
 
-#conversejs #available-chatrooms dt,
-#conversejs #converse-roster dt {
+#available-chatrooms dt,
+#converse-roster dt {
     font-weight: normal;
     font-size: 13px;
     color: #666;
@@ -1004,7 +1008,7 @@ dl.add-converse-contact {
     text-shadow: 0 1px 0 rgba(250, 250, 250, 1);
 }
 
-#conversejs #converse-roster dt {
+#converse-roster dt {
     display: none;
 }