Update style for typeahead dropdown and inviting contacts.

css/converse.css

@@ -692,15 +692,15 @@
   #conversejs .pure-form select:focus,
   #conversejs .pure-form textarea:focus {
     outline: 0;
-    border-color: #129FEA; }
+    border-color: #1A9707; }
   #conversejs .pure-form input:not([type]):focus {
     outline: 0;
-    border-color: #129FEA; }
+    border-color: #1A9707; }
   #conversejs .pure-form input[type="file"]:focus,
   #conversejs .pure-form input[type="radio"]:focus,
   #conversejs .pure-form input[type="checkbox"]:focus {
-    outline: thin solid #129FEA;
-    outline: 1px auto #129FEA; }
+    outline: thin solid #1A9707;
+    outline: 1px auto #1A9707; }
   #conversejs .pure-form .pure-checkbox,
   #conversejs .pure-form .pure-radio {
     margin: 0.5em 0;
@@ -1123,28 +1123,6 @@
   #conversejs .input-button-group button,
   #conversejs .input-button-group input {
     display: table-cell; }
-  #conversejs .tt-highlight {
-    background-color: #00230F; }
-  #conversejs .tt-suggestion p {
-    color: white;
-    text-shadow: rgba(0, 0, 0, 0.51) 0 -1px 0;
-    cursor: pointer;
-    font-size: 11px; }
-  #conversejs .tt-suggestion p:hover {
-    background-color: #00230F; }
-    #conversejs .tt-suggestion p:hover .tt-highlight {
-      background-color: #00230F;
-      background: #27774A; }
-  #conversejs .tt-dropdown-menu {
-    margin: 0 1px 0 1px;
-    width: 96px;
-    max-height: 250px;
-    overflow-x: hidden;
-    overflow-y: auto;
-    text-overflow: ellipsis;
-    background: #27774A;
-    border-bottom-right-radius: 4px;
-    border-bottom-left-radius: 4px; }
   #conversejs .error {
     color: red; }
   #conversejs .reg-feedback {
@@ -1894,6 +1872,7 @@
         height: 100%;
         min-width: 200px; }
         #conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
+          margin-top: 0.5em;
           padding: 0.5em 0.5em 0 0.5em; }
       #conversejs .chatroom .box-flyout .chatroom-body .mentioned {
         font-weight: bold; }
@@ -1947,8 +1926,33 @@
     margin: -1px 0 0 -1px;
     width: 100px;
     border: 1px solid #999; }
-  #conversejs .chatroom .invited-contact.tt-input {
-    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkBCjE0uzKkOgAAAidJREFUKM+N0k+IEnEUB/D3cyscdagkWpHV0WGWREXm0AgOGkSJ07kh2UXYU5cOewm6Bp0KXG/tpSCv6hyEFQIhMEaE3yERYfwTOoqKGLQxDAbqYadLgu7J7/XxeY/3ez8EACDLsgljfMfj8ZxUKhXXYDAAnueBoqgyAMipVOovXAuSZdnUaDQeDofDs16vFyUIAjRNUwmCoG02G1AUdZ5IJN7GYrHfm3AvEAjcnUwmX0ajUdRqtV74fL6sruufKYoa6bp+fzabPUMI7ZfL5eImNHk8npNerxc1m80XHMe98fv9H3K5XDkSibxjWfb1arWaYoyPMMbCFqxUKi6CIODw8LDmdDq7oigaAACiKK5omv7KcdylpmlIkiTHFlRVFTRNUxVFqa/ROqIoGoqi5A3DgFartfU4Jp7ngSAI2uVyPZIk6dZmUZKk2w6H4xghBPF4HK7vWLbZbDCdTp+rqvpUkiS0RvV6/bTf7x8wDHMViURqm/AGAMgURZ232+1X1Wr102KxuEwmk3lZlo/7/f7BcrkkSZKs2e12tHXH/x/gHsY4jTE+0jQNGYYBCCFgGOaKJMkfjUaDZximGQ6HXzSbzZ+ZTMbY6oIxFgqFgqPT6YAgCMBxXM1ut6N0Op0fj8chi8XyjWXZ98Fg8DuCHZLNZh+USqWP8/n8idvt/hUKhV7u7QK9Xu8fmqanAJBQVXUfAGY7TQQAKBaLN8fjsdDtdh/run72Dzhf7XLe2UevAAAAAElFTkSuQmCC) no-repeat right 3px center; }
+    #conversejs .chatroom .invited-contact.tt-input {
+      margin: 1px;
+      width: 97px;
+      width: calc(100% - 2px);
+      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkBCjE0uzKkOgAAAidJREFUKM+N0k+IEnEUB/D3cyscdagkWpHV0WGWREXm0AgOGkSJ07kh2UXYU5cOewm6Bp0KXG/tpSCv6hyEFQIhMEaE3yERYfwTOoqKGLQxDAbqYadLgu7J7/XxeY/3ez8EACDLsgljfMfj8ZxUKhXXYDAAnueBoqgyAMipVOovXAuSZdnUaDQeDofDs16vFyUIAjRNUwmCoG02G1AUdZ5IJN7GYrHfm3AvEAjcnUwmX0ajUdRqtV74fL6sruufKYoa6bp+fzabPUMI7ZfL5eImNHk8npNerxc1m80XHMe98fv9H3K5XDkSibxjWfb1arWaYoyPMMbCFqxUKi6CIODw8LDmdDq7oigaAACiKK5omv7KcdylpmlIkiTHFlRVFTRNUxVFqa/ROqIoGoqi5A3DgFartfU4Jp7ngSAI2uVyPZIk6dZmUZKk2w6H4xghBPF4HK7vWLbZbDCdTp+rqvpUkiS0RvV6/bTf7x8wDHMViURqm/AGAMgURZ232+1X1Wr102KxuEwmk3lZlo/7/f7BcrkkSZKs2e12tHXH/x/gHsY4jTE+0jQNGYYBCCFgGOaKJMkfjUaDZximGQ6HXzSbzZ+ZTMbY6oIxFgqFgqPT6YAgCMBxXM1ut6N0Op0fj8chi8XyjWXZ98Fg8DuCHZLNZh+USqWP8/n8idvt/hUKhV7u7QK9Xu8fmqanAJBQVXUfAGY7TQQAKBaLN8fjsdDtdh/run72Dzhf7XLe2UevAAAAAElFTkSuQmCC) no-repeat right 3px center; }
+      #conversejs .chatroom .invited-contact.tt-input:focus {
+        border-color: #E76F51; }
+    #conversejs .chatroom .invited-contact.tt-hint {
+      color: transparent; }
+  #conversejs .chatroom .tt-dropdown-menu {
+    margin: 0 1px 0 1px;
+    width: 96px;
+    max-height: 250px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    text-overflow: ellipsis;
+    background: #E76F51;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px; }
+    #conversejs .chatroom .tt-dropdown-menu .tt-suggestion p {
+      color: white;
+      cursor: pointer;
+      font-size: 11px; }
+    #conversejs .chatroom .tt-dropdown-menu .tt-suggestion .tt-highlight {
+      background-color: #D24E2B; }
+    #conversejs .chatroom .tt-dropdown-menu .tt-suggestion p:hover {
+      background-color: #FF977C; }
 
 #conversejs #minimized-chats {
   border-top-left-radius: 4px;

