Show subdued grey for icons (and darker when hovering)

css/converse.css

@@ -296,52 +296,6 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale; }
 
-@media screen and (max-width: 480px) {
-  #conversejs {
-    margin: 0;
-    right: 10px;
-    left: 10px;
-    bottom: 5px; } }
-@media screen and (max-height: 450px) {
-  #conversejs {
-    margin: 0;
-    right: 10px;
-    left: 10px;
-    bottom: 5px; } }
-#conversejs ul li {
-  height: auto; }
-#conversejs div, #conversejs span, #conversejs h1, #conversejs h2, #conversejs h3, #conversejs h4, #conversejs h5, #conversejs h6, #conversejs p, #conversejs blockquote,
-#conversejs pre, #conversejs a, #conversejs em, #conversejs img, #conversejs strong, #conversejs dl, #conversejs dt, #conversejs dd, #conversejs ol, #conversejs ul, #conversejs li,
-#conversejs fieldset, #conversejs form, #conversejs label, #conversejs legend, #conversejs table, #conversejs caption, #conversejs tbody,
-#conversejs tfoot, #conversejs thead, #conversejs tr, #conversejs th, #conversejs td, #conversejs article, #conversejs aside, #conversejs canvas, #conversejs details,
-#conversejs embed, #conversejs figure, #conversejs figcaption, #conversejs footer, #conversejs header, #conversejs hgroup, #conversejs menu,
-#conversejs nav, #conversejs output, #conversejs ruby, #conversejs section, #conversejs summary, #conversejs time, #conversejs mark, #conversejs audio, #conversejs video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font: inherit;
-  vertical-align: baseline; }
-#conversejs textarea,
-#conversejs input[type=submit], #conversejs input[type=button],
-#conversejs input[type=text], #conversejs input[type=password],
-#conversejs button {
-  font-size: 14px;
-  padding: 0.25em;
-  min-height: 0; }
-#conversejs strong {
-  font-weight: 700; }
-#conversejs ol, #conversejs ul {
-  list-style: none; }
-#conversejs li {
-  height: 10px; }
-#conversejs ul, #conversejs ol, #conversejs dl {
-  font: inherit;
-  margin: 0; }
-#conversejs a, #conversejs a:visited {
-  text-decoration: none;
-  color: #578EA9;
-  text-shadow: none; }
-
 #conversejs :root {
   --blue: #387592;
   --indigo: #6610f2;
@@ -4789,11 +4743,62 @@ body.reset {
     background-color: #DCF9F6; }
   #conversejs ::-moz-selection {
     background-color: #DCF9F6; }
-  #conversejs a:hover {
-    text-decoration: none; }
+  @media screen and (max-width: 480px) {
+    #conversejs {
+      margin: 0;
+      right: 10px;
+      left: 10px;
+      bottom: 5px; } }
+  @media screen and (max-height: 450px) {
+    #conversejs {
+      margin: 0;
+      right: 10px;
+      left: 10px;
+      bottom: 5px; } }
+  #conversejs ul li {
+    height: auto; }
+  #conversejs div, #conversejs span, #conversejs h1, #conversejs h2, #conversejs h3, #conversejs h4, #conversejs h5, #conversejs h6, #conversejs p, #conversejs blockquote,
+  #conversejs pre, #conversejs a, #conversejs em, #conversejs img, #conversejs strong, #conversejs dl, #conversejs dt, #conversejs dd, #conversejs ol, #conversejs ul, #conversejs li,
+  #conversejs fieldset, #conversejs form, #conversejs label, #conversejs legend, #conversejs table, #conversejs caption, #conversejs tbody,
+  #conversejs tfoot, #conversejs thead, #conversejs tr, #conversejs th, #conversejs td, #conversejs article, #conversejs aside, #conversejs canvas, #conversejs details,
+  #conversejs embed, #conversejs figure, #conversejs figcaption, #conversejs footer, #conversejs header, #conversejs hgroup, #conversejs menu,
+  #conversejs nav, #conversejs output, #conversejs ruby, #conversejs section, #conversejs summary, #conversejs time, #conversejs mark, #conversejs audio, #conversejs video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font: inherit;
+    vertical-align: baseline; }
+  #conversejs textarea,
+  #conversejs input[type=submit], #conversejs input[type=button],
+  #conversejs input[type=text], #conversejs input[type=password],
+  #conversejs button {
+    font-size: 14px;
+    padding: 0.25em;
+    min-height: 0; }
+  #conversejs strong {
+    font-weight: 700; }
+  #conversejs ol, #conversejs ul {
+    list-style: none; }
+  #conversejs li {
+    height: 10px; }
+  #conversejs ul, #conversejs ol, #conversejs dl {
+    font: inherit;
+    margin: 0; }
+  #conversejs a, #conversejs a:visited, #conversejs a:hover, #conversejs a:not([href]):not([tabindex]) {
+    text-decoration: none;
+    color: #578EA9;
+    text-shadow: none; }
+    #conversejs a.fa, #conversejs a:visited.fa, #conversejs a:hover.fa, #conversejs a:not([href]):not([tabindex]).fa {
+      color: #A8ABA1; }
+      #conversejs a.fa:hover, #conversejs a:visited.fa:hover, #conversejs a:hover.fa:hover, #conversejs a:not([href]):not([tabindex]).fa:hover {
+        color: #818479; }
   #conversejs canvas {
     background: #777;
     border-radius: 4px; }
