Style invite dropdown

css/converse.css

@@ -2469,7 +2469,10 @@
           width: calc(30% - 1em); }
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul,
         #conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul {
-          padding: 0.2em; }
+          padding: 0; }
+          #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul li,
+          #conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul li {
+            padding: .5em; }
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul,
         #conversejs .chatroom .box-flyout .chatroom-body .occupants ul {
           padding: 0.3em 0;
@@ -2684,7 +2687,6 @@
     left: 1em;
     width: 0;
     height: 0;
-    padding: .4em;
     background: white;
     border: inherit;
     border-right: 0;
@@ -2696,22 +2698,22 @@
     text-overflow: ellipsis;
     overflow-x: hidden;
     position: relative;
-    padding: .2em .5em;
     cursor: pointer; }
   #converse-embedded-chat div.awesomplete > ul > li:hover,
   #conversejs div.awesomplete > ul > li:hover {
-    background: #b8d3e0;
-    color: black; }
+    background: #E77051;
+    color: white; }
   #converse-embedded-chat div.awesomplete > ul > li[aria-selected="true"],
   #conversejs div.awesomplete > ul > li[aria-selected="true"] {
     background: #3d6d8f;
     color: white; }
   #converse-embedded-chat div.awesomplete mark,
   #conversejs div.awesomplete mark {
-    background: #eaff00; }
+    background: #FFB9A7; }
   #converse-embedded-chat div.awesomplete li:hover mark,
   #conversejs div.awesomplete li:hover mark {
-    background: #b5d100; }
+    background: #A53214;
+    color: white; }
   #converse-embedded-chat div.awesomplete li[aria-selected="true"] mark,
   #conversejs div.awesomplete li[aria-selected="true"] mark {
     background: #3d6b00;

css/inverse.css

@@ -2595,7 +2595,10 @@ body {
           width: calc(30% - 1em); }
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul,
         #conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul {
-          padding: 0.2em; }
+          padding: 0; }
+          #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul li,
+          #conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul li {
+            padding: .5em; }
         #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul,
         #conversejs .chatroom .box-flyout .chatroom-body .occupants ul {
           padding: 0.3em 0;
@@ -2736,10 +2739,6 @@ body {
           width: 25%;
           width: -webkit-calc(30% - 2em);
           width: calc(30% - 2em); }
-        #conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul {
-          padding: 0.5em; }
-          #conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul li {
-            padding: 0.3em 0; }
         #conversejs .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list {
           height: -webkit-calc(100% - 212px);
           height: calc(100% - 212px); }
@@ -2817,7 +2816,6 @@ body {
     left: 1em;
     width: 0;
     height: 0;
-    padding: .4em;
     background: white;
     border: inherit;
     border-right: 0;
@@ -2829,22 +2827,22 @@ body {
     text-overflow: ellipsis;
     overflow-x: hidden;
     position: relative;
-    padding: .2em .5em;
     cursor: pointer; }
   #converse-embedded-chat div.awesomplete > ul > li:hover,
   #conversejs div.awesomplete > ul > li:hover {
-    background: #b8d3e0;
-    color: black; }
+    background: #E77051;
+    color: white; }
   #converse-embedded-chat div.awesomplete > ul > li[aria-selected="true"],
   #conversejs div.awesomplete > ul > li[aria-selected="true"] {
     background: #3d6d8f;
     color: white; }
   #converse-embedded-chat div.awesomplete mark,
   #conversejs div.awesomplete mark {
-    background: #eaff00; }
+    background: #FFB9A7; }
   #converse-embedded-chat div.awesomplete li:hover mark,
   #conversejs div.awesomplete li:hover mark {
-    background: #b5d100; }
+    background: #A53214;
+    color: white; }
   #converse-embedded-chat div.awesomplete li[aria-selected="true"] mark,
   #conversejs div.awesomplete li[aria-selected="true"] mark {
     background: #3d6b00;

sass/_awesomplete.scss

@@ -61,7 +61,6 @@
         top: -.43em;
         left: 1em;
         width: 0; height: 0;
-        padding: .4em;
         background: white;
         border: inherit;
         border-right: 0;
@@ -74,13 +73,12 @@
         text-overflow: ellipsis;
         overflow-x: hidden;
         position: relative;
-        padding: .2em .5em;
         cursor: pointer;
     }
     
     div.awesomplete > ul > li:hover {
-        background: hsl(200, 40%, 80%);
-        color: black;
+        background: $red;
+        color: $inverse-link-color;
     }
     
     div.awesomplete > ul > li[aria-selected="true"] {
@@ -89,11 +87,12 @@
     }
     
     div.awesomplete mark {
-        background: hsl(65, 100%, 50%);
+        background: $lightest-red;
     }
     
     div.awesomplete li:hover mark {
-        background: hsl(68, 100%, 41%);
+        background: $darkest-red;
+        color: $inverse-link-color;
     }
     
     div.awesomplete li[aria-selected="true"] mark {

sass/_chatrooms.scss

@@ -120,7 +120,10 @@
                     }
                     .awesomplete {
                         ul {
-                            padding: 0.2em;
+                            padding: 0;
+                            li {
+                                padding: .5em;
+                            }
                         }
                     }
                     ul {

sass/inverse/_chatrooms.scss

@@ -45,14 +45,6 @@
                         width: 25%;
                         @include calc(width, '30% - 2em');
                     }
-                    .awesomplete {
-                        ul {
-                            padding: 0.5em;
-                            li {
-                                padding: 0.3em 0;
-                            }
-                        }
-                    }
                     ul {
                         &.occupant-list {
                             @include calc(height, '100% - 212px');