sass/_chatrooms.scss

@@ -31,6 +31,7 @@
                     height: 100%;
                     min-width: $chat-width;
                     .chat-content {
+                        margin-top: 0.5em;
                         padding: 0.5em 0.5em 0 0.5em; // Work around a weird box-sizing issue in Chromium related to bottom padding.
                     }
                 }
@@ -94,13 +95,48 @@
         .chat-textarea {
             border-bottom-right-radius: 0;
         }
+
         .invited-contact {
             margin: -1px 0 0 -1px;
             width: 100px;
             border: 1px solid #999;
+            &.tt-input {
+                margin: 1px;
+                width: 97px;
+                width: calc(100% - 2px);
+                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkBCjE0uzKkOgAAAidJREFUKM+N0k+IEnEUB/D3cyscdagkWpHV0WGWREXm0AgOGkSJ07kh2UXYU5cOewm6Bp0KXG/tpSCv6hyEFQIhMEaE3yERYfwTOoqKGLQxDAbqYadLgu7J7/XxeY/3ez8EACDLsgljfMfj8ZxUKhXXYDAAnueBoqgyAMipVOovXAuSZdnUaDQeDofDs16vFyUIAjRNUwmCoG02G1AUdZ5IJN7GYrHfm3AvEAjcnUwmX0ajUdRqtV74fL6sruufKYoa6bp+fzabPUMI7ZfL5eImNHk8npNerxc1m80XHMe98fv9H3K5XDkSibxjWfb1arWaYoyPMMbCFqxUKi6CIODw8LDmdDq7oigaAACiKK5omv7KcdylpmlIkiTHFlRVFTRNUxVFqa/ROqIoGoqi5A3DgFartfU4Jp7ngSAI2uVyPZIk6dZmUZKk2w6H4xghBPF4HK7vWLbZbDCdTp+rqvpUkiS0RvV6/bTf7x8wDHMViURqm/AGAMgURZ232+1X1Wr102KxuEwmk3lZlo/7/f7BcrkkSZKs2e12tHXH/x/gHsY4jTE+0jQNGYYBCCFgGOaKJMkfjUaDZximGQ6HXzSbzZ+ZTMbY6oIxFgqFgqPT6YAgCMBxXM1ut6N0Op0fj8chi8XyjWXZ98Fg8DuCHZLNZh+USqWP8/n8idvt/hUKhV7u7QK9Xu8fmqanAJBQVXUfAGY7TQQAKBaLN8fjsdDtdh/run72Dzhf7XLe2UevAAAAAElFTkSuQmCC ) no-repeat right 3px center;
+                &:focus {
+                    border-color: $chatroom-head-color;
+                }
+            }
+            &.tt-hint {
+                color: transparent;
+            }
         }