+  #conversejs .fa {
+    color: #A8ABA1; }
+  #conversejs .fa:hover {
+    color: #818479; }
   #conversejs .selected {
     color: #578EA9 !important; }
   #conversejs .circle {
@@ -5773,6 +5778,9 @@ body.reset {
         #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,
@@ -6018,10 +6026,10 @@ body.reset {
       padding: 0.2em; }
     #conversejs #converse-roster .roster-filter-form span {
       padding: 0.3em;
-      color: #888;
       cursor: pointer; }
     #conversejs #converse-roster .roster-filter-form .roster-filter {
-      width: 100%; }
+      width: 100%;
+      margin: 0.2em; }
     #conversejs #converse-roster .roster-filter-form .clear-roster-filter {
       position: absolute;
       right: 0.2em;
@@ -6067,6 +6075,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 .open-chat {
           margin: 0;
           padding: 0; }
@@ -6117,12 +6127,9 @@ body.reset {
           float: right;
           margin: 0;
           padding: 0;
-          color: #A8ABA1;
           width: 2em; }
           #conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:before {
             font-size: 14px; }
-          #conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:hover {
-            color: #818479; }
   #conversejs #converse-roster span.pending-contact-name {
     line-height: 16px;
     width: 100%; }

css/inverse.css

@@ -296,52 +296,6 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale; }
 
-@media screen and (max-width: 480px) {
-  #conversejs {
-    margin: 0;
-    right: 10px;
-    left: 10px;
-    bottom: 5px; } }
-@media screen and (max-height: 450px) {
-  #conversejs {
-    margin: 0;
-    right: 10px;
-    left: 10px;
-    bottom: 5px; } }
-#conversejs ul li {
-  height: auto; }
-#conversejs div, #conversejs span, #conversejs h1, #conversejs h2, #conversejs h3, #conversejs h4, #conversejs h5, #conversejs h6, #conversejs p, #conversejs blockquote,
-#conversejs pre, #conversejs a, #conversejs em, #conversejs img, #conversejs strong, #conversejs dl, #conversejs dt, #conversejs dd, #conversejs ol, #conversejs ul, #conversejs li,
-#conversejs fieldset, #conversejs form, #conversejs label, #conversejs legend, #conversejs table, #conversejs caption, #conversejs tbody,
-#conversejs tfoot, #conversejs thead, #conversejs tr, #conversejs th, #conversejs td, #conversejs article, #conversejs aside, #conversejs canvas, #conversejs details,
-#conversejs embed, #conversejs figure, #conversejs figcaption, #conversejs footer, #conversejs header, #conversejs hgroup, #conversejs menu,
-#conversejs nav, #conversejs output, #conversejs ruby, #conversejs section, #conversejs summary, #conversejs time, #conversejs mark, #conversejs audio, #conversejs video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font: inherit;
-  vertical-align: baseline; }
-#conversejs textarea,
-#conversejs input[type=submit], #conversejs input[type=button],
-#conversejs input[type=text], #conversejs input[type=password],
-#conversejs button {
-  font-size: 16px;
-  padding: 0.25em;
-  min-height: 0; }
-#conversejs strong {
-  font-weight: 700; }
-#conversejs ol, #conversejs ul {
-  list-style: none; }
-#conversejs li {
-  height: 10px; }
-#conversejs ul, #conversejs ol, #conversejs dl {
-  font: inherit;
-  margin: 0; }
-#conversejs a, #conversejs a:visited {
-  text-decoration: none;
-  color: #578EA9;
-  text-shadow: none; }
-
 #conversejs :root {
   --blue: #387592;
   --indigo: #6610f2;
