Merge branch 'gm-css' into 'master'

fix: visual bugs resolved

See merge request !15

dist/converse.css

@@ -9318,6 +9318,8 @@ readers do not read off random characters that represent icons */
   --hd-violet: #6259F5;
   --hd-subdued-color: #9BA0A7;
   --hd-chat-mention: #FFD759;
+  --hd-chat-correcting-color: #FFF2C7;
+  --hd-hightlight-color: #FEE287;
   --badge-group-color: #9BA0A7;
   --chat-status-online: var(--green);
   --chat-status-busy: var(--redder-orange);
@@ -9692,9 +9694,9 @@ body.converse-fullscreen {
   #conversejs ::placeholder {
     color: var(--subdued-color); }
   #conversejs ::selection {
-    background-color: var(--highlight-color); }
+    background-color: var(--hd-hightlight-color); }
   #conversejs ::-moz-selection {
-    background-color: var(--highlight-color); }
+    background-color: var(--hd-hightlight-color); }
   @media screen and (max-width: 480px) {
     #conversejs {
       margin: 0;
@@ -9755,6 +9757,8 @@ body.converse-fullscreen {
     color: var(--hd-subdued-color); }
   #conversejs .fa:hover, #conversejs .far:hover, #conversejs .fas:hover {
     color: var(--hd-violet); }
+  #conversejs div#converse-modals {
+    display: none; }
   #conversejs .modal {
     background-color: rgba(0, 0, 0, 0.4); }
     #conversejs .modal .modal-body p {
@@ -10404,7 +10408,7 @@ body.converse-fullscreen {
       #conversejs .chatbox .sendXMPPMessage .chat-textarea.spoiler {
         height: 42px; }
       #conversejs .chatbox .sendXMPPMessage .chat-textarea.correcting {
-        background-color: var(--chat-correcting-color); }
+        background-color: var(--hd-chat-correcting-color); }
     #conversejs .chatbox .sendXMPPMessage .send-button {
       position: static;
       left: var(--send-button-margin);
@@ -10465,7 +10469,8 @@ body.converse-fullscreen {
               display: flex;
               flex-direction: column; }
           #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a {
-            color: var(--link-color); }
+            color: var(--link-color);
+            text-decoration: none; }
           #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu .emoji-picker-container {
             background: white; }
           #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
@@ -10506,6 +10511,7 @@ body.converse-fullscreen {
             #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover {
               background-color: var(--highlight-color); }
         #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.upload-file a.fa-paperclip {
+          display: none;
           text-decoration: none; }
         #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul {
           z-index: 99; }
@@ -11670,9 +11676,9 @@ body.converse-fullscreen {
         color: var(--chat-info-color); }
       #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-info,
       #conversejs .chatroom .box-flyout .chatroom-body .chat-info {
-        display: var(--chat-info-display);
         color: var(--chat-info-color);
-        line-height: normal; }
+        line-height: normal;
+        display: none; }
         #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-info.badge,
         #conversejs .chatroom .box-flyout .chatroom-body .chat-info.badge {
           color: var(--chat-head-text-color); }
@@ -11842,6 +11848,7 @@ body.converse-fullscreen {
     color: white; }
   #conversejs.converse-embedded .chatroom .sendXMPPMessage .suggestion-box__results--above,
   #conversejs .chatroom .sendXMPPMessage .suggestion-box__results--above {
+    border: 1px solid var(--hd-chat-mention);
     bottom: 4.5em; }
   #conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-toolbar,
   #conversejs .chatroom .sendXMPPMessage .chat-toolbar {
@@ -11866,7 +11873,7 @@ body.converse-fullscreen {
       outline: none; }
     #conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-textarea.correcting,
     #conversejs .chatroom .sendXMPPMessage .chat-textarea.correcting {
-      background-color: var(--chatroom-correcting-color); }
+      background-color: var(--hd-chat-correcting-color); }
   #conversejs.converse-embedded .chatroom .sendXMPPMessage .send-button,
   #conversejs .chatroom .sendXMPPMessage .send-button {
     background-color: var(--message-input-color); }
@@ -11986,7 +11993,7 @@ body.converse-fullscreen {
     font-size: 120%; }
   #conversejs.converse-embedded .chatroom .box-flyout .sendXMPPMessage .chat-textarea {
     padding: 0.5em;
-    font-size: 110%; }
+    font-size: var(--font-size); }
   #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body {
     height: 100%; }
     #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container {
@@ -12026,11 +12033,18 @@ body.converse-fullscreen {
 #conversejs .message .mention {
   background: var(--hd-chat-mention);
   border-radius: 14px;
+  color: var(--message-text-color);
+  font-size: var(--font-size);
   font-weight: normal;
   padding: 1px 12px; }
 
 #conversejs .message .mention--self {
-  font-weight: normal; }
+  background: var(--hd-violet);
+  color: white;
+  padding: 4px 12px; }
+  #conversejs .message .mention--self::selection {
+    background: var(--hd-violet);
+    color: white; }
 
 #conversejs .message.date-separator {
   height: 2em;
@@ -12097,9 +12111,9 @@ body.converse-fullscreen {
     #conversejs .message.chat-msg:hover .chat-msg__actions .chat-msg__action {
       opacity: 1; }
   #conversejs .message.chat-msg.correcting.groupchat {
-    background-color: var(--chatroom-correcting-color); }
+    background-color: var(--hd-chat-correcting-color); }
   #conversejs .message.chat-msg.correcting:not(.groupchat) {
-    background-color: var(--chat-correcting-color); }
+    background-color: var(--hd-chat-correcting-color); }
   #conversejs .message.chat-msg .spoiler {
     margin-top: 0.5em; }
   #conversejs .message.chat-msg .spoiler-hint {
@@ -12139,7 +12153,8 @@ body.converse-fullscreen {
     overflow-wrap: break-word; }
   #conversejs .message.chat-msg .chat-msg__edit-modal {
     cursor: pointer;
-    padding-right: 0.5em; }
+    padding-right: 0.5em;
+    display: none; }
   #conversejs .message.chat-msg.headline .chat-msg__body {
     margin-left: 0; }
   #conversejs .message.chat-msg .chat-msg__subject {
@@ -12419,16 +12434,17 @@ body.converse-fullscreen {
     transition-timing-function: ease; } }
 
 #conversejs .suggestion-box > ul > li[aria-selected="true"] {
-  background: var(--completion-dark-color);
-  color: var(--inverse-link-color); }
+  background: var(--hd-chat-mention);
+  color: var(--message-text-color); }
 
 #conversejs .suggestion-box li:hover mark {
   background: var(--completion-light-color);
   color: var(--inverse-link-color); }
 
 #conversejs .suggestion-box li[aria-selected="true"] mark {
-  background: var(--completion-normal-color);
-  color: inherit; }
+  background: inherit;
+  color: inherit;
+  font-weight: bold; }
 
 #conversejs.converse-fullscreen .suggestion-box__results--above {
   bottom: 4.5em; }