-        .invited-contact.tt-input {
-            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkBCjE0uzKkOgAAAidJREFUKM+N0k+IEnEUB/D3cyscdagkWpHV0WGWREXm0AgOGkSJ07kh2UXYU5cOewm6Bp0KXG/tpSCv6hyEFQIhMEaE3yERYfwTOoqKGLQxDAbqYadLgu7J7/XxeY/3ez8EACDLsgljfMfj8ZxUKhXXYDAAnueBoqgyAMipVOovXAuSZdnUaDQeDofDs16vFyUIAjRNUwmCoG02G1AUdZ5IJN7GYrHfm3AvEAjcnUwmX0ajUdRqtV74fL6sruufKYoa6bp+fzabPUMI7ZfL5eImNHk8npNerxc1m80XHMe98fv9H3K5XDkSibxjWfb1arWaYoyPMMbCFqxUKi6CIODw8LDmdDq7oigaAACiKK5omv7KcdylpmlIkiTHFlRVFTRNUxVFqa/ROqIoGoqi5A3DgFartfU4Jp7ngSAI2uVyPZIk6dZmUZKk2w6H4xghBPF4HK7vWLbZbDCdTp+rqvpUkiS0RvV6/bTf7x8wDHMViURqm/AGAMgURZ232+1X1Wr102KxuEwmk3lZlo/7/f7BcrkkSZKs2e12tHXH/x/gHsY4jTE+0jQNGYYBCCFgGOaKJMkfjUaDZximGQ6HXzSbzZ+ZTMbY6oIxFgqFgqPT6YAgCMBxXM1ut6N0Op0fj8chi8XyjWXZ98Fg8DuCHZLNZh+USqWP8/n8idvt/hUKhV7u7QK9Xu8fmqanAJBQVXUfAGY7TQQAKBaLN8fjsdDtdh/run72Dzhf7XLe2UevAAAAAElFTkSuQmCC ) no-repeat right 3px center;
+        .tt-dropdown-menu {
+            margin: 0 1px 0 1px;
+            width: 96px;
+            max-height: 250px;
+            overflow-x: hidden;
+            overflow-y: auto;
+            text-overflow: ellipsis;
+            background: $chatroom-head-color;
+            border-bottom-right-radius: $chatbox-border-radius;
+            border-bottom-left-radius: $chatbox-border-radius;
+
+            .tt-suggestion {
+                p {
+                    color: white;
+                    cursor: pointer;
+                    font-size: 11px;
+                }
+                .tt-highlight {
+                    background-color: #D24E2B;
+                }
+                p:hover {
+                    background-color: #FF977C;
+                }
+            }
         }
     }
 }

sass/_core.scss

@@ -82,36 +82,6 @@
         display: table-cell;
     }
 
-    .tt-highlight {
-        background-color: #00230F;
-    }
-    .tt-suggestion {
-        p {
-            color: white;
-            text-shadow: rgba(0, 0, 0, 0.51) 0 -1px 0;
-            cursor: pointer;
-            font-size: 11px;
-        }
-        p:hover {
-            background-color: #00230F;
-            .tt-highlight {
-                background-color: #00230F;
-                background: #27774A;
-            }
-        }
-    }
-    .tt-dropdown-menu {
-        margin: 0 1px 0 1px;
-        width: 96px;
-        max-height: 250px;
-        overflow-x: hidden;
-        overflow-y: auto;
-        text-overflow: ellipsis;
-        background: #27774A;
-        border-bottom-right-radius: $chatbox-border-radius;
-        border-bottom-left-radius: $chatbox-border-radius;
-    }
-
     .error {
         color: red;
     }
@@ -157,7 +127,6 @@
     .activated {
         display: block !important;
     }
-
     .pure-button {
         border-radius: $chatbox-border-radius;
     }

sass/_variables.scss

@@ -20,6 +20,7 @@ $chat-textarea-height: 70px !default;
 $message-them-color: #1A9707 !default;
 $roster-height: 194px !default;
 
+$input-focus-color: #1A9707 !default;
 $highlight-color: #DCF9F6 !default;
 
 $controlbox-head-color: #577BDD !default;

sass/pure/_forms.scss

@@ -79,7 +79,7 @@ since IE8 won't execute CSS that contains a CSS3 selector.
 .pure-form select:focus,
 .pure-form textarea:focus {
     outline: 0;
-    border-color: #129FEA;
+    border-color: $input-focus-color;
 }
 
 /*
@@ -88,14 +88,14 @@ since IE8 won't execute CSS that contains a CSS3 selector.
 */
 .pure-form input:not([type]):focus {
     outline: 0;
-    border-color: #129FEA;
+    border-color: $input-focus-color;
 }
 
 .pure-form input[type="file"]:focus,
 .pure-form input[type="radio"]:focus,
 .pure-form input[type="checkbox"]:focus {
-    outline: thin solid #129FEA;
-    outline: 1px auto #129FEA;
+    outline: thin solid $input-focus-color;
+    outline: 1px auto $input-focus-color;
 }
 .pure-form .pure-checkbox,
 .pure-form .pure-radio {