@@ -4789,11 +4743,62 @@ body.reset {
     background-color: #DCF9F6; }
   #conversejs ::-moz-selection {
     background-color: #DCF9F6; }
-  #conversejs a:hover {
-    text-decoration: none; }
+  @media screen and (max-width: 480px) {
+    #conversejs {
+      margin: 0;
+      right: 10px;
+      left: 10px;
+      bottom: 5px; } }
+  @media screen and (max-height: 450px) {
+    #conversejs {
+      margin: 0;
+      right: 10px;
+      left: 10px;
+      bottom: 5px; } }
+  #conversejs ul li {
+    height: auto; }
+  #conversejs div, #conversejs span, #conversejs h1, #conversejs h2, #conversejs h3, #conversejs h4, #conversejs h5, #conversejs h6, #conversejs p, #conversejs blockquote,
+  #conversejs pre, #conversejs a, #conversejs em, #conversejs img, #conversejs strong, #conversejs dl, #conversejs dt, #conversejs dd, #conversejs ol, #conversejs ul, #conversejs li,
+  #conversejs fieldset, #conversejs form, #conversejs label, #conversejs legend, #conversejs table, #conversejs caption, #conversejs tbody,
+  #conversejs tfoot, #conversejs thead, #conversejs tr, #conversejs th, #conversejs td, #conversejs article, #conversejs aside, #conversejs canvas, #conversejs details,
+  #conversejs embed, #conversejs figure, #conversejs figcaption, #conversejs footer, #conversejs header, #conversejs hgroup, #conversejs menu,
+  #conversejs nav, #conversejs output, #conversejs ruby, #conversejs section, #conversejs summary, #conversejs time, #conversejs mark, #conversejs audio, #conversejs video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font: inherit;
+    vertical-align: baseline; }
+  #conversejs textarea,
+  #conversejs input[type=submit], #conversejs input[type=button],
+  #conversejs input[type=text], #conversejs input[type=password],
+  #conversejs button {
+    font-size: 16px;
+    padding: 0.25em;
+    min-height: 0; }
+  #conversejs strong {
+    font-weight: 700; }
+  #conversejs ol, #conversejs ul {
+    list-style: none; }
+  #conversejs li {
+    height: 10px; }
+  #conversejs ul, #conversejs ol, #conversejs dl {
+    font: inherit;
+    margin: 0; }
+  #conversejs a, #conversejs a:visited, #conversejs a:hover, #conversejs a:not([href]):not([tabindex]) {
+    text-decoration: none;
+    color: #578EA9;
+    text-shadow: none; }
+    #conversejs a.fa, #conversejs a:visited.fa, #conversejs a:hover.fa, #conversejs a:not([href]):not([tabindex]).fa {
+      color: #A8ABA1; }
+      #conversejs a.fa:hover, #conversejs a:visited.fa:hover, #conversejs a:hover.fa:hover, #conversejs a:not([href]):not([tabindex]).fa:hover {
+        color: #818479; }
   #conversejs canvas {
     background: #777;
     border-radius: 4px; }
+  #conversejs .fa {
+    color: #A8ABA1; }
+  #conversejs .fa:hover {
+    color: #818479; }
   #conversejs .selected {
     color: #578EA9 !important; }
   #conversejs .circle {
@@ -5844,6 +5849,9 @@ body {
         #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,
@@ -6145,10 +6153,10 @@ body {
       padding: 0.2em; }
     #conversejs #converse-roster .roster-filter-form span {
       padding: 0.3em;
-      color: #888;
       cursor: pointer; }
     #conversejs #converse-roster .roster-filter-form .roster-filter {
-      width: 100%; }
+      width: 100%;
+      margin: 0.2em; }
     #conversejs #converse-roster .roster-filter-form .clear-roster-filter {
       position: absolute;
       right: 0.2em;
@@ -6194,6 +6202,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 .open-chat {
           margin: 0;
           padding: 0; }
@@ -6244,12 +6254,9 @@ body {
           float: right;
           margin: 0;
           padding: 0;
-          color: #A8ABA1;
           width: 2em; }
           #conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:before {
             font-size: 16px; }
-          #conversejs #converse-roster .roster-contacts .roster-group li a.remove-xmpp-contact:hover {
-            color: #818479; }
   #conversejs #converse-roster span.pending-contact-name {
     line-height: 22px;
     width: 100%; }

sass/_controlbox.scss

@@ -234,6 +234,9 @@
                         a:hover {
                             color: $dark-link-color;
                         }
+                        a.fa:hover {
+                            color: $gray-color;
+                        }
                         &.unread-msgs {
                             .available-room,
                             .open-room {

sass/_core.scss

@@ -48,8 +48,69 @@ body.reset {
         background-color: $highlight-color;
     }
 
-    a:hover {
+    @media screen and (max-width: $mobile-portrait-length) {
+        margin: 0;
+        right: 10px;
+        left: 10px;
+        bottom: 5px;
+    }
+    @media screen and (max-height: $mobile-landscape-height) {
+        margin: 0;
+        right: 10px;
+        left: 10px;
+        bottom: 5px;
+    }
+
+    ul li { height: auto; }
+    div, span, h1, h2, h3, h4, h5, h6, p, blockquote,
+    pre, a, em, img, strong, dl, dt, dd, ol, ul, li,
+    fieldset, form, label, legend, table, caption, tbody,
+    tfoot, thead, tr, th, td, article, aside, canvas, details,
+    embed, figure, figcaption, footer, header, hgroup, menu,
+    nav, output, ruby, section, summary, time, mark, audio, video {
+        margin: 0;
+        padding: 0;
+        border: 0;
+        font: inherit;
+        vertical-align: baseline;
+    }
+
+    textarea,
+    input[type=submit], input[type=button],
+    input[type=text], input[type=password],
+    button {
+        font-size: $font-size;
+        padding: 0.25em;
+        min-height: 0;
+    }
+
+    strong {
+        font-weight: 700;
+    }
+
+    ol, ul {
+        list-style: none;
+    }
+
+    li {
+        height: 10px;
+    }
+
+    ul, ol, dl {
+        font: inherit;
+        margin: 0;
+    }
+
+    a, a:visited, a:hover, a:not([href]):not([tabindex]) {
         text-decoration: none;
+        color: $link-color;
+        text-shadow: none;
+        &.fa {
+            color: $subdued-color;
+            &:hover {
+                color: $gray-color;
+            }
+        }
     }
 
     canvas {
@@ -57,6 +118,14 @@ body.reset {
         border-radius: $chatbox-border-radius;
     }
 
+    .fa {
+        color: $subdued-color;
+    }
+
+    .fa:hover {
+        color: $gray-color;
+    }
+
     .selected {
         color: $link-color !important;
     }

sass/_normalize.scss

-#conversejs {
-    @media screen and (max-width: $mobile-portrait-length) {
-        margin: 0;
-        right: 10px;
-        left: 10px;
-        bottom: 5px;
-    }
-    @media screen and (max-height: $mobile-landscape-height) {
-        margin: 0;
-        right: 10px;
-        left: 10px;
-        bottom: 5px;
-    }
-
-    ul li { height: auto; }
-    div, span, h1, h2, h3, h4, h5, h6, p, blockquote,
-    pre, a, em, img, strong, dl, dt, dd, ol, ul, li,
-    fieldset, form, label, legend, table, caption, tbody,
-    tfoot, thead, tr, th, td, article, aside, canvas, details,
-    embed, figure, figcaption, footer, header, hgroup, menu,
-    nav, output, ruby, section, summary, time, mark, audio, video {
-        margin: 0;
-        padding: 0;
-        border: 0;
-        font: inherit;
-        vertical-align: baseline;
-    }
-
-    textarea,
-    input[type=submit], input[type=button],
-    input[type=text], input[type=password],
-    button {
-        font-size: $font-size;
-        padding: 0.25em;
-        min-height: 0;
-    }
-
-    strong {
-        font-weight: 700;
-    }
-
-    ol, ul {
-        list-style: none;
-    }
-
-    li {
-        height: 10px;
-    }
-
-    ul, ol, dl {
-        font: inherit;
-        margin: 0;
-    }
-
-    a, a:visited {
-        text-decoration: none;
-        color: $link-color;
-        text-shadow: none;
-    }
-}

sass/_roster.scss

@@ -37,12 +37,12 @@
 
         span {
             padding: 0.3em;
-            color: #888;
             cursor: pointer;
         }
 
         .roster-filter {
             width: 100%;
+            margin: 0.2em;
         }
         .clear-roster-filter {
             position: absolute;
@@ -101,10 +101,12 @@
                         padding: 0 0.2em 0 0;
                     }
                 }
-
                 a:hover {
                     color: $dark-link-color;
                 }
+                a.fa:hover {
+                    color: $gray-color;
+                }
 
                 .open-chat {
                     margin: 0;
@@ -172,14 +174,10 @@
                         float: right;
                         margin: 0;
                         padding: 0;
-                        color: $subdued-color;
                         width: 2em;
                         &:before {
                             font-size: $font-size;
                         }
-                        &:hover {
-                            color: $gray-color;
-                        }
                     }
                 }
             }

sass/converse/converse.scss

@@ -15,7 +15,6 @@
 @import "bootstrap/scss/mixins";
 
 @import "../fonts";
-@import "../normalize";
 #conversejs {
     @import "bootstrap/scss/root";
     @import "bootstrap/scss/reboot";

sass/inverse/inverse.scss

@@ -14,7 +14,6 @@
 @import "bootstrap/scss/mixins";
 
 @import "../fonts";
-@import "../normalize";
 #conversejs {
     @import "bootstrap/scss/root";
     @import "bootstrap/scss/reboot";

src/converse-profile.js

@@ -58,6 +58,7 @@
                         'chat_status': chat_status,
                         'title_change_settings': __('Change settings'),
                         'title_change_status': __('Click to change your chat status'),
+                        'title_log_out': __('Log out'),
                         'title_your_profile': __('Your profile')
                     }));
                 },